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

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


/* #Site Styles
================================================== */
:root {
	--width-base: 1680px;
	--white: #fff;
	--black: #000;
	--grey: #cacaca;
	--red: #bf1b2c;
    --primary: #242424;
	--base-duration: all 0.3s;
	--font-family-inter: 'Inter', sans-serif;
	--font-family-heading: 'Addington CF', sans-serif;
	--font-size-base: 24px;
	--line-height-base: 1.8;
	--line-height-heading: 1.3;
	--font-size-h1: 70px;
	--font-size-h2: 50px;
	--font-size-h3: 40px;
	--font-size-h4: 35px;
	--font-size-h5: 24px;
	--font-size-h6: 22px;
	--w-100: 100%;
	--h-100: 100%;
}

/* ### general ### */
* { margin: 0; padding: 0; box-sizing: border-box; }
html,
body { font-family: var(--font-family-inter); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--text-blue); }
body { background: var(--white); }
input,
select,
textarea { font-size: 22px; color: var(--white); width: var(--w-100); }

.form-input { position: relative; padding-bottom: 8px; }
.form-input .icon { position: absolute; top: 3px; right: 20px; }
.form-input .icon i { font-size: 15px; }
img { display: block; max-width: var(--w-100); border: 0; }
ul,
li { list-style: none; }
:focus { outline: none; }
a { display: inline-block; text-decoration: none; }
p { margin-bottom: 20px; }
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 { font-family: var(--font-family-heading); line-height: var(--line-height-heading); font-weight: 600; color: var(--primary); margin-bottom: 20px; }
h1,
.h1 { font-size: var(--font-size-h1); }
h2,
.h2 { font-size: var(--font-size-h2); }
h3,
.h3 { font-size: var(--font-size-h3); }
h4,
.h4 { font-size: var(--font-size-h4); }
h5,
.h5 { font-size: var(--font-size-h5); }
h6,
.h6 { font-size: var(--font-size-h6); }

/* ### global classes ### */
.centered { padding-right: calc((100% - var(--width-base)) / 2); padding-left: calc((100% - var(--width-base)) / 2); }
.button { font-family: var(--font-family-inter); background-color: var(--red); color: var(--white); border: 2px solid var(--red); border-radius: 5px; font-size: 20px; font-weight: 500; transition: var(--base-duration); padding: 10px 30px; }
.button:focus,
.button:hover { background-color: transparent; color: var(--red); }

.button.secondary { background-color: var(--white); border: 2px solid var(--white); color: var(--primary) }
.button.secondary:focus,
.button.secondary:hover { background-color: transparent; color: var(--white); }
.button-link { display: flex; justify-content: end; }


/* ### wrapper ### */
#wrapper { position: relative; overflow: hidden; display: block; width: var(--w-100); min-height: var(--h-100); padding-top: 144px; }

/* ### main container ### */
#mainCntr { width: var(--w-100); }

/* ### header container ### */
#headerCntr { padding: 25px 0 25px; position: fixed; top: 0; z-index: 5; width: var(--w-100); transition: var(--base-duration); background-color: var(--white); }
#headerCntr .headerBox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
#headerCntr .logo { width: 150px; position: relative; z-index: 13; }
#headerCntr .logo img { max-width: var(--w-100); }
#headerCntr.sticky { transform: translateY(-148px); }
#headerCntr .header-link { margin-right: 9px; }
#headerCntr.active { transform: translateY(0) !important; }


