*,
*::before,
*::after {
   padding: 0;
   margin: 0;
   border: 0;
   box-sizing: border-box;
}

a {
   text-decoration: none;
}

ul,
ol,
li {
   list-style: none;
}

img {
   vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: inherit;
   font-size: inherit;
}

html,
body {
   height: 100%;
   line-height: 1;
   font-size: 14px;
   color: #000;
   font-family: 'Josefin Sans';
   font-style: normal;
   font-weight: 700;
}

body._lock {
   overflow: hidden;
}

@font-face {
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   font-family: 'George Round';
   src: url('/fonts/GeorgeRounded.otf');
}

/*--------Fonts--------*/
.wrapper {
   min-height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

/*--------Wrapper--------*/
.container {
   max-width: 1200px;
   padding: 0px 15px;
   margin: 0px auto;
   box-sizing: content-box;
}

/*--------Container--------*/
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 90;
   background: rgb(255, 255, 255);
   padding-top: 36px;
   padding-bottom: 36px;
   height: 115px;
}

.header__container {}

.header__body {
   display: flex;
   justify-content: space-between;
   align-items: center;

}

.menu__icon {
   display: none;
}

.header__logo {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.header__logo a span {
   font-family: 'Cedarville Cursive';
   font-style: normal;
   font-weight: 400;
   font-size: 32px;
   line-height: 41px;
   color: #000;
   margin-left: 13px;
}

.header__nav {}

.header__link {
   display: flex;
   flex-direction: row;
   align-items: center;
}

.link-item {}

.link-header {
   font-weight: 700;
   font-size: 16px;
   line-height: 100%;
   color: #000;
}

.header__link li:nth-child(1) {
   margin-right: 82px;
}

.header__link li:nth-child(2) {
   margin-right: 77px;
}

.header__link li:nth-child(3) {
   margin-right: 86px;
}

.header__link li:nth-child(4) {
   margin-right: 44px;
}

.header-btn {
   display: flex;
   background: #2D635E;
   box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.1);
   border-radius: 7px;
   padding: 12px 25px 12px;
   color: #fff;
}

.header-btn:hover {
   background: #224642;
   transition: 500ms;
}

.link-header:hover {
   text-decoration: underline;
}



.header__social {
   display: none;
}

/*--------MainPage-------------*/
.main {
   margin-top: 120px;
   z-index: 50;
}

.main-page {}

.main__container {
   padding-bottom: 70px;
}

