/*
Theme Name:MOEZ_GERMANY
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Description: A child theme of Twenty Twenty-Four
Author: MOEZ.org
Template: twentytwentyfour
Version: 1.0
*/

/* MZ Info Box White Background Styling */
.MZ-info-box-white {
  border: 3px solid #3F76BA;
  border-bottom: 10px solid #3F76BA;
  border-radius: 10px;
  border-left: 3px solid #3F76BA;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  padding-top: 70px;
  padding-right: 21px;
  padding-bottom: 21px;
  padding-left: 21px;
  margin-top: 50px;
   
  text-align: center;
  max-width: 550px;
  margin: 70px auto 20px !important; /* Adjusted top margin */
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
  background-color: white; /* Ensures background is white */
}

.MZ-info-box-white:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 255, 0.2);
  background-color: #f0f8ff;
}

/* Positioning the icon circle */
.MZ-info-box-white .custom-icon {
  position: absolute;
  top: -50px; /* Moves the circle upwards by half its height */
  left: 50%;
  transform: translateX(-50%);
}

.MZ-info-box-white .icon-circle {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 3px solid #3F76BA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MZ-info-box-white .icon-circle i {
  font-size: 60px; /* Adjust the icon size */
  color: #3F76BA; /* Icon color */
}

/* Change icon color on hover of the icon */
.MZ-info-box-white .icon-circle:hover i {
  color: #F8AB04;
}

.MZ-info-box-white .content-wrapper {
  /* Optional: Additional styling for content wrapper if needed */
}

.MZ-info-box-white h3,
.MZ-info-box-white h4 {
  margin-top: 0; /* Remove any default top margin */
  margin-bottom: 10px;
  color: #3f76ba;
}

.MZ-info-box-white p {
  margin-bottom: 20px;
  color: #38629f;
}

.MZ-info-box-white .wp-block-button {
  text-align: center; /* Ensures the button is centered */
}

.MZ-info-box-white .wp-block-button__link {
  background-color: #3F76BA;
  color: white;
  border-radius: 5px;
}

.MZ-info-box-white .wp-block-button__link:hover {
  background-color: #F8AB04;
}

/* Make the entire block clickable */
.MZ-info-box-white .full-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  z-index: 10;
  background-color: transparent;
}

.MZ-info-box-white .full-link:focus {
  outline: 3px solid rgba(0, 0, 255, 0.5);
  outline-offset: -3px;
}

/* Exclude the button area from the full-link overlay */
.MZ-info-box-white .exclude-click {
  position: relative;
  z-index: 11;
}

/* Media query for screens narrower than 600px */
@media (max-width: 600px) {
  .MZ-info-box-white {
    padding: 60px 15px 15px; /* Adjusted padding for mobile */
    margin: 60px auto 15px;  /* Adjusted margin for mobile */
  }

  .MZ-info-box-white .custom-icon {
    top: -40px; /* Reduced negative top value */
  }

  .MZ-info-box-white .icon-circle {
    width: 80px;  /* Smaller circle size */
    height: 80px;
  }

  .MZ-info-box-white .icon-circle i {
    font-size: 40px; /* Smaller icon size */
  }

  .MZ-info-box-white h3,
  .MZ-info-box-white h4 {
    font-size: 22px; /* Adjust font size for headings */
  }

  .MZ-info-box-white p {
    font-size: 16px; /* Adjust font size for paragraph */
  }

  .MZ-info-box-white .wp-block-button__link {
    font-size: 16px; /* Adjust font size for button text */
    padding: 10px 20px; /* Adjust padding for the button */
  }
}

/* MZ Info Box Blue Background Styling */
.MZ-info-box-blue {
  border: 3px solid white; /* Borders are white */
  border-radius: 10px;
  padding: 70px 20px 20px; /* Increased top padding */
  text-align: center;
  max-width: 600px;
  margin: 70px auto 20px;
  position: relative;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
  background-color: #38629f; /* Background is #38629f */
}

.MZ-info-box-blue:hover {
  box-shadow: 0 4px 10px rgba(248, 171, 4, 0.2); /* Hover shadow color adjusted */
  border-color: white; /* Border color on hover */
}

