/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */


/* #Site Styles
================================================== */
:root {
	--width-base: 1639px;
	--font-size-medium: 18px;
	--font-size-base: 16px;
	--color-white: #fff;
	--color-black: #000;
	--color-black-100: #4e4e4e;
	--color-primary: #414650;
	--color-secondary: #dc082c;
	--color-red: #f02e4f;
	--color-gray: #efefef;
	--color-gray-100: #707070;
	--color-gray-200: #ccc;
	--color-gray-300: #9d9d9d;
	--color-gray-400: #afadad;
	--color-gray-500: #7c7c7c;
	--color-gray-600: #62666e;
	--color-blue: #005a7c;
	--color-light-blue: #3793b6;
	--color-blue-100: #015a7c;
	--color-blue-200: #d8e3e8;
	--color-blue-300: #50a2c1;
	--color-blue-400: #407386;
	--color-blue-500: #c2d7e3;
	--font-family-base: 'Hanken Grotesk', sans-serif;
	--font-family-helvetica: 'Helvetica Neue', sans-serif;
	--font-family-icon: 'icomoon', sans-serif;
	--font-size-h1: 34px;
	--font-size-h2: 28px;
	--font-size-h3: 24px;
	--font-size-h4: 20px;
	--font-size-h5: 16px;
	--font-size-h6: 16px;
	--duration: all 0.25s ease-in-out;
	--line-decoration: none;
}

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,
body { font-family: var(--font-family-base), sans-serif; font-size: 16px; font-weight: 400; line-height: 1.62; color: var(--color-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { background-color: var(--color-white); }
input,
select,
textarea { padding: 17px 15px; width: 100%; font-family: var(--font-family-base), sans-serif; font-size: 14px; font-style: italic; color: var(--color-black); border: none; border-radius: 4px; background-color: var(--color-black); }
input::placeholder,
textarea::placeholder { color: var(--color-black); }
textarea { height: 120px; resize: none; }
label { margin-bottom: 5px; display: block; font-size: var(--font-size-base); font-weight: 700; }
img { display: block; max-width: 100%; }
ul,
li { list-style: none; }
:focus { outline: none; }
a { display: inline-block; text-decoration: var(--line-decoration); color: var(--color-secondary); transition: var(--duration); }
a:focus,
a:hover { text-decoration: underline; }
p { margin-bottom: 20px; }
h1,
h2,
h3,
h4,
h5,
h6 { margin-bottom: 20px; font-family: var(--font-family-base), sans-serif; font-weight: 700; line-height: 1.2; color: var(--color-blue); }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }
.button { padding: 15px 14px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-family-base), sans-serif; font-size: 16px; font-weight: 900; text-transform: uppercase; text-decoration: var(--line-decoration); color: var(--color-white); background-color: var(--color-secondary); transition: var(--duration); cursor: pointer; }
.button:focus,
.button:hover { text-decoration: var(--line-decoration); background-color: var(--color-red); }
.button i { margin-left: 36px; font-size: 14px; vertical-align: middle; }

/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.center { margin: 0 auto; position: relative; max-width: 1200px; }
.centered { padding-right: 15px; padding-left: 15px; }

/* ### wrapper ### */
.wrapper { padding-top: 73px; position: relative; display: block; width: 100%; min-height: 100%; overflow: clip; }

/* ### header ### */
.header { padding-top: 10px; padding-bottom: 10px; position: fixed; top: 0; left: 0; z-index: 15; width: 100%; background-color: var(--color-white); transition: var(--duration); }
.header-holder { display: flex; align-items: flex-end; justify-content: space-between; }
.header-left { display: flex; }
.header-logo { position: relative; z-index: 1; width: 100px; transition: var(--duration); }
.header-logo img { width: 100%; }
.header-menu ul { width: 100%; }
.header-menu li { margin-bottom: 10px; }
.header-menu li a { font-family: var(--font-family-helvetica), sans-serif; font-size: var(--font-size-medium); letter-spacing: -0.013rem; text-decoration: var(--line-decoration); color: var(--color-primary); }
.header-menu li a:focus,
.header-menu li a:hover { color: var(--color-secondary); }
.header-name { display: none; }

