@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ОБЩИЕ стили меню */
img.main-company-menu-img {
   width: 100%;
   height: 100%;
}


.menu-wrap {
   display: flex;
   gap: 2.5rem;
}

.nav-menu-container {
   width: 23.13%;
   height: 100%;
}
.content-container {
   width: 100%;
}

.nav-menu-container nav {
   display: flex;
   flex-direction: column;
   gap: 1.875rem;
}

.nav-menu-container nav a {
   font-size: 1.5rem;
   color: #132;
   width: 100%;
   border-bottom: 1px solid #11332266;
   padding-bottom: 7px;
}
.nav-menu-container .nav-item.active{
   font-size: 1.875rem;
   font-weight: 700;
}
.nav-menu-container .nav-item .separator.active{
   width: 3px;
   background-color: #113322;
}
.nav-menu-container .nav-item{
   display: flex;
   align-items: center;
   gap: 1.625rem;
}

.nav-menu-container .nav-item .separator{
   width: 1px;
   background-color: #11332266;
   min-height: 1.875rem;
}

@media (max-width: 768px) {
   img.main-company-menu-img {
      width: 100%;
      height: 180px;
   }
   .menu-wrap {
      display: flex;
      flex-direction: column;
      gap: 0;
   }
   .nav-menu-container {
      width: 100%;
      height: 100%;
      margin: 32px 0;
      overflow: auto;
   }
   .nav-menu-container nav {
      display: flex;
      flex-direction: row;
      gap: 8px;
   }
   .nav-menu-container .nav-item {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
   }
   .nav-menu-container nav a {
      font-size: 14px;
      padding-bottom: 8px;
   }
}







/* Стили для блока О КОМПАНИИ */
.o-kompanii-wrap {
   padding: 0 0 6.25rem 0;
}
.o-kompanii-wrap .title {
   font-size: 3.75rem;
   font-weight: 800;
}

.o-kompanii-wrap .subtitle {
   font-size: 2.188rem;
   margin: 1.875rem 0 0 0;
   font-weight: 600;
}

.o-kompanii-wrap img {
   width: 100%;
   height: 100%;
   margin: 2.5rem 0 0 0;
}
.o-kompanii-wrap .info-block {
   margin: 2.5rem 0 0 0;
}
.o-kompanii-wrap .title2 {
   font-size: 2.813rem;
   font-weight: 700;
}
.o-kompanii-wrap ul {
   margin: 1.875rem 0 0 0;
   font-size: 1.5rem;
   padding-left: 30px;
}

.o-kompanii-wrap .text {
   font-size: 1.5rem;
   margin: 2.5rem 0 0 0;
}


@media (max-width:768px) {
   .o-kompanii-wrap {
      padding: 0 0 32px 0;
   }
   .o-kompanii-wrap .title {
      font-size: 32px;
      text-transform: uppercase;
      font-weight: 800;
   }
   .o-kompanii-wrap .subtitle {
      font-size: 22px;
      margin: 16px 0 0 0;
   }
   .o-kompanii-wrap img {
      width: 100%;
      height: 234PX;
      margin: 16px 0 0 0;
      object-fit: cover;
      border-radius: 18px;
   }      
   .o-kompanii-wrap .info-block {
      margin: 16px 0 0 0;
   }
   .o-kompanii-wrap .title2 {
      font-size: 20px;
      font-weight: 700;
   }
   .o-kompanii-wrap ul {
      margin: 8px 0 0 0;
      font-size: 16px;
      padding-left: 20px;
   }
   .o-kompanii-wrap .text {
      font-size: 18px;
      margin: 16px 0 0 0;
   }
}





/* Стили для блока СЕРТИФИКАТЫ */
.certificates-wrap {
   padding: 0 0 6.25rem 0;
}
.certificates-wrap .title {
   font-size: 3.75rem;
   font-weight: 800;
}

