/*  GENERAL SETTINGS */
/* ---------------------*/


h2{
	/* Защита при промяна на настройката за големина на шрифта на компа */
	font-size: clamp(14px, 1rem , 18px);
	hyphens: auto;
}

h3{
	/* Защита при промяна на настройката за големина на шрифта на компа */
	font-size: clamp(14px, 0.9rem , 16px);
	
	/* Прави шрифта тънък */
	font-weight: 300; 
	hyphens: auto;
}

p{
	/* Защита при промяна на настройката за големина на шрифта на компа */
	font-size: clamp(12px, 0.85rem , 16px);
	/*Пренася думите с тире!!!*/
	hyphens: auto;
}

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0px;
}

.flex-container-row{
	display: flex;
	flex-direction: row;
}

.flex-container-column{
	display: flex;
	flex-direction: column;
}

.container-relative{
	position: relative;
}

ul {
	margin: 0px;
}

.hidden {
    display: none  !important;
}


/*--LANGUAGE--*/
/*--------------*/

.language-switch{
	display: flex;
	justify-content:center;
	align-items: center;
	position: absolute;
	gap:5px;
	top:clamp(30px, 2.5vw, 50px);
	right: clamp(40px, 3vw, 70px);
	font-size: 0.9rem;
	border-radius: 5px;
	border-style: solid;
	border-color: rgb(1, 59, 106);
	border-width: 0.5px;
	width: 75px;
	height: 25px;
}

.language-switch .active{
	font-weight: 650;
	color: rgb(1, 59, 106);
}

.language-switch a{
	color: rgb(90, 101, 111);
	font-weight: 300;
	text-decoration: none;
}

.language-switch a:hover{
	color: rgb(114, 122, 130);
	font-weight: 650;
}


/*  HEADER  */
/* ---------------------*/

.header-image{
	background-image: 
		linear-gradient(to right, rgba(1, 22, 36, 0.3), rgba(0, 0, 0, 0.0)), 
		url('../images/Header_Footer/hero-landscape.webp'); 
	background-repeat: no-repeat;
	width: 100%;

	/* Задавам формата и РЕЖА ОТГОРЕ (вместо 16/9 давам 16/7.4) !!! */
	/* Защото иначе не се вижда долната част на един екран!!! */
	aspect-ratio: 16/7.4;
	/* Центрирам хоризонтално и ЗАКАЧАМ ЗА ДЪНОТО, за да реже само отгоре */
	background-position: center bottom;

	/* Следващите две свойства са за застраховка */
	background-size: cover;
}

/*  Отмествам всички елементи надолу и надясно  */
.header-padding{
	padding-top: clamp(30px, 2.5vw, 50px);
	padding-left: clamp(40px, 4vw, 70px);
	/* Застраховка padding-ът да не раздува хедера */
	box-sizing: border-box; 
	border-style: solid;
	border-color: rgba(224, 155, 36, 1.0); 
	border-width: 0px 0px 3.5px 0px;
} 

.logo-image{
	width: clamp(150px, 20vw, 300px);
	aspect-ratio: 1116 /378 ;
	object-fit: cover;
}

/* SLOGAN   */
/* "Избутвам" COOL UNDERLINE надолу от текста  */
.header-slogan{
	padding-bottom: 20px;
	margin-left: 10px;
	width: 30vw;
	font-size: 1rem;

	/* Прави шрифта тънък */
	font-weight: 300; 

	/* Малка сянка за контраст */
	text-shadow: 0.3px 0.3px rgb(1, 22, 36);

	/* Трикът за модерен дизайн: добавя малко разстояние между буквите */
	letter-spacing: 1px; 
	
	/* Лек сив нюанс (вместо чисто бяло) прави тънкия шрифт да изглежда по-мек и луксозен */
	color: #e0e0e0; 
	hyphens: auto;
}

/* COOL UNDERLINE за h1 */
.accent-border-h1 {
	background-image: linear-gradient(to right, rgba(224, 155, 36, 1.0), rgba(224, 155, 36, 0.7));
	/* 0-най-вляво,  100% - най-отдолу */
	background-position: 0 100%;
	background-repeat: no-repeat;
	/* width,  height  */
	/*background-size: 5% 4%; */
	background-size:70px 5px;
}

/*  МЕНЮ УСЛУГИ  */
/*-------------------------*/

/* ПОДРЕЖДАМЕ МЕНЮТО ХОРИЗОНТАЛНО */
.header-nav-links-services{
	display: flex;
	flex-direction: row;
	padding-top: 1vw;
	padding-left: 2vw;
	list-style-type: none;
	color: rgb(224, 155, 36);
}

.header-nav-links-services li{
	list-style-position: none;
	align-items: center;
	margin-right: 2.5vw;
}

