/* Remix Icon */
@import url('https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css')

/* Bootstrap */
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css')

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;700&display=swap')

/* Light Box */
@import url('lightgallery.css')

@font-face
    font-family: Prumo
    src: url('../font/prumo.ttf')


/* Variables */
$font: 'Poppins', sans-serif
$heading: Prumo
$blk: #0F0E0E
$g: #f1f3f6
$lg: #F2F2F2
$w: #fff
$r: #F07B14
$gr: #24AA4B


/* CSS Reset */
*,*,*:after,*:before
    margin: 0
    padding: 0
    position: relative
    box-sizing: border-box
    transition: all 0.6s cubic-bezier(0.22, 0.61, 0.36, 1)

*
    &:focus
        outline: none !important
        box-shadow: none !important

::selection
    background-color: $w
    color: $r

html,body
    font-family: $font
    font-weight: 400
    scroll-behavior: smooth
    color: $blk
    font-size: 16px
    overflow-x: hidden
    @media (max-width: 768px)
        overflow-x: hidden !important
    @media (max-width: 576px)
        font-size: 13px !important
        

div,header,nav,footer,section,aside,article
    display: block

a
    color: $r
    text-decoration: none
    &:hover
        text-decoration: none
        color: $r

h1,h2,h3,h4,h5,h6
    font-weight: 700
    font-family: $heading

p
    color: #666666
    @media (max-width: 576px)
        font-size: 13px

ul
    margin: 0
    padding: 0
    li
        list-style-type: none

img,video
    width: 100%

svg
    height: auto


/* Components */
.btn
    min-width: 170px
    min-height: 50px
    background-color: $blk
    border-radius: 0
    color: $w
    padding: 12px
    &::before
        position: absolute
        right: 0
        bottom: 0
        width: 12px
        height: 12px
        content: ''
        background-color: $r
        border-radius: 50%
        transform-origin: bottom right
    &:hover
        background-color: $r
        color: $w
        &::before
            transform: scale(2)
            background-color: $blk

.btn.small
    min-width: unset
    padding: 12px 20px
    i
        font-size: 24px


.title
    font-size: 32px
    z-index: 2
    position: relative
    span
        z-index: 4
    &::before
        position: absolute
        top: 5px
        left: -5px
        width: 20px
        height: 20px
        content: ''
        background-color: $r
        border-radius: 50%
        z-index: 1
    &::after
        position: absolute
        top: 20px
        left: -10px
        width: 15px
        height: 15px
        content: ''
        background-color: $gr
        border-radius: 50%
        z-index: 1

.link
    color: $r
    text-decoration: underline

.text-widget
    @media (max-width: 576px)
        p
            text-align: justify
    .title
        margin-bottom: 20px
    .btn
        margin-top: 20px

.text-center
    .title
        margin: 20px auto
        width: max-content

.container-full
    @media (min-width: 1440px)
        max-width: 1400px
        margin: 0 auto
        
.no-wrap
    white-space: nowrap !important

/* Main CSS */
.top-header.subpage
    @media (max-width: 576px)
        display: none
.top-header
    position: absolute
    z-index: 1095
    width: 100%
    @media (max-width: 576px)
        .scroll-1
            order: 1 !important
        .scroll-2
            order: 2 !important
        .logo
            text-align: center !important
            padding: 10px !important
        position: relative !important
        .social
            display: none
    @media (min-width: 1280px) and (max-width: 1440px)
        .logo
            min-height: 100px !important
            padding: 15px 10px !important
    .logo
        padding-top: 5px
        padding-bottom: 5px
        min-height: auto !important
        text-align: right
        min-height: 120px
        padding-right: 30px
        img
            width: 240px
    .social
        padding: 20px
        ul
            li
                display: inline-block
                margin: 0 10px
            i
                font-size: 24px
            a
                color: $blk
    .navigation
        text-align: center
        ul
            text-align: center
        li
            display: inline-block
            margin: 30px 10px
            a
                color: $blk
                z-index: 2
        li.active
            &::before
                position: absolute
                left: -10px
                top: 0
                width: 20px
                height: 20px
                content: ''
                background-color: $r
                border-radius: 50%
                z-index: 1
            a
                font-weight: bold

.homepage-menu
    text-align: center
    p
        font-size: 20px
        cursor: pointer
        font-weight: 500
        color: $blk
        text-transform: uppercase
        margin-bottom: 0
        i
            vertical-align: middle

.fixed-header
    position: fixed
    background-color: rgba(255,255,255,0.5)
    .scroll-3
        order: 3 !important
    .scroll-2
        order: 2 !important
    .scroll-1
        order: 1 !important
    @media (min-width: 1280px) and (max-width: 1440px)
        .social
            padding: 15px !important
        .logo
            padding: 10px !important
    .logo
        padding-top: 5px
        padding-bottom: 5px
        min-height: auto !important
    .social
        padding: 20px

