* {
	box-sizing:border-box
}

:root {
	--blue:#3d93bd;
	--blue-light:#59b1df;
	--blue-deep:#153b73;
	--orange:#ff7a00;
	--text:#4b4b4b;
	--line:#dbe5ec
}

html {
	scroll-behavior:smooth
}

body {
	margin:0;
	font-family:'Montserrat',Arial,Helvetica,sans-serif;
	color:var(--text);
	background:#fff
}

a {
	text-decoration:none;
	color:inherit
}

button,input,textarea {
	font:inherit
}

.container {
	width:min(1420px,calc(100% - 80px));
	margin-inline:auto
}

.site-header {
	background:#fff;
	box-shadow:0 2px 14px rgba(20,60,100,.08);
	position:relative;
	z-index:10
}

.header-inner {
	min-height:116px;
	display:flex;
	align-items:center;
	gap:34px;
	padding:12px 0
}

.brand {
	width:132px;
	height:92px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:none
}

.brand img {
	width:100%;
	height:100%;
	object-fit:contain
}

.header-info {
	border-left:1px solid #d9e2ea;
	padding-left:28px;
	display:flex;
	flex-direction:column;
	gap:4px;
	color:var(--blue-deep);
	font-size:14px;
	line-height:1.35;
	min-width:420px
}

.header-info strong {
	font-size:18px;
	line-height:1.2
}

.header-info a {
	color:#2776a9
}

.header-phones {
	margin-left:auto;
	display:grid;
	grid-template-columns:repeat(2,max-content);
	gap:10px 34px;
	color:var(--blue-deep);
	font-size:17px;
	font-weight:700
}

.header-phones a {
	white-space:nowrap;
	transition:color .2s ease
}

.header-phones a:hover {
	color:var(--blue-light)
}

.hero {
	min-height:660px;
	position:relative;
	background-image:url('../images/hero-bg.png');
	background-size:cover;
	background-position:center;
	overflow:hidden
}

.hero-overlay {
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(0,28,58,.72) 0%,rgba(0,28,58,.50) 28%,rgba(0,28,58,.18) 55%,rgba(0,28,58,0) 78%,rgba(0,28,58,0) 100%);
	pointer-events:none
}

.hero-inner {
	min-height:660px;
	display:flex;
	align-items:center;
	position:relative;
	z-index:1
}

.hero-copy {
	max-width:900px;
	color:#fff;
	padding:80px 0
}

.hero h1,.hero p,.feature {
	color:#fff
}

.hero h1 {
	margin:0;
	font-size:clamp(46px,5vw,74px);
	line-height:1.05;
	font-weight:800;
	letter-spacing:-1px;
	text-shadow:0 2px 12px rgba(0,20,40,.35)
}

.hero p {
	font-size:clamp(24px,2.2vw,34px);
	margin:28px 0 0;
	font-weight:500;
	text-shadow:0 2px 10px rgba(0,20,40,.28)
}

.features {
	display:flex;
	gap:58px;
	margin-top:48px
}

.feature {
	display:flex;
	align-items:center;
	gap:12px;
	font-size:17px;
	font-weight:600;
	line-height:1.2;
	text-shadow:0 2px 8px rgba(0,20,40,.25)
}

.feature-icon {
	width:54px;
	height:54px;
	background:#fff;
	border-radius:50%;
	display:grid;
	place-items:center;
	flex:none;
	box-shadow:0 3px 10px rgba(0,30,70,.12)
}

.feature-icon svg {
	width:33px;
	height:33px;
	fill:none;
	stroke:var(--blue-deep);
	stroke-width:3;
	stroke-linecap:round;
	stroke-linejoin:round
}

.order-section {
	background:#fff;
	padding:96px 0
}

.order-layout {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:76px;
	align-items:center
}

.eyebrow {
	margin:0 0 12px;
	color:#4c99c4;
	font-size:15px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:1.5px
}

.order-copy h2 {
	margin:0;
	color:var(--blue-deep);
	font-size:42px;
	line-height:1.12;
	font-weight:700
}

.price {
	color:#198cc9;
	font-size:27px;
	font-weight:700;
	margin-top:22px
}

