body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.info-navbar {
    background-color: #33afff;
    padding: 10px 20px;
    border-bottom: 1px solid #ccc;
    transition: top 0.3s, opacity 0.3s; 
}

.info-navbar.hidden {
    opacity: 0; 
    pointer-events: none; 
    height: 0; 
    overflow: hidden;
}

.info-navbar.fixed {
    position: fixed; 
    top: 0; 
    left: 0;
    right: 0;
    z-index: 1000; 
}

.info-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px; 
    margin: 0 auto;
    flex-wrap: wrap; 
}

.contact-info {
    display: flex;
    justify-content: space-between;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding-bottom: 20px;
}

.contact-info span {
    margin-right: 10px; 
    font-size: 15px;
    font-weight: 500;
}

.contact-info i {
    margin-right: 5px;
}

.social-icons {
    display: flex;
}

.social-icons .icon {
    margin-left: 15px;
    color: #ffffff;
    text-decoration: none;
    font-size: 18px; 
    transition: color 0.3s;
}

.social-icons .icon:hover {
    color: #33afff; 
}

.navbar {
    position: fixed;
    top: 40px; 
    left: 0;
    right: 0;
    height: 60px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 70px;
    z-index: 10000; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

.logo img {
    height: 80px; 
}

.nav-links {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    color: #333;
    text-decoration: none;
    padding: 15px 15px;
    display: block;
    transition: background 0.3s;
    font-size: 19px;
    font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active {
    color: #33afff;
}
.hamburger {
    display: none; 
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s; 
}
/* section */
.home-section {
    margin-top: 130px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 50px;
    background-color: #f9f9f9; 
    border-radius: 10px; 
}
.slider-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  .slider-container .slider {
    display: flex;
    transition: transform 1s ease;
  }
  
.slider-container .slide {
    position: relative;
    min-width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
  }

  .slider-container .slide::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); 
    z-index: 0; 
  }
  
  .slider-container .slide-1 {
    background-image: url('/Public/img/slide1.png');
  }
  
  .slider-container .slide-2 {
    background-image: url('/Public/img/slide2.png');
  }
  
  .slider-container .slide-3 {
    background-image: url('/Public/img/slide3.png');
  }
  

  .slider-container .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    
    z-index: 1;
  }
  
  .slider-container .overlay-text h2 {
    font-size: 3rem;
    margin-bottom: 15px;
  }
  
  .slider-container .overlay-text p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    line-height: 30px;
    font-weight: 400;
    text-align: center;
  }
  
  .slider-container .cta-button {
    padding: 12px 25px;
    background-color: #007bff;
    color: white;
    font-size: 1rem;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
  }
  
  .slider-container .cta-button:hover {
    background-color: #0056b3;
  }
  
  /* Manual Control Buttons */
  .slider-container .prev, .next {
    position: absolute;
    top: 50%;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;
    font-size: 2rem;
    cursor: pointer;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
  }
  
  .slider-container .prev {
    left: 10px;
  }
  
  .slider-container .next {
    right: 10px;
  }
  
 .slider-container .prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
  }

.home-content {
    flex: 1; /* Take remaining space */
    padding: 20px;
}

.home-title {
    font-size: 2.3rem;
    color: #333;
    margin-bottom: 10px;
}

.home-reading {
    font-size: 1.2rem;
    color: #007BFF; /* Highlight color */
    margin-bottom: 15px;
}

.home-description {
    font-size: 1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 26px;
    text-align: justify;
}

.button-group {
    display: flex;
    gap: 15px; /* Space between buttons */
}

.btn {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    color: #fff; /* Button text color */
}

.btn-primary {
    background-color: #007BFF; /* Primary button color */
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker on hover */
}

.btn-secondary {
    background-color: #6c757d; /* Secondary button color */
    transition: background-color 0.3s;
}

.btn-secondary:hover {
    background-color: #5a6268; /* Darker on hover */
}

.home-image {
    flex: 1;
    display: flex;
    justify-content: center; /* Center the image */
}

.home-image img {
    margin-top: 50px;
    max-width: 100%; 
    border-radius: 10px; 
}

/* About section */
.about-section {
    display: flex;
    align-items: center;
    padding: 50px;
    margin: 0 auto;
}

