/* ========================================
   FREX WEBSITE - UPDATED STYLES
   ======================================== */

   @import url('css/common.css');

   /* --- Base Layout --- */
   .content-wrapper {
     width: 100%;
     max-width: 1280px; /* Standardizing max-width */
     margin: 0 auto;
     padding: 0 var(--spacing-xl); /* Use consistent horizontal padding */
     box-sizing: border-box;
   }
   
   /* ========================================
      HERO SECTION (Top Container)
      ======================================== */
   .top-container {
     /* FIX: Removed fixed height. Use min-height + padding */
     min-height: 700px;
     padding: 120px 0 60px 0; /* Top padding accounts for navbar */
     width: 100%;
     background: var(--white);
     position: relative;
     display: flex;
     align-items: center;
   }
   
   .top-container .content-wrapper {
     height: 100%;
     width: 100%;
   }
   
   .top-container .content-background {
     width: 100%;
     height: 100%;
     /* Flex settings to handle layout */
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap; /* FIX: Allows stacking on smaller screens */
     gap: 40px; 
   }
   
   .content-background .left-container {
     flex: 1; /* Takes available space */
     min-width: 300px; /* Prevents squishing */
     max-width: 600px;
     gap: var(--spacing-2xl);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
   }
   
   .top-left-container {
     width: 100%;
     /* FIX: Removed fixed height */
     gap: var(--spacing-md);
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
   }
   
   .top-left-container-text-1 {
     font-family: var(--font-family);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-5xl);
     line-height: 1.1;
     letter-spacing: -1px;
     width: 100%;
     /* FIX: Removed fixed height so text flows naturally */
     margin: 0;
     color: var(--text-primary);
   }
   
   .top-left-container-text-2 {
     font-family: var(--font-family);
     font-weight: var(--font-weight-regular);
     font-size: var(--font-size-xl);
     line-height: 1.5;
     width: 100%;
     margin: 0;
     color: var(--text-secondary);
   }
   
   .bottom-left-container {
     /* Keep your button styling */
     width: 190px;
     height: 56px;
     border-radius: var(--radius-md);
     background: var(--accent-color);
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
   }
   
   .bottom-left-container-text {
     font-family: var(--font-family);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-base);
     background: transparent;
     border: none;
     color: var(--text-primary);
     cursor: pointer;
     padding: 0;
   }
   
   .content-background .right-container {
     flex: 1;
     min-width: 300px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .content-background .right-container img {
     max-width: 100%;
     height: auto;
     object-fit: contain;
   }
   
   /* ========================================
      CONTENT SECTION (Purple Background)
      ======================================== */
   .content-section {
     /* FIX: Removed fixed height */
     padding: 100px 0;
     background: var(--secondary-color);
   }
   
   .content-section .content-wrapper {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap; /* FIX: Critical for responsive */
     gap: 60px;
   }
   
   .content-section-left {
     flex: 1;
     min-width: 300px;
     max-width: 600px;
     /* FIX: Removed fixed height */
     gap: var(--spacing-2xl);
     display: flex;
     flex-direction: column;
     justify-content: center;
   }
   
   .content-section-left-text {
     font-family: var(--font-family);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-4xl);
     line-height: 1.2;
     color: var(--white);
     /* FIX: Removed fixed dimensions */
     width: 100%;
   }
   
   .content-section-left-button {
     width: 148px;
     height: 56px;
     border-radius: var(--radius-md);
     background: var(--accent-color);
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
   }
   
   .content-section-left-button-text {
     font-family: var(--font-family);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-base);
     background: transparent;
     border: none;
     color: var(--text-primary);
     cursor: pointer;
   }
   
   .content-section-right {
     width: 100%;
     max-width: 454px; /* Ensure card doesn't get too wide */
     background: white;
     border-radius: var(--radius-lg);
     border: 3px solid rgba(255, 255, 255, 1);
     overflow: hidden; /* Keeps content inside rounded corners */
   }
   
   .content-section-right-row {
     padding: 32px;
     display: flex;
     flex-direction: column;
     gap: 20px;
     align-items: flex-start;
   }
   
   .yellow-background {
     background: rgba(255, 233, 0, 1);
   }
   
   .content-section-right-row-container {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
   }
   
   .content-section-right-row-image-frex {
       height: 28px;
       width: auto;
       object-fit: contain; /* Prevents distortion */
    max-width: 100%;
   }
   .content-section-right-row-image {
       height: 24px;
       width: auto;
       object-fit: contain; /* Prevents distortion */
    max-width: 100%;
   }
   
   .content-section-right-row-rate-container-text {
     font-family: var(--font-family);
     font-weight: 600;
     font-size: 28px;
     color: var(--text-primary);
   }
   
   .content-section-right-row-rate-container {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
   }
   
   .content-section-right-row-rate-container-text-2 {
     font-size: 14px;
     font-weight: 500;
     margin-top: 4px;
   }
   
   /* ========================================
      RATES SECTION (Comparison Table)
      ======================================== */
   .rates-section {
     /* FIX: Removed fixed height */
     padding: 100px 0;
     background: var(--white);
   }
   
   .rates-section .content-wrapper {
     display: flex;
     flex-direction: row;
     justify-content: space-between; /* Align left and right columns to edges */
     align-items: center;
     flex-wrap: wrap;
     gap: 60px; /* Consistent gap instead of space-between */
   }
   
   .rates-section-left {
     flex: 1;
     min-width: 300px;
     max-width: 600px;
     gap: var(--spacing-2xl);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     text-align: left;
   }
   
   .rates-section-left-top-text-1 {
     font-family: var(--font-family);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-4xl);
     line-height: 1.2;
     margin-bottom: 16px;
     display: block;
   }
   
   .rates-section-left-top-text-2 {
     font-family: var(--font-family);
     font-size: var(--font-size-xl);
     color: var(--text-secondary);
   }
   
   .rates-section-left-button {
     width: 148px;
     height: 56px;
     border-radius: var(--radius-md);
     background: var(--accent-color);
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     align-self: flex-start;
   }
   
   .rates-section-left-button-text {
     font-family: var(--font-family);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-base);
     background: transparent;
     border: none;
     color: var(--text-primary);
     cursor: pointer;
   }
   
   /* Right Side (Table) Styles */
   .rates-section-right-top-container {
     width: 100%;
     max-width: 454px; /* Match card width with other sections */
     display: flex;
     flex-direction: column;
     gap: 16px;
   }
   
   .rates-section-right-container {
     width: 100%;
     border-radius: 12px;
     background: var(--White, rgba(255, 255, 255, 1));
     border: 1px solid rgba(241, 241, 242, 1);
     box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
     display: flex;
     flex-direction: column;
   }
   
   /* Header Row */
   .rates-section-right-container-headings {
     width: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     background: var(--BG-Screen, rgba(247, 248, 249, 1));
     padding: 16px 24px;
     border-radius: 12px 12px 0 0;
   }
   
   .rates-section-right-container-headings-row-items {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
   }
   /* Align the second header item to right */
   .rates-section-right-container-headings-row-items:last-child {
     align-items: flex-end;
   }
   
   .rates-section-right-container-headings-row-items-text {
     font-weight: 700;
     font-size: 16px;
   }
   
   .rates-section-right-container-headings-row-items-text-secondary {
     font-weight: 400;
     font-size: 12px;
     color: var(--text-secondary);
   }
   
   /* Main Frex Row (Purple) */
   .rates-section-right-container-top-row {
     width: 106% !important; /* Slight overhang for design effect */
     margin-left: -3%; /* Center the overhang */
     height: 64px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-radius: 8px;
     background: var(--Secondary-Color, rgba(122, 0, 245, 1));
     border: 3px solid rgba(255, 255, 255, 1);
     box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
     padding: 0 24px;
     box-sizing: border-box;
     position: relative;
     z-index: 2;
     margin-top: -10px; /* Pull it up slightly */
     margin-bottom: 10px;
   }
   
   .rates-section-right-container-top-row .rates-section-right-container-row-image {
     height: 24px;
     width: auto;
     filter: brightness(0) invert(1); /* Make logo white */
   }
   
   /* Standard Rows */
   .rates-section-right-container-rows {
     width: 100%;
     padding: 16px 24px;
     box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   /* Add inside your CSS */
.rates-section-right-container-row-image {
  max-width: 100px; /* Limit width */
  height: 32px; /* Fixed height for consistency */
  width: auto;
  object-fit: contain; /* Keep logo shape */
  display: block;
}
   
   .rates-section-right-container-headings-text {
     font-weight: 600;
     font-size: 18px;
   }
   .rates-section-right-container-row-items-text--white {
     color: white;
     font-weight: 600;
     font-size: 18px;
   }
   
   .row-separator {
     width: 100%;
     height: 1px;
     background: rgba(241, 241, 242, 1);
   }
   
   .rates-section-right-updated-at-section-text {
     text-align: center;
     color: rgba(112, 112, 123, 1);
     font-size: 14px;
   }
   
   /* ========================================
      STEPS SECTION
      ======================================== */
   .steps-section {
     /* FIX: Removed fixed height */
     padding: 100px 0;
     background: var(--bg-screen);
   }
   
   .steps-section .content-wrapper {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap-reverse; /* Puts image on top on mobile if wrapped */
     gap: 60px;
   }
   
   .steps-section-left {
     flex: 1;
     min-width: 300px;
     max-width: 600px;
     gap: var(--spacing-2xl);
     display: flex;
     flex-direction: column;
   }
   
   .steps-section-left-text {
     font-family: var(--font-family);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-4xl);
     line-height: 1.2;
   }
   
   .steps-section-left-button {
     width: 148px;
     height: 56px;
     border-radius: var(--radius-md);
     background: var(--accent-color);
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
   }
   
   .steps-section-left-button-text {
     font-family: var(--font-family);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-base);
     background: transparent;
     border: none;
     color: var(--text-primary);
     cursor: pointer;
   }
   
   .steps-section-right {
     width: 100%;
     max-width: 448px;
     height: auto;
   }
   
   /* ========================================
      TESTIMONIALS SECTION
      ======================================== */
   .testimonials-section {
     padding: 100px 0;
     background: var(--white);
   }
   
   .testimonials-section .content-wrapper {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 60px;
   }
   
   .testimonials-section-heading {
     font-family: var(--font-family);
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-4xl);
     text-align: center;
   }
   
   .testimonials-cards {
     width: 100%;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: stretch; /* Cards same height */
     flex-wrap: wrap; /* Wraps on smaller screens */
     gap: var(--spacing-lg);
   }
   
   .testimonial-card {
     flex: 1; /* Grow evenly */
     min-width: 300px;
     max-width: 360px;
     padding: 32px;
     border-radius: var(--radius-xl);
     border: 1px solid var(--border-light);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 16px;
     background: var(--white);
     box-sizing: border-box;
   }
   
   .testimonial-card-image {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     object-fit: cover;
   }
   
   .testimonial-card-text {
     font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-xl);
   }
   
   .testimonial-card-review {
     text-align: center;
     font-size: var(--font-size-lg);
     line-height: 1.6;
   }

   /* Update/Add this class */
