.sky-area{
  background:var(--section-bg);
  padding:110px 20px;
  overflow:hidden;
}

.sky-area-wrap{
  max-width:var(--container);
  margin:0 auto;
}

.sky-area-head{
  max-width:780px;
  margin:0 auto 45px;
  text-align:center;
}

.sky-area-head h2{
  margin-bottom:18px;
}

.sky-area-head p{
  max-width:680px;
  margin:0 auto;
  font-weight:600;
}

.sky-area-map-box{
  position:relative;
  width:100%;
  min-height:520px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--border-color);
  box-shadow:var(--shadow);
  background:var(--card-bg);
}

.sky-area-map-box iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  filter:saturate(0.9) contrast(0.95);
}

.sky-area-map-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(44,26,29,0.18);
  z-index:1;
  pointer-events:none;
}

.sky-area-main-pin{
  position:absolute;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:15px 22px;
  border-radius:999px;
  background:var(--accent-btn);
  color:#fff;
  font-size:18px;
  font-weight:800;
  font-family:'Inter',sans-serif;
  box-shadow:0 14px 35px rgba(0,0,0,0.28);
}

.sky-area-main-pin span,
.sky-area-tags span::before{
  width:25px;
  height:25px;
  border-radius:50%;
  background:#fff;
  color:var(--accent-btn);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.sky-area-main-pin svg{
  width:16px;
  height:16px;
}

.sky-area-tags{
  position:absolute;
  left:50%;
  bottom:35px;
  transform:translateX(-50%);
  z-index:3;
  width:86%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}

.sky-area-tags span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:999px;
  background:var(--card-bg);
  color:var(--heading-color);
  font-size:16px;
  font-weight:800;
  font-family:'Inter',sans-serif;
  box-shadow:0 12px 30px rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.45);
}

.sky-area-tags span:first-child{
  background:var(--accent-btn);
  color:#fff;
}

.sky-area-tags span::before{
  content:"";
  width:22px;
  height:22px;
  background:var(--accent-btn);
  position:relative;
}

.sky-area-tags span::after{
  content:"";
  position:absolute;
}

.sky-area-bottom{
  max-width:860px;
  margin:35px auto 0;
  text-align:center;
}

.sky-area-bottom p{
  font-size:17px;
  line-height:1.8;
  font-weight:500;
}

@media(max-width:992px){
  .sky-area-map-box{
    min-height:560px;
  }

  .sky-area-tags{
    width:92%;
  }
}

@media(max-width:768px){
  .sky-area{
    padding:85px 20px;
  }

  .sky-area-map-box{
    min-height:620px;
  }

  .sky-area-main-pin{
    top:32%;
    font-size:16px;
  }

  .sky-area-tags{
    bottom:25px;
    gap:10px;
  }

  .sky-area-tags span{
    font-size:14px;
    padding:10px 14px;
  }
}
@media(max-width:480px){
  .sky-area-map-box{
    min-height:520px;
  }

  .sky-area-main-pin{
    top:18%;
    font-size:14px;
    padding:12px 18px;
  }

  .sky-area-tags{
    width:92%;
    bottom:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .sky-area-tags span{
    justify-content:center;
    font-size:12px;
    padding:10px 8px;
    gap:6px;
  }

  .sky-area-tags span::before{
    width:16px;
    height:16px;
  }
}