.about-image {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.about-image img {
    max-width: 100%; 
    border-radius: 10px; 
}

.about-content {
    flex: 1;
    padding: 20px;
}

.about-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.about-reading {
    font-size: 1.2rem;
    color: #007BFF; 
    margin-bottom: 15px;
}

.about-description {
    font-size: 1rem;
    color: #555;
    line-height: 26px;
    margin-bottom: 15px;
    text-align: justify;
}

.values {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes de largeur égale */
    gap: 20px; /* Espace entre les éléments */
    margin: 20px 0;
}

.value-item {
    padding: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: #333;
    background-color: #f8f9fa; /* Fond léger pour chaque item */
    transition: transform 0.3s ease;
}

.value-item:hover {
    transform: translateY(-3px); /* Petit effet au survol */
    background-color: #f0f8ff; /* Changement de couleur au survol */
}

.value-item i {
    font-size: 2rem;
    margin-right: 15px;
    color: #28a0e2;
}

/* Responsive design */
@media (max-width: 768px) {
    .values {
        grid-template-columns: repeat(2, 1fr); /* Maintenir 2 colonnes même sur mobile */
        gap: 10px; /* Réduire l'espace sur mobile */
    }

    .value-item {
        font-size: 1rem; /* Réduire la taille du texte */
    padding: 10px;
    }

    .value-item i {
        font-size: 1.5rem; /* Réduire la taille des icônes */
    margin-right: 10px; 
    }
}

@media (max-width: 480px) {
.value-item {
        font-size: 0.9rem; /* Encore plus petit pour les très petits écrans */
    }
}

.about-content .btn {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    color: #fff; /* Button text color */
    display: inline-block;
    transition: background-color 0.3s;
    background-color: #007BFF; /* Button color */
}

.about-content .btn:hover {
    background-color: #0056b3; /* Darker on hover */
}
/* Service section */
.services-section {
    padding: 50px;
    text-align: center;
    margin: 0 auto;
    background-color: #f9f9f9; 
}

.services-section h4 {
    font-size: 1.2rem;
    color: #007BFF; 
    margin-bottom: 10px;
}
.services-section h1{
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.services-section .text {
    font-size: 1rem;
    color: #555;
    line-height: 26px;
    margin-bottom: 15px;
    padding: 0px 100px;
    text-align: center;
}

.services-container {
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    flex-wrap: nowrap; 
}

.service-item {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    margin: 10px; /* Margin for spacing */
    transition: transform 0.3s, box-shadow 0.3s;
    flex: 1; /* Allow items to grow */
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.service-item img {
    max-width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.service-item h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 10px;
}

.service-item p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 26px;
   
}

.service-item .btn {
    padding: 10px 15px;
    border-radius: 5px;
    background-color: #007BFF;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.3s;
}

.service-item .btn:hover {
    background-color: #0056b3;
}

/* why choose us section */
.why-choose-us {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px;
    margin: 0 auto;
    background-color: #ffffff;
}

.why-content {
    flex: 1;
    margin-right: 20px; /* Space between text and image */
}

.why-content h4 {
    font-size: 1.2rem;
    color: #007BFF; /* Highlight color */
    margin-bottom: 15px;
}
.why-content h1{
    font-size: 2.3rem;
    color: #333;
    margin-bottom: 10px;
} 

.intro-text {
    font-size: 1rem;
    color: #555;
    margin-bottom: 30px;
    line-height: 26px;
    
}

.reasons {
    display: grid; /* Use grid layout for reasons */
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 20px; /* Space between items */
}

.reason-item {
    display: flex;
    flex-direction: column; /* Stack icon on top of text */
    align-items: center; /* Center align items */
    text-align: center; /* Center text */
}

.reason-item i {
    font-size: 2rem; /* Increase icon size */
    color: #007BFF; /* Icon color */
    margin-bottom: 10px; /* Space between icon and text */
}
.reason-details h3 {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 5px;
}

.reason-details p {
    font-size: 1rem;
    color: #555;
    line-height: 26px;
}

.why-image {
    flex: 1;
}

.why-image img {
    max-width: 100%;
    border-radius: 10px;
}


/* Blogs section */
.blog-page {
    padding: 50px;
    margin: 0 auto;
    background-color: #f9f9f9; /* Light background */
    border-radius: 10px; /* Rounded corners */
}
.blog-page h4{
    font-size: 1.2rem;
    color: #007BFF; 
    margin-bottom: 10px;
    text-align: center;
}
.blog-page h1 {
    font-size: 2.3rem;
    color: #333;
    margin-bottom: 10px;
    text-align: center;
}

.intro-description {
    font-size: 1rem;
    color: #555;
    line-height: 26px;
    margin-bottom: 15px;
    text-align: center;
    padding: 0px 100px;
}

.blog-grid {
    display: grid; /* Use grid layout for blog posts */
    grid-template-columns: repeat(4, 1fr); /* Fixed four columns */
    gap: 20px; /* Space between blog posts */
}

.blog-post {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s; /* Animation on hover */
    overflow: hidden; /* Prevent overflow */
}

.blog-post:hover {
    transform: translateY(-5px); /* Lift effect on hover */
}

.limited-description {
    overflow: hidden; /* Hide overflow */
    display: -webkit-box; /* For webkit browsers */
    -webkit-box-orient: vertical; /* Orientation */
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    max-height: 4.5em; /* Control height */
    line-height: 1.5; /* Space between lines */
}

.divider {
    border: 0.5px solid #eee;
    margin: 15px 0;
}

.blog-image {
    max-width: 100%; /* Responsive image */
    border-radius: 10px; /* Rounded corners */
    margin-bottom: 15px; /* Space below image */
}

.post-date-author {
    display: flex; /* Flexbox for alignment */
    justify-content: space-between; /* Space between author and date */
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 10px; /* Space below author/date */
}

.divider {
    border: 0.5px solid #eee; /* Divider line */
    margin: 15px 0; /* Space around divider */
}

.blog-post h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 10px;
}

.blog-description {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5; /* Improved readability */
    margin-bottom: 20px;
}
.button-container .btn {
    display: inline-flex; /* Flexbox for icon and text */
    align-items: flex-start; /* Center icon and text vertically */
    padding: 10px 15px;
    border-radius: 5px;
    background-color: #007BFF; /* Button background color */
    color: #fff; /* Button text color */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s;
}

.button-container .btn:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.button-container .btn i {
    margin-right: 5px; /* Space between icon and text */
}

/* contact section */
.contact-page {
    padding: 50px;
    margin: 0 auto; /* Center the section */
}

.contact-container {
    position: relative; /* Position relative for the content */
}

.contact-image {
    position: relative; /* Position relative for the image */
}

.contact-image img {
    max-width: 100%; /* Responsive image */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: rounded corners */
}

.contact-content {
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Inner padding */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    width: 550px; /* Increased width for the form */
    position: absolute; /* Position relative to parent */
    top: 120px; /* Space from the top */
    right: 20px; /* Space from the right */
    z-index: 2; /* Ensure content is above the image */
}

.contact-page h4 {
    font-size: 1.2rem;
    color: #007BFF; 
    margin-bottom: 10px;
    text-align: center;
    text-align: left; /* Align title to the left */
}

.contact-page h1 {
    font-size: 2.3rem;
    color: #333;
    text-align: center;
    margin-bottom: 15px;
    text-align: left; /* Align subtitle to the left */
}

.description {
    font-size: 1rem;
    color: #777;
    text-align: left; /* Align description to the left */
    margin-bottom: 20px; /* Space below description */
    line-height: 26px;
    text-align: justify;
}

.contact-form {
    display: flex;
    flex-direction: column; /* Stack form elements */
}

.form-row {
    display: flex; /* Flexbox for row */
    justify-content: space-between; /* Space between columns */
    margin-bottom: 15px; /* Space below rows */
}

.form-group {
    flex: 1; /* Take equal space */
    margin-right: 15px; /* Space between inputs */
    
}

.form-group:last-child {
    margin-right: 0; /* Remove margin for the last item */
}

label {
    font-size: 0.9rem;
    color: #333;
}

input, textarea {
    width: 100%; /* Full width */
    padding: 10px 0; /* Inner padding */
    border: 1px solid #ccc; /* Border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Font size */
}

.contact-form .form-row .form-group {
    margin-right: 15px; /* Space between input fields in the same row */
}

.contact-form .form-row .form-group:last-child {
    margin-right: 0; /* No margin on the last input */
}

.contact-form-container button.btn {
    padding: 10px 15px; /* Adjusted padding for the button */
    border-radius: 5px;
    background-color: #007BFF; /* Button background color */
    color: #fff; /* Button text color */
    text-decoration: none; /* Remove underline */
    border: none; /* No border */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s; /* Smooth transition */
    align-self: flex-start; /* Align button to the start */
    margin-top: 15px; /* Space between last input and send button */
}

.contact-form-container button.btn:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.contact-form-container .btn i {
    margin-right: 5px; /* Space between icon and text */
}
/* partner section */
.partner-section {
    padding: 50px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden; /* Hide overflow to create the sliding effect */
    max-width: 1200px; /* Set a maximum width for the section */
}

.partner-section h4 {
    font-size: 1.2rem;
    color: #007BFF;
    margin-bottom: 10px;
}

.partner-section h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.partner-section p {
    font-size: 1rem;
    color: #555;
    line-height: 26px;
    margin-bottom: 30px;
    text-align: center;
    padding: 0 20px; /* Adjust padding for smaller screens */
}

.partner-slider {
    width: 100%;
}

.partner-wrapper {
    display: flex;
    transition: transform 0.5s ease; /* Smooth transition */
}

.partner-logo {
    flex: 0 0 14%; /* Show 7 logos per row */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px; /* Adjust padding for more space */
}

.partner-logo img {
    max-width: 100%; /* Ensure images do not exceed their container */
    height: auto; /* Maintain aspect ratio */
    max-height: 70px; /* Set a maximum height to prevent overflow */
    object-fit: contain; /* Ensure images fit within their containers */
}

/* Footer section */
.footer {
    background-color: #2c3e50;
    color: #ecf0f1; 
    padding: 40px 20px;
    text-align: left;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap; 
}

.footer-column {
    flex: 1;
    min-width: 250px;
    margin: 0 20px; 
}

.footer-logo img {
    height: 50px; 
}

.footer-description {
    font-size: 15px;
    margin-bottom: 15px; 
    line-height: 24px;
}

.footer-social-icons {
    display: flex;
}

.footer-social-icons .icon {
    margin-right: 15px;
    color: #ecf0f1;
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s;
}

.footer-social-icons .icon:hover {
    color: #33afff; 
}

.footer-column h3 {
    margin-bottom: 15px; 
    font-size: 18px;
    border-bottom: 2px solid #33afff; 
    padding-bottom: 5px; 
    position: relative; 
}

.footer-column h3::after {
    content: '';
    display: block;
    width: 0; 
    height: 2px; 
    background: #33afff; 
    transition: width 0.5s ease; 
    position: absolute;
    left: 0;
    bottom: 0; 
}

.footer-column h3:hover::after {
    width: 100%; 
}

.footer-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-info li {
    margin-bottom: 15px; 
    font-size: 14px; 
}

.footer-info li i {
    margin-right: 8px; 
}

.newsletter-signup {
    display: flex;
    margin-top: 10px; 
}

.newsletter-signup input {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px 0 0 5px; 
    outline: none; 
}

.newsletter-signup button {
    background-color: #33afff;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 0 5px 5px 0; 
    cursor: pointer;
    transition: background 0.3s, transform 0.2s; 
}

.newsletter-signup button:hover {
    background-color: #28a0e2; 
    transform: scale(1.1); 
}
/* Media Queries for Responsiveness */
@media (max-width: 1200px) {
    .partner-logo {
        flex: 0 0 20%; /* Show 5 logos per row */
    }
}

@media (max-width: 992px) {
    .slider-container .overlay-text h2 {
        font-size: 2rem;
      }
    .partner-logo {
        flex: 0 0 25%; /* Show 4 logos per row */
    }
}
@media (max-width: 768px) {
    .info-navbar {
        display: none; 
    }

    .navbar {
        top: 0; 
    }

    .info-container {
        justify-content: space-between; 
        align-items: center; 
    }

    .contact-info {
        order: 1; 
        display: flex;
    }

    .social-icons {
        order: 2; 
    }

    .navbar {
        padding: 10px 20px; 
    }

    .nav-links {
        flex-direction: column; 
        position: absolute; 
        top: 80px; 
        left: 0;
        right: 0;
        background-color: #f8f9fa;
        display: none; 
        margin: 0; 
        padding: 10px 0; 
        border-top: 1px solid #ccc; 
    }

    .nav-links.active {
        display: flex; 
    }

    .nav-links li {
        margin-left: 0; 
        margin-bottom: 10px; 
        border-bottom: 1px solid #ccc;
    }

    .nav-links li:last-child {
        border-bottom: none; 
    }

    .hamburger {
        display: block; 
    }
    .logo img {
        height: 40px; 
    }
    .home-section {
        flex-direction: column; /* Stack content vertically */
        padding: 20px; /* Reduce padding */
        margin-top: 60px;
    }

    .home-content {
        padding: 0; /* Remove padding on smaller screens */
        text-align: center; /* Center text */
    }

    .home-title {
        font-size: 1.5rem; /* Reduce title size for small screens */
    }

    .home-reading {
        font-size: 1rem; /* Reduce reading size for small screens */
    }

    .home-description {
        font-size: 0.85rem; /* Reduce description size for small screens */
    }

    .button-group {
        flex-direction: column; 
        align-items: center; 
        gap: 10px; 
    }

    .home-image {
        margin-top: 0px; 
    }
    .about-section {
        flex-direction: column-reverse;
        padding: 20px; 
    }

    .about-image {
        order: 1;
        flex: 0 0 100%; 
    }

    .about-content {
        order: 2; 
        flex: 0 0 100%; 
    }

    .values {
        grid-template-columns: repeat(1, 1fr); 
       
    }

    .about-title {
        font-size: 1.5rem; 
    }

    .about-reading {
        font-size: 1.1rem; 
    }

    .about-description {
        font-size: 0.9rem; 
    }
    .services-section h1 {
        font-size: 1.5rem; 
    }

    .services-section .text {
        font-size: 0.9rem; 
        padding: 0 20px; 
    }
    .services-container {
        display: grid; 
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px; 
    }
    
    .service-item {
        flex: 1 1 100%; 
        margin: 10px 0; 
    }

    .service-item h3 {
        font-size: 1.25rem; 
    }

    .service-item p {
        font-size: 0.9rem; 
    }
    .why-choose-us {
        flex-direction: column-reverse; 
        align-items: center;
    }

    .why-content {
        margin-right: 0; 
        text-align: center; 
    }

    .reasons {
        grid-template-columns: 1fr;
    }

    .intro-description {
        padding: 0 20px; 
    }

    .blog-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); 
    }

    .blog-page h1 {
        font-size: 1.8rem; 
    }

    .blog-post h2 {
        font-size: 1.3rem; 
    }

    .blog-description {
        font-size: 0.8rem; 
    }

    .contact-content {
        width: 90%;
        position: relative; 
        margin: 0 auto;
        top: 0; 
        right: 0; 
        padding: 15px; 
    }

    .form-row {
        flex-direction: column; 
    }

    .form-group {
        margin-right: 0; 
        margin-bottom: 15px; 
    }

    .description {
        text-align: center;
    }

    .contact-page h2 {
        font-size: 1.8rem; 
    }

    label {
        font-size: 0.8rem; 
    }
    .partner-logo {
        flex: 0 0 20%; 
    }
    .partner-logo img {
        max-width: 80%;
    }
    .partner-description p{
        font-size: 0.7rem; 
        line-height: 23px;
        padding: 0px;
    }
    .footer-container {
        flex-direction: column;
        align-items: center; 
    }
  
    .footer-column {
        margin: 20px 0; 
        text-align: center; 
    }
}

