@charset "UTF-8";

/* ============================================================
   GLOBALA REGLER
   ============================================================ */

/*
* {
  border: 1px solid black !important;
}
*/

html, body {
  overflow-x: hidden;
  max-width: 100%;
}


strong, b {
  font-weight: 700;
  font-size: inherit;
  line-height: inherit;
}

.case-window {
  --tint-start: 400px;
  background-color: #FAF4DD !important;
  margin: 0 auto;
  width: 90vw;
  max-width: 1200px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  overflow-y: visible !important;
  overflow-x: hidden;
  max-height: none !important;
  min-height: auto;
  height: auto;
  padding-bottom: 2rem;
}

.case-window .case-header {
  margin: 2rem 2rem 1rem;
}

.text-orange { color: #e4573d !important; }
.text-white  { color: #fff !important; }

.case-section h2,
.case-section h3,
.case-section h4,
.case-section h5,
.case-section h6 {
  margin-bottom: 0.5rem;
}

.case-section h6 {
  margin-bottom: 0.2rem;
}

.case-section p {
  margin-bottom: 1.5rem;
}

.case-section + .case-section {
  margin-top: 3rem;
}

.case-window h6 {
  margin-bottom: 0.2rem !important;
}

.case, .case-section, .tint-panel {
  border: none;
  outline: none;
}

.case-window:last-child {
  margin-bottom: 8vh;
}

@media (max-width: 1200px) { .case-window { --tint-start: 340px; } }
@media (max-width: 1024px) { .case-window { --tint-start: 280px; } }
@media (max-width: 768px)  { .case-window { --tint-start: 180px; } }
@media (max-width: 480px)  { .case-window { --tint-start: 100px; } }

/* GEMENSAMMA TYPOGRAFI KLASSER */

.section-header {
  margin: 0 0 3rem 0;
  position: relative;
  z-index: 2;
}

.section-header h1 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 3rem;
  margin-bottom: 0;
  text-align: left;
}

.section-content {
  max-width: 800px;
  margin: 0 auto 4rem;
}

.section-content h2 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 2.6rem;
  margin-bottom: 2rem;
  text-align: left;
}

.section-content p {
  font-family: "lora-regular", serif;
  font-size: 1.7rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.section-wrap {
  padding: 3rem 2rem 2rem;
}

.section-header + .section-content {
  margin-top: 0;
}

/* GEMENSAMMA RÖDA BOXAR */

.red-box-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.red-box {
  background-color: #F84110;
  padding: 2.5rem 2rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.red-box h4 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 1.1rem;
  margin: 0 0 1.5rem 0;
  font-weight: 700;
  color: #fff;
  text-align: left;
}

.red-box p {
  font-family: "lora-regular", serif;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-align: left;
}

.red-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.red-box li {
  font-family: "lora-regular", serif;
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
  padding-left: 1.2rem;
  position: relative;
  text-align: left;
}

.red-box li:last-child {
  margin-bottom: 0;
}

.red-box li::before {
  content: "•";
  position: absolute;
  left: 0;
  font-weight: 700;
}

.red-box.right-align h4,
.red-box.right-align p,
.red-box.right-align li {
  text-align: right;
}

.red-box.header-bottom {
  justify-content: space-between;
}

.red-box.header-bottom h4 {
  order: 2;
  margin: 1.5rem 0 0 0;
}

.red-box.header-bottom p {
  order: 1;
}
.red-box.header-bottom h4 {
  text-align: right;
}

.red-box.header-bottom p {
  text-align: left;
}
/* RESPONSIVE GLOBALA MARGINALER */

@media (max-width: 768px) {
  .section-header {
    margin: 0 0 2.5rem 0;
  }
  
  .section-header h1 {
    font-size: 2.4rem;
  }
  
  .section-content {
    margin-bottom: 3rem;
  }
  
  .section-content h2 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
  }
  
  .section-content p {
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
  }
  
  .red-box-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .red-box h4 {
    font-size: 1rem;
  }
  
  .red-box p,
  .red-box li {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .section-wrap {
    padding: 2rem 1rem 3rem;
  }
  
  .section-header {
    margin: 0 0 2rem 0;
  }
  
  .section-header h1 {
    font-size: 2rem;
  }
  
  .section-content {
    margin-bottom: 2.5rem;
  }
  
  .section-content h2 {
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
  }
  
  .section-content p {
    font-size: 1.7rem;
    margin-bottom: 1rem;
  }
  
  .red-box-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .red-box {
    padding: 2rem 1.5rem;
  }
  
  .red-box h4 {
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
  }
  
  .red-box.header-bottom h4 {
    margin: 1.2rem 0 0 0;
  }
  
  .red-box p,
  .red-box li {
    font-size: 1.4rem;
  }
}

/* ============================================================
   SEKTION 1: About the project
   ============================================================ */

#siila-sec-1 {
  padding-bottom: 0 !important;
  overflow: visible !important;
  position: relative;
}

.about-wrap {
  position: relative;
  padding: 3rem 2rem 0;
}

.about-hero {
  margin: 0 0 -50px 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.about-hero img {
  width: min(720px, 60%);
  height: auto;
  display: block;
  margin: 0;
  border-radius: 6px;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.35));
}

#siila-sec-1 .case-header {
  position: absolute;
  top: 3rem;
  left: 2rem;
  right: 2rem;
  max-width: calc(100% - 4rem);
  z-index: 10;
  margin: 0;
  padding: 0;
}

