/* =============================
   responsive.css for index.html
   ============================= */

/* Root variables for padding and max width */
:root {
  --container-max: 1440px;
  --gutter: clamp(16px, 4vw, 56px);
}

/* Global box-sizing */
* {
  box-sizing: border-box;
  min-width: 0;
}

/* HERO SECTION */
.hero-section {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--gutter);
  min-height: 100vh;
  position: relative;
}

/* Images scale */
.hero-section img {
  width: 100%;
  height: auto;
  display: block;
}

/* NAVIGATION FRAME */
.frame {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 24px 0;
  gap: 16px;
}

/* Navigation links */
.frame .div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.boraland-menus {
  text-decoration: none;
  color: #000;
  font-weight: 500;
}

/* Search box */
.frame .frame-wrapper .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* HERO TEXT BLOCK */
.frame-3 {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.frame-4 .p {
  font-size: clamp(16px, 2vw, 24px);
  text-align: center;
  max-width: 60ch;
}

.text-wrapper-3,
.text-wrapper-4,
.text-wrapper-5,
.building-in {
  font-size: clamp(24px, 5vw, 72px);
  text-align: center;
}

/* BUTTON / CONSULTATION */
.he .frame-10 {
  cursor: pointer;
  display: inline-block;
  padding: 12px 24px;
  text-align: center;
}

/* FOUNDER / PORTFOLIO ICON */
.frame-12 {
  width: 100%;
  max-width: 1200px;
  margin: 24px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.icons-wrapper {
  cursor: pointer;
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* HOME CONTENT PLACEHOLDER */
#homeContainer {
  display: none;
  padding: 24px var(--gutter);
  max-width: var(--container-max);
  margin: 0 auto;
}

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

/* Tablet */
@media (max-width: 1024px) {
  .frame {
    flex-direction: column;
    gap: 16px;
  }

  .frame-3,
  .frame-12 {
    max-width: 90%;
    margin: 16px auto;
  }

  .text-wrapper-3,
  .text-wrapper-4,
  .text-wrapper-5,
  .building-in {
    font-size: clamp(20px, 6vw, 48px);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .hero-section {
    padding: 0 16px;
  }

  .frame .div {
    gap: 12px;
  }

  .frame-3,
  .frame-12 {
    gap: 12px;
  }

  .text-wrapper-3,
  .text-wrapper-4,
  .text-wrapper-5,
  .building-in {
    font-size: clamp(16px, 5vw, 36px);
  }

  /* Make buttons full width on mobile */
  .he .frame-10 {
    width: 100%;
  }
}