@media (max-width: 480px) {
    .contact-info span {
        font-size: 14px; 
    }

    .nav-links a {
        font-size: 16px;
}

.hamburger.is-active i {
    transform: rotate(90deg);
}
.services-section h1 {
    font-size: 1.25rem; 
}

.services-section .text {
    font-size: 0.8rem; 
}

.service-item h3 {
    font-size: 1.1rem; 
}

.service-item p {
    font-size: 0.8rem; 
}
.partner-logo {
    flex: 0 0 50%; 
}
}


/*contact page */
.cont {
    margin-top: 130px;
    margin: 0 auto; 
}
.cont-header {
    margin-top: 40px;
    background-image: url('/Public/img/cover2.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 130px 60px; 
    text-align: center;
    color: #ffffff;
}

.cont-info {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    padding: 50px;
}

.address, .cont-content {
    flex: 1 1 45%; 
    background: rgba(255, 255, 255, 0.9); 
    border-radius: 10px; 
    padding: 20px; 
    margin: 10px; 
}

.address h4,
.cont-content h4 {
    font-size: 1.2rem;
    color: #007BFF;    
}

.cont-content {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); 
    text-align: center;
}

.cont-content h2 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 5px;
}

.description {
    text-align: left; 
    margin-bottom: 30px; 
}

