/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/* Dropdown Menu Styles */
.dropdown {
  position: relative !important;
}

.dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: white !important;
  min-width: 200px !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 4px !important;
  z-index: 1000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-10px) !important;
  transition: all 0.3s ease !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dropdown:hover .dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.dropdown-menu li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dropdown-menu li a {
  display: block !important;
  padding: 12px 16px !important;
  color: #333 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid #f0f0f0 !important;
  transition: background-color 0.3s ease !important;
}

.dropdown-menu li:last-child a {
  border-bottom: none !important;
}

.dropdown-menu li a:hover {
  background-color: #f8f9fa !important;
  color: #d4191e !important;
}

/* Mobile and Tablet dropdown styles - ROBUST SOLUTION */
@media (max-width: 991px) {
  .dropdown {
    position: relative !important;
    width: 100% !important;
  }
  
  .dropdown-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: #f8f9fa !important;
    margin: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.4s ease, opacity 0.4s ease !important;
    padding: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
    border-radius: 0 !important;
    display: block !important;
  }
  
  .dropdown-menu.show {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 400px !important;
    padding: 0 !important;
    transform: none !important;
    display: block !important;
  }
  
  .dropdown-menu li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
  }
  
  .dropdown-menu li a {
    padding: 15px 25px !important;
    font-size: 14px !important;
    border-bottom: 1px solid #e0e0e0 !important;
    color: #333 !important;
    text-decoration: none !important;
    display: block !important;
    transition: background-color 0.3s ease !important;
    text-transform: uppercase !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-weight: 500 !important;
  }
  
  .dropdown-menu li a:hover {
    background-color: #e9ecef !important;
    color: #d4191e !important;
  }
  
  .dropdown-menu li:last-child a {
    border-bottom: none !important;
  }
  
  /* Add arrow indicator for dropdown */
  .dropdown-toggle::after {
    content: " ▼" !important;
    font-size: 10px !important;
    color: #666 !important;
    margin-left: 5px !important;
    transition: transform 0.3s ease !important;
  }
  
  /* Ensure dropdown toggle text is uppercase on mobile */
  .dropdown-toggle {
    text-transform: uppercase !important;
    position: relative !important;
  }
  
  .dropdown.open .dropdown-toggle::after {
    transform: rotate(180deg) !important;
  }
  
  /* Make all header menu items uppercase on mobile and tablet */
  #header #mainMenu nav > ul > li > a {
    text-transform: uppercase !important;
  }
  
  /* Force dropdown to be visible when open */
  .dropdown.open .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 400px !important;
    display: block !important;
  }
  
  /* Additional mobile dropdown fixes */
  #mainMenu .dropdown {
    position: relative !important;
    width: 100% !important;
  }
  
  #mainMenu .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    background-color: #f8f9fa !important;
    border: none !important;
    box-shadow: none !important;
  }
  
  /* Ensure dropdown is clickable */
  .dropdown-toggle {
    cursor: pointer !important;
    user-select: none !important;
  }
  
  /* Clean styles - no debug colors */
  
  /* ULTRA SPECIFIC MOBILE DROPDOWN FIX */
  #mainMenu .dropdown.open .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 500px !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    transform: none !important;
    background-color: #f8f9fa !important;
    border: 1px solid #ddd !important;
    margin-top: 5px !important;
  }
  
  /* Force dropdown menu to be visible */
  .dropdown-menu.show,
  .dropdown.open .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 500px !important;
    height: auto !important;
    overflow: visible !important;
  }
}

/* Mobile Header Layout - Position header-extras above logo and mainMenu-trigger */
@media (max-width: 767px) {
  
  /* Make header fixed on mobile */
  #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
  }
  
  #header #header-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
  }
  
  /* Add padding to body to prevent content overlap */
  body {
    padding-top: 80px !important;
  }
  
  /* Use CSS Grid to control exact positioning */
  #header #header-wrap .container-fluid {
    position: relative !important;
    display: grid !important;
    grid-template-areas: 
      "extras extras extras"
      "trigger logo logo";
    grid-template-rows: auto 80px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 80px;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Position header-extras at the top right with smaller elements */
  #header .header-extras {
    grid-area: extras !important;
    position: relative !important;
    float: none !important;
    margin: -10px 0 0 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-end;
    z-index: 202;
    border: none !important;
    padding: 0 15px !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Position logo centered with respect to full width */
  #header #logo {
    grid-area: logo !important;
    position: relative !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    float: none !important;
    height: 80px !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    top: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Position mainMenu-trigger at the bottom left */
  #header #mainMenu-trigger {
    grid-area: trigger !important;
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 203;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-left: 15px !important;
  }

  /* Make header-extras elements smaller and adjust spacing */
  #header .header-extras > ul > li {
    margin-left: 10px !important;
  }

  #header .header-extras > ul > li:first-child {
    margin-left: 0 !important;
  }

  /* Make images smaller */
  #header .header-extras > ul > li img {
    width: 25px !important;
    height: 25px !important;
  }

  /* Make button smaller */
  #header .header-extras .btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  #header .header-extras .btn img {
    width: 15px !important;
    height: 15px !important;
  }

  /* Override any existing mobile styles that might interfere */
  #header.header-fullwidth #header-wrap .container .header-extras {
    border: none !important;
  }

  /* Remove all padding from header-wrap */
  #header #header-wrap {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Prevent movement when menu expands - override original mobile styles */
  #header #mainMenu:not(.menu-overlay) {
    clear: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
  }

  #header #mainMenu-trigger {
    transition: none !important;
  }

  #header #logo {
    transition: none !important;
  }

  /* Align menu items to the left when expanded with tablet-like spacing */
  #header #mainMenu:not(.menu-overlay) > .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    transition: none !important;
  }

  #header #mainMenu:not(.menu-overlay) nav {
    text-align: left !important;
    padding-left: 0 !important;
    transition: none !important;
  }

  #header #mainMenu:not(.menu-overlay) nav > ul {
    text-align: left !important;
    padding-left: 0 !important;
    transition: none !important;
  }

  #header #mainMenu:not(.menu-overlay) nav > ul > li > a {
    text-align: left !important;
    padding-left: 0 !important;
    transition: none !important;
  }

  /* Ensure header elements stay in place during menu animation */
  #header #header-wrap .container-fluid {
    transition: none !important;
  }
}

