@font-face {
    font-family: "Onest";
    src: url("./fonts/Onest-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Onest";
    src: url("./fonts/Onest-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'Onest', 'Arial', sans-serif;
    background-color: #EFEFEF;
    color: #3E6939;
}
a{ 
    text-decoration: none;
    color:#3E6939;
}


hr{
  border: none;
  border-top: 1px solid #2B4927;
  margin: 20px 0;
}


.container{
    padding: 50px;
}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 20px;

}

.nav--list{
    display: inline-flex;
    align-items: center;
    column-gap: 50px;
    color:#3E6939;

}


.now{
    color: #2B4927; 
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 1,5px;
}

.menu:hover {
    color: #2B4927; 
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 1px;
}

.button{
    color: #3E6939;
    padding: 10px 20px;
    background-color: #D9D9D9;
    transition: 0.3s;
}

.button:hover{
    background-color: #4A7B42;
    color: #fff;
}

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    
  }
  
  .burger span {
    width: 25px;
    height: 3px;
    background: #4A7B42;
    display: block;
  }

  .my_title{
    font-size: 24px;
    font-weight: 400;
    line-height: 20px;

  }

  .dot{
    color: #EFEFEF;
  }

  .hero{
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: clamp(5px, 22.42vw, 600px);
    padding-left: 50px;
    padding-right: 50px;
  }

  .hero--info{
    font-size: 18px;
  }

  .openwork{
    font-size: 16px;
  }

  .anotation{
    padding-top: 40px;
    padding-left: 50px;

  }

  /* Медиа-запрос для мобильной версии */
  @media (max-width: 800px) {
    .nav {
      display: none;
      position: absolute;
      top: 20%;
      right: 30%;
      background: #D9D9D9;
      padding: 20px;
      border: 1px solid #3E6939;
      z-index: 1000;
    }
    
    .nav--list{
      flex-direction: column;
    }

    .header{
        padding: 10px;
    }
  
    .nav.active {
      display: block; 
    }
  
    .burger {
      display: flex;
      
    }
  }

@media (max-width: 700px){

    .hero{
        flex-direction: column;
        align-items: center;
    }
    .portrait{
        scale: 80%;
        padding-bottom: 20px;
      
    }

    .p{
        font-size: 60%;
    }
    .anotation{
        margin: 0 auto;
        min-width: 90%;
    }


    .item{
    flex-direction: column;
    align-items: center;
    text-align: center;
    row-gap: 35px;
    }

    .details{
    text-align: center;
    font-size: 12px;
    }
 
.hero{
    display: flex;
    justify-content: start;
    align-items: center;
    column-gap: clamp(5px, 25.42vw, 900px);
    padding-left: 50px;
    padding-right: 50px;
}

.anotation{
    padding: 50px;
    width: 50%;
    margin-left: 0;
    margin-right: auto;
}

.my_title{
    font-size: 24px;
    line-height: 1.1;
    padding-bottom: 30px;
}

p{
    text-align: justify;
    font-size: 18px;
}
}

#коммент /_____________________________________/

.container_cas {
    display: flex;
    padding: 50px, 50px;
    justify-content: center;
    align-items: baseline;
}

.item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 25px 8%;

}

.corp_logo {
    width: 50px;
    height: 50px;
}

.content {
    margin-left: 30px;
    width: 250px;
    justify-content: center;
    text-align: center;
    align-items: center;
    column-gap: 40px;
    color:#3E6939;
}

.open{
  font-size: 24px;
  line-height: 1.1;

}

.data {
    margin: 1px 0;
    color: #3E6939;
    font-size: 16px;
    font-weight: 300;
    opacity: 80%;
    text-align: center;
    align-items: center;
}

.details{
    display: block;
    align-items: center;
    justify-content: flex-start;
    padding-left: 60px;
}


.details span {
    display: inline-block;
    font-size: 12px;
    color: #3E6939;
    background-color: #D9D9D9;
    padding: 8px 10px;
    font-weight: 400;

}

.additional{
    font-size: 12px;
    color: #3E6939;
    font-weight: 400;
    padding-top: 10px;
    font-size: 18px;
    width: 60%;

}

.case-link {
    align-items: center;
    justify-content: center;
    color: #3E6939;
    text-decoration: none;
    font-size: 18px;
    padding: 13px 20px;
    font-weight: 400;
    background-color: #D9D9D9;
    transition: 0.3s;
    text-align: center;
    line-height: 16px; 

}

.case-link:hover {
    background-color: #4A7B42;
    color: #fff;
}


.item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  color:#3E6939;
}

.describ{
  background-color: #D9D9D9;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 18px;

}



.social{
  height: 80px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  gap: 40px;


}

.social-media{
  color: #3E6939;
  font-weight: 300;
  text-decoration: none;
}












*,
 ::before,
 ::after {
   box-sizing: border-box;
 }
 
 :where(ul, ol):where([class]) {
   padding-left: 0;
 }
 
  */
 body,
 :where(blockquote, figure):where([class]) {
   margin: 0;
 }

 :where(
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   p,
   ul,
   ol,
   dl
 ):where([class]) {
   margin-block: 0;
 }
 
 :where(dd[class]) {
   margin-left: 0;
 }
 
 :where(fieldset[class]) {
   margin-left: 0;
   padding: 0;
   border: none;
 }
 :where(ul[class]) {
   list-style: none;
 }
 :where(address[class]) {
   font-style: normal;
 }
 p {
   --paragraphMarginBottom: 24px;
   margin-block: 0;
 }
 p:where(:not([class]):not(:last-child)) {
   margin-bottom: var(--paragraphMarginBottom);
 }

 html {

   height: 100%;
   scrollbar-gutter: stable;
 }

 html,
 :has(:target) {
   scroll-behavior: smooth;
 }
 
 body {
    min-height: 100%;
    line-height: 1.5;
 }
 

 a:where([class]) {
   display: inline-flex;
 }
 
 button,
 label {
   cursor: pointer;
 }
 

 :where([fill]:not(
   [fill="none"],
   [fill^="url"]
 )) {
   fill: currentColor;
 }
 :where([stroke]:not(
   [stroke="none"],
   [stroke^="url"]
 )) {
   stroke: currentColor;
 }
 svg * {
   transition-property: fill, stroke;
 }
 :where(table) {
   border-collapse: collapse;
   border-color: currentColor;
 }
 @media (prefers-reduced-motion: reduce) {
   *,
   ::before,
   ::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;
   }
 }

@media (max-width: 768px) {
  .case {
    flex-direction: column;
    align-items: center;
  }

  .content{
    margin: 0;
  }

  .item{
    align-items: center;
  }

 .details{
  margin: 0;
  padding: 0;
  text-align: center;
  align-items: center;
  justify-content: center;

 }

 .additional{
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;

 }

  .case__right {
    align-self: stretch;
    width: 100%;
    margin-top: 20px;
  }

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





}