/* fonts */
:root {
	--bp-sm: 576px;
	--bp-md: 768px;
	--bp-lg: 992px;
	--bp-xl: 1200px;
}

@font-face {
  font-family:"ing_me_regular";
  src:url("../ingro/lp/blackfriday2025/INGMeWeb-Regular.ttf") format("truetype");
  font-weight:normal;
  font-style:normal
}
@font-face {
  font-family:"ing_me_italic";
  src:url("../ingro/lp/blackfriday2025/INGMeWeb-Italic.ttf") format("truetype");
  font-weight:normal;
  font-style:normal
}
@font-face {
  font-family:"ing_me_bold";
  src:url("../ingro/lp/blackfriday2025/INGMeWeb-Bold.ttf") format("truetype");
  font-weight:normal;
  font-style:normal
}
@font-face {
  font-family:"ing_display_bold";
  src:url("../ingro/lp/blackfriday2025/INGdisplay-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;
	overflow:hidden;
}

header {
	padding:15px 0;
}

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

.main {
	padding-top: 0;
	font-size: 18px;
}
.hero {
	background-color: #ff6200;
	padding: 0;
	position: relative;	
}
.hero img{
	display: block;
}
.header-line-1 {
	font-size:36px;
	font-family:"ing_display_bold";	
	text-align:center;
}
.header-line-2 {
	font-size:20px;
	color:#fff;
	font-family:"ing_me_regular";
	text-align:center;
}
.header-line-2 span {
	color:#000;
	font-family:"ing_me_bold";
}
@media (min-width: 576px) {
	.header-line-1 {
		font-size: 28px;
		text-align:left;
	}
	.header-line-2 {
		font-size: 18px;
		text-align:left;
	}
}
@media (min-width: 768px) {
	.header-line-1 {
		font-size: 40px;
	}
	.header-line-2 {
		font-size: 20px;
	}
}
@media (min-width: 992px) {
	.header-line-1 {
		font-size: 56px;
	}
	.header-line-2 {
		font-size: 28px;
	}
}
@media (min-width: 1200px) {
	.header-line-1 {
		font-size: 68px;
	}
	.header-line-2 {
		font-size: 36px;
	}
}

.countdown-card{
	background-image: url('../ingro/lp/blackfriday2025/blob_date.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	color:#fff;
	padding:10px;
	border-radius:10px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: center;
	gap:20px;
	
}

.time-segment{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.time-value{
	font-size:24px;
	font-family:"ing_me_bold";
}

.time-label{
	font-size:14px;	
}

.time-divider{
	font-size:30px;
	color:#ff6200;	
}
@media (min-width: 992px) {
	.time-value{
		font-size:32px;
	}
	.time-label{
		font-size:16px;
	}
	.time-divider{
		font-size:40px;
	}
}
@media (min-width: 1200px) {
	.time-value{
		font-size:36px;
	}
	.time-label{
		font-size:18px;
	}
	.time-divider{
		font-size:48px;
	}
}

.game-info {
	padding: 20px 0;
	text-align:center;
}
.game-info h2{
	font-size:24px;
	font-family:"ing_me_bold";
	color:#000;
	width:60%;
	margin:0 auto;
}
.game-info p{
	color: #333333;
}

@media (min-width: 576px) {
	.game-info h2{
		width:80%;
	}
}
@media (min-width: 768px) {
	.game-info h2{
		width:100%;
	}
}
.sound-buttons {
	background-image: url('../ingro/lp/blackfriday2025/blob_sound.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	color:#fff;
	padding:10px;
	border-radius:10px;
	display:flex;
	flex-direction:row;
	align-items:center;
	justify-content: center;
	gap:10px;
}
.sound-button {
	font-size:14px;
	font-family:"ing_me_regular";
	line-height:1.2;
	color: #fff;;
	padding:5px 10px;
	border-radius:100vw;
	cursor:pointer;
	transition:all 0.3s ease;
}
.sound-button.active {
	background-color: #fff;
	color:#6e26f3;
}

.game{
	position:relative;	
}
.hay-stack-container{
	position:relative;
	width:100%;
	height:175px;
}
.hay-stack{	
	position:absolute;
	width:110px;
	height:auto;
	z-index: 5;
}
.hay-stack.being-dragged {
	z-index: 1000;
}
#hay-1{	
	rotate:-10deg;
	top:10%;
	left:15%;
	
}
#hay-2{
	rotate:-30deg;
	bottom:10%;
	right:15%;
	
	
}
@media (min-width: 576px) {
	.hay-stack{			
		width:100px;		
	}
	#hay-1{
		top:0;
		left:5%;
		rotate:-10deg;
	}
	#hay-2{		
		top:40%;
		right:5%;
		
		rotate:-30deg;
	}
}
.goat-area{		
	height:auto;	
	border-radius:10px;	
	aspect-ratio: 90/135;	
	position:relative;
	z-index:1;
}
@media (min-width: 768px) {
	.hay-stack{			
		width:120px;		
	}
}
@media (min-width: 992px) {
	.hay-stack{			
		width:150px;		
	}
}
@media (min-width: 1200px) {
	.hay-stack{			
		width:170px;		
	}
}

