css/style.css - master - project_orange/Studia_orange

css/style.css
1 261 строка20 KB
Михаил Мокрушин
Orange studia
24 дек 2025, 11:01
24 дек 2025, 11:01365adf4
@import url('https://fonts.googleapis.com/css2?family=Montaga&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
.container {
	max-width: 1440px;
	margin: 0 auto;
}

.nav__contact {
	display: flex;
	justify-content: space-between;
	margin-top: 15px;
}

.nav__email {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.nav__email a {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	text-decoration: none;
	color: #000;
}

.nav__email img {
	display: flex;
	width: 17px;
	height: 17px;
}

.nav__soc {
	display: flex;
	gap: 20px;
}
.menu-mobail{
	display: none;
}
.nav__soc-left a {
	display: flex;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	justify-content: space-between;
	gap: 10px;
	text-decoration: none;
	color: #000;
}

.nav__soc-left img {
	width: 17px;
	height: 17px;
}

.nav__soc-right img {
	width: 17px;
	height: 17px;
}

.nav__soc-right a {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	text-decoration: none;
	color: #000;
}

.hr {
	margin-top: 15px;
}

.navigation {
	display: flex;
	justify-content: space-between;
}

/* Анимация меню начало */
.rect:hover {
	position: relative;
	margin: auto;
	color: #fff;
	font-size: 20px;
	border-radius: 10px;
	cursor: pointer;

	&:hover {
		filter: contrast(1.1);
	}

	&:active {
		filter: contrast(0.9);
		filter: contrast(0.9);
	}

	&::before,
	&::after {
		content: '';
		position: absolute;
		top: -10px;
		left: -10px;
		right: -10px;
		bottom: -10px;
		border: 2px solid #f17b00;
		transition: all 0.5s;
		animation: clippath 3s infinite linear;
		border-radius: 10px;
	}

	&::after {
		animation: clippath 3s infinite -1.5s linear;
		animation: clippath 3s infinite -1.5s linear;
	}
}

@keyframes clippath {
	0%,
	100% {
		clip-path: inset(0 0 98% 0);
		clip-path: inset(0 0 98% 0);
	}

	25% {
		clip-path: inset(0 98% 0 0);
	}

	50% {
		clip-path: inset(98% 0 0 0);
		clip-path: inset(98% 0 0 0);
	}

	75% {
		clip-path: inset(0 0 0 98%);
		clip-path: inset(0 0 0 98%);
	}
}

.bg::before {
	background: rgba(255, 215, 0, 0.5);
}

/* Анимация меню конец */
.menu ul {
	display: flex;
	gap: 60px;
	margin-top: 40px;
	list-style: none;
}

.menu a {
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	color: #4a5053;
	font-size: 18px;
	font-weight: bold;
}

.tel {
	font-family: 'Montserrat', sans-serif;
	margin-top: 40px;
	font-size: 18px;
	font-weight: bold;
}

.tel a {
	text-decoration: none;
	color: #232c31;
}

.button__nav {
	margin-top: 20px;
}

.nav__btn {
	font-family: 'Montserrat', sans-serif;
	width: 175px;
	height: 50px;
	border-radius: 5px;
	border: none;
	background-color: #f17b00;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
}

.header {
	display: flex;
	justify-content: space-between;
	gap: 105px;
	margin-top: 100px;
}

/* Анимация header */

.header__text-h1 h1 {
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-size: 60px;
}

.header__text-h1 h1::before {
	content: attr(data-text);
	position: absolute;
	overflow: hidden;
	max-width: 630px;
	white-space: nowrap;
	color: #f17b00;
	animation: loading 8s linear infinite;
}

@keyframes loading {
	0% {
		max-width: 0%;
	}
}

/* Анимация header конец */

.header__text-h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	margin-top: 41px;
}

.header__text-h2 span {
	color: #ff7300;
	font-size: 26px;
}

.header__text-h2 p {
	font-family: 'Montserrat', sans-serif;
	margin-top: 10px;
}

.header__img img {
	width: 697px;
	height: 382px;
	border-radius: 10px;
}

.header__blog {
	display: flex;
	justify-content: space-between;
	margin-top: 75px;
}

.btn__header {
	font-family: 'Montserrat', sans-serif;
	width: 305px;
	height: 75px;
	border: none;
	border-radius: 10px;
	background-color: #f17b00;

	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
}

.btn__header a {
	text-decoration: none;
	color: #fff;
}

.header__pull1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	width: 340px;
}

