/* General styles for the entire site */
body {
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
  scroll-behavior: smooth;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px; /* Adjusted padding to avoid horizontal scroll on small screens */
}

/* Header styles */
.main-header {
  background-color: #2c3e50;
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: #fff;
  font-size: 1.8em;
  font-weight: bold;
  text-decoration: none;
}

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

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

.nav-links a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1em;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: #3498db;
  text-decoration: none;
}

.burger-menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  display: none; /* Hidden by default on desktop */
}

.burger-menu-toggle img {
  width: 30px;
  height: 30px;
  filter: invert(100%); /* Make it white on dark background */
}

/* Base heading styles */
h1,
h2,
h3,
h4 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 20px;
}

h1 {
  font-size: 2.8em;
}

h2 {
  font-size: 2.2em;
}

h3 {
  font-size: 1.8em;
}

h4 {
  font-size: 1.4em;
}

p {
  margin-bottom: 15px;
}

a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 15px auto;
}

/* Section styles */
section {
  padding: 60px 0;
  border-bottom: 1px solid #ddd;
}

section:last-of-type {
  border-bottom: none;
}

/* Section 1: Hero Screen */
.hero-section {
  background: linear-gradient(135deg, #3498db, #8e44ad);
  color: #fff;
  text-align: center;
  padding: 100px 0;
}

.hero-section h1 {
  color: #fff;
  margin-bottom: 10px;
}

.hero-section h2 {
  color: #ecf0f1;
  font-weight: normal;
  margin-bottom: 30px;
}

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 30px auto;
}

.hero-visual .wheel-animation {
  width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

.cta-button {
  display: inline-block;
  background-color: #e67e22;
  color: #fff;
  padding: 15px 30px;
  border-radius: 50px;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s ease, transform 0.3s ease;
  margin-top: 20px;
  position: relative;
  overflow: hidden;
}

.cta-button.small-cta-button {
  /* For the demo spin button */
  padding: 10px 20px;
  font-size: 1em;
}

.cta-button:hover {
  background-color: #d35400;
  transform: translateY(-3px);
  text-decoration: none;
}

.cta-button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.cta-button:hover img {
  opacity: 0.2;
}

.cta-button span {
  position: relative;
  z-index: 1;
}

.hero-section p {
  max-width: 800px;
  margin: 20px auto 30px auto;
  font-size: 1.1em;
}

.social-proof {
  margin-top: 40px;
}

.social-proof img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}

/* Section 2: How It Works */
.how-it-works-section {
  background-color: #fff;
  text-align: center;
}

.process-steps {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
}

.process-step {
  flex: 1;
  min-width: 300px;
  max-width: 45%;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background-color: #fdfdfd;
}

.process-step img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  margin-bottom: 15px;
  border-radius: 5px;
}

.illustrations {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 40px;
}

