.boxing-container {
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
}

.boxing-container-solid {
	background-color: #112E70;
	padding: 80px 0;
}

.boxing-img {
	max-width: 100%;
}

.boxing-profile {
	margin-bottom: 40px;
}

.boxing-profile a img {	
	transition: transform 0.3s ease;
}

.boxing-profile a:hover img {
	transform: scale(1.01);
}


/* hero */
.boxing-hero {
	position: relative;
	background: #112E70;
	padding: 40px 30px 0 30px;
	margin-bottom: 40px;
	text-align: center;
}

.boxing-hero h1 {
	position: relative;
	color: #ffffff;
	text-align: center;

	font-size: clamp(40px, 10vw, 120px);
	color: #ffffff;
	font-weight: 900;
	line-height: 1.2;
	margin: 40px 0 0 0;
}

.boxing-hero h1 span {
	color: #3DB3E7
}

.boxing-hero .boxing-header {
	position: relative;
	margin-top: -2%;
}

@media (max-width: 1280px) {
	.boxing-hero .boxing-header {
		margin-top: -3%;
	}
}
/* end hero */


/* jd power */
.boxing-jd {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 80px;
	margin-bottom: 40px;
	font-size: 14px;
}

.boxing-jd > div {
	flex: 1;
}

.boxing-jd p {
	margin-top: 10px;
}

@media (max-width: 568px) {
	.boxing-jd {
		flex-direction: column;
		gap: 20px;
	}
}
/* end jd power */


/* warranty */
.boxing-warranty {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 20px;
	padding: 40px 80px;
	margin-bottom: 40px;

	border: 2px solid #ffffff;
	color: #ffffff;
	border-radius: 25px;
}

.boxing-warranty > div {
	flex: 1;
}

.boxing-warranty > div h2 {
	font-size: clamp(40px, 5vw, 60px);
	color: #ffffff;
	font-weight: 900;
	line-height: 1.2;
}

.boxing-fr .boxing-warranty > div h2 {
	font-size: clamp(36px, 5vw, 48px);
}

.boxing-warranty > div h2 span {
	color: #3DB3E7;
}

.boxing-warranty > div:last-child {
	font-size: clamp(20px, 3vw, 26px);
	text-align: left;
}

@media (max-width: 1399px) {
	.boxing-warranty {
		gap: 80px;
		padding: 40px 40px;
	}
}

@media (max-width: 640px) {
	.boxing-warranty {
		flex-direction: column;
		gap: 20px;
	}

	.boxing-warranty > div:last-child {
		text-align: center;
	}
}
/* end .warranty */


.boxing_container {
	margin-bottom: 80px;
}

.boxing_two-col-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	margin-bottom: 40px;
}

.boxing_three-col-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 40px;
}

@media (max-width: 1399px) {
	.boxing_three-col-grid {
        grid-template-columns: repeat(2, 1fr);
    }

	.boxing_three-col-grid .boxing_col:last-child {
		grid-column: 1 / -1;
		justify-self: center;
		width: 50%;
	}
}

@media (max-width: 768px) {
    .boxing_two-col-grid,
	.boxing_three-col-grid {
        grid-template-columns: repeat(1, 1fr);
    }

	.boxing_three-col-grid .boxing_col:last-child {
        justify-self: stretch;
        grid-column: auto;
        width: 100%;
	}
}

.boxing_four-col-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px 20px;
}

@media (max-width: 1023px) {
    .boxing_four-col-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .boxing_col:has(.boxing_box_rob) {
        order: 1;
    }

    .boxing_col:nth-child(10),
    .boxing_col:nth-child(11) {
        order: 2;
    }
}

@media (max-width: 768px) {
    .boxing_four-col-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .boxing_col:nth-child(10),
    .boxing_col:nth-child(11) {
        order: 0;
    }
}