.testimonial-card-rating {
  width: 120px !important; /* Force the width */
  height: 24px !important; /* Force the height */
  object-fit: contain; /* Ensures stars don't look like blobs */
  margin: 0 auto; /* Centers the stars if the parent allows */
  flex-shrink: 0; /* Prevents them from being squashed */
  display: block;
}
   
   /* ========================================
      RESPONSIVE MEDIA QUERIES
      ======================================== */
   
   /* Tablet and below */
   @media (max-width: 992px) {
     .top-left-container-text-1, 
     .content-section-left-text,
     .rates-section-left-top-text-1,
     .steps-section-left-text {
       font-size: 36px; /* Slightly smaller headings */
     }
   
     .content-wrapper {
       padding: 0 32px;
     }
   }
   
   /* Mobile */
   @media (max-width: 768px) {
     .top-container {
       padding-top: 100px;
     }
   
     /* Force Column Direction and Centering */
     .top-container .content-background,
     .content-section .content-wrapper,
     .rates-section .content-wrapper,
     .steps-section .content-wrapper {
       flex-direction: column;
       align-items: center;
       text-align: center;
     }
   
     /* Reverse Hero image order on mobile (Text top, Image bottom) */
     .top-container .content-background {
         flex-direction: column-reverse; 
     }
   
     /* Center align flex items inside column layout */
     .left-container,
     .content-section-left,
     .rates-section-left,
     .steps-section-left,
     .top-left-container {
       align-items: center;
       width: 100%;
     }
   
     /* Fix button alignment */
     .bottom-left-container,
     .content-section-left-button,
     .rates-section-left-button,
     .steps-section-left-button {
       margin: 0 auto;
     }
     
     /* Fix Table Overhang on Mobile */
     .rates-section-right-container-top-row {
         width: 100% !important;
         margin-left: 0;
     }
   
     /* Scrollable Testimonials on Mobile */
     .testimonials-cards {
       flex-wrap: nowrap;
       justify-content: flex-start;
       overflow-x: auto;
       padding-bottom: 20px; /* Space for scrollbar */
       scroll-snap-type: x mandatory;
       -webkit-overflow-scrolling: touch;
     }
     
     .testimonial-card {
       min-width: 280px;
       scroll-snap-align: center;
     }
   }
   
   /* Dynamic Colors for JS */
   .content-section-right-row-rate-container-text-2.positive { color: #2E7D32; }
   .content-section-right-row-rate-container-text-2.negative { color: #CF0F00; }
   .content-section-right-row-rate-container-text-2.neutral { color: var(--text-secondary); }
   
   /* App Download Modal (Keep existing) */
   .app-download-modal {
     position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     z-index: 9999; display: none; align-items: center; justify-content: center;
   }
   .app-download-modal.active { display: flex; }
   .modal-backdrop {
     position: absolute; top: 0; left: 0; width: 100%; height: 100%;
     background: rgba(0,0,0,0.5);
   }
   .app-download-modal .app-download-container {
     position: relative; z-index: 1; background: white; padding: 20px; border-radius: 12px;
   }