@import '../_var'

.solution_sec
    padding: 70px 0
    @include media(1024)
        padding: 50px 0
    @include media(768)
        padding: 40px 0
    @include media(540)
        padding: 30px 0
    .heading
        margin-bottom: 60px
        @include media(768)
            margin-bottom: 40px
        @include media(540)
            margin-bottom: 30px
    .solution_wrapper
        display: grid
        grid-template-columns: repeat(3, 1fr)
        grid-gap: 30px 20px
        @include media(991)
            grid-template-columns: repeat(2, 1fr)
            grid-gap: 24px 16px
        @include media(540)
            grid-template-columns: repeat(1, 1fr)
            grid-gap: 20px


.solution-secA
    padding: 30px 0 60px
    @include media(768)
        padding: 25px 0 50px
    @include media(540)
        padding: 20px 0 40px
    .breadcrumps
        margin-bottom: 30px
        @include media(540)
            margin-bottom: 20px
    .project-title
        display: flex
        align-items: center
        justify-content: space-between
        gap: 20px
        @include media(1024)
            gap: 15px
        @include media(768)
            flex-direction: column
            align-items: flex-start
            gap: 12px
        @include media(540)
            gap: 10px
        .share_pop
            display: flex
            align-items: center
            gap: 15px
            @include media(540)
                gap: 10px
            .share-icon
                position: relative
                cursor: pointer
                width: 42px
                height: 42px
                display: flex
                align-items: center
                justify-content: center
                border-radius: 50%
                transition: 0.3s
                @include media(540)
                    width: 38px
                    height: 38px
                svg
                    width: 24px
                    height: 24px
                    color: var(--primary)
                    @include media(540)
                        width: 16px
                        height: 16px
                &:hover
                    background: var(--primary)
                    svg
                        color: var(--white)
                .media
                    position: absolute
                    bottom: calc(100% + 10px)
                    right: 0
                    display: flex
                    gap: 10px
                    background: var(--white)
                    padding: 8px 10px
                    border-radius: 30px
                    box-shadow: 0 10px 25px rgba(0,0,0,0.1)
                    opacity: 0
                    pointer-events: none
                    transform: translateY(10px) scale(0.9)
                    transition: 0.25s ease
                    @include media(540)
                        gap: 8px
                        padding: 6px 8px
                    a
                        width: 34px
                        height: 34px
                        display: flex
                        align-items: center
                        justify-content: center
                        border-radius: 50%
                        background: var(--gray-light)
                        transition: 0.3s
                        @include media(540)
                            width: 30px
                            height: 30px
                        svg
                            width: 16px
                            height: 16px
                            color: var(--black)
                            @include media(540)
                                width: 14px
                                height: 14px
                        &:hover
                            background: var(--primary)
                            svg
                                color: var(--white)
                &.is-open
                    .media
                        opacity: 1
                        pointer-events: auto
                        transform: translateY(0) scale(1)
            .btn
                white-space: nowrap
        .colA
            @include media(1280)
                max-width: 50%
            @include media(768)
                max-width: 100%
                width: 100%
            h1
                font-size: 24px
                @include media(1024)
                    font-size: 22px
                    margin-bottom: 3px
                @include media(540)
                    font-size: 20px
            .loc
                display: flex
                align-items: center
                gap: 10px
                font-size: 14px
                margin-top: 5px
                color: $text
                @include media(540)
                    gap: 6px
                    flex-wrap: wrap
                a
                    color: $primary
                    &:hover
                        text-decoration: underline

    .project-detail-wrap
        margin-top: 25px
        display: flex
        --gap: 30px
        gap: var(--gap)
        @include media(1024)
            --gap: 15px
            gap: 15px
        @include media(991)
            flex-direction: column
            --gap: 0px
        @include media(540)
            margin-top: 15px
        &.description
            @include media(768)
                margin-top: 0
        &.no-highlights
            .colA
                flex: 0 1 100%
                width: 100%
                max-width: 100%
            .colB
                display: none
        .colA
            flex: 0 1 calc(70% - var(--gap))
            width: 100%
            max-width: calc(70% - var(--gap))
            @include media(991)
                flex: 0 1 100%
                max-width: 100%
            .image-wrapper
                display: grid
                grid-template-columns: 7fr 3fr
                grid-gap: 10px
                height: 100%
                @include media(675)
                    grid-template-columns: 1fr 1fr
                @include media(540)
                    grid-gap: 7px
                figure, .figure
                    display: block
                    width: 100%
                    height: 100%
                    position: relative
                    &:first-child
                        grid-row: span 2
                    img
                        border-radius: 10px
                        width: 100%
                        height: 100%
                        object-fit: cover
                        @include media(768)
                            border-radius: 5px
                    .play-btn
                        position: absolute
                        top: 8%
                        left: 5%
                        z-index: 2
                        --bordercolor: var(--primary)
                        --playbtncolor: var(--primary)
                        --btnsize: 46px
                        background: $white
                        @include media(768)
                            --btnsize: 36px
                        @include media(540)
                            --btnsize: 30px
                    .count
                        position: absolute
                        left: 0
                        top: 0
                        width: 100%
                        height: 100%
                        display: flex
                        flex-direction: column
                        align-items: center
                        justify-content: center
                        background: #00000080
                        color: $white
                        font-size: 14px
                        border-radius: 10px
                        @include media(540)
                            font-size: 12px
                            border-radius: 5px
                        span
                            display: block
                            font-size: 32px
                            font-weight: 600
                            @include media(1024)
                                font-size: 28px
                            @include media(768)
                                font-size: 24px
                            @include media(540)
                                font-size: 20px
                                line-height: 1

            section
                padding: 20px 0
                @include media(768)
                    padding: 15px 0
                @include media(540)
                    padding: 15px 0
                h3
                    font-size: 20px
                    line-height: 1.2
                    margin-bottom: 20px
                    font-weight: 600
                    @include media(768)
                        margin-bottom: 15px
                        text-align: center
                h6
                    font-size: 16px
                    font-weight: 500
                    line-height: 1.5
                .content
                    margin: 10px 0 20px
                    @include media(768)
                        text-align: center
                    @include media(540)
                        margin: 8px 0 15px
                    h1
                        font-size: 28px
                        font-weight: 600
                        margin: 10px 0
                    h2
                        font-size: 24px
                        font-weight: 600
                        margin: 10px 0
                    h3
                        font-size: 22px
                        font-weight: 600
                        margin: 10px 0
                    h4
                        font-size: 20px
                        font-weight: 500
                        margin: 8px 0
                    h5
                        font-size: 18px
                        font-weight: 500
                        margin: 8px 0
                    h6
                        font-size: 16px
                        font-weight: 500
                        margin: 6px 0
                    p
                        font-size: 14px
                        padding-bottom: 10px
                        line-height: 1.5
                        color: $text
                    strong
                        font-weight: 600
                        color: $text
                    ul
                        margin-bottom: 10px
                        padding-left: 18px
                        @include media(675)
                            padding-left: 10px
                        li
                            position: relative
                            padding-left: 28px
                            color: $text
                            @include media(675)
                                padding-left: 20px
                            &:not(:last-child)
                                margin-bottom: 3px
                            &::before
                                content: ''
                                position: absolute
                                top: 6px
                                left: 0
                                width: 6px
                                aspect-ratio: 1
                                border-radius: 50%
                                background: var(--text)
                                @include media(520)
                                    width: 6px
                    p, li
                        text-align: start
                        hyphens: none
                        font-size: 14px

                &.overview_sec
                    &.pt-5
                        padding-top: 30px
                        @include media(540)
                            padding-top: 20px
                    h6
                        font-weight: 600
                        font-size: 20px
                    h2
                        font-size: 24px
                        font-weight: 600

                &.Storage_sec
                    .doctor_wrapper
                        position: relative
                        .topPro_slider
                            max-width: 97%
                            @include media(540)
                                max-width: 100%
                            .card
                                border-radius: 10px
                                overflow: hidden
                                background: var(--white)
                                position: relative
                                @include media(540)
                                    padding: 8px
                                &::before
                                    position: absolute
                                    inset: 0
                                    width: 100%
                                    height: 100%
                                    content: ""
                                    background: linear-gradient(360deg, rgb(0 0 0 / 66%) 0%, rgba(255, 255, 255, 0) 79%)
                                    z-index: 1
                                .card-img
                                    border-radius: 5px
                                    overflow: hidden
                                    position: relative
                                    img
                                        width: 100%
                                        display: block
                                    
                                .card-content
                                    position: absolute
                                    left: 0
                                    bottom: 0
                                    padding: 20px
                                    z-index: 2
                                    @include media(540)
                                        padding: 5px
                                    h6, p
                                        color: var(--white)
                                    p
                                        font-size: 20px
                                        font-weight: 600

                &.facilities_sec
                    .facilities-content
                        width: 100%
                        .col
                            border: 1px solid #e7e7e7
                            transition: .5s ease
                            border-radius: 5px
                            --paddingtb: 8px
                            --paddinglr: 12px
                            --icon: 12px
                            @include media(1024)
                                --paddingtb: 15px
                                --paddinglr: 15px
                            @include media(675)
                                --paddingtb: 8px
                                --paddinglr: 15px
                            &:not(:last-child)
                                margin-bottom: 12px
                                @include media(675)
                                    margin-bottom: 8px
                            &.active
                                border-color: $text
                                .title
                                    p
                                        color: $black
                                    &::before
                                        background-image: var(--black)
                                        background-repeat: no-repeat
                                        transform: rotate(-90deg)
                                        background-size: 100% 100%
                                        background-position: 100% 50%
                                        background-size: contain
                            .title
                                position: relative
                                cursor: pointer
                                padding: var(--paddingtb) var(--paddinglr)
                                &::before
                                    content: ''
                                    position: absolute
                                    height: var(--icon)
                                    width: var(--icon)
                                    left: calc(100% - (var(--icon) + var(--paddinglr)))
                                    top: 50%
                                    translate: 0 -50%
                                    --gray: url(../../icon/arrow-down-gray.svg)
                                    --black: url(../../icon/arrow-down-black.svg)
                                    background-image: var(--gray)
                                    background-repeat: no-repeat
                                    transition: .5s ease
                                    transform-origin: center
                                    background-size: 100% 100%
                                    background-position: 100% 50%
                                    background-size: contain
                                p
                                    transition: .5s ease
                                    padding-right: 40px
                                    font-size: 16px
                                    color: $black
                                    @include font(500)
                                    @include media(540)
                                        font-size: 14px
                            article
                                .content
                                    padding: 0 var(--paddinglr) var(--paddingtb)
                                    column-count: 3
                                    @include media(768)
                                        column-count: 2
                                    @include media(540)
                                        column-count: 1
                                    ul
                                        li
                                            &::before
                                                background: url(/assets/icons/tick.svg) no-repeat
                                                width: 15px
                                                height: 15px
                                                background-size: 100%
                                                top: 4px
                                                border-radius: unset
                                                filter: brightness(0)

                &.address
                    .map
                        line-height: 0
                        @include media(540)
                            margin-top: 10px
                        iframe
                            filter: grayscale(1)
                            width: 100%
                            border-radius: 10px
                            transition: .5s ease
                            &:hover
                                filter: grayscale(0)
                            @include media(768)
                                height: 350px
                            @include media(540)
                                height: 280px
                                border-radius: 5px

                &.nearby_loc
                    .nearby_wrapper
                        position: relative
                        .nearby_slider
                            max-width: 97%
                            @include media(540)
                                max-width: 100%
                            .nearby_col
                                text-align: center
                                width: 100%
                                height: 100%
                                padding: 15px 10px
                                border-radius: 10px
                                background: var(--gray)
                                line-height: 1.2
                                @include media(540)
                                    padding: 12px 8px
                                    border-radius: 8px
                                .icon
                                    width: 50px
                                    height: 50px
                                    margin: 0 auto 10px
                                    @include media(540)
                                        width: 40px
                                        height: 40px
                                        margin: 0 auto 8px
                                    svg, img
                                        width: 100%
                                        height: 100%
                                        path
                                            fill: $primary
                                h6
                                    line-height: 1.2
                                    margin-bottom: 10px
                                    @include media(540)
                                        margin-bottom: 3px
                                p
                                    font-size: 14px
                                    color: $text
                                    strong
                                        font-weight: 500

        .colB
            flex: 1
            width: 100%
            max-width: 30%
            @include media(991)
                max-width: 100%
            .property_highlights
                background: #EFEFEF
                border-radius: 10px
                height: 100%
                @include media(991)
                    height: auto
                .highlights_details
                    padding: 25px 20px
                    border-bottom: 1px solid #00000021
                    @include media(1024)
                        padding: 15px 10px
                    @include media(540)
                        padding: 12px 10px
                    h5
                        font-size: 20px
                        line-height: 1.2
                        font-weight: 600
                        margin-bottom: 20px
                        @include media(1024)
                            font-size: 16px
                            margin-bottom: 10px
                    .high_col
                        display: flex
                        gap: 10px
                        &:not(:last-child)
                            margin-bottom: 15px
                            @include media(540)
                                margin-bottom: 10px
                        .icon
                            width: 30px
                            height: 30px
                            flex-shrink: 0
                            svg, img
                                width: 100%
                                height: 100%
                                path
                                    fill: $primary
                        .desc
                            h6
                                font-size: 16px
                                color: $black
                                font-weight: 500
                            p
                                font-size: 14px
                                color: $text
                            .accre_wrap
                                display: grid
                                grid-template-columns: repeat(5, 1fr)
                                grid-gap: 10px
                                margin-top: 5px
                                @include media(1024)
                                    grid-template-columns: repeat(4, 1fr)
                                    grid-gap: 8px
                                @include media(540)
                                    grid-template-columns: repeat(4, 1fr)
                                figure
                                    text-align: center
                                    line-height: 1.2
                                    img
                                        width: 30px
                                        height: 30px
                                        border-radius: 50%
                                        line-height: 1
                                    p
                                        line-height: 1
                                        font-size: 14px
                                        font-weight: 600
                                        color: $text
                .view_all
                    width: 100%
                    margin-top: 20px
                    @include media(540)
                        margin-top: 15px
                    img
                        transform: rotate(90deg)
                        transition: .5s ease
                    &:hover
                        img
                            transform: rotate(0deg)
                .highlights_action
                    padding: 20px
                    @include media(1024)
                        padding: 15px 10px
                    @include media(540)
                        padding: 12px 10px
                    h5
                        font-size: 18px
                        line-height: 1.2
                        font-weight: 600
                        margin-bottom: 20px
                        @include media(1024)
                            font-size: 16px
                            margin-bottom: 10px
                    .btn
                        width: 100%
            .contact-form
                margin-top: 30px
                border: 1px solid #E0E0E0
                box-shadow: 1px 1px 8.7px 0 #0000001A
                border-radius: 10px
                position: sticky
                top: calc(var(--headerheight) + 40px)
                @include media(1024)
                    top: calc(var(--headerheight) + 20px)
                @include media(991)
                    position: relative
                    top: 0
                @include media(768)
                    margin-top: 20px
                @include media(540)
                    margin-top: 10px
                    border-radius: 8px
                .title
                    background: #EFEFEF
                    font-size: 20px
                    font-weight: 500
                    padding: 10px 20px
                    border-top-left-radius: 10px
                    border-top-right-radius: 10px
                    @include media(540)
                        padding: 10px 15px
                        border-top-left-radius: 8px
                        border-top-right-radius: 8px
                .form
                    padding: 20px 20px 30px
                    --gaptb: 20px
                    --textareaheight: 80px
                    @include media(768)
                        padding: 15px 15px 25px
                    @include media(540)
                        padding: 15px 15px 20px
                        --gaptb: 15px

    nav
        border-bottom: 1px solid #d3d3d3b5
        position: sticky
        background: var(--white)
        top: var(--headerheight)
        margin: 30px 0 20px
        z-index: 4
        @include media(1024)
            top: calc(var(--headerheight))
        @include media(768)
            top: calc(var(--headerheight))
            margin: 30px 0 0
        @include media(540)
            margin: 20px 0 0
        .tab-nav
            display: flex
            align-items: center
            gap: 30px
            @include media(768)
                overflow-x: auto
                gap: 20px
                -webkit-overflow-scrolling: touch
                scrollbar-width: none
                &::-webkit-scrollbar
                    display: none
            @include media(540)
                gap: 15px
            li
                position: relative
                font-size: 14px
                line-height: 1.2
                color: $text
                transition: .5s ease
                padding: 10px 0
                cursor: pointer
                @include media(768)
                    white-space: nowrap
                @include media(540)
                    font-size: 14px
                    padding: 8px 0
                &::before
                    content: ""
                    position: absolute
                    left: 0
                    bottom: 0
                    height: 3px
                    background: $primary
                    transition: .5s ease
                    width: 0
                &.active
                    font-weight: 500
                    color: $primary
                    &::before
                        width: 100%