/* Tablet Header - Make header fixed on tablets */
@media (min-width: 768px) and (max-width: 991px) {
  
  /* Make header fixed on tablet */
  #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
  }
  
  #header #header-wrap {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
  }
  
  /* Add padding to body to prevent content overlap */
  body {
    padding-top: 80px !important;
  }
}

/* Box-fancy equal height columns and side-by-side layout from 768px */
@media (min-width: 768px) {
  section.box-fancy.section-fullwidth .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 25% !important;
    float: left !important;
    padding: 5% !important;
    clear: none !important;
    margin: 0 !important;
    position: relative !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 h2 {
    flex-shrink: 0 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 h3 {
    flex-shrink: 0 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 p {
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
  }
}

/* Vertical layout for 768px-1023px (one below another) */
@media (min-width: 768px) and (max-width: 1023px) {
  section.box-fancy.section-fullwidth .row {
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 5% 5% !important; /* Explicit top/bottom padding */
  }
}

/* 2x2 layout for 1024px resolution */
@media (min-width: 1024px) and (max-width: 1439px) {
  section.box-fancy.section-fullwidth .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    float: none !important;
    padding: 5% !important;
    clear: none !important;
    margin: 0 !important;
    position: relative !important;
    height: 100% !important;
  }
  
  /* Specific positioning for each box */
  section.box-fancy.section-fullwidth .row .col-lg-3:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3:nth-child(3) {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3:nth-child(4) {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 h2 {
    flex-shrink: 0 !important;
    margin-bottom: 15px !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 h3 {
    flex-shrink: 0 !important;
    margin-bottom: 15px !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 p {
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
  }
}

/* Override Bootstrap responsive behavior completely */
@media (min-width: 768px) {
  .box-fancy .row .col-lg-3:nth-child(1),
  .box-fancy .row .col-lg-3:nth-child(2),
  .box-fancy .row .col-lg-3:nth-child(3),
  .box-fancy .row .col-lg-3:nth-child(4) {
    display: flex !important;
    flex-direction: column !important;
    width: 25% !important;
    float: left !important;
    clear: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Equal height columns specifically for 1440px resolution using CSS Grid */
@media (min-width: 1440px) {
  section.box-fancy.section-fullwidth .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    grid-template-rows: 1fr !important;
    gap: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
    /* Remove any whitespace issues */
    font-size: 0 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    float: none !important;
    padding: 26% 10% !important; /* Doubled top/bottom padding from 8% to 16% */
    clear: none !important;
    margin: 0 !important;
    position: relative !important;
    height: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    /* Reset font size for content */
    font-size: 14px !important;
  }
  
  /* Explicitly position each box */
  section.box-fancy.section-fullwidth .row .col-lg-3:nth-child(1) {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3:nth-child(2) {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3:nth-child(3) {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3:nth-child(4) {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 h2 {
    flex-shrink: 0 !important;
    margin-bottom: 30px !important; /* Reduced from 60px to 30px */
    margin-top: 0 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 h3 {
    flex-shrink: 0 !important;
    margin-bottom: 30px !important; /* Same as number margin-bottom */
    margin-top: 0 !important;
  }
  
  section.box-fancy.section-fullwidth .row .col-lg-3 p {
    flex-grow: 1 !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
}

/* Mobile Footer - Logo left, social icons right */
@media (max-width: 767px) {
  #footer .footer-content .container-fluid .row .col-md-2 {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 60px !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 > div {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 img {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 120px !important;
    height: auto !important;
    margin: 0 !important;
    z-index: 1 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons {
    position: absolute !important;
    right: 5px !important; /* Reduced padding from right edge */
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    margin: 0 !important;
    z-index: 2 !important;
    width: auto !important;
    min-width: 130px !important; /* Ensure enough space for container */
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 5px 0 0 !important; /* Add right padding to prevent cutoff */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    width: auto !important;
    min-width: 120px !important; /* Ensure enough space for 3 icons */
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li {
    margin: 0 6px !important; /* Reduced spacing between icons */
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li:last-child {
    margin-right: 0 !important; /* Remove extra margin */
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li img {
    width: 35px !important;
    height: 35px !important;
    margin: 0 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li a {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }
  
  /* Mobile Footer - Equal vertical spacing for all sections */
  #footer .footer-content .container-fluid .row .col-md-4,
  #footer .footer-content .container-fluid .row .col-md-3 {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
}

/* Tablet Footer - Position social-icons below logo at 768px with left alignment */
@media (min-width: 768px) and (max-width: 991px) {
  #footer .footer-content .container-fluid .row .col-md-2 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    min-height: 80px !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 > div {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 120px !important;
    height: auto !important;
    margin: 0 0 20px 0 !important;
    z-index: 1 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    float: none !important;
    margin: 0 !important;
    z-index: 2 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li {
    margin: 0 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li:last-child {
    margin-right: 8px !important; /* Add margin to prevent cutoff */
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li img {
    width: 35px !important;
    height: 35px !important;
    margin: 0 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li a {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }
  
  /* Tablet Footer - Reorganize layout at 768px */
  #footer .footer-content .container-fluid .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
    grid-template-areas: 
      "logo-social direcciones"
      "mapa institucional" !important;
    gap: 20px !important;
    align-items: start !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 {
    grid-area: logo-social !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-3:nth-child(3) {
    grid-area: mapa !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-4 {
    grid-area: direcciones !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-3:nth-child(4) {
    grid-area: institucional !important;
  }
  
  /* Tablet Footer - Apply contact section padding */
  #footer .footer-content {
    padding-top: 40px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
    padding-bottom: 40px !important;
  }
  
  /* Tablet Footer - Optimize content layout */
  #footer .footer-content .container-fluid .row .col-md-2,
  #footer .footer-content .container-fluid .row .col-md-3,
  #footer .footer-content .container-fluid .row .col-md-4 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    min-height: auto !important;
    width: 100% !important;
  }
  
  /* Tablet Footer - Make directions content full width */
  #footer .footer-content .container-fluid .row .col-md-4 .widget {
    width: 100% !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-4 h4 {
    width: 100% !important;
    margin-bottom: 15px !important;
    font-size: 1.1em !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-4 ul {
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-4 ul li {
    width: 100% !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
  }
  
  /* Tablet Footer - Optimize other content */
  #footer .footer-content .container-fluid .row .col-md-3 h4 {
    margin-bottom: 15px !important;
    font-size: 1.1em !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-3 ul {
    margin-bottom: 0 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-3 ul li {
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
  }
}

/* Mobile Footer - Apply contact section padding */
@media (max-width: 767px) {
  #footer .footer-content {
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
  }
}

/* Desktop Footer - 4 columns layout with logo/redes vertical in first column */
@media (min-width: 1024px) {
  #footer .footer-content .container-fluid .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 200px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-4 {
    flex: 1 !important;
    width: auto !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-3 {
    flex: 1 !important;
    width: auto !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 > div {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 120px !important;
    height: auto !important;
    margin: 0 0 20px 0 !important;
    z-index: 1 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    float: none !important;
    margin: 0 !important;
    z-index: 2 !important;
    width: auto !important;
    min-width: auto !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    width: auto !important;
    min-width: auto !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li {
    margin: 0 8px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li:last-child {
    margin-right: 0 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li img {
    width: 35px !important;
    height: 35px !important;
    margin: 0 !important;
  }
  
  #footer .footer-content .container-fluid .row .col-md-2 .social-icons ul li a {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
  }
}

/* Desktop Header - Optimize menu layout at 1024px */
@media (min-width: 1024px) {
  /* Reduce logo size by 20% */
  #header #logo img {
    width: auto !important;
    height: 64px !important; /* 80px - 20% = 64px */
  }
  
  /* Very compact spacing between menu items */
  #header #mainMenu nav > ul > li {
    margin-left: 4px !important;
    margin-right: 4px !important;
  }
  
  #header #mainMenu nav > ul > li:first-child {
    margin-left: 8px !important; /* Space from logo */
  }
  
  #header #mainMenu nav > ul > li:last-child {
    margin-right: 8px !important; /* Space to social buttons */
  }
  
  /* Reduce font size and padding of menu items */
  #header #mainMenu nav > ul > li > a {
    font-size: 13px !important;
    padding: 4px 2px !important;
    text-transform: uppercase !important;
  }
  
  /* Ensure header elements are properly spaced */
  #header #header-wrap .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-evenly !important;
    position: relative !important;
  }
  
  /* Order elements: logo (1), menu (2), header-extras (3) */
  #header #logo {
    order: 1 !important;
    flex-shrink: 0 !important;
  }
  
  #header #mainMenu {
    order: 2 !important;
    flex: 1 !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  /* Force header-extras to be visible and positioned correctly */
  #header #header-wrap .header-extras {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    right: 40px !important; /* More margin from edge to avoid overlap */
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 999 !important;
    width: auto !important;
    height: auto !important;
  }
  
  /* Force the ul list to be visible */
  #header #header-wrap .header-extras > ul {
    display: flex !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
  
  /* Force list items to be visible */
  #header #header-wrap .header-extras > ul > li {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 8px !important; /* Reduced spacing between social icons */
    border: 0 !important;
  }
  
  #header #header-wrap .header-extras > ul > li:first-child {
    margin-left: 0 !important;
  }
  
  /* Force images to be visible */
  #header #header-wrap .header-extras > ul > li img {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 25px !important;
    height: 25px !important;
  }
  
  /* Force links to be visible */
  #header #header-wrap .header-extras > ul > li > a {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Adjust brochure button height to match social icons */
  #header #header-wrap .header-extras .btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 8px !important; /* More vertical padding */
    font-size: 11px !important;
    line-height: 1.2 !important;
    height: auto !important; /* Allow natural height */
    vertical-align: middle !important;
    gap: 4px !important; /* Space between icon and text */
  }
  
  /* Ensure icon and text are aligned in brochure button */
  #header #header-wrap .header-extras .btn i,
  #header #header-wrap .header-extras .btn img {
    vertical-align: middle !important;
    margin: 0 !important;
    width: 16px !important; /* Smaller icon */
    height: 16px !important; /* Smaller icon */
  }
}

/* Medium Desktop - Set font size to 15px at 1280px */
@media (min-width: 1280px) and (max-width: 1439px) {
  /* Set font size of menu items to 15px */
  #header #mainMenu nav > ul > li > a {
    font-size: 15px !important;
    padding: 8px 6px !important;
    text-transform: uppercase !important;
  }
  
  /* Add margin-left to nav */
  #header #mainMenu nav {
    margin-left: 80px !important;
  }
}

/* Large Desktop - Increase font size at 1440px+ */
@media (min-width: 1440px) {
  /* Increase font size of menu items */
  #header #mainMenu nav > ul > li > a {
    font-size: 18px !important;
    padding: 10px 8px !important;
    text-transform: uppercase !important;
  }
  
  /* Larger social icons */
  #header #header-wrap .header-extras > ul > li img {
    width: 30px !important;
    height: 30px !important;
  }
  
  /* More lateral padding for brochure button */
  #header #header-wrap .header-extras .btn {
    padding: 8px 12px !important;
  }
}

/* Reduce spacing between text section and ADN EMPREC boxes on about page */
section .heading-text.heading-section {
  margin-bottom: 0px !important; /* Eliminated spacing */
}

/* Additional spacing reduction for the section containing the text */
section:not(.box-fancy):not(.section-fullwidth) {
  margin-bottom: 0px !important;
  padding-bottom: 0px !important;
}

/* Remove all padding and margins from the text section */
section:not(.box-fancy):not(.section-fullwidth) .container {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

/* Increase spacing between paragraphs within the text section */
section .heading-text.heading-section p {
  margin-bottom: 25px !important;
}

/* Add more space before ADN EMPREC title */
section .heading-text.heading-section h3 {
  margin-top: 50px !important;
  margin-bottom: 10px !important;
}

/* Reduce spacing between ADN EMPREC boxes */
.box-fancy.section-fullwidth .row {
  margin: 0 !important;
}

.box-fancy.section-fullwidth .row .col-lg-3 {
  margin-bottom: 0px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Remove any gap between the boxes */
.box-fancy.section-fullwidth .row .col-lg-3 + .col-lg-3 {
  margin-left: 0px !important;
}

/* Team members - Align name box with photo bottom in all resolutions */
.team-members .team-member {
  position: relative !important; /* For absolute positioning of h3 */
}

.team-members .team-member .team-desc h3 {
  position: absolute !important;
  bottom: 102px !important; /* Align with bottom of photo */
  right: 0px !important;
  padding: 8px 8px 8px 20px !important;
  margin: 0 !important;
  width: 105% !important;
  font-weight: 700 !important;
  background-color: #545255 !important;
  color: white !important;
  font-size: 18px !important;
}

.team-members .team-member .team-desc p {
  font-size: 18px !important;
}



/* Services page titles - Uppercase for all resolutions */
.services-page h2,
.services-page h3 {
  text-transform: uppercase !important;
}

/* Specific targeting for the services page titles */
#page-content h2[style*="color: #d4191e"],
#page-content h3[style*="color: #333"] {
  text-transform: uppercase !important;
}

/* More specific targeting for services page */
section#page-content h2,
section#page-content h3 {
  text-transform: uppercase !important;
}

/* Maximum specificity override for services page titles */
section#page-content .text-content h2[style*="color: #d4191e"],
section#page-content .text-content h3[style*="color: #333"] {
  text-transform: uppercase !important;
}

/* Even more specific targeting */
section#page-content .col-lg-7 .text-content h2,
section#page-content .col-lg-7 .text-content h3 {
  text-transform: uppercase !important;
}

/* Ultra specific targeting for services page */
body section#page-content .container-fluid .row .col-lg-7 .text-content h2,
body section#page-content .container-fluid .row .col-lg-7 .text-content h3 {
  text-transform: uppercase !important;
}

/* Mobile menu - Add social icons and brochure button inside menu */
@media (max-width: 991px) {
  /* Hide desktop navigation wrapper on mobile */
  #header .desktop-nav-wrapper {
    display: none !important;
  }
  
  /* Set logo height to 50px on mobile */
  #header #logo img {
    height: 50px !important;
    width: auto !important;
  }
  
  /* Remove line-height for logo link */
  #header #logo a {
    line-height: 0 !important;
  }
  
  /* Hide desktop header extras on mobile */
  .header-extras {
    display: none !important;
  }
  
  /* Hide header extras in all mobile views */
  #header .header-extras {
    display: none !important;
  }
  
  /* Fix footer social icons spacing on mobile */
  #footer .social-icons ul {
    display: flex !important;
    gap: 20px !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  
  #footer .social-icons ul li {
    margin: 0 8px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    width: auto !important;
  }
  
  #footer .social-icons ul li a {
    display: block !important;
    padding: 5px !important;
  }
  
  /* Hide any mobile menu extras outside the main menu */
  .mobile-menu-extras {
    display: none !important;
  }
  
  /* Show mobile menu extras only inside the main menu */
  #mainMenu .mobile-menu-extras {
    display: block !important;
    text-align: left !important;
    padding: 20px 15px 20px 0 !important;
    border-top: none !important;
    margin-top: 10px !important;
    background-color: transparent !important;
  }
  
  /* Style mobile menu extras to match original header-extras */
  #mainMenu .mobile-menu-extras ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 15px !important;
  }
  
  #mainMenu .mobile-menu-extras ul li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  
  #mainMenu .mobile-menu-extras ul li a {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }
  
  #mainMenu .mobile-menu-extras ul li a img {
    width: 35px !important;
    height: 35px !important;
    display: block !important;
  }
  
  #mainMenu .mobile-menu-extras ul li button.btn-rounded,
  #mainMenu .mobile-menu-extras ul li a.btn-rounded {
    background-color: #d4191e !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    height: 35px !important;
    min-height: 35px !important;
    margin-top: 6px !important;
    text-decoration: none !important;
  }
  
  #mainMenu .mobile-menu-extras ul li button.btn-rounded:hover,
  #mainMenu .mobile-menu-extras ul li a.btn-rounded:hover {
    background-color: #b0151a !important;
    color: white !important;
    text-decoration: none !important;
  }
  
  #mainMenu .mobile-menu-extras ul li button.btn-rounded img,
  #mainMenu .mobile-menu-extras ul li a.btn-rounded img {
    width: 20px !important;
    height: 20px !important;
  }
}

