/* Footer General Styles */
.footer {
       
  background: #503422;
}

.footer .container{
width: 100%;
max-width: 1500px;
}

.footer .footer-item h4,
.footer .footer-item p,
.footer .footer-item a {
  text-align: left; /* Left-align all text */
}

.footer .footer-item a {
  line-height: 25px;
 
  color: white;
  transition: 0.5s ease;
  text-align: left;
}

.footer .footer-item p {
   font-size: 15px;
  color: white;
}

.footer .footer-item h4 {
  color: rgb(255, 255, 255) !important;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 15px; /* Add spacing below heading */
}

.footer .footer-item a:hover {
  letter-spacing: 1px;
  color: var(--bs-primary);
}

/* Footer Buttons */
.footer .footer-item .footer-btn a {
  transition: 0.5s ease;
}

.footer .footer-item .footer-btn a:hover {
  background: var(--bs-dark);
  color: var(--bs-primary);
}

.contact-detail {
  font-size: 16px; /* Adjust size as needed */
  color: white;
  display: flex; /* Use flex for proper alignment */
  align-items: center; /* Vertically align items */
  margin-bottom: 3px !important; /* Reduce space between rows */
}

.contact-detail:last-of-type {
  margin-bottom: 10px; /* Restore the bottom margin for the last row */
}

.contact-detail i {
  
  color: var(--bs-primary); /* Primary color for icons */
  margin-right: 10px; /* Add 10px spacing between icon and text */
}

.contact-detail a {
  text-decoration: none;
  color: var(--bs-dark);
  transition: 0.3s ease;
  display: inline-block; /* Ensure proper spacing */
}

.contact-detail a:hover {
  color: var(--bs-primary); /* Highlight color on hover */
}

.contact-detail p {
  margin: 0;
  font-size: 16px;
  color: var(--s-dark);
}




/* Social Icons Container */
.social-icons {
  display: flex;
   
  gap: 15px; /* Space between icons */
  margin-top: 15px; /* Optional: Add spacing above icons */
}

/* Individual Social Icon Styles */
.social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px; /* Circle size */
  height: 50px;
  border-radius: 50%; /* Makes it circular */
  background-color: white; /* White background */
  color: orange; /* Icon color */
  font-size: 20px; /* Increase icon size */
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow */
  text-decoration: none; /* Remove underline from links */
}
.social-icon i{
color: #000;
}

/* Social Icon Hover Effect */
.social-icon:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
  text-decoration: none;
  background-color: orange; /* Change background color */
  color: white; /* Change icon color */
}