.fixed-menu
    position: fixed !important
    z-index: 1099 !important


@media (max-width: 576px)
    .rellax
        transform: translate3d(0px, 0, 0px) !important


/* Mega Menu For home page Only */
.mega-item
    position: absolute
    z-index: 2
    display: flex
    justify-content: center
    align-items: center
    height: 100vh
    width: 100px
    right: 0
    @media (min-width: 1280px) and (max-width: 1440px)
      .nav-item
          width: 60% !important
          p
              font-size: 22px !important
              margin-bottom: 0 !important 
              &::after
                left: 35px !important
              &::before
                left: 18px !important
            
    .nav-item
        transform-origin: top
        position: absolute
        top: 0
        right: 0
        display: flex
        justify-content: center
        align-items: center
        height: 100%
        width: 100%
        p
            transform: rotate(-270deg)
            font-size: 32px
            cursor: pointer
            font-weight: 300
            color: $blk
            &::before
                position: absolute
                width: 5px
                height: 5px
                background-color: $r
                bottom: 0
                left: 30px
                content: ''
                border-radius: 50%
            &::after
                position: absolute
                width: 5px
                height: 5px
                background-color: $r
                bottom: 0
                left: 50px
                content: ''
                border-radius: 50%
.mega-item.sub-page
    position: absolute
    z-index: 2
    display: flex
    justify-content: center
    align-items: center
    height: 30vh
    width: 100px
    left: 0
    @media (max-width: 576px)
        display: none !important
    .subpage-item
        transform-origin: top
        position: absolute
        top: 0
        left: 0
        padding: 10px
        display: flex
        justify-content: center
        align-items: center
        height: 100%
        width: 100%
        h3
            position: absolute
            transform: rotate(270deg)
            color: $blk
            bottom: -200px
            font-size: 52px


.mega-menu
    opacity: 0
    visibility: hidden
    height: 0
.mega-menu.open
    height: auto
    opacity: 1
    visibility: visible
    position: fixed
    z-index: 1096
    display: flex
    height: 100vh
    overflow: auto
    width: 100%    
    justify-content: center
    align-items: center
    letter-spacing: 6px
    line-height: 50px
    text-align: center
    cursor: url('../images/favicon/close.png'), auto
    @media (max-width: 576px)
        width: 100%
        top: 0 !important
        .menu-subject
            width: 100% !important
    .menu-subject
        width: 60%
        background-color: rgba(15,14,14,.8)
        display: flex
        justify-content: center
        align-items: center
        position: absolute
        left: 0
        top: 0
        height: 100vh
    .mega-close
        position: absolute
        top: 20px
        left: 20px
        cursor: pointer
        width: 100px
        text-align: left
        p
            letter-spacing: normal
            color: $w
            &:before
                position: absolute
                left: 50%
                top: 25px
                width: 30px
                height: 1px
                content: ''
                background-color: $w
    ul
        cursor: pointer
    li
        margin: 10px
        &:before
            position: absolute
            top: 0
            height: 0
            width: 100%
            content: ''
            background-color: $blk
            left: 0
            z-index: 3
    a
        font-size: 24px
        color: $w
        &:hover
            letter-spacing: normal
            span
                opacity: 0
            &:before
                letter-spacing: 6px
                opacity: 1
        &:before
            position: absolute
            top: 50%
            left: 50%
            content: attr(data-text)
            font-size: 50px
            text-align: center
            transform: translate(-50%,-50%)
            letter-spacing: -30px
            opacity: 0
            color: $r


/* Slider */
.hero
    padding-top: 80px
    max-width: 97%
    z-index: 1
    margin: 0 auto
    width: 100%
    @media (max-width: 576px)
        max-width: 100%
        padding-top: 20px
        .arrow-box
            padding: 10px 20px !important
    @media (min-width: 1280px) and (max-width: 1440px)
        padding-top: 100px
        max-width: 97%
        .carousel-caption
            h1,h2,h3,h4
                font-size: 32px !important
        .slide-tag            
            h1,h2,h3,h4
                font-size: 60px !important
                right: -130px !important
    .carousel-caption
        text-align: left
        left: 0
        padding: 20px 50px 20px 50px
        background-color: rgba(0, 0, 0, 0.3)
        bottom: 120px
        width: max-content
        h1,h2,h3,h4
            color: $w
            margin-bottom: 0
            font-size: 32px !important
            font-weight: 400
    .arrow-box
        padding: 10px 0
        text-align: right
        padding-right: 50px
        background-color: $w
        width: max-content
        right: 0
        position: absolute
        padding-left: 30px
        bottom: 30px
    .slide-tag
        position: absolute
        top: 0
        right: 0
        width: 100%
        height: 100%
        pointer-events: none
        h1,h2,h3,h4
            transform: rotate(270deg)
            position: absolute
            right: -215px
            top: 40%
            font-size: 100px
            color: $r
            margin-bottom: 0


