/* ============================================================
   LAYOUT
   ============================================================ */

.layout-boxed .body-innerwrapper {
  max-width: 1020px;
  margin: 0 auto;
  box-shadow: none;
}

/* ============================================================
   HEADER & TOPBAR
   ============================================================ */

#sp-header-topbar {
  position: relative;
  z-index: 111;
  background: #663200;
  padding: 10px;
}

#sp-header-topbar .container-inner {
  border-bottom: none;
}

#sp-header-topbar a,
#sp-header-topbar .sp-contact-info {
  color: #fff !important;
}

/* ============================================================
   MAIN & BODY
   ============================================================ */

#sp-main {
  background: #98cbcb;
}

#sp-main-body {
  padding: 10px 0;
  min-height: 60vh;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1rem;
}

/* ============================================================
   FOOTER
   ============================================================ */

#sp-footer {
  text-align: center;
}

.menufooter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.menufooter li {
  margin: 0;
}

.menufooter a {
  text-decoration: none;
}

/* ============================================================
   WELCOME SECTION
   ============================================================ */

.welcome-section {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 40px;
}

.welcome-image {
  flex: 0 0 20%;
  display: flex;
}

.welcome-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.welcome-content {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.welcome-content h1 {
  text-align: center;
}

.welcome-content p {
  margin-bottom: 18px;
}

/* ============================================================
   TOP GALLERY
   ============================================================ */

.top-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.top-gallery img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* ============================================================
   HOUSE CONTENT SECTION
   ============================================================ */

.house-content-section {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.side-image {
  flex: 0 0 25%;
  display: block;
}

.side-image img {
  width: 100%;
  height: auto;

  border-radius: 8px;
}

.house-content {
  flex: 1;
}

.house-content h1 {
  text-align: center;
}

.house-content p {
  margin-bottom: 20px;
}

/* ============================================================
   ITEM 1002 OVERRIDES
   ============================================================ */

.itemid-1002 .top-gallery {
  grid-template-columns: repeat(1, 1fr);
  margin-bottom: 50px;
}

.itemid-1002 .top-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.itemid-1002 .side-image {
  flex: 0 0 25%;
  display: block;
}

.itemid-1002 .side-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* ============================================================
   ROOMS SECTION
   ============================================================ */

.top-rooms-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.room-item img:first-child,
.side-room-image img:first-child {
  display: block;
  margin: 0 auto 15px;
}

.room-item img:last-child,
.side-room-image img:last-child {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.rooms-content-section {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.side-room-image {
  flex: 0 0 25%;
}

.rooms-content {
  flex: 1;
}

.rooms-content h1 {
  text-align: center;
}

.rooms-content p {
  margin-bottom: 20px;
}

/* ============================================================
   GARDEN SECTION
   ============================================================ */

.garden-top-image {
  margin-bottom: 50px;
}

.garden-top-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.garden-content-section {
  display: flex;
  align-items: stretch;
  gap: 40px;
}

.garden-side-image {
  flex: 0 0 25%;
  display: flex;
}

.garden-side-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
}

.garden-content {
  flex: 1;
}

.garden-content h1 {
  text-align: center;
}

.garden-content p {
  margin-bottom: 20px;
}

/* ============================================================
   TARIFF SECTION
   ============================================================ */

.tariff-section {
  padding: 60px 20px;
}

.tariff-content-section {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.tariff-side-images {
  flex: 0 0 22%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.tariff-side-images img {
  width: 100%;

  display: block;
  border-radius: 8px;
}

.tariff-content {
  flex: 1;
}

.tariff-content h1 {
  text-align: center;
}

.tariff-content h2 {
  margin-top: 35px;
  font-size: 1.1rem;
  font-weight: normal;
}

.tariff-content p {
  margin-bottom: 20px;
}

.price td,
.price tr {
  border: 1px solid #213f3f;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 40px 0;
  overflow: hidden;
  border-radius: 8px;
}

.price-table tr:nth-child(even) {
  background: #f7f7f7;
}

.price-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
}

.price-table td:last-child {
  text-align: right;
  font-weight: bold;
  white-space: nowrap;
}

.center-text {
  text-align: center;
  margin: 40px auto;
}

/* ============================================================
   VISIT SECTION
   ============================================================ */

.visit-section h1 {
  text-align: center;
}

.visit-section p {
  text-align: center;
  margin-bottom: 30px;
}

.full-image {
  margin: 50px 0;
}

.full-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* ============================================================
   IMAGE ROWS (shared)
   ============================================================ */

.image-row {
  display: grid;
  gap: 20px;
  margin: 40px 0;
}

.two-images {
  grid-template-columns: repeat(2, 1fr);
}

.three-images {
  grid-template-columns: repeat(3, 1fr);
}

.image-item img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

/* ============================================================
   SPLIT SECTIONS (Activities)
   ============================================================ */

.split-section {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 60px 0;
}

.split-image {
  flex: 0 0 38%;
}

.split-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.split-content {
  flex: 1;
}

/* ============================================================
   DIRECTIONS SECTION
   ============================================================ */

.directions-split {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-bottom: 70px;
}

.reverse-layout {
  flex-direction: row-reverse;
}

.directions-image {
  flex: 0 0 38%;
}

.directions-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.directions-content {
  flex: 1;
}

.map-section {
  margin: 60px 0 80px;
}

.map-section img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.driving-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.step span {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 50%;
  background: #222;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.step p {
  margin: 0;
}

.directions-note {
  margin-top: 30px;
  font-style: italic;
}

/* ============================================================
   MEDIA QUERIES
   ============================================================ */

@media (max-width: 768px) {
  /* Welcome */
  .welcome-section {
    flex-direction: column;
    gap: 30px;
    padding: 40px 20px;
  }

  .welcome-image,
  .welcome-content {
    flex: 0 0 100%;
    width: 100%;
  }

  .welcome-image img {
    height: auto;
  }

  .welcome-content {
    order: 1;
  }

  .logo-image {
    height: auto !important;
  }

  /* Galleries */
  .top-gallery,
  .top-rooms-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* House */
  .house-content-section {
    flex-direction: column;
  }

  .house-content {
    order: 1;
  }

  .side-image img {
    height: auto;
  }

  /* Rooms */
  .rooms-content-section {
    flex-direction: column;
  }

  .rooms-content {
    order: 1;
  }

  .room-item img:last-child,
  .side-room-image img:last-child {
    height: auto;
  }

  /* Garden */
  .garden-content-section {
    flex-direction: column;
  }

  .garden-content {
    order: 1;
  }

  .garden-top-image img,
  .garden-side-image img {
    height: auto;
  }

  /* Tariff */
  .tariff-content-section {
    flex-direction: column;
  }

  .tariff-content {
    order: 1;
  }

  .tariff-side-images {
    width: 100%;
    flex-direction: row;
    gap: 20px;
  }

  .tariff-side-images img {
    width: 50%;
    height: auto;
  }

  .price-table td {
    padding: 12px;
    font-size: 14px;
  }

  /* Visit */
  .visit-section {
    padding: 40px 20px;
  }

  /* Image rows */
  .two-images,
  .three-images {
    grid-template-columns: 1fr;
  }

  .image-item img,
  .full-image img {
    height: auto;
  }

  /* Split sections */
  .split-section {
    flex-direction: column;
  }

  .split-image {
    width: 100%;
  }

  .activities-section {
    padding: 40px 20px;
  }

  /* Directions */
  .directions-split,
  .reverse-layout {
    flex-direction: column;
  }

  .directions-image {
    width: 100%;
  }

  .directions-section {
    padding: 40px 20px;
  }

  /* Shared */
  .left-image {
    order: 2;
  }
  .right-image {
    order: 3;
  }
  .left-room-image {
    order: 2;
  }
  .right-room-image {
    order: 3;
  }
  .left-garden-image {
    order: 2;
  }
  .right-garden-image {
    order: 3;
  }
  .left-tariff-images {
    order: 2;
  }
  .right-tariff-images {
    order: 3;
  }
}
.btn {
  background: #663200;
  border: 1px solid #663200;
}

.lang {
  display: flex;
  justify-content: flex-end;
  background: #663200;
}

div.mod-languages ul li.lang-active {
  background: none !important;
  padding: 0px 5px 3px;
  border-radius: 3px;
}

.location-row,
.right-layout,
.left-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 10px 0;
}

.location-text {
  width: 100%;
}

/* Image groups below text */
.location-images {
  width: 100%;
}

/* Two stacked images */
.two-images-vertical {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Three image layout */
.three-images-mixed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.two-images-vertical img,
.three-images-mixed img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Mobile */
@media (max-width: 768px) {
  .two-images-vertical,
  .three-images-mixed {
    grid-template-columns: 1fr;
  }

  .two-images-vertical img,
  .three-images-mixed img {
    height: auto;
  }
}

/* Top image */
.activities-fr-top-image {
  margin-bottom: 50px;
}

.activities-fr-top-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Galleries */
.activities-fr-gallery {
  display: grid;
  gap: 25px;
  margin: 60px 0;
}

.gallery-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Images */
.activities-fr-gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  transition: transform 0.3s ease;
}

.activities-fr-gallery img:hover {
  transform: scale(1.01);
}

/* Mobile */
@media (max-width: 980px) {
  .gallery-3,
  .gallery-4 {
    grid-template-columns: 1fr;
  }

  .activities-fr-gallery img {
    height: auto;
  }

  .activities-fr-section {
    padding: 40px 20px;
  }
}

/* Rows */
.directions-fr-row {
  display: flex;

  gap: 50px;
  margin-bottom: 80px;
}

/* Images */
.directions-fr-image {
  flex: 0 0 38%;
}

.directions-fr-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Content */
.directions-fr-content {
  flex: 1;
}

/* Map */
.directions-fr-map {
  margin: 70px 0;
}

.directions-fr-map img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* Steps */
.directions-fr-steps {
  display: flex;
  flex-direction: column;
  gap: 25px;
  margin-top: 30px;
}

.directions-fr-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.directions-fr-step span {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 50%;
  background: #222;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.directions-fr-step p {
  margin: 0;
}

.directions-fr-note {
  margin-top: 30px;
  font-style: italic;
}

/* Mobile */
@media (max-width: 980px) {
  .directions-fr-row {
    flex-direction: column;
    gap: 35px;
  }

  .directions-fr-image {
    width: 100%;
  }

  .directions-fr-section {
    padding: 40px 20px;
  }
}

.burger-icon > span {
  display: block;
  height: 4px;
  background-color: #fff;
  margin: 5px 0;
  transition:
    background-color 0.3s ease-in,
    opacity 0.3s ease-in,
    transform 0.3s ease-in;
}
.layout-boxed .body-innerwrapper {
  background: #663200 !important;
}