#siila-sec-1 .case-header h1 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 3rem;
  margin-bottom: 0;
}

.tint-panel {
  position: relative;
  z-index: 1;
  color: #fff;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    rgba(0, 0, 0, 0.28) 100%
  );
  margin-top: calc(var(--tint-start) * -1);
  padding: 3rem 2rem 2rem;
  box-sizing: border-box;
  min-height: fit-content;
  overflow: visible !important;
}

.tint-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  width: 100%;
  margin: 4rem auto 0;
  padding: 0 2rem;
}

.tint-block {
  max-width: 800px;
  margin: 0 auto;
}

.tint-block h2 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
  font-family: "poppins-semibold", sans-serif;
}

.tint-block h6 {
  margin-bottom: 0.3rem;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: "poppins-semibold", sans-serif;
}

.tint-block p {
  margin-bottom: 0;
  line-height: 1.6;
  font-family: "lora-regular", serif;
}

.goals .goals-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1200px) {
  .tint-grid {
    width: 100%;
    margin: 4rem auto 0;
    padding: 0 2rem;
  }
  
  .tint-block {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .tint-panel {
    padding: 3rem 2rem 2rem;
  }
}

@media (max-width: 1024px) {
  .tint-grid {
    width: 100%;
    margin: 4rem auto 0;
    padding: 0 2rem;
  }
  
  .tint-block {
    max-width: 800px;
    margin: 0 auto;
  }
  
  .tint-panel {
    padding: 3rem 2rem 2rem;
  }
}

@media (max-width: 768px) {
  .tint-grid {
    padding: 0 2rem;
  }
  
  .tint-block {
    max-width: 100%;
    padding: 0;
  }
  
  .goals .goals-grid {
    grid-template-columns: 1fr;
  }
  
  #siila-sec-1 .case-header {
    top: 2rem;
    left: 2rem;
    right: 2rem;
    max-width: calc(100% - 4rem);
  }
  
  #siila-sec-1 .case-header h1 {
    font-size: 2.4rem;
  }
  
  .about-wrap {
    padding: 2rem 2rem 0;
  }
}

@media (max-width: 480px) {
  .tint-grid {
    padding: 0 1rem;
  }
  
  .tint-block {
    max-width: 100%;
    padding: 0;
  }
  
  #siila-sec-1 .case-header {
    top: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    max-width: calc(100% - 3rem);
  }
  
  #siila-sec-1 .case-header h1 {
    font-size: 2rem;
  }
  
  .about-wrap {
    padding: 1.5rem 1rem 0;
  }
}

@media (max-width: 300px) {
  .about-hero {
    justify-content: center;
  }
  
  .about-hero img {
    width: 65%;
    margin: 0 auto;
  }
}

/* ============================================================
   SEKTION 2: My Role + Timeline
   ============================================================ */

.role-section {
  background: linear-gradient(180deg, #F84110 0%, #FFFFFF 60%, #FFFFFF 100%) !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.timeline-section {
  margin-top: 4rem;
  padding: 2rem 0 4rem;
  overflow: visible !important;
}

.timeline-section h2 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 2.6rem;
  margin-bottom: 3rem;
  text-align: left;
  color: #F84110;
}

.timeline-container {
  position: relative;
  width: 100%;
  min-height: 600px;
  margin: 0 auto;
  padding: 0;
}

.timeline-lines {
  position: relative;
  width: 100%;
  min-height: 600px;
}

.v-line {
  position: absolute;
  width: 1px;
  height: 600px;
  background: #F84110;
  transform: translateX(-50%);
}

.v-line:nth-child(1) { left: 1%; }
.v-line:nth-child(2) { left: 13.25%; }
.v-line:nth-child(3) { left: 25.5%; }
.v-line:nth-child(4) { left: 37.75%; }
.v-line:nth-child(5) { left: 50%; }
.v-line:nth-child(6) { left: 62.25%; }
.v-line:nth-child(7) { left: 74.5%; }
.v-line:nth-child(8) { left: 86.75%; }
.v-line:nth-child(9) { left: 99%; }

.timeline-weeks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
}

.week-label {
  position: absolute;
  color: #F84110;
  font-size: 1.4rem;
  font-weight: 700;
  font-family: "poppins-semibold", sans-serif;
  text-align: center;
  transform: translateX(-50%);
}

.week-label:nth-child(1) { left: 9%; }
.week-label:nth-child(2) { left: 20.5%; }
.week-label:nth-child(3) { left: 32.4%; }
.week-label:nth-child(4) { left: 43.9%; }
.week-label:nth-child(5) { left: 56.1%; }
.week-label:nth-child(6) { left: 68%; }
.week-label:nth-child(7) { left: 79.5%; }
.week-label:nth-child(8) { left: 90.5%; }

.timeline-processes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 1100px;
}

.process-item {
  position: absolute;
  display: flex;
  align-items: center;
}

