@font-face{font-family:'Vollkorn';src:url(fonts/vollkorn-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vollkorn';src:url(fonts/vollkorn-500-normal.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url(fonts/open-sans-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url(fonts/open-sans-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Poppins';src:url(fonts/poppins-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;overflow:hidden}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox::backdrop{background:rgba(0,0,0,.88)}
.lightbox img{max-width:88vw;max-height:88vh;width:auto;height:auto}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:44px;line-height:1;cursor:pointer;padding:12px 16px}
.lightbox.single .lb-prev,.lightbox.single .lb-next{display:none}
.lb-close{top:8px;right:8px}.lb-prev{left:4px;top:50%;transform:translateY(-50%)}.lb-next{right:4px;top:50%;transform:translateY(-50%)}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#666;font:400 14px/1.7 'Open Sans',Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:#2ea3f2;text-decoration:none}
h1,h2,h3,h4{font-family:Vollkorn,Georgia,'Times New Roman',serif;font-weight:500;color:#333;margin:0}
p{margin:0}
.wrap{width:80%;max-width:1080px;margin:0 auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.top{height:76px;background:#fff}
.top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{display:block;flex:0 1 380px;margin-top:-1px}
.top ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.top nav a{font:700 14px/14px sans-serif;color:rgba(0,0,0,.6)}
.top nav a.active{color:#000}
.slider{position:relative;height:400px;overflow:hidden;background:#7ebec5}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .5s;display:flex;align-items:center;justify-content:center;text-align:center}
.slide.on{opacity:1}
.slide-text{color:#fff;padding:0 8%}
.slide h2{font-size:100px;line-height:1;font-weight:400;color:#fff;padding-bottom:10px;text-shadow:0 1px 3px rgba(0,0,0,.3)}
.slide p{font-family:Vollkorn,Georgia,serif;font-size:15px;font-weight:400}
.dots{position:absolute;left:0;right:0;bottom:20px;display:flex;justify-content:center;gap:7px}
.dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer}
.dots button.on{background:#fff}
.arrow{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:48px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s;padding:0 22px}
.prev{left:0}.next{right:0}
.slider:hover .arrow,.arrow:focus-visible{opacity:1}
.work{padding:76px 0 76px}
.filter{margin-bottom:40px}
.filter span{display:inline-block;padding:10px 20px;font-size:14px;line-height:14px;color:#82c0c7;background:#f9f9f9;border:1px solid #e2e2e2;border-radius:3px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 5.5%}
.item h2{font-size:18px;line-height:18px;margin-top:10px}
.item h2 a{color:#333}
.thumb{position:relative;display:block;overflow:hidden}
.thumb::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.9);opacity:0;transition:opacity .3s}
.thumb:hover::after{opacity:.6}
.about{padding:77px 0}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 5.5%}
.about h3{font-size:32px;line-height:1.3;color:#111;padding-bottom:10px}
.about p{font:400 16px/28px Poppins,Helvetica,Arial,sans-serif;color:rgba(0,0,0,.64)}
.card{background:#22577a;border-radius:6px;padding:40px}
.about .card p{color:#fff}
.bottom{height:102px;background:#fff}
.project{padding:77px 0 60px}
.project h1{font-size:50px;line-height:1;text-align:center;padding-bottom:10px;margin-bottom:28px}
.intro{margin-bottom:51px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:5.5%;align-items:start}
.photo{display:block;cursor:zoom-in}
.photo img{width:100%}
.btn-blue,.contact-form button{display:inline-block;font:400 20px/34px 'Open Sans',Arial,sans-serif;color:#fff;padding:6px 20px;border:2px solid #fff;border-radius:3px;cursor:pointer}
.btn-blue{background:#0c71c3}
.form-title{font-size:26px;line-height:26px;padding-bottom:16px;margin-top:28px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.contact-form label{display:block}
.contact-form .full{grid-column:1/-1}
.contact-form input,.contact-form textarea{width:100%;display:block;border:0;border-radius:0;background:#eee;color:#555;padding:16px;font:400 14px/1.3 'Open Sans',Arial,sans-serif}
.contact-form textarea{height:150px;resize:vertical}
.contact-form ::placeholder{color:#999;opacity:1}
.contact-form button{grid-column:2;justify-self:end;background:#000}
.form-note{grid-column:1;grid-row:span 1;align-self:center;font-size:12px;color:#999}
.main-form .phone{grid-column:1/-1}
.contact-head{height:260px;display:flex;align-items:center;justify-content:center;background:#555 url(/images/2024/12/lunanuova_san_marco_1.jpg) center/cover}
.contact-head h1{color:#fff;font-size:70px;line-height:1;font-weight:400}
.contact-body{padding:77px 0 60px}
.contact-split{display:grid;grid-template-columns:57.8% 36.7%;justify-content:space-between;align-items:start}
.address{padding:30px;box-shadow:0 2px 18px rgba(0,0,0,.3)}
.address h4{font-size:18px;line-height:1.4;padding-bottom:10px;color:#333}
.address p{padding-bottom:12px;font-size:13px;line-height:1.7}
.address p:last-child{padding-bottom:0}
.address strong{color:#333}
:focus-visible{outline:2px solid #0c71c3;outline-offset:2px}
@media (max-width:980px){
.grid{grid-template-columns:repeat(2,1fr);gap:36px 6%}
.cols{grid-template-columns:1fr;gap:24px}
.split,.contact-split{grid-template-columns:1fr;gap:36px}
.slider{height:300px}
.slide h2{font-size:64px}
}
@media (max-width:600px){
.wrap{width:auto;margin:0 16px}
.logo{flex:1 1 auto;min-width:0}
.top ul{gap:12px}
.top nav a{font-size:13px}
.slider{height:240px}
.slide h2{font-size:42px}
.project h1{font-size:36px}
.contact-head{height:180px}
.contact-head h1{font-size:48px}
.contact-form{grid-template-columns:1fr}
.contact-form button{grid-column:1;justify-self:end}
.form-note{grid-column:1}
.work,.about,.project,.contact-body{padding-top:40px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
