@import ../_common

.banner
    .bg
        position: relative  // ADD THIS!
        
        .banner-wrapper
            bottom: 10% !important
         
            .banner-content
                display: flex
                align-items: flex-end
                justify-content: center

                .content
                    width: 100%
                    max-width: 100%
                    text-align: center

                    h1
                        color: var(--white)
                        text-transform: capitalize
                        line-height: 1.2

                    p
                        margin: 20px 0 30px
                        color: var(--white)
                        opacity: 0.9
                        font-weight: 300
                        width: 100%
                        max-width: 650px
                        margin: 0 auto
        
        .searchInput 
            position: absolute
            bottom: -50px
            left: 50%
            transform: translateX(-50%)
            width: 100% 
            padding: 20px 0
            max-width: 750px 
            z-index: 5

            
            .input
                position: relative
                width: 100%

                &::before
                    content: ""
                    position: absolute
                    left: 18px
                    top: 50%
                    transform: translateY(-50%)
                    width: 18px
                    height: 18px
                    background: url(../../icon/search-icon.svg) no-repeat center center
                    background-size: contain
                    pointer-events: none
                    z-index: 1  

                input
                    width: 100%
                    height: 50px
                    padding: 0 14px 0 49px
                    border: 1px solid #B5DDB7
                    border-radius: 26px
                    font-size: 14px
                    color: #333
                    outline: none
                    background: rgba(250, 249, 247, 1)
                    font-family: $Poppins

                    &::placeholder
                        color: #666


.faqs-secA
  max-width: 1200px
  margin: 0 auto
  padding: 71px 20px

  .section-title
    margin: 20px 0 30px

    h2
      font-size: 32px
      color: black
      font-weight: 400
      letter-spacing: 0.5px

  .tab-nav
    display: grid
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr))
    gap: 10px
    margin-bottom: 50px
    padding: 0
    list-style: none

    li
      padding: 12px 20px
      cursor: pointer
      border-radius: 8px
      transition: all 0.3s ease
      font-size: 14px
      font-weight: 500
      text-align: center
      color: var(--thirdy)
      background: #f5f5f5
      border: 2px solid transparent
      display: flex
      flex-direction: column
      align-items: center
      justify-content: center
      line-height: 1.2
      gap: 12px

      &:hover
        color: var(--white)
        background: var(--thirdy)
        border-color: var(--thirdy)

      svg
        width: 24px
        height: 24px

        
      &.active
        color: var(--white)
        background: var(--thirdy)
        border-color: var(--thirdy)
        font-weight: 600

  .tab-nav-content
    .tabs
      display: none

      &.active
        display: block
        animation: fadeIn 0.4s ease

  @keyframes fadeIn
    from
      opacity: 0
      transform: translateY(10px)
    to
      opacity: 1
      transform: translateY(0)

  .accordion
    width: 100%
    margin-bottom: 15px

    &:last-child
      margin-bottom: 0

    .accordion-item
      background-color: #f9f9f9
      border-radius: 8px
      box-shadow: 0 2px 5px rgba(0,0,0,0.1)
      overflow: hidden
      transition: all 0.3s ease

      &.active
        box-shadow: 0 4px 12px rgba(0,0,0,0.15)

        .accordion-item-header
          background-color: #f0f0f0
          
          &::after
            content: "−"
            font-size: 32px

      .accordion-item-header
        padding: 24px 80px 24px 30px
        cursor: pointer
        font-size: 18px
        font-weight: 500
        color: #111
        position: relative
        transition: background 0.3s ease
        user-select: none

        &:hover
          background-color: #f0f0f0

        &::after
          content: "+"
          font-size: 28px
          font-weight: 300
          position: absolute
          right: 30px
          top: 50%
          transform: translateY(-50%)
          width: 32px
          height: 32px
          display: flex
          align-items: center
          justify-content: center
          background: var(--primary)
          border-radius: 4px
          color: var(--white)
          transition: all 0.3s ease

      .accordion-item-body
        // Remove max-height constraint - let jQuery handle it
        display: none
        overflow: hidden

        .accordion-item-body-content
          padding: 0 30px 24px 30px
          margin: 0
          list-style: none

          li
            position: relative
            padding: 8px 0 8px 18px
            line-height: 1.6
            color: #555
            font-size: 15px

            &::before
              content: ''
              position: absolute
              left: 0
              top: 16px
              width: 6px
              height: 6px
              background: var(--primary)
              border-radius: 50%

  @media (max-width: 768px)
    padding: 40px 15px

    .section-title h2
      font-size: 26px

    .tab-nav
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
      gap: 8px

      li
        padding: 10px 15px
        font-size: 13px

    .accordion
      .accordion-item-header
        padding: 20px 70px 20px 20px
        font-size: 16px

        &::after
          right: 20px
          width: 28px
          height: 28px

      .accordion-item-body
        .accordion-item-body-content
          padding: 0 20px 20px 20px

          li
            font-size: 14px



.faqs-secB
    background: var(--gradient-c)
    padding: 70px 0

    .heading
        text-align: center
        margin-bottom: 1rem

        h4
            color: var(--thirdy)
            margin-bottom: 15px

        p
            color: var(--thirdy)

        .grid
          display: grid
          grid-template-columns: repeat(2, 1fr)
          gap: 20px
          margin-top: 40px
          padding: 0 3rem
          .newProducts
            background: var(--white)
            padding: 25px
            border-radius: 12px
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px
            text-align: left
            border: 1px solid rgba(191, 229, 186, 0.5)
            display: flex
            align-items: flex-start
            gap: 14px

            .content
                h6
                    font-weight: 600
                    color: rgba(9, 34, 13, 1)
                    margin-bottom: 12px
                    font-size: 18px
                    font-family: $Kugile

                p
                    font-size: 14px
                    color: rgba(9, 34, 13, 0.8)
                    line-height: 1.5
                    margin-bottom: 20px
        
.faqs-secF
    padding: 70px 0
    .heading
        margin: 40px 0 
        h3
            text-align: center
            color: var(--thirdy)

    .grid
        display: grid
        grid-template-columns: repeat(3, 1fr)
        gap: 20px
        margin-bottom: 60px

        .item
            background: #fff
            padding: 20px
            border-radius: 10px
            box-shadow: 0 0 10px rgba(0,0,0,0.08)
            transition: 0.3s

            h6
                margin-bottom: 6px
                font-size: 18px
                font-weight: 600

            p
                font-size: 14px
                color: #666

            &:hover
                transform: translateY(-5px)