/* Tablet specific - reduce spacing for footer social icons */
@media (min-width: 768px) and (max-width: 991px) {
  #footer .social-icons ul {
    gap: 2px !important;
  }
  
  #footer .social-icons ul li {
    margin: 0 !important;
  }
}


/* Desktop - Hide mobile menu extras */
@media (min-width: 992px) {
  .mobile-menu-extras {
    display: none !important;
  }
  
  /* Remove margin-top from brochure button in desktop */
  #header .header-extras ul li .btn {
    margin-top: 0 !important;
  }
  
  /* Layout: Logo left, Desktop nav wrapper right */
  #header .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    height: 100% !important;
  }
  
  /* Logo first (left) */
  #header #logo {
    order: 1 !important;
    flex-shrink: 0 !important;
  }
  
  /* Desktop navigation wrapper - groups menu and social icons */
  #header .desktop-nav-wrapper {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    margin-right: -50px !important;
  }
  
  /* Menu inside wrapper */
  #header .desktop-nav-wrapper #mainMenu {
    position: static !important;
    transform: none !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
  }
  
  #header .desktop-nav-wrapper #mainMenu .container {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #header .desktop-nav-wrapper #mainMenu nav ul {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Extra large screens - reduce gap further */
@media (min-width: 1440px) {
  #header .desktop-nav-wrapper #mainMenu nav ul {
    gap: 2px !important;
  }
  
  /* Push menu to the right to get closer to social icons */
  #mainMenu.menu-left nav {
    margin-left: 130px !important;
  }
}

