/*
 * Eufonica landing page 
 * SM@03-11-2025 start DEV
*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.cdnfonts.com/css/general-sans');

:root {
	
	--black-default: #330B22;
    --black-hover: #471F36;
    --black-pressed: #5B334A;
    
    --white-default: #F5F0D7;
    --white-hover: #FFFFEB;
    --white-pressed: #FFFFF0;
    
    --purple-default:#941E81;
    --purple-hover:#A83295;
    --purple-pressed:#BC46A9;
    
    --burgundy-default:#330b22;
    --burgundy-hover:#471f36;
    --burgundy-pressed:#BC46A9;
    
    --orange-default: #C04211;
    --orange-hover: #D45625;
    --orange-pressed: #E86A39;
    
    --yellow-default: #ECE208;
    --yellow-hover: #FFF61C;
    --yellow-pressed: #FFFF30;
    
    --disabled-default: #A6A6A6;
    --disabled-strong: #757575;
    
    --body-font: 'General Sans';
    
	--accordion-btn-icon-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23F5F0D7' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
	
}


body {
    margin: 0;
    font-family: var(--body-font);
    font-size: 24px;
    font-style:normal;
    font-weight: 400;
    line-height: 125%;
    color: var(--white-default);
    background-color: var(--black-default);
    background-image:url('/media/eufonica/2026/landing_page/background_26.png');
    background-repeat:no-repeat;
    background-size: cover;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.bg-orange-default {background-color:var(--orange-default);}
.bg-black-default {background-color:var(--black-default);}

.mobile-break {
    display: none;
}


.back-button-container{
	margin-top:33px;
	margin-bottom:27px;
}

.back-button-container a{
	color: var(--white-default);
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 125%; /* 17.5px */
	text-decoration: none;
}
.back-button-container a:hover{
	text-decoration: underline;
}
.back-button-container a:focus{
	border: 2px solid #000;
}


/* -- header -- */
header {
	/*padding-top:24px;*/
	padding-bottom:24px;
}

header .logo{
	font-size:14px;
	font-style:normal;
    font-weight: 600;
    line-height: 125%;
}

header .logo p{ 
	margin-top:22px; 
	margin-left:8px;
}

header .menu-right a{
	color: var(--white-default);
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 125%; /* 20px */
	text-decoration:none;
	margin-right:18px;
}

header .menu-right a:hover{
	color: var(--white-hover);
	text-decoration:underline;
}

/* -- body -- */
.div-title{
	margin-top: 147px;
}
.loghi-contemporanea-container {
	margin-top: 95px;
	margin-bottom: 16px;
}

.div-title h1 {
	font-size: 140px;
    font-style:normal;
    font-weight: 500;
    line-height: 125%;
    color: var(--white-default);
}
.div-title p {
	font-size: 12px;
    font-style:normal;
    font-weight: 600;
    line-height: 125%;
    color: var(--white-default);
}
.div-sub-title-loghi{
	padding-top:0px;
}

.div-sub-title{
	margin-top:20px;
}
.div-sub-title-2 h2,
.div-sub-title h2{
	font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    color: var(--white-default);
}

.div-body-title{
	margin-top:140px;
}
.div-body-title h2{
	font-size: 96px;
    font-style: normal;
    font-weight: 500;
    line-height: 125%;
    color: var(--white-default);
    margin-bottom:20px;
}
.div-body-title p{
	font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 125%;
    color: var(--white-default);
}

.accordion.accordion-flush{
	margin-top:42px;
}

.accordion-item {
	margin-bottom:8px;
	border:none !important;
}
.accordion-header, 
.accordion-button{
	border-radius: 0;
	background-color: var(--burgundy-default) !important;
	color: var(--white-default);
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 125%; /* 30px */
	border:none !important;
}
.accordion-button:hover{
	background-color: var(--burgundy-hover) !important;
}
.accordion-body {
	border-radius: 0;
	background-color: var(--burgundy-default) !important;
	color: var(--white-default);
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 125%; /* 30px */
	border:none !important;
}