/* About Us Section */
.about-wrapper
    padding: 150px 0
    @media (max-width: 576px)
        overflow: hidden !important
        padding: 30px 0
        padding-top: 0 !important
        .scroll-text
            display: none
        &:after,&:before
            display: none !important
        .about-text
            margin-left: 0 !important
            padding: 0 !important
    @media (min-width: 1280px) and (max-width: 1440px)
        .scroll-text
            p
                left: 80% !important
    &:before
        position: absolute
        top: 40%
        left: 0
        width: 30%
        height: 1px
        content: ''
        background-color: $blk
        z-index: 3
    &:after
        position: absolute
        top: 40%
        right: 0
        width: 30%
        height: 1px
        content: ''
        background-color: $blk
        z-index: 3
    .img-widget
        margin-top: 50px
        z-index: 2
        .title
            margin-bottom: 30px
    .about-text
        margin-left: -130px
        z-index: 3
        .text-widget
            background-color: $w
            box-shadow: 0 0 24px rgba(0,0,0,0.09)
            padding: 70px 30px
    .scroll-text
        position: absolute
        left: 0
        bottom: 230px
        width: 100%
        height: 50px
        .text
            position: absolute
            width: 100%
            right: 0
        p
            position: absolute
            left: 50%
            top: 0
            font-size: 60px
            color: $blk
            white-space: nowrap
        .front
            z-index: 3
            color: transparent
            -webkit-text-stroke: 1px $blk

// end about section

// Product Section
.product-wrapper
    padding-top: 250px
    @media (max-width: 576px)
        padding-top: 50px !important
        .justify-content-end
            padding: 0 30px
            .btn
                display: none
        .circle
            border-radius: 0 !important
            height: unset !important
            z-index: 2 !important
            left: 0 !important
            top: 50px !important
            bottom: auto !important
            transform: translate(0) !important
            h1,h2,h3,h4,h5
                margin-bottom: 0 !important
        .box
            margin: 15px 0 !important
    @media (min-width: 1280px) and (max-width: 1440px)
        .box:nth-child(3)
            margin-left: -140px !important
    .btn
        z-index: 10
    .box
        .circle
            position: absolute
            width: 230px
            height: 230px
            background-color: $blk
            border-radius: 50%
            padding: 20px
            text-align: center
            display: grid
            place-content: center
            h1,h2,h3,h4,h5
                color: $w
        a
            color: $w
    .box:first-child
        margin-top: 50px
        .circle
            bottom: -120px
            left: 50%
            transform: translateX(-50%)
        img
            max-width: 750px
            max-height: 550px
            object-fit: cover
            height: 100%
            width: 100%
    .box:nth-child(2)
        margin-left: -230px
        z-index: 3
        .circle
            top: -120px
            left: 50%
        img
            max-width: 620px
            max-height: 480px
            object-fit: cover
            height: 100%
            width: 100%
    .box:nth-child(3)
        margin-left: -260px
        margin-top: 120px
        .circle
            bottom: -20px
            right: 30px
        img
            max-width: 740px
            max-height: 450px
            object-fit: cover
            height: 100%
            width: 100%
            
.text-wrapper
    text-align: center
    padding: 100px 0
    @media (max-width: 576px)
        padding: 30px 0 !important
        text-align: center
        h1
            font-size: 42px !important
            letter-spacing: 8px !important
    @media (min-width: 1280px) and (max-width: 1440px)
        h1
            font-size: 200px !important
    h1
        font-size: 300px
        background: url('../images/banner/highlight-bg.jpg')
        color: transparent
        -webkit-background-clip: text
        pointer-events: none
        user-select: none
        letter-spacing: 20px