.solutionD-secB
    padding: 30px 0 60px
    @include media(768)
        padding: 25px 0 50px
    @include media(540)
        padding: 20px 0 40px
    .heading
        max-width: 600px
        margin: 0 auto 3rem
        @include media(768)
            max-width: 100%
        @include media(540)
            margin: 0 auto 2rem
    .more_solution_wrapper
        position: relative
        .swiper-nav
            width: 102%
            max-width: 102%
            @include media(540)
                width: 100%
                max-width: 100%
        .common-slider1
            padding: 0 10px
            @include media(540)
                padding: 0


.amenities,
.Social_sec
    padding: 40px 0
    @include media(768)
        padding: 30px 0
    @include media(540)
        padding: 20px 0
    h3
        font-size: 22px
        margin-bottom: 20px
        font-weight: 600
        @include media(540)
            margin-bottom: 15px
    .amenities-grid
        display: grid
        grid-template-columns: repeat(3, 1fr)
        gap: 12px
        @include media(991)
            grid-template-columns: repeat(3, 1fr)
            gap: 10px
        @include media(768)
            grid-template-columns: repeat(2, 1fr)
        @include media(540)
            grid-template-columns: repeat(2, 1fr)
        @include media(380)
            grid-template-columns: repeat(1, 1fr)
        .amenity
            display: flex
            align-items: center
            gap: 12px
            border-radius: 10px
            transition: all 0.3s ease
            cursor: pointer
            @include media(768)
                padding: 12px 14px
                gap: 10px
            @include media(540)
                padding: 10px 12px
                gap: 8px
                border-radius: 8px
            img
                width: 28px
                height: 28px
                object-fit: contain
                @include media(540)
                    width: 24px
                    height: 24px
                    flex-shrink: 0
            span
                font-size: 14px
                font-weight: 500
                color: #333
            &:hover
                transform: translateY(-1px)
