/* ШАПКА 75 */
.header {
	display: flex;
	justify-content: space-between;
	position: fixed;
	top: 0;
	width: 100%; /* Шапка займёт всю ширину окна браузера */
	height: 75px;
	z-index: 1000; /* Высокое значение, чтобы шапка была всегда на первом плане */
	background-color: #ffffff;
	box-shadow: 2px 2px 4px rgba(61, 105, 16, 0.5);
}

/* ОТСТУП 75 СВЕРХУ ЧТОБЫ НЕ ПЕРЕКРЫВАТЬ ШАПКУ */
.body_margin_top {
	margin-top: 75px;
}

/* БЛОК С БЕЛЫЙ ФОНОМ */
.body_color_white {
	background-color: #ffffff;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap; /* Разрешаем перенос */
}


/* БЛОК С СЕРЫМ ФОНОМ */
.body_color_gray {
	background-color: #f0f0f0;
	justify-content: center;
	align-items: center;
	display: flex;
	flex-wrap: wrap; /* Разрешаем перенос */
}

.body_color_green {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	background-color: green;
	flex-wrap: wrap;
}


.svg_logo {
	position: absolute;
	top: 0px;
	left: 20px;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
}

/* ЗЕЛЕНАЯ КНОПКА С БЕЛЫМ ФОНОМ */
.btn {
	height: 50px;
	position: absolute;
	top: 15px;
	right: 20px;
	padding: 12px 24px;
	background-color: #ffffff; 			/* Исходный цвет */
	color: green;
	border: 1px, solid, green;
	border-radius: 50px;
	transition: background-color 0.2s; 	/* Плавное изменение */
}

/* СМЕНА ФОНА КНОПКИ НА ЗЕЛЕНЫЙ ПРИ НАВЕДЕНИИ */
.btn:hover {
	background-color: green; 			/* Новый цвет фона при наведении */
	color: #ffffff;						/* Новый цвет текста при наведении */
}

input {
	margin-top: 25px;
	margin-right: 15px;
	margin-left: 15px;
	field-sizing: content;
	border-radius: 15px;
	min-width: 30%;
	height: 50px;
	max-width: 80%; /* или заданная максимальная ширина */
}

.fullscreen-block {
    width: 100vw;  /* Ширина — 100% ширины вьюпорта */
    height: 100vh; /* Высота — 100% высоты вьюпорта */
	background-image: url(../img/first.png);
    background-size: contain; /* масштабирует под блок */
	background-position: center; /* центрирует */
	background-repeat: no-repeat; /* не повторяет */
}


.holographic-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400vh;
  background: #425995;
}

.holographic-card {
  width: 30vw;
  height: 350px;

  background: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  transition: all 0.5s ease;
  border: medium solid #C0C0C0;

  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.holographic-card h2 {
  color: #0ff;
  font-size: 1.5rem;
  position: relative;
  z-index: 2;
}

.holographic-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    rgba(0,255,255,0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
}

.holographic-card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,255,0.5);
}

.holographic-card:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

.svg {
	width: 7rem;
	height: 7rem;
	border-radius: 50%;
}

.card {
  width: 40vw;
  height: 350px;
  margin: 1rem auto;
  perspective: 1000px;
  cursor: pointer;
  
  

  justify-content: center;
  align-items: center;


  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.card-front {
  background: #f0f0f0;
  border: 1px solid #e5e7eb;
}

.card-back {
  background: #ffffff;
  color: black;
  transform: rotateY(180deg);
}

.stack {
	display: flex;
	flex-direction: column;
}

.hstack {
	display: flex;
	flex-direction: row;
}

.container {
	width: 100%;
	max-width: 1280px;
}

.text-card-header {
	text-align: center;
	font-size: 1.2rem;
	font-weight: 500;
}

.text-card-description {
	text-align: center;
	font-size: 1rem;
	font-weight: 300;
}

.text-card-hello{
	font-family: 'Monotype Corsiva', sans-serif;
	color: #FF6600;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 900;
}

.text-card-hello1{
	font-family: 'Monotype Corsiva', sans-serif;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 500;
}

.header_h1 {
	font-size: 50px;
	font-weight: 600;
	color: #fdfdfe;
	text-shadow: 1px 1px 1px #957dad,
             1px 2px 1px #957dad,
             1px 3px 1px #957dad,
             1px 4px 1px #957dad,
             1px 5px 1px #957dad,
             1px 6px 1px #957dad,
             1px 10px 5px rgba(16, 16, 16, 0.5),
             1px 15px 10px rgba(16, 16, 16, 0.4),
             1px 20px 30px rgba(16, 16, 16, 0.3),
             1px 25px 50px rgba(16, 16, 16, 0.2);
}

.card2 {
  width: 40vw;
  height: 350px;
  margin: 1rem auto;
  perspective: 1000px;
  cursor: pointer;
  
  

  justify-content: center;
  align-items: center;


  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card2-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.card2:hover .card-inner {
  transform: rotateY(180deg);
}

.card2-front,
.card2-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
}

.card2-front {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.card2-back {
  background: #f0f0f0;
  color: black;
  transform: rotateY(180deg);
}









/* Контейнер для кнопки */
.css-modal-checkbox-container {
	height: 50px;
	position: absolute;
	top: 25px;
	right: 20px;
}
/* Убираем флажок */
#css-modal-checkbox {
    display: none;
}
/* Кнопка для открытия */
.css-modal-checkbox {
	padding: 12px 24px;
	background-color: #ffffff; 			/* Исходный цвет */
	color: green;
	border: 1px, solid, green;
	border-radius: 50px;
	transition: background-color 0.2s; 	/* Плавное изменение */
}
.css-modal-checkbox:hover,
.css-modal-checkbox:active,
.css-modal-checkbox:focus {
    background-color: green; 			/* Новый цвет фона при наведении */
	color: #ffffff;						/* Новый цвет текста при наведении */
}
.css-modal-checkbox:before {

}
.css-modal-checkbox:hover:before,
.css-modal-checkbox:active:before,
.css-modal-checkbox:focus:before {
    transform: translateX(0);
}
 
/* Контейнер, который затемняет страницу */
#css-modal-checkbox + .cmc {
    display: none;
}
#css-modal-checkbox:checked + .cmc {
    display:flex;
    align-items:center;
    justify-content:center;    
    z-index: 4;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    animation: bg 0.5s ease;
    background: rgba(51, 122, 183, 0.7);
}
 
/* Модальное окно */
#css-modal-checkbox:checked + .cmc .cmt {
    font-family: Verdana, sans-serif;  
    font-size: 16px;
    padding: 20px;
    width:80%;
    max-width: 600px;
    max-height: 70%;
    transition: 0.5s;
    border: 6px solid #BFE2FF;
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    text-align: center;
    overflow: auto;
    animation: scale 0.5s ease;
}
/* Кнопка с крестиком закрывающая окно */
.css-modal-close {
    width: 50px;
    height: 50px;
    border: 6px solid #BFE2FF;
    border-radius: 12px;
    position: absolute;
    z-index: 10;
    top: 20px;
    right: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23337AB7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-color: #FFF;
    background-size: cover;
    animation: move 0.5s ease;
    cursor: pointer;
}
 
/* Анимации */
@keyframes scale {
    0% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes move {
    0% {
        right: -80px;
    }
    100% {
        right: 20px;
    }
}
@keyframes bg {
    0% {
        background: rgba(51, 122, 183, 0);
    }
    100% {
        background: rgba(51, 122, 183, 0.7);
    }
}