.header__pull2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	width: 224px;
}

.header__pull3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	width: 256px;
}

.main {
	display: flex;
	justify-content: center;
	margin-top: 100px;
	gap: 50px;
	margin-bottom: 129px;
}

.main__left {
	width: 615px;
	height: 384px;
	background-color: #e4e4e4;
	border-radius: 40px;
}

.main__right {
	width: 615px;
	height: 384px;
	background-color: #e4e4e4;
	border-radius: 40px;
}

.main-left-items {
	display: flex;
	justify-content: space-around;
	margin-top: 40px;
}

.main-left-items h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 90px;
}

.coding {
	background-image: url(../images/coding.png), url(../images/Ellipse.png);
	background-position: center;
	background-repeat: no-repeat;
	width: 102px;
	height: 102px;
}

.main-left-items-h2 {
	max-width: 380px;
	padding-left: 56px;
	padding-top: 52px;
	font-size: 26px;
}

.main-right-items {
	display: flex;
	justify-content: space-around;
	margin-top: 40px;
}

.main-right-items h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 90px;
}

.search-engine {
	background-image: url(../images/search-engine.png), url(../images/Ellipse.png);
	background-position: center;
	background-repeat: no-repeat;
	width: 102px;
	height: 102px;
}

.main-right-items-h2 {
	max-width: 380px;
	padding-left: 56px;
	padding-top: 52px;
	font-size: 26px;
}

.article {
	width: 100%;
	height: 912px;
	background-color: #232c31;
	border-radius: 2%;
}

.article__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 82px;
	color: #fff;
	padding-top: 96px;
}

.article__title span {
	color: #ff7300;
}

.article__item {
	display: flex;
	justify-content: space-around;
	margin-top: 68px;
}

.article__items {
	width: 391px;
	height: 470px;
	background-color: #1d1c1c;
	border-radius: 20px;
	padding: 30px;
}
.article__items:hover {
	box-shadow: rgba(241, 240, 240, 0.56) 0px 22px 70px 4px;
}
.article__items-orange {
	width: 391px;
	height: 470px;
	background-color: #f17b00;
	border-radius: 20px;
	padding: 30px;
}
.article__items-orange:hover {
	box-shadow: rgba(241, 240, 240, 0.56) 0px 22px 70px 4px;
}
.article__items-img {
	display: flex;
	justify-content: space-between;
}

.article__item-p {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	color: #a4a4a4;
}

.article__items-h3 {
	font-family: 'Montserrat', sans-serif;
	margin-top: 20px;
	font-size: 25px;
	color: #fff;
}

.article__items-p {
	font-family: 'Montserrat', sans-serif;
	margin-top: 20px;
	font-size: 18px;
	color: #a4a4a4;
	max-width: 320px;
}

.article__items-orange-h3 {
	font-family: 'Montserrat', sans-serif;
	margin-top: 20px;
	font-size: 25px;
	color: #232c31;
}

.article__items-orange-p {
	font-family: 'Montserrat', sans-serif;
	margin-top: 20px;
	font-size: 18px;
	color: #232c31;
	max-width: 320px;
}

.box__btn {
	margin-top: 30px;
}

.btn__box {
	width: 320px;
	height: 60px;
	border-radius: 10px;
	border: 1px #232c31 solid;
	background-color: #f17b00;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 15px;
	cursor: pointer;
}

.btn__box a {
	text-decoration: none;
	color: #232c31;
}

.block__section {
	margin-bottom: 140px;
}

.section__block h1 {
	font-family: 'Montserrat', sans-serif;
	max-width: 1200px;
	margin-top: 140px;
	font-size: 80px;
	font-weight: normal;
}

.section__block h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 28px;
	margin-top: 30px;
}

.section__footer {
	display: flex;
	justify-content: flex-end;
}

.section__btn {
	width: 438px;
	height: 79px;
	background-color: #f17b00;
	border: none;
	color: #fff;
	font-size: 24px;
	cursor: pointer;
	border-radius: 10px;
}

