@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800;900&display=swap')

body,
html
    font-family: 'Inter', sans-serif
    overflow: unset


h1,
h2,
h3,
h4,
h5,
h6
    font-family: 'Manrope', sans-serif

$cl-1: #6BBD78
$cl-2: #2E4347
$cl-3: #E3EFC4
$cl-4: #161817
$cl-5: #186F65

$cl-white: #ffffff
$cl-black: #183229
$cl-g2: #f3f3f3
$cl-g3: #fafafa
$cl-grey: #CBCBCB
$cl-red: #fc0390
$cl-trans: rgba(0,0,0,0)
@mixin tra
    transition: all .3s ease-in-out
h1
    font-weight: 800
    font-size: 2rem
    @media (min-width: 992px)
        font-size: 3rem
    color: $cl-2
    margin-bottom: 2rem
    @include tra
h2
    font-weight: 800
    font-size: 1.2rem
    @media (min-width: 992px)
        font-size: 2rem
    color: $cl-5
    margin-bottom: 0.4rem
    @include tra
p
    font-size: 0.9rem    
.t-w
    color: $cl-white !important

a 
    color: $cl-5
a:hover
    color: $cl-black
    text-decoration: none

.full
    height: 100vh

.pdr-1
    padding: 1rem

.pdr-c
    padding: 2rem
.pdr-tb
    margin-top: 2rem
    margin-bottom: 2rem
.pdr-t
    margin-top: 2rem
    margin-bottom: 1.4rem

.pdr-icon
    padding-right: 2rem

@media (min-width: 992px)
    .pdr-c
        padding: 4rem 0

.smn-btn-1
    padding: 0.4rem
    background: $cl-2
    text-transform: uppercase
    color: $cl-white
    font-size: 0.8rem
    font-weight: 800
    transition: all 0.1s ease-in-out
    &:hover
        color: $cl-white
        background: $cl-1
.smn-btn-kat
    padding: 0.8rem 
    background: $cl-1
    text-transform: uppercase
    color: $cl-2
    font-size: 0.8rem
    font-weight: 800
    transition: all 0.1s ease-in-out
    .icons
        stroke: $cl-2
    &:hover
        color: $cl-1
        background: $cl-2
        .icons
            stroke: $cl-1

.btn-b
    letter-spacing: 1px
    padding: 0.8rem
    background: $cl-black
    text-transform: uppercase
    color: $cl-white
    font-size: 1rem
    font-weight: 900
    transition: all 0.1s ease-in-out

.btn-b:hover
    color: $cl-white
    background: $cl-1

.sticky
    position: sticky
    top: 3rem
    margin-top: 4rem
    z-index: 500
    background: rgba(107,189,120,0.9)
    backdrop-filter: blur(10px) saturate(125%)
    border-bottom: 1px solid rgba(0,0,0,0)

.sticky2
    position: sticky
    top: 3rem
    margin-top: 0
    z-index: 500
    background: rgba(107,189,120,0.9)
    backdrop-filter: blur(10px) saturate(125%)
    border-bottom: 1px solid rgba(0,0,0,0)

@import 'navbar' 
@import 'shop' 
@import 'builder' 
@import 'slider' 
@import 'footer'