/* ### menu box ### */
.menuBox { display: flex; align-items: center; }
.menuBox ul { padding: 0; display: flex; }
.menuBox ul > li { margin-right: 50px; position: relative; list-style: none; transition: 0.3s; }
.menuBox ul > li > a { font-size: var(--font-size-base); padding: 10px 0; position: relative; font-family: var(--font-family-heading); color: var(--primary); text-decoration: none; transition: var(--base-duration); }
.menuBox ul > li > a:focus,
.menuBox ul > li > a:hover { color: var(--red); text-decoration: underline; }
.menuBox ul > li > a i { font-size: 8px; margin-left: 7px; }
.menuBox ul > li:last-child { margin-right: 0; padding-right: 0; }
.menuBox ul > li:hover ul { opacity: 1; visibility: visible; }
.menuBox ul > li:last-child { margin-right: 0; }
.menuBox ul > li > ul { display: block; position: absolute; margin-right: 0; background-color: var(--white); opacity: 0; visibility: hidden; width: 120px; transition: var(--base-duration); }
.menuBox ul > li > ul { padding-top: 20px; }
.menuBox ul > li > ul > li { margin-right: 0; margin-bottom: 10px; padding: 0 10px; }
.menuBox ul > li > ul a { padding: 0; }


/* ### mobileMenu ### */
.mobileMenu { position: absolute; top: 50%; right: 20px; z-index: 15; display: none; align-items: center; justify-content: center; width: 50px; height: 50px; background-color: var(--red); transform: translateY(-50%); transition: all 0.3s; cursor: pointer; overflow: hidden; }
.mobileMenu span { position: absolute; top: 50%; left: 50%; display: block; width: 30px; height: 2px; text-indent: -9999px; border-radius: 0; background: var(--white); transform: translateX(-50%) translateY(-50%); transition: 0.2s; }
.mobileMenu span:before,
.mobileMenu span:after { position: absolute; left: 0; display: block; width: 100%; height: 2px; border-radius: 0; background-color: var(--white); transition-duration: 0.2s, 0.2s; content: ''; }
.mobileMenu span:before { top: -7px; left: 0; }
.mobileMenu span:after { bottom: -7px; }
.mobileMenu.active span { left: 50%; background: none; }
.mobileMenu.active span:before,
.mobileMenu.active span:after { left: 0; transition-delay: 0s, 0.2s; }
.mobileMenu.active span:before { top: 0; transform: rotate(45deg); }
.mobileMenu.active span:after { bottom: 0; transform: rotate(-45deg); }



/* ### content container ### */
#contentCntr { width: 100%; }


/* ### banner ### */
.banner { padding-bottom: 45px; position: relative; display: flex; align-items: center; width: var(--w-100); min-height: 750px; }
.banner .image { position: absolute; top: 0; left: 0; z-index: -1; width: var(--w-100); height: var(--h-100); }
.banner .image:before { position: absolute; top: 0; left: 0; opacity: 0.6; width: var(--w-100); height: var(--h-100); background-color: var(--black); content: ''; }
.banner .image img { width: var(--w-100); object-fit: cover; height: var(--h-100); }
.banner .content { max-width: 1400px; position: relative; z-index: 1; margin: 0 auto; text-align: center; color: var(--white); }
.banner .content h1 { margin-bottom: 50px; color: var(--white); }
.banner .content h2 { color: var(--white); }
.banner .content p { max-width: 1000px; margin: 0 auto 50px; }
.banner.inner { min-height: 650px; }
.banner.inner .content p { max-width: 1600px; }


/* ### about ### */
.about { padding-top: 100px; padding-bottom: 120px; }
.about .wrap { max-width: 1300px; margin: 0 auto; }
.about .holder { display: flex; margin: 0 -25px; flex-wrap: wrap; }
.about .image { width: 50%; padding: 0 25px; position: relative; z-index: 2; margin-top: 50px; }
.about .image img { width: var(--w-100); height: var(--h-100); object-fit: cover; }
.about .image::before { background-color: var(--red); width: 90%; height: 95%; position: absolute; top: -45px; left: -35px; content: ''; z-index: -1; }
.about .content { width: 50%; padding: 0 25px; }
.about h3 { color: var(--red); }
.about p { margin-bottom: 40px; }



/* ### value ### */
.value { margin-bottom: 100px; }
.value h2 { margin-bottom: 80px; text-align: center; }
.value .holder { display: grid; grid-template-columns: auto auto auto; gap: 40px; }
.value .item { background-color: var(--red); padding: 30px; color: var(--white); text-align: center; }
.value .item .icon { margin-bottom: 40px; display: flex; justify-content: center; align-items: center; }
.value .item .title { font-size: 30px; font-family: var(--font-family-heading); font-weight: 600; margin-bottom: 20px; }
.value .wrap { max-width: 1200px; margin: 70px auto; text-align: center; }
.value .wrap h2 { margin-bottom: 40px; }