.section__block span {
	background-image: url(../images/Vecto.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

/* стили радиокнопок начало */

.aside {
	width: 100%;
	height: 1043px;
	background: linear-gradient(rgb(207, 203, 203), rgb(211, 209, 209));
	border-radius: 3%;
}
.aside-p {
	font-family: 'Montserrat', sans-serif;
	font-size: 82px;
	font-weight: normal;
	padding-top: 115px;
}

.cartoon-container {
	overflow: hidden;
	position: relative;
	padding: 30px;
}
.cartoon__container {
	width: 1440px;
	margin: 0 auto;
}
.cartoon-container input[type='radio'] {
	display: none;
}

.cartoon-container label {
	clear: left;
	float: left;
	width: 280px;
}

.cartoon-container label:hover {
	cursor: pointer;
	background-color: #f17b00;
}
.cartoon-container label::before{
		background-color: #f17b00;
}

.cartoon__items {
	display: flex;
	flex-direction: column;
	margin-top: 30px;
	background-color: #fff;
	border-radius: 20px;
	padding: 20px;
}

.cartoon__h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	font-weight: bold;
	width: 250px;
}
.cartoon__p {
	font-family: 'Montserrat', sans-serif;
	max-width: 175px;
	font-size: 12px;
	width: 250px;
}
.cartoon {
	margin-left: 25.5%;
	position: relative;
	width: 991px;
	height: 690px;
}
.cartoon figure {
	margin: 0;
	opacity: 0;
	position: absolute;
	transform: scale(0.8);
	-webkit-transform: scale(0.8);
	transition: all 0.5s linear 0s;
	border-radius: 20px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
	width: 100%;
}
.aside__text-block {
	display: flex;
	justify-content: space-between;
}
.aside__text-h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
}
.aside__title p {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	margin-top: 15px;
}
.aside__p {
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 12px;
	margin-top: 115px;
}

.aside__ol {
	margin-top: 50px;
}

.aside__li {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	margin-top: 10px;
}
.aside__title {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	padding: 50px;
	background-color: #fff;
	border-radius: 20px;
}
.aside__title h2 {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	margin-top: 50px;
}
.svg {
	background-image: url(../images/svg.png), url(../images/Ellipse.png);
	background-position: center;
	background-repeat: no-repeat;
	width: 102px;
	height: 102px;
}

#prototip:checked ~ .cartoon #f-prototip,
#dizain:checked ~ .cartoon #f-dizain,
#verstka:checked ~ .cartoon #f-verstka,
#reklama:checked ~ .cartoon #f-reklama {
	opacity: 1;
	transform: scale(1);
	-webkit-transform: scale(1);
}

#prototip:checked + label,
#dizain:checked + label,
#verstka:checked + label,
#reklama:checked + label {
	opacity: 0.6;
}

#prototip:checked ~ .cartoon #f-prototip figcaption,
#dizain:checked ~ .cartoon #f-dizain figcaption,
#verstka:checked ~ .cartoon #f-verstka figcaption,
#reklama:checked ~ .cartoon #f-reklama figcaption {
	top: -5rem;
}

/* конец стилей радиокнопок */

.title__keyse{
	font-family: 'Montserrat', sans-serif;
	font-size: 82px;
	margin-top: 108px;
}

.wrapper__h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 82px;
	margin-top: 90px;
}

.wrapper__money {
	margin-bottom: 120px;
}

.wrapper__block {
	display: flex;
	justify-content: space-between;
}

.wrapper__p {
	max-width: 750px;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	margin-top: 20px;
}

.wrapper__block-left {
	width: 402px;
	height: 308px;
	background-color: #f7f7f7;
	border-radius: 10px;
}
.wrapper__block-left:hover {
	box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
.wrapper__items {
	display: flex;
	justify-content: space-around;
}

.wrapper__items h3 {
	font-family: 'Montserrat', sans-serif;
	margin-top: 20px;
}

.wrapper__title {
	padding: 20px;
}

.wrapper__title p {
	font-family: 'Montserrat', sans-serif;
	width: 350px;
	font-size: 16px;
}

.wrapper__text-h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	margin-top: 30px;
}

.wrapper__btn {
	width: 250px;
	height: 50px;
	margin-top: 20px;
	border: none;
	border-radius: 5px;
	background-color: #ff7300;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
}

