/* 
  Modern Industrial Theme - Emelites Override 
  Font: Outfit (Google Fonts)
*/

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&display=swap");

/* --- TYPOGRAPHY OVERRIDES --- */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.font-primary,
.font-secondary {
  font-family: "Outfit", sans-serif !important;
}

/* Performance: GPU Accelerate Animations */
.wow {
  will-change: transform, opacity;
  backface-visibility: hidden; /* Reduces flickering */
}

/* Increase Base Readability */
body {
  font-size: 16px !important; /* Up from default 14px */
  line-height: 1.8 !important; /* More breathing room */
  color: #444; /* Soften black to dark grey for less eye strain */
}

p {
  margin-bottom: 20px;
}

/* Headers - Sharper, cleaner */
h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.5px;
}

.section-header h3 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- SHAPE LANGUAGE: SOFT INDUSTRIAL --- */

/* Buttons: Pill Shape */
.btn-get-started,
.cta-btn,
button[type="submit"],
.btn {
  border-radius: 50px !important; /* Full rounded pill */
  padding: 12px 35px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 14px !important;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(24, 210, 110, 0.3); /* Subtle green glow */
}

/* --- CARD STYLING --- */

/* Featured Services (Top Cards) */
#featured-services .box {
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03); /* Lighter shadow */
  transition: all 0.3s ease;
}

#featured-services .box:hover {
  transform: translateY(-10px); /* Lift effect */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
  border-color: #d4d4d4; /* Light Grey hover */
}

/* About Us Cards (Mission/Vision/HSEQ) */
.about-col {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.about-col:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.about-col .img img {
  border-radius: 16px 16px 0 0; /* Keep top rounded */
}

.about-col .icon {
  width: 70px;
  height: 70px;
  padding-top: 12px;
  border-radius: 50%; /* Perfect circle */
  border: 4px solid #fff;
  background-color: #18d26e; /* Make icon background sold green */
  color: white;
}
.about-col .icon i {
  color: white !important; /* Force white icon */
}

/* Services Section Cards */
#services .box {
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  box-shadow: none; /* Remove default shadow for cleaner look */
  background: #fff;
}

#services .box:hover {
  border-color: #18d26e;
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(24, 210, 110, 0.15); /* Green glow on hover */
}

/* Team/Contact Inputs */
.form-control {
  border-radius: 8px !important;
  border: 1px solid #eee;
  padding: 12px 15px;
  height: auto;
}

.form-control:focus {
  box-shadow: none;
  border-color: #18d26e;
}

/* Footer */
#footer {
  background: #0b0c0e; /* Slightly deeper black */
}

/* --- SPECIFIC OVERRIDES --- */

/* About Us: Icon color on hover */
/* User reported icons disappear (turn white on white). 
   Changing hover color to Light Grey to ensure visibility. */
.about-col:hover .icon i {
  color: #d0d0d0 !important; /* Light Grey */
}

/* Contact Form: Send Message Button */
/* User requested Light Grey background instead of Green */
#contact-form button[type="submit"] {
  background: #d4d4d4 !important; /* Standard Light Grey */
  color: #000 !important; /* Black text */
  border: 0 !important; /* Match original style (no border) */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease;
}

#contact-form button[type="submit"]:hover {
  background: #e0e0e0 !important;
  transform: translateY(-2px);
  color: #000 !important;
}