#header-container{
  width:85%;
}

#header-container li{
  margin:auto;
  padding:auto;
}

#navbarHeader{
  font-size:48px;
}

#header-D{
  color: lawngreen;
}

#header-G{
  color: #0d6efd;
}

#header-U{
  color: white;
}

#showcase-image{
  opacity: 1;
}

.showcase-textbox h1{
  padding: 0px; font-size:32px;
}

.showcase-textbox h4{
  font-weight: bold; 
  font-family: poppins; 
  color:white; 
  font-size:72px;
}


#about{
  padding: 48px;

}

  #col-lg-6{
    padding:2rem;
  }

#col-lg-6 h1{
  font-weight: bold; 
  color: white;
}


#col-lg-6 h3{
  color: white;
}

#solutions{
  color: white;
}

#request-card{
  background-color: black; 
  color: white;
}



#services-contact{
  color: black;
}

#consult-contact{
  color: black;
}


#services h1{
  padding-top: 2rem;
}

#geo-services i {
  padding-bottom: 1rem;
}

#services i {
  padding-bottom: 1rem;
}

#services-container {
  padding-bottom: 2rem;
  text-align: center;
}

.services-card {

  background-color: #212529;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  margin: 10px;
  height: 100%;

}

.services-card p {
  text-align: center;
}


.services-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px lawngreen; /* Adjust color and size as needed */

}





#tier h1{
  padding-top: 2rem;
}

#tier i {
  padding-bottom: 1rem;
}
#tier-container {
  padding-bottom: 2rem;
  text-align: center;
}

.tier-card {
  position: relative;
  background-color: #212529;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  margin: 10px;
  height: 100%;

}

.table-card {
  position: relative;
  background-color: #212529;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  margin: 10px;
  height: 100%;

}


.table-card i, span, td, b {
  color: white;
}


#service-tier-comparison ul {
  list-style: none;
  padding: 0px;
}

.compare-card {
  position: relative;
  background-color: #212529;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  margin: 10px;
  height: 100%;

}

.request-card {
  position: relative; 
  text-align: center;
  background-color: black;
  cursor: pointer; 
}

.request-card input[type="checkbox"] {
  position: absolute; 
  top: 5px; 
  right: 5px; 
}

.request-card:hover{
  transform: translateY(-5px);
  
}

.compare-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px white; 
}



.tier-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px #0d6efd; 

}

#tier-learnmore {
  background-color: black;
  font-size: 24px;
}
#tier-learnmore:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px lawngreen;
}

.big-card {
  position: relative;
  background-color: black;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
  transition: transform 0.3s ease-in-out;
  margin: 10px;
  height: 100%;
  padding-bottom: 10rem;
  margin-bottom: 5rem;
}

/* #contact h1 {
  padding-top: 2rem;
} */

#contact-container {
  padding-bottom: 4rem;
  padding-top:2rem;
}

#contact-container input[type="text"],
#contact-container button {
  height: 40px; 
  vertical-align: middle;
  border-radius: 16px;
}

.footer h1 {
  font-size: 1.5rem;
}

nav .container{
  max-width: 1250px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;

}
.container {
  max-width: 1100px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
}

.card {
  background-color: black;
  color: #333;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  margin: 10px;
}

.btn {
  display: inline-block;
  padding: 10px 30px;
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 5px;
}

.btn-outline {
  background-color: transparent;
  border: 1px #fff solid;
}

.btn:hover {
  transform: scale(0.98);
}

/* Backgrounds & colored buttons */
.bg-primary,
.btn-primary {
  background-color: var(#212529);
  color: #fff;
}

.bg-secondary,
.btn-secondary {
  background-color: var(--secondary-color);
  color: #fff;
}

.bg-dark,
.btn-dark {
  background-color: var(--dark-color);
  color: #fff;
}

.bg-light,
.btn-light {
  background-color: var(--light-color);
  color: #333;
}

.bg-primary a,
.btn-primary a,
.bg-secondary a,
.btn-secondary a,
.bg-dark a,
.btn-dark a {
  color: #fff;
}

/* Text colors */
.text-primary {
  color: var(--primary-color);
}

.text-secondary {
  color: var(--secondary-color);
}

.text-dark {
  color: var(--dark-color);
}

.text-light {
  color: var(--light-color);
}

/* Text sizes */
.lead {
  font-size: 20px;
}

.sm {
  font-size: 1rem;
}

.md {
  font-size: 2rem;
}

.lg {
  font-size: 3rem;
}

.xl {
  font-size: 4rem;
}

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

/* Alert */
.alert {
  background-color: var(--light-color);
  padding: 10px 20px;
  font-weight: bold;
  margin: 15px 0;
}

.alert i {
  margin-right: 10px;
}

.alert-success {
  background-color: var(--success-color);
  color: #fff;
}

.alert-error {
  background-color: var(--error-color);
  color: #fff;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Margin */
.my-1 {
  margin: 1rem 0;
}

.my-2 {
  margin: 1.5rem 0;
}

.my-3 {
  margin: 2rem 0;
}

.my-4 {
  margin: 3rem 0;
}

.my-5 {
  margin: 4rem 0;
}

.m-1 {
  margin: 1rem;
}

.m-2 {
  margin: 1.5rem;
}

.m-3 {
  margin: 2rem;
}

.m-4 {
  margin: 3rem;
}

.m-5 {
  margin: 4rem;
}

/* Padding */
.py-1 {
  padding: 1rem 0;
}

.py-2 {
  padding: 1.5rem 0;
}

.py-3 {
  padding: 2rem 0;
}

.py-4 {
  padding: 3rem 0;
}

.py-5 {
  padding: 4rem 0;
}

.p-1 {
  padding: 1rem;
}

.p-2 {
  padding: 1.5rem;
}

.p-3 {
  padding: 2rem;
}

.p-4 {
  padding: 3rem;
}

.p-5 {
  padding: 4rem;
}



/* end boiler plate css */


body {
  padding: 0px;
  background-color:#f4f4f4;
	color:#555;
	font-family:"Helvetica Neue", Helvetica, sans-serif;
	font-size:16px;
	line-height:1.6em;
	margin:0;
}



* {
	box-sizing:border-box;
}


.showcase-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

.showcase-container h1 {
  color: white;
  padding: 1rem 1rem;
  
}

.showcase-container img {
  width:100%; 
  height: 50vw;
  
}

.showcase-textbox {
  width: 100%;
  height: 50vw;
  position: absolute; /* Position the text box absolutely */
  top: 50%; /* Position the top of the text box at the vertical center of the parent container */
  left: 50%; /* Position the left side of the text box at the horizontal center of the parent container */
  transform: translate(-50%, -50%); /* Center the text box both horizontally and vertically */
  text-align: center;
  background: rgba(14, 15, 15, 0.75); /* Background color with opacity */
  padding: 20px;
}

.showcase-text{
  font-size: 48px;
  font-weight:bold;
  position: absolute; /* Position the text box absolutely */
  top: 50%; /* Position the top of the text box at the vertical center of the parent container */
  left: 50%; /* Position the left side of the text box at the horizontal center of the parent container */
  transform: translate(-50%, -50%); /* Center the text box both horizontally and vertically */
  text-align: center;
  padding: 20px;
  
}

hr {
  border: none;
  border-top: 1px solid; /* Example color */
  margin-bottom: auto; /* Adjust margin as needed */
  
}

#about img{
  height:90%;
  width:45vw;
  border-radius:15px;
  margin-top: 2rem;
}



/* Caption text */
.text {

  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;

}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* End Slideshow CSS */