/* CSS styles */

     * {
  font-family: Arial, sans-serif;
} 


    .section{
    padding:60px 40px;
}
    
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      
    }

    header {
      /* background-color: rgba(99,119, 138, 0.5); 
      background-image: radial-gradient( rgba(60, 80, 120, 0.5), rgba(80, 100, 120,1)); */
      background-image: url(images/CES-5.JPG) ;
      background-repeat: no-repeat;
      background-position: calc(100%);
      background-size: cover;
      background-position-x: inherit;
      color: #fff;
      padding: 10px 90px;
      text-align: left;
      border-radius: 0px;
      height: 650px;
    }

    nav {
      display: flex;
      justify-content: center;
      background-color: rgba(79, 99, 118, 0.7);
      border-radius: 10px;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      padding: 10px 20px;
      margin: 0 5px;
      border-radius: 10px;
    }

    nav a:hover {
      background-color: rgb(224, 156, 156);
    }

      img {
        margin: 15px;
        width: 200px;
        height: auto;
      }
     /* .container {
      max-width: 1150px;
      margin: 20px auto;
      padding: 0 20px;
    }*/

    footer {
      /* background-color: rgba(59, 79, 98, 1); */
      background-image: radial-gradient( rgba(100, 120, 140, 1), rgba(40, 60, 80,1)); 
      /* background-image: url(images/Footer3.JPG) ;
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: cover; */
      color: #fff;
      text-align: center;
      padding: 10px 90px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }
    /*footer {
  position: relative;
  margin-top: 50px;
}  */

/*Power Page added For Power Section  */

        .container {
            width: 90%;
            max-width: 1200px;
            margin: 40px auto;
        }

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

        .service-box {
            background: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .service-box:hover {
            transform: translateY(-5px);
        }

        .service-box img {
            width: 90%;
            height: 200px;
            object-fit: cover;
        }

        .service-content {
            padding: 20px;
        }

        .service-content h2 {
            margin-top: 0;
            color: #b3001b;
            font-size: 22px;
        }

        .service-content p {
            line-height: 1.6;
            font-size: 15px;
        }

  .cta {
	display: inline-block;
	padding: 10px 30px;
	color: white;
	background-color: transparent;
	border: 2px solid crimson;
	/*font-size: 2rem;*/
  font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	margin-top: 30px;
	transition: 0.3s ease;
	transition-property: background-color, color;
}
.cta:hover {
	color: white;
	background-color: crimson;
}


/*tabbed container for Engineering & Environment */

.service-container {
  max-width: 1100px;
  margin: auto;
  border: 1px solid #ddd;
}
.tab-nav {
  display: flex;
  background: #f1f1f1;
  border-radius: 12px;
  border-style: solid;
  border-color: darkgray;
  /*border-color: black;*/
}
.tab-link {
  flex: 1;
  padding: 15px;
  border: none;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 12px;
  gap: 10px;
}
.tab-link.active {
  /*background: rgba(100, 130, 160, .8); */
  background: #fff;
  border-bottom: 2px solid #007bff;
  
}
.tab-content {
  display: none;
  padding: 20px;
  align-items: center;
  gap: 20px;
}
.tab-content.active {
  display: flex; /* Side-by-side image and text */

}
.tab-content img {
  width: 800px;
  height: auto;
  border-radius: 12px;
  
}