/* Import Marck+Script with Cyrillic subset */
@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap&subset=cyrillic');

.section {
  background-color: black;
  display: flex;
  align-items: stretch; /* Ensures children fill full height */
  flex-wrap: wrap; /* Allows wrapping when space is limited */
}

.image-container {
  flex: 0 1 40%; /* Grow: 0, Shrink: 1, Basis: 40% */
  display: flex;
  align-items: stretch; /* Ensures image container stretches */
}

.image-container img {
  height: 100%;
 /* width: auto;*/
   width: 100%;
  object-fit: cover; /* Ensures image fills container neatly */
  display: block;       /* Removes unwanted bottom space */
}

.text {
  flex: 1;   /* Ensures it takes remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Align items to the top */
/*  padding: 40px 30px;  Top and side padding for spacing */
  padding-left: 0;
  padding-right: 140px;
  color: white;
}

.text h1 {
  margin-top: 80px;    /* Space from the top of the container */
  margin-bottom: 20px; /* Space between h1 and the paragraph */
  text-align: center;
  font-size: 32px;
  font-family: 'Marck Script', cursive;
  color: white;
}

.text h2 {
  font-family: 'Marck Script', cursive;
  font-size: 26px;        /* Smaller than h1's 30-34px */
  color: white;
  margin-top: 40px;       /* Space above to separate from previous content */
  margin-bottom: 15px;    /* Space below before next paragraph */
  text-align: center;     /* Keep consistent with h1 and p */
}

.text p {
  text-align: center;
  font-family: 'Marck Script', cursive;
  color: white;
  line-height: 1.6;
  font-size: 24px;
}

/* Responsive part */
/*
@media (max-width: 801px) {
  .section {
    flex-direction: column;
  }

  .image-container,
  .text {
    flex-basis: 100%;
    width: 100%;
  }

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

  .text {
    padding: 20px;
  }
}
  */

  @media (max-width: 1800px) and (min-width: 1401px) {
  .text {
    padding: 50px 40px;
  }

  .text h1 {
    font-size: 34px;
  }

  .text h2 {
    font-size: 26px;
  }

  .text p {
    font-size: 19px;
  }
}

/* Devices between 1400px and 801px */
@media (max-width: 1400px) and (min-width: 801px) {
  .text {
    padding: 40px 30px;
  }

  .text h1 {
    font-size: 32px;
  }

  .text h2 {
    font-size: 24px;
  }

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

/* Devices below 800px */
@media (max-width: 800px) {
  .section {
    flex-direction: column;
  }

  .image-container,
  .text {
    flex-basis: 100%;
    width: 100%;
  }

  .image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .text {
    padding: 25px 20px;
  }

  .text h1 {
    font-size: 30px;
  }

    .text h2 {
    font-size: 22px;
  }

  .text p {
    font-size: 17px;
    padding-right: 25px;
  }
}