/* Positioning the icon circle */
.MZ-info-box-blue .custom-icon {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.MZ-info-box-blue .icon-circle {
  width: 100px;
  height: 100px;
  background-color: #38629f;
  border: 3px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s;
}

.MZ-info-box-blue .icon-circle i {
  font-size: 50px;
  color: white;
  transition: color 0.3s ease;
}

/* Icon hover effect */
.MZ-info-box-blue .icon-circle:hover i {
  color: #f8ab04;
}

.MZ-info-box-blue .icon-circle:hover {
  border-color: #f8ab04;
}

.MZ-info-box-blue .content-wrapper {
  /* Additional styling for content wrapper if needed */
}

.MZ-info-box-blue h3,
.MZ-info-box-blue h4 {
  margin-top: 0;
  margin-bottom: 10px;
  color: white;
}

.MZ-info-box-blue p {
  margin-bottom: 20px;
  color: white;
}

.MZ-info-box-blue .wp-block-button {
  text-align: center;
}

.MZ-info-box-blue .wp-block-button__link {
  background-color: #38629f;
  color: white;
  border: 3px solid white;
  border-radius: 5px;
  transition: background-color 0.3s, border-color 0.3s;
}

.MZ-info-box-blue .wp-block-button__link:hover {
  background-color: #f8ab04;
  color: white;
  border-color: #f8ab04;
}

/* Make the entire block clickable */
.MZ-info-box-blue .full-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  z-index: 10;
  background-color: transparent;
}

.MZ-info-box-blue .full-link:focus {
  outline: 3px solid rgba(248, 171, 4, 0.5);
  outline-offset: -3px;
}

/* Exclude the button area from the full-link overlay */
.MZ-info-box-blue .exclude-click {
  position: relative;
  z-index: 11;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .MZ-info-box-blue {
    padding: 60px 15px 15px;
    margin: 60px auto 15px;
  }

  .MZ-info-box-blue .custom-icon {
    top: -40px;
  }

  .MZ-info-box-blue .icon-circle {
    width: 80px;
    height: 80px;
  }

  .MZ-info-box-blue .icon-circle i {
    font-size: 40px;
  }

  .MZ-info-box-blue h3,
  .MZ-info-box-blue h4 {
    font-size: 22px;
    color: white;
  }

  .MZ-info-box-blue p {
    font-size: 16px;
    color: white;
  }

  .MZ-info-box-blue .wp-block-button__link {
    font-size: 16px;
    padding: 10px 20px;
  }
}

/* Icon checkmark List Styling */
.icon-list-white-checkmark {
  list-style: none;
  margin: 0 auto; /* Center the list horizontally */
  padding: 10px;
  border: none; /* Keep the white border */
  border-radius: 5px; 
  width: 300px; /* Set the desired width */
  max-width: 100%; /* Ensure it doesn't exceed the container on smaller screens */
}

.icon-list-white-checkmark li {
  position: relative;
  color: white; /* Text color */
  padding-left: 25px; /* Space for the icon on the left */
  margin-bottom: 10px; /* Space between list items */
  text-align: left; /* Align text to the left */
}

.icon-list-white-checkmark li:last-child {
  margin-bottom: 0; /* Remove bottom margin from the last item */
}

.icon-list-white-checkmark li::before {
  content: "\f00c"; /* Unicode for Font Awesome check icon */
  font-family: "Font Awesome 5 Free"; /* Adjust if using a different version */
  font-weight: 900; /* Needed for solid icons */
  position: absolute;
  left: 0; /* Position icon at the left */
  top: 50%; /* Vertically center the icon */
  transform: translateY(-50%); /* Adjust for vertical centering */
  color: white; /* Icon color */
  font-size: 16px; /* Icon size */
}

/* Optional: Hover effect */
.icon-list-white-checkmark li:hover {
  color: #f8ab04; /* Change text color on hover */
}

.icon-list-white-checkmark li:hover::before {
  color: #f8ab04; /* Change icon color on hover */
}


/* Icon checkmark List Blue Styling */
.icon-list-blue-checkmark {
  list-style: none;
  margin: 0 auto; /* Center the list horizontally */
  padding: 10px;
  border: none; /* Keep the white border */
  border-radius: 5px; 
  width: 300px; /* Set the desired width */
  max-width: 100%; /* Ensure it doesn't exceed the container on smaller screens */
}

.icon-list-blue-checkmark li {
  position: relative;
  color: #3F76BA; /* Text color */
  padding-left: 25px; /* Space for the icon on the left */
  margin-bottom: 10px; /* Space between list items */
  text-align: left; /* Align text to the left */
}

.icon-list-blue-checkmark li:last-child {
  margin-bottom: 0; /* Remove bottom margin from the last item */
}

.icon-list-blue-checkmark li::before {
  content: "\f00c"; /* Unicode for Font Awesome check icon */
  font-family: "Font Awesome 5 Free"; /* Adjust if using a different version */
  font-weight: 900; /* Needed for solid icons */
  position: absolute;
  left: 0; /* Position icon at the left */
  top: 50%; /* Vertically center the icon */
  transform: translateY(-50%); /* Adjust for vertical centering */
  color: white; /* Icon color */
  font-size: 16px; /* Icon size */
}