.process-label {
  background: #FAF4DD;
  color: #F84110;
  font-size: 1.2rem;
  font-weight: 600;
  font-family: "poppins-semibold", sans-serif;
  padding: 14px 18px;
  border-radius: 20px;
  box-shadow: 0 1px 10px rgba(0,0,0,0.12);
  text-align: center;
  white-space: normal;
  line-height: 1.3;
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-item[data-process="user-research"] {
  left: 2%;
  top: 35px;
  width: 30%;
}

.process-item[data-process="journey-mapping"] {
  left: 14%;
  top: 110px;
  width: 30%;
}

.process-item[data-process="to-be-storyboarding"] {
  left: 26%;
  top: 185px;
  width: 32%;
}

.process-item[data-process="user-flows"] {
  left: 38%;
  top: 260px;
  width: 21%;
}

.process-item[data-process="wireframing"] {
  left: 50%;
  top: 335px;
  width: 24%;
}

.process-item[data-process="user-interface-design"] {
  left: 63%;
  top: 400px;
  width: 36%;
}

.process-item[data-process="mid-fi-design"] {
  left: 63%;
  top: 485px;
  width: 36%;
}

.process-item[data-process="testing-1"] {
  left: 53%;
  top: 560px;
  width: 18%;
}

.process-item[data-process="testing-2"] {
  left: 76%;
  top: 560px;
  width: 18%;
}

@media (max-width: 768px) {
  .timeline-section h2 {
    font-size: 2.2rem;
  }
}

@media (max-width: 480px) {
  .section-wrap {
    padding: 3rem 0 4rem;
  }
  
  .section-content {
    padding: 0 1rem;
  }
  
  .role-section .section-header {
    padding: 0 1rem;
  }
  
  .timeline-section {
    padding: 2rem 0 4rem;
    margin: 4rem 0 0;
  }
  
  .timeline-section h2 {
    font-size: 1.8rem;
    padding: 0 1rem;
  }
}

/* ============================================================
   SEKTION 3: Discovery phase
   ============================================================ */

.competitor-table {
  position: relative;
  width: 100%;
  min-height: 800px;
  margin-top: 4rem;
}

.competitor-logos {
  position: relative;
  width: 100%;
  height: 80px;
  margin-bottom: 2rem;
  overflow: hidden;
}

.logo-item {
  position: absolute;
  height: 40px;
  width: auto;
  object-fit: contain;
}

.logo-item[data-logo="siila"] { left: 33%; }
.logo-item[data-logo="vibes"] { left: 50%; }
.logo-item[data-logo="classpass"] { left: 70%; }
.logo-item[data-logo="friskis"] { left: 87%; }

@media (max-width: 480px) {
  .logo-item {
    height: 35px;
  }
}

.feature-list {
  position: relative;
  width: 100%;
  min-height: 700px;
}

.feature-list h3 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 2rem;
  margin-bottom: 0;
  position: absolute;
  left: 0;
  top: -60px;
}

.feature-item {
  position: absolute;
  left: 0;
  width: 35%;
}

.feature-label {
  font-family: "poppins-semibold", sans-serif;
  font-size: 1.2rem;
  color: #e4573d;
  line-height: 1.3;
}

.feature-item[data-feature="booking"] { top: -20px; line-height: 1; }
.feature-item[data-feature="live-classes"] { top: 50px; line-height: 1; }
.feature-item[data-feature="reviews"] { top: 130px; line-height: 1; }
.feature-item[data-feature="video-library"] { top: 200px; line-height: 1; }
.feature-item[data-feature="playlist"] { top: 285px; line-height: 1; }
.feature-item[data-feature="calendar"] { top: 350px; line-height: 1; }
.feature-item[data-feature="practice-hubs"] { top: 430px; line-height: 1; }
.feature-item[data-feature="ugc"] { top: 500px; line-height: 1; }
.feature-item[data-feature="subscription"] { top: 575px; line-height: 1; }

.feature-dots {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: 700px;
}

.dot {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid #e4573d;
}

.dot.filled {
  background-color: #e4573d;
}

.dot.empty {
  background-color: transparent;
}

.dot[data-col="1"] { left: 33%; }
.dot[data-col="2"] { left: 51%; }
.dot[data-col="3"] { left: 70%; }
.dot[data-col="4"] { left: 90%; }

.dot[data-row="1"] { top: 0px; }
.dot[data-row="2"] { top: 75px; }
.dot[data-row="3"] { top: 150px; }
.dot[data-row="4"] { top: 225px; }
.dot[data-row="5"] { top: 300px; }
.dot[data-row="6"] { top: 375px; }
.dot[data-row="7"] { top: 450px; }
.dot[data-row="8"] { top: 525px; }
.dot[data-row="9"] { top: 600px; }

.user-interviews-section {
  margin-top: 6rem;
}

.user-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem 3rem;
  margin: 4rem 0;
}

.user-quote {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.quote-content {
  flex: 1;
}

.quote-text {
  font-family: "lora-regular", serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #e4573d;
  margin-bottom: 0.5rem;
  max-width: 100%;
}

.quote-text strong {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.5;
}

.quote-author {
  font-family: "poppins-semibold", sans-serif;
  font-size: 1.1rem;
  color: #e4573d;
  margin: 0;
  text-align: right;
}

.learnings-title {
  font-family: "poppins-semibold", sans-serif;
  font-size: 2rem;
  margin: 6rem 0 3rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .user-quote {
    display: block;
  }
  
  .user-avatar {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
  }
  
  .quote-content::after {
    content: "";
    display: table;
    clear: both;
  }
}

@media (max-width: 480px) {
  .user-interviews-section {
    max-width: none !important;
  }
  
  .user-quotes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 0.8rem;
    margin: 4rem 0;
    width: 100%;
    padding: 0 0.8rem;
  }
  
  .user-quote {
    display: block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }
  
  .user-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.8rem;
  }
  
  .user-quote .quote-content {
    width: 100%;
  }
    
  /*
  .user-quote[data-user="sarah"] .user-avatar,
  .user-quote[data-user="daniel"] .user-avatar {
    float: right;
    margin-left: 1rem;
    margin-bottom: 0.5rem;
  }
  
  .user-quote[data-user="jason"] .user-avatar,
  .user-quote[data-user="kylie"] .user-avatar {
    float: left;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
  }
  */
    
  .user-interviews-section .quote-text {
    font-size: 1.4rem;
    line-height: 1.4;
    margin-bottom: 0.5rem;
  }

  .user-interviews-section .quote-text strong {
    font-size: 1.4rem;
    line-height: 1.4;
  }

  .user-interviews-section .quote-author {
    font-size: 1.3rem;
    clear: both;
    text-align: right;
  }
}

