@font-face {
	font-family: "Montserrat";
	src: url(../fonts/Montserrat-Bold.ttf);
}

@font-face {
	font-family: "Roboto Light";
	src: url(../fonts/Roboto-Light.ttf);
}

@font-face {
	font-family: "Roboto Medium";
	src: url(../fonts/Roboto-Medium.ttf);
}

@font-face {
	font-family: "Roboto Bold";
	src: url(../fonts/Roboto-Bold.ttf);
}

body {
	font:normal 18px/1.4em sans-serif;
}


a, a:hover {
	color: var(--bs-primary);
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a.tooltip-link, a.tooltip-link:hover {
	color: white !important;
	text-decoration: underline;
}

.normal-text {
	font-family: "Roboto Light";
    font-size: 2.5vh;
    line-height: 1.3;
}

strong {
	font-family: "Roboto Medium";
}

.container-fluid {
	padding: 0 7vw;
}

div.separator {
	width: 10vh;
	background: var(--bs-primary)
}

ul {
	list-style-type: none;
	padding: 0;
}

li {
	margin: 2vh 0;
}

button.back-to-top {
    display: none;
	position: fixed;
	bottom: 20px;
	right: 30px;
	border: none;
    cursor: pointer;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: white;
    width: 7vh;
    height: 7vh;
    font-size: 2.5vh;
    text-align: center;
}

button.back-to-top.on {
	display: inline-block;
}

a.button, input.button {
	display: inline-block ;
	text-decoration: none ;
	font-size: 1.9vh;
	border-radius: 1.2vh;
    padding: 1.75vh 5vh;
    border: 2px solid var(--bs-primary);
    color: var(--bs-primary);
    background-color: transparent;
    text-align: center;
}

ul.sa-list {
	margin-left: 3vw;
}


ul.sa-list li::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	margin-right: 10px;
	color: var(--bs-primary);	
}

ul.sa-list li.list1::before {
	content: "\f560";
}

ul.sa-list li.list2::before {
	content: "\f00c";
}

span.list-title {
	font-family: "Montserrat";
	color: var(--bs-primary);
	text-decoration: underline;
	font-size: 2.2vh;
}


/* pentru ca headerul fix să nu acopere ancorele id: https://stackoverflow.com/a/13138463 . .id-parent și .id-anchor sînt folosite pentru linkurile din pagina home care trebuie să se ducă la o sectiune precisă dintr-o pagină și se foloseste id-ul acelei sectiuni. */
.id-parent {
	position: relative;
}

.id-anchor {
	display: hidden;
	position: absolute;
	top: -16vh;
}

i.fa-circle-question {
	color: var(--bs-primary);
	cursor: pointer;
}

/* div.how-it-works sînt folosite în home și în serviciul. */
div.how-it-works {
	margin-left: 3vh;
}

div.how-it-works i {
	font-family: "Font Awesome 6 Pro";
	font-size: 5vh;
	font-weight: 300;
	color: var(--bs-primary);
}

div.how-it-works .col-9 {
	display: flex;
  	align-items: center;
}

/* HEADER */
a.navbar-brand {
	transition: all 0.6s ease-in-out 0s;
}

a.navbar-brand img {
	width: 25vh;
}

span.navbar-toggler-icon {
	color: white;
}

