/* =====================================

   STUDIO BERNI S.r.l.

   CSS MODERNO

===================================== */





/* =====================================

   VARIABILI

===================================== */



:root {



    --blu-berni:#004B6E;



    --blu-scuro:#00384F;



    --testo:#333333;



    --grigio:#555555;



    --bordo:#d5e2e8;



    --bianco:#ffffff;



    --ombra:0 10px 30px rgba(0,0,0,.08);



}







/* =====================================

   RESET

===================================== */



* {



    margin:0;



    padding:0;



    box-sizing:border-box;



}





html {



    width:100%;



    scroll-behavior:smooth;



}





body {



    min-height:100vh;



    width:100%;



    overflow-x:hidden;



    display:flex;



    flex-direction:column;



    font-family:Arial, Helvetica, sans-serif;



    color:var(--testo);



    background:var(--bianco);



    line-height:1.7;



}







/* =====================================

   HEADER

===================================== */





header {



    width:100%;



    padding:25px 8%;



    display:flex;



    justify-content:space-between;



    align-items:center;



    gap:40px;



    background:white;



    border-bottom:2px solid var(--blu-berni);



}







.logo img {



    width:clamp(280px,25vw,340px);



    max-width:100%;



    height:auto;



    display:block;



}







/* =====================================

   MENU

===================================== */





nav {



    display:flex;



    align-items:center;



    justify-content:flex-end;



    flex-wrap:wrap;



}







nav a {



    color:var(--testo);



    text-decoration:none;



    margin-left:30px;



    font-size:16px;



    font-weight:600;



    transition:.25s ease;



}







nav a:hover {



    color:var(--blu-berni);



}







/* =====================================

   FASCIA ISTITUZIONALE

===================================== */





.fascia-istituzionale {



    width:100%;



    background:var(--blu-berni);



    color:white;



    text-align:center;



    padding:10px 20px;



    font-size:15px;



    font-weight:500;



}







/* =====================================

   HERO

===================================== */





.hero {



    text-align:center;



    padding:clamp(50px,8vw,100px) 10%;



}







.hero h1 {



    color:var(--blu-berni);



    font-size:clamp(30px,5vw,46px);



    margin-bottom:25px;



}







.hero p {



    max-width:850px;



    margin:auto;



    font-size:clamp(16px,2vw,19px);



    color:var(--grigio);



}







/* =====================================

   PULSANTI

===================================== */





.btn {



    display:inline-block;



    margin-top:30px;



    padding:15px 35px;



    background:var(--blu-berni);



    color:white;



    text-decoration:none;



    border-radius:8px;



    font-weight:bold;



    transition:.25s ease;



}







.btn:hover {



    background:var(--blu-scuro);



    transform:translateY(-2px);



}







/* =====================================

   SEZIONI

===================================== */





.servizi-home,

.valori,

.pagina {



    width:100%;



    flex:1;



    padding:clamp(45px,7vw,80px) 10%;



    text-align:center;



}







h1,

h2,

h3 {



    color:var(--blu-berni);



}







h2 {



    margin-bottom:35px;



}







h3 {



    margin-bottom:15px;



}







/* =====================================

   BOX

===================================== */





.box-container {



    display:flex;



    justify-content:center;



    gap:30px;



    flex-wrap:wrap;



}







.box {



    width:320px;



    padding:35px;



    background:white;



    border:1px solid var(--bordo);



    border-top:4px solid var(--blu-berni);



    border-radius:12px;



    box-shadow:var(--ombra);



    transition:.25s ease;



}







.box:hover {



    transform:translateY(-5px);



}







/* =====================================

   TESTI

===================================== */





.testo-centrato {



    max-width:850px;



    margin:auto;



}





.testo-centrato p {



    margin-bottom:25px;



}







/* =====================================

   CONTATTI

===================================== */





.pulsanti {



    display:flex;



    justify-content:center;



    gap:15px;



    flex-wrap:wrap;



    margin:35px 0;



}







.mappa {



    width:100%;



    margin-top:30px;



}







.mappa iframe {



    width:100%;



    height:350px;



    border:0;



    border-radius:12px;



}







/* =====================================

   FOOTER

===================================== */





footer {



    width:100%;



    background:var(--blu-berni);



    color:white;



    text-align:center;



    padding:30px;



    margin-top:40px;



}







/* =====================================

   PAGINA CLIENTE BOLIVAR

===================================== */





.header-cliente {



    justify-content:flex-start;



    align-items:center;



}







.pagina-cliente {



    min-height:65vh;



    display:flex;



    flex-direction:column;



    justify-content:center;



}







.btn-cliente {



    font-size:18px;



    padding:18px 45px;



}







/* =====================================

   TELEFONO MOBILE

===================================== */





.barra-telefono-mobile {



    display:none;



}







/* =====================================

   MOBILE

===================================== */





@media(max-width:768px) {





header {



    flex-direction:column;



    padding:25px 10px;



    gap:5px;



}







.logo img {



    width:340px;



    max-width:100%;



}







header nav {



    width:100%;



    flex-direction:column;



    align-items:center;



    margin-top:10px;



}







header nav a {



    margin:2px auto;



    padding:3px 12px;



    font-size:15px;



}







.fascia-istituzionale {



    font-size:13px;



    padding:8px 10px;



}







.hero {



    padding:45px 8%;



}







.servizi-home,

.valori,

.pagina {



    padding:45px 8%;



}







.box {



    width:100%;



}







.pulsanti .btn {



    width:100%;



}







.btn-cliente {



    width:100%;



    font-size:16px;



}







.barra-telefono-mobile {



    display:block;



    position:fixed;



    bottom:0;



    left:0;



    width:100%;



    background:var(--blu-berni);



    color:white;



    text-align:center;



    padding:8px;



    z-index:9999;



}







.barra-telefono-mobile a {



    color:white;



    text-decoration:none;



    font-size:15px;



}







.barra-telefono-mobile strong {



    font-size:18px;



}







body {



    padding-bottom:65px;



}





}