body{
    background-color: #fffff0;
    color: #393E46;
}

.toper-flex{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

.item-toper-flex{
    flex-grow: 0;
}

.phone-toper-flex{
    flex-grow: 1;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

.logo-toper-flex{
    flex-grow: 15;
    text-align: center;
}

.main-grid{
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr 10fr;
    grid-template-rows: repeat(6,100px);
    align-items: center;
    color: black;
    font-size: 30px;
    font-weight: bold;
    font-style: italic;
}

.main-caption{
    font-size: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
    color:black;
    text-align: center;
    font-weight: bold;
    font-style: italic;
}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 3px;
    color:black;
}

.footer-grid {
    display: grid;
/*     gap: 20px;
   height: 100vh;
  */
    grid-template-areas:
      "H  A A A   B B B   C C C C C"
      "J D D D   B B B   E E E E E"
      "K F F F   B B B   G G G G G";
      align-items: center;
      font-size: 25px;
  }

  .box-1 {
    grid-area: A;
    height: 50px;
  }

  .box-2 {
    grid-area: B;
  }
   
  .box-3 {
    grid-area: C;
    height: 50px;
    justify-self: end;
  }

  .box-4 {
    grid-area: D;
    height: 50px;
  }

  .box-5 {
    grid-area: E;
    height: 50px;
    justify-self: end;
  }

  .box-6 {
    grid-area: F;
    height: 50px;
  }

  .box-7 {
    grid-area: G;
    height: 50px;
    justify-self: end;
  }

  .box-8 {
    grid-area: H;
    height: 50px;
  }
  
  .box-9 {
    grid-area: J;
    height: 50px;
  }

  .box-10 {
    grid-area: K;
    height: 50px;
  }