@charset "utf-8";
body {
    
    background-color: #ffffff;
}
.img-div h4 {
	position: absolute;
	margin: 20px;
}
.card-img-top-1 {
	width: 300px;
}
.card-img-top-2 {
width: 230px;
object-fit: scale-down;
}
.card-img-top-i {
	width: 200px !important;
	height: 180px;
}
.card-img-top {
width: 250px !important;
height: 180px;
}
.brands {
	margin-bottom: 15px;
}
.card-title {
	position: relative;
	background: #264653;
	color: white;
	width: 100%;
	bottom: 0px;
	margin-bottom: 0px;
	padding: 8px;
	text-align: center;
	border-radius: 0 0 5px 5px;
	
}
.col-md-4 .card a {
    text-decoration: none;
    color: #264653;
}
.logo-btm {
    position: relative;
	bottom: 20px;
	margin-left: 2%;
	
	
}
.btn-btm {
    position: relative;
	bottom: 55px;
	margin-right: 2%;
	
}
.btn{
	background-color: #000000;
	border: #8e161b;
	
}
.btn:hover {
	background-color: #264653;
	border: #2e231b;
	
}


.jumbotron.jumbotron-fluid.text-center {
    background-color: #264653;
	color: white;
}
.radiofloat{
	float: left;
	
}

div.clear
{
    clear: both;
}

div.product-chooser{
    
}

    div.product-chooser.disabled div.product-chooser-item
	{
		zoom: 1;
		filter: alpha(opacity=60);
		opacity: 0.6;
		cursor: default;
	}

	div.product-chooser div.product-chooser-item{
		
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		padding: 5px;
		
	}
	
	div.product-chooser div.product-chooser-item.selected{
		background-color: #274653;
		padding: 5px;
		filter: alpha(opacity=100);
		opacity: 1;
	}
	
		div.product-chooser div.product-chooser-item img{
			padding: 0;
		}
		
		div.product-chooser div.product-chooser-item input{
			position: absolute;
			left: 0;
			top: 0;
			visibility:hidden;
		}
.vertical-scrollable {
            position: relative;
            overflow-y: scroll;
			overflow-x: hidden;
			margin: 0px;
			padding: 0px;
			height: 550px;
        }
.row{
	margin: 5px;
	
}
.bg-txt, h6{
	background-color: #264653;
	color: white !important;
	text-decoration: none;
	padding: 5px;
}
.wrap-chkbx {
	display: block;
  position: relative;
  cursor: pointer;
  
}


/* The container */
.wrap-chkbx {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.card input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  height: 25px;
  width: 25px;
	margin: 2px;
}


/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #274653;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.card input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.card .checkmark:after {
  left: 10px;
  top: 4px;
  width: 5px;
  height: 15px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ver-bg {
	
	background-color: #274653 !important;
	z-index: 1;
}

.card img {
	
	width: 100%;
	
}
.img-pro img {
	object-fit: contain;
	width: 150px;
	height: 150px;
	margin-top: 10px;
	margin-bottom: 10px;
	
}
.m-proimg {
	object-fit: contain;
	margin: 0px;
	padding: 0px;
	width: 100%;
	background-color: white;	
	height: 680px;	
}

.form-bg {
	background-color: #274653;
	border-radius: 40px;
}
form {
	width: 100%;
	text-align: center;
	color: white;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5%;
	margin-bottom: 5%;
	
}
.form-btn {
	
	color: #274653;
	background-color: white;
	font-weight: bolder;
}
#emailHelp {
	color: white !important;
}
.result {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.result img {
	width: 20%;
	margin-bottom: 50px;
}
.result h1 {
	color: #274653;
	font-weight: bolder;
	font-size: 50pt;
}
.thankyou {
	font-size: 70pt;
}

@media only screen and (max-width: 375px) and (min-width: 300px){

	.sliderLabel {
		font-size: 10px !important;
		font-weight: 600;
		padding: 5px;
	}
	
	.col-md-3 {
		width: 50%;	
	}
	.col-md-6 {
		padding: 0px;
	}
	.container {
		padding: 0px;
	}
	.vertical-scrollable {
		height: 270px;	
	}
	.product-chooser-item {
		/* width: 25% !important; */
		object-fit: contain;
	}	
	.img-pro img {
	object-fit: contain;
	width: 21%;
	margin: 5px;
	  float: left;
}
	.m-proimg {
	object-fit: contain;
	width: 100%;
		margin-top: 15px;
		margin-bottom: 15px;
	height: auto;
		clear: both;
		
}
	.img-div {
		border: solid grey 1px;
		background-color: #264653;
	}
	.display-4 {
		font-size: 20pt;
		margin: 15px;
	}
	.lead {
		margin: 10px;
		font-size: 10pt;
	}
	.col-md-4 {
		padding-bottom: 20px;
	}
	form {
	width: 90%;
	}
	.thankyou {
	font-size: 50pt;
	}
	.result img {
		width: 50%;
	}
	.logo-home img {
		width: 40%;
	}
}

@media only screen and (max-width: 440px) and (min-width: 376px) {
	
	.sliderLabel {
		font-size: 10px !important;
		font-weight: 600;
		padding: 5px;
	}
	.col-md-3 {
		width: 50%;
	}
	.col-md-6 {
		padding: 0px;
	}
	.vertical-scrollable {
		height: 475px;
		
	}
	.product-chooser-item {
		/* width: 25% !important; */
		object-fit: contain;
		}
	.img-pro img {
	object-fit: contain;
	width: 21%;
	margin: 5px;
	  float: left;
}
	.m-proimg {
	object-fit: contain;
	width: 100%;
		margin-top: 15px;
		margin-bottom: 15px;
	height: auto;
		clear: both;
		
}
	.img-div {
		border: solid grey 1px;
		background-color: #264653;
	}
	.display-4 {
		font-size: 20pt;
		margin: 15px;
	}
	.lead {
		margin: 10px;
		font-size: 10pt;
	}
	.col-md-4 {
		padding-bottom: 20px;
	}
	form {
	width: 90%;
	}
	.thankyou {
	font-size: 50pt;
	}
	.result img {
		width: 50%;
	}
	.logo-home img {
		width: 40%;
	}
}


@media only screen and (max-width: 767px) and (min-width: 441px) {

	.sliderLabel {
		font-size: 10px !important;
		font-weight: 600;
		padding: 5px;
	}
	.col-md-3 {
		width: 50%;
		
	}
	.col-md-6 {
		padding: 0px;
	}
  .img-pro img {
	object-fit: contain;
	width: 21%;
	margin: 5px;
	  float: left;
}
	.m-proimg {
	object-fit: contain;
	width: 100%;
		margin-top: 15px;
		margin-bottom: 15px;
	height: auto;
		clear: both;
		
}
	.img-div {
		border: solid grey 1px;
		background-color: #264653;
	}
	.display-4 {
		font-size: 20pt;
		margin: 15px;
	}
	.lead {
		margin: 10px;
		font-size: 10pt;
	}
	.col-md-4 {
		padding-bottom: 20px;
	}
	form {
	width: 90%;
	}
	.thankyou {
	font-size: 50pt;
	}
	.result img {
		width: 50%;
	}
	.logo-home img {
		width: 40%;
	}
	.product-chooser-item {
		width: 25% !important;
		object-fit: contain;
	}
	.vertical-scrollable {
		height: 400px;
		
	}
	
	footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		
	}
	.thickness {
		position: fixed;
		width: 100%;
		bottom: 120px;
	}

}