.certificates-wrap .subtitle {
   font-size: 2.188rem;
   margin: 1.875rem 0 0 0;
   font-weight: 600;
}
.certificates-wrap .info-block {
   margin: 2.5rem 0 0 0;
}
.certificates-wrap ul {
   margin: 1.875rem 0 0 0;
   font-size: 1.5rem;
   padding-left: 30px;
}

.certificates-wrap .text {
   font-size: 1.5rem;
   margin: 2.5rem 0 0 0;
}

.certificates-wrap .certificates-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: start;
   margin: 1.875rem 0 0 0;
   gap: 2.5rem;
}
.certificates-wrap .certificates-container img {
   width: 30%;
}


@media (max-width:768px) {
   /* Стили для блока СЕРТИФИКАТЫ */
   .certificates-wrap {
      padding: 0 0 32px 0;
   }
   .certificates-wrap .title {
      font-size: 32px;
      text-transform: uppercase;
      font-weight: 800;
   }
   .certificates-wrap .subtitle {
      font-size: 22px;
      margin: 16px 0 0 0;
   } 
   .certificates-wrap .info-block {
      margin: 16px 0 0 0;
   }
   .certificates-wrap .title2 {
      font-size: 20px;
      font-weight: 700;
   }
   .certificates-wrap ul {
      margin: 8px 0 0 0;
      font-size: 16px;
      padding-left: 20px;
   }
   .certificates-wrap .text {
      font-size: 18px;
      margin: 16px 0 0 0;
   }
   .certificates-wrap .certificates-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;
      margin: 16px 0 0 0;
      gap: 8px;
   }
   .certificates-wrap .certificates-container img {
      width: 48%;
   }
}





/* Стили для блока ВАКАНСИИ */
.resume-wrap {
   padding: 0 0 6.25rem 0;
}
.resume-wrap .title {
   font-size: 3.75rem;
   font-weight: 800;
}

.resume-wrap .subtitle {
   font-size: 2.188rem;
   font-weight: 600;
   margin: 1.875rem 0 0 0;
}
.resume-wrap .info-block {
   margin: 2.5rem 0 0 0;
}
.resume-wrap .text {
   font-size: 1.5rem;
   margin: 2.5rem 0 0 0;
}
.resume-wrap .text2 {
   font-size: 1.5rem;
   margin: 1.25rem 0 0 0;
}

.resume-wrap .job-container {
   margin: 3.125rem 0 0 0;
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}
.resume-wrap .job-block {
   border: 3px solid rgb(232, 232, 232);
   border-radius: 18px;
   box-shadow: 4px 4px 30px 0px rgba(255, 255, 255, 0.15);
   background: rgb(255, 255, 255);
   overflow: hidden;
   transition: all 0.3s ease;
}
.resume-wrap .job-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 34px 30px;
   font-size: 1.875rem;
   font-weight: 700;
}

.resume-wrap .job-content {
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.5s ease;
   padding: 0 15px;
}

.resume-wrap .job-content .list-title {
   font-size: 1.25rem;
   font-weight: 600;
}
.resume-wrap .job-content ul {
   margin: 0.938rem 0 0 0;
   font-size: 1.125rem;
   padding-left: 30px;
}
.resume-wrap .list-block {
   width: 37%;
}
.resume-wrap .arrow {
   transition: all 0.3s ease;
}
.resume-wrap .arrow img {
   transition: all 0.3s ease;
   width: 77px;
   height: 77px;
}
.resume-wrap .job-block.active .job-content {
   display: flex;
   flex-wrap: wrap;
   column-gap: 7.375rem;
   row-gap: 1.5rem;
   max-height: 500px;
   padding: 0 30px 15px 30px;
}
.resume-wrap .job-block.active {
   border: 3px solid rgb(0, 0, 0);
}
.resume-wrap .job-block.active .arrow {
   transform: rotate(90deg);
   filter: invert(40%) sepia(98%) saturate(340%) hue-rotate(90deg) brightness(105%);
}



