.wp-block-design-ocean-workflow-box {
    max-width: var(--wp--style--global--content-size);
    margin: auto;
}
.steps-cont > .steps {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 10px 20px;
    margin-top: 40px;
    margin-bottom: 50px;
}
.steps-cont > .steps > .even {
    width: 20%;
    text-align: center;
    padding: 25px 30px;
    color: var(--wp--preset--color--primary);
    font-size: 20px;
    font-weight: bold;
}
.steps-cont > .steps > .even.primary-color {
    background-color: var(--wp--preset--color--accent);
    /* background: linear-gradient(to bottom, #5697ff, #7018fe); */
    color: var(--wp--preset--color--primary);
    font-size: 21px;
    border-radius: 15px;
    line-height: 29px;
    width: 20%;
    box-shadow: 0px 0px 15px 0 rgb(0 0 0 / 30%);
    font-weight: bold;
    cursor: default;
}
.steps-cont > .steps > .odd {
    width: 24%;
    float: left;
    text-align: center;
    background-color: var(--wp--preset--color--primary);
    font-size: 22px;
    padding: 40px 30px;
    border-radius: 15px;
    color: var(--wp--preset--color--foreground);
    font-weight: bold;
    line-height: 30px;
    box-shadow: 0px 0px 15px 0 rgb(0 0 0 / 30%);
    cursor: default;
}
.steps-cont > .steps > .even > img{
    min-height: 100px;
    object-fit: cover;
}
.steps-cont > .steps > .odd > img{
    min-height: 130px;
    object-fit: cover;
}
.steps-cont > .steps > .odd > img {
    width: 100%;
    max-width: 130px;
    margin-bottom: 15px;
    box-shadow: 0px 0px 15px 0 rgb(0 0 0 / 50%);
    border-radius: 100%;
    border: 7px solid var(--wp--preset--color--foreground);
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.steps-cont > .steps > .odd > .step-manual-text, .steps-cont > .steps > .odd > .step-dashicon {
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}
.steps-cont > .steps > .even > img {
    width: 100%;
    max-width: 100px;
    margin-bottom: 15px;
    box-shadow: 0px 0px 7px 0 var(--wp--preset--shadow--buttons-shadow);
    border-radius: 100%;
    border: 5px solid var(--wp--preset--color--primary);
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.steps-cont > .steps > .even > .step-manual-text, .steps-cont > .steps > .even > .step-dashicon {
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}
.steps-cont > .steps > .odd > .step-manual-text, .steps-cont > .steps > .odd > .step-dashicon {
    font-weight: bold;
}
.steps-cont > .steps > .even > .step-manual-text, .steps-cont > .steps > .even > .step-dashicon {
    font-weight: bold;
}
.steps-cont > .steps > .even.direction-backward:after {
    content: "<-----------";
    display: block;
    margin-top: 5px;
}
.steps-cont > .steps > .even.direction-forward:after {
    content: "----------->";
    display: block;
    margin-top: 5px;
}
.steps-cont > .steps > .odd > .step-dashicon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.steps-cont > .steps > .even > .step-dashicon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.steps-cont > .steps > .even > .step-dashicon > span, .steps-cont > .steps > .odd > .step-dashicon > span {
    width: auto !important;
    height: auto !important;
}
.steps-cont > .steps > .even > .step-dashicon > span:before,
.steps-cont > .steps > .odd > .step-dashicon > span:before {
    font-size: inherit !important;
    width: inherit !important;
    height: inherit !important;
    line-height: inherit !important;
}
.steps-cont > .steps > .even.primary-color:hover {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--accent);
}
.steps-cont > .steps > .even.primary-color:hover > img {
    background-color: var(--wp--preset--color--accent);
}
.steps-cont > .steps > .even.primary-color:hover > .step-dashicon, .steps-cont > .steps > .even.primary-color:hover > img {
    border-color: var(--wp--preset--color--accent);
}
.steps-cont > .steps > .odd:hover > .step-dashicon, .steps-cont > .steps > .odd:hover > img {
    border-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
}
.steps-cont > .steps > .odd:hover {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
}
.steps-cont > .steps > .odd:hover > img {
    background-color: var(--wp--preset--color--primary);
}

@media (min-width: 1200px) and (max-width: 1360px) {
    
}

@media (min-width: 800px) and (max-width: 1370px) and (orientation: landscape) {
	.steps-cont > .steps > .odd {
		width: 24% !important;
		font-size: 22px !important;
		padding: 35px 15px !important;
	}
    .steps-cont > .steps > .odd > img {
        max-width: 100px !important;
        margin-left: auto;
        margin-right: auto;
        display: block;
        min-height: 100px !important;
    }
    .steps-cont > .steps > .even.primary-color {
        font-size: 16px !important;
        width: 20% !important;
        line-height: 22px;
    }
	.steps-cont > .steps > .even {
		width: 21.5% !important;
		padding: 25px 15px !important;
		font-size: 16px !important;
	}
    .steps-cont > .steps > .even > img {
        max-width: 70px !important;
        margin-left: auto;
        margin-right: auto;
        display: block;
        min-height: 70px !important;
    }
}
@media (min-width: 800px) and (max-width: 1370px) and (orientation: portrait) {
	.steps-cont > .steps > .odd {
		width: 24% !important;
		font-size: 22px !important;
		padding: 35px 15px !important;
	}
    .steps-cont > .steps > .odd > img {
        max-width: 100px !important;
        margin-left: auto;
        margin-right: auto;
        display: block;
        min-height: 100px !important;
    }
    .steps-cont > .steps > .even.primary-color {
        font-size: 16px !important;
        width: 20% !important;
        line-height: 22px;
    }
	.steps-cont > .steps > .even {
		width: 21.5% !important;
		padding: 25px 15px !important;
		font-size: 16px !important;
	}
    .steps-cont > .steps > .even > img {
        max-width: 70px !important;
        margin-left: auto;
        margin-right: auto;
        display: block;
        min-height: 70px !important;
    }
}

@media (max-width: 767px) {
	.steps-cont > .steps {
		display: block !important;
       	margin-top: 0;
	}
	.steps-cont > .steps > .even {
		width: 100% !important;
	}
	.steps-cont > .steps > .odd {
		width: 100% !important;
		float: none !important;
		padding: 25px 30px !important;
		font-size: 22px !important;
	}
	.steps-cont > .steps > .odd > img {
		margin-left: auto;
		margin-right: auto;
		display: block;
		max-width: 130px;
	}
	.steps-cont > .steps > .even > img {
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
}