.address-item-class {
    margin-top: 20px; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 30px;  
}

.address-item {
    display: flex;
    align-items: center; 
    margin-bottom: 40px; 
}

.icon-container {
    width: 50px; 
    height: 50px; 
    border-radius: 50%; 
    background-color: #f0f0f0; 
    color: #007BFF;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s; 
}

.icon-container:hover {
    background-color: #007BFF;
    color: #ffffff;
}

.icon {
    font-size: 24px; 
}

.text-container {
    margin-left: 25px; 
}

.text-container p {
    font-size: 1rem;
    color: #777;
    margin-bottom: 5px;
}

.text-container .text {
    font-size: 18px; 
}

.cont-form {
    margin-top: 20px;
    text-align: start;
}

.cont-form label {
    display: block;
    margin: 10px 0 5px;
    color: #777;
}

.cont-form input,
.cont-form textarea {
    width: 95%;
    padding: 10px;
    margin-bottom: 10px;
}

.cont-form .btn1 {
    background-color: #007BFF;
    color: #ffffff;
    border: none;
    cursor: pointer;
}

.cont-form .btn1:hover {
    background-color: #0056b3;
}

.map {
    padding: 50px; 
    text-align: center;
    width: 90%; 
    height: 450px; 
    margin-bottom: 5px;
}