@media (max-width:768px) {
   /* Стили для блока ВАКАНСИИ */
   .resume-wrap {
      padding: 0 0 32px 0;
   }
   .resume-wrap .title {
      font-size: 32px;
      font-weight: 800;
   }
   .resume-wrap .subtitle {
      font-size: 22px;
      margin: 16px 0 0 0;
   } 
   .resume-wrap .text {
      font-size: 18px;
      margin: 16px 0 0 0;
   }
   .resume-wrap .text2 {
      font-size: 18px;
      margin: 16px 0 0 0;
   }
   .resume-wrap .job-container {
      margin: 32px 0 0 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
   }
   .resume-wrap .job-header {
      padding: 16px;
      font-size: 18px;
   }
   .resume-wrap .arrow img {
      transition: all 0.3s ease;
      width: 47px;
      height: 47px;
   }
   .resume-wrap .list-block {
      width: 100%;
   }
   .resume-wrap .job-block.active .job-header {
      padding: 16px 16px 0px 16px;
   }
   .resume-wrap .job-block.active .job-content {
      row-gap: 8px;
      padding: 8px 16px 16px 16px;
   }
   .resume-wrap .job-content ul {
      margin: 8px 0 0 0;
      font-size: 14px;
      padding-left: 20px;
   }
   .resume-wrap .job-content .list-title {
      font-size: 16px;
   }
}



/* Стили для блока ДОСТАВКА */
.delivery-wrap {
   padding: 0 0 6.25rem 0;
}
.delivery-wrap .title {
   font-size: 3.75rem;
   font-weight: 800;
}

.delivery-wrap .info-block {
   margin: 2.5rem 0 0 0;
}
.delivery-wrap .title2 {
   font-size: 2.813rem;
   font-weight: 700;
}
.delivery-wrap ul {
   margin: 1.875rem 0 0 0;
   font-size: 1.5rem;
   padding-left: 30px;
}
.delivery-wrap .green-numbers ul {
   display: flex;
   flex-direction: column;
   margin: 1.875rem 0 0 0;
   font-size: 1.5rem;
   padding-left: 0px;
   list-style: none;
   gap: 1.25rem;
}
.delivery-wrap .green-numbers ul li {
   display: flex;
   align-items: center;
   gap: 2.5rem;
}
.delivery-wrap .green-numbers ul li .number {
   font-size: 2.813rem;
   font-family: 'Roboto';
   color: #57D660;
   font-weight: 700;
}

.delivery-wrap .text {
   font-size: 1.5rem;
   margin: 2.5rem 0 0 0;
}


@media (max-width:768px) {

   /* Стили для блока ДОСТАВКА */
   .delivery-wrap {
      padding: 0 0 32px 0;
   }
   .delivery-wrap .title {
      font-size: 32px;
      font-weight: 800;
   }  
   .delivery-wrap .info-block {
      margin: 16px 0 0 0;
   }
   .delivery-wrap .title2 {
      font-size: 20px;
      font-weight: 700;
   }
   .delivery-wrap ul {
      margin: 8px 0 0 0;
      font-size: 16px;
      padding-left: 20px;
   }
   .delivery-wrap .text {
      font-size: 18px;
      margin: 16px 0 0 0;
   }

   .delivery-wrap .green-numbers ul li .number {
      font-size: 32px;
   }
   .delivery-wrap .green-numbers ul li {
      gap: 8px;
      align-items: start;
   }
   .delivery-wrap .green-numbers ul {
      display: flex;
      flex-direction: column;
      margin: 8px 0 0 0;
      font-size: 16px;
      padding-left: 0px;
      list-style: none;
      gap: 12px;
   }
}  





/* Стили для блока ОТЗЫВЫ */

.reviews-wrap {
   padding: 0 0 6.25rem 0;
}
.reviews-wrap .title {
   font-size: 3.75rem;
   font-weight: 800;
}
.reviews-wrap .title3 {
   font-size: 2.813rem;
   font-weight: 700;
   margin: 1.25rem 0 0 0;
}

