/* Import Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}

/* Main section styles */
section {
  background-color: #f9f9f9;
  border-radius: 20px;
  padding: 40px;
  margin: 40px auto;
  max-width: 900px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Titles inside sections */
section h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.company-logo {
  height: 100px;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Header styling */
header {
  background-color: #000;
  color: #fff;
  padding: 20px 0;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}

.company-info h1 {
  margin: 0;
  font-size: 36px;
}

.company-info p {
  font-size: 18px;
  margin: 5px 0 0 0;
}

.nav-lang {
  display: flex;
  align-items: center;
}

section {
  background-color: #f9f9f9;
  border-radius: 20px;
  padding: 40px;
  margin: 40px auto;
  max-width: 900px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* Navigation */
nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin-right: 20px;
}

nav ul li a {
  font-size: 1.2rem; /* bigger font size */
  padding: 15px 25px; /* bigger clickable area */
  color: white;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
  border-radius: 5px;
}

nav ul li a:hover {
  background-color: white;
  color: black;
}

/* Language Selector */
.language-selector {
  position: relative;
  width: 24px; /* match icon width */
  height: 24px; /* match icon height */
}

.lang-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* Dropdown */
.language-dropdown {
  position: absolute;
  top: 36px;
  left: 50%;
  transform: translateX(-50%) translateY(10px); /* Slightly shift dropdown vertically */
  background-color: red;
  border-radius: 50px;
  width: 50px;
  height: 120px;
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;  /* Initially set to 0 for smooth transition */
  visibility: hidden;  /* Make it hidden initially */
  pointer-events: none;  /* Prevent interaction when not visible */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Apply transition to opacity and transform */
}

/* Show dropdown when active */
.language-dropdown.show {
  opacity: 1;  /* Make the dropdown visible */
  visibility: visible;  /* Make the dropdown visible */
  pointer-events: auto;  /* Allow interaction when visible */
  transform: translateX(-50%) translateY(0); /* Reset vertical translate to 0 */
}

.nav-lang {
  display: flex;
  align-items: center;
  gap: 20px;
}


.language-dropdown img {
  width: 30px;
  height: 30px;
  margin: 5px 0;
  cursor: pointer;
  transition: transform 0.2s;
}

.language-dropdown img:hover {
  transform: scale(1.2);
}

/* Keep dropdown visible */
.language-selector:hover .language-dropdown,
.language-dropdown:hover {
  display: flex;
}

/* Main Content */
main {
  background-color: #f0f0f0; /* light grey */
  padding: 60px 20px;
}

main h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

main p {
  font-size: 16px;
}

form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
}

form label {
  margin: 10px 0 5px;
}

form input, form textarea, form button {
  padding: 10px;
  font-size: 16px;
  margin-bottom: 10px;
}

form button {
  background-color: red;
  color: white;
  border: none;
  cursor: pointer;
}

form button:hover {
  background-color: darkred;
}

footer {
  background-color: black;
  color: white;
  text-align: center;
  padding: 10px 0;
}


/* Style the individual job adverts */
.job-ad {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.job-ad:hover {
  background-color: #f5f5f5;
}

/* Style the individual job adverts */
.job-ad {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.job-ad:hover {
  background-color: #f5f5f5;
}

/* Style the "Click for details" text only */
.click-for-details {
  color: red;  /* Set text color to red */
  font-weight: bold;  /* Make it bold */
  cursor: pointer;  /* Change cursor to indicate it's clickable */
}

.job-details {
  display: block;
  max-height: 0;  /* Initially set max-height to 0 */
  overflow: hidden;  /* Hide content when collapsed */
  transition: max-height 0.3s ease-out;  /* Smooth transition for opening */
  margin-top: 15px;
  padding: 10px;
  background-color: #f9f9f9;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Add some extra padding for open state */
.job-details.open {
  max-height: 500px; /* Maximum height when opened, can be adjusted */
  transition: max-height 0.2s ease-in;  /* Faster closing */
}


/* Contact Us Section */
#contact {
  background-color: #f0f0f0;  /* Light grey background */
  padding: 30px;  /* Add padding for space inside the box */
  border-radius: 15px;  /* Rounded corners for the background */
  margin-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* Add a subtle shadow for depth */
}

/* Form styling */
#contact form {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between input fields */
}

/* Input and Textarea styling */
#contact input,
#contact textarea {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 15px;  /* Rounded corners for input fields */
  font-size: 16px;
  width: 100%;
  box-sizing: border-box;  /* Include padding in width calculation */
}

#contact input:focus,
#contact textarea:focus {
  border-color: #ff0000;  /* Red border color on focus */
  outline: none;  /* Remove default outline */
}

/* File input field styling (hidden the default file input button) */
#contact input[type="file"] {
  display: none; /* Hide the default file input button */
}