.delivery-note {
	margin-top:42px;
	border:1px solid #b8cddd;
	border-radius:9px;
	padding:28px 30px;
	color:var(--blue-deep);
	background:#fff
}

.delivery-note h3 {
	margin:0 0 24px;
	font-size:21px;
	line-height:1.4
}

.delivery-note h4 {
	margin:0 0 22px;
	font-size:20px;
	line-height:1.45
}

.delivery-note p {
	margin:0;
	font-size:16px;
	line-height:1.7;
	color:#555
}

.order-form {
	background:#f7fbfe;
	border:1px solid #d6e4ef;
	border-radius:10px;
	padding:36px 38px;
	box-shadow:0 10px 32px rgba(28,82,119,.08)
}

.order-form h3 {
	margin:0 0 26px;
	color:var(--blue-deep);
	font-size:25px;
	font-weight:700
}

.order-form label {
    color: var(--blue-deep);
    font-size: 14px;
    font-weight: 600;
}

.order-form .wpcf7-form-control-wrap {
    display: block;
    margin-top: 7px;
}

.order-form input,
.order-form textarea {
    display: block;
    width: 100%;
    border: 1px solid #d6e0e8;
    border-radius: 4px;
    background: #fff;
    padding: 12px 13px;
    color: #222;
    outline: none;
    transition: border .2s, box-shadow .2s;
    box-sizing: border-box;
}

.order-form input {
    height: 48px;
}

.order-form textarea {
    height: 110px;
    resize: vertical;
}

.order-form input:focus,
.order-form textarea:focus {
    border-color: #5aadd8;
    box-shadow: 0 0 0 3px rgba(86, 176, 223, .12);
}

.order-form .phone-mask {
    letter-spacing: 0.3px;
}

.order-form .phone-mask::placeholder {
    color: #9aa8b3;
    opacity: 1;
}

.order-form .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 20px;
}

.order-form .form-grid p {
	margin: 0;
}

.order-form .form-grid p:last-child {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .order-form .form-grid {
        grid-template-columns: 1fr;
    }

    .order-form .form-grid .full {
        grid-column: auto;
    }
}

.order-form input[type="submit"] {
	border:0;
	background:var(--blue-deep);
	color:#fff;
	border-radius:5px;
	font-weight:700;
	cursor:pointer;
	transition:transform .2s ease,background .2s ease;
	margin-top:22px;
	width:230px;
	height:50px;
	font-size:16px
}

.order-form input[type="submit"]:hover {
	transform:translateY(-2px);
	background:#214d88
}

.form-status {
	min-height:18px;
	margin:10px 0 0;
	color:#3285ae;
	font-size:14px
}

.site-footer {
	background:var(--blue);
	color:#fff;
	padding:58px 0 54px
}

.footer-grid {
	display:grid;
	grid-template-columns:1fr 1.05fr 1fr;
	gap:70px;
	align-items:start
}

.footer-col {
	font-size:16px;
	line-height:1.65
}

.footer-col h3 {
	font-size:20px;
	margin:0 0 6px;
	font-weight:700
}

.footer-col p {
	margin:20px 0 0
}

.footer-col a {
	transition:opacity .2s ease
}

.footer-col a:hover {
	opacity:.78
}

.footer-hours {
	font-size:18px;
	font-weight:700;
	margin-top:0!important
}

.footer-brand {
	text-align:left
}

.footer-brand img {
	width:132px;
	height:92px;
	object-fit:contain;
	margin:-18px auto 2px
}

.footer-brand p {
	margin:0;
	font-size:15px
}

.footer-payment {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	gap:28px;
	margin-top:30px;
	color:#fff
}

.payment-mastercard {
	position:relative;
	display:inline-flex;
	align-items:center;
	padding-left:42px;
	font-size:15px;
	font-weight:700
}

.payment-mastercard i {
	position:absolute;
	width:28px;
	height:28px;
	border-radius:50%;
	top:50%;
	transform:translateY(-50%)
}

.payment-mastercard i:first-child {
	left:0;
	background:#ed1b2f
}

.payment-mastercard i:nth-child(2) {
	left:16px;
	background:#f6c400;
	mix-blend-mode:screen
}

.payment-mastercard b {
	position:relative;
	z-index:1;
	font-weight:700
}