.reviews-wrap .subtitle {
   font-size: 2.188rem;
   margin: 1.875rem 0 0 0;
}
.reviews-wrap .text {
   font-size: 1.5rem;
   margin: 2.5rem 0 0 0;
}

.reviews-container {
   display: flex;
   flex-wrap: wrap;
   gap: 2.5rem;
   margin: 3.125rem 0 0 0;
}

.reviews-wrap .review-card {
   position: relative;
   background: #E8E8E8;
   padding: 20px;
   border-radius: 18px;
   text-align: left;
   font-size: 1.25rem;
   max-width: 507px;
   width: 40%;
}

.reviews-wrap .review-author {
   display: flex;
   align-items: center;
   margin-top: 4.25rem;
}

.reviews-wrap .review-author img {
  width: 28%;
  height: 20%;
  border-radius: 50%;
  margin-right: 20px;
}

.reviews-wrap .author-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reviews-wrap .author-info .name {
  font-size: 1.375rem;
  font-weight: 700;
}
.reviews-wrap .author-info .date {
  font-size: 1.25rem;
  font-weight: 600;
}
.reviews-wrap .author-info .city {
  font-size: 1.125rem;
}
.reviews-wrap img.icon {
   position: absolute;
   bottom: 40px;
   right: 9%;
   margin: 0;
   width: 46px;
   height: 40px;
}

.reviews-wrap .review-button {
   background: #57D660;
   color: #132;
   padding: 19px 93px;
   font-family: "Raleway";
   border: none;
   border-radius: 30px;
   font-size: 1.5rem;
   font-weight: 600;
   margin-top: 2.5rem;
}
.reviews-wrap .review-button:hover {
   background-color: #1D6A44;
   color: white;
   border: none;
}
.reviews-wrap .review-page {
   margin: 3.125rem 0 0 0;
   display: none;
   gap: 2.5rem;
}

.reviews-wrap .review-page.active {
   display: flex;
   flex-wrap: wrap;
}


@media (max-width:768px) {
   .reviews-wrap {
      padding: 0 0 32px 0;
   }
   .reviews-wrap .title {
      font-size: 32px;
      text-transform: uppercase;
      font-weight: 800;
   }
   .reviews-wrap .subtitle {
      font-size: 22px;
      margin: 16px 0 0 0;
   }
   .reviews-wrap .text {
      font-size: 18px;
      margin: 8px 0 0 0;
   }
   .reviews-container {
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin: 16px 0 0 0;
   }   
   .reviews-wrap .review-card {
      padding: 32px;
      font-size: 14px;
      width: auto;
   }
   .reviews-wrap .author-info .name {
      font-size: 14px;
      font-weight: 500;
   }
   .reviews-wrap .author-info .date {
      font-size: 16px;
   }
   .reviews-wrap .author-info .city {
      font-size: 14px;
   }
   .reviews-wrap .pagination {
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 20px 0 0 0;
   }
   .reviews-wrap .title3 {
      font-size: 20px;
      font-weight: 700;
      margin: 20px 0 0 0;
   }
   .reviews-wrap .review-button {
      padding: 19px 56px;
      font-size: 20px;
      margin-top: 24px;
   }
}



/* Стили для блока НОВОСТИ */
.news-wrap {
   padding: 0 0 6.25rem 0;
}
.news-wrap .title {
   font-size: 3.75rem;
   font-weight: 800;
}
.news-container {
   width: 80%;
}
.news-wrap .news-container-wrapper {
   margin: 2.5rem 0 0 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 2.5rem;
}
.news-wrap a.news-item {
   width: 40%;
}
.news-wrap .news-container img {
   width: 100%;
   height: 100%;
   border-radius: 18px;
   object-fit: cover;
}
.news-wrap .news-container a.news-item {
   position: relative;
   width: 47%;
   height: 25.375rem;
}
.news-wrap .news-container p.description {
   position: absolute;
   bottom: 1.75rem;
   left: 1.75rem;
   color: #fff;
   font-size: 1.5rem;
   font-weight: 600;
   width: 70%;
}