.export-wrapper
    padding: 70px 0
    @media (max-width: 576px)
        padding-top: 0 !important
        .country-export
            border-radius: 0 !important
            height: unset !important
            width: 100% !important
            span
                font-size: 24px !important
        .export-text
            margin: 0 !important
            padding: 50px !important
            p
                &:before
                    display: none !important
            &:after,&:before
                display: none !important
    @media (min-width: 1280px) and (max-width: 1440px)
        .export-text
            margin-left: -250px !important
            padding: 50px !important
            
    .img-widget
        background-image: url('../images/banner/export-bg.jpg')
        background-size: cover
        img
            opacity: 0
    .country-export
        width: 230px
        height: 230px
        display: grid
        place-content: center
        background-color: $blk
        border-radius: 50%
        padding: 10px
        transform: translate(50px,-100px)
        span,h3
            text-align: center
            color: $w
        span
            font-size: 60px
            font-weight: bold
        .heading
            font-size: 24px
            margin: 0
    .export-text
        margin-left: -350px
        background-color: $blk
        color: $w
        padding: 100px 50px
        margin-top: -200px
        &:before
            position: absolute
            right: 0
            width: 200px
            height: 80px
            content: ''
            background-color: $r
            bottom: -50px
            z-index: 2
        &:after
            position: absolute
            right: 0
            width: 100px
            height: 100%
            content: ''
            background-color: $w
            top: 0
        p
            color: $w
            &:before
                position: absolute
                height: 200px
                width: 1px
                background-color: $r
                bottom: -250px
                left: 50%
                transform: translateX(-50%)
                content: ''
    
.inspiration-wrapper
    padding-bottom: 100px
    @media (max-width: 576px)
        padding-bottom: 0 !important
        .inspi-gallery
            margin-left: 0 !important
            padding: 0 !important
            padding-top: 30px !important
            img
                margin: 0 !important
                max-width: 33.33% !important
                max-height: 360px
                min-height: 360px !important
                transform: translateX(0) !important
        .inpire-content
            padding: 0 30px !important
            &:before
                left: 0 !important
                top: -200px !important
                width: 100% !important
                height: 100% !important
                transform: translateX(0) !important
    @media (min-width: 1280px) and (max-width: 1440px)
        &:hover
            .inspi-gallery
                img:first-child
                    transform: translateY(-60px) translateX(-60px) !important
                img:nth-child(2)
                    transform: translateX(-10px)
                img:nth-child(3)
                    transform: translateX(-130px) !important
    &:hover
        .inspi-gallery
            img:first-child
                transform: translateY(-100px)
            img:nth-child(2)
                transform: translateX(-10px)
            img:nth-child(3)
                transform: translateX(130px)
    &:before
        position: absolute
        bottom: 280px
        left: 10px
        width: 30%
        height: 1px
        content: ''
        background-color: $blk
        z-index: 2
    .inpire-box
        padding: 20px 50px
    .inpire-content
        &:before
            position: absolute
            right: 0
            left: -100px
            top: 50%
            width: 100%
            height: 50%
            background-color: $g
            content: ''
            transform: translateY(-50%)
    .inspi-gallery
        display: flex
        cursor: pointer
        img
            object-fit: cover
        img:first-child
            margin-top: -100px
            width: 320px
            height: 360px
            object-fit: cover
            z-index: 1
        img:nth-child(2)
            margin-left: -420px
            margin-top: 200px
            width: 410px
            height: 340px
            object-fit: cover
            z-index: 3
        img:nth-child(3)
            width: 380px
            height: 400px
            object-fit: cover
            z-index: 2
            margin-left: -80px

footer
    @media (max-width: 576px)
        .back-top
            display: none !important
        .main-footer
            max-width: 100% !important
            flex: 0 0 100% !important
        .copyright
            max-width: 100% !important
            flex: 0 0 100% !important
            text-align: center
            padding: 10px
            p
                position: relative !important
                left: auto !important
                transform: rotate(0deg) !important

    @media (min-width: 1280px) and (max-width: 1440px)
        .logo
            img
                width: 100% !important
        .social
            li
                margin: 10px !important
    .copyright
        p
            position: absolute
            transform: rotate(-270deg)
            white-space: nowrap
            margin-bottom: 0
            left: -30px
            bottom: -10px
    .back-top
        padding: 0
        z-index: 2
        a
            position: absolute
            transform: rotate(270deg)
            color: $blk
            font-size: 18px
            white-space: nowrap
            bottom: -30px
            h1,h2,h3,h4
                font-size: 18px
    .col-sm-1
        max-width: 5%
        flex: 0 0 5%
    .col-sm-10
        max-width: 90%
        flex: 0 0 90%
    .main-footer
        background-color: $blk
        padding: 30px 20px
        text-align: center
        a,i,p
            color: $w
            margin: 0
        td
            padding: 7px
            vertical-align: top
            i
                font-size: 18px
        td:last-child
            text-align: left !important
        .footer-logo
            text-align: center
            border-right: 2px solid $w
            img
                width: 250px
        .social
            li
                display: inline-block
                margin: 20px
                i
                    font-size: 24px
                a
                    color: $w
    .credit
        padding: 10px
        text-align: center
        background-color: $w
        .design
            transition: all 0.5s ease-in-out
            span
                color: $blk !important
                display: none
                transition: all 0.5s ease-in-out
            .ri-heart-fill
                color: red
                vertical-align: bottom
            .ri-at-line
                vertical-align: bottom
                transition: all 0.5s ease-in-out
            p
                margin-bottom: 0
                &:hover
                    span
                        display: inline-block
                        color: $blk
                        transition: all 0.5s ease-in-out
                    img                 
            img
                width: 20px
                transition: all 0.5s ease-in-out

