.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -26px;
}

    .hex .top {
        width: 0;
        border-bottom: 30px solid white;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
    }

    .hex .middle {
        width: 104px;
        height: 60px;
        background: white;
    }

    .hex .bottom {
        width: 0;
        border-top: 30px solid white;
        border-left: 52px solid transparent;
        border-right: 52px solid transparent;
    }

.hex-row {
    clear: left;
}

    .hex-row.even {
        margin-left: 53px;
    }
/* homepage 3 */
.gradient-banner {
  padding: 200px 0 ;
  position: relative;
  overflow: hidden;
}
    .gradient-banner::before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 200%;
        height: 200%;
        background: linear-gradient(90deg, var(--env-theme-color-secondary) 35%, var(--env-theme-color-tertiary) 100%);
    }

.pull-top {
  margin-top: -100px;
}

.shapes-container {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.shapes-container .shape {
  position: absolute;
}
.shapes-container .shape::before {
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transform: rotate(-35deg);
  position: absolute;
  border-radius: 50px;
}
.shapes-container .shape:nth-child(1) {
  top: 2%;
  left: 11%;
  width: 400px;
  height: 70px;
}
.shapes-container .shape:nth-child(2) {
  top: 14%;
  left: 18%;
  width: 200px;
  height: 15px;
}
.shapes-container .shape:nth-child(3) {
  top: 80%;
  left: 4%;
  width: 300px;
  height: 60px;
}
.shapes-container .shape:nth-child(4) {
  top: 85%;
  left: 15%;
  width: 100px;
  height: 10px;
}
.shapes-container .shape:nth-child(5) {
  top: 5%;
  left: 50%;
  width: 300px;
  height: 25px;
}
.shapes-container .shape:nth-child(6) {
  top: 4%;
  left: 52%;
  width: 200px;
  height: 5px;
}
.shapes-container .shape:nth-child(7) {
  top: 80%;
  left: 70%;
  width: 200px;
  height: 5px;
}
.shapes-container .shape:nth-child(8) {
  top: 55%;
  left: 95%;
  width: 200px;
  height: 5px;
}
.shapes-container .shape:nth-child(9) {
  top: 50%;
  left: 90%;
  width: 300px;
  height: 50px;
}
.shapes-container .shape:nth-child(10) {
  top: 30%;
  left: 60%;
  width: 500px;
  height: 55px;
}
.shapes-container .shape:nth-child(11) {
  top: 60%;
  left: 60%;
  width: 200px;
  height: 5px;
}
.shapes-container .shape:nth-child(12) {
  top: 35%;
  left: 75%;
  width: 200px;
  height: 5px;
}
.shapes-container .shape:nth-child(13) {
  top: 90%;
  left: 40%;
  width: 300px;
  height: 45px;
}
.shapes-container .shape:nth-child(14) {
  top: 54%;
  left: 75%;
  width: 200px;
  height: 5px;
}
.shapes-container .shape:nth-child(15) {
  top: 50%;
  left: 90%;
  width: 200px;
  height: 5px;
}
.shapes-container .shape:nth-child(16) {
  top: 50%;
  left: 81%;
  width: 100px;
  height: 5px;
}

.zindex-1 {
  z-index: 1;
}

hr {
  display: block;
  height: 2px;
  border: 0;
  border-top: 2px solid white;
  margin: 1em 0;
  padding: 0;
}


.footer-main {
    padding: 92px 0;
    background: lightgray;
}

@media (max-width: 768px) {
    .footer-main {
        padding: 50px 0;
    }
}

.footer-main .block img {
    margin-bottom: 20px;
}

    .footer-main .block img #small-Apps {
        fill: red;
    }

.footer-main .block ul.social-icon li a {
    text-decoration: none;
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 100%;
    background: #3f3f43;
    color: #fff;
    text-align: center;
    line-height: 38px;
}

@media (max-width: 768px) {
    .footer-main .block {
        margin-bottom: 40px;
    }
}

.footer-main .block-2 h6 {
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 25px;
}

.footer-main .block-2 ul {
    padding: 0;
}

    .footer-main .block-2 ul li {
        margin-bottom: 10px;
        list-style: none;
    }

        .footer-main .block-2 ul li a {
            font-size: 14px;
            color: #6f6f71;
            transition: 0.2s ease;
        }

            .footer-main .block-2 ul li a:hover {
                color: #fff;
            }

.footer-classic {
    background: #fafafa;
    text-align: center;
    padding: 110px 0;
}

    .footer-classic ul.social-icons {
        margin-bottom: 30px;
    }

@media (max-width: 480px) {
    .footer-classic ul.social-icons li {
        margin-bottom: 10px;
    }
}

.footer-classic ul.social-icons li a {
    padding: 0 20px;
    display: block;
}

    .footer-classic ul.social-icons li a i {
        font-size: 25px;
        color: #000;
    }

.footer-classic ul.footer-links li a {
    padding: 0 10px;
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 14px;
    color: #000;
}