.content {
    width: 100%;
    color: #033b80;
    padding-right: 80px;
}

.subpage-grid {
    display: flex;
    flex-wrap: wrap;
    position: relative;
	margin:50px 0;
}

.subpage-grid::before {
    content: "";
    position: absolute;
    left: -50px;
    right: -50px;
    height: 1px;
    background: #033b80;
}

.subpage-grid::before {
    top: 0;
}

.subpage-grid::after {
    bottom: 0;
}

.subpage-item {
    width: 50%;
    box-sizing: border-box;
    padding: 40px 40px 40px 0;
    text-align: left;
    position: relative;
}

/* Middle vertical divider */
.subpage-item:nth-child(2) {
    border-left: 1px solid #033b80;
	padding: 40px 20px 40px 20px;
}

.subpage-item:nth-child(3) {
	 border-top: 1px solid #033b80;
}

.subpage-item:nth-child(4) {
    border-left: 1px solid #033b80;
	 border-top: 1px solid #033b80;
	padding: 40px 20px 40px 20px;
}

/* Third item */
.subpage-item.full {
    width: 100%;
}

/* Horizontal divider before third item */
.subpage-item.full::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50px;
    right: -50px;
    height: 1px;
    background: #033b80;
}

.our-title {
	position: relative;
    z-index: 1;
    font-size: 50px;
    font-weight: 500;
    font-family: var(--font-title);
    color: #033b80;
    margin-left: 3px;
}


.circle {
    display: inline-block;
    width: 30px !important;
    height: 30px !important;
    border-radius: 30%;	
}


.subpage-item:nth-child(1) .circle {
    background: conic-gradient(
        #DD3E70 0deg 90deg,
        transparent 90deg 360deg
    );
	transform: translateX(-7.5px) translateY(4px) rotate(270deg);
}

.subpage-item:nth-child(2) .circle {
    background: conic-gradient(
        #E8AC1F 0deg 90deg,
        transparent 90deg 360deg
    );
	transform: translateX(-22px) translateY(4px);
}

.subpage-item:nth-child(3) .circle {
    background: conic-gradient(
        #80904D 0deg 90deg,
        transparent 90deg 360deg
    );
	transform: translateX(-7.5px) translateY(4px) rotate(270deg);
}

.subpage-item:nth-child(4) .circle {
    background: conic-gradient(
        #831974 0deg 90deg,
        transparent 90deg 360deg
    );
	transform: translateX(-22px) translateY(4px);
}


/* Mobile */
@media (max-width: 768px) {

    .content {
        padding-right: 0;
    }

    .subpage-grid {
        display: block;
        margin: 30px 0;
    }

    .subpage-grid::before {
        left: 0;
        right: 0;
    }

    .subpage-item {
        width: 100%;
        padding: 30px 0;
        border: none !important;
    }

    /* Add a divider between items */
    .subpage-item + .subpage-item {
        border-top: 1px solid #033b80 !important;
    }

    .our-title {
        font-size: 36px;
    }

    /* Reset the circle positioning */
    .circle {
        transform: translateY(3px) !important;
    }

    .subpage-item:nth-child(1) .circle,
    .subpage-item:nth-child(3) .circle {
        transform: translateX(-7px) translateY(3px) rotate(270deg) !important;
    }

    .subpage-item:nth-child(2) .circle,
    .subpage-item:nth-child(4) .circle {
        transform: translateX(-7px) translateY(3px) rotate(270deg) !important;
    }

}