/* Custom "Choose file" button */
#contact .custom-file-label {
  padding: 10px 20px;
  background-color: #ff0000;  /* Red background */
  color: white;
  border: none;
  border-radius: 15px;  /* Rounded corners */
  font-size: 16px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: background-color 0.3s ease;
}

/* Hover effect for custom "Choose file" button */
#contact .custom-file-label:hover {
  background-color: #cc0000;  /* Darker red on hover */
}

/* Styling for the filename */
#file-name {
  display: inline-block;
  margin-left: 15px;  /* Add some space between the button and the filename */
  font-size: 16px;
  color: #555;  /* Gray color for the filename text */
  max-width: 200px;  /* Limit the width to prevent long file names from overflowing */
  text-overflow: ellipsis;  /* Show ellipsis if the filename is too long */
  overflow: hidden;
  white-space: nowrap;
}

/* Submit button styling */
#contact button {
  padding: 10px 20px;
  background-color: #ff0000;  /* Red background for button */
  color: white;
  border: none;
  border-radius: 25px;  /* Rounded corners for button */
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect for submit button */
#contact button:hover {
  background-color: #cc0000;  /* Darker red on hover */
}

/* Main section */
main {
  padding: 50px 15px;  /* Add space around the sections */
  background-color: #e8e8e8;  /* Greyish background */
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
}

/* About, Vacancies, and Contact Sections */
#about, #vacancies, #contact {
  background-color: white;
  border-radius: 15px; /* Rounded corners for each section */
  margin-bottom: 30px;
  padding: 20px;
  width: 100%;  /* Make each section take full width */
  box-sizing: border-box;  /* Ensure padding is inside the width */
  text-align: left;  /* Align text to the left */
}

/* Section Titles */
#about h2, #vacancies h2, #contact h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  text-align: left;  /* Left-align the titles */
}

/* Make sure content fills the screen and adjusts accordingly */
#about, #vacancies, #contact {
  max-width: 1200px;  /* Limit max-width to prevent content from stretching too much on large screens */
  margin-left: auto;
  margin-right: auto;  /* Center the sections horizontally on larger screens */
}

/* For larger screens, increase padding and make sections wider */
@media (min-width: 768px) {
  main {
    padding: 50px 100px;
  }

  #about, #vacancies, #contact {
    padding: 40px;
    width: 90%;  /* Adjust width for bigger screens */
  }
}

/* For extra large screens */
@media (min-width: 1200px) {
  #about, #vacancies, #contact {
    padding: 60px;
  }
}

/* Make nav buttons bigger (adjust sizes as you want) */
nav ul li a {
  font-size: 1.4rem;
  padding: 18px 30px;
  color: white;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
  border-radius: 5px;
}

/* Nav hover stays the same */
nav ul li a:hover {
  background-color: white;
  color: black;
}

/* Change Attach Your CV button background to black */
#contact .custom-file-label {
  background-color: black;
  color: white;
}

#contact .custom-file-label:hover {
  background-color: #222222;
}

/* Change Submit button background to black */
#contact button {
  background-color: black;
  color: white;
}

#contact button:hover {
  background-color: #222222;
}

/* Style the select box to match the input fields */
select#position {
  width: 100%;
  padding: 10px 12px;
  margin: 6px 0 20px 0;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 12px; /* Increased corner radius */
  font-size: 16px;
  font-family: inherit;
  background-color: white;
  color: #333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;

  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

select#position:focus {
  border-color: #4a90e2;
  outline: none;
  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

.phone-group {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

/* Style for country code select, same as "Position Applying For" */
.phone-group select,
.phone-group input[type="tel"] {
  padding: 10px 12px;
  font-size: 16px;
  font-family: inherit;
  border: 2px solid #ccc;
  border-radius: 12px;
  background-color: white;
  color: #333;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  height: 42px;
}

/* Widths to align nicely */
.phone-group select {
  width: 30%;
  max-width: 120px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

.phone-group input[type="tel"] {
  width: 70%;
  border: 2px solid #ccc;
}

/* Focus states */
.phone-group select:focus,
.phone-group input[type="tel"]:focus {
  border-color: #4a90e2;
  outline: none;
  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
}

/* Mobile phone (09.06.2025) */

/* Hide burger by default, show on mobile */
.burger {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

/* Layout fixes */
.nav-lang {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Nav links by default */
#nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
}

/* Responsive behavior */
@media (max-width: 600px) {
  /* Show burger */
  .burger {
    display: block;
  }

  /* Hide nav links by default */
  #nav-links {
    display: none;
    position: absolute;
    top: 60px;
    right: 20px;
    background-color: #fff;
    flex-direction: column;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 10;
  }

  /* Show nav links when toggled */
  #nav-links.show {
    display: flex;
  }
}