/*==================================================
ECOSYSTEM
==================================================*/

.ecosystem{

    padding:150px 0;

    background:#ffffff;

}

.ecosystem-wrapper{

    position:relative;

    width:900px;

    height:700px;

    margin:100px auto 0;

}

.hub{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

}

.hub-circle{

    width:220px;

    height:220px;

    border-radius:50%;

    background:linear-gradient(135deg,#111827,#2563eb);

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    box-shadow:0 40px 80px rgba(37,99,235,.30);

}

.hub-circle span{

    font-size:34px;

    font-weight:900;

}

.hub-circle small{

    margin-top:12px;

    font-size:16px;

    opacity:.9;

}

.module{

    position:absolute;

    width:180px;

    height:70px;

    background:#fff;

    border:1px solid #e5e7eb;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    box-shadow:0 15px 35px rgba(15,23,42,.08);

    transition:.35s;

}

.module:hover{

    transform:scale(1.08);

    border-color:#2563eb;

    box-shadow:0 30px 60px rgba(37,99,235,.20);

}

.top{top:0;left:50%;transform:translateX(-50%);}
.top-left{top:90px;left:70px;}
.top-right{top:90px;right:70px;}
.left{top:50%;left:0;transform:translateY(-50%);}
.right{top:50%;right:0;transform:translateY(-50%);}
.bottom-left{bottom:120px;left:70px;}
.bottom{bottom:0;left:50%;transform:translateX(-50%);}
.bottom-right{bottom:120px;right:70px;}
.lower-left{bottom:20px;left:140px;}
.lower-right{bottom:20px;right:140px;}