/* Ultra large screens - minimal gap */
@media (min-width: 1920px) {
  #header .desktop-nav-wrapper #mainMenu nav ul {
    gap: 0px !important;
  }
  
  #header .desktop-nav-wrapper #mainMenu nav ul li a {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
  }
  
  #header .desktop-nav-wrapper #mainMenu nav ul li a:hover {
    color: #d4191e !important;
  }
  
  /* Social icons inside wrapper - now truly siblings with menu */
  #header .desktop-nav-wrapper .header-extras {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 0 !important;
    margin-top: -20px !important;
  }
  
  #header .desktop-nav-wrapper .header-extras ul {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
  }
  
  #header .desktop-nav-wrapper .header-extras ul li {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }
  
  /* Force social icons to align with menu */
  #header .desktop-nav-wrapper .header-extras ul li a,
  #header .desktop-nav-wrapper .header-extras ul li button {
    vertical-align: top !important;
    margin-top: -10px !important;
  }
}

/* Footer Typography - Nunito Sans for all resolutions */
#footer,
#footer * {
  font-family: 'Nunito Sans', sans-serif !important;
}

/* Specific footer elements */
#footer h1,
#footer h2,
#footer h3,
#footer h4,
#footer h5,
#footer h6,
#footer p,
#footer a,
#footer li,
#footer span,
#footer div {
  font-family: 'Nunito Sans', sans-serif !important;
}

