section.online-hub-outer {
    padding: 0px 32px;
}
.online-hub {
    width: 100%;
    max-width: 1360px;
    margin: 0px auto;
    padding: 40px;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    background: #1b1b1e;
    border-radius: 12px;
    overflow: hidden;
}
.online-hub-in {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
}
.online-hub-in .left-content {
    grid-column: span 7 / span 7;
    display: flex;
    flex-flow: column;
    gap: 16px;
}
.online-hub-in .tag {
    background: rgb(218 217 227 / 0.2);
    padding: 4px 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    width: max-content;
    border-radius: 50px;
}
.online-hub-in .tag span {
    color: #e8e7f1;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: .55px;
    font-weight: 700;
    text-transform: uppercase;
}
.online-hub-in h2.title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -.7px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.online-hub-in p.info {
    color: #c8c5cb;
    font-size: 14px;
    line-height: 1.625;
    font-weight: 400;
    max-width: 576px;
    margin: 0;
	letter-spacing: 0;
}
.left-content .items_icon_ {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 4px;
}
.left-content .items_icon_ .item_icon_ {
    display: flex;
    gap: 8px;
}
.left-content .items_icon_ .item_icon_ .text_ span:first-child {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.01em;
    font-weight: 700;
    color: #fff;
    display: block;
}
.left-content .items_icon_ .item_icon_ .text_ span:last-child {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    color: #c8c5cb;
    letter-spacing: 0;
}
.online-hub-in .right-image {
    grid-column: span 5 / span 5;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    height: 256px;
}
.online-hub-in .right-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.online-hub-in .right-image .bottom-text {
    position: absolute;
    left: 50%;
    bottom: 12px;
    background: rgb(27 27 30 / 0.85);
    padding: 8px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    transform: translateX(-50%);
}
.online-hub-in .right-image .bottom-text .left {
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    color: #fff;
	letter-spacing: 0;
}
.online-hub-in .right-image .bottom-text .right {
    color: #ffdad9;
    font-size: 11px;
    line-height: 14px;
    letter-spacing: .88px;
    font-weight: 700;
    text-transform: uppercase;
	letter-spacing: 0;
}



@media (max-width: 991px){
	section.online-hub-outer {
		padding: 0px 15px;
	}
	.online-hub {
		padding: 40px 20px;
	}
	.online-hub-in h2.title {
		font-size: 25px;
		line-height: 30px;
	}
	.left-content .items_icon_ {
		gap: 10px;
	}
	.left-content .items_icon_ .item_icon_ .text_ span:first-child {
		font-size: 12px;
	}
	.online-hub-in .right-image .bottom-text {
		width: calc(100% - 24px);
	}


}

@media (max-width: 767px){
	.online-hub-in {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.online-hub-in .left-content, .online-hub-in .right-image  {
		grid-column: 1;
	}
	.online-hub-in h2.title {
		font-size: 20px;
		line-height: 25px;
	}
	.left-content .items_icon_ {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.online-hub-in .right-image .bottom-text {
		width: calc(100% - 18px);
	}
	.online-hub-in .right-image .bottom-text .left {
		font-size: 11px;
	}
	.online-hub-in .right-image .bottom-text .right {
		font-size: 10px;
	}


}