:root{
  --bg: #0b0b0b;
  --fg: #ffffff;
  --accent: #1e90ff;
  --card: #111;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth; 
  background:#f5f5f5; color:#111;
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.block{position:relative; padding:60px 0}
.slider-block{height:520px; overflow:hidden; color:#fff}
.slider{height:100%; width:100%; position:relative; overflow:hidden}
.slider img{width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0; opacity:0; animation: slide 12s infinite}
.slider img:nth-child(1){animation: slide1 12s infinite}
.slider img:nth-child(2){animation: slide2 12s infinite}
.slider img:nth-child(3){animation: slide3 12s infinite}
@keyframes slide{0%{opacity:0} 5%{opacity:1} 33%{opacity:1} 38%{opacity:0} 100%{opacity:0}}
@keyframes slide1{0%{opacity:0}5%{opacity:1}33%{opacity:1}38%{opacity:0}100%{opacity:0}}
@keyframes slide2{0%{opacity:0}33%{opacity:0}38%{opacity:1}70%{opacity:1}100%{opacity:0}}
@keyframes slide3{0%{opacity:0}70%{opacity:0}75%{opacity:1}100%{opacity:1}}
.top-menu{
  position:absolute; top:0; left:0; right:0; height:72px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px; background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index:10;
}
.top-menu .logo{font-weight:700; font-size:20px}
.top-menu ul{list-style:none; display:flex; gap:20px; margin:0; padding:0}
.top-menu a{color:#fff; text-decoration:none; padding:8px 12px; border-radius:6px}
.top-menu a:hover{background: rgba(255,255,255,.2)}
.top-menu .phone{color:#fff; font-weight:500}

.about-block{background:#fff; color:#333}
.about-block .container{display:flex; gap:40px; align-items:center; padding:40px 20px}
.about-block .director{flex:1; text-align:center}
.about-block .director img{width:260px; height:260px; object-fit:cover; border-radius:10px; border:4px solid #ddd}
.about-block .text{flex:2}
.about-block h2{margin-top:0}

.map-block{background:#eef7ff}
.fullwidth-map{position:relative; padding:40px 0}
.map{height:420px; background:#cbd5e1; border-radius:12px; margin-top:10px}
.map:after{content:""; display:block; height:0; padding-bottom:56.25%}

.buildings-parallax{color:#fff; background-attachment: fixed; background-position: center; background-size: cover;
  background-image:url('images/parallax3.jpg');}
.buildings-parallax .container{padding:40px 20px}
.buildings-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px}
.buildings-list li{background: rgba(0,0,0,.4); padding:10px 14px; border-radius:8px}

.gallery-block{background:#fff; padding-bottom:80px}
.gallery{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px}
.gallery img{width:100%; height:150px; object-fit:cover; border-radius:8px; transition: transform .3s, box-shadow .3s}
.gallery img:hover{transform: scale(1.05); box-shadow:0 6px 14px rgba(0,0,0,.2)}

.card-block .card{display:flex; gap:20px; align-items:center; background:#f7f7f7; padding:20px; border-radius:12px}
.card-block img{max-width:120px; border-radius:8px}
.card{display:flex; gap:20px}
.card-left{flex:0 0 auto}
.card-right{flex:1}
.card-block h2{margin-top:0}

.footer-block{color:#fff; text-align:center; padding:40px 20px; background:#111; background-image:url('images/builders2.jpg'); background-size:cover; background-position:center}
.footer-content{opacity:.95}
.to-top{position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:50%; border:none; background:#1e90ff; color:white; font-size:20px; cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.2); display:none}
@media (max-width: 900px){
  .about-block .container{flex-direction:column; align-items: center}
  .top-menu ul{display:none}
}