.payment-visa {
	font-size:25px;
	font-weight:800;
	font-style:italic;
	letter-spacing:-1px
}

.footer-company {
	padding-top:4px
}

.footer-phones {
	display:flex;
	flex-direction:column;
	gap:3px;
	font-size:17px;
	font-weight:600
}

.footer-email {
	display:inline-block;
	margin-top:24px
}

.footer-company p {
	margin-top:18px
}

.footer-shop {
	font-weight:600
}

.to-top {
	position:fixed;
	right:28px;
	bottom:28px;
	width:58px;
	height:58px;
	display:grid;
	place-items:center;
	border:0;
	border-radius:50%;
	background:var(--blue-deep);
	color:#fff;
	cursor:pointer;
	z-index:20;
	box-shadow:0 6px 18px rgba(0,0,0,.18);
	transition:transform .2s ease,background .2s ease,box-shadow .2s ease
}

.to-top svg {
	width:24px;
	height:24px;
	fill:none;
	stroke:currentColor;
	stroke-width:2.4;
	stroke-linecap:round;
	stroke-linejoin:round
}

.to-top:hover {
	transform:translateY(-4px);
	background:#214d88;
	box-shadow:0 10px 24px rgba(0,0,0,.22)
}

.to-top:focus-visible {
	outline:3px solid rgba(255,255,255,.8);
	outline-offset:3px
}

@media(max-width:1024px) {
 	.container {
	 	width:min(940px,calc(100% - 40px))
	}
	.header-inner {
		gap:20px
	}
	.header-info {
		min-width:280px;
		padding-left:18px
	}
	.header-phones {
		font-size:14px;
		gap:7px 18px
	}
	.hero {
		min-height:620px
	}
	.hero-inner {
		min-height:620px
	}
	.order-layout {
		grid-template-columns:1fr;
		gap:45px
	}
	.order-copy {
		text-align:center
	}
	.delivery-note {
		text-align:left
	}
	.footer-grid {
		grid-template-columns:1fr 1fr;
		gap:45px
	}
	.footer-brand {
		order:3;
		grid-column:1/-1}
}

@media(max-width:767px) {
	.container {
		width:calc(100% - 28px)
	}
	.header-inner {
		min-height:96px;
		flex-wrap:wrap;
		padding:8px 0;
		gap:10px
	}
	.brand {
		width:74px;
		height:74px
	}
	.header-info {
		border-left:0;
		padding-left:0;
		min-width:0;
		flex:1;
		font-size:10px
	}
	.header-info strong {
		font-size:12px
	}
	.header-phones {
		width:100%;
		grid-template-columns:1fr 1fr;
		font-size:11px;
		gap:4px 12px;
		padding-left:84px
	}
	.hero {
		min-height:620px;
		background-position:62% center
	}
	.hero-overlay {
		background:linear-gradient(90deg,rgba(0,28,58,.78) 0%,rgba(0,28,58,.52) 42%,rgba(0,28,58,0) 82%)
	}
	.hero-inner {
		min-height:620px;
		align-items:flex-start
	}
	.hero-copy {
		padding:70px 0
	}
	.hero h1 {
		font-size:42px;
		max-width:560px
	}
	.hero p {
		font-size:23px
	}
	.features {
		gap:18px;
		flex-direction:column;
		margin-top:36px
	}
	.feature {
		font-size:16px
	}
	.feature-icon {
		width:45px;
		height:45px
	}
	.order-section {
		padding:58px 0
	}
	.order-copy {
		text-align:left
	}
	.order-copy h2 {
		font-size:34px
	}
	.price {
		font-size:23px
	}
	.delivery-note {
		padding:22px
	}
	.order-form {
		padding:24px 18px
	}
	.order-form .form-grid {
		grid-template-columns:1fr
	}
	.order-form .form-grid p:last-child {
		grid-column:auto
	}
	.footer-grid {
		grid-template-columns:1fr;
		gap:35px
	}
	.footer-brand {
		grid-column:auto;
		order:initial
	}
	.footer-payment {
		margin-top:24px
	}
	.to-top {
		right:14px;
		bottom:15px;
		width:54px;
		height:54px
	}
}