/* Export Section */
.export-widget
    padding: 150px 0
    @media (max-width: 576px)
        .img-widget
            margin-top: 0 !important
            video
                width: 100% !important
                margin-top: 0 !important
        &:before
            display: none
        padding: 30px 0!important
        .about-text
            margin-left: 0 !important
            .text-widget
                padding: 10px !important
    &:before
        position: absolute
        top: 30%
        right: 0
        width: 150px
        height: 70px
        content: ''
        background-color: $r
        z-index: 3
    &:after
        position: absolute
        top: 25%
        right: 10%
        width: 30%
        height: 1px
        content: ''
        background-color: $blk
        z-index: 3
    .img-widget
        margin-top: 50px
        z-index: 2
        background-attachment: fixed
        background-size: cover
        video
            width: 120%
            margin-top: -50px
            position: relative
    .about-text
        margin-left: -130px
        z-index: 3
        transform: translateY(50px)
        .text-widget
            background-color: $w
            padding: 30px 50px
    .scroll-text
        position: absolute
        left: 0
        bottom: 230px
        width: 100%
        height: 50px
        .text
            position: absolute
            width: 100%
            right: 0
        p
            position: absolute
            left: 50%
            top: 0
            font-size: 60px
            color: $blk
            white-space: nowrap
        .front
            z-index: 3
            color: transparent
            -webkit-text-stroke: 1px $blk

.country-widget
    padding: 100px 0
    padding-bottom: 0 !important
    @media (max-width: 576px)
        background-color: $g
        margin-top: 50px !important
        padding: 50px 0 !important
        .country-list
            padding: 0 !important
            li
                min-width: unset !important
    .container-fluid
        background-color: $g
    .country-list
        text-align: center
        padding: 50px
        ul
            display: flex
            flex-wrap: wrap
            justify-content: center
            align-items: center
        li
            display: inline-block
            font-size: 20px
            vertical-align: top
            padding: 10px !important
            margin: 10px !important
            vertical-align: baseline
            min-width: 170px
            animation: country-steps 10s steps(20, end) forwards
            text-transform: capitalize
            img
                width: 20px
        li:nth-child(odd)
            padding-top: calc(5px * var(--i))
            padding-left: calc(3px * var(--i))
        li:nth-child(even)
            margin-right: calc(3px * var(--i))
            padding-left: calc(6px * var(--i))




.certificate-wrapper
    padding: 100px 0
    .map-widget
        text-align: center
        img
            width: 80%
    .certificate-widget
        .title
            color: $blk
        &::before
            position: absolute
            right: 0
            top: 10%
            width: 50%
            height: 1px
            content: ''
            background-color: $blk
        &:hover
          .certi-box
              transform: scale(.5)
              opacity: .5
        .certi-box
            display: grid
            width: 140px
            height: 140px
            place-content: center
            margin: 20px 0
            border-radius: 50%
            &:hover
                transform: scale(1)
                opacity: 1
                cursor: pointer
            img
                width: 80px
        .certi-box.org
            background-color: $r
        .certi-box.blk
            background-color: $blk
        .certi-box.gr
            background-color: $gr

