/* fonts */

@font-face {
  font-family:"ing_me_regular";
  src:url("../fonts/INGMeWeb-Regular.ttf") format("truetype");
  font-weight:normal;
  font-style:normal
}
@font-face {
  font-family:"ing_me_italic";
  src:url("../fonts/INGMeWeb-Italic.ttf") format("truetype");
  font-weight:normal;
  font-style:normal
}
@font-face {
  font-family:"ing_me_bold";
  src:url("../fonts/INGMeWeb-Bold.ttf") format("truetype");
  font-weight:normal;
  font-style:normal
}

/* <label class="custom-checkbox"><input type="checkbox" id="acord1"><span class="checkmark"></span> <span class="checkbox-label">Am citit și sunt de acord cu regulamentul campaniei.</span></label> */

html,body {
	margin: 0;
	padding: 0;
	font-family:"ing_me_regular";
	color:#000;
	font-size:16px;
}

b {
	font-family:"ing_me_bold";
}

h1,h2,h3,h4 {
	/* color:#eff098; */
	font-family:"ing_me_bold";	
}

h2 {
	font-size:32px;
	/* color:#ff6600; */
}

h3 {
	font-size:24px;
	color:#d20297;
}

h4 {
	font-size:22px;
}

.smaller-p {
	font-size:18px;
}

img {
	max-width: 100%;
}

* {
	box-sizing: border-box;
}

.container {
	max-width:1200px;
}

header {
	padding:15px 0;
}

header .logo {
	max-height:40px;
}

.main {
	padding-top: 0;
	font-size: 18px;
}
.header-text {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
	padding: 20px;
	container-type: inline-size;
}
.header-line-1, .header-line-2, .header-line-3 {
	display: inline-flex;
	clear: both;
	font-size: 18px;
	font-family: "ing_me_bold";
	background-color: #ff6200;
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	margin-bottom: 10px;
	transition: all 0.3s ease;
}
.header-line-1 {
	margin-top: 20px;
	margin-left: 20px;
}
.header-line-2 {
	margin-left: 80px;
}
.header-line-3 {
	margin-left: 40px;
}

.purple-button {
	background-color: #525199;
	color: #fff;
	padding: 10px 20px;
	border-radius: 8px;
	margin-top: 20px;
	text-decoration: none;
	margin-left: 40px;
	transition: all 0.3s ease;
}

.purple-button:hover {
	background-color: #3e3e7a;
}	

@container (width > 576px) {
	.header-line-1, .header-line-2, .header-line-3{
		font-size: 30px;
	}
	.purple-button {
		font-size: 30px;
	}
}

.orange-link {
	color: #FF6200;
	text-decoration: underline;
}
.orange-link:hover {
	text-decoration: none;
}

.section-title {
	position: relative;
	margin-top: 15px;	
	margin-bottom: 15px;
	display:flex;
	justify-content: center;
	align-items: center;
}

.section-title::before {
	content: "";
	display: block;
	width: 90%;
	border-top: 2px solid #ff6200;		
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	z-index: -1;
	opacity: 0.5;
}

@media (min-width: 576px) {
	.section-title::before {
		display: block;
	}
}

.bg-orange .section-title h2 {
	background-color: #FF6200;
	color: #fff;
}

.bg-orange .section-title::before {		
	border-top: 2px solid #fff !important;
	opacity: 1 !important;
	z-index: 0 !important;
}
.section-title h2 {
	position: relative;
	z-index: 1;
	color:#000000;
	background-color: #fff;
	padding:0 20px;	
}

.section-description {
	font-size: 20px;
}

.card-title img {
	max-height: 80px;
	margin: 0 auto 10px;
	display: block;
}

.text-orange {
	color:#FF6200;
}

