/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* Top-level menu items */
.menu-item-has-children {
  padding-left: 5px;
}

.wishlist-button.button i.icon-heart,
button.wishlist-button i.icon-heart {
  top: -1.3px;
  vertical-align: middle;
  left: 0.8px;
}

.badge-container.left {
  left: 15px;
}

.badge-container.top {
  top: -22px;
}

.contact-form {
  margin: 0;
  padding: 20px 30px;
}

.contact-form .card-header {
  padding-top: 35px;
  background-color: rgb(26, 32, 53);
  border-bottom: 0;
}

.contact-form .card-header h2 {
  color: #f1f0f0;
}

.contact-form .card-body {
  background-color: rgb(26, 32, 53);
  padding: 75px;
  padding-top: 35px;
  padding-bottom: 35px;
}

.card-body {
  min-height: 189px;
}

.contact-form .form-label {
  color: #f1f0f0;
  font-weight: bold;
}

/* Social Icons Container */
.social-icons.custom-icons {
  display: flex;
  gap: 10px;
}

/* Base styling for icons */
.social-icons.custom-icons .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Perfect circle */
  color: white; /* White icon font */
  font-size: 20px; /* Adjust font size as needed */
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}

/* Facebook Icon */
.social-icons.custom-icons .facebook {
  background-color: #3b5998; /* Facebook blue */
}

/* Twitter Icon */
.social-icons.custom-icons .twitter {
  background-color: #000; /* Twitter blue */
}

/* Email Icon */
.social-icons.custom-icons .email {
  background-color: #1a2035; /* Custom email color */
}

/* Hover Effect for Icons */
.social-icons.custom-icons .icon:hover {
  transform: scale(1.1); /* Subtle zoom effect */
}

/* Facebook Icon */
.social-icons.custom-icons .facebook:hover {
  background-color: rgba(59, 89, 152, 0.7); /* Facebook blue */
}

/* Twitter Icon */
.social-icons.custom-icons .twitter:hover {
  background-color: rgba(0, 0, 0, 0.7); /* Twitter blue */
}

/* Email Icon */
.social-icons.custom-icons .email:hover {
  background-color: rgba(26, 32, 53, 0.7); /* Custom email color */
}

.header-newsletter-item,
.element-error,
.header-newsletter-title {
  display: none !important;
}

@media only screen and (max-width: 48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/
}