.customizeSection {
    --standard-left-margin		: 14%;
    --standard-juniper-orange	: #EA7600;
}
.customizeSection {
    position	: relative;
    width		: 100%;
    height		: 576px;
    overflow	: hidden;
	
}

.customizeBackground {
	position	: relative;
	width		: 100%;
	height		: 100%;
	object-fit	: cover;
	z-index		: -1; /* Puts image behind the content */
}

.customizeCopy {
    position	: absolute;
    top			: 45%;
    left		: 55%;
    transform	: translate(-50%, -50%); /* Centers the content */
    z-index		: 1; /* Puts content in front of the image */
	max-width	: 50%;
}

.customizeTitle{
	color: #FFFFFF!important;
	font-size: 30px !important;
}

.customizeText{
	color: #FFFFFF!important;
	margin-bottom:64px
}

.customizeButton{
	position: absolute;
    left: 45%;
	transform: translateX(-50%);	
	border: 2px solid #FFFFFF !important;
	border-radius: 5px;
	text-decoration: none; 

}

.customizeButton p{
	text-transform: uppercase;
	color:#FFFFFF !important;
	font-family: montserrat, sans-serif;
	margin-left: 64px;
	margin-top: 8px;
	margin-right: 64px;
	margin-bottom: 8px;
	white-space: nowrap; 

}
.customizeButton:hover {
    background-color: #FFFFFF !important;
}

.customizeButton:hover p {
    color: var(--standard-juniper-orange) !important;  /* Set this to whatever color you want the text to be when hovered */
}

.textAndImageWrapper {
    display: flex;
    justify-content: space-between; /* Adjust this as you see fit */
    align-items: flex-start; /* Align items at the top */
}

.rightImage {
    width: 30%; /* You can adjust the width as needed */
    margin-left: 20px; /* Add some space between the text and image */
}

/*------------------------------------------------------------------------------------------------*\

| xxs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {
	.customizeSection {
		height		: 800x;
	}
	.customizeTitle {
		font-size: 16px !important;
		text-align: center;
	}		
	
	.customizeText{
		display: none;
	}
	.customizeCopy {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		max-width: 90%;
		width: 90%;
	}
	.rightImage {
		display: none;
	}
	.customizeButton p {
		text-transform: uppercase;
		color: #FFFFFF !important;
		font-family: montserrat, sans-serif;
		margin-left: 32px;
		margin-top: 8px;
		margin-right: 24px;
		margin-bottom: 8px;
		white-space: nowrap;
	}

}

/*------------------------------------------------------------------------------------------------*\

| xs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 321px) and (max-width: 480px) {
	.customizeSection {
		height		: 800x;
	}
		
	.customizeCopy {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
		max-width: 90%;
		width: 90%;
	}
	.rightImage {
		display: none;
	}

}

/*------------------------------------------------------------------------------------------------*\

| sm breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 481px) and (max-width: 768px) {
	.customizeSection {
		height		: 800x;
	}
		
	.customizeCopy {
		position: absolute;
		top: 45%;
		left: 55%;
		transform: translate(-50%, -50%);
		z-index: 1;
		max-width: 80%;
		width: 80%;
	}
}

/*------------------------------------------------------------------------------------------------*\

| md breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	.customizeSection {
		height		: 800x;
	}
		
	.customizeCopy {
		position: absolute;
		top: 45%;
		left: 55%;
		transform: translate(-50%, -50%);
		z-index: 1;
		max-width: 60%;
		width: 60%;
	}
}

/*------------------------------------------------------------------------------------------------*\

| lg breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  /* Your CSS rules here */
}

/*------------------------------------------------------------------------------------------------*\

| xl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
  /* Your CSS rules here */
}

/*------------------------------------------------------------------------------------------------*\

| xxl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
  /* Your CSS rules here */
}

/*------------------------------------------------------------------------------------------------*\

| xxxl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1921px) {
  /* Your CSS rules here */
}