/* Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul, ol {
    list-style: none;
}

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

img,video {
    display: block;
    max-width: 100%;
	max-height: 100%;
}


/* Atom */

body {
  font-family: "Open Sans", sans-serif;  
  font-weight: 400;
  position: relative;  
  overflow-x: hidden;
}

h1 {
	font-size: clamp(0.75rem, 2.61vw, 1.25rem);
	@media screen and (min-width: 768px) {
		font-size: 1.25rem;
		
	}
}

h2 {
	font-size: clamp(1.5rem,3.13vw,3rem);
	margin-bottom: 1rem;
	font-weight: 700;
	text-align: center;
	@media screen and (min-width: 768px) {
		font-size: 3rem;
	}
}

h3 {
	font-size: clamp(1.5rem,3.13vw,3rem);
	margin-bottom: 1rem;
	font-weight: 700;
	text-align: center;
	@media screen and (min-width: 768px) {
		font-size: 3rem;
	}
}
h4 {
	font-size: clamp(1rem,2.08vw,2rem);
	margin-bottom: 0.5rem;
	font-weight: 700;
	text-align: center;
	@media screen and (min-width: 768px) {
		font-size: 2rem;
	}
}

p {
	font-size: clamp(0.875rem,1.3vw,1.25rem);
	@media screen and (min-width: 768px) {
		font-size: 1.25rem;
	}	
}

.container {
	width: 90%;
	max-width: 96rem;
	margin-inline: auto;
	padding-block: clamp(1rem,5vw,5rem);
}

.button, button {
	display: inline-block;	
	background-color: transparent;
	border: #fff solid 1px;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
	cursor: pointer;
	@media screen and (min-width: 768px) {
		font-size: 1rem;
	}
	&:not(.arrow,.burger) {
		padding: clamp(0.375rem,0.78vw,0.75rem) clamp(0.75rem,1.56vw,1.5rem);
	}
	&:hover {
		background-color: #2b7cff80;
	}
	&:active {
		scale: 0.98;
	}
}

.hidden {
	display: none;
}


/* Header */

header {
	background-color: #142035;
	color: #fff;	
	.menu{		
		width: 90%;
		max-width: 96rem;
		margin-inline: auto;
		padding-block: 1.5rem ;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		overflow-x: hidden;
		.home {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 1rem;
			font-size: 1.25rem;
			font-weight: 700;
			.logo {
				width: clamp(4rem,13.56vw,6.5rem);
				height: clamp(4rem,13.56vw,6.5rem);
				flex-shrink: 0;
				object-fit: contain;
			}
		}
		.burger {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 2rem;
			height: 2rem;
			background: transparent;
			border: none;
			cursor: pointer;
			z-index: 20;
			span {
				display: block;
				height: 3px;
				width: 100%;
				background-color: #fff;
				transition: all 0.3s ease;
			}		
			&:is(.open) span:nth-child(1) {
				transform: rotate(45deg) translate(0.45rem, 0.45rem);
			}
			&:is(.open) span:nth-child(2) {
				opacity: 0;
			}
			&:is(.open) span:nth-child(3) {
				transform: rotate(-45deg) translate(0.45rem, -0.45rem);
			}		
		}
		ul {
			position: absolute;
			top: clamp(112px,19.82vw,152px);
			right: 0;
			width: fit-content;
			padding: 5%;
			flex-direction: column;
			gap: 1rem;
			background-color: #142035;			
			z-index: 10;
			transition: right 0.3s ease;
			display: none;
			&:is(.active) {
				display: flex;
				right: 0;				
			}
			.button {
				width: 100%;
				text-align: center;
			}
		}
		
	}
}




/* Contact Form */