/* Contact Section */
.contact-widget
    padding: 150px 0
    padding-bottom: 0
    @media (max-width: 576px)
        .contact-box
            text-align: center !important
            p
                text-align: center !important
        padding: 50px 0 !important
        i
            display: block 
        .text-widget
            padding: 20px !important
        .about-text
            margin-left: 0 !important

        iframe
            width: 100% !important
    &:before
        position: absolute
        top: 30%
        right: 0
        width: 150px
        height: 70px
        content: ''
        background-color: $r
        z-index: 3
    &:after
        position: absolute
        top: 10%
        right: 10%
        width: 30%
        height: 1px
        content: ''
        background-color: $blk
        z-index: 3
    .img-widget
        z-index: 2
        background-attachment: fixed
        background-size: cover
        iframe
            width: 120%
            height: 100%
            min-height: 550px
            border: 0
    ul
        display: flex
        margin-top: 120px
        justify-content: space-between
        width: 100%
        padding: 50px 0
        li
            height: 180px
            width: 180px
            background-color: $r
            position: relative
            border-radius: 50%
        li:nth-child(2)
            background-color: $blk
        li:nth-child(3)
            background-color: $gr
    .about-text
        margin-left: -130px
        z-index: 3
        transform: translateY(100px)
        .text-widget
            background-color: $w
            padding: 30px 50px
    .contact-form
        padding-top: 120px
        z-index: 3
        .text-widget
            background-color: $w
            padding: 30px 50px
        .input
            margin: 20px 0
            margin-bottom: 50px
            input[type="text"],input[type="email"],input[type="phone"],select,textarea,input[type="password"]
                width: 100%
                display: block
                border: none
                border-bottom: 3px solid $r
                margin-bottom: 20px
                padding: 10px 0
            &:focus-within
                input[type="text"],input[type="email"],input[type="phone"],select,textarea,input[type="password"]
                    border-bottom: 3px solid $blk

    .contact-box
        padding: 20px 0
        h4
            margin-bottom: 20px
            font-size: 18px
        a
            color: $blk
        i
            vertical-align: middle
            font-size: 24px

/* Catalogue page */
.catalogue-wrapper
    padding: 150px 0
    @media (max-width: 576px)
        padding: 30px 0!important
        .cover
            width: 100% !important
        .col-sm-4
            .btn
                left: 25% !important
                transform: translate(0) !important
    .catalogue
        .cat-box
            margin-bottom: 70px
            .cover
                height: 360px
                width: 255px
                object-fit: cover
            .cat-logo
                position: absolute
                z-index: 2
                background-color: $w
                width: 70%
                padding: 10px
            .btn
                position: absolute
                bottom: -10px
                left: 50%
                transform: translateX(-30%)
            .size
                position: absolute
                transform: rotate(270deg)
                bottom: 20px
                left: 0
                font-weight: bold
                font-family: $heading
                color: $w
                padding: 10px
                -webkit-backdrop-filter: blur(4px)
                background-color: rgba(0,0,0,0.1)
    .sidebar
        background-color: $blk
        padding: 30px
        li
            color: $w
            list-style-type: none
            margin: 30px 0
            padding-left: 20px
            cursor: pointer
            a
                color: $w
        li.active
            color: $r
            a
                color: $r
            &::before
                position: absolute
                left: -0px
                top: 5px
                content: ''
                background-color: $r
                width: 10px
                height: 10px
                border-radius: 50%

.info-wrapper
    padding: 150px 0
    @media (max-width: 576px)
        padding: 30px 0 !important
        .tab-content
            table
                width: 100%
                overflow-x: scroll !important
                display: block
        .nav-tabs
            li
                margin: 10px 0 !important
    .nav-tabs
        margin-bottom: 30px
        justify-content: space-between
        margin-top: 30px
        border: none
        a
            color: $blk
        .nav-link
            border: 1px solid
            border-radius: 0 !important
            min-width: 170px
            text-align: center
    .tab-pane
        .nav-tabs
            a
                text-decoration: underline
        .active
            color: $r !important
    table
        margin-bottom: 100px

.calculator-widget
    padding: 80px 0
    .guide
        background-color: $lg
        margin-top: 50px
        padding: 30px
        .tips
            .d-title
                font-size: 32px
                opacity: 1 !important
            p
                color: $blk
        .vertual-result
            p
                margin-bottom: 0
                font-weight: bold
                color: $blk
            .yft
                transform: rotate(270deg)
                position: absolute
                left: -15px
                top: 50px
        .area
            width: 345px
            height: 125px
            background: url('../images/svg/tile-pattern.png') repeat
            background-position: -4px -4px
            border: 1px solid $blk
            @media (max-width: 576px)
                width: unset
    .p-title
        font-size: 24px !important
        margin-bottom: 20px
    @media (max-width: 1024px)
        .shape-widget
            display: none
    .poligone
        right: 30px
        top: 30px !important
    .shape-widget
        top: 50%
    ::placeholder
        font-size: 14px
        opacity: 0.4
    .result
        background-color: $w
        box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1)
        padding: 30px
        .d-flex
            justify-content: space-between
            border-bottom: 1px solid $blk
            margin-top: 10px
            .text-right
                font-weight: bold
                color: $blk
        .note
            margin-top: 30px
            font-size: 14px
    .input
        &:focus-within
            background-color: #f1f3f6
            input,textarea,select
                border-color: $r
            label
                color: $r
        input,textarea,select
            width: 100%
            display: block
            border: 0
            border-bottom: 3px solid $blk
            margin-bottom: 20px
            padding: 7px 10px
            background-color: transparent


