/*================================================
FL Contact Info Area CSS
=================================================*/
.fl-contact-info-area {
  position: relative;
  z-index: 1;
}

.fl-contact-info-area::before {
  background-color: var(--blackColor);
  position: absolute;
  z-index: -1;
  content: '';
  height: 50%;
  bottom: 0;
  right: 0;
  left: 0;
}

.fl-contact-info-box {
  height: 235px;
  padding: 40px 30px;
  text-align: center;
  border-radius: 20px;
  background-color: #F2E5DE;
}

.fl-contact-info-box .icon {
  margin-bottom: 25px;
}

.fl-contact-info-box h3 {
  margin-bottom: 0;
  font-size: 24px;
  font-weight: 500;
}

.fl-contact-info-box h3 a:hover {
  color: var(--mainColor);
}

/* Max width 767px */
@media only screen and (max-width: 767px) {
    .fl-contact-info-area {
        margin-top: -30px;
    }
    .fl-contact-info-area::before {
        bottom: -1px;
    }
    .fl-contact-info-box {
        height: auto;
        margin-top: 30px;
        padding: 25px 15px;
    }
    .fl-contact-info-box h3 {
        font-size: 17px;
    }
}

/* Min width 768px to Max width 991px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .fl-contact-info-area {
        margin-top: -30px;
    }
    .fl-contact-info-area::before {
        height: 20%;
    }
    .fl-contact-info-box {
        padding: 25px 20px;
        margin-top: 30px;
        height: 192px;
    }
    .fl-contact-info-box h3 {
        font-size: 19px;
    }
}

/* Min width 992px to Max width 1199px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .fl-contact-info-box {
        height: 196px;
        padding: 25px 14px;
    }
    .fl-contact-info-box h3 {
        font-size: 20px;
    }
}

/* Min width 1200px to Max width 1355px */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
     .fl-contact-info-box {
        height: 230px;
    }
    .fl-contact-info-box h3 {
        font-size: 22px;
    }
}