/* ������� ����� */
@import "files/basic_style.css";

/* ���������� ��������*/
@import "files/layout_1col.css";
/* @import "files/layout_2col_left.css";  */
/*@import "files/layout_2col_right.css";*/

/* �������� ����� */
/* @import "files/color_08_orange.css";  */


.content-container {
    display: flex;
    align-items: center;
  }

.secblock-img {
    width: 100%;
}

.firblock {
    width: 70%;
}

/* ��������� ��� ������ ������ 1000px */
@media (max-width: 1100px) {
    .content-container {
        display: block; /* ������� flex ��� ������������� ����������� */
    }

    .content-container img {
        margin-top: 20px; /* ��������� ������ ������ ��� ����������� */
    }

    .secblock {
        text-align: center;
    }

    .secblock-img {
        width: 60%;
    }

    .firblock {
        width: 100%;
    }
}



.card1 {
  font-family: "Segoe script", sans-serif;
  padding: 60px;
  display:inline-block;
  width: 400px;
  height: 650px;
  perspective: 1000px;
  cursor: pointer;
}

.card {
  font-family: "Segoe script", sans-serif;
  padding: 60px;
  display:inline-block;
  width: 925px;
  height: 1000px;
  perspective: 1000px;
  cursor: pointer;
}

/* Определѝем ѝтили длѝ внутреннего контейнера карточки (card-inner) */
.card1-inner,
.card-inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 1s; /* Эффект переворота */
}

/* Определѝем ѝтили длѝ лицевой и обратной ѝторон карточки (card-front и card-back) */
.card1-front,
.card1-back,
.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}

/* Стили длѝ лицевой ѝтороны карточки */
.card1-front,
.card-front {
  background-color: white;
  border-radius: 5px; 
  border: 10px solid #ff005d;
  background-size: cover;
  color:#ff005d;
}

.card1-front,
.card-front > h3 {
  font-size: 30px;
  font-weight: bold;
  color: #ff005d;}


/* Стили длѝ обратной ѝтороны карточки */

.card1-back,
.card-back {
  transform: rotateY(180deg); /* Эффект переворота обратной ѝтороны */
  background-color: #ff005d;
  border-radius: 5px; 
  border: 2px solid #ff005d;
}
.card-back > h3,
.card-back > h3 {
  text-align: center;
  margin-bottom: 30px;
  font-size: 20px;
  font-weight: bold;
}
.card1-back > p,
.card-back > p {
  margin-bottom: 20px;
}

/* Эффект переворота при наведении курѝора на карточку */
.card1:hover .card1-inner,  .card:hover .card-inner {
  transform: rotateY(180deg);
}