/* 
 * Custom Global Styles for Fircon Consultores
 * This file contains style improvements to create a more modern and visually appealing website
 * with a consistent color scheme that matches the company logo (blue tones).
 */

:root {
  /* Color palette based on company logo */
  --primary-blue: #60aeda;
  --dark-blue: #2b5c8a;
  --accent-blue: #3b7cb7; /* New accent color for better contrast */
  --light-blue: #e0f0fa;
  --primary-light-blue: #87c4e9; /* Brighter blue for better visibility */
  --dark-bg: #111521;
  --light-bg: #f5f8fa;
  --text-color: #4a5568;
  --text-light: #98a0b9;
  --text-white: #ffffff;
  --shadow-color: rgba(44, 90, 140, 0.15);
}

/* 
 * General Improvements 
 */
body {
  font-family: 'Source Sans Pro', 'Segoe UI', Roboto, sans-serif;
  color: var(--text-color);
  line-height: 1.6;
}

a {
  transition: all 0.3s ease;
  color: var(--dark-blue);
}

a:hover {
  color: var(--primary-blue);
  text-decoration: none;
}

/* Typography improvements */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Source Sans Pro', 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dark-blue);
}

/* Replace red h6 heading in the About section */
.banner-bottom h6,
.inner_main_agile_section h6 {
  color: var(--accent-blue) !important;
  letter-spacing: 7px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* Replace red span text about the team */
.w3_agileits_about_grid_left span {
  color: var(--accent-blue) !important;
  font-weight: 600;
  font-style: italic;
  margin-bottom: 2em;
  display: block;
}

/* Replace all other red text elements with accent blue */
[style*="color:#ed3338"],
[style*="color: #ed3338"] {
  color: var(--accent-blue) !important;
}

/* Replace all red background elements */
[style*="background-color:#ed3338"],
[style*="background-color: #ed3338"],
[style*="background:#ed3338"],
[style*="background: #ed3338"] {
  background-color: var(--accent-blue) !important;
  background: var(--accent-blue) !important;
}

/* Additional elements that might still use red */
.address_mail_footer_grids {
  background: linear-gradient(to bottom, var(--primary-blue), var(--dark-blue));
}

/* Fix for any other elements with red color */
.agileits_w3layouts_footer_grid_list li a:hover,
.w3ls_footer_grid_left p a:hover,
.wthree_footer_grid_left,
.agile_footer_copy p a,
.agileits_w3layouts_footer_grid_list li i,
.w3l_header:after, 
.agile_inner_breadcrumb ol li a {
  color: var(--accent-blue) !important;
}

/* QUE NOS DIFERENCIA text on the About page */
.inner_main_agile_section h6 {
  position: relative;
  display: inline-block;
  padding: 0 15px;
  margin-bottom: 20px;
  color: var(--accent-blue) !important;
}

.w3l_header, .w3_agileits_header {
  font-weight: 300 !important;
  letter-spacing: 1px;
  margin-bottom: 15px;
  color: var(--dark-blue) !important;
}

.w3l_header span, .w3_agileits_header span {
  font-weight: 600 !important;
  color: var(--primary-blue) !important;
}

/* Remove red underlines */
.w3l_header:after, 
.w3_agileits_header:after {
  background: var(--primary-blue) !important;
}

.w3l_header span.line {
  background: linear-gradient(to right, var(--primary-blue), var(--dark-blue)) !important;
}

p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 1.5em;
  color: var(--text-color);
}

/* 
 * Button Improvements 
 */
.hvr-shutter-in-vertical {
  background: var(--dark-blue) !important;
  border-radius: 30px;
  padding: 12px 25px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(43, 92, 138, 0.25);
}

.hvr-shutter-in-vertical:before {
  background: var(--primary-blue) !important;
  border-radius: 30px;
}

/* Override red button styles */
.bg-red-500, 
input[type="submit"].bg-red-500 {
  background-color: var(--dark-blue) !important;
}

.hover\:bg-indigo-500:hover {
  background-color: var(--primary-blue) !important;
}

/* 
 * CTA Section Improvements 
 */
.medile_agile_its_section {
  box-shadow: 0 10px 30px var(--shadow-color);
  overflow: hidden;
}

