/*!
Theme Name: coffeeroasters
Author: olena ost
Description: Description
*/
@import url("./about-style.css");
@import url("./create-style.css");
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p {
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
/* -----Global------ */
.global{
  width: 100%;
  max-width: 1280px;
}
.center{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body{
  width: 100vw;
  height: auto;
  background-color:rgba(254, 252, 247, 1);
  font-family: 'Barlow', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.collection-main_bg,
.choose-main,
.works-main{
  margin-bottom: 200px;
}

header, 
.header-menu ul,
.footer-menu ul,
.footer-box_social ul,
.footer-conteiner,
.footer-box,
.footer-box_social{
  display: flex;
  flex-direction: row;
  align-items: center;
}
p{
text-align: center;
font-size: 16px;
font-weight: 400;
line-height: 26px; /* 162.5% */
}
h1, h3, h4, h5,.works-number,
.order-create_check__text,
.order-create_check__text--popup,
.total{
  font-family: "Fraunces";
  font-weight: 900;
}
h1{
  font-size: 72px;
  color: #FEFCF7;
  line-height: 72px;
  margin-bottom: 32px;
}
h3{
  text-align: center;
  font-size: 24px;
  line-height: 32px; /* 133.333% */
  }
h4{
text-align: center;
font-size: 40px;
line-height: 48px; /* 120% */
}
h5, .total{
font-size: 32px;
line-height: 36px; /* 112.5% */
}

.choose-main_bg,
.quality-about_bg,
.steps-create{
  background-color: #2C343E;
}

.works-number{
  color: #FDD6BA;
  font-size: 72px;
  line-height: 72px; /* 100% */
  margin-bottom: 38px;

}

/* -----HEADER------ */
header{
  width: 100%;
  justify-content: space-between;
  padding: 43.55px 0 43.55px 0;
}
.header-menu ul,
.footer-menu ul,
.footer-box_social ul,
.order-create_list{
  list-style-type: none;
  padding: 0;
}
.header-menu ul,
.footer-menu ul{
  gap:33px;
}

.header-menu ul li a,
.footer-menu ul li a{
  font-size: 12px;
  font-weight: 700;
  line-height: 15px; /* 125% */
  letter-spacing: 0.923px;
  text-transform: uppercase;
  text-decoration: none;
}
.header-menu ul li a{
  color:rgba(131, 136, 143, 1);
}
.header-menu ul li a:hover{
  color:rgba(51, 61, 75, 1);
}

/* -----FOOTER------ */
.footer-conteiner{
  width: 100%;
  min-height: 120px;
  justify-content: space-between;
  background-color: rgba(44, 52, 62, 1);
  padding: 0 85px 0 85px;
}

.footer-menu ul li a{
  color:rgba(131, 136, 143, 1);
}
.footer-menu ul li a:hover{
  color:rgba(254, 252, 247, 1);
}
.footer-box{
  gap:103px;
 
}
/* ----------- */
.footer-box_social{
gap:24px;
}
.facebook_icon_white,
.twitter_icon_white,
.instagram_icon_white{
  display: inline-block;
  width: 24px;
  height: 24px;
}

.facebook_icon_white{
  background: url(./assets/images/logo/logo_facebook_white.png);
  background-repeat: no-repeat;
}
.facebook_icon_white:hover{
  background: url(./assets/images/logo/logo_facebook_pink.png);
}
.twitter_icon_white{
  background: url(./assets/images/logo/logo_twitter_white.png);
  background-repeat: no-repeat;
}
.twitter_icon_white:hover{
  background: url(./assets/images/logo/logo_twitter_pink.png);
  background-repeat: no-repeat;
}
.instagram_icon_white{
  background: url(./assets/images/logo/logo_insta_white.png);
  background-repeat: no-repeat;
}
.instagram_icon_white:hover{
  background: url(./assets/images/logo/logo_insta_pink.png);
  background-repeat: no-repeat;
}
/* --------------------------ABOUT-------------------------- */
.about-main_bg{
  height: 600px;
  background-position-y: -529px;
  border-radius: 10px;
  padding: 117px 85px;
  margin-bottom: 136px;
}

/* ------FONTS----- */

.about-main_content{
  text-align: left;
  max-width: 493px;
  color: #FEFCF7;
  mix-blend-mode: normal;
  opacity: 0.8;
  margin-bottom: 56px;
}

.button{
  display: inline-block;
  border-radius: 6px;
    background: #0E8784;
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 900;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    color: #FEFCF7;
    padding: 16px 32px;
    border: none;
    text-decoration: none;
}
/* --------------------------COLLECTION-------------------------- */
.collection-main_bg{
  min-height: 600px;
  display: flex;
  flex-direction: row;
  gap:30px;
  background-repeat: no-repeat;
  background-position: top;

}
.collection-box_coffee,
.collection-box_coffee__text{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 255px;
}


.collection-box_coffee{
  position: relative;
  top: 80px;
}
.collection-box_coffee{
  gap: 71.55px;
}
.collection-box_coffee__text{
 gap:24px;
}
/* ------FONTS----- */
.collection-box_coffee__text>h3{
color: #333D4B;
}

.collection-box_coffee__text>p{
color: #333D4B;
text-align: center;
line-height: 26px; /* 162.5% */
}
/* --------------------------CHOOSE-------------------------- */
.choose-main{
  height: 728px;
}
.choose-main_bg{
  justify-content: flex-start;
  height: 525px;
  border-radius: 10px;
  color:rgba(254, 252, 247, 1);

}
.choose-box_text{
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap:32px;
  margin-top: 100px;
  margin-bottom: 86px;
}

.choose-box_text>h4{
  color: #FEFCF7;
}

.choose-box_greenboxes{
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* position: relative; */
  gap:30px;
  }
.choose-conteiner_greenbox{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 350px;
  max-height: 382px;
  background-color: #0E8784;
  border-radius: 8px;
  padding:47px;
  }
  .choose-conteiner_greenbox__text{
  display: flex;
  flex-direction: column;
  gap:24px;
  }
  .choose-conteiner_greenbox>img{
    margin-top: 25px;
    margin-bottom: 56px;
  }
  .choose-conteiner_greenbox>h3{
    margin-bottom: 24px;
  }
  /* --------------------------HOW IT WORKS-------------------------- */
  .works-main{
    padding-left: 85px;
    min-height: 565px;
  }
  .works-main_header>h3{
    text-align: left;
    color: #83888F;
    margin-bottom: 80px;
  }
 
  /* ------------------------------ */
  .decoration_navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
  .decoration_navigation__item {
    display: flex;
    align-items: center;
    margin-bottom: 67px;
    width: 380px;
  }
  .decoration_navigation__item-circle {
    width: 31px;
    height: 31px;
    border: 2px solid #0E8784;
    border-radius: 100%;
  }
  .decoration_navigation__item-line {
    width: 350px;
    border-top: 2px solid #FDD6BA;
  }
    /* ------------------------------ */
  .works-main_steps{
      display: flex;
      flex-direction: row;
      gap:95px;

  }
  .works-main_step{
    width: 285px;
    display: flex;
    flex-direction: column;
  }
  .works-main_step>h5{
    margin-bottom: 42px;
  }

  .works-main_step>p{
    text-align: left;
    color: #333D4B;
  }
  .works-main_btn{
    margin-top: 64px;
    height: 56px;
  }
      /* ------------------------------ BURGER_MENU------------------------------ */
  .burger-menu{
    display: none;
    background-image: url(./assets/images/icons/burger_open.png);
    width: 15px;
    height: 16px;
    }