.connectivity_sec

  h5
    text-transform: capitalize
    margin-bottom: 14px
    font-size: 20px

  ul
    margin-bottom: 14px
    padding-left: 18px

    @include media(675)
      padding-left: 10px

    li
      position: relative
      padding-left: 28px
      color: $text
      font-size: 14px
      line-height: 1.5

      @include media(675)
        padding-left: 20px

      &:not(:last-child)
        margin-bottom: 3px

      &::before
        content: ''
        position: absolute
        top: 7px
        left: 0
        width: 6px
        height: 6px
        border-radius: 50%
        background: $text

  p
    font-size: 14px
    text-align: start
    line-height: 1.5

  .connectivity_wrap
    display: grid
    grid-template-columns: repeat(3, 1fr)
    gap: 20px
    margin-top: 16px

    @include media(675)
      grid-template-columns: 1fr

    .connectivity
      display: flex
      align-items: flex-start
      gap: 12px

      .icon
        width: 30px
        height: 30px
        flex-shrink: 0
        border-radius: 50%
        display: flex
        align-items: center
        justify-content: center

        img, svg
          width: 100%
          height:100%
          object-fit: contain

      .connectivity-content
        margin: 0 
        h6
          font-size: 15px
          font-weight: 500
          margin-bottom: 4px
          margin-top: 0
          color: $black

        p
          display: flex
          align-items: center
          gap: 6px
          font-size: 13px
          color: $text
          margin: 0

          img, svg
            width: 14px
            height: 14px