.main__sections {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.main__section {}

.main__text {
   font-family: 'Cedarville Cursive';
   font-style: normal;
   font-weight: 400;
   font-size: 28px;
   line-height: 189%;
   color: #444A4A;
   padding-bottom: 26px;
}

.main__title {
   font-weight: 700;
   font-size: 63px;
   line-height: 63px;
}

.main__btn {
   width: 235px;
   height: 54px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   background: #2D635E;
   border-radius: 5px;
   font-family: 'George Round';
   font-style: normal;
   font-weight: 400;
   font-size: 20px;
   line-height: 25px;
   color: #fff;
   margin-top: 26px;
}

.main__btn:hover {
   cursor: pointer;
   background: green;
   transition: 500ms;
}

.mainpage-btnarrow {
   display: none;
}

.sub__section {
   display: flex;
   justify-content: flex-end;
   align-items: flex-end;
   padding-bottom: 100px;
}

.arrow__section {
   background: #E3EBE7;
   opacity: 0.4;
   padding: 78px 67px 73px 67px;
}

.main__arrow {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 0 auto;
}

.coffee-img {
   position: relative;
   width: 410px;
   height: 466px;
   background: #E3EBE7;
   z-index: 10;
}

.coffee-img img {
   display: block;
   position: absolute;
   top: 140px;
   left: 39px;
}

.coffee-img span {
   display: block;
   position: absolute;
   top: 329px;
   left: 138px;
   font-family: 'Cedarville Cursive';
   font-style: normal;
   font-weight: 400;
   font-size: 72px;
   line-height: 137px;
   color: #444A4A;
}

.main__social {
   display: flex;
   align-items: center;
   width: 72px;
   height: 20px;
   flex-wrap: nowrap;
   transform: translateY(-25px) rotate(-90deg);
}

.social__text {
   display: flex;
   width: 100px;
   flex-wrap: nowrap;
   font-weight: 700;
   font-size: 28px;
   line-height: 100%;
   color: #444A4A;
   white-space: nowrap;
}

.main__facebook {
   transform: rotate(90deg);
   margin-left: 28px;
}

.main__instagram {
   transform: rotate(90deg);
   margin-left: 14px;
}

.main__tweetter {
   transform: rotate(90deg);
   margin-left: 14px;
}

/*--------AboutUs-------------*/
.aboutus {}

.aboutus__container {
   padding-top: 20px;
}

.aboutus__sections {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   z-index: 1;
   padding-right: 75px;
}

.aboutus__section {}

.aboutus__section:nth-child(1) {
   position: relative;
   width: 380px;
   height: 287px;
   background: #FAE9E0;
   margin-bottom: 60px;
}

.aboutus__section:nth-child(2) {
   max-width: 645px;
}

.aboutus__subtitle {
   position: absolute;
   transform: rotate(-90deg) translateX(-20px) translateY(-40px);
   font-family: 'Cedarville Cursive';
   font-style: normal;
   font-weight: 400;
   font-size: 28px;
   line-height: calc(53/28)*100%;
   color: #000000;
   opacity: 0.75;
}

.aboutus__img {
   position: absolute;
   top: 78px;
   left: 28px;
   z-index: 10;
}

.aboutus__title {
   font-weight: 700;
   font-size: 38px;
   line-height: 100%;
   padding-bottom: 19px;
}

.aboutus__text {
   font-family: 'Alegreya Sans';
   font-style: normal;
   font-weight: 400;
   font-size: 19px;
   line-height: 189%;
   letter-spacing: 0.001em;
   color: #444A4A;
}

.hiden-section {
   display: none;
}

/*--------Promotion-------------*/
.promotion {
   position: relative;
}

.promotion__container {}

.promotion__sections {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 90px;
   padding-bottom: 64px;
}

.promotion__section {}

.promotion__title {
   max-width: 311px;
   font-weight: 700;
   font-size: 38px;
   line-height: 38px;
}

.promotion__text {
   max-width: 615px;
   font-family: 'Alegreya Sans';
   font-style: normal;
   font-weight: 400;
   font-size: 19px;
   line-height: 189%;
   letter-spacing: 0.001em;
   color: #444A4A;
}

.promotion__btn {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 235px;
   height: 54px;
   background: #2D635E;
   border-radius: 5px;
   font-family: 'George Round';
   font-style: normal;
   font-weight: 400;
   font-size: 20px;
   line-height: calc(25/20)*100%;
   color: #FFFFFF;
   margin-top: 24px;
}

.promotion__btn:hover {
   background: green;
   transition: 500ms;
}

.promotion__section:nth-child(2) {
   position: relative;
   display: flex;
   flex-direction: row;
   width: 410px;
   height: 276px;
   background: #E3EBE7;
   margin-right: 75px;
}

.promotion__img {
   position: absolute;
   top: -30px;
   left: 72px;
}

.promotion__subtitle {
   transform: rotate(-90deg) translateY(450px) translateX(105px);
   font-family: 'Cedarville Cursive';
   font-style: normal;
   font-weight: 400;
   font-size: 28px;
   line-height: 53px;
   opacity: 0.75;
}

.promotion-hiden-section {
   display: none;
}

/*--------Shop-------------*/
.shop {
   background: rgba(45, 99, 94, 0.05);
}

.shop__container {
   padding: 48px 0px 44px 0px;
}

.shop__sections {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
}

.sections__slide {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.shop__section:not(:last-child) {
   margin-right: 30px;
}

.shop__section {
   width: 340px;
   background: #FFFFFF;
   box-shadow: 0px 23px 34px rgba(35, 57, 55, 0.17);
   border-radius: 25px;
   margin: 0 auto;
}

.shop__title {
   font-weight: 700;
   font-size: 28px;
   line-height: 28px;
   text-align: center;
   padding: 45px 0px 25px 0px;
}

.shop__text {
   width: 224px;
   font-family: 'Alegreya Sans';
   font-style: normal;
   font-weight: 400;
   font-size: 19px;
   line-height: 189%;
   text-align: center;
   letter-spacing: 0.001em;
   color: #444A4A;
   margin: 0 auto;
}

.shop__section .promotion__btn {
   margin: 43px 52px 47px 52px;
}

.shop__btn {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 235px;
   height: 54px;
   background: #2D635E;
   border-radius: 5px;
   font-family: 'George Round';
   font-style: normal;
   font-weight: 400;
   font-size: 20px;
   line-height: calc(25/20)*100%;
   color: #FFFFFF;
   margin-top: 24px;
   margin: 43px auto 47px;
}

.shop__btn:hover {
   background: green;
   transition: 500ms;
}

.pc-shop-btn {
   display: flex;
}

.mob-shop-btn {
   display: none;
}

/*------footer-------*/

.footer {}

.footer__container {
   display: flex;
   flex-direction: column;
   padding-top: 131px;
}

.footer__sections {
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
}

.footer__section {}

.footer__section span {
   display: flex;
   width: 102px;
   border: 2px solid #444A4A;
   margin-left: 42px;
   margin-right: 32px;
   margin-top: 35px;
   border-radius: 5px;
}

.adress__title {
   width: 166px;
   font-weight: 700;
   font-size: 32px;
   line-height: 141%;
   letter-spacing: 0.02em;
   color: #000000;
}

.adress__text {
   font-family: 'Alegreya Sans';
   font-style: normal;
   font-weight: 400;
   font-size: 19px;
   line-height: 189%;
   letter-spacing: 0.001em;
   color: #444A4A;
}

.adress__text:not(:last-child) {
   margin-bottom: 16px;
}

.footer__map {
   border-radius: 5px;
}

.footer__title {
   position: absolute;
   transform: rotate(-90deg) translateX(340px) translateY(590px);
   font-family: 'Cedarville Cursive';
   font-style: normal;
   font-weight: 400;
   font-size: 28px;
   line-height: calc(53/28)*100%;
   color: #000000;
   opacity: 0.75;
}

.footer__bottom {
   margin-top: 114px;
   font-family: 'Alegreya Sans';
   font-style: normal;
   font-weight: 400;
   font-size: 19px;
   line-height: 189%;
   text-align: center;
   letter-spacing: 0.001em;
   color: #444A4A;
}

.mobile {
   display: none;
}

.footer__btn {
   display: none;
}


/*Responsive*/
/*992px - 1200px*/
@media screen and (max-width: 1200px) {
   .container {
      max-width: 960px;
   }

   /*--------AboutUs-------------*/
   .aboutus__section:nth-child(2) {
      max-width: 445px;
   }

   /*--------Promotion-------------*/
   .promotion__subtitle {
      transform: rotate(-90deg) translateY(400px) translateX(105px);
   }

   .shop__section:last-child {
      margin-top: 30px;
   }

   .shop__arrow-left,
   .shop__arrow-right {
      display: none;
   }

   .shop__section:not(:last-child) {
      margin-right: 0px;
      margin: 0 auto;
   }
}

/*768px-992px*/
@media screen and (max-width: 992px) {
   .container {
      max-width: 720px;
   }

   .header__body {
      display: flex;
      justify-content: stretch;
      margin: 0 auto;
   }

   .header__logo {
      margin-left: 40px;
   }

   .header__nav {
      display: none;
   }

   .menu__icon {
      z-index: 55;
      display: flex;
      position: relative;
      width: 27px;
      height: 21px;
      cursor: pointer;
      top: 0px;
      left: 18px;
   }

   .menu__icon span,
   .menu__icon::before,
   .menu__icon::after {
      left: 0px;
      position: absolute;
      height: 2px;
      width: 27px;
      transition: all 0.5s ease 0s;
      background-color: #000;
   }

   .menu__icon::before,
   .menu__icon::after {
      content: "";
   }

   .menu__icon::before {
      top: 0;
   }

   .menu__icon::after {
      bottom: 0;
   }

   .menu__icon span {
      top: 50%;
      transform: scale(1) translate(0px, -50%);
   }

   .menu__icon._activete span {
      transform: scale(0) translate(0px, -50%);
   }

   .menu__icon._activete::before {
      top: 50%;
      transform: rotate(-45deg) translate(0px, -50%);
   }

   .menu__icon._activete::after {
      bottom: 50%;
      transform: rotate(45deg) translate(0px, 50%);
   }

   .menu__icon._activete {
      left: 87%;
      right: 30px;
      transition: all 0.5s ease 0s;
   }

   .header__link {
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .header__link li:nth-child(1) {
      margin-right: 0px;
   }

   .header__link li:nth-child(2) {
      margin-top: 70px;
      margin-right: 0px;
   }

   .header__link li:nth-child(3) {
      margin-top: 70px;
      margin-right: 0px;
   }

   .header__link li:nth-child(4) {
      margin-top: 70px;
      margin-right: 0px;
   }

   .header._activete {
      height: 100%;
   }

   .header-btn {
      display: none;
   }

   .header__nav {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 0;
      left: -200%;
      width: 100%;
      height: 100%;
      margin-top: 120px;
      overflow: auto;
      z-index: 70;
      padding: 20px 10px 0px 15px;
      transition: left 0.5s ease 0s;
   }

   .header__nav._activete {
      left: 0;
   }

   .link-header {
      font-size: 32px;
   }

   .header__social {
      display: flex;
      justify-content: center;
      margin-top: 91px;
   }

   .header__instagram,
   .header__facebook {
      margin-right: 27px;
   }

   /*---MainPage----*/

   .sub__section {
      display: none;
   }

   .main__sections {
      display: flex;
      justify-content: center;
      align-items: center;
   }

   .main__text {
      margin-top: 114px;
      font-size: 19px;
      text-align: center;
   }

   .main__title {
      font-size: 54px;
      line-height: 54px;
      text-align: center;
   }

   .main__btn {
      width: 189px;
      height: 53px;
      margin: 30px auto;
   }

   .mainpage-btnarrow {
      display: flex;
      margin-left: 33px;
   }

   /*--------AboutUs-------------*/

   .aboutus__sections {
      flex-direction: column;
      padding-right: 14px;
      padding-left: 14px;
   }

   .aboutus__subtitle {
      display: none;
   }

   .aboutus-wrapper {
      display: flex;
      justify-content: start;
      background: #FAE9E0;
      height: 241px;
      margin-top: 78px;
   }

   .hiden-section {
      display: block;
      padding: 0 auto;
   }

   .aboutus-hidesec {
      display: none;
   }

   .aboutus__img {
      top: -21px;
      left: 18px;
   }

   .aboutus__img img {
      width: 339px;
      height: 245px;
   }

   .aboutus__section:nth-child(1) {
      position: relative;
      width: 0;
      height: 0;
      background: none;
      margin-bottom: 0;
   }

   .aboutus__title {
      width: 342px;
      font-weight: 400;
      font-size: 38px;
      line-height: 38px;
      padding-top: 30px;
      padding-bottom: 30px;
   }

   /*--------Promotion-------------*/
   .promotion__img {
      left: 10px;
   }

   .promotion__subtitle {
      display: none;
   }

   /*shop*/
   .shop__section:not(:last-child) {
      margin-right: 0px;
      margin: 0 auto;
   }

   /*footer*/
   .footer__section span {
      display: none;
   }

   .footer__title {
      display: none;
   }

   .footer__map img {
      width: 337px;
   }

   .footer__map {
      margin-right: 50px;
   }
}

/*-------------*/
@media screen and (max-width: 799px) {
   .shop__section:last-child {
      margin-top: 0px;
   }

   .shop__section:not(:last-child) {
      margin-bottom: 30px;
   }
}

/*576px-768px*/
@media screen and (max-width: 768px) {
   .container {
      max-width: 560px;
   }

   /*--------Promotion-------------*/

   .promotion__section:nth-child(2) {
      display: none;
   }

   .promotion-hiden-section {
      display: block;
   }

   .promotion-wrapper {
      background: #E3EBE7;
      height: 287px;
      margin-top: 80px;
   }

   .promotion__img {
      top: -16px;
      left: 57px;
   }

   .promotion__btn {
      margin: 0 auto;
   }

   /*footer*/
   .footer__map {
      margin-right: 0px;
   }

   .footer__container {
      display: flex;
      flex-direction: column;
      padding-top: 131px;
   }

   .footer__sections {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
   }

   .adress__title {
      margin-top: 30px;
      width: 100%;
      text-align: center;
   }

   .pc__map {
      display: none;
   }

   .mobile {
      display: flex;
   }

   .footer__btn {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #FFFFFF;
      mix-blend-mode: normal;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.17);
      border-radius: 5px;
      font-weight: 700;
      font-size: 16px;
      line-height: 16px;
      color: #444A4A;
      width: 189px;
      height: 53px;
      margin: 10px auto 0px;
   }

   .footer__btn img {
      display: flex;
      margin-left: 6px;
   }

   .adress__text:not(:last-child) {
      margin-bottom: 10px;
   }

   .adress__text {
      text-align: center;
   }

   .modify {
      display: none;
   }
}

/*0-576px*/
@media screen and (max-width: 576px) {
   .container {
      max-width: 100%;
   }

   .aboutus__text {
      margin-bottom: 16px;
   }

   .promotion__sections {
      padding-top: 39px;
      padding-bottom: 64px;
   }

   .promotion__title {
      margin-bottom: 30px;
   }

   .promotion__text {
      margin-bottom: 32px;
   }

   .promotion__btn {
      display: none;
   }

   .shop {
      background: #fff;
   }

   .shop__title {
      padding: 45px 0px 32px;
   }

   .shop__btn {
      width: 209px;
      height: 54px;
      margin: 43px auto 47px;
   }

   .footer__container {
      padding-top: 48px;
   }

   .pc-shop-btn {
      display: none;
   }

   .mob-shop-btn {
      display: flex;
   }

   .section__wrapper {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      height: 150px;
      overflow: hidden;
      transition: all 0.5s ease 0s;
   }

   .footer__arrow{
      transition: all 0.5s ease 0s;
   }
   
   .rotate {
      transform: rotate(-90deg);
      transition: all 0.5s ease 0s;
   }
}