/* 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%;
}

.card p, 
.content p,
.goal-content p {
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}


/* 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;
	}
	input:focus:invalid,
	textarea:focus:invalid {
		border: 1px solid #ef4444 !important;
		box-shadow: 0 0 5px rgba(239, 68, 68, 0.5) !important;
	}
	.contact-form input:invalid,
	textarea:invalid {
		border-color: #ef4444;
	}
	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 .goals {
	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;
		}
	}

}

/* Materials Page */

#materials {
	.heading {
		margin-bottom: clamp(1rem, 5vw, 5rem);
		p {
			text-align: center;
		}
	}
	.tabs {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(0.5rem,1.05vw,1rem);
		justify-content: center;
		margin-bottom: clamp(0.5rem,1.05vw,1rem);
		@media screen and (min-width: 768px) {
			justify-content: flex-start;
		}

		.tab-button {
			color: #142035;
			border-color: #142035;
			background-color: transparent;
			transition: all 0.3s ease;
			font-size: clamp(0.6rem,0.92vw,0.875rem);
			@media screen and (min-width: 768px) {
				font-size: 1rem;
			}
			&:hover {
				background-color: #2b7cff80;
			}
			&.active {
				background-color: #142035;
				color: #fff;
				cursor: default;
			}
		}
	}

	.tab-header-block-full {
		grid-column: 1 / -1;
		width: 100%;         
		margin-bottom: clamp(0.8rem,1.58vw,1.5rem);
		
	}
	.tab-main-title {
		font-size: clamp(1rem,1.45vw,1.375rem);
		text-align: left;
		color: #1a1a1a;
		margin-bottom: 0.5rem;
	}
	.tab-subtitle {
		font-size: clamp(0.8rem,1.05vw,1rem);
		color: #555555;
	}

	.tabs-content {
		.tab-content {
			display: none;
			&.active {
				display: block;
			}
		}
	}

	.cards {
		display: grid;
		grid-template-columns: 1fr;
		gap: clamp(1rem,2vw,2rem);

		@media screen and (min-width: 768px) {
			grid-template-columns: repeat(2,1fr);
		}

		@media screen and (min-width: 1280px) {
			grid-template-columns: repeat(3,1fr);
		}
	}
	
	.card {
		background-color: #fff;
		overflow: hidden;
		transition: transform 0.3s ease,
					box-shadow 0.3s ease;

		&:hover {
			transform: translateY(-0.25rem);
			box-shadow: 0 0.5rem 2rem rgba(0,0,0,0.1);

			img {
				transform: scale(1.03);
			}
		}

		.image {
			overflow: hidden;

			img {
				width: 100%;
				aspect-ratio: 16/10;
				object-fit: cover;
				transition: transform 0.5s ease;
			}
		}

		.content {
			padding: clamp(1rem,2vw,2rem);

			.category,
			.date {
				display: inline-block;
				margin-bottom: 0.75rem;
				color: #6C8399;
				font-size: 0.875rem;
				font-weight: 700;
				text-transform: uppercase;
			}

			h3 {
				margin-bottom: 1rem;
				color: #142035;
				font-size: clamp(1.125rem,1.56vw,1.5rem);
				text-align: left;
			}

			p {
				line-height: 1.6;
			}
		}
	}

	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-template-rows: auto;
		gap: 0.75rem;

		@media screen and (min-width: 768px) {
			grid-template-columns: repeat(3,1fr);
		}

		@media screen and (min-width: 1280px) {
			grid-template-columns: repeat(4,1fr);
		}

		.gallery-item {
			overflow: hidden;
			background-color: #d9d9d9;

			&:hover {

				img {
					transform: scale(1.05);
				}
			}

			img {
				width: 100%;
				aspect-ratio: 1/1;
				object-fit: cover;
				transition: transform 0.5s ease;
			}
		}
	}	
}


#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;
		}
	}
}

/* Сітка для карток на сайті */
.goals .list,
.news .list,
.cards {
    display: grid;
    gap: 24px;
    padding: 0;
    margin: 20px 0;
    list-style: none;
}

/* Обмеження кількості карток у ряд */
.goals .list, .current-goals {
    grid-template-columns: repeat(auto-fill, minmax(362px, 1fr)); 
}

.news .list, .news-grid, .reports-grid {
    grid-template-columns: repeat(auto-fill, minmax(490px, 1fr));
}

/* Стиль самої картки (універсальний) */
.goal-card-item, .news-card-item, .report-card-item, .materials-card {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    padding: 16px;
    display: flex;
    flex-direction: column;
    border: 1px solid #eef2f6;
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Контейнер для зображення у картці */
.card-img-wrap {
    width: 100%;
    height: clamp(180px,21.05vw,320px);
    overflow: hidden;
    background: #cbd5e1;
    margin-bottom: 12px;
}

.card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Елементи всередині карток */
.card-date {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 6px;
}

.goal-card-item h4, .news-card-item h4, .materials-card h4 {
    font-size: 18px;
    color: #1e293b;
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1.4;
}

.goal-card-item p, .news-card-item p, .materials-card p {
    font-size: 14px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 15px;
    flex-grow: 1;
}

/* Кнопка "Детальніше" */
.card-more-btn {
    align-self: flex-start;
    background: #2563eb;
    color: white;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    text-align: center;
    transition: background 0.2s;
}
.card-more-btn:hover { background: #1d4ed8; }

/* Рахунок для внеску (Поточні цілі) */
.card-account {
    background: #f8fafc;
    border-left: 3px solid #10b981;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 0 6px 6px 0;
    margin-top: auto;
}
.card-account span { display: block; font-weight: bold; color: #1e293b; margin-bottom: 2px;}
.card-account mark { background: none; color: #059669; font-family: monospace; font-size: 14px; font-weight: bold;}


/* === СІТКА ГАЛЕРЕЇ (МАСОНΡΙ — ВИПРАВЛЕНО БЕЗ ПУСТОТ) === */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 15px;
    padding: 10px 0;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    background: #f1f5f9;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Створення асиметричного гарного візерунку */
@media screen and (min-width: 600px) {
    .gallery-item:nth-child(4n+1) { grid-column: span 2; }
    .gallery-item:nth-child(5n+3) { grid-row: span 2; }
}


/* === СТИЛІ ДЛЯ ПОВНОЕКРАННОГО ПЕРЕГЛЯДУ ФОТО (LIGHTBOX) === */
#lightbox {
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(15, 23, 42, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
}

#lightbox.active { display: flex; }

.lightbox-content {
    max-width: 85%;
    max-height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightbox-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Кнопки керування */
.lightbox-close {
    position: absolute;
    top: 20px; right: 25px;
    color: #94a3b8; font-size: 40px; font-weight: bold;
    cursor: pointer; transition: color 0.2s;
}
.lightbox-close:hover { color: white; }

.lightbox-arrow {
    position: absolute;
    color: #94a3b8; font-size: 36px; font-weight: bold;
    padding: 20px; cursor: pointer; user-select: none;
    transition: color 0.2s, transform 0.2s;
}
.lightbox-arrow:hover { color: white; transform: scale(1.1); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }




@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;
				}
			}
		}
		
	}
}