.bg-orange {
	background-color:#FF6200;
	color: #fff;
	background-image: url(../images/sfoara_bg.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-card {
	background-color:#85D2F9;
}

.video-card {
	background-color:#4D0020;
}

.card {
  container-type: inline-size;
}

.play-icon {
	width: 70px;
	height: 70px;
	cursor: pointer;
	transition: all 0.3s ease;
}
.video-poster-container {
	cursor: pointer;
}
.video-poster-container:hover .play-icon {
	opacity: 0.8;
}
.btn-close{
	background-color: #FF6200;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	opacity: 1;
	background: #FF6200 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}

.map-container{
	container-type: inline-size;
}

@container (width > 576px) {
	.ratio-4x3 {
		--bs-aspect-ratio: calc(9 / 16 * 100%);
	}
}

.text-bigger {
	font-size: 26px;
	font-family:"ing_me_bold";
}
.bold {
	font-family:"ing_me_bold";
}

.map-aspect-ratio {
	aspect-ratio: 2 / 3;
}
@container (width > 576px) {
	.map-aspect-ratio {
		aspect-ratio: 16 / 9;
	}
}

/* Benefits swiper - mobile */
.benefits-swiper {
  overflow: hidden;
}
.benefits-swiper .swiper-slide {
  width: 80%;
}
.benefits-pagination .swiper-pagination-bullet {
  background: #FF6200;
  opacity: 0.5;
}
.benefits-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Video gallery swiper - mobile */
.video-gallery-swiper {
  overflow: hidden;
}
.video-gallery-pagination .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
}
.video-gallery-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}
.benefits-swiper .card-text {
	min-height: 200px;	
}

/* White CTA button - exact SVG shape */
.white-button {
  position: relative;
  isolation: isolate;
  z-index: 0;
  display: grid;
  place-items: center;
  width: clamp(220px, 80vw, 280px);
  aspect-ratio: 312 / 83;
  margin: 12px auto 0;
  padding: 0 24px; /* controls text inset */
  color: #1a1a1a;
  font-family: "ing_me_bold", "ing_me_regular", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  text-decoration: none;	
}

.white-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='312' height='83' viewBox='0 0 312 83' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M312 25.1729C312 25.4465 312 25.6289 312 25.8113C311.778 31.7397 310.816 39.857 309.707 49.0689C308.597 57.9158 307.71 61.7465 306.378 66.854C305.047 71.9616 303.124 75.4274 299.943 78.0724C293.582 83.2711 284.114 82.9975 265.622 82.9975L38.3898 78.4372C24.3357 78.0724 17.2347 77.89 12.0569 74.5154C10.1337 73.2385 8.43243 71.7792 6.95306 69.955C3.10669 65.2123 2.51494 61.3817 1.1835 47.9744C0.813656 43.9613 0.443812 39.5834 0.221906 36.4824C0.147937 35.2967 0.0739687 34.2023 0 33.1078C0 30.554 0 30.1892 0 28.5475C0 28.0003 0 27.0882 0 26.541C0.295875 23.1663 1.03556 20.1565 2.44097 17.7852C3.10669 16.6907 3.92034 15.6874 4.734 14.6842C5.62162 13.6809 6.50925 12.7688 7.54481 11.948C13.0925 7.4789 21.377 6.74925 37.872 5.56357C86.9872 2.18895 216.284 0 265.178 0C271.613 0 277.161 0 281.969 0.182412C294.765 0.729649 302.31 2.37136 307.192 7.75252C307.562 8.20855 307.932 8.57337 308.228 9.0294C308.228 9.0294 308.376 9.21181 308.376 9.30302C310.595 12.404 311.63 16.1435 311.926 21.0686C311.926 22.3455 312 23.8048 311.926 25.2641L312 25.1729Z' fill='%23ffffff'/%3E%3C/svg%3E");
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.12));
  z-index: -1;
  pointer-events: none;
}

.white-button:hover::before {
  filter: brightness(0.98) drop-shadow(0 8px 22px rgba(0, 0, 0, 0.16));
}

.white-button:active::before {
  filter: brightness(0.96) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.12));
}

.blue-button {
	position: relative;
	isolation: isolate;
	z-index: 0;
	display: inline-grid;
	place-items: center;
	width: clamp(100px, 60vw, 180px);
	aspect-ratio: 239 / 101;
	margin: 6px auto;
	padding: 0 22px; /* text inset */
	background: transparent;
	border: none;
	color: #2B2B2B;
	font-family: "ing_me_bold", "ing_me_regular", Arial, sans-serif;
	font-size: clamp(14px, 2vw, 16px);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.blue-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg width='239' height='101' viewBox='0 0 239 101' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M239 30.6321C239 30.965 239 31.187 239 31.409C238.83 38.623 238.093 48.5007 237.243 59.7103C236.394 70.4759 235.714 75.1373 234.694 81.3525C233.674 87.5677 232.201 91.7852 229.764 95.0038C224.891 101.33 217.638 100.997 203.473 100.997L29.4075 95.4477C18.6418 95.0038 13.2022 94.7818 9.23589 90.6753C7.76268 89.1215 6.45946 87.3457 5.32622 85.126C2.3798 79.3548 1.92651 74.6934 0.906591 58.3785C0.623281 53.4951 0.339972 48.1678 0.169986 44.3943C0.113324 42.9515 0.0566619 41.6196 0 40.2878C0 37.1802 0 36.7363 0 34.7385C0 34.0726 0 32.9628 0 32.2968C0.226648 28.1904 0.793267 24.5278 1.86984 21.6422C2.3798 20.3104 3.00308 19.0895 3.62636 17.8687C4.30631 16.6479 4.98625 15.538 5.77952 14.5391C10.0292 9.10083 16.3753 8.21294 29.0109 6.77013C66.6344 2.66366 165.679 0 203.133 0C208.063 0 212.312 0 215.995 0.221971C225.798 0.887886 231.577 2.88563 235.317 9.43378C235.6 9.98871 235.884 10.4327 236.11 10.9876C236.11 10.9876 236.224 11.2096 236.224 11.3205C237.923 15.0941 238.717 19.6445 238.943 25.6377C238.943 27.1915 239 28.9673 238.943 30.743L239 30.6321Z' fill='%2385D2F9'/%3E%3C/svg%3E");
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.12));
	z-index: -1;
	pointer-events: none;
}

.blue-button:hover::before {
	filter: brightness(0.98) drop-shadow(0 8px 22px rgba(0, 0, 0, 0.16));
}