/* Collection page */
.collection-widget
    padding: 150px 0
    .row-300-600,.row-600-1200
        max-width: 1000px
        margin: -15px auto
    .row-600-600
        max-width: 1350px
        margin: -15px auto
    .col-row
        justify-content: space-center !important
        .box-300x600mm
            max-width: 220px
            max-height: 440px
            padding-right: 10px
        .box-600x600mm
            padding-right: 10px
            max-width: 300px
            max-height: 300px
        .box-800x800mm
            padding-right: 10px
            max-width: 450px
            max-height: 450px
        .box-600x1200mm
            padding-right: 10px
            max-width: 300px
            max-height: 600px
        .box-1200x1200mm
            padding-right: 10px
            max-width: 500px
            max-height: 500px
    @media (max-width: 1440px) and (min-width: 1200px)
        .container-full
            max-width: 1200px !important
    @media (max-width: 576px)
        .collection-pagination
            flex-wrap: wrap !important
            ul
                flex-wrap: wrap !important
        .row.align-items-center
            .col-sm-3
                max-width: 50%
                flex: 0 0 50%
        .series
            ul
                flex-wrap: wrap !important
        padding: 30px 0!important
        .title
            width: 100% !important
            text-align: left !important
        .container-full
            padding: 30px 15px !important
            .pb-5
                padding-bottom: 0 !important
            .pt-5
                padding-top: 0 !important
            .mt-5
                margin-top: 0 !important
        .small, .mid, .big
            margin: 20px 0 !important
        .collection-box
            margin: 0 !important
            .collection-title
                height: unset !important
                border-radius: 0 !important
                top: 50px !important
                bottom: auto !important
                transform: translate(0) !important
                left: 0 !important
                width: max-content !important
    .series
        display: flex
        justify-content: center
        margin-bottom: 30px
        ul
            display: flex
            justify-content: center
            li
                margin: 10px
                a
                    padding: 10px
                    display: block
                    border: 1px solid $blk
                    min-width: 170px
                    text-align: center
                    color: $blk
            li.active
                a
                    background-color: $blk
                    color: $w

    .collection-pagination
        display: flex
        justify-content: center
        margin-top: 30px
        ul
            display: flex
            justify-content: center
            a,strong
                display: inline-block
                padding: 2px 10px
                margin: 0 3px
                color: $blk
            strong
                background-color: $blk
                color: $w
    .collection-items
        margin-bottom: 15px
        &:hover
            .btn
                opacity: 1
        .tag
            position: absolute
            width: max-content
            background-color: rgba(0, 0, 0, 0.6)
            padding: 10px
            left: 0
            top: 20px
            color: $w
            z-index: 2
        .btn
            position: absolute
            bottom: 50%
            left: 50%
            transform: translateX(-50%) translateY(-50%)
            opacity: 0
            &:hover
                background-color: $w !important
                color: $blk
    .title
        width: max-content
        margin: 20px auto
    .container-full:first-child
        padding-bottom: 100px
    .collection-box
        .link
            position: absolute
            width: 100%
            height: 100%
            top: 0
            left: 0
            display: block
            z-index: 2
        img
            height: 100%
            width: 100%
            object-fit: cover
        .collection-title
            display: grid
            place-content: center
            background-color: $blk
            position: absolute
            border-radius: 50%
            padding: 10px
            h1,h2,h3,h4
                color: $w
                font-size: 24px
    .mid
        margin-top: 50px
        margin-left: -50px
        z-index: 2
        .collection-title
            width: 180px
            height: 180px
            top: -30px
            left: 50px
    .big
        .collection-title
            width: 230px
            height: 230px
            bottom: -30px
            right: 50px
    .small
        margin-top: -50px
        margin-left: -120px
        .collection-title
            width: 140px
            height: 140px
            top: 50px
            right: -50px

.soon
    height: 90vh
    display: flex
    justify-content: center
    align-items: center
    text-align: center
    @media (max-width: 576px)
        height: auto !important
        lottie-player
            width: 100% !important
    h1,h2,h3,h5,h6
        font-size: 120px
        opacity: .1


.about-widget
    padding: 200px 0
    @media (max-width: 576px)
        padding-top: 0 !important
        padding-bottom: 50px !important
        .about-text
            order: 1 !important
        .col-sm-7
            order: 2 !important
    &::before
        position: absolute
        left: 10%
        bottom: 250px
        width: 50%
        height: 1px
        content: ''
        background-color: $blk
    .img-widget
        margin-top: 50px
        z-index: 2
        background-attachment: fixed
        background-size: cover
    .text-widget
        z-index: 3
        background-color: $w
        padding: 20px
    .about-text
        margin-left: -130px
        background-color: $w
        &:before
            position: absolute
            top: 30%
            right: -35px
            width: 90px
            height: 230px
            content: ''
            background-color: $r
            z-index: 3
        .founded
            position: absolute
            top: 45%
            right: -100px
            z-index: 5

