:root {
  --contact-icon-color: #ffd700;
  --convas-height: 400px;
  --canvas-width: 100%;
}

#contact-info {
  padding: 100px 0;
}

.c-info {
  padding: 30px;
  text-align: center;
  margin: 0 0 15px;

  i {
    color: var(--contact-icon-color);
    font-size: 35px;
  }
}

.c-info h5 {
  text-transform: uppercase;
  font-size: 16px;
  margin: 15px 0 7px;
}

#map-canvas {
  height: var(--convas-height);
  width: var(--canvas-width);
  margin-bottom: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    width: 100%;
    max-width: 750px;
  }

  #contact-info .col-sm-6 {
    margin-bottom: 20px;
  }
}

@media only screen and (min-width: 280px) and (max-width: 767px) {
  #contact-info .col-sm-6 {
    margin-bottom: 20px;
  }
}