body {
    font-family: 'AbeeZee', sans-serif;
    margin: 0;
    padding: 0;

}

*, *::before, *::after {
    box-sizing: border-box;
}


/* Header styles */
header.container {
    width: 100%; /* Ensures the header takes up the full screen width */
    min-height: 80px; /* Sets the minimum height */
    background-color: #F8C510; /* Sets the background color */
    display: flex;
    align-items: center; /* Vertically centers the content */
    justify-content: space-between; /* Spaces out the logo and button group */
    padding: 0 20px; /* Adds some padding on the sides */
}



@media screen and (max-width: 768px) {
    .header, .feature, #valeurs-desktop {
        display: none; /* Hide header and feature section on mobile */
    }

    .feature_mobile {
        display: block; /* Show mobile feature section */
    }
    
    .feature_mobile p{
       text-align: center;
        font-size: 16px;
        font-weight: 600;
        margin-top: 5%;
    }
    
    #customers-testimonials {
        margin:auto;
      }
    
  
    .valeurs{
        display: none; /* Hide mobile feature section on larger screens */
    }
}

@media screen and (min-width: 769px) {
    .feature_mobile {
        display: none; /* Hide mobile feature section on larger screens */
    }
    
}

@media (max-width: 600px) {
    .contact-info,  #valeurs{
        flex-direction: column; /* Stacks the children vertically on smaller screens */
        text-align: center;
    }

    .contact-info > div, .contact-form {
        width: 100%; /* Makes each div take the full container width */
        min-width: 0; /* Overrides the min-width for small screens */
    }
    
    .flo-content{
        flex-direction: column; /* Stacks the children vertically on smaller screens */
    }
    
   
}

/* Adjusts the logo image size if necessary */
header img {
    max-height: 80%; /* Adjusts the logo height within the header */
    margin-right: auto; /* Keeps the logo on the left */
}

header .buttons {
    margin-left: auto;
    margin-right: 40px;

}

/* Style for all buttons in the header */
header .buttons button {
    padding: 10px 20px; /* Adjust padding as needed */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
    
}

/* Specific styles for the first button ('Tarif') */
header .buttons button:first-child {
    background-color: transparent; /* No background color */
    color: #0C4B6F; /* Text color */

}

header .buttons button:first-child:hover {
    background-color: transparent; /* Background color on hover */
    color: white; /* Text color on hover */
}

/* Specific styles for the second button */
header .buttons button:nth-child(2) {
    background-color: #0C4B6F; /* Background color */
    color: white; /* Text color */
     padding: 10px 20px;
    border-radius: 5px;
}

header .buttons button:nth-child(2):hover {
    background-color: white; /* Background color on hover */
    color: #0C4B6F; /* Text color on hover */
}

.hero {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    position: relative;
    width: 100%;
    height: 50vh; /* Adjust height as needed or to cover the viewport height */
    overflow: hidden;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
    object-fit: cover; /* Ensures the video covers the space without losing aspect ratio */
}

.hero-text {
    position: relative;
    z-index: 2; /* Ensures text appears above the video */
    text-align: center; /* Centers text horizontally */
    color: #FFF; /* Example text color for visibility */
    /* Add any additional styling for hero-text here */
    /* Ensure the content inside is centered as well, if it has more specific alignment */
}


.hero-text h2 {
    font-size: 32px;
    margin-bottom: 10px;
    margin-top: 0;
    text-align: left;
}

.hero-text p {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: left;
    margin-bottom: 0;
}

.hero-text button {
    background-color: #0C4B6F; /* Background color */
    color: white; /* Text color */
    border: none;
    padding: 10px 20px;
    margin-top: 5%;
    text-align: left;
    border-radius: 5px;
    cursor: pointer;
     display: block; /* Makes the button a block-level element */
    text-align: left; /* Aligns the text inside the button to the left */
    margin-left: 0; /* Ensures the button aligns to the left edge of its container */
    margin-top: 0;
    
}

.hero-text button:hover {
  background-color: #F8C510;
  color: #0C4B6F;
}

#flo {
    padding: 50px 0;
}

.flo-content {
    max-width: 800px; /* Sets the maximum width */
    margin: 0 auto; /* Centers the content horizontally */
    display: flex; /* Keeps the child elements side-by-side */
    align-items: center; /* Aligns items vertically if needed */
    padding: 20px; /* Optional: Adds some padding inside the container */
    /* Add additional styling as needed */
}


.flo-image img {
    max-width: 400px;
    margin-right: 30px;
}

.flo-text {
    flex: 1;
    
}

.flo-text h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.flo-text p {
    margin-bottom: 15px;
}

#valeurs {
    background-color: #0C4B6F;
    color: #FFF;
    padding: 50px 0;
    text-align: center;
}

.valeurs-content {
    max-width: 800px; /* Sets the maximum width */
    margin: 0 auto; /* Centers the content horizontally */
    display: flex; /* Keeps the child elements side-by-side */
    align-items: center; /* Aligns items vertically if needed */
    padding: 20px; /* Optional: Adds some padding inside the container */
    text-align: center;
}

.valeurs-images {
    display: flex;
    justify-content: space-around;
    margin-top: 30px ;
     margin: 0 auto; /* Centers the content horizontally */
    display: flex; /* Keeps the child elements side-by-side */
    align-items: center; /* Aligns items vertically if needed */
}

.valeurs-image {
    text-align: center;
    padding: 30px;
    
}

.valeurs-image img {
    max-width: 100px;
    margin-bottom: 10px;
}