@media only screen and (min-width: 767px) {
	.noscroll {
		overflow-y: hidden;
	}
	
}
.submit-btn {
	background-color: #151515;
	color: white;
	margin-top: 20px;
	padding: 15px 30px 15px 30px;
	border-radius: 100px;
	border: #2E2E2E solid 2px;
}
.submit-btn:hover {
	border: #2E2E2E solid 2px;
}
.chklabel {
	margin-top: 10px;
}
.file-upld{
	height: auto !important;
}
.option-image-1 {
	width: 200px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease-in-out;
  }
  
  .option-image-1:hover {
	transform: scale(1.05);
  }
  
  .image-title {
	color: #fff;
	font-size: 14px;
	margin-top: 10px;
  }

  .tagline {
	color: #fff;
  }
  
  .image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
  }
  
  .option-image {
	max-width: 130px;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease-in-out;
  }
  
  .option-image:hover {
	transform: scale(1.05);
  }
    
  
  /* Custom CSS for styling */
.section-heading {
	margin-top: 30px;
	margin-bottom: 20px;
	text-align: center;
	color: #333;
  }
  
  .standard-windows-container {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 20px;
  }
  .sample-box-1 {
	width: 550px;
	height: 250px;
	border: 2px solid #000;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	position: relative;
  }
  .sample-box {
	width: 250px;
	height: 300px;
	border: 2px solid #000;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	position: relative;
  }
  
  
  .sample-text {
	position: absolute;
	color: #000;
	font-weight: bold;
	text-align: center;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  }
  
  .measurement-label {
	font-weight: bold;
  }
  
  .sample {
	width: 100px;
	height: 100px;
	background-color: #ccc;
	margin: 20px auto;
  }
  
  .measurement-input {
	width: 200px;
	padding: 10px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
  }
  
  /* Form Layout CSS */
  .form-row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2px;
  }
  
  .form-group {
	flex: 0 0 50%; /* Each field takes up half of the row */
	margin-bottom: 0.05rem;
	padding-right: 15px;
	text-align: left;
	padding-left: 15px;
  }
  
  .form-group label {
	display: block;
	color: #000;
	font-weight: 600;
	font-size: 15px;
	text-align: left; /* Align labels to the left side */
	margin-bottom: 0.5rem;
  }
  
  .form-control {
	display: block;
	width: 100%;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.1rem 0.5rem;
	font-size: 1rem;
	line-height: 1.0;
	color: #495057;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
	border-radius: 0.25rem;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .form-check-label {
	margin-bottom: 0;
  }
  
  .price-heading {
	font-size: 54px;
	margin-bottom: 20px;
  }
  
  .price {
	font-size: 46px;
	color: #ffffff; /* Teal color */
  }
  .item-name {
	text-align: center;
	color:#000;
	font-size: 16px;
	font-weight: 600;
  }




  #sliderContainer {
	width: 80%;
	margin: auto;
}
#slider {
	width: 100%;
}
#sliderLabels {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}
.sliderLabel {
	font-size: 14px;
	text-align: center;
	flex-grow: 1;
}
#imageContainer {
	display: flex;
	justify-content: center;
	margin-top: 50px;
}
.doorImage {
	max-width: 100%;
	height: auto;
	display: none; /* Initially hide all images */
}

.option-image {
	width: 100px;
	height: auto;
	cursor: pointer;
	margin-bottom: 10px;
	margin-right: 10px;
}

.option-image.selected {
	border: 2px solid #007bff;
}