/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

    .pink-button-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* This allows items to wrap onto the next line as needed */
    }

.pink-button-container .hjm-white-link {
   display: flex; /* Use flex display */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 40px; /* Adjust based on your design */
    padding: 0; /* Adjust or remove padding if using height */
    color: black; /* Ensures link text is white */
    text-align: center; /* Centers text */
    text-decoration: none; /* Removes underline from links */
    width: 220px !important; /* Adjust width as needed */
    margin: 5px 2.5px; /* Centers the button horizontally */
    background-color: #36FC6B !important; /* Light green background */
    border-radius: 10px;
    line-height: 1;
    font-family: Sans-serif; /* Update as necessary */
    font-weight: bold; /* Update as necessary */
    font-size: 15px;
    padding: 9px 20px;
    box-sizing: border-box; /* Ensures padding is included in the width */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Adds shadow to the button */
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for hover effects */
}

.pink-button-container .hjm-white-link:hover {
    background-color: #32E861; /* Darker shade of pink for hover */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* Larger shadow for hover effect */
	
}

	
 .pink-button-container .hjm-white-link a {
    color: black; /* Ensures link text is white */
    text-align: center; /* This might not apply as expected to inline elements like <a> */
    text-decoration: none; /* Optional: Removes underline from links */
    display: inline-block; /* Allows text-align to center the text within the link */
    width: 100%; /* Ensures the link fills the container, center alignment will be noticeable */
    /* Inherit other styles as needed */
}

        .pink-button-container .hjm-white-link {
            width: auto; /* Allows button to expand to container width */

        }
    
	
.pink-button-head {
  display: flex;
  flex-wrap: wrap; /* Allows buttons to wrap on smaller screens */
  justify-content: center; /* Centers the buttons horizontally */
  gap: 4px; /* Adds space between the button containers */
}

.button-head button {
	color: #000;
    line-height: 1;
    font-family: Sans-serif; /* Update as necessary */
    font-weight: bold; /* Update as necessary */
    font-size: 15px;
    padding: 9px 20px;
  background-color: white; /* Sets the background color of the buttons */
  border: 3px solid #36FC6B; /* Sets the border color and thickness */
  border-radius: 8px; /* Rounds the corners of the buttons */
  padding: 6px 20px; /* Adds space inside the buttons for better text visibility and clickability */
  cursor: pointer; /* Changes the cursor to indicate the element is clickable */
  transition: background-color 0.3s, box-shadow 0.3s; /* Smoothens the transition for the hover effects */
}

.button-head button:hover {
  background-color: #f2f2f2; /* Darkens the button's background color on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow to the button on hover for a "lifting" effect */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
  .pink-button-head {
    flex-direction: column; /* Stacks the button containers vertically on smaller screens */
    align-items: center; /* Centers the buttons vertically */
  }
}

.button-head-special button {
	color: #000;
	margin-right: 20px;
    line-height: 1;
    font-family: Sans-serif; /* Update as necessary */
    font-weight: bold; /* Update as necessary */
    font-size: 15px;
    padding: 9px 20px;
  background-color: white; /* Sets the background color of the buttons */
  border: 4px solid #000; /* Sets the border color and thickness */
  border-radius: 8px; /* Rounds the corners of the buttons */
  padding: 6px 20px; /* Adds space inside the buttons for better text visibility and clickability */
  cursor: pointer; /* Changes the cursor to indicate the element is clickable */
  transition: background-color 0.3s, box-shadow 0.3s; /* Smoothens the transition for the hover effects */
}

.button-head-special button:hover {
  background-color: #f2f2f2; /* Darkens the button's background color on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow to the button on hover for a "lifting" effect */
}





.pink-box-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* This allows items to wrap onto the next line as needed */
}

.pink-box {
width: 45%;
  border: 2px solid #36FC6B;
  margin: 1rem; 
  padding: .5rem 1rem;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* Grey shadow */
  border-radius: 8px; /* Border radius */
  background-color: #f5f5f5; /* Very pale grey background */
}

.pink-box-full-width {
  width: 93%;
  border: 2px solid #36FC6B;
  margin: 1rem; 
  padding: .5rem 1rem;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); /* Grey shadow */
  border-radius: 8px; /* Border radius */
  background-color: #f5f5f5; /* Very pale grey background */
}