/* ПОДРЕЖДА ИИКОНИТЕ ИТЕКСТА ВЕРТИКАЛНО -за съответния линк (отделните span-ове),
 на отделни редове */
.header-nav-links-services a {
	display: flex;
	flex-direction: column;
	align-items: center;
	/*  Скъсява блока, за да не заема целия ред и да не се линква погрешка!!!!  */
	width: max-content;
	/* ДИНАМИЧЕН ШРИФТ: Смалява се плавно от 15px до 12px спрямо ширината на екрана 1.1vw*/
	font-size: clamp(10px, 0.8rem, 16px);
	letter-spacing: -0.5px;
}

/* ICONS */
.icon {
	width:2.3rem;
	height:2.3rem; 
	fill: none; 
	stroke: #e0e0e0; 
	stroke-width: 1; 
	stroke-linecap: round; 
	stroke-linejoin: round;
}

/* ПОДРЕЖДА спанове вътре да останат на два реда (column) */
.header-nav-links-services .nav-text {
	display: flex;
	flex-direction: column;
	align-items: center; /* Подравнява текста вляво на мобилни */
	margin-top:10px;
}

/* unvisited link */
.header-nav-links-services a:link,
.header-nav-links-services a:visited {
	color: #e0e0e0;
	font-weight: 400;
	text-shadow: 1px 1px rgb(1, 22, 36);
	/* remove underlines from link */
	text-decoration: none;
}

/* mouse over link and active(for mobile)*/
.header-nav-links-services a:hover,
.header-nav-links-services a:active {
	color: rgba(224, 155, 36, 1.0);
	/*font-weight: 400;*/
	/* remove underlines from link */
	text-decoration: none;
}

/* ЗА ДА "СВЕТНЕ" ЦЕЛИЯТ ЛИНК / иконата и текста */
.header-nav-links-services a:hover .icon {
	stroke: rgba(224, 155, 36, 1.0);
}


/* ---------------------------------------------------------- */
/*  RESPONSIVE SETTINGS (MOBILE)  -  МЕНЮ УСЛУГИ              */
/* ---------------------------------------------------------- */

@media (max-width: 767px) {
	
	/*ЗАРЕЖДАМЕ ПОРТРЕТНИЯ БЕКГРАУНД ХИРОУ ИМИДЖ */
	.header-image {
		/* Сменяме пропорцията на 9/16 за мобилни устройства */
		aspect-ratio: 9/16; 
		
		/* Зареждаме вертикалната фонова снимка (Промени името, ако е друго) */
		background-image: 
			linear-gradient(to right, rgba(1, 22, 36, 0.8), rgba(1, 22, 36, 0.2), rgba(0, 0, 0, 0.0)), 
			url('../images/Header_Footer/hero-portrait.webp');
	}

	.header-padding {
	/* Намаляваме отстъпите, тъй като мобилният екран е тесен */
	padding-top: 10vw;
	padding-left:4vw;
	}

	.header-slogan {
		width: 50vw;
		font-size: 0.8rem;
	}

	

	/* ПОДРЕЖДАМЕ МЕНЮТО ВЕРТИКАЛНО */
	.header-nav-links-services {
		/* Намаляваме малко разстоянието над менюто */
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-top: 20px; 
		padding-left: 5px;
	}
	
	/*  ICONS */
	.icon {
		width:2.5rem;
		height:2.5rem; 
		fill: none; 
		stroke: #e0e0e0; 
		stroke-width: 1; 
		stroke-linecap: round; 
		stroke-linejoin: round;
	}

	/* ПОДРЕЖДАМЕ ИКОНАТА И ТЕКСТА ХОРИЗОНТАЛНО */
	.header-nav-links-services a{
		display: flex;
		flex-direction: row;
		align-items: center;
		/*  Скъсява блока, за да не заема целия ред и да не се линква погрешка!!!!  */
		width: max-content;
		/* ДИНАМИЧЕН ШРИФТ: Смалява се плавно от 15px до 12px спрямо ширината на екрана 1.1vw*/
		font-size: clamp(12px, 0.8rem, 18px);
		font-weight:100;
		letter-spacing: -0.5px;
		padding-bottom: 20px;
	}

	/* ПОДРЕЖДА спанове вътре да останат на два реда (column) */
	.header-nav-links-services .nav-text {
		margin: 0px;
		padding-left: 10px;
		align-items: flex-start; /* Подравнява текста вляво на мобилни */
		text-align: left;
	}
}
/*------------------------------------------------------------------------------*/


/*  ГЛАВНО МЕНЮ  */
/*-------------------------*/

