ul {
  text-align: left;  
  font-size:1.0rem;
  font-style: italic;
  list-style-position: inside;
  padding-top: 50px;
}
 /* Container holding the image and the text */
.contact {
  position: relative;
  text-align: left;
  color: white;
}
 
/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 25px;
  right: 25px;
}
 
.end_bar {
  position: relative;
  height: 30px;
  width: 100%;
  background-color: black;
  color: white;
}
.rswd_link {
  position: absolute;
  bottom: 3px;
  right: 25px;
} 
.hero-phone-div {
	font-family: NotoSans,Arial,"Arial Unicode MS",sans-serif;
	padding-top:10px;
	font-weight: 300; 
	font-size: 130%;
	letter-spacing: 1px;
 }
.hero-phone::before {
  content: "\2706"; /* Black Telephone */
  padding-right: 8px;
}
.hero-phone {
	margin-left: 40px;
 }
.landing-div {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: flex-start;
}
.hero-image-home {
	width:100%;
	min-height:460px; 
	max-height:500px;
	margin-top: 45px;
}
.hero-div {
    position: absolute;
    top: 15%;
    left: 2%;
	background-color: #2e3e4c99;
    padding: 15px;
	z-index:100;
}
.hero-text {
	font-family: NotoSans,Arial,"Arial Unicode MS",sans-serif;
	color: #f5fafbed;
}
.hero-headline-div {
	text-align: center;
	font-weight: 600; 
	font-size: 230%;
	letter-spacing: 2px;
	line-height: 1;
    padding-bottom: 20px;
    text-transform: uppercase;
}
.hero-subtext-div {
	text-align: center;
	/*background-color: rgba(89, 127, 166, 0.17);*/
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: 300; 
	letter-spacing: 2px;
	font-size: 120%;
}

.hero-button-container {
    /* Optional: Add spacing or alignment to the container div */
    text-align: center;
    margin: 7px;
}

.hero-button-link {
    /* Display as a block or inline-block to control size and padding */
    display: inline-block;
    padding: 5px 5px; 
    background-color: #0b6e8c;
    color: white;              /* White text */
    border: none;              /* Remove default anchor border */
    border-radius: 2px;        /* Rounded corners */
    cursor: pointer;           /* Change cursor to pointer on hover */
    text-decoration: none;     /* Remove default anchor underline */ 
    font-weight: 200; 
	font-size: 110%;
	letter-spacing: 0.5px; 
    text-align: center;
}
/* Add hover effect for better user experience */
.hero-button-link:hover {
    background-color: #4995c5;
}



.fade-div {
  position: relative; /* Establishes positioning context for children */
  height: 500px;      /* Explicit height is needed as absolute children don't contribute to height */
  width: 100%;       /* Explicit width */
  margin-top:50px;
}
.fade-div img {
  width: 100%; /* Make the image take the full dimensions of the container */
  height: 100%;
  object-fit: cover;
}

.fade {
  position: absolute; /* Takes image out of the normal flow */
  top: 0;
  left: 0;
  opacity: 0; /* Hide all images by default */
  transition: opacity 1s ease-in-out; /* Smooth transition for opacity change */
}

/* The 'active' class defines which image is currently visible */
.fade.img-active {
  opacity: 1;
}