/* ### mobileMenu ### */
.mobileMenu { position: absolute; top: 50%; right: 15px; z-index: 15; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background-color: transparent; transform: translateY(-50%); cursor: pointer; }
.mobileMenu span { position: relative; width: 26px; height: 4px; border-radius: 5px; background: var(--color-black); transition: all 0.3s; }
.mobileMenu span:before,
.mobileMenu span:after { position: absolute; left: 0; width: 100%; height: 4px; border-radius: 5px; background-color: var(--color-black); transition: all 0.3s; content: ''; }
.mobileMenu span:before { top: -9px; }
.mobileMenu span:after { bottom: -9px; }
.mobileMenu.active span { background: none; }
.mobileMenu.active span:before { top: auto; transform: rotate(45deg); }
.mobileMenu.active span:after { bottom: auto; transform: rotate(-45deg); }

/* ### hero ### */
.hero { margin-bottom: 50px; position: relative; }
.hero-image { width: 100%; height: 250px; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-content { margin-top: -172px; margin-left: auto; padding: 18px; position: relative; z-index: 1; width: 100%; max-width: 903px; font-size: 18px; font-weight: 300; color: var(--color-white); background-color: var(--color-blue); }
.hero h1 { margin-bottom: 12px; color: inherit; }
.hero .button { font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.hero .button i { margin-left: 35px; }

/* ### services ### */
.services { margin-bottom: 50px; }

/* ### card-services ### */
.card-services { margin-bottom: 25px; display: flex; flex-direction: column; text-decoration: var(--line-decoration); border: solid 1px var(--color-gray-200); }
.card-services:focus,
.card-services:hover { text-decoration: none; }
.card-services-image { position: relative; }
.card-services-image img { width: 100%; }
.card-services-lead { padding: 10px 15px; position: absolute; top: 0; right: 0; font-weight: 800; letter-spacing: 0.094rem; text-transform: uppercase; color: var(--color-white); background-color: var(--color-light-blue); transition: var(--duration); }
.card-services-text { padding: 25px 20px 0; }
.card-services h2 { margin-bottom: 11px; color: var(--color-secondary); }
.card-services h3 { font-weight: 600; }
.card-services ul { margin-bottom: 25px; }
.card-services li { padding: 2px 0; font-weight: 500; border-bottom: dotted 1px var(--color-blue-400); }
.card-services li:first-of-type { border-top: dotted 1px var(--color-blue-400); }
.card-services li a { color: var(--color-primary); }
.card-services-bottom { margin-top: auto; padding: 0 25px 20px; }
.card-services-bottom .button { width: 100%; }
.card-services li a:focus,
.card-services li a:hover { text-decoration: none; color: var(--color-red); }

/* ### review ### */
.review { padding-top: 40px; padding-bottom: 30px; color: var(--color-white); background-color: var(--color-primary); }
.review-holder { margin: 0 auto; position: relative; max-width: 777px; text-align: center; }
.review-text { margin-bottom: 25px; font-size: 25px; font-style: italic; line-height: 1.34; }
.review-name { font-weight: 700; letter-spacing: 0.094rem; text-transform: uppercase; }
.review-name span { color: var(--color-gray-300); }
.review .swiper-pagination { margin-top: 26px; position: relative; }
.review .swiper-pagination-bullet { opacity: 1; width: 10px; height: 10px; background-color: var(--color-gray-400); }
.review .swiper-pagination-bullet-active { background-color: var(--color-secondary); }

/* ### intro ### */
.intro { padding-top: 50px; padding-bottom: 50px; }
.intro-block { margin-bottom: 30px; }
.intro-photo { margin-bottom: 18px; display: block; }
.intro-photo img { width: 100%; }
.intro h2 a { text-decoration: var(--line-decoration); color: var(--color-blue); }
.intro h2 a:focus,
.intro h2 a:hover { color: var(--color-secondary); }
.intro-black-date { margin-bottom: 15px; font-size: 15px; text-transform: uppercase; color: var(--color-secondary); }
.intro-block-text { margin-bottom: 33px; max-width: 510px; }
.intro-block-text p:last-of-type { margin-bottom: 0; }
.intro-image { margin-bottom: 20px; }
.intro-image img { width: 100%; }
.intro-right { position: relative; }
.intro-content { line-height: 1.72; }
.intro h3 { margin-bottom: 10px; font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--color-secondary); }
.intro-content h2 { margin-bottom: 10px; }
.intro-btn { margin-top: 20px; }

/* ### brand ### */
.brand { margin-bottom: 50px; padding-top: 30px; }
.brand-logo img { width: 100%; }

/* ### banner ### */
.banner { position: relative; display: flex; align-items: flex-end; min-height: 250px; }
.banner h1 { position: relative; z-index: 1; font-family: var(--font-family-helvetica), sans-serif; font-weight: 700; color: var(--color-white); }
.banner-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.banner-image img { width: 100%; height: 100%; object-fit: cover; }

/* ### info ### */
.info { padding-top: 50px; padding-bottom: 50px; }
.info-left { margin-bottom: 40px; }
.info-item:not(:last-of-type) { margin-bottom: 30px; padding-bottom: 30px; border-bottom: solid 1px var(--color-blue-500); }
.info-heading { margin-bottom: 30px; font-size: 18px; line-height: 1.6; }
.info h2 { font-size: 30px; }
.info-heading p:last-of-type { margin-bottom: 0; }
.info p span { color: var(--color-secondary); }
.info-list { margin-top: 34px; }
.info-list li { padding-left: 57px; position: relative; }
.info-list li:before { position: absolute; top: 14px; left: 26px; width: 9px; height: 9px; border-radius: 100%; background-color: var(--color-blue); content: ''; pointer-events: none; }
.info-process { margin-bottom: 40px; padding: 20px 15px; font-size: 18px; font-weight: 500; line-height: 1.5; background-color: var(--color-blue-200); }
.info-process-text { margin-bottom: 25px; }
.info-process h5 { margin-bottom: 10px; font-size: 22px; }
.info-process-right { position: relative; }
.info-process-right:before { position: absolute; top: -13px; left: 0; width: 100%; height: 1px; background-color: var(--color-white); content: ''; pointer-events: none; }
.info-process-btn .button { justify-content: space-between; min-width: 277px; font-size: 16px; font-weight: 800; }
.info h4 { margin-bottom: 31px; padding-left: 95px; position: relative; font-family: var(--font-family-helvetica), sans-serif; font-weight: 700; letter-spacing: 0.219rem; color: var(--color-secondary); }
.info h4:before { position: absolute; top: 9px; left: 0; width: 72px; height: 2px; background-color: var(--color-secondary); content: ''; pointer-events: none; }
.info h3 { margin-bottom: 10px; }
.info h3 span { font-weight: 500; }
.info-table-head { padding: 14px 0 15px; display: grid; grid-column-gap: 15px; grid-template-columns: repeat(4, 1fr); font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: 1px; text-transform: uppercase; border-top: solid 1px var(--color-primary); border-bottom: solid 1px var(--color-primary); }
.info-table-text { padding: 15px 0; display: grid; grid-column-gap: 15px; grid-template-columns: repeat(4, 1fr); font-size: 14px; border-bottom: solid 1px var(--color-gray-100); }
.info-table-text span { color: var(--color-secondary); }
.info-details { margin-bottom: 30px; padding: 20px 15px; color: var(--color-white); background-color: var(--color-blue-100); }
.info-details h6 { margin-bottom: 10px; letter-spacing: 0.094rem; text-transform: uppercase; color: inherit; }
.info-details ul { margin-top: 10px; margin-bottom: 20px; }
.info-details li { margin-bottom: 17px; padding-left: 50px; position: relative; font-weight: 500; }
.info-details li span { position: absolute; top: -2px; left: 3px; display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; font-size: 16px; font-weight: 800; border: solid 1px var(--color-gray-100); border-radius: 100%; background-color: var(--color-blue-300); }
.info-details .button { justify-content: space-between; width: 100%; min-width: 276px; font-size: 16px; }
.info-partner { border: solid 1px var(--color-gray-100); }

/* ### footer container ### */
.footer { padding-top: 40px; padding-bottom: 50px; font-weight: 300; color: var(--color-white); background-color: var(--color-primary); }
.footer a { text-decoration: var(--line-decoration); color: var(--color-white); }
.footer a:focus,
.footer a:hover { text-decoration: underline; }
.footer-top { margin-bottom: 14px; padding-bottom: 30px; border-bottom: solid 1px var(--color-gray-100); }
.footer-column:not(:last-of-type) { margin-bottom: 40px; }
.footer-title { margin-bottom: 10px; font-weight: 600; letter-spacing: 0.094rem; text-transform: uppercase; }
.footer address { margin-bottom: 15px; font-size: 17px; font-style: normal; }
.footer-action { font-size: 17px; }
.footer-links li { margin-bottom: 2px; padding-left: 18px; position: relative; }
.footer-links li:before { position: absolute; top: 13px; left: 1px; width: 3px; height: 2px; background-color: var(--color-secondary); content: ''; }
.footer-social { margin-bottom: 10px; padding-top: 1px;}
.footer-social a {font-family: var(--font-family-base), sans-serif; padding-left: 10px; position: relative; letter-spacing: 0.031rem; }
.footer-social a:before { position: absolute; top: -1px; left: -1px; width: 25px; height: 25px; border-radius: 3px; }
.footer-brand-partner { margin-bottom: 10px; }
.footer-copyright { font-weight: 400; }
.footer-copyright p:last-of-type { margin-bottom: 0; }

/* #Media Queries
================================================== */
@media only screen and (max-width: 767px) {
	.header-menu { padding: 100px 15px 50px; position: fixed; top: 0; left: 0; z-index: 0; opacity: 0; visibility: hidden; width: 100%; height: 100vh; background-color: var(--color-white); overflow-y: scroll; transition: var(--duration); }
	.header.is-active .header-menu { opacity: 1; visibility: visible; }
}

@media only screen and (min-width: 768px) {
	:root {
		--font-size-h1: 46px;
		--font-size-h2: 40px;
	}
	.button { font-size: 18px; letter-spacing: 0.113rem; }
	.button i { margin-left: 36px; font-size: 21px; vertical-align: middle; }
	.header { padding-bottom: 15px; }
	.header-holder { margin: 0 auto; max-width: 1483px; }
	.header-left { align-items: flex-end; }
	.header-logo { width: 91px; }
	.header-name { margin-bottom: -4px; margin-left: 13px; display: block; font-family: var(--font-family-helvetica), sans-serif; font-size: 18px; line-height: 1; letter-spacing: -0.013rem; }
	.header-name p:last-of-type { margin-bottom: 0; }
	.header-name span { font-size: 16px; font-weight: 100; font-style: italic; }
	.header-menu { display: flex; }
	.header-menu ul { display: flex; }
	.header-menu li { margin-bottom: 0; }
	.header-menu li:not(:last-of-type) { margin-right: 39px; }
	.mobileMenu { display: none; }
	.hero { margin-bottom: 100px; }
	.hero-image { height: 350px; }
	.services { margin-bottom: 80px; display: grid; grid-row-gap: 15px; grid-column-gap: 15px; grid-template-columns: repeat(2, 1fr); }
	.card-services { margin-bottom: 0; }
	.review { padding-top: 68px; padding-bottom: 48px; }
	.review-text { margin-bottom: 32px; font-size: 45px; }
	.review .swiper-pagination { margin-top: 76px; }
	.review .swiper-pagination-bullet { width: 14px; height: 14px; }
	.review-holder:before,
	.review-holder:after { position: absolute; top: 0; left: 0; font-family: var(--font-family-icon); font-size: 35px; color: var(--color-gray-600); content: '\e901'; }
	.review-holder:after { right: 0; left: unset; transform: rotate(180deg); }
	.intro { padding-top: 50px; padding-bottom: 130px; display: flex; justify-content: space-between; }
	.intro-block { margin-bottom: 0; width: 45%; }
	.intro-right { width: 50%; }
	.intro-right:before { position: absolute; top: 1px; left: -20px; width: 100%; height: 100%; border-left: 1px dotted var(--color-blue-400); content: ''; pointer-events: none; }
	.intro-btn .button { justify-content: space-between; min-width: 288px; }
	.banner { min-height: 337px; }
	.banner h1 { margin-bottom: 21px; font-size: 60px; }
	.info { padding-top: 99px; padding-bottom: 119px; display: flex; justify-content: space-between; }
	.info-left { margin-bottom: 0; width: 55%; }
	.info-left { margin-bottom: 0; width: 55%; }
	.info-right { margin-top: 15px; width: 40%; }
	.info-details h6 { margin-bottom: 31px; }
	.info-details ul { margin-top: 36px; margin-bottom: 46px; }
	.info-details li { padding-left: 61px; font-size: 18px; }
	.footer-top { margin-bottom: 14px; padding-bottom: 60px; display: grid; grid-column-gap: 18px; grid-template-columns: repeat(3, 1fr); }
	.footer-column:not(:last-of-type) { margin-bottom: 40px; }
	.footer-title { margin-bottom: 30px; }
	.footer address { margin-bottom: 29px; }
	.footer-brand-partner { margin-top: 11px; margin-bottom: 24px; }
}

@media only screen and (min-width: 1025px) {
	.wrapper { padding-top: 154px; }
	.header { padding-top: 30px; padding-bottom: 30px; }
	.header-logo { width: 177px; }
	.header-name { margin-left: 33px; font-size: 25px; }
	.header-name span { font-size: 20px; }
	.header-menu { margin-bottom: -6px; padding-right: 27px; }
	.header.header-sticky { padding-top: 20px; padding-bottom: 30px; }
	.header.header-sticky .header-logo { width: 120px; }
	.hero { margin-bottom: 121px; }
	.hero-image { height: 100%; }
	.hero-content { margin-top: -169px; padding: 34px 52px 32px; font-size: 24px; }
	.hero p:last-of-type { margin-bottom: 44px; }
	.hero .button { min-width: 349px; font-size: 22px; letter-spacing: 2px; }
	.hero .button i { margin-left: 55px; }
	.services { margin-bottom: 121px; }
	.review-holder:before,
	.review-holder:after { top: -10px; left: -114px; font-size: 53px; }
	.review-holder:after { top: -11px; right: -107px; left: unset; }
	.intro-block { margin-bottom: 0; width: 32.7%; }
	.intro-right { margin-top: 5px; display: flex; align-items: flex-start; justify-content: space-between; width: 57.9%; }
	.intro-right:before { left: -45px; }
	.intro-image { margin-bottom: 0; width: 46%; }
	.intro-content { margin-top: 30px; width: 49%; }
	.info-left { width: 66.4%; }
	.info-item:not(:last-of-type) { margin-bottom: 97px; padding-bottom: 47px; }
	.info h2 { margin-bottom: 51px; font-size: 50px; }
	.info-heading { margin-bottom: 51px; font-size: 22px; }
	.info-process { margin-bottom: 80px; padding: 37px 93px 47px 33px; display: flex; justify-content: space-between; font-size: 20px; }
	.info-process-text { margin-bottom: 0; width: 39%; }
	.info-process h5 { margin-bottom: 33px; font-size: 26px; }
	.info-process-right { position: relative; width: 42.7%; }
	.info-process-right:before { top: 0; left: -49px; width: 2px; height: calc(100% + 13px); }
	.info-process-btn { margin-top: 42px; }
	.info h3 { margin-bottom: 46px; font-size: 40px; }
	.info-table-head { font-size: 20px; }
	.info-table-text { padding: 40px 0 23px; font-size: 22px; }
	.info-right { width: 30.25%; }
	.footer { padding-top: 105px; padding-bottom: 115px; }
	.footer-top { padding-bottom: 104px; grid-template-columns: repeat(4, 1fr); }
}

@media only screen and (min-width: 1201px) {
	.hero { margin-bottom: 158px; }
	.services { grid-template-columns: repeat(3, 1fr); }
	.card-services-lead { padding: 10px 47px; }
	.card-services ul { margin-bottom: 44px; }
	.card-services li { font-size: 24px; }
	.card-services-bottom .button { padding-left: 41px; justify-content: space-between; min-height: 60px; }
	.review-holder:after { left: -134px; }
	.review-holder:after { right: -127px; left: unset; }
	.intro-content { margin-top: 72px; }
	.intro h3 { margin-bottom: 30px; }
	.intro-content h2 { margin-bottom: 50px; }
	.intro-btn { margin-top: 89px; }
	.brand { margin-bottom: 62px; padding-top: 50px; }
	.banner h1 { margin-left: 80px; font-size: 100px; }
}

@media only screen and (min-width: 1441px) {
	.wrapper { padding-top: 154px; }
	.services { grid-column-gap: 32px; }
	.card-services-text { padding: 27px 44px 16px; }
	.card-services-bottom { padding: 0 44px 45px; }
	.review-holder:before { left: -134px; }
	.intro-right:before { left: -70px; }
	.info-details { padding: 38px 125px 38px 37px; }
}

@media only screen and (min-width: 1780px) {
	.centered { padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); }
	.card-services-bottom .button { min-height: 81px; font-size: 22px; }
}