@media (max-width: 568px) {
    .boxing_four-col-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.boxing_col {
	display: flex;
	flex-direction: column;
}

.boxing_box {
	position: relative;
	display: flex;
	flex: 1; /* Makes all boxes equal height */
	background: #ffffff;
	padding: 40px 0 40px 30px;
	color: #112E70;
	border-radius: 25px;

	min-height: 400px;
}

.boxing_box.boxing_box_rob {
	background: #112E70 url('https://legendarydurability.ca/boxing-week-july-2026/reliable-rob.png');
	background-size: cover;
	background-position: left top;
	border: 2px solid #ffffff;
	color: #ffffff;
	padding: 40px 30px;
}

@media (max-width: 568px) {
	.boxing_box { min-height: 350px; }
}

.boxing_box_content {
	flex: 1;
	display: flex;
	align-items: end;
	flex-wrap: wrap;
}

.boxing_box_img {
	position: absolute;
	top: 30px;
	right: 30px;
}

.boxing_box h3 {
	font-size: clamp(24px, 3vw, 28px);
	line-height: 1;
	color: #112E70;
	font-weight: 900;
	margin: 0;
	padding: 0;
}

.boxing-fr .boxing_box h3 {
	font-size: clamp(24px, 3vw, 26px);
}

.boxing_box h3 em {
	font-size: clamp(18px, 3vw, 20px);
	color: #3DB3E7;
	font-weight: 400;
	margin-top: 10px;
	font-style: normal;
	display: block;
}

.boxing_box h3 span {
	font-size: clamp(50px, 4vw, 70px);
	color: #3DB3E7;
	display: block;
}

.boxing-fr .boxing_box h3 span {
	font-size: clamp(50px, 4vw, 60px);
}

.boxing_box.boxing_box_rob h3 {
	color: #ffffff;
	font-size: clamp(34px, 4vw, 44px);
	text-align: right;
}

.boxing_box p {
	font-size: clamp(18px, 3vw, 20px);
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 20px 0;
	padding: 0;
}

.boxing-fr .boxing_box p {
	font-size: clamp(18px, 3vw, 18px);
}

.boxing_col .btn {
    background-color: #112E70;
    color: #fff;
    font-weight: 500;
    padding: 12px 30px;
    margin: 0 auto;
    text-transform: uppercase;
    font-size: 16px;
    display: inline-block;
    white-space: normal;
}

.boxing_col .btn:hover,
.boxing_col .btn:focus {
	background-color: #073b74;
}

@media (max-width: 1399px) {
	.boxing_box {
		flex-direction: column-reverse;
		padding: 40px 30px;
	}

	.boxing_box_img {
		position: relative;
		top: auto;
		right: auto;
		flex: 1;
		margin-bottom: 20px;
	}
}

@media (max-width: 568px) {
	.boxing_box_img {
		position: absolute;
		top: 30px;
		right: 30px;
		margin: 0;
		flex: none;
	}
}



.boxing_two-col-grid .boxing_col,
.boxing_three-col-grid .boxing_col {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.boxing_two-col-grid .boxing_box,
.boxing_three-col-grid .boxing_box {
	position: relative;
	display: flex;
	flex: 1; /* Makes all boxes equal height */
	background: #ffffff;
	padding: 40px 30px 40px 40px;
	color: #000000;
	border-radius: 25px 25px 0 0;

	min-height: auto;
}

@media (max-width: 568px) {
	.boxing_two-col-grid .boxing_box,
	.boxing_three-col-grid .boxing_box { min-height: auto; }
}

.boxing_two-col-grid .boxing_box_content,
.boxing_three-col-grid .boxing_box_content {
	align-items: normal;
}

.boxing_two-col-grid .boxing_box_img,
.boxing_three-col-grid .boxing_box_img {
	position: relative;
	top: auto;
	right: auto;

	flex: 1;
}

.boxing_two-col-grid .boxing_box_img img,
.boxing_three-col-grid .boxing_box_img img {
	position: absolute;
	top: 0;
	left: 0; right: 0;
	z-index: 1;
}

.boxing_two-col-grid .boxing_box h3,
.boxing_three-col-grid .boxing_box h3 {
	color: #000000;
	margin: 15px 0;
}

.boxing_two-col-grid .boxing_box ul,
.boxing_three-col-grid .boxing_box ul {
	margin-left: 10px;
	margin-bottom: 15px;
}

.boxing_box-sale {
	position: relative;
	background: #3DB3E7;
	padding: 20px 30px 20px 30px;
	border-radius: 0 0 25px 25px;
}

.boxing_box-sale p {
	font-size: clamp(18px, 3vw, 20px);
	font-weight: 600;
	color: #112E70;
	margin-bottom: 5px;
}

.boxing_box-sale .strikethrough {
	font-weight: 400;
	font-style: normal;
	text-decoration: line-through;
	margin-right: 5px;
}

.boxing_box-sale span {
	font-size: clamp(50px, 4vw, 60px);
	font-weight: 900;
	color: #ffffff;
	line-height: 1;
	display: block;
}

.boxing-fr .boxing_box-sale span {
	font-size: clamp(44px, 4vw, 54px);
}

.boxing_box-sale .btn {
	position: absolute;
	bottom: 25px;
	right: 40px;
}

@media (max-width: 1399px) {
	.boxing_two-col-grid .boxing_box_img,
	.boxing_three-col-grid .boxing_box_img {
		text-align: center;
	}

	.boxing_two-col-grid .boxing_box_img img,
	.boxing_three-col-grid .boxing_box_img img {
		position: relative;
		top: auto;
		left: auto; right: auto;
		width: 300px;
		margin-bottom: 20px;
	}
}

@media (max-width: 568px) {
	.boxing_two-col-grid .boxing_box_img img,
	.boxing_three-col-grid .boxing_box_img img {
		width: 200px;
	}
}




.reorder-on-mobile {
	display: flex;
	flex-wrap: wrap;
}

.mobile-order-1 {
	order: 2;
}
.mobile-order-2 {
	order: 1;
}

@media (max-width: 768px) {
	.mobile-order-1 {
		order: 1;
	}
	.mobile-order-2 {
		order: 2;
	}
}