/* Закача менюто за долен десен ъгъл на DIV-Хедера */
/* За тази цел съм добавил клас "container-relative" на DIV-Хедера  - най-горе във файла*/
.absolute-bottom-left{
	position: absolute;
	bottom: 3.0vw;
	left: 4vw;
}

/* ПОДРЕЖДАМЕ МЕНЮТО ХОРИЗОНТАЛНО */
.header-nav-links-main-menu{
	display: flex;
	flex-direction: row;
	padding-left: 2vw;
	list-style-type: none;
	color: #e0e0e0;
}

/* ПОДРЕЖДАМЕ ИКОНАТА И ТЕКСТА ХОРИЗОНТАЛНО */
.header-nav-links-main-menu a {
	display: flex;
	flex-direction: row;
	align-items: center;
	/*  Скъсява блока, за да не заема целия ред и да не се линква погрешка!!!!  */
	width: max-content;
	/* ДИНАМИЧЕН ШРИФТ: Смалява се плавно от 15px до 12px спрямо ширината на екрана 1.1vw*/
	font-size: clamp(10px, .8rem, 16px);
	letter-spacing: -0.5px;
	padding-right: 30px;
	text-shadow: 1px 1px rgb(1, 22, 36);
}

.header-nav-links-main-menu span {
	padding-left: 5px;
}


.icon-main-menu {
	width:2.0rem;
	height:2.0rem; 
	fill: none; 
	stroke-width: 1; 
	stroke: rgba(224, 155, 36, 1.0); 
	stroke-linecap: round; 
	stroke-linejoin: round;
}
		
/* unvisited link */
.header-nav-links-main-menu a:link,
.header-nav-links-main-menu a:visited {
	color: rgba(224, 155, 36, 1.0);
	font-weight: 400;
	/* remove underlines from link */
	text-decoration: none;
}

/* mouse over link and active(for mobile)*/
.header-nav-links-main-menu a:hover,
.header-nav-links-main-menu a:active {
	color: rgb(228, 175, 83);
	font-weight:550;
	/* remove underlines from link */
	text-decoration: none;
}

/* ЗА ДА "СВЕТНЕ" ЦЕЛИЯТ ЛИНК / иконата и текста */
.header-nav-links-main-menu a:hover .icon-main-menu {
	stroke: rgb(227, 175, 87);
	stroke-width: 1.8;
}

/* ---------------------------------------------------------- */
/*  RESPONSIVE SETTINGS (MOBILE)  -  ГЛАВНО МЕНЮ              */
/* ---------------------------------------------------------- */

@media  (max-width: 767px) {
	.absolute-bottom-left{
		bottom: 5.5vw;
	}
	
	/* ПОДРЕЖДАМЕ ИКОНАТА И ТЕКСТА ВЕРТИКАЛНО */
	.header-nav-links-main-menu a {
		display: flex;
		flex-direction: column;
		align-items: center;
		/*  Скъсява блока, за да не заема целия ред и да не се линква погрешка!!!!  */
		width: max-content;
		/* ДИНАМИЧЕН ШРИФТ: Смалява се плавно от 15px до 12px спрямо ширината на екрана 1.1vw*/
		font-size: clamp(8px, 0.6rem, 14px);
		letter-spacing: -0.5px;
		padding-right: 20px;
	}

	.icon-main-menu {
		width:1.5rem;
		height:1.5rem; 
		fill: none; 
		stroke-width: 1; 
		stroke: rgba(224, 155, 36, 1.0); 
		stroke-linecap: round; 
		stroke-linejoin: round;
	}

	.header-nav-links-main-menu span {
		padding-top: 5px;
		padding-left: 0px;
	}

	/* mouse over link and active(for mobile)*/
	.header-nav-links-main-menu a:hover,
	.header-nav-links-main-menu a:active {
		font-weight:750;
	}

	/* ЗА ДА "СВЕТНЕ" ЦЕЛИЯТ ЛИНК / иконата и текста */
	.header-nav-links-main-menu a:hover .icon-main-menu {
		stroke-width: 2;
	}
}

/* ---------------------------------------------------------- */
/*  RESPONSIVE SETTINGS (MOBILE)  -  LANGUAGE-SWITCH              */
/* ---------------------------------------------------------- */

@media (max-width:767px) {
	.language-switch{
		border-color: #e0e0e0; ;
		border-width: 0.5px;
		width: 75px;
		height: 25px;
	}

	.language-switch .active{
		font-weight: 650;
		color: #e0e0e0;
	}

	.language-switch a{
		color:darkgray;
	}
}

.header-border{
	height: 100px;
	width: 100%;
	background: rgb(0,24,43);
	border-style: solid;
	border-color: rgba(224, 155, 36, 1.0); 
	border-width: 3px 0px;
}