.text-plava {
    color: #122142;
  }

  /* Apply Raleway to the body (everything else by default) */
  body {
    font-family: 'Raleway', sans-serif;
    background-color: #f8f9fa;
  }

  /* Apply Roboto to h1 and h2 tags */
  h1,
  h2 {
    font-family: 'Roboto', sans-serif;
  }

  /* Optional: Adjust font weights and sizes for better style */
  h1 {
    font-weight: 700;
    font-size: 2.5rem;
    /* Example size */
  }

  h2 {
    font-weight: 500;
    font-size: 2rem;
    /* Example size */
  }



  /* Navbar */
  .navbar {
    background-color: #f8f9fa;
    /* Light gray background */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    padding: 10px 0;
  }

  .navbar-brand {
    display: flex;
    align-items: center;
  }

  /* Adjust logo size */
  .logo-img {
    height: 55px;
    /* Increase logo height */
    max-width: 140px;
    /* Ensure it doesn't overflow */
    object-fit: contain;
    /* Maintain aspect ratio */
    margin-right: 15px;
    /* Space between logo and text */
  }

  /* Adjust Sarajevo text */
  .logo-text {
    font-size: 1.6rem;
    /* Match size with logo */
    font-weight: bold;
    color: #122142;
    /* Dark gray text color */
    line-height: 1;
    /* Align vertically */
  }

  /* Navigation links */
  .navbar-nav .nav-link {
    font-size: 1rem;
    color: #555;
    margin: 0 10px;
    transition: color 0.3s ease-in-out;
  }

  .navbar-nav .nav-link:hover {
    color: #b79722;
  }

  /* English option */
  .navbar-nav .nav-link.english {
    font-weight: bold;
    margin-left: 20px;
    color: #b79722;
  }

  .navbar-nav .nav-link.english:hover {
    color: #ff9900;
  }

  /* Mobile adjustments */
  @media (max-width: 768px) {
    .navbar-brand .logo-img {
      height: 45px;
      /* Reduce height for smaller screens */
    }

    .navbar-nav .nav-link {
      margin: 5px 0;
    }
  }





  /*-------------- NAVBAR SECTION START -----------------*/



  /*-------------- NAVBAR BUTTON START -----------------*/

  /* Centering and styling the button */
  #languageToggle {
    font-size: 0.9rem;
    /* Slightly smaller font size for neatness */
    padding: 8px 20px;
    /* Adds padding to the button */
    background-color: #122142;
    /* Bootstrap primary color */
    color: white;
    /* Text color */
    border: none;
    /* No border */
    cursor: pointer;
    /* Pointer cursor on hover */
    transition: all 0.3s ease-in-out;
    /* Smooth transition for hover */
  }

  #languageToggle:hover {
    background-color: #b79722;
    /* Darker blue on hover */
    color: #122142;
    /* Keep text color consistent */
  }

  #languageToggle:focus {
    outline: none;
    /* Remove focus outline */
  }

  /* Center the button with other list items */
  .navbar-nav .nav-item {
    display: flex;
    align-items: center;
  }

  .navbar-nav .nav-item:last-child {
    margin-left: 10px;
    /* Add spacing from other links */
  }

  /*-------------- NAVBAR BUTTON END -----------------*/



  /*-------------- HERO SECTION START -----------------*/
  /* General Reset */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Hero Section Styling */
  .hero-section {
    position: relative;
    background: url('/../assets/pictures/bg.png') center center/cover no-repeat;
    color: #fff;
    min-height: 100vh;
    padding-top: 5rem;
    /* Prevent overlap from navbar */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-overlay {
    background: linear-gradient(0deg, #303030 0%, rgba(51, 51, 51, 0.75) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    max-width: 1200px;
    /* Restrict max width for readability */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto;
  }

  .hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #b79722;
    /* Golden for contrast */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem;
  }

  .hero-slogan {
    font-size: 1.8rem;
    margin: 1rem 0;
    color: #f8f9fa;
    /* White for softer readability */
    font-style: italic;
  }

  .hero-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #f8f9fa;
    margin-bottom: 1.5rem;
  }

  .hero-text b {
    color: #b79722;
    /* Highlight key text in gold */
  }

  .hero-text[data-lang="bs"] {
    margin-left: 2rem;
    /* Slight left adjustment for Bosnian */
    text-align: left;
  }

  .hero-text[data-lang="en"] {
    text-align: center;
    margin-left: 0;
  }

  /* Steps Section */
  .steps {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 2rem;
    color: #122142;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    position: relative;
    margin-top: 2rem;
    max-width: 1000px;
    margin: 0 auto;
  }

  .steps,
  .contact-form {
    max-width: 1000px;
    /* Increased max-width for wider sections */
    margin: 0 auto;
    /* Center the content */
    padding: 20px;
    /* Padding inside the container */
  }

  .steps h4 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
    color: #b79722;
  }

  .steps ul {
    list-style: none;
    padding: 0;
    margin: auto;
  }

  .steps ul li {
    margin: 1rem 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
  }

  .steps ul li::before {
    content: "✔";
    font-size: 1.3rem;
    color: #b79722;
    margin-right: 0.8rem;
  }

  .contact-phone {
    font-size: 1.3rem;
    font-weight: bold;
    margin-top: 1.5rem;
    color: #b79722;
    text-align: center;
  }

  /* Contact Form 
  .contact-form {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    margin-top: 2rem;
    width: 100%;
    max-width: 1000px;
  }
  */

  /* Style the "Kontakt us" heading */
  .contact-heading {
    font-size: 1.8rem;
    font-weight: bold;
    color: #003366;
    /* Dark color for contrast */
    margin-bottom: 1.5rem;
    text-align: center;
    /* Center the heading */
  }

  .contact-form .form-control {
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 0.8rem;
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: border 0.3s ease;
    width: 100%;
    /* Ensures the form fields take full width */
    box-sizing: border-box;
    /* Includes padding in the width calculation */
  }

  .contact-form .form-control:focus {
    border: 2px solid #003366;
    outline: none;
  }

  .contact-form button {
    background: #003366;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    width: 100%;
  }

  .contact-form button:hover {
    background: #b79722;
    color: #122142;
    transform: scale(1.05);
  }

  @media (min-width: 1024px) {
    .steps {
      max-width: 800px;
      padding: 3rem;
    }

    .steps ul li {
      font-size: 1.4rem;
    }
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .hero-content {
      text-align: center;
      gap: 1.5rem;
    }

    .hero-title {
      font-size: 2rem;
    }

    .hero-slogan {
      font-size: 1.4rem;
    }

    .hero-text {
      font-size: 1rem;
    }
  }


  /* HERO SECTION START */
  .hero-section {
    position: relative;
    background: url('../assets/pictures/firstbg.jpg') center center/cover no-repeat;
    color: #fff;
    min-height: 100vh;
    padding-top: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Space between top content and bottom button */
  }



  .hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto;
  }

  .hero-call-button-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: auto;
    padding-bottom: 2rem;
  }

  .btn-call {
    background: #b79722;
    color: #b79722;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0.8rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
    display: inline-block;
  }

  .btn-call:hover {
    transform: scale(1.05);
    background: #b79722;
  }

  @media (max-width: 768px) {
    .hero-call-button-wrapper {
      padding-bottom: 1rem;
    }
  }

  .herobutton {
    color: #b79722;
  }



  /*-------------- HERO SECTION END -----------------*/





  .bg-light {
    background-color: #f8f9fa !important;
    /* Lagana siva */
  }

  .bg-dark {
    background-color: #122142 !important;
    /* Tamno plava */
  }

  /*---------------- PACKAGES SECTION START --------------------- */

  .packages {
    background-color: #f8f9fa;
    /* White background for the section */
  }

  .packages h2 {
    font-weight: bold;
    color: #003366;
    /* Dark blue color */
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .card {
    background-color: #122142;
    /* Dark blue for the cards */
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    color: #f8f9fa;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }

  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }

  .card-body {
    padding: 2rem;
  }

  .card h4 {
    font-weight: bold;
    font-size: 1.5rem;
    color: #dbc621;
    /* Gold for titles */
    margin-bottom: 1rem;
    text-transform: uppercase;
    transition: color 0.3s ease;
  }

  .card h4:hover {
    color: #ffffff;
    /* White on hover */
  }

  .card ul {
    padding-left: 0;
    list-style: none;
    margin: 0;
  }

  .card ul li {
    font-size: 1rem;
    margin-bottom: 0.8rem;
    position: relative;
    padding-left: 1.5rem;
    color: #ffffff;
  }

  .card ul li::before {
    content: "\2713";
    /* Checkmark icon */
    color: #dbc621;
    /* Gold color */
    font-weight: bold;
    position: absolute;
    left: 0;
  }

  .text-muted {
    font-size: 1rem;
    line-height: 1.8;
    color: #6c757d;
    margin-top: 2rem;
  }

  /* Responsive adjustments */
  @media (max-width: 992px) {
    .card {
      margin-bottom: 1.5rem;
    }
  }

  @media (max-width: 576px) {
    .card-body {
      padding: 1.5rem;
    }

    .card h4 {
      font-size: 1.3rem;
    }

    .card ul li {
      font-size: 0.95rem;
    }

    .text-muted {
      font-size: 0.9rem;
    }
  }

  /*---------------- PACKAGES SECTION END --------------------- */




  /*---------------- QUESTIONS SECTION START --------------------- */

  .faq h2 {
    font-weight: bold;
    color: #003366;
    /* Tamno plava */
  }

  .accordion-button {
    font-weight: bold;
  }

  .accordion-body {
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .btn-primary {
    background-color: #122142;
    /* Tamno plava */
    border: none;
  }

  .btn-primary:hover {
    background-color: #00509E;
    /* Svjetlija plava */
  }

  /*---------------- QUESTIONS SECTION END --------------------- */


  /*---------------- FOOTER SECTION START --------------------- */
  .footer-section {
    background: linear-gradient(0deg, #505050 0%, rgba(102, 102, 102, 0.50) 91.7%),
      url('https://images.pexels.com/photos/189333/pexels-photo-189333.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
  }

  .footer-section h2,
  .footer-section h4 {
    color: #f1c40f;
  }

  .footer-section a {
    color: #f1c40f;
    text-decoration: none;
  }

  .footer-section a:hover {
    text-decoration: underline;
  }

  .footer-section p {
    color: #ffffff;
    /* Default paragraph color */
    transition: color 0.3s ease;
    /* Smooth transition */
  }

  /* Call Us button */
  .footer-section .btn {
    background-color: #b79722;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    margin-bottom: 20px;
  }

  .footer-section .btn:hover {
    background-color: #122142;
  }

  /* Partner logos */
  .partner-logos {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
  }

  .partner-logos img {
    height: auto;
    width: 8.5rem;
    transition: transform 0.3s ease;
  }

  .partner-logo {
    height: 30px;
    /* Set height for small icons */
    width: auto;
    /* Maintain aspect ratio */
    object-fit: contain;
    vertical-align: middle;
  }

  .text-light i {
    font-size: 20px;
    /* Ensure consistent icon size */
  }

  .row.align-items-center .gap-4>* {
    margin-bottom: 10px;
    /* Space out items for smaller screens */
  }


  .partner-logos img:hover {
    transform: scale(1.1);
  }

  /* Unikatna forma */
  .unique-contact-form {
    background-color: #122142;
    border-radius: 8px;
    color: #ffffff;
    padding: 20px;
  }

  .unique-contact-form h4 {
    color: #ffffff;
  }

  .unique-contact-form input,
  .unique-contact-form textarea {
    border: 1px solid #003366;
    color: #003366;
  }

  .unique-contact-form input::placeholder,
  .unique-contact-form textarea::placeholder {
    color: #999999;
  }

  /* Unikatno dugme */
  .unique-submit-btn {
    background-color: #b79722;
    color: #f8f9fa;
    border: 1px solid #b79722;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 10px;
    height: 50px;
  }

  .unique-submit-btn:hover {
    background-color: #f1c40f;
    color: #f8f9fa;
  }


  /*---------------- FOOTER SECTION END --------------------- */

  /*---------------- SERVICES SECTION START --------------------- */
  /* General Section Styling */
  .services-section {
    padding: 50px 20px;
  }

  .services-section h2 {
    color: #122142;
    font-size: 2rem;
  }

  /* Carousel Container */
  .services-carousel-container {
    overflow: hidden;
    width: 100%;
  }

  .services-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columns */
    gap: 20px;
    transition: transform 0.3s ease-in-out;
  }

  /* Ensure Consistent Card Height */
  .service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Align content to the top */
    background-color: #122142;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: auto;
    /* Set a fixed height for all cards */
    overflow: hidden;
    /* Prevent overflow of content */
  }

  .service-card:hover {
    transform: translateY(-5px);
    background-color: #f4f4f4;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  }

  /* Change color on hover */
  .service-card:hover p {
    color: #122142;
    /* Change this to any color you prefer */
  }

  .service-card img {
    margin-bottom: 15px;
    width: 50px;
    height: auto;
  }

  .service-card h4 {
    margin-top: 15px;
    font-size: 1.4rem;
    color: #b79722;
  }


  .service-card p {
    font-size: 1rem;
    color: #f4f4f4;
    margin-top: 10px;
    overflow: hidden;
    /* Hide overflow text */
    text-overflow: ellipsis;
    /* Add ellipsis for overflowing text */
    display: -webkit-box;
    /* Use WebKit's line-clamping */
    /*-webkit-line-clamp: 3; */
    -webkit-box-orient: vertical;
    /* Use vertical orientation */
  }

  /* Carousel Navigation Buttons */
  .carousel-btn-container {
    text-align: center;
    margin-top: 20px;
  }

  .carousel-btn {
    background-color: #b79722;
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 10px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
  }

  .carousel-btn:hover {
    background-color: #81680d;
  }

  /* Hide Buttons on Desktop */
  @media (min-width: 769px) {
    .carousel-btn-container {
      display: none;
      /* Completely hide the button container */
    }
  }

  /* Mobile View */
  @media (max-width: 768px) {
    .services-carousel {
      display: flex;
      /* Change grid to flex */
      gap: 10px;
      overflow-x: auto;
      /* Enable horizontal scrolling */
      scroll-snap-type: x mandatory;
      /* Smooth snap scrolling */
    }

    .service-card {
      min-width: 80%;
      /* Make each card take most of the viewport width */
      scroll-snap-align: start;
      /* Snap to the start of each card */
    }
  }

  /*---------------------- SERVICES SECTION END ----------------------- */


  /*---------------------- BUTTON HERO SECTION START ----------------------- */
  /* Center the button below all elements */
  .text-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
  }

  /* Style for the phone call button */
  .btn-call {
    background-color: #b79722;
    /* Dark blue color */
    color: white;
    /* White text */
    padding: 15px 30px;
    /* Add padding for better button size */
    font-size: 16px;
    /* Adjust font size */
    border-radius: 5px;
    /* Rounded corners */
    text-decoration: none;
    /* Remove underline */
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* Smooth transition */
  }

  /* Hover effect for the button */
  .btn-call:hover {
    background-color: #122142;
    /* Darker shade of the button on hover */
    color: #f8f9fa;
    transform: translateY(-5px);
    /* Slightly lift the button */
  }

  /* Focus effect for accessibility */
  .btn-call:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(18, 33, 66, 0.5);
  }

  /*---------------------- BUTTON HERO SECTION END ----------------------- */


  /*-----------------------CHALLENGES SECTION ----------------------- */
  /* General styling for both boxes */
  .challenge-box,
  .task-box {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #ffffff;
    /* White background for both */
  }

  .challenge-box:hover,
  .task-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* More pronounced shadow */
  }

  /* Styling for "Vaše poteškoće" */
  .challenge-box {
    background-color: #f8f9fa;
    /* Light gray background */
    border: 1px solid #ddd;
  }

  .challenge-box h3 {
    color: #dc3545;
    /* Red for emphasis */
  }

  .challenge-box li {
    position: relative;
    font-size: 1rem;
    padding-left: 2rem;
    color: #6c757d;
    /* Muted gray text */
  }

  .challenge-box li::before {
    content: "\2716";
    /* X symbol */
    position: absolute;
    left: 0;
    font-size: 1.5rem;
    color: #dc3545;
    /* Red icon for challenges */
  }

  /* Styling for "Naš zadatak" */
  .task-box {
    background-color: #122142;
    /* Blue background */
    border: 1px solid #0056b3;
  }

  .task-box h3 {
    color: #ffffff;
    /* Green for success */
  }

  .task-box li {
    position: relative;
    font-size: 1rem;
    padding-left: 2rem;
    color: #ffffff;
    /* White text */
  }

  .task-box li::before {
    content: "\2714";
    /* Checkmark symbol */
    position: absolute;
    left: 0;
    font-size: 1.5rem;
    color: #28a745;
    /* Green icon for tasks */
  }

  /* Responsive layout */
  @media (max-width: 768px) {
    .challenges-and-tasks .row {
      flex-direction: column;
    }

    .challenge-box,
    .task-box {
      margin-bottom: 20px;
    }
  }

  /*-----------------------CHALLENGES SECTION END----------------------- */


  /* Sprečavanje horizontalnog prelijevanja */
  body,
  html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* Osiguravanje elemenata da ne prelaze okvir */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Specifična ispravka za hero sekciju */
  .hero-section {
    overflow: hidden;
  }

  /* Sprečavanje širine većih elemenata */
  .steps,
  .contact-form {
    box-sizing: border-box;
  }

  /* Scoped styles for the unique-section */
  .unique-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .unique-section .row {
    justify-content: center;
    background-color: #f8f9fa;
  }

  .unique-section .card {
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    min-height: 300px;
  }

  .unique-section .red-card {
    background-color: #122142;
    border-left: 6px solid #122142;
  }

  .unique-section .blue-card {
    background-color: #b79722;
    border-left: 6px solid #b79722;
  }

  .unique-section .card h2 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .unique-section .icon {
    font-size: 1.2rem;
    margin-right: 8px;
  }

  .unique-section .paragraph {
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .unique-section .paragraph.red {
    color: #f8f9fa;
  }

  .unique-section .paragraph.green {
    color: #f8f9fa;
  }

  @media (max-width: 768px) {
    .unique-section .card {
      padding: 15px;
    }

    .unique-section .card h2 {
      font-size: 1.25rem;
    }

    .unique-section .paragraph {
      font-size: 0.9rem;
    }
  }

  .text-color-unique {
    color: #122142;
  }

  .h2goldsection {
    color: #122142;
  }

  .buttoncolorinform {
    background-color: #122142;
  }

  /*---------------------- RESPONSE SECTION START ----------------------- */
  /* Modal overlay styles */
  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Dark semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  /* Hidden initially */
  .modal-hidden {
    display: none;
  }

  /* Content inside the modal overlay */
  .modal-content {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    max-width: 90%;
    width: 400px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    font-family: Arial, sans-serif;
  }

  /* Success message text */
  .modal-content p {
    font-size: 20px;
    color: #122142;
    margin-bottom: 20px;
  }

  /* Close button styles */
  .modal-close-btn {
    background-color: #b79722;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
  }

  .modal-close-btn:hover {
    background-color: #745f11;
  }


  /*EN OVERLAY*/

  .modal-overlay-en {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    /* Dark semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  /* Hidden initially */
  .modal-hidden-en {
    display: none;
  }

  /* Content inside the modal overlay */
  .modal-content-en {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    max-width: 90%;
    width: 400px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    font-family: Arial, sans-serif;
  }

  /* Success message text */
  .modal-content-en p {
    font-size: 20px;
    color: #122142;
    margin-bottom: 20px;
  }

  /* Close button styles */
  .modal-close-btn-en {
    background-color: #b79722;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
  }

  .modal-close-btn-en:hover {
    background-color: #745f11;
  }

  /*---------------------- RESPONSE SECTION  ----------------------- */

  /*---------------------- RESPONSE SECTION  ----------------------- */