.wrapper__money-footer {
	display: flex;
	justify-content: center;
	gap: 120px;
	margin-top: 40px;
}
.wrapper__desc1:hover {
	box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}
.wrapper__desc1 {
	width: 402px;
	height: 440px;
	background-color: #f7f7f7;
	border-radius: 10px;
}

.wrapper__desc-item {
	display: flex;
	justify-content: space-around;
}

.wrapper__desc-title {
	padding: 50px;
}

.wrapper__desc-ul {
	padding-top: 10px;
}

.wrapper__desc-title li {
	font-family: 'Montserrat', sans-serif;
}

.wrapper__desc-item h3 {
	font-family: 'Montserrat', sans-serif;
	margin-top: 20px;
}

.wrapper__desc-title p {
	font-family: 'Montserrat', sans-serif;
	width: 350px;
	font-size: 16px;
}

.wrapper__title-h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	margin-top: 30px;
}

.wrapper__desc-btn {
	width: 250px;
	height: 50px;
	margin-top: 20px;
	border: none;
	border-radius: 5px;
	background-color: #ff7300;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
}

.faq{
	margin-bottom: 100px;
}
.faq__h1{
	font-family: 'Montserrat', sans-serif;
  font-size: 82px;
	text-align: left;
	font-weight: normal;
	margin-bottom: 100px;
}

/* начало аккордиона */
#faq {
  max-width: 1440px;
  margin: auto;
  text-align: center;
}

section.faq {
  padding-top: 2em;
  padding-bottom: 3em;
}

#faq ul {
  text-align: left;
}
.transition, p, ul li i:before, ul li i:after {
  transition: all 0.3s;
}

#faq .no-select, #faq h2 {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}



#faq h2 {
	font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  line-height: 34px;
  text-align: left;
  padding: 15px 15px 0;
  text-transform: none;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
  margin: 0;
  cursor: pointer;
  transition: .2s;
}
.faq__span{
	font-size: 50px;
	color: #f17b00;
	font-weight: bold;
}
#faq p {
  color: #333;
  text-align: left;
  font-family: 'hm_light', sans-serif;
  font-size: 20px;
  line-height: 1.45;
  position: relative;
  overflow: hidden;
  max-height: 250px;
  will-change: max-height;
  contain: layout;
  display: inline-block;
  opacity: 1;
  transform: translate(0, 0);
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 0 50px 0 125px;
  transition: .3s opacity, .6s max-height;
  hyphens: auto;
  z-index: 2;
}

#faq ul {
  list-style: none;
  perspective: 900;
  padding: 0;
  margin: 0;
}
#faq ul li {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background: #fff;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,0.1);
  -webkit-tap-highlight-color: transparent;
}
#faq ul li + li {
  margin-top: 15px;
}
#faq ul li:last-of-type {
  padding-bottom: 0;
}
#faq ul li i {
  position: absolute;
  transform: translate(-6px, 0);
  margin-top: 28px;
  right: 15px;
}
#faq ul li i:before, ul li i:after {
  content: "";
  position: absolute;
  width: 3px;
  height: 9px;
}
#faq ul li i:before {
  transform: translate(-2px, 0) rotate(45deg);
}
#faq ul li i:after {
  transform: translate(2px, 0) rotate(-45deg);
}
#faq ul li input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  touch-action: manipulation;
}
#faq ul li input[type=checkbox]:checked ~ h2 {
  color: #000;
}
#faq ul li input[type=checkbox]:checked ~ p {
  /*margin-top: 0;*/
  max-height: 0;
  transition: .3s;
  opacity: 0;
  /*transform: translate(0, 50%);*/
}
#faq ul li input[type=checkbox]:checked ~ i:before {
  transform: translate(2px, 0) rotate(45deg);
}
#faq ul li input[type=checkbox]:checked ~ i:after {
  transform: translate(-2px, 0) rotate(-45deg);
}

/* конец аккордиона */

.reviews {
	display: grid;
	justify-items: center;
	grid-template-columns: repeat(2, 1fr);
	gap: 46px;
}

.reviews__h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 82px;
	margin-bottom: 60px;
	font-weight: normal;
}

.reviews__block {
	width: 617px;
	height: 310px;
	background-color: #f7f7f7;
	border-radius: 20px;
	padding: 50px;
	margin-bottom: 100px;
}
.img-block-img {
	display: flex;
	justify-content: space-between;
}