.contact-form {
	position: relative;
	max-width:32.5rem;
	margin-inline: auto;
	.form-field{
		background:#fff;
		position:relative;
		margin-bottom:1.5rem;
	}
	input, select, textarea{
		width:100%;
		padding:0.875rem;
		border:1px solid #fff;
		font-size:0.875rem;
		background:none;
		&:focus {
			outline: none;
			border:1px solid #4a90e2;
			box-shadow: 0 0 5px #4a90e2;
		}
	}
	select {
		cursor: pointer;
	}
	textarea{	
		height: 12rem;
		resize: none;
		display:block;
	}
	label{
		position:absolute;
		left:0.875rem;
		top:0.875rem;
		color:#777;
		font-size:0.875rem;
		pointer-events:none;
		transition:0.25s;
		padding:0 0.25rem;
	}
	input:focus + label,
	input:not(:placeholder-shown) + label,
	textarea:focus + label,
	textarea:not(:placeholder-shown) + label{
		top:-1.25rem;
		font-size:0.75rem;
		color:#fff;
	}
	button{
		display: block;
		margin-inline: auto;
	}
	.success-message{
		margin-top:1rem;
		color:#009214;
		text-shadow: #7eff8f 0px 0px 0.5rem;
		font-weight:600;
	}
}


/* Footer */

footer {
	background-color: #142035;
	color: #ffffff;
	font-size: clamp(0.5rem,1.04vw,1rem);
	.container {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		align-items: center;
		gap:1.5rem;
		@media screen and (min-width: 768px) {
			flex-direction: row;
		}
	}
	.facebook {
		width: 2rem;
		height: 2rem;
		transition: all 0.2s ease;
		&:hover {
			filter: brightness(130%);
		}
		&:active {
			scale: 0.98;
			filter: brightness(80%);
		}
	}
	h5 {		
		font-size: clamp(0.875rem, 1.56vw, 1.25rem);
		text-align: center;
	}
	.link {
		color: #337ab7;
	}
	.social, .copyright {
		flex: 0 0 30%;
	}
	.copyright {
		text-align: right;
		.link {
			color: #337ab7;
		}
	}
}


/* Home Page */

/* Slider */

.slider {
	position: relative;
	height: clamp(25rem,52.08vw,50rem);
	margin: auto;
	overflow: hidden;
	background-color: #eeeeee;
	.track {
		display: flex;
		transition: transform 0.5s ease;
	}
	.slide {
		position: relative;
		min-width: 100%;
		color: #fff;
		img {
			width: 100%;
			height: clamp(25rem,52.08vw,50rem);
			object-fit: cover;
			filter: brightness(30%);
			@media screen and (min-width: 768px) {
				filter: none;
			}
		}
		.info {
			position: absolute;
			bottom: clamp(2.5rem,5.21vw,5rem);
			left: clamp(1.5rem,5.21vw,5rem);
			padding: clamp(1rem,2.6vw,2.5rem);			
			width: calc(100% - clamp(1.5rem,5.21vw,5rem)*2);
			max-height: 95%;
			background-color: rgba(8, 32, 73, 0.7);
			@media screen and (min-width: 1440px) {
				width: 44.8%;
			}
			h4 {
				display: block;
				font-size: clamp(1rem,1.25vw,1.5rem);
				margin-bottom: clamp(0.5rem,1.5vw,1.5rem);
				text-align: center;
				@media screen and (min-width: 768px) {
					font-size: 1.5rem;
					margin-bottom: 1rem;
					text-align: left;
				}
			}
			p {
				display: inline;
			}
			button {	
				display: block;
				margin: 1rem auto 0;
				&:is(.hidden){
					display: none;
				}
				@media screen and (min-width: 768px) {
					display: inline;			
					float: right;
					margin: 1rem 0 0 1rem;
				}
			}
		}
	}
	.arrow {
		display: none;
		@media screen and (min-width: 1280px) {
			position: absolute;
			display: block;
			top: 50%;
			transform: translateY(-50%);
			font-size: 1.75rem;
			background-color: rgba(8, 32, 73, 0.7);
			color: #fff;
			line-height: 0.5;
			border: none;
			width: 45px;
			height: 45px;
			cursor: pointer;
			&:hover {
				background-color: rgba(3, 20, 49, 0.7);
			}
			&:active {
				scale: 0.98;
			}
		}
	}
	.prev {
		left: 1rem;
	}
	.next {
		right: 1rem;
	}
	.dots {
		position: absolute;
		bottom: clamp(1rem,2vw,2rem);
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 1rem;
		@media screen and (min-width: 768px) {
			gap: 0.5rem;
		}
		span {
			width: 12px;
			height: 12px;
			background: #fff;
			opacity: 0.5;
			border-radius: 50%;
			cursor: pointer;
			&:is(.active) {
				opacity: 1;
			}
		}
	}
}