.medile_agile_its_blue {
  background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)) !important;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.medile_agile_its_blue h4 {
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: none;
  padding: 0;
  margin: 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.medile_agile_its_green {
  background: var(--dark-bg) !important;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.more.click {
  padding: 0;
}

.more.click a {
  display: inline-block;
  padding: 12px 30px;
  font-size: 16px;
}

/* 
 * Footer Improvements 
 */
.footer {
  background: linear-gradient(to bottom, #0b1324, #07090f) !important; /* Background más oscuro para mejorar contraste */
  background-image: none !important;
  padding: 5em 0 2em;
}

.w3_agile_footer_grid h3 {
  color: var(--text-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
  font-weight: 600;
  margin-bottom: 25px;
  letter-spacing: 0.5px;
}

.w3_agile_footer_grid h3:after {
  content: none; /* Remove red underline */
}

.w3_newsletter_footer_grids {
  background: rgba(96, 174, 218, 0.05);
  border-radius: 8px;
  margin: 2em 0;
}

.w3_newsletter_footer_grid_left input[type="email"] {
  border-radius: 4px;
  padding: 12px 15px;
  box-shadow: none;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.w3_newsletter_footer_grid_left input[type="email"]:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(96, 174, 218, 0.2);
}

.w3_newsletter_footer_grid_left input[type="submit"] {
  background: var(--primary-blue);
  border-radius: 4px;
  padding: 12px;
  transition: all 0.3s ease;
  font-weight: 600;
}

.w3_newsletter_footer_grid_left input[type="submit"]:hover {
  background: var(--dark-blue);
}

.agileits_w3layouts_footer_grid_list li i {
  color: var(--primary-blue);
}

.agileits_w3layouts_footer_grid_list li a:hover {
  color: var(--primary-blue);
}

/* WhatsApp button styling */
.whatsapp-btn {
  display: inline-block;
  background: var(--primary-blue) !important;
  color: white !important;
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.whatsapp-btn:hover {
  background: var(--dark-blue) !important;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(43, 92, 138, 0.3);
}

.whatsapp-btn i {
  margin-right: 5px;
}

.wthree_footer_grid_left {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  text-align: center;
  background: var(--primary-blue);
  transition: all 0.3s ease;
}

.wthree_footer_grid_left:hover {
  background: var(--dark-blue);
  transform: translateY(-3px);
}

.w3ls_footer_grid_left p a:hover {
  color: var(--primary-blue);
}

.agileinfo_copyright {
  background: rgba(0, 0, 0, 0.2);
  padding: 20px 0;
  margin-top: 3em;
}

.agileinfo_copyright p a {
  color: var(--primary-blue);
}

/* Social Media Icons */
.footer .fa-facebook,
.footer .fa-twitter,
.footer .fa-linkedin,
.footer .fa-instagram {
  transition: all 0.3s ease;
}

.footer .fa-facebook:hover,
.footer .fa-twitter:hover,
.footer .fa-linkedin:hover,
.footer .fa-instagram:hover {
  color: var(--primary-blue);
}

/* Additional Improvements */

/* Services and Sections */
.services {
  background-color: var(--light-bg) !important;
}

.wthree_services_grid_right {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}

.agileits_w3layouts_service_grid {
  transition: all 0.3s ease;
}

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

.agile_service_grd {
  background: var(--primary-blue) !important;
  background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue)) !important;
}

/* About Section */
.about {
  background-color: var(--light-bg) !important;
}

/* Stats Section */
.stats {
  background: linear-gradient(rgba(43, 92, 138, 0.85), rgba(43, 92, 138, 0.85)), url('../web/images/banner2.jpg');
  background-attachment: fixed !important;
  background-size: cover !important;
}

/* Additional hover effects */
a:hover img {
  transition: all 0.3s ease;
}

a:hover img:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* Smooth scrolling for better experience */
html {
  scroll-behavior: smooth;
}

/* Add subtle animation to icons */
.fa {
  transition: all 0.3s ease;
}

a:hover .fa {
  transform: translateY(-2px);
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  .medile_agile_its_blue,
  .medile_agile_its_green {
    min-height: 120px;
  }
  
  .medile_agile_its_blue h4 {
    font-size: 1.8em;
  }
  
  .footer {
    padding: 3em 0 1em;
  }
  
  .w3_newsletter_footer_grids {
    padding: 1.5em;
  }
}