.illustrations img {
  width: 100%;
  max-width: 300px;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.streak-examples {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

.streak-examples img {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-info {
  margin-top: 40px;
  background-color: #ecf0f1;
  padding: 20px;
  border-radius: 8px;
}

.progress-info img {
  max-width: 600px;
  margin-top: 20px;
}

/* ... (existing styles above this) ... */

/* NEW: Demo Game Section Styles */
.demo-game-section {
  background-color: #e8f7fa; /* Light blue/cyan background */
  padding: 60px 0;
  text-align: center;
  border-bottom: 1px solid #cceeff;
}

.demo-game-section .intro-text {
  max-width: 800px;
  margin: 0 auto 40px auto;
  font-size: 1.1em;
  color: #444;
}

.game-area {
  display: flex;
  flex-direction: column; /* Stack on small screens */
  align-items: center;
  gap: 40px;
  margin-top: 30px;
  background-color: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

@media (min-width: 900px) {
  .game-area {
    flex-direction: row; /* Side-by-side on larger screens */
    justify-content: center;
  }
}

.wheel-container {
  position: relative;
  width: 350px; /* Fixed size for the wheel */
  height: 350px;
  border: 5px solid #34495e;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* Important for pointer and sectors */
  margin-bottom: 30px; /* Space for controls below on mobile */
  display: flex; /* Use flexbox to center wheel */
  justify-content: center;
  align-items: center;
}

.wheel {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth spinning transition */
  transform-origin: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Redefining sector styling for better alignment */
.sector {
  position: absolute;
  width: 50%; /* Half the width of the wheel container */
  height: 100%; /* Full height to allow rotation from center */
  top: 0;
  left: 50%; /* Position at the center-right edge of its parent (.wheel) */
  transform-origin: 0% 50%; /* Rotate around the left edge of this div (which is the center of the wheel) */
  overflow: hidden; /* Hide the part that goes beyond the wheel container */
  border-left: 2px solid rgba(255, 255, 255, 0.2); /* Subtle separation lines */
  box-sizing: border-box;
}

.sector::before {
  content: attr(data-value); /* Display the value */
  position: absolute;
  /* Position the text within the "slice" */
  left: 40%; /* Adjust to move text further out - increased from 30% */
  top: 50%;
  transform: translateY(-50%) rotate(0deg); /* Initial rotation for text within its own sector */
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  z-index: 2; /* Ensure text is above background */
  white-space: nowrap; /* Prevent text wrapping */
}

/* Specific sector colors and rotations */
/* 5 sectors, each 72 degrees (360 / 5).
 The goal: have each sector start at its correct angular position and span 72 degrees.
 If 0deg is at the top (12 o'clock), and we want Red centered there,
 then Red spans from -36deg to +36deg.
 To make a sector starting at X degrees and spanning 72 degrees using `transform-origin: 0% 50%`:
 The sector's "left edge" is at the wheel's center. The sector itself extends to the right.
 So, to make Red appear from -36deg to +36deg, we need to rotate the *entire sector element*
 to its starting angle.
 Red starts at -36deg.
 Blue starts at -36 + 72 = 36deg.
 Green starts at 36 + 72 = 108deg.
 Yellow starts at 108 + 72 = 180deg.
 Purple starts at 180 + 72 = 252deg.
*/

.sector.red {
  background-color: #e74c3c;
  transform: rotate(
    -36deg
  ); /* Red sector starts at -36deg (relative to 0/top) */
}
.sector.red::before {
  /* Counter-rotate text relative to its position within the rotated sector
     This rotates the text to make it readable (facing outwards from the center).
     Each text element needs to rotate by 90 degrees MINUS half the sector angle,
     then compensated by the sector's starting angle, all relative to the page.
     A simpler approach is to make them point "up" on their own sector, then rotate the whole thing.
     Let's stick to making them relatively straight.
     If the sector's own `transform-origin` is at the center, then the text needs to be
     rotated to appear radial.
     The value here should be (sector_angle / 2) + 90 or similar based on how the element renders.
     For a 72-degree sector, rotating the text by 36 degrees will make it point out.
     We need to add the overall rotation of the *wheel* for the text.
     Simpler: make the text point outward relative to its own sector.
  */
  transform: translateY(-50%) rotate(36deg); /* Adjust text to be readable within its sector */
}

.sector.blue {
  background-color: #3498db;
  transform: rotate(36deg); /* Blue sector starts at 36deg */
}
.sector.blue::before {
  transform: translateY(-50%) rotate(36deg);
}

.sector.green {
  background-color: #2ecc71;
  transform: rotate(108deg); /* Green sector starts at 108deg */
}
.sector.green::before {
  transform: translateY(-50%) rotate(36deg);
}

.sector.yellow {
  background-color: #f1c40f;
  transform: rotate(180deg); /* Yellow sector starts at 180deg */
}
.sector.yellow::before {
  transform: translateY(-50%) rotate(36deg);
}

.sector.purple {
  background-color: #9b59b6;
  transform: rotate(252deg); /* Purple sector starts at 252deg */
}
.sector.purple::before {
  transform: translateY(-50%) rotate(36deg);
}

/* Pointer for the wheel */
.pointer {
  position: absolute;
  top: -20px; /* Position above the wheel */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 30px solid #2c3e50; /* Dark triangle pointing down */
  z-index: 10; /* Ensure pointer is always on top */
}

/* ... (rest of CSS remains the same) ... */
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
  max-width: 400px; /* Max width for controls */
}

.prediction-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.predict-button {
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s ease, transform 0.1s ease;
  flex-grow: 1; /* Allow buttons to grow */
  min-width: 120px;
}

.predict-button:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
}

.predict-button.selected {
  background-color: #27ae60; /* Green when selected */
  border: 2px solid #229954;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
}

#spinButton {
  width: 80%; /* Make spin button wider */
}

#spinButton:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  transform: none;
  opacity: 0.7;
}

.message {
  font-size: 1.1em;
  font-weight: bold;
  margin-top: 10px;
  min-height: 25px; /* Prevent layout shift */
}

#predictionMessage {
  color: #2c3e50;
}

#resultMessage {
  color: #e74c3c; /* Default for loss */
}

#resultMessage.win {
  color: #27ae60; /* Green for win */
}