.map iframe {
    width: 100%; 
    height: 100%; 
    border: 0; 
}

/* Responsive styles */
@media (max-width: 768px) {
    .cont-header {
        padding: 70px 20px; 
    }
    
    .cont-info {
        padding: 20px; 
    }

    .address, .cont-content {
        flex: 1 1 100%; 
        margin: 10px 0; 
    }

    .map {
        height: 300px; 
        padding: 20px; 
    }
}

@media (max-width: 480px) {
    .cont-header h1 {
        font-size: 1.5rem; 
    }

    .cont-header p,
    .cont-content h2 {
        font-size: 1rem; 
    }

    .cont-form input,
    .cont-form textarea {
        width: 90%; 
    }

    .icon {
        font-size: 20px; 
    }
}

/* Section Styling */
#mission-values-vision {
    padding: 60px 0;
    background-color: #ffffff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Section header */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    font-size: 36px;
    color: #333;
    font-weight: 600;
    margin-bottom: 10px;
}

.section-header p {
    font-size: 18px;
    color: #777;
    line-height: 1.6;
}

/* Content Styling */
.content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}

.card {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;  
}
.card .mission{
    margin-top: 10px;
}

.card:hover {
    transform: translateY(-7px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


.card .icon {
    font-size: 50px;
    color: #007bff;
    
    transition: color 0.3s ease;
}

.card h3, .card h2 {
    font-size: 1.8em;
    color: #333;
    font-weight: 600;
}
.card p{
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    flex-grow: 1;
}

.card ul {
    padding-left: 20px;
    text-align: left;
    color: #555;
    flex-grow: 1;  
}

.card ul li {
    font-size: 16px;
    margin-bottom: 10px;
    width: 100%; 
}

/* Values Core Section */
.values-core {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  
    gap: 30px;
    margin-top: 60px;
    background-color: #ffffff;  
    padding: 40px 0;  
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);  
    border-radius: 12px;  
    padding-top: 50px;
    padding-bottom: 50px;
}

.value-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-align: center;
}
.value-card h2 {
    font-size: 1.8rem;
    color: #007BFF;
  }
