body {
    background-color:#fefadc;
}

.main-text {
  display: flex;
  justify-content: center; /* Центрируем контейнер по горизонтали */
  margin: 10vh auto 0;    /* 10vh отступ сверху, auto по бокам для центрирования */
  width: 90vh;            /* Фиксированная ширина */
  height: 12vh;
  min-width: 70vh;            /* Фиксированная ширина */
  min-height: 12vh;           /* Фиксированная высота */
}


.main-text p {   
  margin-right:60vw ;/* Текст внутри выравнивается влево */
  font-size: min(100px, 6vw);
  font-family: "Czizh Wing";
  font-weight: bold;
  color: #392f5a;
  text-wrap: nowrap;
}

.main-text-row {
  display: flex;         /* Включаем Flexbox */
  justify-content: left;
    margin-top: 10vh;
    width: 90vw;           /* Занимает 90% ширины экрана */
    height: 10vh;          /* Высота подстраивается под содержимое */
    margin-left: 60px;
}


.main-text-row p {
  display: flex;
    font-size: min(100px, 4vw);
    font-family: "Czizh Wing";;
    font-weight: bold;
}

.content .main-text-row {
    margin-top: 40px;
    width: 50%;         /* 544.36 / 1282.63 ≈ 42.4% */
    height: 100%;         /* Занимает всю высоту контейнера */
    text-wrap: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 20px;
    font-size: min(40px, 4vw);
    font-family: "Czizh Wing";;
    font-weight: bold;
    margin: 0 auto;
    flex-shrink: 0;
}

.content .main-text p {
    margin-top: 0;
    text-align: center;
    margin-right: 50px;
    margin: 0 auto;
}


.top-row {
    top: 8vh;
    width: 90vw;
    max-width: 1282.63px;  
    height: auto;  
    aspect-ratio: 1280 / 370;
    display: flex;
    margin: 0 auto;
    position: relative;
    gap: 20px;
}


.content .top-row {
  gap:max(2vw, 2vw)
}



.bottom-row {
    top: 10vh;
    width: 90vw;
    max-width: 1282.63px;  
    height: auto;  
    aspect-ratio: 1280 / 370;
    display: flex;
    margin: 0 auto;
    position: relative;
    gap: 20px;
    flex-shrink: 0;
}



.pic img {
    width: 100%;         /* 544.36 / 1282.63 ≈ 42.4% */
    height: 100%;         /* Занимает всю высоту контейнера */
    border-radius: 20px;
    flex-shrink: 0;       /* Запрещаем сжатие */
}





