body {
  background-color: #fbfcf7;
  font-family: "Comfortaa", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.graphic_1 {
  display: grid;
  container-type: inline-size;
  aspect-ratio: 4/1;
  border-radius: 0rem;
  color: #274e4f;
  background-color: #fff;
  border: 0.5px solid #2d6b22;
  gap: 1rem;
  margin-top: 20px;
  margin-bottom: 30px;
  font-family: "Comfortaa", serif;
  text-decoration: none;
  text-shadow: 6px 7px 9px rgba(61,61,52,0.42);
  --shadow: 
    -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
    .5rem .5rem 1rem hsl(0 0% 50% / .5);
  box-shadow: var(--shadow);
  > h1 {
    font-size:4cqi;
    margin: auto;
    padding-top: 10px;
  }
  > img {
    margin: auto;
    padding: 10px;
    border: 0.5px solid #2d6b22;
    margin-bottom: 20px;
    text-shadow: 6px 7px 9px rgba(61,61,52,0.42);
  --shadow: 
    -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
    .5rem .5rem 1rem hsl(0 0% 50% / .5);
  box-shadow: var(--shadow);
  }
}
.content_1 {
  display: grid;
  container-type: inline-size;
  aspect-ratio: 4/1;
  border-radius: 0rem;
  color: #274e4f;
  background-color: #fff;
  border: 0.5px solid #2d6b22;
  gap: 1rem;
  margin-bottom: 30px;
  font-family: "Comfortaa", serif;
  text-decoration: none;
  text-shadow: 6px 7px 9px rgba(61,61,52,0.42);
  --shadow: 
    -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
    .5rem .5rem 1rem hsl(0 0% 50% / .5);
  box-shadow: var(--shadow);
  > h2 {
    font-size:3cqi;
    margin: auto;
    padding-top: 10px;
  }
  > p {
    text-indent: 3ch;
    text-decoration: none;
    color: #000;
    text-align: left;
    font-size: 20px;
    line-height: 1.2em;
    display: block;
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    }
    > img {
      margin: auto;
      padding: 10px;
      border: 0.5px solid #2d6b22;
      margin-bottom: 20px;
      text-shadow: 6px 7px 9px rgba(61,61,52,0.42);
    --shadow: 
      -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
      .5rem .5rem 1rem hsl(0 0% 50% / .5);
    box-shadow: var(--shadow);
    }
}
.maps_1 {
        display: grid;
        container-type: inline-size;
        aspect-ratio: 10/1;
        margin-bottom: 40px;
        border-radius: 50rem;
        color: hsl(0 0% 10%);
        background-color: #fff;
        border: 0.5px solid #93bcbd;
        place-content: center;
        gap: 0.5rem;
        font-family: "Comfortaa", serif;
        text-decoration: none;
        --shadow: 
          -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
          .5rem .5rem 1rem hsl(0 0% 50% / .5);
        box-shadow: var(--shadow);
        outline: none;  
        transition: all 0.8s;
        
        &:hover, &:focus-visible {
          color: #631902;
          scale: 1.04
        }
        &:active {
          box-shadow:
            var(--shadow),
            inset .5rem .5rem 1rem hsl(0 0% 50% / .5),
            inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75);
          color: hsl(10 80% 50%);
          > span { font-size: 4cqi};
        }
        > span {
          font-size:4cqi;
          margin: auto;

        }

}
.neumorphic {
  display: grid;
  container-type: inline-size;
  aspect-ratio: 1/1;
  border: 0.5rem solid transparent;
  border-radius: 0.4rem;
  color: hsl(0 0% 10%);
  background-color: #fff;
  border: 0.5px solid #93bcbd;
  place-content: center;
  gap: 0.5rem;
  font-family: "Comfortaa", serif;
  text-decoration: none;
  --shadow: 
    -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
    .5rem .5rem 1rem hsl(0 0% 50% / .5);
  box-shadow: var(--shadow);
  outline: none;  
  transition: all 0.8s;
  
  &:hover, &:focus-visible {
    color: #631902;
    scale: 1.04
  }
  &:active {
    box-shadow:
      var(--shadow),
      inset .5rem .5rem 1rem hsl(0 0% 50% / .5),
      inset -.5rem -.5rem 1rem hsl(0 0% 100% / .75);
    color: hsl(10 80% 50%);
    > span { font-size: 4cqi};
  }
  > span {
    font-size:8cqi;
    margin: auto;
    padding-bottom: 2px;
  }
  > img,
    svg
     {
    padding-top: 5PX;
    margin: auto;
  }
}
.buttons_1, 
.buttons_2 {
  display: grid;
  width: min(50rem, 100%);
  margin-inline: auto;
  column-gap: 2rem;
  row-gap: 0rem;
  grid-auto-rows: 1ft;
  > img,
    svg {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
}
  .item_1 {
    grid-column: 1 / span 3;
    grid-row: 6 / span 2;
  }
  .item_2 {
    grid-column: 1 / span 3;
    grid-row: 8 / span 2;
  }

   .item_3 {
    grid-column: 1 / span 1;
    grid-row: 14 / span 1;
  }
   .item_4 {
     grid-column: 2 / span 1;
     grid-row: 14 / span 2;
  }
    .item_5 {
     grid-column: 3 / span 1;
     grid-row: 14 / span 2;
  }
/*телефони*/
.tel_blok_mess_1_1 {
  margin-top: 60px;
  margin-bottom: 50px;
  display: grid;
  width: min(50rem, 100%);
  margin-inline: auto;
  gap: 1rem;
  
}
  .item_6 {
    display: grid;
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    margin: auto;
      > img, 
        svg {
      position: relative;
      width: 97%;
      height: 97%;
      object-fit: cover;
      margin: auto;
          border-radius: 10px;
      border: 0.5px solid #e8ede9;
      --shadow: 
      -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
      .5rem .5rem 1rem hsl(0 0% 50% / .5);
       box-shadow: var(--shadow);
       outline: none;  
       transition: all 0.8s;
       &:hover, &:focus-visible {
       scale: 1.1
       } 
      }
     }
    .item_7 {
      grid-column: 2 / span 1;
      grid-row: 1 / span 1;
      margin: auto;   
       > img, 
         svg {
         position: relative;
         width: 100%;
         height: 100%;
         object-fit: cover;
         margin: auto;
         border-radius: 10px;
         border: 0.5px solid #e8ede9;
         --shadow: 
         -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
         .5rem .5rem 1rem hsl(0 0% 50% / .5);
         box-shadow: var(--shadow);
         outline: none;  
         transition: all 0.8s;
         &:hover, &:focus-visible {
         scale: 1.1
         } 
        }
     }
.item_8 {
  grid-column: 3 / span 1;
  grid-row: 1 / span 1;
  margin: auto;
    > img, 
      svg {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: cover;
      margin: auto;
      border-radius: 10px;
      border: 0.5px solid #e8ede9;
      --shadow: 
      -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
      .5rem .5rem 1rem hsl(0 0% 50% / .5);
       box-shadow: var(--shadow);
       outline: none;  
       transition: all 0.8s;
       &:hover, &:focus-visible {
       scale: 1.1
       } 
      }
}
.item_9 {
  grid-column: 4 / span 1;
  grid-row: 1 / span 1;
  margin: auto;
    > img, 
      svg {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: cover;
      margin: auto;
      border-radius: 10px;
      border: 0.5px solid #e8ede9;
      --shadow: 
      -.5rem -.5rem 1rem hsl(0 0% 100% / .75),
      .5rem .5rem 1rem hsl(0 0% 50% / .5);
       box-shadow: var(--shadow);
       outline: none;  
       transition: all 0.8s;
       &:hover, &:focus-visible {
       scale: 1.1
       } 
      }
     }

/*телефони*/