/* Extra bold for "OBRAS DE ARQUITECTURA COMERCIAL" */
h2.text-large {
  font-weight: 800 !important;
}

/* Responsive font size for "OBRAS DE ARQUITECTURA COMERCIAL" */
h2.text-large {
  font-size: 40px !important; /* Mobile default */
}

@media (min-width: 768px) {
  h2.text-large {
    font-size: 50px !important; /* Tablet and up */
  }
}

/* Same width for banner "VER OBRAS" button and form "Enviar" button */
.btn.scroll-to,
.btn.btn-lg-submit {
  width: 200px !important;
  min-width: 200px !important;
}

/* Specific font size for section titles */
h2.text-large2,
section h2 {
  font-size: 2.35714286em !important;
}

/* Uppercase for "Contacto" title */
section#contacto h2 {
  text-transform: uppercase !important;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth !important;
}

/* Contacto section positioning */
section#contacto {
  padding-top: 20px !important;
}

section#contacto2 h2 {
  text-transform: uppercase !important;
}

/* Same size as Contacto title */
h3[style*="color: #d4191e"] {
  font-size: 33px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

.title-heading-section {
  font-size: 33px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

/* Uppercase for texts below section titles */
p.lead.m-b-60 {
  text-transform: uppercase !important;
}

/* Reduce spacing between number and title in gray boxes */
.box-fancy .col-lg-3 h2 + h3 {
  margin-top: -1em !important; /* Much more aggressive negative margin */
}

/* Responsive font size for numbers in gray boxes */
.box-fancy .col-lg-3 h2.text-lg {
  font-size: 40px !important; /* Mobile default */
}

@media (min-width: 768px) {
  .box-fancy .col-lg-3 h2.text-lg {
    font-size: 80px !important; /* Tablet */
  }
  
  .box-fancy .col-lg-3 h3 {
    font-size: 1.78571429em !important; /* Tablet title size */
  }
  
  /* Same padding as mobile - multiple selectors for 768px */
  section.box-fancy.section-fullwidth .row .col-lg-3 {
    padding: 5% !important; /* Same as mobile - more specific selector */
  }
  
  .box-fancy [class*="col-"] {
    padding: 5% !important; /* Override theme default */
  }
  
  /* Consistent spacing between elements in gray boxes */
  .box-fancy .col-lg-3 h2 + h3 {
    margin-top: -1em !important; /* Same spacing as mobile */
  }
  
  .box-fancy .col-lg-3 h3 + p {
    margin-top: 1em !important; /* Consistent spacing to paragraph */
  }
}

@media (min-width: 1024px) {
  .box-fancy .col-lg-3 h2.text-lg {
    font-size: 90px !important; /* Desktop */
  }
  
  /* Same padding as mobile */
  section.box-fancy.section-fullwidth .row .col-lg-3 {
    padding: 15% !important; /* Same as mobile - more specific selector */
  }
  
  /* Consistent spacing between elements in gray boxes */
  .box-fancy .col-lg-3 h2 + h3 {
    margin-top: -0.3em !important; /* Less aggressive spacing for desktop */
  }
  
  .box-fancy .col-lg-3 h3 + p {
    margin-top: 1em !important; /* Consistent spacing to paragraph */
  }
}

/* Style for titles in gray boxes */
.box-fancy .col-lg-3 h3 {
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* SVG circle with transparent image */
svg {
  background-color: white !important;
  border-radius: 50% !important;
  padding: 10px !important;
}

svg .cls-1 {
  fill: transparent !important;
  stroke: #d4191e !important;
}

/* Equal height testimonial boxes in desktop */
@media (min-width: 1024px) {
  .grid-layout.grid-3-columns.testimonial {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }
  
  .grid-layout.grid-3-columns.testimonial .grid-item {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 33.333% !important;
    width: 33.333% !important;
    min-height: 100% !important;
  }
  
  .grid-layout.grid-3-columns.testimonial .testimonial-item {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important;
    justify-content: flex-start !important;
    flex-grow: 1 !important;
  }
  
  .grid-layout.grid-3-columns.testimonial .testimonial-item p {
    flex-grow: 1 !important;
    margin-bottom: 20px !important;
  }
}

/* Texto con primera letra en mayúscula para secciones específicas */
#clientes .lead,
#obras .lead {
  text-transform: lowercase !important;
}

#clientes .lead::first-letter,
#obras .lead::first-letter {
  text-transform: uppercase !important;
}

/* Corporate Policies Section Styles */
#politicas {
  background-color: #f8f9fa !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Desktop: 2x2 grid layout */
@media (min-width: 1024px) {
  #politicas .row {
    margin: 0 auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }
  
  #politicas .col-lg-6 {
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
  }
  
  #politicas .col-lg-6:nth-child(1),
  #politicas .col-lg-6:nth-child(2) {
    margin-bottom: 0 !important;
  }
  
  #politicas .col-lg-6:nth-child(3),
  #politicas .col-lg-6:nth-child(4) {
    margin-bottom: 0 !important;
  }
}