/* Optional: Hover effect */
.icon-list-blue-checkmark li:hover {
  color: #f8ab04; /* Change text color on hover */
}

.icon-list-blue-checkmark li:hover::before {
  color: #f8ab04; /* Change icon color on hover */
}

/* MZ Icon About Styling */
.MZ-icon-about {
  font-size: 80px;
  color: #3F76BA;
  display: inline-block;
}

.MZ-icon-about-wrapper {
  text-align: center;
  margin: 20px 0;
}

.MZ-icon-circle {
  width: 160px;
  height: 160px;
  margin: 100px auto;
  background-color: #fff;
  border: 3px solid #38629f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/*.MZ-icon-circle:hover {
  border-color: #F8AB04;
}*/

.MZ-icon-circle:hover .MZ-icon-about {
  color: #F8AB04;
}

@media (max-width: 600px) {
  .MZ-icon-circle {
    width: 80px;
    height: 80px;
	margin: 15px auto; /* Slightly less margin on small screens */
  }
  .MZ-icon-about {
    font-size: 40px;
  }
}

/* MZ List Service Styling */
.MZ-list-service {
  list-style: none; /* Remove default bullets */
  padding-left: 15;
  padding-right: 15;
  margin: 0;
}

.MZ-list-service li {
  position: relative;
  padding-left: 25px; /* Space for the icon */
  text-align: left;   /* Left-align text */
  margin-bottom: 10px; /* Space between items */
}

.MZ-list-service li::before {
  content: "\f0da"; /* Unicode for Font Awesome 'check' icon */
  font-family: "Font Awesome 6 Free"; /* Adjust if using a different version */
  font-weight: 900; /* Required for solid icons */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 16px; /* Adjust icon size */
  color: #ffffff; /* Icon color */
}

/* Optional: Hover effect */
.MZ-list-service li:hover::before {
  color: #f8ab04; /* Change icon color on hover */
}




/* MZ Info Box Blue Service Styling */
.MZ-info-box-blue-service {
  /*inserted from kadence blocks*/
  border-top: 3px solid white;
  border-right: 3px solid white;
  border-bottom: 10px solid white;
  border-left: 3px solid white;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
  padding-top: 70px;
  padding-right: 21px;
  padding-bottom: 21px;
  padding-left: 21px;
  margin-top: 50px;
	/*end from kadence blocks*/
  
  
  /* padding: 70px 20px 20px; /* Adjust padding as needed */
  text-align: center;
  width: 550px; /* Set fixed width */
  max-width: 100%; /* Ensure responsiveness */
  /* height: 650px; /* Set fixed height */
  margin: 70px auto 20px !important;
  position: relative;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
  background-color: #38629f; /* Background color */
  /*overflow: hidden; /* Hide overflow content */
}

.MZ-info-box-blue-service:hover {
  box-shadow: 0 4px 10px rgba(248, 171, 4, 0.2); /* Hover shadow */
  border-color: white;
}

/* Positioning the icon circle */
.MZ-info-box-blue-service .custom-icon {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
}

.MZ-info-box-blue-service .icon-circle {
  width: 100px;
  height: 100px;
  background-color: #38629f;
  border: 3px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s;
}

.MZ-info-box-blue-service .icon-circle i {
  font-size: 50px;
  color: white;
  transition: color 0.3s ease;
}

/* Icon hover effect */
.MZ-info-box-blue-service .icon-circle:hover i {
  color: #f8ab04;
}

.MZ-info-box-blue-service .icon-circle:hover {
  border-color: #f8ab04;
}

.MZ-info-box-blue-service .content-wrapper {
  height: calc(100% - 150px); /* Adjusted for fixed height */
  overflow-y: auto; /* Enable scrolling if content overflows */
  padding-top: 60px; /* Position content below the icon */
}

.MZ-info-box-blue-service h3,
.MZ-info-box-blue-service h4 {
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 20px;
  padding-bottom: 30px;
  height: 80px;
  text-transform: uppercase;
  color: white;
}

.MZ-info-box-blue-service p {
  margin-bottom: 20px;
  height: 120px;
  color: white;
}

.MZ-info-box-blue-service .wp-block-button {
  text-align: center;
}

.MZ-info-box-blue-service .wp-block-button__link {
  background-color: #38629f;
  color: white;
  border: 3px solid white;
  border-radius: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
  padding-right: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: background-color 0.3s, border-color 0.3s;
}

.MZ-info-box-blue-service .wp-block-button__link:hover {
  background-color: #f8ab04;
  color: white;
  border-color: #f8ab04;
}