#home .about {
	background-color: #EBEDF0;
	color: #333333;
	line-height: 1.5;
	.container {
		display: flex;
		flex-direction: column;
		gap: clamp(1rem,3.13vw,3rem);
	}	
	p {
		font-weight: 500;
		margin-bottom: 1rem;
	}
	.wrapper {
		display: flex;
	}
	.button {
		color: #142035;
		border-color: #142035;
		&:first-child {
			margin-right: 1rem;
		}
	}
	img {
		width: 100%;
		aspect-ratio: 3/2;
		object-fit: cover;
	}
	
}

#home .form {
	position: relative;
	background: #142035 url(/img/flag-bg_fit.jpg) center top / cover no-repeat fixed;
	padding-block: clamp(1rem, 5.21vw, 5rem);
	&::after {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba(20, 32, 53, 0.5);
		z-index: 0;
	}
	.contact-form,
	h3, p {
		width: min(41.25rem, 85%);
		margin-inline: auto;
		color: #fff;
		position: relative;
		z-index: 1;
	}
	p {
		text-align: center;
		margin-bottom: 2rem;	
	}
}

.partners {	
	padding-block: clamp(1rem,5vw,5rem);
	h3 {
		color: #333333;
	}
	.list{
		overflow: hidden;
		.wrapper {
			margin-block: 0.5rem;
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: clamp(15rem,15.63vw,30rem);
			justify-items: center;
			animation: scroll 100s linear infinite;
			@media screen and (min-width: 768px) {
				grid-auto-columns: 30rem;
			}
		}
		.item {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			gap: 0.625rem;
			transition: transform 0.3s ease;
			img {
				max-width: 90%;
				max-height: 5rem;
				object-fit: contain;
				@media screen and (min-width: 768px) {
					max-height: 10rem;
				}
			}
			p {
				max-width: 100%;
				min-height: 3.3rem;
				text-align: center;
			}
			&:hover {
				transform: scale(1.02);
			}
		}
	}
} 

#home .current-priorities {
	background-color: #EBEDF0;
	h3 {
		color: #333333;
	}
	.button {
        display: block;
		width: fit-content;
		margin-inline: auto;		
        color: #142035;
        border-color: #142035;
    }
}

#home .news {
	background-color: #6C8399;
	h3 {
		color: #fff;
	}
	.button {
        display: block;
		width: fit-content;
		margin-inline: auto;
    }
}

/* About Page */

#about {
	color: #333333;
	font-weight: 500;
	.intro {
		text-align: center;
		p:not(:last-child) {
			margin-bottom: 1rem;
		}
	}
	.mission {
		background: url(/img/field_fit.webp) center / cover no-repeat fixed;
		padding-block: clamp(1rem,5vw,5rem);
		h2 {
			margin-bottom: 1rem;
		}
		.container{
			display: flex;
			flex-direction: column;
			padding-inline: clamp(1rem,5vw,5rem);
			background-color: #ffffff80;
			backdrop-filter: blur(0.5rem);
			li {
				display: flex;
				gap: 0.5rem;
				&:not(:last-child) {
					margin-bottom: 1rem;
				}
				&::before {
					content: "⬥";
					color: #142035;
					font-size: clamp(0.875rem,1.3vw,1.25rem);
					line-height: 1.4;
					@media screen and (min-width: 768px) {
						font-size: 1.25rem;
					}
				}
			}			
		}
	}
	.activity-areas {
		text-align: center;
		ul {
			display: flex;
			flex-direction: column;
			@media screen and (min-width: 768px) {
				flex-direction: row;
				flex-wrap: wrap;
				gap: 1rem;				
			}
			li {
				display: flex;
				flex-direction: column;
				align-items: center;
				@media screen and (min-width: 768px) {
						
					max-width: 45%;	
					@media screen and (min-width: 1440px) {						
						flex: 1;	
						max-width: none;				
					}			
				}
				
				
			}
			img {
				max-width: 50%;
			}
		}
	}
	.units {
		position: relative;
		background: url(/video/ukrainian-flag.mp4) center / cover no-repeat;
		color: #ffffff;
		text-align: center;
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: rgba(20, 32, 53, 0.5);
			z-index: 1;
		}
		video {
			position: absolute;
			inset: 0;
			object-fit: cover;
			width: 100%;
			z-index: 0;			
		}
		.container {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			z-index: 5;
		}
		p {
			margin-bottom: 2rem;
		}
		img {
			max-width: 50%;
		}			
	}
	.community {
		p:not(:last-child) {
			margin-bottom: 1rem;
		}
	}

}