.policy-item {
  background-color: white !important;
  padding: 72px 60px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100% !important;
  min-height: 500px !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  text-align: left !important;
  width: 100% !important;
}

.policy-item:hover {
  background-color: #f8f9fa !important;
}

/* Background color for specific policy items */
#politicas .col-lg-6:nth-child(1) .policy-item,
#politicas .col-lg-6:nth-child(4) .policy-item {
  background-color: #efefef !important;
}

#politicas .col-lg-6:nth-child(2) .policy-item,
#politicas .col-lg-6:nth-child(3) .policy-item {
  background-color: #c8c8c8 !important;
}

#politicas .col-lg-6:nth-child(1) .policy-item:hover,
#politicas .col-lg-6:nth-child(4) .policy-item:hover {
  background-color: #e0e0e0 !important;
}

/* Altura reducida para la última caja */
#politicas .col-lg-6:nth-child(4) .policy-item {
  min-height: 250px !important;
  padding: 72px 60px !important;
}

#politicas .col-lg-6:nth-child(2) .policy-item:hover,
#politicas .col-lg-6:nth-child(3) .policy-item:hover {
  background-color: #b5b5b5 !important;
}

/* Estilo para la sección del brochure */
.brochure-section {
  background-color: #d4191e !important;
  padding: 30px !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  width: 100% !important;
}