/* ### trust ### */
.trust { margin-bottom: 120px; }
.trust .holder { display: flex; }
.trust .image { width: 50%; position: relative; z-index: 1; }
.trust .image img { width: var(--w-100); height: var(--h-100); object-fit: cover; position: relative; z-index: 1; }
.trust .content { width: 50%; background-color: var(--red); color: var(--white); text-align: center; display: flex; align-items: center; margin: 50px 0 50px -10px; padding: 50px; }
.trust h3 { color: var(--white); margin-bottom: 30px; }
.trust p { margin-bottom: 50px; }


/* ### planning ### */
.planning { background-color: var(--primary); margin-bottom: 100px; text-align: center; color: var(--white); padding: 200px 0 80px 0; position: relative; }
.planning h4 {color: var(--white); margin-bottom: 30px; }
.planning p { margin-bottom: 50px; }
.planning .block { position: absolute; top: -50px; left: 50%; transform: translateX(-50%); background-color: var(--red); padding: 50px 30px; text-align: left; display: flex; justify-content: space-between; width: var(--w-100); max-width: 1200px; }
.planning .block h4 { width: 70%; margin-bottom: 0; }
.planning .block .link { width: 20%; text-align: right; }


/* ### connect ### */
.connect { padding-top: 100px; position: relative; width: var(--w-100); min-height: 750px; }
.connect .image { position: absolute; top: 0; left: 0; z-index: -1; width: var(--w-100); height: var(--h-100); }
.connect .image:before { position: absolute; top: 0; left: 0; opacity: 0.6; width: var(--w-100); height: var(--h-100); background-color: var(--black); content: ''; }
.connect .image img { width: var(--w-100); object-fit: cover; height: var(--h-100); }

.connect .wrap { max-width: 1400px; margin: 0 auto; }
.connect .holder { display: flex; flex-wrap: wrap; }
.connect .left { width: 50%; }
.connect .left img { width: var(--w-100); height: var(--h-100); object-fit: cover; }
.connect .right { width: 50%; background-color: var(--red); }
.connect .top { padding: 50px 50px 30px 50px; border-bottom: 1px solid var(--white); }
.connect .top li { display: flex; align-items: center; margin-bottom: 10px; }
.connect .top li a { color: var(--white); margin-left: 20px; font-size: 20px; }
.connect .bottom { padding: 50px 50px 30px 50px; }

.connect-form { margin-bottom: 30px; padding: 25px 20px; }
.connect-form-group { display: flex; flex-wrap: wrap; margin: 0 -20px; }
.connect-form-group .connect-form-field { width: 50%; padding: 0 20px; }
.connect-form-field { margin-bottom: 50px; }
.connect-form-field input { padding-bottom: 10px; background: transparent; border: 0; border-bottom: 1px solid var(--white); }
.connect-form-field textarea { padding: 0 0 15px 0; background: transparent; border: 0; border-bottom: 1px solid var(--white); }
.connect-form-field input::placeholder,
.connect-form-field textarea::placeholder { color: var(--white); }