#streakCounter {
  color: #34495e;
}

.reset-button {
  background-color: #95a5a6;
  color: #fff;
  border: none;
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  transition: background-color 0.2s ease;
}

.reset-button:hover {
  background-color: #7f8c8d;
}

.demo-game-section .disclaimer-text {
  font-size: 0.9em;
  color: #666;
  margin-top: 40px;
  font-style: italic;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Section 3: Gallery of Styles */
.gallery-section {
  background-color: #f9f9f9;
}

.gallery-section h2,
.gallery-section h3 {
  text-align: center;
}

.gallery-content {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-top: 40px;
}

.gallery-subsection {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.gallery-subsection h3 {
  color: #2980b9;
  margin-bottom: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.image-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-indicator {
  text-align: center;
  margin-top: 40px;
  font-size: 1.1em;
  font-weight: bold;
  color: #27ae60;
}

/* Section 4: Training Modes */
.training-modes-section {
  background-color: #ecf0f1;
  text-align: center;
}

.mode-description {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  gap: 40px;
  margin-top: 40px;
}

.mode-item {
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.mode-item h3 {
  color: #e74c3c;
  text-align: center;
  margin-bottom: 20px;
}

.mode-item img {
  margin-top: 15px;
  border-radius: 5px;
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.mode-benefits {
  margin-top: 40px;
  font-style: italic;
  color: #555;
}

/* Section 5: Our Principles */
.principles-section {
  background-color: #fff;
}

.principle-item {
  padding: 30px 0;
  border-bottom: 1px dashed #eee;
  margin-bottom: 20px;
}

.principle-item:last-of-type {
  border-bottom: none;
}

.principle-item h4 {
  color: #2c3e50;
  text-align: left;
  margin-bottom: 15px;
}

.principle-item p {
  text-align: left;
  margin-bottom: 15px;
}

.principle-item img {
  max-width: 150px;
  height: auto;
  display: inline-block;
  margin: 0 10px 10px 0;
  vertical-align: middle;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.disclaimer {
  color: #e74c3c;
  font-size: 1.3em;
  margin-top: 40px;
  padding: 20px;
  border: 2px solid #e74c3c;
  border-radius: 8px;
  text-align: center;
  background-color: #fdeaea;
}

.icons-safe {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 30px;
}

.icons-safe img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* Section 6: Frequently Asked Questions */
.faq-section {
  background-color: #f9f9f9;
}

.faq-item {
  background-color: #fff;
  padding: 25px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.faq-item h4 {
  color: #3498db;
  cursor: pointer;
  margin-bottom: 10px;
  position: relative;
  padding-right: 30px;
  text-align: left;
}

.faq-item p {
  display: none;
  margin-top: 10px;
  text-align: left;
}

.faq-item img {
  max-width: 200px;
  height: auto;
  float: right;
  margin-left: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.faq-item p::after {
  content: "";
  display: table;
  clear: both;
}

/* Section 7: Our Approach */
.approach-section {
  background-color: #ecf0f1;
}

.approach-item {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.approach-item h4 {
  color: #16a085;
  margin-bottom: 15px;
}

.approach-item img {
  max-width: 100px;
  height: auto;
  display: inline-block;
  margin: 0 15px 15px 0;
  vertical-align: middle;
  border-radius: 5px;
}

/* Section 8: Our Values */
.values-section {
  background-color: #fff;
}

.value-item {
  padding: 30px 0;
  border-bottom: 1px dashed #eee;
  margin-bottom: 20px;
}

.value-item:last-of-type {
  border-bottom: none;
}

.value-item h4 {
  color: #8e44ad;
  text-align: left;
  margin-bottom: 15px;
}

.value-item img {
  max-width: 120px;
  height: auto;
  display: inline-block;
  margin: 0 10px 10px 0;
  vertical-align: middle;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.testimonials {
  margin-top: 40px;
  text-align: center;
  font-style: italic;
  font-size: 1.1em;
  color: #555;
}

.testimonials img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  margin: 0 15px 15px;
  vertical-align: middle;
}

/* Section 9: Design Behind the Scenes */
.design-section {
  background-color: #f9f9f9;
}

.design-process {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  gap: 40px;
  margin-top: 40px;
}

.process-step {
  width: 100%;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.process-step h4 {
  color: #d35400;
  margin-bottom: 15px;
}

.process-step img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  margin-top: 15px;
  border-radius: 8px;
}

/* Section 10: Future Plans */
.future-section {
  background-color: #e0f2f7;
}

.future-item {
  background-color: #fff;
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.future-item h4 {
  color: #2980b9;
  margin-bottom: 15px;
}

.future-item img {
  max-width: 200px;
  height: auto;
  display: inline-block;
  margin: 0 15px 15px 0;
  vertical-align: middle;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.future-concept-art {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.future-concept-art img {
  max-width: 400px;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Footer */
footer {
  background-color: #2c3e50;
  color: #ecf0f1;
  padding: 40px 0;
  text-align: center;
}

footer a {
  color: #fff;
  margin: 0 15px;
  font-size: 0.9em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

footer a img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-bottom: 0;
}

.footer-info,
.footer-links,
.footer-contact,
.social-icons,
.geo-focus {
  margin-bottom: 15px;
}

.social-icons img {
  width: 30px;
  height: 30px;
  margin: 0 10px;
  display: inline-block;
}

.geo-focus {
  font-style: italic;
  font-size: 0.8em;
  opacity: 0.8;
}

/* Responsiveness (adjusted for burger menu and demo game) */
@media (max-width: 768px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.8em;
  }

  h3 {
    font-size: 1.5em;
  }

  .nav-links {
    display: none; /* Hide navigation links by default on small screens */
    flex-direction: column;
    width: 100%;
    background-color: #2c3e50;
    position: absolute;
    top: 60px; /* Adjust based on header height */
    left: 0;
    padding: 20px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  }

  .nav-links.active {
    display: flex; /* Show when active */
  }

  .nav-links li {
    margin: 10px 0;
    text-align: center;
  }

  .burger-menu-toggle {
    display: block; /* Show burger icon on small screens */
  }

  .process-step,
  .mode-item {
    max-width: 100%;
  }

  .illustrations,
  .image-grid,
  .streak-examples,
  .icons-safe,
  .future-concept-art {
    flex-direction: column;
    align-items: center;
  }

  .illustrations img,
  .image-grid img,
  .streak-examples img,
  .icons-safe img,
  .future-concept-art img {
    max-width: 90%;
    margin: 0 auto 15px auto;
  }

  .principle-item img,
  .value-item img,
  .approach-item img,
  .future-item img {
    margin: 0 auto 15px auto;
    display: block;
  }

  .faq-item img {
    float: none;
    margin: 15px auto 0 auto;
  }

  footer a {
    display: block;
    margin-bottom: 10px;
  }

  .wheel-container {
    width: 280px; /* Make wheel slightly smaller on mobile */
    height: 280px;
  }
}

/* --- Секция формы обратной связи --- */
.contact-section {
  background-color: #f8f8f8;
  padding: 80px 0;
  text-align: center;
  border-top: 1px solid #eee;
}

.contact-section h2 {
  font-size: 2.8em;
  color: #333;
  margin-bottom: 20px;
  font-weight: 700;
}

.contact-section .intro-text {
  max-width: 700px;
  margin: 0 auto 50px auto;
  font-size: 1.1em;
  color: #666;
  line-height: 1.6;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: left; /* Reset text align for form elements */
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: #555;
  font-size: 1em;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1em;
  color: #333;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box; /* Include padding in width */
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  outline: none;
}

.form-group textarea {
  resize: vertical; /* Allow vertical resizing */
  min-height: 120px;
}

.checkbox-label {
  display: flex; /* Use flexbox for alignment */
  align-items: center;
  font-size: 0.95em;
  color: #666;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  margin-right: 10px;
  /* Basic styling for checkbox */
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 4px;
  vertical-align: middle;
  cursor: pointer;
  appearance: none; /* Hide default checkbox */
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  top: -1px; /* Adjust vertical alignment */
}

.checkbox-label input[type="checkbox"]:checked {
  background-color: #3498db;
  border-color: #3498db;
}

.checkbox-label input[type="checkbox"]:checked::before {
  content: "✔"; /* Checkmark for checked state */
  display: block;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkbox-label a {
  color: #3498db;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
}

.checkbox-label a:hover {
  color: #2980b9;
  text-decoration: underline;
}

.contact-form .cta-button {
  width: 100%;
  padding: 18px 25px;
  background-color: #2ecc71; /* Green for submit button */
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-form .cta-button:hover {
  background-color: #27ae60;
  transform: translateY(-2px);
}

.contact-form .cta-button:active {
  transform: translateY(0);
}

/* Адаптивность для формы */
@media (max-width: 768px) {
  .contact-form {
    padding: 25px;
    margin: 0 20px;
  }

  .contact-section h2 {
    font-size: 2.2em;
  }
}