/* ==================================================
   LOKALIZACJE SEO - HOPKOWO
   Wspólny CSS dla podstron miast
================================================== */

.local-content *,
.local-attractions *,
.local-area *,
.local-contact * {

  box-sizing:border-box;

}


/* =========================
   HERO LOKALIZACJI
========================= */

.local-hero {

  display:flex;
  width:100%;
  min-height:650px;

}


.local-hero-text {

  width:50%;

  background:#3f49ac;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:80px;

}


.local-hero-text h1 {

  margin:0;

  color:#ffdd3f;

  font-size:clamp(36px,5vw,62px);

  line-height:1.15;

  font-weight:600;

}


.local-hero-text p {

  margin-top:30px;

  color:#ffdd3f;

  font-family:'Raleway',sans-serif;

  font-size:clamp(15px,1.3vw,18px);

  line-height:1.7;

  max-width:520px;

}



.local-hero-image {

  width:50%;

  overflow:hidden;

}


.local-hero-image img {

  width:100%;

  height:100%;

  object-fit:cover;

}



/* =========================
   TREŚĆ SEO
========================= */


.local-content {

  padding:80px 60px;

  background:#fff8f2;

  text-align:center;

}



.local-content h2 {

  margin:0 auto 30px;

  color:#3f49ac;

  font-size:clamp(26px,3vw,36px);

}



.local-content p {

  max-width:900px;

  margin:20px auto;

  color:#3f49ac;

  font-family:'Raleway',sans-serif;

  line-height:1.8;

  font-size:16px;

}



/* =========================
   ATRAKCJE
========================= */


.local-attractions {

  padding:70px 60px;

  background:#ffdfcb;

  text-align:center;

}


.local-attractions h2 {

  color:#3f49ac;

  font-size:clamp(26px,3vw,36px);

  margin-bottom:50px;

}



.local-cards {

  display:flex;

  gap:30px;

  justify-content:center;

}



.local-card {

  width:33.333%;

  background:#fff8f2;

  border-radius:20px;

  overflow:hidden;

  box-shadow:0 10px 24px rgba(63,73,172,.14);

}



.local-card img {

  width:100%;

  height:260px;

  object-fit:cover;

}



.local-card h3 {

  color:#3f49ac;

  font-size:24px;

  margin:25px 20px 10px;

}



.local-card p {

  color:#3f49ac;

  font-family:'Raleway',sans-serif;

  line-height:1.6;

  padding:0 25px 25px;

}



/* =========================
   PRZYCISKI
========================= */


.local-button {

  display:inline-block;

  margin-top:50px;

  padding:16px 34px;

  background:#ffdd3f;

  color:#3f49ac;

  font-size:14px;

  font-weight:600;

  font-family:'Poppins',sans-serif;

  text-decoration:none;

  cursor:pointer;

  transition:.3s;

}


.local-button:hover {

  transform:translateY(-3px);

  opacity:.9;

}



/* =========================
   OBSZAR DZIAŁANIA
========================= */


.local-area {

  padding:70px 60px;

  text-align:center;

}



.local-area h2 {

  color:#3f49ac;

  font-size:34px;

}



.local-area p {

  max-width:850px;

  margin:25px auto;

  color:#3f49ac;

  font-family:'Raleway',sans-serif;

  line-height:1.7;

}



.locations-list {

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:15px;

  margin-top:40px;

}



.locations-list a {

  padding:12px 25px;

  background:#3f49ac;

  color:#fff;

  text-decoration:none;

  font-weight:600;

  border-radius:30px;

  transition:.3s;

}



.locations-list a:hover {

  background:#ff5c3c;

}



/* =========================
   KONTAKT
========================= */


.local-contact {

  background:#3f49ac;

  padding:70px 20px;

  text-align:center;

}



.local-contact h2 {

  color:#ffdd3f;

  font-size:36px;

}



.local-contact p {

  color:#ffdd3f;

  font-family:'Raleway',sans-serif;

  font-size:17px;

}



.phone-big {

  display:inline-block;

  margin-top:25px;

  color:#3f49ac;

  background:#ffdd3f;

  padding:16px 40px;

  text-decoration:none;

  font-weight:600;

  font-size:22px;

}



/* =========================
   MOBILE
========================= */


@media(max-width:900px){


.local-hero {

  flex-direction:column;

}


.local-hero-text,
.local-hero-image {

  width:100%;

}


.local-hero-text {

  padding:40px 20px;

  text-align:center;

  align-items:center;

}


.local-hero-image {

  height:350px;

}



.local-content,
.local-attractions,
.local-area {

  padding:45px 20px;

}



.local-cards {

  flex-direction:column;

}



.local-card {

  width:100%;

}


.local-card img {

  height:230px;

}


}



@media(max-width:480px){


.local-hero-text h1 {

  font-size:36px;

}


.local-hero-text p {

  font-size:15px;

}


.local-contact h2 {

  font-size:28px;

}


}

.local-hero-text .hero-cta {

  margin-top:40px;

  width:fit-content;

  padding:16px 34px;

  border:none;

  background:#ffdd3f;

  color:#3f49ac;

  font-size:14px;

  font-weight:600;

  font-family:'Poppins',sans-serif;

  text-decoration:none;

  cursor:pointer;

  transition:.3s;

}


.local-hero-text .hero-cta:hover {

  transform:translateY(-3px);

  opacity:.9;

}

.local-card p,
.local-content p,
.local-area p,
.local-contact p {

font-family:'Raleway',sans-serif;

}

@media(max-width:768px){

.local-hero-text h1 {
  text-align:center;
}

.local-content h2,
.local-attractions h2,
.local-area h2,
.local-contact h2 {
  line-height:1.2;
}

}

.local-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

.side-icon {
    width: 300px;      /* wielkość ikon */
    height: auto;
    flex-shrink: 0;
}

.content {
    flex: 1;
    text-align: center;
}

@media (max-width: 768px) {
    .local-content {
        flex-direction: column;
    }

    .content {
        order: 2;
    }

    .side-icon {
        width: 90px;
    }
}