body {
    background: #d6e1f1;
}

h3 {
    margin-top: 2rem;
    position: relative;
    text-align: center;
    color: #78acc2;
    font-size: 40px;
    font-family: "Cormorant Garamond", serif;
}

p {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    text-align: center;
    font-size: 16px;
    color: #8e2727;
}

.frame {
    width: 90%;
    margin: 40px;
    text-align: center;
}

li {
    margin: 3px;
    align-items: flex-start;
    width: 128px;
    height: 30px;
    color: rgb(27, 25, 25);
    border-radius: 3px;
    padding: 10px 30px;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 8px 8px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1);
    outline: none;
    text-align: center;
    display: inline-block;
}

.wd-6 {
    display: inline-block;
    margin: 0;
    font-size: 10;
}


/* 1 */

.btn-1 {
    background: rgb(230, 228, 228);
    border: none;
    width: 130px;
    height: 25px;
    adding: 0;
    order: none;
}

.btn-1:hover {
    background: rgb(215, 215, 220);
}


/* 2 */

.btn-2 {
    background: rgb(230, 228, 228);
    order: none;
    width: 130px;
    height: 25px;
}

.btn-2:before {
    height: 0%;
    width: 2px;
}

.btn-2:hover {
    box-shadow: 4px 4px 8px 0 rgba(255, 255, 255, .5), -4px -4px 8px 0 rgba(118, 125, 138, .5), inset -4px -4px 8px 0 rgba(255, 255, 255, .2), inset 4px 4px 8px 0 rgba(0, 0, 0, .4);
}


/* 3 */

.btn-3 {
    background: rgb(230, 228, 228);
    order: none;
    width: 130px;
    height: 25px;
}

.btn-3:before {
    height: 0%;
    width: 2px;
}

.btn-3:hover {
    box-shadow: 4px 4px 8px 0 rgba(255, 255, 255, .5), -4px -4px 8px 0 rgba(118, 125, 138, .5), inset -4px -4px 8px 0 rgba(255, 255, 255, .2), inset 4px 4px 8px 0 rgba(0, 0, 0, .4);
}


/* 4 */

.btn-4 {
    background-color: rgb(230, 228, 228);
    width: 130px;
    height: 25px;
}

.btn-4:hover {
    background-color: #e1e2e2;
}

.btn-4 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}


/* 8  edusearch    --.btn-8 {
        width: 130px;
        height: 35px;
        background: #CE262E;
        background: linear-gradient(0deg, rgb(209, 61, 61) 0%, rgb(228, 36, 36) 100%);
        color: #fff;
        border: none;
        transition: all 0.3s ease;
    }
    
    .btn-8:after {
        position: absolute;
        content: " ";
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        transition: all 0.3s ease;
        -webkit-transform: scale(.1);
        transform: scale(.1);
    }
    
    .btn-8:hover {
        color: #fff;
        border: none;
        background: transparent;
    }
    
    .btn-8:hover:after {
        background: rgb(214, 190, 110);
        background: linear-gradient(0deg, rgb(208, 36, 36) 0%, rgb(253, 100, 100)100%);
        -webkit-transform: scale(1);
        transform: scale(1);
    }*/


/* 12  ecolink*/


/* 10 */

.btn-12 {
    width: 130px;
    height: 35px;
    background: #A5C3E2;
    background: linear-gradient(0deg, rgb(132, 166, 235) 0%, rgba(49, 110, 244, 1) 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-12:after {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    -webkit-transform: scale(.1);
    transform: scale(.1);
}

.btn-12:hover {
    color: #fff;
    border: none;
    background: transparent;
}

.btn-12:hover:after {
    background: rgb(0, 3, 255);
    background: linear-gradient(0deg, rgba(2, 126, 251, 1) 0%, rgba(0, 3, 255, 1)100%);
    -webkit-transform: scale(1);
    transform: scale(1);
}


/* 16  islamic*/

.btn-16 {
    width: 130px;
    height: 35px;
    background: rgb(122, 122, 130);
    background: linear-gradient(0deg, rgb(161, 161, 177) 0%, rgb(117, 120, 128) 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-16:after {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    -webkit-transform: scale(.1);
    transform: scale(.1);
}

.btn-16:hover {
    color: #fff;
    border: none;
    background: transparent;
}

.btn-16:hover:after {
    background: rgb(83, 83, 90);
    background: linear-gradient(0deg, rgb(118, 122, 127) 0%, rgb(119, 119, 133)100%);
    -webkit-transform: scale(1);
    transform: scale(1);
}


/* 20 Arabase*/

.btn-20 {
    width: 130px;
    height: 35px;
    background: #D4B79E;
    background: linear-gradient(0deg, rgb(169, 172, 110) 0%, rgb(202, 221, 134) 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-20:after {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    -webkit-transform: scale(.1);
    transform: scale(.1);
}

.btn-20:hover {
    color: #fff;
    border: none;
    background: transparent;
}

.btn-20:hover:after {
    background: rgb(214, 190, 110);
    background: linear-gradient(0deg, rgb(181, 165, 92) 0%, rgb(240, 230, 101)100%);
    -webkit-transform: scale(1);
    transform: scale(1);
}


/* 24 Humanindex*/

.btn-24 {
    width: 130px;
    height: 35px;
    background: #b5ee5a;
    background: linear-gradient(0deg, rgb(93, 189, 123) 0%, rgb(61, 172, 93) 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-24:after {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    -webkit-transform: scale(.1);
    transform: scale(.1);
}

.btn-24:hover {
    color: #fff;
    border: none;
    background: transparent;
}

.btn-24:hover:after {
    background: rgb(214, 190, 110);
    background: linear-gradient(0deg, rgb(54, 108, 43) 0%, rgb(57, 160, 78)100%);
    -webkit-transform: scale(1);
    transform: scale(1);
}


/* 28 dissertation*/

.btn-28 {
    width: 130px;
    height: 35px;
    background: #ff0000;
    background: linear-gradient(0deg, rgb(218, 33, 33) 0%, rgb(199, 15, 15) 100%);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.btn-28:after {
    position: absolute;
    content: " ";
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    -webkit-transform: scale(.1);
    transform: scale(.1);
}

.btn-28:hover {
    color: #fff;
    border: none;
    background: transparent;
}

.btn-28:hover:after {
    background: rgb(240, 109, 109);
    background: linear-gradient(0deg, rgb(255, 83, 77) 0%, rgb(251, 56, 56)100%);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.btn-27 {
    width: 330px;
    margin-bottom: 9px;
}

.circle1,
.circle2 {
    background: rgba(255, 255, 255, 0.497);
    background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.8), rgba(225, 225, 225, 0.3));
    position: fixed;
    height: 20rem;
    width: 20rem;
    border-radius: 50%;
}

.circle1 {
    top: 1%;
    right: 7%;
    opacity: 50%;
}

.circle2 {
    bottom: 1%;
    left: 5%;
    opacity: 50%;
}