@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800;900&display=swap');
@import url("https://use.typekit.net/szz8hgv.css");

/* RESET */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

html,
body {
	margin:0;
	padding:0;
	height:100%;
	scroll-behavior: smooth;
}
/* /END RESET */
body {
	background: #6d6d6d url("img/bodyBg_repeatX.gif") top repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

p {
	line-height: 150%;
	margin: 0 0 10px;
}

h1, h2, h3, h4, h5, h6 {
	color: #2E4A74;
	font-family: Arial, Helvetica, sans-serif;
}

h1 {
	font-size: 20px;
	margin: 0 0 15px;
	font-weight: 700;
}

h2 {
	font-size: 18px;
	margin: 0 0 12px;
	font-weight: normal;
}

h3 {
	font-size: 15px;
	margin: 0 0 12px;
	font-weight: normal;
}


h4, h5, h6 {
	margin: 5px 0 5px;
	font-weight: bold;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {}

a img {
	border: none;
	outline: none;
}

a {
	color: #363636;
	outline: none;
	text-decoration: none;
}

a:hover {
	color: #999;
}

/* remove dotted lines on some links in FF browser */

a,
a:active,
a:visited,
a img {
	outline: none;
}

/* / */
	
/* CLEARFIX */
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}
/* /END CLEARFIX */

/* 
=====================================================
	Layout & Framework
===================================================== */
.slick-track
{
    display: flex !important;
}

.slick-slide
{
    height: inherit !important;
}

/* 
=====================================================
	Dynamic Displays
===================================================== */
.hero-section{
	position: relative;
	overflow: hidden;
}
.scroll{
    overflow-y: scroll;
}
.scroll .mobile-nav-container{
    height: 100%;
}

.hero-section-bg{
	position: absolute;
	z-index: -1;
	height: 100%;
	width: 100%;
	top:0;
	background-color: #0B8BFF;
}
.section-news{
	padding:45px 0;
	background-color: #F5F5F5;
}
.section-donate{
	padding:45px 0;
}
.section-projects{
	padding:30px 0;
	background-color: white;
}
.section-projects p{
    font-size: 15px;
}
.section-about-us{
	padding:45px 0;
	background-color: #F5F5F5;
}
header{
	padding:15px 0;
}
.container{
	max-width: calc(100vw - 120px);
	margin:auto;
}
header .row{
	align-items: center;
	flex-wrap: nowrap;
}
.row{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.col-100{
	width: 100%;
}
.col-60{
	width: 60%;
}
.col-20{
	width: 20%;
}
.col-2{
	width: 50%;
}
.col-1-3{
	width: calc(100% / 3);
}
.col-2-3{
	width: calc((100% / 3) * 2);
}
.col-3{
	width: calc(100% / 3);
}
/* 
=====================================================
	Typography
===================================================== */
h1{
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	font-size: 64px;
	letter-spacing: -2%;
	line-height: 110%;
	color: white;
	margin-bottom: 15px;
	letter-spacing: -0.3px;
}
h2{
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	font-size: 40px;
	line-height: 140%;
	letter-spacing: -2%;
	color: black;
	margin-bottom: 15px;
}
.main-card-wrap h2{
	margin-bottom: 15px;
}
h3{
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	font-size: 32px;
	line-height: 140%;
	letter-spacing: -2%;
	color: white;
	margin-bottom: 15px;
}
h4{
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	font-size: 24px;
	line-height: 120%;
	letter-spacing: -2%;
	color: #224477;
	margin-bottom: 15px;
}
p{
	font-family: "new-hero", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 140%;
	letter-spacing: 0.4px;
	color: white;
	margin:0 0 15px 0;
}
.my-language a{
	font-family: "new-hero", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 140%;
	color: white;
	text-transform:uppercase;
	margin-right:10px;
}
.my-language-mob{
	margin-top:15px;
}
.my-language-mob a{
	font-family: "new-hero", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 140%;
	color: white;
	text-transform:uppercase;
	
}
/* 
=====================================================
	Hamburger menu
===================================================== */
	.hamburger {
  	padding: 0;
  	display: none;
  	cursor: pointer;
  	transition-property: opacity, filter;
 	transition-duration: 0.15s;
 	transition-timing-function: linear;
  	font: inherit;
  	color: inherit;
  	text-transform: none;
  	background-color: transparent;
  	border: 0;
  	margin: 0;
  	overflow: visible; }
  	.hamburger:hover {
    opacity: 0.7; }
  	.hamburger.is-active:hover {
    opacity: 0.7; }
  	.hamburger.is-active .hamburger-inner,
  	.hamburger.is-active .hamburger-inner::before,
  	.hamburger.is-active .hamburger-inner::after {
    background-color: white; }

	.hamburger-box {
  	width: 30px;
  	height: 24px;
	display: inline-block;
 	position: relative; }

	.hamburger-inner {
  	display: block;
  	top: 50%;
  	margin-top: -2px; }
  	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 4px;
    background-color: white;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  	.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  	.hamburger-inner::before {
    top: -10px; }
  	.hamburger-inner::after {
    bottom: -10px; }
    .hamburger--spin .hamburger-inner {
  	transition-duration: 0.22s;
  	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  	.hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  	.hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

	.hamburger--spin.is-active .hamburger-inner {
  	transform: rotate(225deg);
  	transition-delay: 0.12s;
  	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  	.hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  	.hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }
/*
   * Spin Reverse
   */
	.hamburger--spin-r .hamburger-inner {
  	transition-duration: 0.22s;
  	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  	.hamburger--spin-r .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  	.hamburger--spin-r .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

	.hamburger--spin-r.is-active .hamburger-inner {
  	transform: rotate(-225deg);
  	transition-delay: 0.12s;
  	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  	.hamburger--spin-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  	.hamburger--spin-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/* 
/* 
=====================================================
	Mobile menu
===================================================== */
	.mobile-nav-container{
		display: none;
		position: absolute;
		background-color: #0B8BFF;
		min-height: calc(100vh - 150px);
		width: 100%;
		top:150px;
		left: 0;
		z-index: 9999;
		text-align:center;
		padding:60px 0;
	}
	.mobile-nav-container .row{
		margin-bottom:15px;
	}
	.mobile-nav-container ul li{
		list-style-type: none;
	}
	.mobile-nav-container .row{
		justify-content: center;
	}
	.open{
		display:block;
	}
	.mobile-menu-link{
		color: white;
		font-size:2em;
		display: inline-block;
		margin-bottom:30px;
	}
	.scroll-lock{
		margin: 0; 
		height: 100%; 
		overflow: hidden;
	}
	/* 
=====================================================
	Buttons
===================================================== */
.button-yellow a{
	color: #224477;
}
.button-yellow{
	display: inline-block;
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 16px;
	letter-spacing: 4%;
	line-height: 1.5;
	color: black;
	background-color: #F7CE03;
	border-radius:24px;
	border:2px solid transparent;
	padding: 8px 0;
	margin: 15px 0 0 0;
	width: 150px;

}
.button-yellow:hover{
	border: 2px solid #f8d735;
	background-color: #f8d735;
}
.button{
	display: inline-block;
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	width: 150px;
	text-align: center;
	font-size: 16px;
	letter-spacing: 4%;
	line-height: 1.5;
	color: #224477;
	background-color: #F7CE03;
	border-radius:24px;
	padding: 8px 0;
	margin: 15px 0 0 0;

}
.button-2{
	display: inline-block;
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	width: 150px;
	text-align: center;
	font-size: 16px;
	letter-spacing: 4%;
	line-height: 1.5;
	color: black;
	border:1px solid black;
	border-radius:24px;
	padding: 8px 0;
	margin: 15px 0 0 0;
	background-color: transparent;
}
.button-2:hover{
	background-color: rgba(255, 255, 255, 0.2);
	cursor: pointer;
}
.button-3{
	display: inline-block;
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	width: 150px;
	text-align: center;
	font-size: 16px;
	letter-spacing: 4%;
	line-height: 1.5;
	color: black;
	border:1px solid #0B8BFF;
	border-radius:24px;
	padding: 8px 0;
	margin: 15px 0 0 0;

}
.button-3:hover{
	background-color: rgba(255, 255, 255, 0.2);
}
.button-white{
	display: inline-block;
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	width: 150px;
	text-align: center;
	font-size: 16px;
	letter-spacing: 4%;
	line-height: 1.5;
	color: white;
	border:1px solid white;
	border-radius:24px;
	padding: 8px 0;
	margin: 15px 0 0 0;
    background-color: transparent;
}
.button-white:hover{
	cursor: pointer;
	background-color: #1c3963;
}
.button-blue{
	display: inline-block;
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	width: 150px;
	text-align: center;
	font-size: 15px;
	letter-spacing: 4%;
	line-height: 1.5;
	color: white;
	background-color: #0B8BFF;
	border:1px solid #0B8BFF;
	border-radius:24px;
	padding: 8px 0;
	margin: 15px 0 0 0;
}
.button-blue:hover{
	cursor: pointer;
	background-color: #007ef1;
}
.fa-solid{
    display: none!important;
}
.success_check{
    display: inline!important;
}
/* 
=====================================================
	Main screen
===================================================== */
.menu-2 .socila .instagram{
    margin:0 15px 0 0;
    display:inline-block;
}

.align-start{
	align-items: start;
}
.secondary-text{
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 4%;
	color: black;
	margin:0 0 15px 0;
}
.secondary-text-dark{
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 4%;
	color: black;
	margin:0 0 15px 0;
}
.main-text-wrap p{
	font-family: "new-hero", sans-serif;
	font-weight: normal;
	font-size: 24px;
	line-height: 140%;
	color: white;
	margin:0 0 15px 0;
}
.menu-2 a{
	color: white;
	margin: 0;
}
.menu-1 ul{
	list-style-type: none;
	display: flex;
}
.main-menu-link{
	font-size: 17px;
	line-height: 1.2;
	font-family: "new-hero", sans-serif;
	font-weight: 400;
	color: white;
	border: 2px solid white;
	border-radius: 24px;
	padding: 8px 14px;
	margin: 0 15px 0 0;
	white-space: nowrap;
}
.menu-1 a:hover{
	color: white;
	background-color: rgba(255, 255, 255, 0.2);
}
.main-menu-link:hover{
	color: white;
	background-color: rgba(255, 255, 255, 0.2);
}
.logo{
	text-align: center;
}
.menu-2 ul{
	list-style-type: none;
	display: flex;
	justify-content: end;
	align-items: center;
}
.menu-2 ul li{
	margin: 0 0 0 15px;
}
.main-screen{
	padding: 30px 0 60px 0;
	position: relative;
}
.radius-1{
	position: absolute;
	z-index: -1;
	width: 1200px;
	height: 1200px;
	left: -600px;
	top: -500px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(217, 217, 217, 0) 100%);
	animation-name: my-bg-1;
  	animation-duration: 20s;
  	animation-iteration-count: infinite;
}
.radius-2{
	position: absolute;
	z-index: -1;
	width: 1200px;
	height: 1200px;
	right: -600px;
	top: -100px;
	background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(217, 217, 217, 0) 100%);
	animation-name: my-bg-2;
  	animation-duration: 20s;
  	animation-iteration-count: infinite;
}
@keyframes my-bg-1 {
	0% {left: -600px;}
	50% {left: -100px;}
	100% {left: -600px;}
}
@keyframes my-bg-2 {
	0% {right: -600px;}
	50% {right: -100px;}
	100% {right: -600px;}
}
.logo img{
	height: 120px;
}
.main-text-wrap{
	margin: 30px 90px 0 0;
	padding:0 0 30px 0;
}
.main-card-wrap{
	position: relative;
	display: block;
	background-color: rgba(255, 255, 255, 0.8);
	border-radius:24px;
	border: 1px solid #FFFFFF;
	padding: 15px;
	min-width: 400px;
}
.section-about-us-wrapper .main-card-wrap{
    min-width: auto;
}
.status-wrapper{
	padding-bottom:60px;
}
.news-card .status-wrapper{
    padding: 0;
    position: absolute;
    bottom: 15px;
    width: calc(100% - 30px);
}
.status-wrapper .row{
    justify-content: space-between;
}
.news-card .goal{
    margin-bottom: 150px;
}
.status-number .col-2{
		width: 50%;
}
.section-about-us .main-card-wrap{
	position: relative;
	height: 180px;
	margin:15px;
	padding: 15px;
}
.main-card-wrap p{
	font-weight: medium;
	font-size: 14px;
	line-height: 140%;
	color: black;
}
.h1-marker{
	text-transform: uppercase;
	color: #F7CE03;
	font-weight: 800;
}
.img-wrapper img{
	width: auto;
    max-width: 250px;
}
.main-card-text{
	margin: 0 0 0 15px;
}
.text-align-r{
	text-align: right;
}
.collect-number{
	font-style: normal;
	font-weight: bold;
	letter-spacing: 0.4px;
	font-size: 20px;
	line-height: 140%;
	color: black;
	margin:0;
}
.remaining-number{
	font-style: normal;
	font-weight: bold;
	letter-spacing: 0.4px;
	font-size: 20px;
	line-height: 140%;
	color: black;
	margin:0;
}
.status-body{
	position: relative;
	height: 15px;
	width: 100%;
	border:1px solid black;
	border-radius: 24px;
}
.status-progress{
	position: absolute;
	background-color: #F7CE03;
	height: 15px;
	border-radius: 24px;
}
/* 
=====================================================
	News section 
===================================================== */
.news-card{
	position: relative;
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid #0B8BFF;
	padding: 15px;
	border-radius: 24px;
	margin:0 15px;
}
.news-card h3{
    color:black;
}
.news-card p{
    color:black;
    font-size: 17px;
}
.goal{
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	font-size: 24px;
	line-height: 140%;
	letter-spacing: -2%;
	color: #0B8BFF;
	margin-bottom: 30px;
}
.goal-dark{
	font-family: "new-hero", sans-serif;
	font-weight: bold;
	font-size: 24px;
	line-height: 140%;
	letter-spacing: -2%;
	color: #0B8BFF;
}
/* 
=====================================================
	Projects section
===================================================== */
.project-card-1{
	flex: 1 1 auto;
	display: inline-block;
	position:relative;
	background-color: #0B8BFF;
	padding: 15px;
	border-radius: 24px;
	margin-right: 15px;
	padding-bottom: 60px;
}
.flex-direction{
	display: flex;
    flex-direction: column;
}
.project-card-1 img{
	width: 100%;
	border-radius: 24px;
	margin:0 0 15px 0
	
}
.project-card-2{
	display: inline-block;;
	position:relative;
	background-color: #224477;
	padding: 15px;
	border-radius: 24px;
	margin-bottom: 15px;
	padding-bottom: 70px;
}
.project-card-2 img{
	width: 250px;
	border-radius: 24px;
	margin:0 15px 15px 0;
}
.project-card-3{
	display: inline-block;;
	position:relative;
	background-color: #F7CE03;
	padding: 15px;
	border-radius: 24px;
	padding-bottom: 70px;
}
.project-card-3 img{
	width: 250px;
	border-radius: 24px;
	margin:0 15px 15px 0;
}
.project-card-3 p{
    color: black;
}
.project-card-3 h3{
    color: black;
}
.absolute-left{
	position: absolute;
	bottom:15px;
}
.absolute-right{
	position: absolute;
	bottom:15px;
	right: 15px;
}
.section-projects h3{
	margin: 0 0 15px 0;
}
/* 
=====================================================
	About us section
===================================================== */
.section-about-us-wrapper{
	background-color: #0B8BFF;
	border-radius: 24px;
	padding:15px;
}
.section-about-us-wrapper h4{
    color:black;
}
.about-us-text-wrap{
	padding: 15px 60px 15px 15px;
}
.about-us-PDF{
	position: relative;
}
.about-us-PDF a{
	display: inline-block;
	font-family: "new-hero", sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 30px;
	color: white;
	margin:0 0 15px 0;
	padding-left: 30px;
}
.about-us-PDF-icon{
	position: absolute;
	content: '';
	top:0;
	left: 0;
	width: 30px;
	height: 30px;
	background-image: url('img/PDF.svg');
	background-repeat: no-repeat;
}
.work-with-us{
	padding:15px 15px 0 15px;
}
/* 
=====================================================
	Social
===================================================== */
.telegram{
	display: inline-block;
	background-image: url('img/telegram.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
}
.telegram:hover{
	color: #F7CE03;
}
.facebook{
	display: inline-block;
	background-image: url('img/facebook.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
}
.instagram{
	display: inline-block;
	background-image: url('img/instagram.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 26px;
	height: 26px;
}
.mobile-nav-container .social{
    margin:0 15px;
}
.arrow-left{
	display: inline-block;
	background-image: url('img/arrow-left.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 42px;
	height: 42px;
	margin-right: 15px;
	cursor: pointer;
}
.arrow-right{
	display: inline-block;
	background-image: url('img/arrow-right.svg');
	background-repeat: no-repeat;
	background-size: contain;
	width: 42px;
	height: 42px;
	cursor: pointer;
}
/* 
=====================================================
	Team us section
===================================================== */
.section-team{
	padding: 30px 0;
    background-color: white;
}
.team-img{
	width:100%;
	height: 270px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

.team-list {
  display: flex;
	flex-direction:row;
  flex-wrap: wrap;
  gap: 24px;
	list-style: none;
}
.team-item {
  background-color: #ffffff;
  width: calc((100% - 3 * 24px) / 4);
  border-radius: 0px 0px 4px 4px;
  box-shadow: 0px 1px 6px rgba(46, 47, 66, 0.08),
    0px 1px 1px rgba(46, 47, 66, 0.16), 0px 2px 1px rgba(46, 47, 66, 0.08);
}
.team-title {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: 8px;
  color: #2e2f42;
}
.team-text {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #434455;
  text-align: center;
}
.team-container {
  padding: 32px 0;
}
.team-icons-list {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 10px;
	list-style: none;
}
.team-icons {
  width: 40px;
  height: 40px;
}

.team-icons-link {
  width: 100%;
  height: 100%;
  background-color: #4d5ae5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.team-icons-link:hover {
  background-color: #404bbf;
}
.team-icons-link:focus {
  background-color: #404bbf;
}
.team-icon {
  fill: #f4f4fd;
}
.facebook-team{
	display: inline-block;
	background-image: url('img/facebook.svg');
	background-repeat: no-repeat;
	background-position: center;
	width: 26px;
	height: 26px;
	padding:8px;
	border-radius: 16px;
	background-color: #0B8BFF;
}
/* 
=====================================================
	Footer
===================================================== */
.footer-wrap{
	background-color: #224477;
	padding: 30px 0;
}
.footer-brand{
	text-align: center;
	margin:0 75px 0 0;
}
.footer-brand .logo{
	margin-bottom: 30px;
}
.footer-brand .social a:first-child{
	margin-right: 15px;
}
.footer-brand .social a:last-child{
	margin-left: 15px;
}
.footer-brand .social a{
	display: inline-block;
	margin-bottom: 15px;
}
footer nav a{
	font-size: 15px;
	line-height: 30px;
	font-family: "new-hero", sans-serif;
	font-weight: 400;
	color: white;
}
footer nav a:hover{
	color:#0B8BFF;
}
footer li{
	list-style: none;
}
footer p{
	font-size: 15px;
	line-height: 30px;
	font-family:"new-hero", sans-serif;
	font-weight: 400;
	color: white;
	margin:0;
}
footer .row{
	justify-content: top;
}
.subscribe-text{
	font-size: 30px;
	line-height: 40px;
	font-family: "new-hero", sans-serif;
	font-weight: 400;
	color: white;
}
.subscribe-area{
	margin: 60px 0 0 0;
}
/* 
=====================================================
	Input
===================================================== */
    input[type="text"]{
    font-size: 14px;
	font-family: "new-hero", sans-serif;
	font-weight: 400;
	color: white;
}
    .main-card-wrap input[type="text"]{
    font-size: 14px;
	font-family: "new-hero", sans-serif;
	font-weight: 400;
	color: black;
}
	input{
		background-color: transparent;
		border:2px solid #0B8BFF;
		border-radius: 24px;
		padding: 10px 24px;
		width: 180px;
		
	}
	input::placeholder{
		color:white;
		font-size:16px;
		font-family: "new-hero", sans-serif;
    	font-weight: bold;
    	line-height: 1.5;
	}
	.main-card-wrap input::placeholder{
		color: black;
	}
/* 
=====================================================
	Text pages
===================================================== */
	
	.text-section{
	    padding: 60px 0;
	    background-color: white;
	}
	.text-block{
	    max-width: 900px;
	}
	.text-section h2{
	    color: black;
	}
	.text-section p{
	    color: black;
	}
/* 
=====================================================
	Responsive
===================================================== */

@media screen and (max-width: 1200px) {
	.main-card-wrap .row{
		flex-wrap: wrap;
	}
	.main-card-wrap .col{
		width: 100%;
	}
	.col-xl{
		width: 50%;
	}
	.main-card-text{
		margin: 0;
	}
	.img-wrapper{
		margin: 0 0 15px 0;
		max-width: 300px;
	}
	.goal-dark{
		margin: 0 0 15px 0;
	}
	.main-card-wrap{
		margin: 0 0 30px 0;
	}
	.section-about-us .main-card-wrap{
		padding-bottom: 75px;
	}
	.main-menu-link{
		font-size: 16px;
	}
	.main-text-wrap{
		margin:30px 30px 0 0;
	}

}
@media screen and (max-width: 1160px){
	#my-language{
		display:none;
	}
	.main-menu-link{
		display: none;
	}
	.hamburger{
		display: block;
	}
	.container{
	max-width: calc(100vw - 60px);
}
}
@media screen and (max-width: 1024px){
	.row{
		flex-wrap: wrap;
	}
	.reverce{
    flex-wrap: wrap-reverse!important;
    }
	.col-2{
		width: 100%;
	}
	.col-xl{
		width: 100%;
	}
	.col-1-3{
		width: 100%;
	}
	.col-2-3{
		width: 100%;
	}
	.footer-brand{
		margin:0;
		width: 100%;
	}
	.menu-2 .social{
		display: none;
	}
	.team-item {
  background-color: #ffffff;
  width: calc((100% - 2 * 24px) / 3);
}
@media screen and (max-width: 768px){
	.main-card-wrap .img-wrapper{
		display: none;
	}
	.col-60{
		width: 20%;
	}
	.col-3{
	    width: 100%;
	}
	.col-20 {
    width: 40%;
	}
	.main-text-wrap{
		margin:0;
	}
	.container{
	max-width: calc(100vw - 20px);
	margin:auto;
	}
	.project-card-1{
		margin-right: 0;
		margin-bottom: 15px;
	}
	.slider-nav{
		display:none;
	}
	.news-card{
		margin:0;
	}
	.project-card-1{
		margin:0 0 15px 0;
	}
	.about-us-text-wrap{
		padding:0;
	}
	.section-about-us .main-card-wrap{
		margin:0 0 15px 0;
	}
	.menu-2{
		display: none;
	}
	.work-with-us{
		padding:0;
	}
	h1{
		font-size: 54px;
	}
	.main-text-wrap p{
		font-size: 20px;
	}
	.subscribe-area{
		margin:15px 0 0 0;
	}
	.contacts{
		margin-top:15px;
	}
	.subscribe-text{
		margin-top:15px;
	}
	.footer-nav{
		margin-top:15px;
		text-align:center;
	}
	.row .subscribe-area .col{
		width: 100%;
	}
	.main-text-wrap h1{
		text-align:center;
	}
	.main-card-wrap{
	    min-width: auto;
	}
	.section-about-us .main-card-wrap{
	    height: 120px;
	}
	.section-projects img{
	    width: 100%;
	}
	.main-screen{
	padding: 0;    
	}
.team-item {
  background-color: #ffffff;
  width: 100%;
}
}
@media screen and (min-width: 1600px){
    .hero-section{
        min-height: auto;
    }
    .main-card-wrap{
        margin-bottom: 60px;
    }
    .container{
        max-width: 1600px;
    }
    
}