.highlights_sec
    
  h5
    text-transform: capitalize
    margin-bottom: 14px
    font-size: 20px


  ul
    margin-bottom: 14px
    padding-left: 18px

    @include media(675)
      padding-left: 10px

    li
      position: relative
      padding-left: 28px
      color: $text
      font-size: 14px
      line-height: 1.5

      @include media(675)
        padding-left: 20px

      &:not(:last-child)
        margin-bottom: 3px

      &::before
        content: ''
        position: absolute
        top: 7px
        left: 0
        width: 6px
        height: 6px
        border-radius: 50%
        background: $text

  p
    font-size: 14px
    text-align: start
    line-height: 1.5

  .highlights_wrap
    display: grid
    grid-template-columns: repeat(3, 1fr)
    gap: 20px
    margin: 16px 0

    @include media(675)
      grid-template-columns: 1fr

    .highlights
      display: flex
      align-items: flex-start
      gap: 12px

      .icon
        width: 30px
        height: 30px
        flex-shrink: 0
        border-radius: 50%
        display: flex
        align-items: center
        justify-content: center

        img, svg
          width: 100%
          height:100%
          object-fit: contain

      .highlights-content
        margin: 0 
        h6
          font-size: 15px
          font-weight: 500
          margin-bottom: 4px
          margin-top: 0
          color: $black

        p
          display: flex
          align-items: center
          gap: 6px
          font-size: 13px
          color: $text
          margin: 0

          img, svg
            width: 14px
            height: 14px