/* ============================================================
   SEKTION 4: Define phase
   ============================================================ */

.define-section {
  background: linear-gradient(180deg, #F84110 0%, #FCF4DD 60%, #FCF4DD 100%) !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.persona-section {
  max-width: 900px;
  margin: 0 auto 4rem;
}

.persona-card {
  display: flex;
  gap: 3rem;
  margin-bottom: 3rem;
  align-items: flex-start;
}

.persona-avatar {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.persona-info {
  flex: 1;
}

.persona-name {
  font-family: "poppins-semibold", sans-serif;
  font-size: 3rem;
  color: #e4573d;
  margin-bottom: 1rem;
}

.persona-detail {
  font-family: "lora-regular", serif;
  font-size: 1.4rem;
  color: #e4573d;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.persona-description {
  max-width: 800px;
  margin: 0 auto;
}

.persona-description p {
  font-family: "lora-regular", serif;
  font-size: 1.6rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.persona-quote {
  max-width: 700px;
  margin: 4rem auto 0;
  text-align: center;
}

.persona-quote p {
  font-family: "lora-italic", serif;
  font-size: 2.4rem;
  line-height: 1.5;
  font-style: italic;
  margin: 0;
}

.persona-goals {
  max-width: 1000px;
  margin: 4rem auto 0;
}

@media (max-width: 768px) {
  .persona-section {
    margin-bottom: 3rem;
  }
  
  .persona-name {
    font-size: 2.4rem;
  }
  
  .persona-description p {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
  }
  
  .persona-quote {
    margin: 3rem auto 0;
  }
  
  .persona-quote p {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .define-section .section-header {
    padding: 0 1rem;
  }
  
  .define-section .section-content {
    padding: 0 1rem;
  }
  
  .persona-section {
    margin-bottom: 2.5rem;
    padding: 0 1rem;
  }
  
  .persona-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
    margin-bottom: 2rem;
  }
  
  .persona-avatar {
    width: 150px;
    height: 150px;
  }
  
  .persona-name {
    font-size: 2rem;
    margin-bottom: 0.8rem;
  }
  
  .persona-detail {
    font-size: 1.7rem;
    margin-bottom: 0.3rem;
  }
  
  .persona-description {
    padding: 0;
  }
  
  .persona-description p {
    font-size: 1.7rem;
    margin-bottom: 1rem;
  }
  
  .persona-quote {
    margin: 2.5rem auto 0;
    padding: 0 1rem;
  }
  
  .persona-quote p {
    font-size: 1.8rem;
  }
  
  .persona-goals {
    padding: 0 1rem;
  }
}

/* ============================================================
   SEKTION 5: Storyboarding Solutions
   ============================================================ */

.storyboard-section {
  background-color: #FF673E !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.storyboard-frames {
  max-width: 70%;
  margin: 4rem auto 0;
}

.storyboard-frame {
  margin-bottom: 4rem;
  position: relative;
}

.storyboard-frame:last-child {
  margin-bottom: 0;
  padding-bottom: 2rem;
}

/* Common text styling - always left aligned */
.storyboard-frame h6 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: left;
}

.storyboard-frame p {
  font-family: "lora-regular", serif;
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* Frame 1, 3, 5: Text wraps around right-floating images */
.frame-wrap-right {
  overflow: hidden;
}

.frame-wrap-right::after {
  content: "";
  display: table;
  clear: both;
}

.images-float-right {
  float: right;
  margin-left: 2rem;
  margin-bottom: 1rem;
  margin-top: 0; /* Start aligned with h6 */
  position: relative;
}

/* Frame 2, 4, 6: Image left, text has indent that changes under image */
.frame-wrap-left {
  overflow: hidden;
  position: relative;
}

.frame-wrap-left::after {
  content: "";
  display: table;
  clear: both;
}

/* H6 in frame-wrap-left needs same indent as text - make it more specific */
.storyboard-frame.frame-wrap-left > h6 {
  margin-left: 5rem !important;
}

.images-float-left {
  float: left;
  margin-right: 3rem;
  margin-bottom: 1rem;
  margin-top: 0; /* Start aligned with h6 */
  position: relative;
}

.frame-text-indent {
  margin-left: 5rem;
}

.frame-text-indent h6 {
  text-align: left;
}

.frame-text-indent p {
  text-align: left;
}

/* Image styling - rectangular bounding boxes, natural aspect ratios */
.story-image {
  display: block;
  width: auto;
  object-fit: contain;
}

/* Desktop sizes - height-based, width adjusts to aspect ratio */
.story-image.large {
  height: 200px;
}

.story-image.medium {
  height: 180px;
}

.story-image.small {
  height: 134px;
  position: absolute;
  top: -20px;
  right: -30px;
}

/* 1200px breakpoint */
@media (max-width: 1200px) {
  .storyboard-frames {
    max-width: 70%;
    margin: 4rem auto 0;
  }
  
  .storyboard-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .storyboard-frame.frame-wrap-left > h6 {
    margin-left: 5rem !important;
  }
  
  .images-float-right {
    margin-top: 0;
  }
  
  .images-float-left {
    margin-top: 0;
  }
  
  .story-image.large {
    height: 200px;
  }
  
  .story-image.medium {
    height: 180px;
  }
  
  .story-image.small {
    height: 134px;
    right: 0;
  }
  
  /* Förhindra horisontell scroll */
  .case-window {
    overflow-x: hidden;
  }
}

/* 1024px breakpoint */
@media (max-width: 1024px) {
  .storyboard-frames {
    max-width: 70%;
    margin: 4rem auto 0;
  }
  
  .storyboard-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .storyboard-frame.frame-wrap-left > h6 {
    margin-left: 5rem !important;
  }
  
  .images-float-right {
    margin-top: 0;
  }
  
  .images-float-left {
    margin-top: 0;
  }
  
  .story-image.large {
    height: 200px;
  }
  
  .story-image.medium {
    height: 180px;
  }
  
  .story-image.small {
    height: 134px;
    right: 0;
  }
  
  /* Förhindra horisontell scroll */
  .case-window {
    overflow-x: hidden;
  }
}

/* Tablet breakpoint */
@media (max-width: 768px) {
  .storyboard-frames {
    max-width: 100%;
    margin: 3rem auto 0;
  }
  
  .storyboard-frame {
    margin-bottom: 3rem;
  }
  
  .storyboard-frame h6 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
  }
  
  .storyboard-frame p {
    font-size: 1.3rem;
  }
  
  .storyboard-frame.frame-wrap-left > h6 {
    margin-left: 3rem !important;
  }
  
  .frame-text-indent {
    margin-left: 3rem;
  }
  
  .images-float-right {
    margin-left: 1.5rem;
    margin-top: 0;
  }
  
  .images-float-left {
    margin-right: 2rem;
    margin-top: 0;
  }
  
  .story-image.large {
    height: 180px;
  }
  
  .story-image.medium {
    height: 160px;
  }
  
  .story-image.small {
    height: 112px;
    top: -15px;
    right: -25px;
  }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
  .storyboard-section .section-header {
    padding: 0 1rem;
  }
  
  .storyboard-section .section-content {
    padding: 0 1rem;
  }
  
  .storyboard-frames {
    margin: 2rem 1rem 0;
  }
  
  .storyboard-frame {
    margin-bottom: 3rem;
  }
  
  .storyboard-frame:last-child {
    padding-bottom: 1rem;
  }
  
  .storyboard-frame h6 {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }
  
  .storyboard-frame p {
    font-size: 1.4rem;
  }
  
  .storyboard-frame.frame-wrap-left > h6 {
    margin-left: 2rem !important;
  }
  
  .frame-text-indent {
    margin-left: 2rem;
  }
  
  .images-float-right {
    margin-left: 1rem;
    margin-top: 0;
  }
  
  .images-float-left {
    margin-right: 1.5rem;
    margin-top: 0;
  }
  
  .story-image.large {
    height: 120px;
  }
  
  .story-image.medium {
    height: 100px;
  }
  
  .story-image.small {
    height: 75px;
    top: -11px;
    right: -19px;
  }
}
/* ============================================================
   SEKTION 6: UI Flow
   ============================================================ */

.ui-flow-section {
  background-color: #FAF4DD !important;
}

.ui-flow-image {
  margin: 4rem auto 0;
  text-align: center;
  max-width: 100%;
}

.ui-flow-image img {
  width: 100%;
  max-width: 800px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  .ui-flow-image {
    margin: 0rem auto 0;
  }
}

@media (max-width: 480px) {
  .ui-flow-image {
    margin: 0rem auto 0;
  }
}  

/* ============================================================
   SEKTION 7: Wireframing
   ============================================================ */

.wireframing-section {
  background-color: #FAF4DD !important;
  padding-bottom: 0 !important;
}

.wireframing-section .about-wrap {
  padding-bottom: 0 !important;
}

.wireframing-section .section-wrap {
  padding: 3rem 0 0;
}

.wireframe-image {
  margin: 4rem -2rem 0 -2rem;
  width: calc(100% + 4rem);
}

.wireframe-image img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0;
}

@media (max-width: 1200px) {
  .wireframing-section .section-wrap {
    padding: 3rem 0 0;
  }
  
  .wireframe-image {
    margin: 4rem -2rem 0 -2rem;
    width: calc(100% + 4rem);
  }
}

@media (max-width: 1024px) {
  .wireframing-section .section-wrap {
    padding: 3rem 0 0;
  }
  
  .wireframe-image {
    margin: 4rem -2rem 0 -2rem;
    width: calc(100% + 4rem);
  }
}

@media (max-width: 768px) {
  .wireframing-section .section-wrap {
    padding: 3rem 0 0;
  }
  
  .wireframe-image {
    margin: 3rem -2rem 0 -2rem;
    width: calc(100% + 4rem);
  }
}

@media (max-width: 480px) {
  .wireframing-section .section-wrap {
    padding: 2rem 0 0;
  }
  
  .wireframe-image {
    margin: 2rem -1rem 0 -1rem;
    width: calc(100% + 2rem);
  }
}

/* ============================================================
   SEKTION 8: Design System
   ============================================================ */

.design-system-section {
  background-color: #FFFFFF !important;
}

.design-system-image {
  margin: 4rem -2rem 0 -2rem;
  width: calc(100% + 4rem);
}

.design-system-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* COLOR BLOCKS */
.color-blocks {
  margin: 4rem 0 0 2rem;
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.color-block {
  min-height: 60px;
  display: flex;
  align-items: center;
  padding: 1.5rem 3rem;
}

.color-block p {
  font-family: "playfair-display", serif;
  font-size: 1.7rem;
  margin: 0;
  font-weight: 500;
  line-height: 1.7;
}

/* Individual Block Colors */
.block-white {
  background: #FFFFFF;
}

.block-blossom {
  background: #FCF4DD;
}

.block-tangerine {
  background: #FC3B02;
}

.block-hot-orange {
  background: #FF0001;
}

/* Block 5: Blood Orange - Simple gradient */
.block-blood-orange {
  background: linear-gradient(to right, #FC5E2F, #FF0705);
}

/* Block 6: Nectarine Dream - 4 color stops */
.block-nectarine {
  background: linear-gradient(to right, 
    #E98530 0%, 
    #E53C25 48%, 
    #EDC29F 78%, 
    #E53C25 100%
  );
}

/* Block 7: White Peach - 7 color stops */
.block-white-peach {
  background: linear-gradient(to right, 
    #E53C25 0%, 
    #EFDBBA 6%, 
    #ECC59A 27%, 
    #EFDBBA 43%, 
    #EDC29F 72%, 
    #E53C25 88%, 
    #EE946F 100%
  );
}

/* Text Colors */
.text-red {
  color: #e4573d !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .design-system-image {
    margin-top: 3rem;
  }
  
  .color-blocks {
    margin-top: 3rem;
    width: 75%;
  }
  
  .color-block {
    min-height: 55px;
    padding: 1.5rem 2.5rem;
  }
  
  .color-block p {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .design-system-image {
    margin: 2rem -1rem 0 -1rem;
    width: calc(100% + 2rem);
  }
  
  .color-blocks {
    margin: 2rem 0 0 1rem;
    width: 75%;
  }
  
  .color-block {
    min-height: 50px;
    padding: 1.2rem 2rem;
  }
  
  .color-block p {
    font-size: 1.7rem;
  }
}

/* ============================================================
   SEKTION 9: Hi-Fidelity Mockup
   ============================================================ */

.mockup-section {
  background-color: #FAF4DD !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.mockup-frames {
  max-width: 70%;
  margin: 4rem auto 0;
}

.mockup-frame {
  margin-bottom: 4rem;
  position: relative;
  overflow: hidden; /* Clearfix */
}

.mockup-frame::after {
  content: "";
  display: table;
  clear: both;
}

.mockup-frame:last-child {
  margin-bottom: 0;
  padding-bottom: 2rem;
}

/* Text styling for mockup */
.mockup-frame h6 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: left;
}

.mockup-frame p {
  font-family: "lora-regular", serif;
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* Image styling */
.mockup-image {
  display: block;
  width: auto;
  height: 200px;
  object-fit: contain;
}

/* BASE FLOAT STYLES - These were missing! */
.images-float-right {
  float: right;
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.images-float-left {
  float: left;
  margin-right: 2rem;
  margin-bottom: 1rem;
}

/* Centered frame styling */
.mockup-centered {
  clear: both;
  overflow: visible;
}

.centered-title,
.centered-text {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.centered-image-wrapper {
  margin: 2rem 0 0; 
}

.mockup-image-center {
  display: block;
  max-width: 90%;
  height: auto;
  margin: 0 auto;
  max-width: 630px;
}

/* Image captions */
.image-captions {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
  padding: 0 5%;
}

.caption {
  font-family: "lora-regular", serif;
  font-size: 1.3rem;
  line-height: 1.4;
  color: #e4573d;
  margin: 0;
  text-align: center;
  flex: 0 1 22%;
}


/* 1200px breakpoint */
@media (max-width: 1200px) {
  .mockup-frames {
    max-width: 70%;
    margin: 4rem auto 0;
  }
  
  .mockup-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .mockup-image {
    height: 200px;
  }
  
  .mockup-image-center {
    max-width: 85%;
    height: auto;
  }
  
  .centered-text {
    text-align: center;
  }
}

/* 1024px breakpoint */
@media (max-width: 1024px) {
  .mockup-frames {
    max-width: 70%;
    margin: 4rem auto 0;
  }
  
  .mockup-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .mockup-image {
    height: 200px;
  }
  
  .mockup-image-center {
    max-width: 85%;
    height: auto;
  }
  
  .centered-text {
    text-align: center;
  }
}

/* Tablet breakpoint */
@media (max-width: 768px) {
  .mockup-section .section-wrap {
    padding: 3rem 0 0;
  }
  
  .mockup-section .section-header {
    padding: 0 2rem;
  }
  
  .mockup-section .section-content {
    padding: 0 2rem;
  }
  
  .mockup-frames {
    max-width: 100%;
    margin: 3rem 0 0;
    padding: 0 2rem;
  }
  
  .mockup-frame {
    margin-bottom: 3rem;
  }
  
  .mockup-frame h6 {
    font-size: 1.3rem;
    margin-bottom: 0.8rem;
  }
  
  .mockup-frame p {
    font-size: 1.3rem;
  }
  
  .mockup-section .images-float-right {
    /* TESTAR: Kommenterat ut för att kolla horisontell scroll */
    /* margin-right: -2rem; */
    margin-right: 0;
    margin-left: 1.5rem;
  }
  
  .mockup-section .images-float-left {
    /* TESTAR: Kommenterat ut för att kolla horisontell scroll */
    /* margin-left: -2rem; */
    margin-left: 0;
    margin-right: 2rem;
  }
  
  .frame-text-indent {
    margin-left: 3rem;
  }
  
  .mockup-image {
    height: 180px;
  }
  
  .frame-large .mockup-image {
    height: 198px;
  }
  
  .mockup-image-center {
    max-width: 70%;
    width: 70%;
  }
  
  .centered-text {
    text-align: center;
  }
  
  .caption {
    font-size: 1.2rem;
  }
}

/* Mobile breakpoint */
@media (max-width: 480px) {
  .mockup-section .section-wrap {
    padding: 2rem 0 0;
  }
  
  .mockup-section .section-header {
    padding: 0 1rem;
  }
  
  .mockup-section .section-content {
    padding: 0 1rem;
  }
  
  .mockup-frames {
    max-width: 100%;
    margin: 2rem 0 0;
    padding: 0 1rem;
  }
  
  .mockup-frame {
    margin-bottom: 3rem;
  }
  
  .mockup-frame:last-child {
    padding-bottom: 1rem;
  }
  
  .mockup-frame h6 {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }
  
  .mockup-frame p {
    font-size: 1.4rem;
  }

  .mockup-section .images-float-right {
    float: right !important;
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
    margin-bottom: 1rem;
  }
  
  .mockup-section .images-float-left {
    float: left !important;
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
    margin-bottom: 1rem;
  }
  
  .frame-text-indent {
    margin-left: 2rem;
  }
  
  .mockup-image {
    height: 120px;
  }
  
  .frame-large .mockup-image {
    height: 140px;
  }
  
  .mockup-centered .mockup-image-center {
    max-width: 90%;
    width: 90%;
    height: auto;
  }
  
  .image-captions {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0;
    margin-top: 1.5rem;
  }
  
  .caption {
    flex: 1;
    font-size: 1.4rem;
  }
}

/* ============================================================
   SEKTION 10: The 3 Wise Stones - Clean Float Solution
   ============================================================ */

.wise-stones-section {
  background: linear-gradient(180deg, #F84110 0%, #FF8868 50%, #F84616 100%) !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

/* Main content wrapper */
.wise-stones-content {
  max-width: 1000px;
  margin: 0 auto;
}

/* Text column with floating image */
.text-column {
  width: 100%;
  max-width: 70%;
  margin: 4rem auto 0; /* Samma margin som 1200px */
  overflow: hidden; /* Clearfix for float */
}

.text-column::after {
  content: "";
  display: table;
  clear: both;
}

/* Image wrapper - simple float right */
.image-wrapper {
  float: right;
  width: 40%;
  margin-left: 2rem;
  margin-bottom: 0;
}

.image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Text styling */
.text-column p {
  font-family: "lora-regular", serif;
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  text-align: left;
}

.text-column p:last-of-type {
  margin-bottom: 0;
}

/* 1200px breakpoint */
@media (max-width: 1200px) {
  .text-column {
    max-width: 70%;
    margin: 4rem auto 0;
  }
  
  .wise-stones-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .image-wrapper {
    width: 38%;
  }
}

/* 1024px breakpoint */
@media (max-width: 1024px) {
  .text-column {
    max-width: 70%;
    margin: 4rem auto 0;
  }
  
  .wise-stones-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .image-wrapper {
    width: 38%;
  }
}

/* Tablet breakpoint - 768px */
@media (max-width: 768px) {
  .wise-stones-section .section-wrap {
    padding: 3rem 0 0;
  }
  
  .wise-stones-section .section-header {
    padding: 0 2rem;
  }
  
  .wise-stones-content {
    max-width: 100%;
    margin: 3rem 0 0;
  }
  
  .text-column {
    max-width: 100%;
    margin: 0;
    padding: 0 2rem;
  }
  
  .image-wrapper {
    width: 40%;
    margin-right: 0; /* Tar bort negativ margin som orsakade horisontell scroll */
  }
  
  .text-column p {
    font-size: 1.3rem;
  }
}

/* Mobile breakpoint - 480px */
@media (max-width: 480px) {
  .wise-stones-section .section-wrap {
    padding: 2rem 0 0;
  }
  
  .wise-stones-section .section-header {
    padding: 0 1rem;
  }
  
  .wise-stones-content {
    max-width: 100%;
    margin: 2rem 0 0;
  }
  
  .text-column {
    max-width: 100%;
    margin: 0;
    padding: 0 1rem;
  }
  
  .image-wrapper {
    width: 36%;
    margin-left: 0.5rem;
    margin-right: 0;
  }
  
  .text-column p {
    font-size: 1.4rem;
  }
}

/* ============================================================
   SEKTION 11: The Stones
   ============================================================ */

.stones-section {
  background: linear-gradient(180deg, #F84110 0%, #FF8868 50%, #F84110 100%) !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.stones-frames {
  max-width: 70%;
  margin: 4rem auto 0;
}

.stones-frame {
  margin-bottom: 4rem;
  position: relative;
  overflow: hidden;
}

.stones-frame::after {
  content: "";
  display: table;
  clear: both;
}

.stones-frame:last-child {
  margin-bottom: 0;
  padding-bottom: 2rem;
}

/* Text styling for stones frames */
.stones-frame h6 {
  font-family: "poppins-semibold", sans-serif;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: left;
}

.stones-frame p {
  font-family: "lora-regular", serif;
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* Image styling - låter bilden behålla sina naturliga proportioner */
.stones-image {
  display: block;
  width: auto;
  height: 200px;
  object-fit: contain;
}

/* Float styles for stones section - konsistenta marginaler */
.stones-frame .images-float-right {
  float: right;
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.stones-frame .images-float-left {
  float: left;
  margin-right: 2rem;
  margin-bottom: 1rem;
}

/* 1200px breakpoint - samma marginaler som desktop */
@media (max-width: 1200px) {
  .stones-frames {
    max-width: 70%;
    margin: 4rem auto 0;
  }
  
  .stones-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .stones-image {
    height: 200px;
  }
  
  .stones-frame .images-float-right {
    margin-left: 2rem;
    margin-right: 0;
  }
  
  .stones-frame .images-float-left {
    margin-right: 2rem;
    margin-left: 0;
  }
}

/* 1024px breakpoint */
@media (max-width: 1024px) {
  .stones-frames {
    max-width: 70%;
    margin: 4rem auto 0;
  }
  
  .stones-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .stones-image {
    height: 180px;
  }
  
  .stones-frame .images-float-right {
    margin-left: 2rem;
    margin-right: 0;
  }
  
  .stones-frame .images-float-left {
    margin-right: 2rem;
    margin-left: 0;
  }
}

/* Tablet breakpoint - 768px */
@media (max-width: 768px) {
  .stones-section .section-wrap {
    padding: 3rem 0 0;
  }
  
  .stones-section .section-header {
    padding: 0 2rem;
  }
  
  .stones-frames {
    max-width: 100%;
    margin: 3rem auto 0;
  }
  
  .stones-image {
    height: 160px;
  }
  
  .stones-frame .images-float-right {
    margin-left: 1.5rem;
    margin-right: 0;
  }
  
  .stones-frame .images-float-left {
    margin-right: 1.5rem;
    margin-left: 0;
  }
  
  .stones-frame p {
    font-size: 1.3rem;
  }
  
  .stones-frame h6 {
    font-size: 1.3rem;
  }
}

/* Mobile breakpoint - 480px */
@media (max-width: 480px) {
  .stones-section .section-wrap {
    padding: 2rem 0 0;
  }
  
  .stones-section .section-header {
    padding: 0 1rem;
  }
  
  .stones-frames {
    max-width: 100%;
    margin: 2rem 1rem 0;
  }
  
  .stones-image {
    height: 140px;
  }
  
  .stones-frame .images-float-right {
    margin-left: 0.5rem;
    margin-right: 0;
  }
  
  .stones-frame .images-float-left {
    margin-right: 0.5rem;
    margin-left: 0;
  }
  
  .stones-frame p {
    font-size: 1.4rem;
  }
  
  .stones-frame h6 {
    font-size: 1.4rem;
  }
}

/* ============================================================
   SEKTION 12: Feedback from the Client
   ============================================================ */

.feedback-section {
  background-color: #FF0001 !important;
  overflow: visible !important;
  padding-bottom: 4rem !important;
}

.feedback-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
  max-width: 1000px;
  margin: 0 auto 4rem;
}

.feedback-column {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.feedback-quote p {
  font-family: "lora-regular", serif;
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
  margin: 0;
  text-align: left;
}

.feedback-quote strong {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.5;
}

.feedback-image {
  margin: 4rem auto 0;
  text-align: center;
  max-width: 260px;
}

.feedback-image img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .feedback-quotes {
    max-width: 70%;
    margin: 0 auto 4rem;
  }
  
  .feedback-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .feedback-image {
    max-width: 260px;
  }
}

@media (max-width: 1024px) {
  .feedback-quotes {
    max-width: 70%;
    margin: 0 auto 4rem;
  }
  
  .feedback-section .section-header {
    max-width: 100%;
    padding: 0 2rem;
  }
  
  .feedback-image {
    max-width: 260px;
  }
}

@media (max-width: 768px) {
  .feedback-section .section-wrap {
    padding: 3rem 0 4rem;
  }
  
  .feedback-section .section-header {
    padding: 0 2rem;
  }
  
  .feedback-quotes {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
    max-width: 100%;
    margin: 0 2rem 3rem;
  }
  
  .feedback-column {
    gap: 2rem;
  }
  
  .feedback-quote p {
    font-size: 1.2rem;
  }
  
  .feedback-quote strong {
    font-size: 1.2rem;
  }
  
  .feedback-image {
    max-width: 260px;
  }
}

@media (max-width: 480px) {
  .feedback-section .section-wrap {
    padding: 2rem 0 3rem;
  }
  
  .feedback-section .section-header {
    padding: 0 1rem;
  }
  
  .feedback-quotes {
    grid-template-columns: 1fr 1fr;
    margin: 0 1rem 2rem;
    gap: 1.5rem 1rem;
  }
  
  .feedback-column {
    gap: 1.5rem;
  }
  
  .feedback-quote p {
    font-size: 1.1rem;
  }
  
  .feedback-quote strong {
    font-size: 1.1rem;
  }
  
  .feedback-image {
    max-width: 120px;
  }
}