@font-face {
    font-family: "Woody";
    src: url(../fonts/woody.woff2) format("woff2"),url(../fonts/woody.woff) format("woff"),url(../fonts/woody.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: Woody;
    font-weight: inherit
}

:root {
    --light-green: #459d47;
    --dark-green: #2a602c;
    --light-red: #cd272e;
    --white: #fff;
    --s100: 100px;
    --s80: 80px;
    --s75: 75px;
    --s50: 50px;
    --s35: 35px;
    --s25: 25px;
    --s15: 15px
}

.link {
    text-decoration: none;
    color: inherit;
    color: var(--white);
    -webkit-transition: color,.5s;
    -o-transition: color,.5s;
    transition: color,.5s;
    font-size: 25px
}

.link:hover {
    color: var(--dark-green)
}

.section {
    width: 100%;
    overflow: hidden
}

.container {
    width: 89%;
    margin: 0 auto;
    padding: 10% 0
}

h1 {
    font-size: 80px;
    font-weight: 600
}

h2 {
    font-size: 40px
}

h3 {
    font-size: 30px
}

h4 {
    font-size: 25px
}

p {
    margin-top: 20px;
    font-size: 25px
}

li {
    font-size: 25px
}

.fixed {
    overflow: hidden
}

.button {
    background: var(--light-green);
    padding: calc(var(--s24) / 1.2);
    font-size: 20px;
    text-decoration: none;
    border-radius: 5px;
    color: #fff;
    text-shadow: none;
    -webkit-transition: background .5s;
    -o-transition: background .5s;
    transition: background .5s;
    border: 3px solid var(--light-green)
}

.button:active {
    background: var(--dark-green);
    border-color: var(--dark-green)
}

.button:hover {
    background: var(--dark-green);
    border-color: var(--dark-green)
}

header {
    position: fixed;
    z-index: 10;
    background: var(--light-green);
    min-height: 80px;
    font-size: 18px;
    width: 100%;
    padding: 25px 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.toggler {
    display: none
}

.toggler img {
    width: 50px;
    height: 27px
}

.logo {
    height: 70px;
    width: 120px;
    -webkit-transition: 0.4s,-webkit-transform;
    transition: 0.4s,-webkit-transform;
    -o-transition: transform,.4s;
    transition: transform,.4s;
    transition: transform,0.4s,-webkit-transform
}

.logo:hover {
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8)
}

.main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    list-style-type: none;
    background: var(--light-green)
}

.main li {
    margin-left: 10px
}

@-webkit-keyframes zoominout {
    0%,100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }
}

@keyframes zoominout {
    0%,100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale3d(1.05,1.05,1.05);
        transform: scale3d(1.05,1.05,1.05)
    }
}

.cover__section {
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden
}

.cover__back {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background: url(../images/background_big.jpg);
    background-size: cover
}

.cover__container {
    height: calc(100vh - 80px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-top: 80px
}

.cover__container p {
    margin: 20px 0;
    width: 390px
}

.about__section {
    background: var(--white)
}

.about__container {
    text-align: center
}

.make__section {
    background: url(../images/wood_big.webp);
    background-attachment: fixed;
    background-size: cover
}

.make__container {
    color: #fff
}

.make__container p {
    width: 50%;
    text-align: justify
}

.woody__img {
    width: 125px;
    height: 137px;
    margin-bottom: 50px
}

.make__cards {
    display: -ms-grid;
    display: grid;
    gap: 25px;
    -ms-grid-columns: minmax(288px,1fr) 25px minmax(288px,1fr) 25px minmax(288px,1fr);
    grid-template-columns: repeat(3,minmax(288px,1fr));
    margin-top: var(--s100)
}

.make__card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(0,0,0,0.452);
    padding: var(--s50) var(--s75)
}

.make__card img {
    width: 150px;
    height: 150px
}

.make__card h3 {
    text-align: center;
    width: 100%
}

.info__section {
    background: var(--light-green);
    color: #fff;
    text-align: center
}