.brochure-section {
  text-align: center !important;
}

.brochure-section p {
  color: white !important;
  margin-bottom: 15px !important;
  font-size: 1.92em !important;
  font-weight: bold !important;
  line-height: 1.3 !important;
}

.brochure-section a {
  color: #545255 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: 1.5em !important;
  background-color: #efefef !important;
  padding: 8px 24px !important;
  border-radius: 1rem !important;
  display: inline-block !important;
  transition: all 0.3s ease !important;
  border: 1px solid #efefef !important;
  width: 200px !important;
}

.brochure-section a:hover {
  background-color: #e0e0e0 !important;
  border-color: #e0e0e0 !important;
  color: #545255 !important;
}

.policy-icon {
  margin-bottom: 25px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.policy-title {
  color: #d4191e !important;
  font-size: 1.6em !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  line-height: 1.3 !important;
  text-align: center !important;
}

.policy-text {
  color: #666 !important;
  font-size: 1.2em !important;
  line-height: 1.6 !important;
  margin-top: 20px !important;
  margin-bottom: 0 !important;
  flex-grow: 1 !important;
  display: flex !important;
  align-items: flex-start !important;
}

/* Responsive adjustments for policies */
@media (max-width: 991px) {
  #politicas .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #politicas .row {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  #politicas .col-lg-6 {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .policy-item {
    padding: 60px 48px !important;
    margin-bottom: 0 !important;
    min-height: 450px !important;
  }
  
  /* Colores para tablet: cajas 1 y 3 claras, cajas 2 y 4 oscuras */
  #politicas .col-lg-6:nth-child(1) .policy-item,
  #politicas .col-lg-6:nth-child(3) .policy-item {
    background-color: #efefef !important;
  }
  
  #politicas .col-lg-6:nth-child(2) .policy-item,
  #politicas .col-lg-6:nth-child(4) .policy-item {
    background-color: #c8c8c8 !important;
  }
  
  .policy-title {
    font-size: 1.5em !important;
  }
  
  .policy-text {
    font-size: 1.15em !important;
  }
  
  /* Altura reducida para la última caja en tablet */
  #politicas .col-lg-6:nth-child(4) .policy-item {
    min-height: 225px !important;
    padding: 60px 48px !important;
  }
}

@media (max-width: 767px) {
  .policy-item {
    padding: 54px 42px !important;
    margin-bottom: 0 !important;
    min-height: 400px !important;
  }
  
  /* Colores para mobile: cajas 1 y 3 claras, cajas 2 y 4 oscuras */
  #politicas .col-lg-6:nth-child(1) .policy-item,
  #politicas .col-lg-6:nth-child(3) .policy-item {
    background-color: #efefef !important;
  }
  
  #politicas .col-lg-6:nth-child(2) .policy-item,
  #politicas .col-lg-6:nth-child(4) .policy-item {
    background-color: #c8c8c8 !important;
  }
  
  .policy-icon svg {
    width: 60px !important;
    height: 60px !important;
  }
  
  .policy-title {
    font-size: 1.4em !important;
    margin-bottom: 15px !important;
  }
  
  .policy-text {
    font-size: 1.1em !important;
  }
  
  /* Altura reducida para la última caja en mobile */
  #politicas .col-lg-6:nth-child(4) .policy-item {
    min-height: 200px !important;
    padding: 54px 42px !important;
  }
  
  /* Más padding para el texto que acompaña el título "Ejes de trabajo" en mobile */
  #politicas .heading-text.heading-section p {
    padding: 20px 30px !important;
    margin: 20px 0 !important;
  }
}