#image-rdv {
    display: flex; /* Keeps the child elements side-by-side */
    justify-content: flex-end;
    align-content: center;
    padding: 30px; /* Optional: Adds some padding inside the container */
    /* Add additional styling as needed */
    margin-right: 10%;
   
}

}

/*#avis {
    padding: 50px 0;
    text-align: center;
}*/

#avis h2 {
    margin-bottom: 30px;
}

.testimonials {
    display: flex;
    justify-content: center;
    gap: 20px;
   
}

.testimonial {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
    width: 30%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.testimonial p {
    font-style: italic;
}

.testimonial strong {
    display: block;
    margin-top: 10px;
    color: #333;
}

#contact {
 
    
}

.contact-info {
    display: flex; /* Enables flexbox */
    justify-content: center; /* Centers the children horizontally */
    align-items: center; /* Aligns the children vertically */
    flex-wrap: wrap; /* Allows the items to wrap as needed */
    gap: 20px; /* Adds space between the flex items */
    padding: 20px; /* Optional: Adds some padding around the container */
}

.contact-info > div {
   
    min-width: 350px; /* Prevents the divs from becoming too narrow */
}


#contact iframe {
    width: 100%;
    height: 400px;
    border: 0;
}

#contact .contact-form {
    text-align: center;
}

#contact .contact-form form {
    max-width: 600px;
    min-width: 400px;
    padding: 40px;
}

#contact .contact-form input,
#contact .contact-form textarea {
    display: block;
    width: calc(100% - 20px);
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#contact .contact-form button {
    background-color: #0C4B6F; /* Background color */
    color: white; /* Text color */
     padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    border: 0;
}

#contact .contact-form button:hover {
    background-color: #F8C510;
    color: #0C4B6F;
}

footer {
    background-color: #F8C510;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Ensure content wraps on smaller screens */
    height: 200px;
}

.footer-left {
    display: flex;
    justify-content:flex-start;
    color: #fff;
    flex: 1; /* Allows the left side to expand and push the image to the right */
}

.footer-left p {
    margin-left:15px;
    font-size: 12px;
    color: #0C4B6F; 
}

.footer-right {
    margin-left: auto; /* This pushes the .footer-right container to the right */
    display: flex;
    justify-content: flex-end; /* Aligns content to the right */
    align-items: center; /* Aligns items vertically */
}

.footer-right img {
    max-width: 80px; /* Adjust based on your image size */
    height: auto; /* Keeps image aspect ratio */
    padding-right: 40px;
}


footer .contact-info {
    color: #fff;
}



#feature {
    background-color: #fff;
    padding: 50px 0;
}

.cards-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
     position: relative; /* Needed for proper positioning of the pseudo-element */
    z-index: 1; /* Ensure the cards are above the background image */
}

.cards-container::before {
    content: ""; /* Required for pseudo-elements */
    position: absolute;
    z-index: -1; /* Places the pseudo-element behind the container's content */
    right: 0; /* Aligns the pseudo-element to the right */
    top: 50%; /* Centers it vertically relative to the container */
    transform: translateY(-10%) translateX(10%); /* Adjusts the positioning to get the center-right effect */
    width: 400px; /* Width of the background image */
    height: 190px; /* Height of the background image */
    background-image: url('Images/Pattern.png'); /* Path to your image */
    background-size: cover; /* Cover ensures the image covers the area of the pseudo-element */
    background-position: center; /* Centers the background image within the pseudo-element */
}

.card {
    width: 400px;
    height: 250px;
    background-color: #0C4B6F;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    border-radius: 2px;
    margin-right: 20px; /* Add spacing between cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and box-shadow */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Initial box shadow for depth */
    /* Keep your existing .card styles here */
}

.card:hover {
    transform: translateY(-10px); /* Moves the card up */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Increases shadow for lifted effect */
}

.card p {
    padding: 5%;
    margin-left: 5px;
    line-height: 1.8; /* Adjusts the height of lines within the paragraph */
    font-weight: 300; /* Makes the text bold */
    /* Or use a numerical value for font-weight, e.g., 400 for normal, 700 for bold */
}

.card button {
    background-color: transparent;
     margin-top: auto; /* Pushes the button to the bottom of the flex container */
    align-self: center; /* Optionally center the button horizontally */
    color: white;
    cursor: pointer;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    border-color: white;

}

.card button:hover {
    background-color: #F8C510;
    color: #0C4B6F;
}

.overlay {
    position: fixed; /* Cover the full screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
    display: none; /* Hidden by default */
    z-index: 10; /* Ensure it's above the page content but below the modal */
}

/* Modal */
.modal {
    display: none; /* Modals hidden by default */
    position: fixed;
    z-index: 100; /* Ensure this is higher than the overlay's z-index */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); /* Center the modal */
    width: 70%; /* Adjust based on your preference */
    background: white;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,.1);
}

/* When modal is active */
.modal.active {
    display: block; /* Show modal */
}


.modal-content h4 {
    margin-bottom: 5px;
}

.modal-content p {
    margin-bottom: 5px;
    font-size: 14px;
    text-align: left;
}

.modal-content li {
      margin-bottom: 5px;
    font-size: 14px;
    text-align: left;
  
}

.modal-btn {
    background-color: #0C4B6F;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.modal-btn:hover {
    background-color: #F8C510;
    color: #0C4B6F;
}

.custom-pointer {
    cursor: pointer;
}


.g-recaptcha {
margin-bottom: 10px;
}