/* Products Section CSS (New from Figma) */
section.products {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centering the main container */
    padding: 80px 20px; /* Vertical padding, horizontal padding for smaller screens */
    gap: 100px; /* This might be too large, Figma's top-level gap */
    width: 100%;
    background: #FFFFFF;
    box-sizing: border-box;
  }
  
  .products-inner-container { /* Corresponds to Figma's Frame 1984079602 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 40px;
    width: 100%;
    max-width: 1240px; /* Figma specified width */
  }
  
  .products-header { /* Corresponds to Figma's Frame 1984079544 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 20px;
    width: 100%; /* align-self: stretch in Figma */
  }
  
  .products-header h2 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 48px;
    line-height: 61px;
    text-align: center;
    color: #252525;
    margin: 0;
  }
  
  .products-header p {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 31px;
    text-align: center;
    color: #797979;
    margin: 0;
    max-width: 700px; /* To control line length of subtitle */
  }
  
  .product-content-area { /* Corresponds to Figma's Frame 1984079601 */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center tabs and product display */
    padding: 0px;
    gap: 40px;
    width: 100%;
  }
  
  .product-tabs-container { /* Corresponds to Figma's 'Tabs' */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* Center the tabs */
    padding: 0px;
    gap: 16px;
    width: 100%;
    height: 48px;
    overflow-x: auto; /* Allow scrolling on small screens */
  }
  
  .product-tab button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row; /* Figma has column for some, but row is typical for button text */
    justify-content: center;
    align-items: center;
    padding: 14px 24px;
    gap: 10px;
    height: 48px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    border: 1px solid #D1D1D1;
    border-radius: 44px;
    color: #8E8E8E;
    background-color: transparent;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }
  
  .product-tab.active button {
    background-color: #1181D0;
    border: 1px solid #C0D4FA; /* Figma: Colours/BF Primary Blue/blue-100 */
    border-radius: 24px;
    color: #EEEEEE; /* Figma: Monochromes/Neutral Grey/grey-50 */
  }
  
  .product-display { /* Corresponds to Figma's Frame 1984079600 - container for cards row and nav */
    display: flex;
    flex-direction: column;
    align-items: stretch; 
    padding: 0px;
    gap: 40px;
    width: 100%;
    overflow: hidden; /* Ensure cards outside the viewport are clipped */
    min-height: 480px; /* Ensure container is tall enough for cards */ 
  }
  
  .product-cards-row-wrapper { 
    width: 100%;
    overflow: hidden;
  }
  
  .product-cards-row { 
    display: flex;
    flex-direction: row;
    align-items: stretch; 
    padding: 0px;
    gap: 20px;
    transition: transform 0.5s ease-in-out;
  }
  
  .product-card { 
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    gap: 20px;
    /* width: 100%; */ /* Removed as flex-basis should control width */
    flex: 0 0 calc(50% - 10px);
    min-height: 476px; 
    background: #EBF1FD; 
    border: 1px solid #EBF1FD;
    border-radius: 12px;
    position: relative;
    overflow: hidden; 
  }
  
  .product-card-image { 
    width: 100%; /* Changed from 110% to prevent card expansion */
    height: 370px; /* Adjusted height to better match Figma */
    border-radius: 8px;
    position: relative; 
    overflow: hidden; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #EBF1FD; 
  }
  
  .product-image { 
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .product-card-gradient-overlay { 
    position: absolute;
    width: 100%; 
    height: 236px;
    left: 0px;
    bottom: 0px;
    background: radial-gradient(26.29% 56.01% at 23.71% 70.55%, #EBF1FD 0%, rgba(235, 241, 253, 0) 100%);
    z-index: 1; 
  }
  
  .product-card-floating-list { 
    box-sizing: border-box;
    display: flex;
    flex-direction: column; 
    align-items: center; 
    padding: 14px 10px;
    gap: 10px;
    position: absolute;
    width: 185px;
    left: 19px;
    top: 32px;
    background: #FFFFFF;
    border-radius: 14px;
    z-index: 2;
  }
  
  .floating-list-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 14px;
    width: 100%; 
  }
  
  .floating-list-item-avatar img {
    width: 36px;
    height: 36px;
    border-radius: 21.5655px; 
    object-fit: cover;
  }
  
  .floating-list-item-lines {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 4px; 
    flex-grow: 1;
  }
  
  .floating-list-line {
    height: 10px; 
    background-color: #EBEBEB;
    border-radius: 5px; 
  }
  .floating-list-line.w-36 { width: 36px; }
  .floating-list-line.w-56 { width: 56px; }
  .floating-list-line.w-21 { width: 21.01px; }
  .floating-list-line.w-72 { width: 72px; }
  .floating-list-line.w-11 { width: 11.01px; }
  .floating-list-line.w-27 { width: 27px; }
  .floating-list-line.w-140 { width: 140px; }
  
  
  .product-card-floating-message { 
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 12px;
    gap: 8px;
    position: absolute;
    width: 297px;
    left: 21px;  
    top: 305px;  
    background: #FBFCF7;
    border: 1px solid #A2BFF7; 
    border-radius: 14px;
    z-index: 2;
  }
  
  .floating-message-icon-bg { 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    width: 49px;
    height: 48.31px;
    background: #F1EDEE;
    border-radius: 5px;
    flex-shrink: 0;
  }
  
  .floating-message-icon-bg img { 
    width: 29px; 
    height: 22.31px; 
  }
  
  .floating-message-text-lines { 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 5px; 
    flex-grow: 1;
  }
  
  .floating-message-line {
    height: 8px; 
    background-color: #DADBDD;
    border-radius: 4px;
  }
  .floating-message-line.w-100 { width: 100%; } 
  .floating-message-line.w-50 { width: 50%; opacity: 0.8; } 
  .floating-message-line.w-40 { width: 40%; opacity: 0.5; } 
  
  
  .product-card-details { 
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: space-between;
    padding: 0px;
    width: 100%; 
    margin-top: auto; 
    position: relative; 
    z-index: 3;
  }
  
  .product-card-text { 
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;
    flex-grow: 1; 
  }
  
  .product-card-text h3 {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    color: #1A1A1A;
    margin: 0;
  }
  
  .product-card-text p {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #303030;
    margin: 0;
  }
  
  .product-card-arrow-btn { 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px; 
    gap: 10px; 
    width: 46px;
    height: 46px;
    background: #1181D0;
    border-radius: 8px;
    flex-shrink: 0; 
    cursor: pointer;
  }
  
  .product-card-arrow-btn img { 
    width: 20px; 
    height: 20px; 
  }
  
  .product-bottom-nav-controls { 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    width: 100%; 
    height: 54px; 
  }
  
  .product-action-buttons { 
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 20px;
    height: 54px; 
  }
  
  .btn-product-primary { 
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 4px 4px 4px 14px; 
    gap: 10px;
    height: 54px; 
    background: #168CE0;
    border: 1px solid #FFFFFF; 
    border-radius: 12px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
  }
  
  .btn-product-primary .arrow-icon-container { 
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
    width: 46px;
    height: 46px;
    background: #5BB0EC;
    border-radius: 8px;
  }
  
  .btn-product-primary .arrow-icon-container img { 
    width: 20px; 
    height: 20px; 
  }
  
  .btn-product-secondary { 
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 24px;
    gap: 10px;
    height: 54px; 
    background: #FFFFFF;
    border: 2px solid rgba(17, 129, 208, 0.8); 
    border-radius: 12px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #141414;
    text-decoration: none;
    cursor: pointer;
  }
  
  .product-carousel-arrows { 
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 4px; 
    height: 36px; 
  }
  
  .carousel-arrow-btn {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border-radius: 22.0408px; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .carousel-arrow-btn.prev { 
    border: 0.887177px solid #B2B2B2;
    opacity: 0.4; 
  }
  
  .carousel-arrow-btn.next { 
    border: 0.887177px solid #4F4F4F;
  }
  
  .carousel-arrow-btn img { 
    width: 16px; 
    height: 16px; 
  }
  
  /* Product Controls Section Styling from Figma */
  .product-controls {
    display: flex;
    flex-direction: row;
    justify-content: center; /* Center the action buttons */
    align-items: center;
    padding: 0px;
    gap: 20px; /* Reduced gap from 310px, will rely on space-between */
    width: 100%; /* Ensure it takes full width to allow centering of its children */
    max-width: 1240px; /* Match parent container width */
    height: 54px; /* Figma specified height for buttons */
    margin-top: -20px; /* Reduce space from .product-display above (assuming parent gap is 40px) */
    box-sizing: border-box;
  }
  
  .product-action-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 0px;
    gap: 20px;
    /* width: 384px; /* Let it be flexible */
    height: 54px;
  }
  
  .product-controls .btn-primary {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center; /* Center text and new icon */
    align-items: center;
    padding: 0 14px; /* Adjusted padding for new icon */
    gap: 10px;
    width: auto; /* Auto width based on content */
    min-width: 162px; /* Keep Figma width as min-width */
    height: 54px;
    background: #168CE0;
    border: 1px solid #168CE0; /* Figma specified white border, but primary should be solid */
    border-radius: 12px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #FFFFFF;
    text-decoration: none; /* Ensure no underline from <a> tag */
  }
  
  .product-controls .btn-primary .btn-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    background: #5BB0EC;
    border-radius: 8px;
  }
  
  .product-controls .btn-primary img {
    width: 24px; /* Adjusted for better visual fit */
    height: 24px; /* Adjusted for better visual fit */
  }
  
  .product-controls .btn-secondary {
    box-sizing: border-box;
    display: flex;
    flex-direction: row; /* Changed to row for typical button layout */
    justify-content: center;
    align-items: center;
    padding: 14px 24px;
    /*gap: 10px; /* Not visible with single line text */
    width: auto; /* Auto width based on content */
    min-width: 202px; /* Figma specified width as min-width */
    height: 54px;
    background: #FFFFFF;
    border: 2px solid rgba(17, 129, 208, 0.8);
    border-radius: 12px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #141414;
    text-decoration: none; /* Ensure no underline from <a> tag */
  }
  
  /* Carousel Navigation in Product Controls */
  .product-controls .carousel-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 4px; /* Figma specified */
    width: 85px; /* Figma specified */
    height: 36px;
    margin-left: auto; /* Push to the right */
  }
  
  .product-controls .carousel-nav .nav-arrow {
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border-radius: 22px; /* Figma specified */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #FFFFFF; /* Figma specified */
    padding: 0; /* Ensure no button default padding */
    border: 1px solid #4F4F4F; /* Figma: grey-600, default enabled state */
    transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  }
  
  /* Specific border styles for prev/next are removed as default is now set on .nav-arrow */
  
  .product-controls .carousel-nav .nav-arrow:disabled {
    opacity: 0.4;
    cursor: default;
    border-color: #B2B2B2 !important; /* Figma: grey-200 for disabled, ensure override */
    background-color: #FFFFFF; /* Keep background white on disable */
  }
  
  .product-controls .carousel-nav .nav-arrow i {
    font-size: 18px; /* Adjust as needed for visual balance */
    color: #4F4F4F; /* Default icon color (Figma grey-600) */
    line-height: 1; /* Ensure icon is vertically centered if button has padding */
  }
  
  .product-controls .carousel-nav .nav-arrow:disabled i {
    color: #B2B2B2; /* Disabled icon color (Figma grey-200) */
  }
  
  .product-controls .carousel-nav .nav-arrow:hover:not(:disabled) {
    border-color: #168CE0; /* Example: BitsFlow primary blue for hover */
    background-color: #EBF1FD; /* Light blue background on hover */
  }
  
  .product-controls .carousel-nav .nav-arrow:hover:not(:disabled) i {
    color: #168CE0; /* Icon color on hover to match border */
  }
  /* End of Product Controls Section Styling */
  
  
  /* Responsive Design Adjustments */
  @media (max-width: 1024px) {
    section.products {
      padding: 60px 40px; 
      gap: 60px;
    }
    .products-inner-container {
      gap: 30px;
    }
    .products-header h2 {
      font-size: 40px; 
      line-height: 52px;
    }
    .products-header p {
      font-size: 18px; 
      line-height: 28px;
    }
    .product-content-area {
      gap: 30px;
    }
    .product-bottom-nav-controls {
      flex-direction: column; 
      gap: 20px;
      height: auto;
      align-items: center; 
    }
    .product-action-buttons {
      order: 1; 
      justify-content: center; 
    }
    .product-carousel-arrows {
      order: 2; 
    }
  }
  
  @media (max-width: 768px) {
    section.products {
      padding: 40px 20px; 
      gap: 40px;
    }
    .products-header h2 {
      font-size: 32px; 
      line-height: 42px;
    }
    .products-header p {
      font-size: 16px; 
      line-height: 26px;
    }
    .product-tabs-container {
      gap: 10px; 
    }
    .product-tab button {
      padding: 10px 16px; 
      font-size: 14px;
      height: 40px;
    }
    .product-cards-row {
      flex-direction: column; 
      align-items: center; 
    }
    .product-card {
      flex: 0 0 100%; 
      min-height: auto; 
    }
    .product-card-image {
      height: 300px; 
    }
    .product-card-text h3 {
      font-size: 20px;
      line-height: 28px;
    }
    .product-card-text p {
      font-size: 14px;
      line-height: 22px;
    }
    .product-card-arrow-btn {
      width: 40px;
      height: 40px;
    }
    .btn-product-primary,
    .btn-product-secondary {
      width: 100%; 
      font-size: 14px;
      padding: 12px 20px;
      height: 48px;
    }
    .btn-product-primary .arrow-icon-container {
      width: 40px;
      height: 40px;
    }
  }
  
  /* End of Products Section CSS (New from Figma) */