.accordion-button:not(.collapsed) {
	color: var(--white-default) !important;
	border:none !important;
	box-shadow:none !important;
}

.accordion-button::after {
    background-image: var(--accordion-btn-icon-white) !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: var(--accordion-btn-icon-white) !important;
    transform: rotate(-180deg);
}

.accordion-button:focus {
    border: 1px solid #FFF;
	box-shadow: 0 0 0 2px #000;
}

.div-body-title-2{
	margin-top:195px;
}
.div-body-title-2 h2{
	color: var(--white-default);
	font-size: 96px;
	font-style: normal;
	font-weight: 500;
	line-height: 125%; /* 30px */
}

.card {
	min-height:315px;
}

.card h3{
	color: var(--white-default);
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 125%; /* 30px */
	margin-bottom:0;
}

.card h4{
	color: var(--white-default);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 125%; /* 30px */
	margin-bottom:0;
}

.card p{
	color: var(--white-default);
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 125%; /* 30px */
	margin-top:16px;
	margin-bottom:0;
	padding-bottom:0;
}

.div-body-title-3{
	margin-top:140px;
}
.div-body-title-3 h2{
	color: var(--white-default);
	font-size: 96px;
	font-style: normal;
	font-weight: 500;
	line-height: 125%; /* 30px */
	text-align:center;
}

.div-body-title-3 p{
	color: var(--white-default);
	font-size: 24px;
	font-style: normal;
	font-weight: 400;
	line-height: 125%; /* 30px */
	text-align:center;
}

.form-control.form-control-lp{
	border-radius: 4px;
	border: 1px solid var(--white-default);
	background-color:transparent;
	color: var(--white-default);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 150%; /* 30px */
	padding: 8px 24px;
	min-width:340px;
}
.form-control.form-control-lp:focus{
	border-radius: 4px;
	border: 1px solid var(--white-default);
	background: rgba(255, 255, 235, 0.10);
	box-shadow: 0 0 0 2px #FFF, 0 0 0 4px #000;
}

.form-control.form-control-lp::placeholder, 
.form-control.form-control-lp::-webkit-input-placeholder {
    color: var(--white-default) !important;
    opacity: 1 !important;
    padding-left:24px;
}
.form-control.form-control-lp:-moz-placeholder,
.form-control.form-control-lp::-moz-placeholder {
    color: var(--white-default) !important;
    opacity: 1 !important;
    padding-left:24px;
}
.form-control.form-control-lp:-ms-input-placeholder {
    color: var(--white-default) !important;
    padding-left:24px;
}
.btn.btn-lp{
	border-radius: 4px;
	padding: 8px 12px !important;
	background-color:#F5F0D7;
	color:#330b22;
	font-family: 'General Sans' !important;
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	line-height: 150%;
}
.btn.btn-lp:hover{
	background-color:#FFFFEB;
	color:#330b22!important;
} 
.btn.btn-lp:focus{
	border-radius: 4px;
	border: 2px solid #FFF;
	box-shadow: 0 0 0 2px #000;
	color:#330b22!important;
} 

/* -- footer -- */

footer {
	margin-top:140px;
}

footer .footer-div-copy, 
footer .footer-div-copy a{
	color: var(--white-default);
	font-size: 12px;
	font-style: normal;
	font-weight: 300;
	line-height: 125%; /* 30px */
	margin-top:120px;
	margin-bottom:40px;
}
footer .footer-div-copy a:hover{
	text-decoration: underline;
}
footer .footer-div-copy a:focus{
	border: 2px solid #000;
}


footer .footer-menu h5{
	color: var(--white-default);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 125%; /* 30px */
	margin-bottom:8px;
}

footer .footer-menu a, 
footer .footer-menu p{
	color: var(--white-default);
	font-size: 16px;
	font-style: normal;
	font-weight: 300;
	line-height: 125%; /* 30px */
	margin-bottom:0;
	text-decoration:none;
}
footer .footer-menu a:hover{
	text-decoration: underline;
}
footer .footer-menu a:focus{
	border: 2px solid #000;
}

.footer-loghi-contemporanea-container{
	margin-top:15px;
}