#colorlib-main .container {
    margin-top: 5%;
}

.square {
    display: inline-block;
    color: #fff;
    font-size: 40px;
    margin: 10px 10px;
    text-align: center;
    line-height: 2.2em;
    width: 5em;
    height: 5em;
    transition: all 0.65s cubic-bezier(0.51, 0.04, 0.63, 1.4);
    cursor: pointer;
}

.squarem {
    display: inline-block;
    color: #fff;
    font-size: 40px;
    margin: 10px 10px;
    text-align: center;
    line-height: 2.2em;
    width: 5em;
    height: 5em;
    transition: all 0.65s cubic-bezier(0.51, 0.04, 0.63, 1.4);
    cursor: pointer;
}

.square i {
    transition: all 0.65s cubic-bezier(0.68, -0.12, 0.78, 1.6);
}

.square:hover {
    transform: rotate(-360deg);
    border-radius: 100%;
    box-shadow: 0 0 15px 0px #333;
}

.squarem:hover {
    transform: rotate(-360deg);
    border-radius: 100%;
    box-shadow: 0 0 15px 0px #333;
}

.square.elec {
    background-image: url("/images/images/m_bills.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.elec:hover {
    background-image: url("/images/images/m_bills.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.airt {
    background-image: url("/images/images/m_airtime.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.airt:hover {
    background-image: url("/images/images/m_airtime.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.dat {
    background-image: url("/images/images/m_data.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.dat:hover {
    background-image: url("/images/images/m_data.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.teev {
    background-image: url("/images/images/m_tv.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.teev:hover {
    background-image: url("/images/images/m_tv.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.square:hover i {
    transform: rotate(360deg);
}

.square.blue {
    background-image: url("images/MTN.jpg");
    background-size: contain;
}

.square.blue:hover {
    background-image: url("images/MTN.jpg");
    background-size: contain;
}

.square.red {
    background: #924949;
}

.square.red:hover {
    background: #b53f3f;
}

.square.green {
    background: #499249;
}

.square.green:hover {
    background: #3fb53f;
}

.square.phed {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775882/easypay/Port.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.phed:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775882/easypay/Port.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.jos {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/JED.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.jos:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/JED.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.kedco {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/Kedco.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.kedco:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/Kedco.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.kad {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775881/easypay/Kaduna.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.kad:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775881/easypay/Kaduna.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.ikeja {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/Ikeja.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.ikeja:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/Ikeja.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.iba {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/IBEDC.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.iba:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/IBEDC.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.eko {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/Eko.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.eko:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/Eko.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.abuja {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/Abuja.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}

.square.abuja:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/Abuja.jpg");
    background-size: contain;
    background-repeat: no-repeat;
}


.square {
    display: inline-block;
    color: #fff;
    font-size: 40px;
    margin: 10px 10px;
    text-align: center;
    line-height: 2.2em;
    width: 4em;
    height: 4em;
    transition: all 0.65s cubic-bezier(0.51, 0.04, 0.63, 1.4);
    cursor: pointer;
}

.square i {
    transition: all 0.65s cubic-bezier(0.68, -0.12, 0.78, 1.6);
}

.square:hover {
    transform: rotate(-360deg);
    border-radius: 100%;
    box-shadow: 0 0 15px 0px #333;
}

.square:hover i {
    transform: rotate(360deg);
}

.square.blue {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775881/easypay/MTN.jpg");
    background-size: contain;
}

.square.blue:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775881/easypay/MTN.jpg");
    background-size: contain;
}

.square.red {
    background: #924949;
}

.square.red:hover {
    background: #b53f3f;
}

.square.green {
    background: #499249;
}

.square.green:hover {
    background: #3fb53f;
}

.square.mtn {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775881/easypay/MTN.jpg");
    background-size: contain;
}

.square.mtn:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775881/easypay/MTN.jpg");
    background-size: contain;
}

.square.airtel {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/Airtel.jpg");
    background-size: contain;
}

.square.airtel:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/Airtel.jpg");
    background-size: contain;
}

.square.glo {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/GLO.jpg");
    background-size: contain;
}

.square.glo:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/GLO.jpg");
    background-size: contain;
}

.square.gotv {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/Gotv.jpg");
    background-size: contain;
}

.square.gotv:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775880/easypay/Gotv.jpg");
    background-size: contain;
}

.square.dstv {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/DSTV.jpg");
    background-size: contain;
}

.square.glo:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/DSTV.jpg");
    background-size: contain;
}

.square.startimes {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775883/easypay/Startimes.jpg");
    background-size: contain;
}

.square.startimes:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775883/easypay/Startimes.jpg");
    background-size: contain;
}

.square.smile {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775882/easypay/Smile.jpg");
    background-size: contain;
}

.square.smile:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775882/easypay/Smile.jpg");
    background-size: contain;
}

.square.eti {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/9mobile.jpg");
    background-size: contain;
}

.square.eti:hover {
    background-image: url("https://res.cloudinary.com/daetacity/image/upload/v1654775879/easypay/9mobile.jpg");
    background-size: contain;
}

.shift {
    margin-top: 20%;
}