.core_infra
    h5
        text-transform: capitalize
        margin-bottom: 14px
        font-size: 20px
    ul
        margin-bottom: 14px
        padding-left: 18px

        @include media(675)
           padding-left: 10px

        li
            position: relative
            padding-left: 28px
            color: $text
            font-size: 14px
            line-height: 1.5

            @include media(675)
                padding-left: 20px

            &:not(:last-child)
                margin-bottom: 3px

            &::before
                content: ''
                position: absolute
                top: 7px
                left: 0
                width: 6px
                height: 6px
                border-radius: 50%
                background: $text

            p
                font-size: 14px
                text-align: start
                line-height: 1.5
    .core_wrap
        display: grid
        grid-template-columns: repeat(3, 1fr)
        gap: 12px
        margin: 28px 0

        @include media(675)
          grid-template-columns: 1fr

        .connectivity
            display: flex
            align-items: center
            gap: 12px

            .icon
                width: 30px
                height: 30px
                flex-shrink: 0
                border-radius: 50%
                display: flex
                align-items: center
                justify-content: center

                img, svg
                    width: 100%
                    height:100%
                    object-fit: contain

            .connectivity-content
                margin: 0 
                h6
                    font-size: 14px
                    font-weight: 500
                    margin-bottom: 4px
                    margin-top: 0
                    color: $black

               

         



header
    &.header-fixed
        box-shadow: none