#contacts {
	background-color: #142035;
	.contacts {
		position: relative;
		padding: clamp(1rem,10.42vw,10rem) 0;
		color: #fff;
		background: url(/img/kyiv-city.webp) center/cover no-repeat fixed;
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: rgba(20, 32, 53, 0.8);
			z-index: 0;
		}
		h2 {
			position: relative;
			font-size: clamp(1.75rem,1.82vw,3.5rem);
			z-index: 5;
			@media screen and (min-width:768px) {
				font-size:3.5rem;
			}
		}
		.wrapper {
			position: relative;
			max-width: 90%;
			margin-inline: auto;
			padding: clamp(1.5rem,5.21vw,5rem);
			display: flex;
			flex-direction: column;
			align-items: center;
			border: #fff solid 1px;	
			z-index: 5;
			@media screen and (min-width:1024px) {
				max-width: 50%;
			}
		}
		p {
			margin-bottom: 1.5rem;
		}
		.row {
			display: flex;
			flex-direction: column;
			width: 100%;
			gap: 1rem;
			@media screen and (min-width:768px) {
				flex-direction: row;
				justify-content: space-evenly;
			}
		}
		.col {
			display: flex;
			flex-direction: column;
			align-items: center;
			@media screen and (min-width:1024px) {
				flex: 1;
			}
		}
		img {
			width: clamp(2.5rem,5.21vw,5rem);
			height: clamp(2.5rem,5.21vw,5rem);
			object-fit: contain;
			margin-bottom: 1rem;
		}
		.map {		
			width: 100%; 
			border:0;
			
			iframe{
				display: block;
				width:100%;
				height:100%;
				border:0;
			}
		}
	}
}

#join {
	background-color: #142035;
	.form {
		position: relative;
		padding: clamp(1.5rem,5.21vw,5rem);
		background: url(/img/hands.webp) right center / cover no-repeat fixed;
		color: #fff;
		&::after {
			content: "";
			position: absolute;
			inset: 0;
			background-color: rgba(20, 32, 53, 0.6);
			z-index: 0;
		}
		h2 {
			position: relative;
			z-index: 5;
		}
		.contact-form {
			z-index: 5;
		}
	}
}




@keyframes scroll {
	to {
		translate: calc(-16*clamp(15rem,15.63vw,30rem));
	}
}


@media screen and (min-width: 768px) {
	header {
		.menu {
			flex-direction: column;
			.burger {
				display: none;			
			}
			.home {
				max-width: 36.25rem;
			}
			ul {
				position: inherit;
				top: auto;
				right: auto;
				width: 100%;
				display: flex;
				flex-direction: row;
				gap: 1.5rem;			
				background-color: unset;
				transition: none;
				padding: 0;
				li {
					flex: 1;
					min-width: 9.5rem;
					a {		
						width: 100%;				
						padding-block: 0.5rem;
						font-size: 1rem;
						font-weight: 500;
						text-align: center;
						border: #fff solid 1px;
						&:not(.active):hover {
							background-color: #2b7cff80;
						}
						&:active {
							font-weight: 400;
						}
						&:is(.active){
							background-color: transparent;
							font-weight: 700;
							cursor: default;
							
						}
					}
				}	
			}
		}
	}
	#home .about .container {
		flex-direction: row;
		p {
			font-weight: 500;
			margin-bottom: 1rem;
		}
		img {
			width: 50%;
			aspect-ratio: auto;
			height: 34rem;
		}
	}	
	
}
@media screen and (min-width: 1280px) {
	header .menu {
		flex-direction: row;
		ul {
			width: fit-content;
			li {
				flex: auto;
				a {
					min-width: 8rem;
				}
			}
		}
		
	}
}