.blue-button:active::before {
	filter: brightness(0.96) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.12));
}

.blue-button:focus { outline: none; }

/* Active state border */
.blue-button.active::after {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	background-image: url("data:image/svg+xml,%3Csvg width='239' height='101' viewBox='0 0 239 101' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M239 30.6321C239 30.965 239 31.187 239 31.409C238.83 38.623 238.093 48.5007 237.243 59.7103C236.394 70.4759 235.714 75.1373 234.694 81.3525C233.674 87.5677 232.201 91.7852 229.764 95.0038C224.891 101.33 217.638 100.997 203.473 100.997L29.4075 95.4477C18.6418 95.0038 13.2022 94.7818 9.23589 90.6753C7.76268 89.1215 6.45946 87.3457 5.32622 85.126C2.3798 79.3548 1.92651 74.6934 0.906591 58.3785C0.623281 53.4951 0.339972 48.1678 0.169986 44.3943C0.113324 42.9515 0.0566619 41.6196 0 40.2878C0 37.1802 0 36.7363 0 34.7385C0 34.0726 0 32.9628 0 32.2968C0.226648 28.1904 0.793267 24.5278 1.86984 21.6422C2.3798 20.3104 3.00308 19.0895 3.62636 17.8687C4.30631 16.6479 4.98625 15.538 5.77952 14.5391C10.0292 9.10083 16.3753 8.21294 29.0109 6.77013C66.6344 2.66366 165.679 0 203.133 0C208.063 0 212.312 0 215.995 0.221971C225.798 0.887886 231.577 2.88563 235.317 9.43378C235.6 9.98871 235.884 10.4327 236.11 10.9876C236.11 10.9876 236.224 11.2096 236.224 11.3205C237.923 15.0941 238.717 19.6445 238.943 25.6377C238.943 27.1915 239 28.9673 238.943 30.743L239 30.6321Z' fill='none' stroke='%23FF6200' stroke-width='4'/%3E%3C/svg%3E");
	z-index: 0;
	pointer-events: none;
}

/* Ensure map overlay buttons use the SVG style */
.map-buttons .blue-button { background: transparent; border: none; }

.white-button:focus {
  outline: none;
}

.pin {
	display: inline-block;
	position: absolute;
  height: 40px;
	aspect-ratio: 37 / 48;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='37' height='48' viewBox='0 0 37 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5 0.442871C13.5952 0.448425 8.89289 2.39557 5.42467 5.85712C1.95645 9.31868 0.00556415 14.012 0 18.9073C0 34.7071 16.8182 46.6397 17.5351 47.1391C17.8178 47.3368 18.1547 47.4429 18.5 47.4429C18.8453 47.4429 19.1822 47.3368 19.4649 47.1391C20.1818 46.6397 37 34.7071 37 18.9073C36.9944 14.012 35.0435 9.31868 31.5753 5.85712C28.1071 2.39557 23.4048 0.448425 18.5 0.442871ZM18.5 12.193C19.8305 12.193 21.1312 12.5868 22.2375 13.3246C23.3438 14.0623 24.206 15.111 24.7152 16.3379C25.2244 17.5648 25.3576 18.9148 25.098 20.2172C24.8384 21.5197 24.1977 22.7161 23.2569 23.6551C22.3161 24.5941 21.1174 25.2336 19.8124 25.4927C18.5075 25.7518 17.1548 25.6188 15.9256 25.1106C14.6963 24.6024 13.6457 23.7418 12.9065 22.6376C12.1673 21.5335 11.7727 20.2353 11.7727 18.9073C11.7727 17.1266 12.4815 15.4188 13.7431 14.1596C15.0047 12.9004 16.7158 12.193 18.5 12.193Z' fill='%23FF6200'/%3E%3C/svg%3E");  
  z-index: 2;
	cursor: default;
  pointer-events: none; /* prevent the large bounding box from blocking */
}

.pin .label {
	position: absolute;
	bottom: 90%;
	left: 50%;
	transform: translateX(-50%);
	background-color: #FF6200;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
  pointer-events: auto; /* allow clicking label only */
}

@container (width < 768px) {
	.pin .label {
		font-size: 12px;
	}
}

.map-buttons {
	position: relative;
	width: 100%;
	text-align: center;
	top: -50px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}


/* Mobile: place the two map buttons on the same row */
@media (max-width: 575.98px) {
	.map-buttons {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
		flex-wrap: nowrap;
	}
	.map-buttons .blue-button {
		width: auto; /* override base width */
		flex: 1 1 48%;
		max-width: 48%;
		padding: 0 10px;
		font-size: 14px;
	}
}

.image-container {
	container-type: inline-size;
	width: 100%;
	height: 100%;
}
.image-container img{
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.hidden{
	opacity: 0;
}
.map-title{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 24px;
    font-family: "ing_me_bold";
    z-index: 3;
    padding: 20px 40px;
    pointer-events: none; /* do not block pin clicks */
}
@container (width < 576px) {
	.map-title{
		padding: 20px 40px;
		font-size: 18px;
	}
}