.info__cards {
   
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
   
}

.info__card {
    width: 21%;
    background: #fff;
    color: var(--light-green);
    padding: var(--s25);
    margin-top: 50px;
    border-radius: 5px;
    text-align: start
}

.info__card p {
    color: #000
}

.card{

}

.sp__section {
    color: var(--light-green)
}

.sp__container {
    padding-bottom: 100px
}

.sp__lines {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.sp__line {
    margin-bottom: var(--s25);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: var(--s25) 0
}

.sp__line:not(:last-of-type) {
    border-bottom: 1px solid #000
}

.sp__line p {
    color: #000
}

.sp__container button {
    float: right;
}

.white__button {
    color: var(--light-green);
    background: #fff;
    margin-right: var(--s15)
}

footer {
    background: url(../images/wood.webp);
    background-size: cover;
    padding: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden
}

footer .container {
    width: 50%;
    margin: 0;
    padding: 5%
}

.value__container {
    background: #fff
}

.value__container ul {
    list-style-type: decimal;
    margin-left: 1em
}

.contacts__container {
    color: #fff
}

.contacts__container h3 {
    margin-top: var(--s25)
}

.contacts__container a {
    color: #fff;
    text-decoration: none
}

@media (max-width: 1440px) {
    .link {
        font-size:20px
    }

    h3,.cover__container p {
        font-size: 25px
    }

    p {
        font-size: 20px
    }

    li {
        font-size: 20px
    }

    header {
        -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
        justify-content: space-evenly
    }
}

@media (max-width: 1024px) {
    :root {
        --s100:90px;
        --s80: 70px;
        --s75: 65px;
        --s50: 40px;
        --s35: 25px;
        --s25: 15px;
        --s15: 5px
    }

    h1 {
        font-size: 75px
    }

    h2 {
        font-size: 35px
    }

    h3,.cover__container p {
        font-size: 25px
    }

    h4 {
        font-size: 20px
    }

    p {
        font-size: 15px
    }

    li {
        font-size: 15px
    }

    .toggler {
        display: block
    }

    .main {
        top: 0;
        left: -100%;
        -webkit-transition: .4s;
        -o-transition: .4s;
        transition: .4s;
        height: 100vh;
        width: 50%;
        padding: 24px 5%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        position: absolute;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        font-size: 30px
    }

    .main li {
        margin: 0
    }

    .t__on {
        margin-bottom: var(--s25)
    }

    header {
        padding: 0 5%;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

    header a,.logo {
        margin-bottom: 0
    }

    .make__container p {
        width: 100%;
        text-align: justify
    }

    .make__cards {
        grid-template-columns: repeat(auto-fill,minmax(288px,1fr))
    }

    .make__card {
        padding: 25px 50px;
        text-align: center
    }

    .make__card img {
        margin-bottom: 10px
    }

    .make__card h3 {
        width: 144px
    }
}

@media (max-width: 770px) {
    .link {
        font-size:30px
    }

    h1 {
        font-size: 60px
    }

    h2 {
        font-size: 30px
    }

    h3 {
        font-size: 20px
    }

    p {
        margin-top: 15px
    }

    .info__card {
        width: 44%
    }

    footer {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    footer .container {
        width: 100%
    }
}

@media (max-width: 576px) {
    .make__card:not(:last-child) {
        margin-bottom:25px
    }

    .make__card img {
        width: 100px;
        height: 100px
    }

    .sp__line {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media (max-width: 425px) {
    .main {
        width:100%
    }

    .main li {
        margin: 0
    }

    h1 {
        font-size: 45px
    }

    .cover__container p {
        font-size: 20px
    }

    li {
        font-size: 15px
    }

    .make__container p {
        width: 100%
    }

    .make__card {
        min-width: 99%
    }
    .card{
        width: 100%;
        height: 20%;
    }
    .proizvodim{
        
    }
    
  
}

.main__active {
    left: 0
}