.slide-dot {
  display: flex;
  justify-content: center;
  align-items: center;
  padding:5px;
  width:100%;
  background-color: #2b4e2b;
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot-active {
  background-color: #72818A;
}



.container {
	width:90%;
	max-width:1100px;
	margin:auto;
} 
.section {
	padding:40px 0;
	text-align:center;
	background-image: linear-gradient(to top, #0f1f27a3,#c8ced6);
	min-height: 400px;
}
.section h2 {
  margin-bottom: 30px;
  color: #0f2e45;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 200%;
  border-top: 2px solid #0f2e45 !important;
  padding-top: 20px;
  line-height: 1.3;
}

.section-s {
	padding: 40px 0;
  text-align: center;
  background-image: linear-gradient(to top, #64707a,#30404f);
  min-height: 400px;
}

.section-s h2 {
  margin-bottom: 30px;
  color: #e8e8e8;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 200%;
  border-top: 2px solid #e7e2e2 !important;
  padding-top: 20px;
}

.grid {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.card {
  background: #d2d2d2;
  padding: 5px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(6, 6, 6, 0.44);
}
.end_bar {
  position: relative;
  height: 30px;
  width: 100%;
  background-color: black;
  color: white;
}

.sk-wwu-text {
	color:#040404;
	font-size:1.2rem;
	line-height:1.4;
	letter-spacing:0.01em;
	margin-top:0.6rem;
	text-align:center;
}
p.sk-wwu-p {
    margin-bottom: 15px; /* Adds 20 pixels of space below each paragraph */
    margin-top: 25px;    /* Adds 10 pixels of space above each paragraph */
    padding: 0;          /* Removes any default inner padding */
    line-height: 1.0;    /* Controls space between lines *within* the paragraph */
}	
.sk-container {
	display:flex;
	flex-wrap:wrap;
	flex-direction:row;
	align-items:center;
	justify-content: center;
} 
.sk-container-text {   
    min-width:80%;
	text-align:center;
}	
.sk-title {
   text-align: center;
   text-transform: uppercase;
   font-size: 30px;
}
.sk-card-wwu {
	min-width:350px;
	max-width:450px;
	margin-top: 1rem;
	margin-right: 1rem;
	background-color:rgba(70, 86, 108, 0.13);
	border-radius:15px;
	padding-top:20px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	text-align:left;
}
.sk-card {
    min-width:350px;
	max-width:450px;
	margin-top: 1rem;
	margin-right: 1rem;
	background-color: rgba(193, 196, 199, 0.36);
	border-radius:15px;
	padding-top:20px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	text-align:left;
}
.sk-card-sd {
    min-width:450px;
	height:190px;
}
.sk-card-pattern { 
    min-height:150px;
	background-color: transparent;
	background-size: 12px 12px;
	background-image: repeating-linear-gradient(45deg, rgba(172, 171, 176, 0.14) 0, rgba(172, 171, 176, 0.14) 1.2px, transparent 0, transparent 50%);
}
.sk-heading {
	color:#eef2f4;
	font-weight:600;
	letter-spacing:0.05em;
	 
	text-transform:uppercase;
    margin-top:15px;
	position:relative;
}

.sk-description-text {
	color: #0F2E45;
    font-size: 150%;
	line-height:1.4;
	letter-spacing:0.01em;
	margin-top:0.6rem;
	text-align: center;
}
.sk-text {
	color: #E7EDEE;
    font-size: 130%;
	line-height:1.4;
	letter-spacing:0.01em;
	margin-top:0.6rem;
	text-align: center;
}
.sk-text-proj {
	color: #000;
	font-size: 120%;
	line-height:1.4;
	letter-spacing:0.01em;
	margin-top:0.6rem;
	text-align: center;
}
.sk-project {
    color:#e3e6ea;
}

.about-tainer {
	width:80%;	
}
.about-headding-text {
	color: #698ab7;
	text-align: center;
	line-height: 1.3;
}
.about-headding-text-grey {
	color: #c6cddc;
	text-align: center;
}
.menue-tainer{background-color:#f1f1f1;}
.wwu-tainer{min-height: 200px;background-color:#30404f;}
.tel-tainer{min-height: 350px;background-color:#30404f;}
.bas-tainer{min-height: 350px;background-color:#30404f;}
.hvac-tainer{min-height: 380px;background-color:#30404f;}
.proj-tainer{min-height: 380px;background-color:#f1f1f1; background-image: linear-gradient(to top, #0b809b,#327184);}

.topnav a {
  color: white;
  font-size: 17px;
}

#topnav {
	display: none;
}
.mobile-div {
	display: none;
}
@media (min-width: 700px) {
	.hero-div {
		max-width:500px;
	}
}
@media (max-width: 700px) {
	ul {
	   text-align: left;  
	   font-size:1.2rem;
	   font-style: normal;
	   list-style-position: inside;
	   padding-top: 50px;
	   padding-left: 6px;
    }
	.hero-div {
		position: relative;
		left:0;
		max-width:100%;
	}
	.hero-phone-div {
		font-family: NotoSans,Arial,"Arial Unicode MS",sans-serif;
		padding-top:90px;
		font-weight: 600; 
		font-size: 160%;
		letter-spacing: 1px;
		color: #455161;
    }
	.hero-image-home {
		margin-top:130px;
		min-height:auto;
    }
	.topnav { 
	  background-color: #022644;
	  position: relative;
	}
	#topnav {
	  display: block;
	}
	.topnav #myLinks {
	  display: none;
	}
	.topnav a {
	  color: white;
	  padding: 10px 25px;
	  display: block;
	  font-size: 22px;
	}
	.topnav a.icon {
	  display: block;
	  position: absolute;
	  right: 0;
	  top: -110px;
	}
	.topnav a:hover {
	  background-color: #4995c5;
	  color: black;
	}
	.active {
	  background-color: #04AA6D;
	  color: white;
	}
	.sk-card {
    min-width:90%;
	max-width:90%;
	}
	.sk-card-sd {
	height: 240px;
	}
	.top-left {
	  font-size: 20px;
	}
	about-tainer {
	font-size: 20px;
	}
}
.bar1, .bar2, .bar3 {
  width: 55px; /* Adjust width as needed */
  height: 9px; /* Adjust height as needed */
  background-color: #434d57;
  margin: 10px 0; /* Space between bars */
  transition: 0.4s; /* Smooth transition for animations */
}