.reviews__block-h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
}

.img__block-btn p {
	font-family: 'Montserrat', sans-serif;
	margin-top: 10px;
}

.rev__btn1 {
	width: 250px;
	height: 50px;
	background-color: #f17b00;
	margin-top: 20px;
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
}
.rev__btn2 {
	width: 250px;
	height: 50px;
	background-color: #f17b00;
	margin-top: 20px;
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
}
.rev__btn3 {
	width: 250px;
	height: 50px;
	background-color: #f17b00;
	margin-top: 20px;
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
}
.rev__btn4 {
	width: 250px;
	height: 50px;
	background-color: #f17b00;
	margin-top: 40px;
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 20px;
	cursor: pointer;
}

.promo {
	background-color: #1d1d1d;
	width: 100%;
	height: 713px;
	border-radius: 50px;
}

.promo__block {
	display: flex;
	gap: 53px;
	justify-content: center;
}

.promo__title {
	width: 391px;
	height: 407px;
	background-color: #2d2d2d;
	margin-top: 153px;
	border-radius: 20px;
	padding: 35px;
}
.promo__title:hover {
	box-shadow: rgba(241, 240, 240, 0.56) 0px 22px 70px 4px;
}
.promo__img {
	display: flex;
	justify-content: flex-end;
}

.promo__text-h3 {
	font-family: 'Montserrat', sans-serif;
	font-size: 26px;
	color: #ffffff;
	margin-top: 55px;
}

.promo__text-p {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	color: #a4a4a4;
	margin-top: 20px;
}

.footer {
	background-color: #1d1d1d;
	border-top-left-radius: 50px;
	border-top-right-radius: 50px;
}

.footer__hr {
	border: 1px solid #313131;
	margin-top: 30px;
}

.footer__up {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.footer__tel p {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	color: #838688;
}

.footer__tel a {
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
	color: #ffffff;
	text-decoration: none;
}

.footer__email p {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	color: #838688;
}

.footer__email a {
	font-family: 'Montserrat', sans-serif;
	font-size: 25px;
	color: #ffffff;
	text-decoration: none;
}

.footer__icon {
	display: flex;
	gap: 10px;
	margin-top: 8px;
}
.footer__messenger p {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	color: #838688;
}

.footer__center {
	display: flex;
	justify-content: center;
}

.footer__menu ul {
	display: flex;
	justify-content: space-between;
	gap: 70px;
	margin-top: 40px;
	list-style: none;
}

.footer__menu a {
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	color: #fff;
	font-size: 18px;
}

.footer__down {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.down__footer {
	color: #5a5a5a;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
}

.down__footer a {
	color: #5a5a5a;
}

@keyframes bouncing {
	0% {
		bottom: 0;
	}
	100% {
		bottom: 50px;
	}
}

.down__btn a {
	animation: bouncing 0.6s cubic-bezier(0.1, 0.25, 0.1, 1) 0s infinite alternate
		both;
	border-radius: 2px;
	position: relative;
}

.meta {
	margin-top: 86px;
	margin-left: 219px;
}
.meta__h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 82px;
	max-width: 1100px;
	font-weight: normal;
}
.meta__p {
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	max-width: 560px;
	padding-top: 0px;
}
.meta__body {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	gap: 300px;
	margin-top: 70px;
	margin-bottom: 30px;
}
.form__meta {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.form__meta input {
	width: 516px;
}
.meta__btn {
	font-family: 'Montserrat', sans-serif;
	width: 516px;
	height: 78px;
	padding: 10px;
	margin-top: 15px;
	border-radius: 10px;
	border: solid 1px #d3d3d3;
	background-color: #f17b00;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
}
.meta__form-text {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color: #9b9d9d;
	text-align: center;
	margin-top: 15px;
	max-width: 512px;
}
.meta__form-text a {
	text-decoration: none;
	color: #000;
}

.meta__img{
	border: 6px solid #000;
	border-radius: 5px;
	margin-top: -160px;
}


.btn__popup{
	font-family: 'Montserrat', sans-serif;
	width: 390px;
	height: 78px;
	padding: 10px;
	margin-top: 15px;
	border-radius: 10px;
	border: solid 1px #d3d3d3;
	background-color: #f17b00;
	color: #000;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
}