.goat{
	width:100%;
	height:100%;
	background-image: url('../ingro/lp/blackfriday2025/capra-sprite.png');
	background-size: auto 100%;
	background-position: left;
	background-repeat: no-repeat;
}
.goat.waiting {
	background-position: left
}
.goat.eating {
	background-position: right;
}
.goat.mouth-open {
	background-position: center;
}
.drop-zone {
	position: absolute;
	top: 0;
	right: 0;	
	width: 100%;
	height: 50%;
	border: 3px dashed transparent;
	border-radius: 20px;
	transition: all 0.3s ease;
	pointer-events: none;
	z-index: 2;			
}
.speech-section{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	background-color:#F2E9FF;
	border-radius:20px 20px 20px 20px;
	z-index:1001;
	padding:20px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.speech-section .cta-button{
	background-color:#ff6200;
	color:#fff;
	padding:10px 20px;
	border-radius:100vw;
	cursor:pointer;
	transition:all 0.3s ease;
	text-decoration:none;
	position:absolute;
	top:100%;
	left:50%;
	transform:translate(-50% , -50%);
}
@media (min-width: 576px) {
	.speech-section::before{
		content: '';
		position:absolute;
		left: 0;
		top:20%;
		transform:translateX(-90%);
		width: 40px;
		height: 40px;
		background-image: url('../ingro/lp/blackfriday2025/pointy.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 1002;
	}
}
.goat-fade{
	width:100%;
	height: auto;
	overflow:hidden;
	aspect-ratio: 1/1;
	position:relative;
}
.goat-fade::after{
	content: '';
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:30%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	z-index:1001;
}
.goat-spacer{
	height:0;
}
@media (min-width: 576px) {
	.goat-spacer{
		height:100px;
	}
}
@media (min-width: 768px) {
	.goat-spacer{
		height:110px;
	}
}
@media (min-width: 992px) {
	.goat-spacer{
		height:120px;
	}
}

.goat-fade-left{
	width:100%;
	height: 100%;
	overflow:hidden;	
	position:relative;	
}
.goat-fade-left::after{
	content: '';
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:20%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
	z-index:1001;
}

.goat-fade-left .goat-area{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
}
.goat-fade-left .goat{
	width:100%;
}


.offer-card{
	width:100%;
	min-height: 150px;
	background-image: url('../ingro/lp/blackfriday2025/blob_offer_mobile.svg');
	background-size: 100% 100%;
	background-position: center;
	background-repeat: no-repeat;
	color:#fff;
	padding:10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.offer-card-content{
	width:290px;
	line-height:1.2;	
	cursor:pointer;
}
.offer-card.blurred {	
	transition:all 0.3s ease;
}
.offer-card b{
	font-family:"ing_me_bold";
}
@media (min-width: 576px) {
	.offer-card{
		min-height: 120px;
	}
	.offer-card-content{
		font-size:12px;
	}
}
@media (min-width: 768px) {
	.offer-card{
		min-height: 150px;
	}
	.offer-card-content{
		font-size:14px;
	}
}
@media (min-width: 992px) {
	.offer-card{
		min-height: 120px;
		background-image: url('../ingro/lp/blackfriday2025/blob_offer_desktop.svg');
	}
	.offer-card-content{
		font-size:16px;
		width:330px;
	}
}
@media (min-width: 1200px) {
	.offer-card{
		min-height: 150px;
	}
	.offer-card-content{
		font-size:18px;
		width:370px;
	}
}

.gift{
	position:absolute;
	width:100px;
	height:auto;
	z-index: 5;
}
.gift-1{
	top:15%;
	left:10%;
	width: 30%;
	rotate: 40deg;
}
.gift-2{
	bottom:20%;
	left:0%;
	width: 20%;
	rotate: -20deg;
}
.gift-3{
	top:20%;
	right: -18%;
	width: 40%;
	rotate: 50deg;
	z-index: 0;
}
.gift-4{
	top:30%;
	right:5%;
	z-index: -1;
	width: 30%;
}
.gift-5{
	bottom: 0;
	left:30%;
}
.gift-6{
	top:40%;
	left:-10%;
	width: 30%;
	rotate: -50deg;
	z-index: 0;
}
.gift-7{
	top:10%;
	right: -10%;
	/* rotate: 50deg; */
	width: 30%;
	z-index: -1;
}
.gift-8{
	bottom:30%;
	left:25%;
}
.gift-9{
	bottom:10%;
	right: -10%;
	width: 25%;
	rotate: 50deg;
	z-index: 1;
}

.discount{
	position:absolute;
	font-size:48px;
	font-family:"ing_me_bold";	
}
.discount.d-1{
	bottom: 10%;
	left:10%;
	color: #ff6200;
	rotate: -30deg;
}
.discount.d-2{
	bottom: 20%;
	left:27%;
	color: #000000;	
	rotate: 30deg;
}
.discount.d-3{
	bottom: 50%;
	right: 50%;
	color: #ff6200;	
	rotate: -10deg;
}
.discount.d-4{
	top: 67%;
	right: 2%;
	color: #000000;	
	rotate: 10deg;
}
.gift, .discount{
	display: none;	
}
@media (min-width: 576px) {
	.gift, .discount{
		display: block;
	}
}
.after-offers{
	opacity: 0;
	transition:all 0.3s ease;
}