/* ### story ### */
.story { padding-top: 100px; padding-bottom: 100px; text-align: center; }
.story .content { max-width: 1500px; margin: 0 auto; position: relative; padding: 15px 25px 2px 25px; }
.story .icon { position: absolute; top: 0; left: 0; }
.story .icon.second { top: unset; left: unset; bottom: 0; right: 0; }
.story .wrap { display: flex; flex-wrap: wrap; margin: 50px -25px 0; }
.story .item { position: relative; padding: 0 25px; margin-bottom: 60px; width: 33.33%; }
.story .item .image { position: relative; width: var(--w-100); height: var(--h-100); overflow: hidden; }
.story .item:hover img { transform: scale(1.05); }
.story .item img { transition: var(--base-duration); width: var(--w-100); height: var(--h-100); object-fit: cover; }
.story .item span { display: block; padding: 20px; color: var(--white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: 0.3s all ease-in; z-index: 2; }
.story .image:before { position: absolute; top: 0; left: 0; width: var(--w-100); height: var(--h-100); background-color: var(--red); content: ''; opacity: 0; visibility: hidden; transition: var(--base-duration); z-index: 1; }
.story .item:hover span { opacity: 1; visibility: visible; }
.story .item:hover .image:before { opacity: 0.75; visibility: visible; }


/* ### commitment ### */
.commitment { background-color: var(--red); padding-top: 80px; margin-bottom: 120px; position: relative; }
.commitment::before { position: absolute; bottom: 0; left: 0; width: var(--w-100); height: 200px; background-color: var(--white); content: ''; }
.commitment .holder { max-width: 1800px; margin: 0 auto; text-align: center; }
.commitment h2,
.commitment h3,
.commitment p { color: var(--white); }
.commitment h2 { margin-bottom: 30px; }
.commitment h3 { margin-bottom: 50px; }
.commitment .image { position: relative; z-index: 1; display: flex; justify-content: center; margin-top: 70px; box-shadow: 0 0 10px 2px rgba(0,0,0,0.75); }
.commitment .image img { width: var(--w-100); height: var(--h-100); object-fit: cover; }


/* ### features ### */
.features { margin-bottom: 100px; }
.features .holder { display: flex; flex-wrap: wrap; }
.features .image { width: 50%; }
.features .image img { width: var(--w-100); height: var(--h-100); object-fit: cover; }
.features .content { color: var(--white); width: 50%; background-color: var(--red); display: flex; align-items: center; padding: 50px; }
.features h2 { position: relative; color: var(--white); margin-bottom: 80px; }
.features h2::before { position: absolute; bottom: -20px; left: 0; width: var(--w-100); height: 2px; content: ''; background-color: var(--white); }
.features li { margin-bottom: 30px; } 
.features li .title { display: flex; font-size: 30px; line-height: 1.3; font-family: var(--font-family-heading); }
.features li img { margin-right: 10px; }



/* ### mission ### */
.mission { padding-top: 100px; padding-bottom: 100px; position: relative; display: flex; align-items: center; width: var(--w-100); min-height: 650px; margin-bottom: 80px; }
.mission .image { position: absolute; top: 0; left: 0; z-index: -1; width: var(--w-100); height: var(--h-100); }
.mission .image:before { position: absolute; top: 0; left: 0; opacity: 0.6; width: var(--w-100); height: var(--h-100); background-color: var(--black); content: ''; }
.mission .image img { width: var(--w-100); object-fit: cover; height: var(--h-100); }
.mission .content { max-width: 1400px; position: relative; z-index: 1; margin: 0 auto; background-color: var(--white); padding: 50px; box-shadow: 5px 4px 5px 1px rgba(0,0,0,0.75); }
.mission .content h2 { margin-bottom: 50px; text-align: center; }
.mission .content li { position: relative; margin-bottom: 20px; padding-left: 25px; }
.mission .content li::before { position: absolute; top: 15px; left: 0; width: 10px; height: 10px; background-color: var(--black); border-radius: 100%; content: ''; }


/* ### pricing ### */
.pricing { margin-bottom: 150px; color: var(--white); }
.pricing .holder { background-color: var(--red); padding: 80px 50px; }
.pricing h2 { color: var(--white); margin-bottom: 30px; }
.pricing em { display: block; font-family: var(--font-family-heading); font-size: 35px; margin-bottom: 30px; }


/* ### swiper-button ### */
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { display: none; }
.swiper-button-prev,
.swiper-button-next { width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; background-color: var(--black-bg); border-radius: var(--w-100); margin-top: -90px; transition: var(--base-duration); }
.swiper-button-prev:focus,
.swiper-button-next:focus,
.swiper-button-prev:hover,
.swiper-button-next:hover { background-color: var(--light-green); }
.swiper-button-prev { left: -35px; }
.swiper-button-next { right: -35px; }
.swiper-button-prev i,
.swiper-button-next i { color: var(--white); font-size: 16px; }
.swiper-button-prev i { transform: rotate(180deg); }


/* ### assist ### */
.assist { padding-top: 100px; padding-bottom: 150px; }
.assist .wrap { max-width: 1200px; margin: 0 auto; }
.assist h4 { color: var(--red); font-family: var(--font-family-inter); font-weight: 500; margin-bottom: 30px; }
.assist .holder { margin-top: 80px; }
.assist .connect-form-field input { color: var(--black); border-bottom: 1px solid var(--grey); padding-bottom: 15px; }
.assist .connect-form-field input::placeholder,
.assist .connect-form-field textarea::placeholder { color: var(--black); }
.assist .connect-form-field textarea { color: var(--black); border-bottom: 1px solid var(--grey); padding-bottom: 15px; }


/* ### partners ### */
.partners { padding-top: 70px; padding-bottom: 70px; text-align: center; }
.partners h2 { margin-bottom: 40px; }
.partners .holder { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; max-width: 1200px; margin: 0 auto; }
.partners .item { width: 33.33%; margin: 0 -20px 50px -20px; display: flex; justify-content: center; align-items: center; }
.partners .item .image { padding: 0 50px; }



/* ### footer container ### */
#footerCntr { overflow: hidden; width: var(--w-100); background-color: var(--primary); color: var(--white); padding: 80px 0 40px; }
.footerBox { color: var(--white); }
.footer-logo { max-width: 200px; }
.footerBox .holder { display: flex; justify-content: space-between; margin-bottom: 50px; }
.footerBox .left { width: 20%; }
.footerBox .right { width: 70%; display: flex; }
.footerBox .item { width: 33.33%; }
.footerBox .title { color: var(--white); font-family: var(--font-family-heading); font-size: 28px; margin-bottom: 10px; }
.footerBox ul li a { color: var(--white); font-size: 18px; }
.footerBox ul li a:focus,
.footerBox ul li a:hover { text-decoration: underline; }
.footerBox address { font-size: 18px; font-style: normal; line-height: 2.2; margin-bottom: 30px; }
.footerBox ul.social-media { display: flex; gap: 20px; margin-bottom: 30px; }
.footerBox .wrap { background-color: var(--white); padding: 50px 20px; color: var(--primary); text-align: center; margin-bottom: 30px; }
.footerBox .wrap .title { color: var(--primary); font-size: 48px; line-height: 1.3; font-weight: 600; }
.footerBox .wrap p { margin-bottom: 50px; }
.footerBox .wrap p a { text-decoration: underline; color: var(--primary); }
.footerBox .wrap p a:focus,
.footerBox .wrap p a:hover { text-decoration: none; }
.footerBox .weborigin { text-align: center; margin-bottom: 0; font-size: 18px; }
.footerBox .weborigin a { color: var(--white); text-decoration: underline; font-size: 22px; }
.footerBox .weborigin a:focus,
.footerBox .weborigin a:hover { text-decoration: none; }


/* #Media Queries
================================================== */

@media only screen and (max-width: 1720px) {
	.centered { padding-right: 15px; padding-left: 15px; }

	
	
}

@media only screen and (max-width: 1199px) {
	#wrapper { padding-top: 125px; }
	#headerCntr .logo { max-width: 120px; }
	.menuBox ul { margin-right: 20px; }
	.menuBox ul > li { margin-right: 20px; }

	.story .item { width: 50%; }
	
	.footerBox .holder { display: block; }
	.footerBox .left { width: var(--w-100); }
	.footerBox .right { width: var(--w-100); margin-top: 30px; }
	
}

@media only screen and (max-width: 1025px) {
	#wrapper { padding-top: 105px; }
	#headerCntr { padding: 15px 0; }
	#headerCntr .button { display: none; }
	.mobileMenu { display: flex; align-items: center; justify-content: center; }
	.menuBox { padding: 140px 20px 50px 10px; position: absolute; top: 0; left: 0; z-index: 12; display: flex; flex-wrap: wrap; opacity: 0; visibility: hidden; width: var(--w-100); height: 100vh; background-color: var(--white); transition: all 0.3s; overflow-y: scroll; overflow-x: hidden; align-items: unset; }
	.menuBox.active { opacity: 1; visibility: visible; }
	.menuBox ul { display: block; width: 100%; }
	.menuBox ul > li { display: block; width: 100%; margin-top: 0; margin-bottom: 5px; margin-right: 0; }
	.menuBox ul > li > ul { padding: 0; position: relative; width: 100%; overflow: hidden; transition: max-height 0.3s ease-out; max-height: 0; opacity: 1; visibility: visible; }
	.menuBox ul > li > ul > li { padding: 0; }
	.menuBox ul > li > a { padding: 5px 0; }

	.about .holder { flex-direction: column-reverse; }
	.about .image { width: var(--w-100); }
	.about .content { width: var(--w-100); margin-bottom: 50px; }

	.value .holder { grid-template-columns: auto auto; }

	.trust .holder { display: block; }
	.trust .image { width: var(--w-100); }
	.trust .content { width: var(--w-100); margin: -10px 0 0 0; padding: 70px 30px; }

	.planning { padding: 280px 0 80px 0; }
	.planning .block { display: block; text-align: center; }
	.planning .block h4 { margin-bottom: 30px; width: var(--w-100); }
	.planning .block .link { width: var(--w-100); text-align: center; }


	.connect .left { display: none; }
	.connect .right { width: var(--w-100); }

	.features .holder { display: block; }
	.features .image { width: var(--w-100); }
	.features .content { width: var(--w-100); }  
	.features li .title { font-size: 25px; }
}

@media only screen and (max-width: 767px) {
	h1,
	.h1 { font-size: 35px; }
	h2,
	.h2 { font-size: 30px; }
	h3,
	.h3 { font-size: 25px; }
	h4,
	.h4 { font-size: 20px; }
	h5,
	.h5 { font-size: 20px; }
	h6,
	.h6 { font-size: 18px; }

	body { font-size: 18px; }
	.banner { min-height: 500px; padding-top: 50px; padding-bottom: 50px; }

	.about { padding-top: 80px; padding-bottom: 80px; }

	.value .holder { grid-template-columns: auto; }
	.value h2 { margin-bottom: 60px; }

	.connect .top { padding: 30px; }
    .connect .bottom { padding: 30px; }
	.connect .top li a { font-size: 18px; }
	.connect-form-group { margin: 0; }
	.connect-form-group .connect-form-field { width: var(--w-100); padding: 0 0 10px 0; }
	.connect-form-field { margin-bottom: 30px; }
	.connect-form-field input,
	.connect-form-field textarea { font-size: 18px; }
	.commitment { margin-bottom: 80px; }
	.commitment::before { height: 100px; }
    .commitment .image { margin-top: 50px; }
    .story { padding-top: 50px; padding-bottom: 50px; }
	.story .item { width: var(--w-100); }
	.mission .content { padding: 50px 20px; }
	.mission .content li::before { top: 12px; }
    .features { margin-bottom: 70px; }
	.features .content { padding: 50px 20px; }
	.pricing { margin-bottom: 120px; }
	.pricing em { font-size: 25px; }
	.pricing h2 { margin-bottom: 20px; }
	.pricing .holder { background-color: var(--red); padding: 50px 30px; }
	.planning { margin-bottom: 70px; }
	.assist .holder { margin-top: 50px; }
	.partners .item { width: 50%; }
	.partners .item .image { padding: 0 30px; }

	#footerCntr { padding: 50px 0 30px 0; }
	.footerBox .right { width: var(--w-100); display: block; }
	.footerBox .item { width: var(--w-100); margin-bottom: 30px; }
	.footerBox .wrap .title { font-size: 35px; }
	.footerBox .item li { margin-bottom: 10px; }
	.footer-logo { max-width: 150px; }
}

@media only screen and (max-width: 479px) {

}