@media (max-width:768px) {
   .news-wrap {
      padding: 0 0 32px 0;
   }
   .news-wrap .title {
      font-size: 32px;
      text-transform: uppercase;
      font-weight: 800;
   }
   .news-wrap .news-container {
      margin: 16px 0 0 0;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      width: 100%;
   }
   .news-wrap .news-container-wrapper {
      margin: 0px 0 0 0;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
   }
   .news-wrap .news-container a.news-item {
      position: relative;
      width: 47%;
      height: 17.875rem;
   }
   .news-wrap .news-container p.description {
      bottom: 8px;
      left: 0;
      font-size: 14px;
      text-align: center;
      width: auto;
      padding: 0 10px;
   }
   .news-wrap .news-container img {
      width: 100%;
      height: 100%;
      border-radius: 18px;
      object-fit: cover;
      object-position: 40%;
   }
}





/* Блок СТАТЬИ */
.articles-wrap {
   padding: 0 0 6.25rem 0;
}
.articles-container {
   width: 80%;
}
.articles-wrap .title {
   font-size: 3.75rem;
   font-weight: 800;
}
.articles-wrap .text {
   font-size: 1.5rem;
   margin: 2.5rem 0 0 0;
}
.articles-container-wrapper {
   display: flex;
   flex-wrap: wrap;
   margin: 2.5rem 0 0 0;
   gap: 2.5rem;
}
.articles-wrap .useful-item {
   position: relative;
   padding: 2.313rem 1.438rem 100px 2.313rem;
   border: 3px solid #132;
   border-radius: 18px;
   width: 40%;
}
.articles-wrap a.useful-item {
   color: #132;
   font-size: 1.25rem;
}
.articles-wrap .useful-item.usefullist-img-block{
   padding: 0px;
   border: none;
}
.articles-wrap .useful-item .usefullist-img{
   width: 100%;
   height: 100%;
}
.articles-wrap .useful-item .title2 {
   font-size: 1.875rem;
   font-weight: 700;
   line-height: normal;
}
.articles-wrap .useful-item p {
   font-size: 1.25rem;
   margin: 29px 0 0 0;
}
.articles-wrap .button-container {
   position: absolute;
   bottom: 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 85%;
}
.articles-wrap .button-container .date{
   font-size: 1.125rem;
}
.articles-wrap .useful-item:hover .button-container img {
   filter: invert(62%) sepia(98%) saturate(340%) hue-rotate(90deg) brightness(105%);
}


@media (max-width:768px) {
   .articles-wrap {
      padding: 0 0 32px 0;
   }
   .articles-container {
      width: 100%;
   }
   .articles-container-wrapper {
      margin: 0 0 0 0;
      gap: 16px;
   }
   .articles-wrap .title {
      font-size: 32px;
      text-transform: uppercase;
      font-weight: 800;
   }
   .articles-wrap .text {
      font-size: 18px;
      margin: 8px 0 0 0;
   }
   .articles-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-wrap: wrap;
      margin: 24px 0 0 0;
      gap: 8px;
   }
   .articles-wrap .useful-item .usefullist-img {
      display: none;
   }
   .articles-wrap .useful-item .title2 {
      font-size: 1.125rem;
      width: auto;
   }
   .articles-wrap .useful-item p {
      font-size: 1rem;
      margin: 8px 0 0 0;
   }
   .articles-wrap .useful-item {
      font-size: 16px !important;
      padding: 16px 21px 65px 16px;
      width: auto;
   }
   
   .articles-wrap .button-container {
      margin: 48px 0 0 0;
      width: 90%;
   }
   .articles-wrap .button-container img {
      height: 47px;
   }
   .articles-wrap .button-container .date {
      font-size: 14px;
   }
   .articles-wrap .useful-item:hover .button-container img {
      filter: invert(62%) sepia(98%) saturate(340%) hue-rotate(90deg) brightness(105%);
   }
}

@media ((min-width:768px) and (max-width: 1200px)) {
   .articles-container {
      width: 100%;
   }
}