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;
  text-align: left;
  gap: 1rem;
  margin-bottom: 20px;
  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:6cqi;
    margin: auto;
    padding-top: 10px;
  }
  > h2 {
    font-size: 4cqi;
    margin: auto;
  }
  > 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);
  }
}

.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;
  font-weight: 600;
  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;
  }

  > img,
    svg
     {
    margin: auto;

 
  }

}

 
.buttons {
  display: grid;
  width: min(50rem, 100%);
  margin-inline: auto;
  column-gap: 2rem;
  row-gap: 1rem;
}
  .item_1 {
    grid-column: 1 / span 2;
    grid-row: 6 / span 2;
  }
  .item_2 {
    grid-column: 1 / span 1;
    grid-row: 8 / span 1;
  }
    .item_3 {
    grid-column: 2 / span 1;
    grid-row: 8 / span 1;
  }
    .item_4 {
    grid-column: 1 / span 1;
    grid-row: 10 / span 1;
  }
    .item_5 {
    grid-column: 2 / span 1;
    grid-row: 10 / span 1;
  }

.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
       } 
      }
     }



/*телефони*/
/*медіа*/