/* Make the entire block clickable */
.MZ-info-box-blue-service .full-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none;
  z-index: 10;
  background-color: transparent;
}

.MZ-info-box-blue-service .full-link:focus {
  outline: 3px solid rgba(248, 171, 4, 0.5);
  outline-offset: -3px;
}

/* Exclude the button area from the full-link overlay */
.MZ-info-box-blue-service .exclude-click {
  position: relative;
  z-index: 11;
}

/* Responsive adjustments */
@media (max-width: 1470px) {
  h3, h4 {
    font-size: 1.5em; /* Slightly smaller so text fits in one line */
    line-height: 1.2;
  }
}
@media (max-width: 600px) {
  .MZ-info-box-blue-service {
    padding: 60px 15px 15px;
    margin: 60px auto 15px;
    width: 100%; /* Remove fixed width on mobile */
    height: auto; /* Remove fixed height on mobile */
    overflow: visible; /* Allow content to expand */
  }

  .MZ-info-box-blue-service .custom-icon {
    top: -40px;
  }

  .MZ-info-box-blue-service .icon-circle {
    width: 80px;
    height: 80px;
  }

  .MZ-info-box-blue-service .icon-circle i {
    font-size: 40px;
  }

  .MZ-info-box-blue-service h3,
  .MZ-info-box-blue-service h4 {
    font-size: 22px;
    color: white;
  }

  .MZ-info-box-blue-service p {
    font-size: 16px;
    color: white;
  }

  .MZ-info-box-blue-service .wp-block-button__link {
    font-size: 16px;
    padding: 10px 20px;
  }

  .MZ-info-box-blue-service .content-wrapper {
    padding-top: 50px;
    height: auto; /* Allow content to determine height */
    overflow-y: visible; /* Show all content */
  }
}

/* new style began */
/* MZ Price Coral Styling */
.MZ-Price-coral {
  background-color: #ff5f2e;
  padding: 2em; /* Padding on all sides */
  border: 4px solid white;
  border-radius: 30px;
}

.MZ-Price-coral h2 {
  color: white;
  font-size: 40px;
}

.MZ-Price-coral p {
  color: white;
  line-height: 1.5;
}

.MZ-Price-coral hr {
  background-color: white;
  border: none;
  height: 1px;
  margin: 1em 0; /* Margin above and below */
}

.MZ-Price-coral ul,
.MZ-Price-coral ol {
  color: white;
}

/* Button Styling */
.MZ-Price-coral .wp-block-button {
  width: 100%; /* Makes the button block full width */
  margin: 1em 0; /* Optional: Adds vertical spacing */
}

.MZ-Price-coral .wp-block-button__link {
  display: block; /* Ensures the button fills the parent width */
  width: 100%; /* Makes the button itself full width */
  text-align: center; /* Centers the text within the button */
  color: white;
  background-color: #f2a007;
  border-radius: 5px;
  padding: 0.75em 0; /* Adjust padding as needed */
  text-decoration: none;
  border: none; /* Removes any default borders */
}

.MZ-Price-coral .wp-block-button__link:hover {
  background-color: #d89006; /* Slightly darker shade on hover */
}




/* new style began */
.MZ-List-Social {
  list-style: none;          /* Remove default list bullets */
  padding: 0 6em;            /* Add left and right padding */
  margin: 0;                 /* Reset default margin if needed */
}

.MZ-List-Social li {
  position: relative;
  margin-bottom: 1em;        /* Spacing between items */
  padding-left: 2em;         /* Space for the icon */
  color: #fff;               /* Text color if needed */
}

/* Base icon styling */
.MZ-List-Social li::before {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 0.2em;                /* Adjust vertical alignment of the icon */
  font-size: 1.3em;            /* Adjust icon size as needed */
  line-height: 1;
  color: #fff;               /* Icon color matches text */
  content: "\f16d";          /* Default icon (Instagram) if all items use same icon */
}

/* If you want each item to have a different icon, use nth-child: */

/* 1st item: Instagram */
.MZ-List-Social li:nth-child(1)::before {
  content: "\f16d"; /* Instagram icon */
}

/* 2nd item: TikTok */
.MZ-List-Social li:nth-child(2)::before {
  content: "\e07b"; /* TikTok icon */
}

/* 3rd item: YouTube */
.MZ-List-Social li:nth-child(3)::before {
  content: "\f167"; /* YouTube icon */
}

/* 4th item: Telegram */
.MZ-List-Social li:nth-child(4)::before {
  content: "\f2c6"; /* Telegram icon */
}

@media (max-width: 600px) {
  .MZ-List-Social {
    padding: 0; /* Remove padding on mobile screens */
  }
}