/*
-----------------------------
FONTS
-----------------------------
*/
@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&family=Palanquin+Dark:wght@400;500;600;700&display=swap');

.palanquin-dark-regular {
	font-family: "Palanquin Dark", sans-serif;
	font-weight: 400;
	font-style: normal;
}
  
.palanquin-dark-medium {
	font-family: "Palanquin Dark", sans-serif;
	font-weight: 500;
	font-style: normal;
}
  
.palanquin-dark-semibold {
	font-family: "Palanquin Dark", sans-serif;
	font-weight: 600;
	font-style: normal;
}
  
.palanquin-dark-bold {
	font-family: "Palanquin Dark", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.carlito-regular {
	font-family: "Carlito", sans-serif;
	font-weight: 400;
	font-style: normal;
}
  
.carlito-bold {
	font-family: "Carlito", sans-serif;
	font-weight: 700;
	font-style: normal;
}
  
.carlito-regular-italic {
	font-family: "Carlito", sans-serif;
	font-weight: 400;
	font-style: italic;
}
  
.carlito-bold-italic {
	font-family: "Carlito", sans-serif;
	font-weight: 700;
	font-style: italic;
}  

/*
-----------------------------
GENERALE
-----------------------------
*/
  

:root{
	--lightblue:#3ba6dd;
	--blue:#0b71b9;
	--darkblue:#001ba5;
	--partneryellow:#f3ea3f;
	--ridesyellow:#f3c341;
	--darkyellow:#ec9b1b;
    --fontcolor:#3c3c3c;
	--headlines-font-family:"Palanquin Dark";
	--pharagraph-font-family:"Carlito";
	--pharagraph-small:1.5rem;
	--pharagraph-normal:2rem;
	--pharagraph-medium:2.5rem;
	--pharagraph-large:3rem;
	--title-small:3.2rem;
	--title-normal:6.4rem;
	--title-large:7rem;
}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:10px;
    vertical-align:baseline;
    background: transparent;
	box-sizing: border-box;
}

html{
	font-size: 62.5%;
}

p{
	font-family: "Carlito", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: var(--pharagraph-normal);
	color: var(--fontcolor);
}

h1{
    font-family: "Palanquin Dark", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: var(--title-large);
	line-height: 7rem;
}

h2{
    font-family: "Palanquin Dark", sans-serif;
	font-weight: 600;
	font-style: normal;
	font-size: var(--title-normal);
	line-height: 7rem;
	color: var(--blue);
}

h3{
    font-family: "Palanquin Dark", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: var(--title-small);
	line-height: 3.2rem;
}

h4{
    font-family: "Palanquin Dark", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: var(--pharagraph-large);
	line-height: 3rem;
}

h5{
    font-family: "Carlito", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: var(--pharagraph-medium);
	font-weight: 400;
}

h6{
    font-family: "Carlito", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: var(--pharagraph-small);
	font-weight: 400;
}

a{
	text-decoration: none;
	color: inherit;
}

img{
	max-width: 100%;
	display: block;
}

ul{
	list-style: none;
}

.container {
	max-width: 1240px;
	margin: 0 auto;
}

@media only screen and (max-width: 1240px) {
	.container {
		width: 95%;
	}
}

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 768px) {
	.container {
		width: 95%;
	}

	h1{
		font-size: var(--title-normal);
		line-height: 6.4rem;
	}
	
	h2{
		font-size: var(--title-small);
		line-height: 3.2rem;
	}
	
	h3{
		font-size: var(--title-small);
	}
	
}

@media only screen and (max-width: 480px) {

}


/*
-----------------------------
BUTOANE
-----------------------------
*/


/*ALBASTRU DESCHIS*/

.partner-btn{
	background: linear-gradient(to bottom, var(--darkblue) , var(--lightblue));
	border-radius: 25px;
	box-shadow: 0px 7px 10px #000000;
	color: #ffffff;
	letter-spacing: 2px;
	padding: 15px 30px;
	font-family: var(--pharagraph-font-family);
	font-size: var(--pharagraph-small);
	font-weight: 700;
	text-shadow: 0px 2px 5px #000000;
	transition: .3s ease-out;
}