nav {
	padding-top: 2vh !important; /* doar așa poate fi suprascris bootstrap.*/
	width: 100%;
	background: var(--bs-primary);
	transition: background 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

nav.scrolled {
	padding-top: 2.5vh !important;
	padding-bottom: 1.5vh;
	background-color: black;
}


a.nav-link {
	display: block;
	text-decoration: none;
	color: white !important; /* necesar !important pentru că bootstrap formatează linkurile active */
	float: left;
	margin: 0 2.2vw;
	font-size: 1.8vh;
	padding: 0 0 1vh;
	border-bottom: 2px solid transparent; /*Adăugat pentru că fără această precizare linia apare la hover mai întîi foarte subțire, apoi se îngroașă progresiv - efect inestetic.*/
	transition: all 0.4s ease /*all 0.6s ease-in-out*/;
}

a.nav-link:hover, a.nav-link.active {
	padding: 0 0 0.75vh;
	border-bottom:0.25vh solid;
}

div.navbar-collapse {
	padding-right: 7vw;
	padding-top: 10px;
	transition: all 0.6s ease-in-out 0s;
}

li.nav-item.lang-parent {
	margin-top: 1.5vh;
}

a.lang {
	margin: 0 2.2vh;
	color: white;
	font-size: 70%;
	text-decoration: none;
	display: inline-block;
	border-radius: 1.2vh;
    padding: 0.5vh 1.2vh;
    border: 2px solid white;
	cursor: pointer;
}

/* BODY */
main {
	background: url(../img/generic-back.png);
}

div.header-container {
	padding-top: 75px;
	background-position: left 25%;
	background-repeat: no-repeat;
	background-size: cover;
}

div.header-container .col-12 {
	height: 45vh;
}

h1.header-title {
	font-family: "Montserrat";
	font-size: 4.5vw;
	line-height: 5.2vw;
	text-align: center;
	color: white;
}

h2 {
	font-family: "Montserrat";
	font-size: 3.5vh;
	color: var(--bs-primary);
}

h2::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 300;
	margin-right: 10px;
}

div.underline {
	background: var(--bs-primary);
	width: 100%;
	height: 3px;
}

h3 {
	font-family: "Montserrat";
	font-size: 2.5vh;
	color: var(--bs-primary);
}


/* FOOTER */

div.footer a {
	text-decoration: none ;
	color: inherit ;
}

div.footer a:hover {
	text-decoration: underline;
}

div.footer {
	background: url(../img/footer-back.jpg);
	color: #cfd3e5;
	padding-top: 4vh;
	padding-bottom: 4vh;
}

.footer h3 {
	font-family: "Montserrat";
	font-size: 3.2vh;
	color: white;
}

.footer .separator {
	height: 3px;
	margin-top: 2vh;
}

.footer li {
	font-family: "Roboto Light";
	font-size: 2.2vh;
	line-height: 3vh;
	margin: 2.5vh 0;
}

.footer ul, .social-icons {
	margin-top: 5vh;
}

.footer li i {
	float: left;
}

.footer li a.contact {
	display: block;
	margin-left: 4vh;
}

.footer a:hover {
	text-decoration: underline;
}

.footer .col-lg-4 {
	padding: 0 2vw;
}

.social-icons i {
	font-size: 4vh;
	margin-right: 2vw;
}


div.sub-footer {
	padding-top: 3vh;
	padding-bottom: 3vh;
	background-color: #040411;
}

img.footer-logo {
	width: 20vh;
}

div.copy-parent { /*centrare verticală a textului: https://stackoverflow.com/a/8865463 */
	display: flex;
	justify-content: center;
  	align-items: center;
  	font-family: "Roboto Light";
  	font-size: 2vh;
}

span.copyright {
	color: #666a80;
}

span.firm-name {
	color: white;
}

/*COOKIE CONSENT*/
.offcanvas {
	font-size: 2.2vh;
	line-height: 1.2;
	--bs-offcanvas-height: 17vh;
	font-family: "Roboto Light";
}

.btn-outline-primary:hover {
	background-color: transparent !important; 
	border-color: inherit; 
	color: var(--bs-primary);
}

.btn-primary {
	--bs-btn-color: #eee;
	--bs-btn-hover-color: #eee;
}


@media screen and (max-width:992px) { /* lg bootstrap breakpoint*/
	/* a.navbar-brand img {
		width: 20vh;
	} */

	a.nav-link {
		margin: 0 30px;
	}


	a.nav-link.active {
		border-bottom: 0;
	}


	div.navbar-collapse {
		background-color: black;
		margin-top: 20px; /*pentru că meniul mobil începea prea sus, aproape din logo.*/
		margin-bottom: -20px; /* pentru că sub meniul mobil rămînea o dungă portocalie lată de cîtiva pixeli.*/
	}

	div.copy-parent {
		justify-content: start;
	}

	h1.header-title {
	font-size: 4.5vh;
	line-height: 5.2vh;
	}

	.offcanvas {
		--bs-offcanvas-height: 40vh;
	}
}

@media (prefers-color-scheme: dark) {
	main {
		background: url(../img/generic-back-dark.png);
		color: #ddd;
	}

	.offcanvas {
		background-color: #2c3038;
		color: #ddd;
	}
}