/* CSS for the footer */

footer {
   background-color: #222;
   color: white;
   padding: 50px 0;
   border-radius: 8px 8px 0 0;
   margin-top: 20px;
   font-family: 'Arial', sans-serif;
   /* Adjusted to a common sans-serif font */
}
footer .container {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 40px;
   max-width: 1200px;
   /* Added max-width for better control on large screens */
   margin: 0 auto;
   /* Center the container */
   padding: 0 15px;
   /* Add some horizontal padding */
}
.footer-col {
   flex-basis: 28%;
   /* Adjusts width as needed */
   min-width: 250px;
}
footer h4 {
   color: #FF6F00;
   /* Orange title color */
   margin-bottom: 20px;
   font-size: 1.4em;
   border-bottom: 2px solid rgba(255, 111, 0, 0.3);
   /* Orange line */
   padding-bottom: 10px;
}
footer ul {
   list-style: none;
   padding: 0;
   margin: 0;
}
footer ul li a {
   text-decoration: none;
   color: #ccc;
   /* White for items */
   margin-bottom: 10px;
   display: block;
   transition: color 0.3s ease;
   font-size: 1em;
}
footer ul li a:hover {
   color: #fff;
   /* White on hover */
}
.footer-col p {
   color: #ccc;
   /* White for paragraph items */
   margin-bottom: 10px;
   font-size: 1em;
   line-height: 1.5;
}
.footer-col .social-links a {
   display: inline-block;
   height: 40px;
   width: 40px;
   background-color: rgba(255, 255, 255, 0.2);
   /* Semi-transparent white background for social icons */
   margin: 0 10px 10px 0;
   text-align: center;
   line-height: 40px;
   border-radius: 50%;
   color: #fff;
   /* White icon color */
   transition: all 0.3s ease;
   font-size: 1.2em;
   /* Adjusted icon size */
}
.footer-col .social-links a:hover {
   color: #222;
   /* Dark color on hover */
   background-color: #fff;
   /* White background on hover */
}
.newsletter-form {
   display: flex;
   margin-top: 15px;
}
.newsletter-form input[type="email"] {
   border: none;
   padding: 10px 15px;
   border-radius: 5px 0 0 5px;
   outline: none;
   flex-grow: 1;
   background-color: rgba(255, 255, 255, 0.1);
   /* Slightly transparent background */
   color: #fff;
}
.newsletter-form input[type="email"]::placeholder {
   color: #ccc;
}
.newsletter-form button {
   background-color: #FF6F00;
   /* Orange button */
   color: #fff;
   border: none;
   padding: 10px 15px;
   border-radius: 0 5px 5px 0;
   cursor: pointer;
   transition: background-color 0.3s ease;
}
.newsletter-form button:hover {
   background-color: #e65100;
   /* Darker orange on hover */
}
/* Responsive adjustments */

@media (max-width: 768px) {
   .footer-col {
      flex-basis: 45%;
      /* Two columns on tablets */
   }
}
@media (max-width: 576px) {
   .footer-col {
      flex-basis: 100%;
      /* Single column on mobile */
      text-align: center;
   }
   footer h4 {
      border-bottom: 2px solid rgba(255, 111, 0, 0.3);
      margin: 0 auto 20px auto;
      /* Center border for titles on mobile */
      width: fit-content;
      /* Make border fit content */
      padding-bottom: 10px;
   }
   .footer-col ul {
      margin-left: 0;
   }
   .footer-col ul li a {
      text-align: center;
   }
   .footer-col p {
      text-align: center;
   }
   .footer-col .social-links {
      justify-content: center;
   }
   .newsletter-form {
      max-width: 300px;
      /* Limit newsletter form width on small screens */
      margin: 15px auto 0 auto;
   }
}
/* --- Specific colors for "Atención al Cliente" icons --- */

.footer-col p .fa-map-marker-alt {
   color: #3498db;
   /* Blue for location */
}
.footer-col p .fa-clock {
   color: #f1c40f;
   /* Yellow for clock */
}
.footer-col p .fa-phone-alt {
   color: #e74c3c;
   /* Red for phone */
}
/* --- End of specific icon colors --- */