.text-one {
    width: 50%;         /* 544.36 / 1282.63 ≈ 42.4% */
    height: 100%;         /* Занимает всю высоту контейнера */
    text-wrap: nowrap;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 20px;
    margin: 0 auto;
    font-size: min(40px, 4vw);
    font-family: "Czizh Wing";;
    font-weight: bold;
    flex-shrink: 0;
}













  /* Основной контейнер (гибкий, но с максимальным размером) */
  .container {
    width: 90vw;           /* Занимает 90% ширины экрана */
    max-width: 1282.63px;  /* Но не больше оригинального размера */
    height: auto;          /* Высота подстраивается под содержимое */
    aspect-ratio: 1282.63 / 367;  /* Сохраняем пропорции */
    display: flex;         /* Включаем Flexbox */
    margin: 0 auto; /* Центрируем */
    top: 14vh;
    position: relative;    /* Для позиционирования внутренних элементов */
    gap: 20px;            /* Отступ между элементами (можно настроить) */
  }

  /* Блок WhatsApp (левый) */
  .whatsapp {
    width: 42.4%;         /* 544.36 / 1282.63 ≈ 42.4% */
    height: 100%;         /* Занимает всю высоту контейнера */
    border-radius: 20px;
    flex-shrink: 0;       /* Запрещаем сжатие */
  }

  /* Круглый элемент (середина) */
  .element {
    width: 10.2%;         /* 130.88 / 1282.63 ≈ 10.2% */
    aspect-ratio: 1 / 1;  /* Круг (равные ширина и высота) */
    border-radius: 50%;   /* Делаем круглым */
    position: absolute;   /* Тут без Flex, т.к. нужно точное позиционирование */
    left: 55%;         /* 631.81 / 1282.63 ≈ 49.2% */
    top: 0;
    transform: translateX(-50%); /* Центрируем по горизонтали */
  }

  /* Текстовый блок (под кругом) */
  .text-two {
    max-width: 24%;          /* 308.09 / 1282.63 ≈ 24% */
    max-height: 150px;       /* 136.27 / 367 ≈ 37.1% */
    text-align: center;
    color: black;
    font-family: Czizh;
    font-weight: 400;
    word-wrap: break-word;
    position: absolute;
    left: 55%;         /* 550.51 / 1282.63 ≈ 42.9% */
    top: 46.6%;          /* 171.23 / 367 ≈ 46.6% */
    transform: translateX(-50%); /* Центрировка */
    font-family: "Czizh Wing";;
    font-weight: bold;
    font-size: min(30px, 2vw);
  }

  /* Правый блок */
  .i {
    width: 31.9%;        /* 409.27 / 1282.63 ≈ 31.9% */
    height: 100%;
    border-radius: 20px;
    margin-left: auto;   /* Прижимаем к правому краю */
  }

  .content {
    top: 10vh;
    width: 90vw;
    max-width: 1282.63px;  
    height: 100%;  
    aspect-ratio: 1280 / 370;
    display: flex;
    margin: 0 auto;
    position: relative;
    gap: 30px;
    flex-shrink: 0;
  }

  .container .top-row {
    gap:max(2vw, 2vw)
  }

  .container .pic-wide {
    margin: 0 auto;
    margin-top: 3vh;
    width: min(1000px, 150vh);
  }


  .container-text {
    width: 100%;           /* Занимает 90% ширины экрана */
    width: min(1200px, 70vw);
    height: 100%;          /* Высота подстраивается под содержимое */
    aspect-ratio: 1282.63 / 367;  /* Сохраняем пропорции */
    display: flex;         /* Включаем Flexbox */
    margin: 0 auto; /* Центрируем */
    top: 24vh;
    position: relative;    /* Для позиционирования внутренних элементов */
    gap: 20px;            /* Отступ между элементами (можно настроить) */
  }



  .container-text .pictext-wide {
    width: min(1200px, 70vw);
    height: min(400px,300px);
    margin: 0 auto;
  }

  .text-container {
    width: 90vw;           /* Занимает 90% ширины экрана */
    max-width: 1282.63px;  /* Но не больше оригинального размера */
    height: 100%;          /* Высота подстраивается под содержимое */
    aspect-ratio: 1282.63 / 367;  /* Сохраняем пропорции */
    display: flex;         /* Включаем Flexbox */
    justify-content: center;
    justify-content:center ;
    margin: 0; /* Центрируем */
    top: 15vh;
    position: relative;    /* Для позиционирования внутренних элементов */
    gap: 20px;  
  }


  .pic-i {
    width: 100%;        /* 409.27 / 1282.63 ≈ 31.9% */
    height: 100%;
    border-radius: 20px;
    margin-left: 30%;   /* Прижимаем к правому краю */
    margin-bottom: 100px ;
  }

  .element-two {
    width: 25.2%;         /* 130.88 / 1282.63 ≈ 10.2% */
    position: absolute;   /* Тут без Flex, т.к. нужно точное позиционирование */
    left: 28%;         /* 631.81 / 1282.63 ≈ 49.2% */
    top: 0;
    transform: translateX(-50%); /* Центрируем по горизонтали */
  }

  .text-three {
    max-width: 24%;          /* 308.09 / 1282.63 ≈ 24% */
    text-align: center;
    color: black;
    font-family: Czizh;
    font-weight: 400;
    word-wrap: break-word;
    position: absolute;
    left: 28%;         /* 550.51 / 1282.63 ≈ 42.9% */
    top: 50.6%;          /* 171.23 / 367 ≈ 46.6% */
    transform: translateX(-50%); /* Центрировка */
    font-family: "Czizh Wing";;
    font-weight: bold;
    font-size: min(30px, 2vw);
  }

  .container-text .prob {
    margin: 0 auto;
    top: 111vh;
    font-family: "Czizh Wing";;
    font-weight: bold;
    font-size: min(100px, 4vw);
    word-wrap: nowrap;
    text-wrap: nowrap;
    flex-wrap: nowrap;

  }




  .container-prob {
    width: 90vw;           /* Занимает 90% ширины экрана */
    max-width: 1282.63px;  /* Но не больше оригинального размера */
    height: auto;          /* Высота подстраивается под содержимое */
    aspect-ratio: 1282.63 / 367;  /* Сохраняем пропорции */
    display: flex;         /* Включаем Flexbox */
    margin: 0 auto; /* Центрируем */
    position: relative;    /* Для позиционирования внутренних элементов */
    gap: 20px;            /* Отступ между элементами (можно настроить) */
  }


.container-achive {
  width: 90vw;           /* Занимает 90% ширины экрана */
  max-width: 1282.63px;  /* Но не больше оригинального размера */
  height: 100px;          /* Высота подстраивается под содержимое */
  aspect-ratio: 1282.63 / 367;  /* Сохраняем пропорции */
  display: flex;         /* Включаем Flexbox */
  margin: 0 auto; /* Центрируем */
  position: relative;    /* Для позиционирования внутренних элементов */
  gap: 20px;            /* Отступ между элементами (можно настроить) */
}


  .container-achive .myachive {
    margin: 0 auto; 
    font-family: "Czizh Wing";;
    font-weight: bold;
    font-size: min(90px, 4vw);
    word-wrap: none;
    word-break: none;
  }

  .container-gramot {
    width: 100%;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 30px;
    gap:50px;
    overflow: hidden;
   }
  
   .item-one {
    text-align: center;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    max-width: 400px; /* Максимальная ширина */
    min-width: 230px; /* Минимальная ширина */
    min-height: 400px;
    max-height: 450px;
    background-color: #fefadc;
    border-radius: 20px;
    flex-direction: column;
    flex: 1 1 350px; /* Гибкое растягивание/сжатие с базой 300px */
    margin: 10px; /* Отступы для лучшего отображения */
   }

   .item-two {
    text-align: center;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    max-width: 400px; /* Максимальная ширина */
    min-width: 280px; /* Минимальная ширина */
    min-height: 600px;
    max-height: 500px;
    background-color: #fefadc;
    border-radius: 20px;
    flex-direction: column;
    flex: 1 1 350px; /* Гибкое растягивание/сжатие с базой 300px */
    margin: 10px; /* Отступы для лучшего отображения */
   }