.vision-widget
    padding: 50px 0
    @media (max-width: 576px)
        padding-top: 0 !important
    &::before
        position: absolute
        top: 60px
        left: 0
        width: calc( 50% - 470px )
        height: 15px
        content: ''
        background-color: $blk
    &::after
        position: absolute
        bottom: -150px
        left: 0
        width: calc( 50% + 100px )
        height: 300px
        content: ''
        background-color: $g
        z-index: -1

.counter-widget
    padding: 0 0 100px 0
    @media (max-width: 576px)
        padding-bottom: 0 !important
        .counter-item
            margin-top: 20px !important
        .offset-1
            margin-left: 0 !important
    .scroll-text
        position: absolute
        left: 0
        top: 80px
        width: 100%
        height: 50px
        .text
            position: absolute
            width: 100%
            right: 0
        p
            position: absolute
            left: 90%
            top: 0
            font-size: 60px
            color: $blk
            white-space: nowrap
            font-family: $heading
        .front
            z-index: 3
            color: transparent
            -webkit-text-stroke: 1px $blk
    .img-widget
        img
            z-index: 2
    .counter-item
        margin-top: -100px
        padding-bottom: 40px
        &::before
            position: absolute
            left: 0
            bottom: 0
            width: 30px
            height: 30px
            background-color: $blk
            content: ''
        &::after
            position: absolute
            left: 15px
            bottom: 15px
            width: 150px
            height: 1px
            background-color: $r
            content: ''
        p
            font-size: 18px
            color: $r
            font-weight: bold
        h1,h2,h3,h4,h5
            font-size: 18px

.certificate-widget
    padding: 100px 0
    @media (max-width: 576px)
        background-color: $blk !important
        margin-top: 50px !important
        padding: 30px 0 !important
    &::before
        position: absolute
        left: 0
        width: 100%
        height: 150px
        background-color: $blk
        content: ''
        top: 50%
        transform: translateY(-50%)
    .col:nth-child(odd)
        margin-top: 100px
    .title
        color: $w

.made-widget
    padding: 70px 0
    text-align: center
    @media (max-width: 576px)
        padding: 30px 0 !important
    .title
        width: max-content
        margin: 30px auto
    svg
        path


#butter
    transition: none !important

.pro-application
    text-align: center
    i
        font-size: 24px


.random-items
    .box
        margin-bottom: 15px
        margin-top: 15px
        .lightgallery
            position: absolute
            width: 100%
            height: 100%
            top: 0
            left: 0
            z-index: 2
            a
                position: absolute
                width: 100%
                height: 100%
                top: 0
                left: 0


.inner-breadcrumb
    margin-bottom: 50px
    ul
        display: flex
        li
            margin-right: 5px
            a
                color: $blk
            &:last-child
                a
                    color: $r
                &::after
                    display: none
            &::after
                content: "\EA6E"
                font-family: remixicon!important
                font-style: normal
                vertical-align: middle
                display: inline-block
                padding-left: 5px


.cat-model
    .modal-content
        border: 0
        border-radius: 0 !important
    .input
        margin-bottom: 20px
        input
            display: block
            width: 100%
            min-height: 45px
            padding: 10px

.collection-part.inner
    &::before
        display: none
    .row
        &::before
            display: none !important
.collection-part
    padding: 100px 0
    @media (max-width: 576px)
        &::before
            display: none !important
        .row
            padding-top: 30px
            padding-bottom: 30px
        .pl-5
            padding-left: 0 !important
            font-size: 16px !important
        .col-sm-5
            max-width: 40%
        .col-sm-7
            max-width: 60%
    .content
        li
            margin: 10px 0
            a
                color: $blk
                text-decoration: underline
    &::before
        position: absolute
        top: 0
        width: 30%
        height: 100%
        background-color: $w
        z-index: -1
        box-shadow: 0 0 24px rgba(0, 0, 0, 0.1)
        content: ''
        left: 50%
        transform: translateX(-50%)
    .row
        &:first-child
            &::before
                display: none
        &::before
            position: absolute
            top: 50%
            width: 30%
            height: 2px
            background-color: $r
            z-index: 2
            pointer-events: none
            content: ''
            left: 50%
            transform: translateX(-60%)


@media (min-width: 1280px) and (max-width: 1440px)
    .mn-5
        margin-bottom: -200px


/* Import all css */
@import animation

@keyframes menu-animi
    0%
        height: 100%
    100%
        height: 0