.partner-btn:hover {
	background: linear-gradient(to bottom, var(--lightblue) , #ffffff);
	box-shadow: 0px 7px 15px #3c3c3c;
	color: #ffffff;
	cursor: pointer;
	text-shadow: 0px -1px 3px #000000;
	transition: .3s ease-out;
}

.partner-btn:active {
	background: linear-gradient(to bottom, #ffffff , var(--lightblue));
	box-shadow: 0px 2px 2px #3c3c3c;
	color: #ffffff;
	cursor: pointer;
	text-shadow: 0px 2px 3px #000000;
	transition: .1s;
}

/*RAMA ALBASTRU DESCHIS*/

.partner-empty-btn{
	background: transparent;
	border-radius: 25px;
	border: solid 3px var(--lightblue);
	filter: drop-shadow(0px 7px 3px #000000);
	color: #ffffff;
	letter-spacing: 2px;
	padding: 15px 30px;
	font-family: var(--pharagraph-font-family);
	font-size: var(--pharagraph-small);
	font-weight: 700;
	text-shadow: 0px 2px 5px #000000;
	transition: .3s ease-out;
}

.partner-empty-btn:hover {
	filter: drop-shadow(0px 7px 5px #2d2d2d);
	color: #ffffff;
	cursor: pointer;
	text-shadow: 0px -1px 3px #000000;
	transition: .3s ease-out;
}

.partner-empty-btn:active {
	filter: drop-shadow(0px 1px 2px #000000);
	color: #ffffff;
	cursor: pointer;
	text-shadow: 0px 2px 3px #000000;
	transition: .1s;
}

/*ALBASTRU*/

.rides-btn{
	background: linear-gradient(to bottom, var(--darkblue) , var(--blue));
	border-radius: 25px;
	box-shadow: 0px 7px 10px #000000;
	color: #ffffff;
	letter-spacing: 2px;
	padding: 15px 30px;
	font-family: var(--pharagraph-font-family);
	font-size: var(--pharagraph-small);
	font-weight: 700;
	text-shadow: 0px 2px 5px #000000;
	transition: .3s ease-out;
}

.rides-btn:hover {
	background: linear-gradient(to bottom, var(--blue) , #9ad5ff);
	box-shadow: 0px 7px 15px #3c3c3c;
	color: #ffffff;
	cursor: pointer;
	text-shadow: 0px -1px 3px #000000;
	transition: .3s ease-out;
}

.rides-btn:active {
	background: linear-gradient(to bottom, #9ad5ff , var(--blue));
	box-shadow: 0px 2px 2px #3c3c3c;
	color: #ffffff;
	cursor: pointer;
	text-shadow: 0px 2px 3px #000000;
	transition: .1s;
}

/*RAMA ALBASTRU*/

.rides-empty-btn{
	background-color: transparent;
	border-radius: 25px;
	border: solid 3px var(--blue);
	filter: drop-shadow(0px 7px 3px #000000);
	color: #ffffff;
	letter-spacing: 2px;
	padding: 15px 30px;
	font-family: var(--pharagraph-font-family);
	font-size: var(--pharagraph-small);
	font-weight: 700;
	text-shadow: 0px 2px 5px #000000;
	transition: .3s ease-out;
}

.rides-empty-btn:hover {
	filter: drop-shadow(0px 7px 5px #2d2d2d);
	color: #ffffff;
	cursor: pointer;
	text-shadow: 0px -1px 3px #000000;
	transition: .3s ease-out;
}

.rides-empty-btn:active {
	filter: drop-shadow(0px 1px 2px #000000);
	color: #ffffff;
	cursor: pointer;
	text-shadow: 0px 2px 3px #000000;
	transition: .1s ease;
}

/*GALBEN DESCHIS*/

.yellow-btn{
	background-color: var(--partneryellow);
	border-radius: 25px;
	box-shadow: 0px 7px 10px #000000;
	color: #000000;
	letter-spacing: 2px;
	padding: 15px 30px;
	font-family: var(--pharagraph-font-family);
	font-size: var(--pharagraph-small);
	font-weight: 700;
	transition: .3s ease-out;
}

.yellow-btn:hover {
	background: linear-gradient(to bottom, var(--partneryellow) , #e9e6ac);
	box-shadow: 0px 7px 15px #3c3c3c;
	cursor: pointer;
	transition: .3s ease-out;
}

.yellow-btn:active {
	background: linear-gradient(to bottom, #e9e6ac , var(--partneryellow));
	box-shadow: 0px 2px 2px #3c3c3c;
	transition: .1s;
}

/*GALBEN*/

.dark-yellow-btn{
	background-color: var(--ridesyellow);
	border-radius: 25px;
	box-shadow: 0px 7px 10px #000000;
	color: #000000;
	letter-spacing: 2px;
	padding: 15px 30px;
	font-family: var(--pharagraph-font-family);
	font-size: var(--pharagraph-small);
	font-weight: 700;
	transition: .3s ease-out;
}

.dark-yellow-btn:hover {
	background: linear-gradient(to bottom, var(--ridesyellow) , var(--partneryellow));
	box-shadow: 0px 7px 15px #3c3c3c;
	cursor: pointer;
	transition: .3s ease-out;
}

.dark-yellow-btn:active {
	background: linear-gradient(to bottom, var(--partneryellow) , var(--ridesyellow));
	box-shadow: 0px 2px 2px #3c3c3c;
	transition: .1s;
}

/*GALBEN GRADIENT*/

.contact-btn{
	background: linear-gradient(to bottom, var(--darkyellow) , var(--partneryellow));
	border-radius: 25px;
	box-shadow: 0px 7px 10px #000000;
	color: #000000;
	letter-spacing: 2px;
	padding: 15px 30px;
	font-family: var(--pharagraph-font-family);
	font-size: var(--pharagraph-small);
	font-weight: 700;
	text-shadow: 0px 2px 5px #000000;
	transition: .3s ease-out;
}

.contact-btn:hover {
	background: linear-gradient(to bottom, var(--partneryellow) , #e9e6ac);
	box-shadow: 0px 7px 15px #3c3c3c;
	text-shadow: 0px -1px 3px #000000;
	cursor: pointer;
	transition: .3s ease-out;
}

.contact-btn:active {
	background: linear-gradient(to bottom, #e9e6ac , var(--partneryellow));
	box-shadow: 0px 2px 2px #3c3c3c;
	text-shadow: 0px 2px 3px #000000;
	transition: .1s;
}

/*
-----------------------------
BUTOANE
-----------------------------
*/

#buton-sus {
	background-color: var(--blue);
	width: 50px;
	height: 50px;
	padding: 10px;
	z-index: 1000;
	position: fixed;
	bottom: 50px;
	right: 0px;
}

/*
-----------------------------
cookie
-----------------------------
*/

.wrapper {
	position: fixed;
	bottom: 50px;
	left: 50px;
	max-width: 340px;
	background: #fff;
	border-radius: 20px;
	padding: 50px 36px;
	transition: all 0.3s ease;
	box-shadow: 0 5px 12px 4px rgba(0,0,0,0.4);
}

  
.wrapper .header-cookies {
	display: flex;
	align-items: center;
	column-gap: 15px;
}
  
.header-cookies h2 {
    font-size: 34px;
    font-weight: 700;
    line-height: 34px;
}

.wrapper .data {
	margin: 16px 0;
}

.data p a{
	font-family: var(--pharagraph-font-famlily);
    font-size: var(--font-size-s);
    color: var(--first-color);
    font-weight: 400;
	padding-top: 14px;
    padding-bottom: 24px;
}

#cookie-consent.show {
  display: block;
}

#cookie-consent {
  display: none;
}

@media only screen and (max-width: 920px) {
	.wrapper {
		bottom: 20px;
		left: 10px;
		max-width: 340px;
	}	
}