/* ===============================================
   FORM VALIDATION STYLES
   =============================================== */

/* Form validation error styles */
.widget-contact-form label.error {
  color: #d4191e !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  margin-top: 5px !important;
  display: block !important;
  text-align: left !important;
}

/* White error messages for dark backgrounds (home page) */
#contacto .widget-contact-form label.error,
section#contacto .widget-contact-form label.error {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
}

.widget-contact-form .form-control.error,
.widget-contact-form .sm-form-control.error,
.widget-contact-form input.error,
.widget-contact-form textarea.error {
  border-color: #d4191e !important;
  box-shadow: 0 0 5px rgba(212, 25, 30, 0.3) !important;
}

.widget-contact-form .form-control.error:focus,
.widget-contact-form .sm-form-control.error:focus,
.widget-contact-form input.error:focus,
.widget-contact-form textarea.error:focus {
  border-color: #d4191e !important;
  box-shadow: 0 0 8px rgba(212, 25, 30, 0.4) !important;
  outline: none !important;
}

/* Required field indicators */
.widget-contact-form label {
  position: relative !important;
}

.widget-contact-form label::after {
  content: " *" !important;
  color: #d4191e !important;
  font-weight: bold !important;
}

/* Bootstrap Notify customizations */
.bootstrap-notify {
  font-family: 'Nunito Sans', sans-serif !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
}

.bootstrap-notify.alert-success {
  background-color: #28a745 !important;
  color: white !important;
  border-left: 4px solid #1e7e34 !important;
}

.bootstrap-notify.alert-danger {
  background-color: #dc3545 !important;
  color: white !important;
  border-left: 4px solid #c82333 !important;
}

.bootstrap-notify .alert-icon {
  float: left !important;
  margin-right: 15px !important;
}

.bootstrap-notify .alert-icon i {
  font-size: 24px !important;
  line-height: 1 !important;
}

.bootstrap-notify .alert-content {
  padding-left: 40px !important;
}

.bootstrap-notify .alert-content span[data-notify="title"] {
  font-weight: 700 !important;
  font-size: 14px !important;
  display: block !important;
  margin-bottom: 5px !important;
}

.bootstrap-notify .alert-content span[data-notify="message"] {
  font-size: 13px !important;
  line-height: 1.4 !important;
  display: block !important;
}

.bootstrap-notify .close {
  color: white !important;
  opacity: 0.8 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  position: absolute !important;
  top: 10px !important;
  right: 15px !important;
}

.bootstrap-notify .close:hover {
  opacity: 1 !important;
  color: white !important;
}

/* Form loading state */
.widget-contact-form button[type="submit"]:disabled {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
}

.widget-contact-form button[type="submit"] .fa-spin {
  margin-right: 8px !important;
}

/* Success message styling */
.widget-contact-form .success-message {
  background-color: #d4edda !important;
  color: #155724 !important;
  padding: 15px !important;
  border: 1px solid #c3e6cb !important;
  border-radius: 5px !important;
  margin-bottom: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* Error message styling */
.widget-contact-form .error-message {
  background-color: #f8d7da !important;
  color: #721c24 !important;
  padding: 15px !important;
  border: 1px solid #f5c6cb !important;
  border-radius: 5px !important;
  margin-bottom: 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: center !important;
}

/* Form input focus states */
.widget-contact-form input:focus,
.widget-contact-form textarea:focus {
  border-color: #d4191e !important;
  box-shadow: 0 0 5px rgba(212, 25, 30, 0.2) !important;
  outline: none !important;
}

/* Form validation success state */
.widget-contact-form .form-control.valid,
.widget-contact-form .sm-form-control.valid,
.widget-contact-form input.valid,
.widget-contact-form textarea.valid {
  border-color: #28a745 !important;
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.3) !important;
}

/* Mobile responsive adjustments for form validation */
@media (max-width: 767px) {
  .bootstrap-notify {
    margin: 10px !important;
    font-size: 13px !important;
  }
  
  .bootstrap-notify .alert-content span[data-notify="title"] {
    font-size: 13px !important;
  }
  
  .bootstrap-notify .alert-content span[data-notify="message"] {
    font-size: 12px !important;
  }
  
  .widget-contact-form label.error {
    font-size: 11px !important;
    margin-top: 3px !important;
  }
  
  /* White error messages for mobile dark backgrounds */
  #contacto .widget-contact-form label.error,
  section#contacto .widget-contact-form label.error {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    font-size: 11px !important;
  }
}