.value-card p{
    font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
  flex-grow: 1;
  margin-bottom: 20px;
}

.value-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.value-card .icon {
    font-size: 40px;
    color: #007bff;
    margin-bottom: 15px;
}

.value-card ul {
    padding-left: 20px;
    text-align: left;
    color: #555;
}

.value-card ul li {
    font-size: 16px;
    margin-bottom: 10px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    
    .values-core {
        grid-template-columns: 1fr;  
    }

    .card h3, .card h2 {
        font-size: 20px; 
    }

    .card ul li {
        font-size: 14px;  
    }
    .card {
        width: 80%;
        margin-bottom: 30px;
      } 
}


/* service page */
.services-section-page {
    padding: 50px;
    text-align: center;
    margin: 0 auto; 
}

.services-section-page h4 {
    font-size: 1.2rem;
    color: #007BFF; 
    margin-bottom: 10px;
}
.services-section-page h1{
    font-size: 2rem;
    color: #333;
    margin-bottom: 5px;
}

.services-section-page .text {
    font-size: 1rem;
    color: #555;
    line-height: 26px;
    margin-bottom: 15px;
    padding: 0px 100px;
    text-align: center;
}


/* Services Section */
#services-page {
    padding: 60px 0;
    background-color: #fff;
}

.services-container-page{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Service Card */
.service-card-page {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #fff;
}

.service-card-page:hover {
    transform: translateY(-10px);
}
.service-text-page:nth-child(1) ,
.service-text-page:nth-child(3) {
    background-color: #f0f8ff;

}
.service-text-page {
    flex: 1;
    padding: 20px;
    max-width: 60%; 
}

.service-text-page h3 {
    font-size: 1.8em;
    margin-bottom: 10px;
    color: #007bff;
}

.service-text-page p {
    font-size: 1em;
    color: #555;
}

/* Truncate text initially */
.description {
    display: -webkit-box;
    -webkit-line-clamp: 4; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.read-more {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 1em;
    border-radius: 4px;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.read-more:hover {
    background-color: #0056b3;
}

.service-image-page {
    flex: 1;
    max-width: 35%; 
}

.service-image-page img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

/* Responsive Design */
@media (max-width: 768px) {
    .services-container-page {
        padding: 0;
    }

    .service-card-page {
        flex-direction: column;
        align-items: center;
    }

    .service-text-page {
        max-width: 100%;
        padding: 15px;
    }

    .service-image-page {
        max-width: 100%;
        padding: 0;
    }

    .service-image-page img {
        width: 100%;
        height: auto;
    }

    .service-card-page:nth-child(1) ,
    .service-card-page:nth-child(3) {
        flex-direction: column-reverse;
    }
    .service-text-page:nth-child(1),
    .service-text-page:nth-child(3) {
        background-color: #e6f7ff; 
    }
}

@media (max-width: 480px) {
    .services-section-page .text {
        padding: 0 20px; 
        }
}

/* Ajustements pour mobile */
@media (max-width: 768px) {

    .services-section-page h1 {
        font-size: 1.5rem;
    }

    .service-text-page h3 {
        font-size: 1.5em;
    }
}


.blog-container {
    width: 80%;
    margin: 50px auto;
}

.blog-title {
    text-align: center;
    margin-bottom: 30px;
    color: #2c3e50;
}

.blog-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.single-post {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.single-post:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.post-image {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    height: 200px;
}

.post-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
    color: #7f8c8d;
}

.post-divider {
    margin: 15px 0;
    border: 0;
    border-top: 1px solid #ecf0f1;
}

.post-title {
    color: #2c3e50;
    font-size: 20px;
    margin-bottom: 10px;
}

.post-description {
    font-size: 14px;
    color: #7f8c8d;
}

.post-summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-button-container {
    margin-top: 10px;
}

.post-btn {
    text-decoration: none;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
}

.post-btn i {
    margin-right: 5px;
}

.pagination-controls {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.pagination-btn {
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.pagination-btn:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
}

.page-numbers {
    margin: 0 20px;
    font-size: 16px;
}
/* Responsive Styles */
@media (max-width: 1200px) {
    .blog-container {
        width: 85%;
    }

    .blog-title {
        font-size: 28px;
    }

    .post-title {
        font-size: 18px;
    }

    .post-description {
        font-size: 13px;
    }

    .pagination-btn {
        padding: 8px 16px;
    }
}

@media (max-width: 992px) {
    .blog-container {
        width: 90%;
    }

    .blog-title {
        font-size: 26px;
    }

    .blog-list {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .post-title {
        font-size: 16px;
    }

    .post-description {
        font-size: 12px;
    }

    .pagination-btn {
        padding: 8px 16px;
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .blog-container {
        width: 95%;
    }

    .blog-title {
        font-size: 24px;
    }

    .blog-list {
        grid-template-columns: 1fr;
    }

    .post-title {
        font-size: 18px;
    }

    .post-description {
        font-size: 14px;
    }

    .pagination-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    .blog-container {
       
        padding: 10px;
    }

    .blog-title {
        font-size: 20px;
    }

    .post-title {
        font-size: 16px;
    }

    .post-description {
        font-size: 12px;
    }

    .pagination-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .post-btn {
        padding: 8px 15px;
        font-size: 12px;
    }
}
.error-message {
    color: #fff;
    background-color: #e74c3c;
    padding: 4px;
    display: block;
    font-size: 14px;
    font-weight: bold;
}

.success-message {
    color: #fff; 
    color: #fff;
    padding: 4px;
    display: block;
    background-color: #2ecc71;;
    font-size: 14px;
    font-weight: bold;
}

.cont-confirm {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



/* Main confirmation content */
.confirm-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f7fc;
}

.confirm-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}
.confirm-content .icon-container {
    margin-bottom: 20px;
}

.confirm-content .icon-container .icon {
    font-size: 60px;
    color: #007BFF; 
}

.confirm-content h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
}

.confirm-content .confirmation-message {
    margin-bottom: 25px;
}

.confirm-content .confirmation-message .text {
    font-size: 18px;
    color: #555;
    margin-bottom: 10px;
}

.confirm-content .confirmation-message .sub-text {
    font-size: 16px;
    color: #777;
}

.confirm-content .action-buttons {
    margin-top: 20px;
}

.confirm-content .btn {
    text-decoration: none;
    padding: 12px 25px;
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.confirm-content .btn:hover {
    background-color: #007BFF;
}

.confirm-content.btn1 i {
    margin-right: 10px;
}


.cont-unsubscribe {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cont-header-unsubscribe {
    text-align: center;
    padding: 20px 0;
}

.cont-header-unsubscribe h1 {
    font-size: 32px;
    color: #333;
}

.cont-header-unsubscribe p {
    font-size: 16px;
    color: #888;
}

.unsubscribe-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f7fc;
}

.unsubscribe-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
}

.icon-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}



.unsubscribe-box h2 {
    font-size: 24px;
    color: #333;
    margin-bottom: 15px;
}

.unsubscribe-box .message {
    margin-bottom: 25px;
}
.intro-text {
    font-size: 18px;
    color: #555;
    margin-bottom: 20px;
    font-style: italic;
}

.unsubscribe-box .alert {
    font-size: 18px;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.unsubscribe-box .alert-success {
    background-color: #d4edda;
    color: #155724;
}

.unsubscribe-box .alert-error {
    background-color: #f8d7da;
    color: #721c24;
}

.unsubscribe-box .regret-message {
    font-size: 18px;
    color: #777;
    margin-bottom: 20px;
}

 .resubscribe-section {
    margin-top: 20px;
}

.unsubscribe-box .btn {
    text-decoration: none;
    padding: 12px 25px;
    font-size: 16px;
    background-color: #007BFF;
    color: white;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.unsubscribe-box .btn:hover {
    background-color: #007BFF;
}

.unsubscribe-box .btn-primary {
    background-color: #007bff;
}

.unsubscribe-box .btn-primary:hover {
    background-color: #0056b3;
}

.btn1 i {
    margin-right: 10px;
}
.scroll-to-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 15px;
    font-size: 24px;
    cursor: pointer;
    display: none; 
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    text-align: center;
    line-height: 1;
}

.scroll-to-top-btn:hover {
    background-color: #0056b3;
}


.scroll-to-top-btn.show {
    display: block;
}

.scroll-to-top-btn i {
    font-size: 30px;
}
#formAddNewsletters button[type="submit"] {
    transition: all 0.3s ease;
}

#formAddNewsletters button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.sp-container {
    width: 80%;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
}

.sp-back-btn {
    margin-bottom: 20px;
}

.sp-back-link {
    text-decoration: none;
    color: #3498db;
    font-size: 16px;
}

.sp-back-link i {
    margin-right: 8px;
}

.sp-header {
    text-align: center;
}

.sp-title {
    font-size: 36px;
    color: #2c3e50;
}

.sp-meta {
    margin-top: 10px;
    font-size: 14px;
    color: #7f8c8d;
}

.sp-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 20px;
}

.sp-divider {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid #ecf0f1;
}

.sp-body {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.sp-subtitle {
    font-size: 24px;
    color: #2c3e50;
    margin-top: 20px;
    margin-bottom: 10px;
}

.sp-footer {
    text-align: center;
    margin-top: 30px;
}

.sp-share {
    display: inline-block;
    margin-top: 20px;
}

.sp-share p {
    margin-bottom: 10px;
    font-weight: bold;
}

.sp-icon {
    text-decoration: none;
    margin: 0 10px;
    color: #3498db;
    font-size: 20px;
}

.sp-icon:hover {
    color: #2980b9;
}
@media (max-width: 1200px) {
    .sp-container {
        width: 85%;
    }

    .sp-title {
        font-size: 32px;
    }

    .sp-subtitle {
        font-size: 22px;
    }

    .sp-image {
        height: 250px;
    }
}

@media (max-width: 992px) {
    .sp-container {
        width: 90%;
    }

    .sp-title {
        font-size: 28px;
    }

    .sp-subtitle {
        font-size: 20px;
    }

    .sp-meta p {
        font-size: 12px;
    }

    .sp-body {
        font-size: 14px;
    }

    .sp-image {
        height: 220px;
    }

    .sp-footer {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .sp-container {
        width: 95%;
        padding: 15px;
    }

    .sp-title {
        font-size: 24px;
    }

    .sp-subtitle {
        font-size: 18px;
    }

    .sp-body {
        font-size: 14px;
    }

    .sp-image {
        height: 200px;
    }

    .sp-back-link {
        font-size: 14px;
    }

    .sp-footer {
        font-size: 12px;
    }

    .sp-share {
        text-align: center;
        margin-top: 15px;
    }

    .sp-icon {
        font-size: 18px;
        margin: 0 8px;
    }
}

@media (max-width: 576px) {
    .sp-container {
        width: 100%;
        padding: 10px;
    }

    .sp-title {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .sp-subtitle {
        font-size: 16px;
    }

    .sp-body {
        font-size: 12px;
    }

    .sp-image {
        height: 180px;
    }

    .sp-meta {
        font-size: 10px;
    }

    .sp-footer {
        font-size: 12px;
    }

    .sp-back-link {
        font-size: 12px;
    }

    .sp-share p {
        font-size: 14px;
    }

    .sp-icon {
        font-size: 16px;
        margin: 0 6px;
    }
}
.values-core {
    padding-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto); 
    grid-gap: 30px;
    grid-template-areas: 
        "humanity ethics"
        "joint-satisfaction simplicity";
}

.value-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
    text-align: center;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px; 
}

.value-card h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: #007BFF;
    font-weight: bold;
}

.value-card p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    flex-grow: 1; 
    margin-bottom: 20px; 
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.value-card h2 {
    font-size: 1.8rem;
    color: #007BFF; 
}

.humanity {
    grid-area: humanity;
}

.ethics {
    grid-area: ethics;
}

.joint-satisfaction {
    grid-area: joint-satisfaction;
}

.simplicity {
    grid-area: simplicity;
}

@media (max-width: 1024px) {
    .values-core {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "humanity humanity"
            "ethics joint-satisfaction"
            "simplicity simplicity";
    }
}

@media (max-width: 768px) {
    .values-core {
        grid-template-columns: 1fr; 
        grid-template-areas: 
            "humanity"
            "ethics"
            "joint-satisfaction"
            "simplicity";
    }
}

.error-message {
    color: #fff; 
    background-color: #e74c3c;
    padding: 4px;
    display: block;
    font-size: 14px;
    font-weight: bold;
}

.success-message {
    color: #fff;
    padding: 4px;
    display: block;
    background-color: #2ecc71;;
    font-size: 14px;
    font-weight: bold;
}



#formAddNewsletters button[type="submit"] {
    transition: all 0.3s ease;
}

#formAddNewsletters button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.fa-spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .scroll-to-top-btn {
        padding: 10px;
        font-size: 18px;
    }

    .scroll-to-top-btn i {
        font-size: 22px;
    }
}