@import '../_common'
p
  text-align: justify 
.banner 
    .banner-wrapper
        bottom: 15% !important
        .content
            margin: 0 auto 
            width: 41%
            @include respond-to(screen-540)
              width: 80%
                
    .banner2
        .flex
            justify-content: center  !important
            .colC
                margin: 0  !important

.health-secA
    padding: 80px 0 80px
    @include respond-to(screen-1440)
      padding: 50px 0

    .heading
         text-align: center
         width: 30%
         margin: 0 auto
         @include respond-to(screen-1440)
            width: 60%
         @include respond-to(screen-540)
            width: 100%
        
         h2
            margin-bottom: 26px

    .health-card
        margin-top: 60px
        @include respond-to(screen-1440)
           margin-top: 36px
        h6
            text-align: center
            width: 27%
            margin: 0 auto
            font-weight: 600
            @include respond-to(screen-1440)
              width: 42%
            @include respond-to(screen-768)
              width: 56%
            @include respond-to(screen-540)
              width: 64%
            @include respond-to(screen-420)
              width: 100%
            
            
        .health-grid
            display: grid
            grid-template-columns: repeat(5, 1fr)
            gap: 20px
            margin: 60px 0
            @include respond-to(screen-1440)
              grid-template-columns: repeat(3, 1fr)
            @include respond-to(screen-768)
              grid-template-columns: repeat(2, 1fr)
              margin: 45px 0
            @include respond-to(screen-420)
              grid-template-columns: repeat(1, 1fr)
            
            
            
            .card
                display: flex
                flex-direction: column
                justify-content: center
                align-items: center
                padding: 30px
                border: 1px solid var(--prime)
                border-radius: 15px
                cursor: pointer
                transition: all 0.3s ease

                @include respond-to(screen-768)
                   padding: 16px
                &:hover
                    img
                        filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(160deg) brightness(118%) contrast(119%)
                    
                    border-color: #00a8ff
                    background: rgba(0, 168, 255, 0.05)
                p
                    text-align: center
                    margin-top: 38px
                    @include respond-to(screen-768)
                        font-size: 15px
                    @include respond-to(screen-420)
                      padding-top: 30px
                      width: 84%
                      margin: 0 auto
                    
.health-secB
    padding: 0 0 80px 0
    @include respond-to(screen-1024)
      padding: 0 0 45px 0

    .heading
        text-align: center
        width: 40%
        margin: 0 auto
        @include respond-to(screen-1440)
           width: 60%
        @include respond-to(screen-768)
           width: 76%
        @include respond-to(screen-540)
           width: 100%
           font-size-adjust: 16px
        
        
        img
            width: 60%
            @include respond-to(screen-1440)
              width: 40%
    .health-secB-grid
        display: grid
        grid-template-columns: repeat(2 , 1fr)
        gap: 45px
        padding-top: 75px
        @include respond-to(screen-1440)
          gap: 14px
          padding-top: 55px
        @include respond-to(screen-768)
          grid-template-columns: repeat(1 , 1fr)
        

        img
            width: 100%
            border-radius: 15px
            height: 100%
            object-fit: cover
            position: sticky
            top: calc( 25% -  65px )
            @include respond-to(screen-1366)
               top: calc( 30% -  65px )
            @include respond-to(screen-991)
                position: static
        .health-secB-ul
            list-style: none
            padding-left: 25px
            @include respond-to(screen-768)
                padding: 24px 0 0
            li
              font-size: 16px
              color: var(--text)
              margin-bottom: 12px
              position: relative
              text-align: justify
              padding-left: 45px
              @include respond-to(screen-768)
                font-size: 14px
                padding-left: 30px
                margin-bottom: 18px
              @include respond-to(screen-768)
                margin-bottom: 12px

              &:last-child
                margin-bottom: 0  
              &::before
                content: "•"
                color: var(--prime)
                font-size: 3.2em
                position: absolute
                left: 0
                top: -28px