/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Printshop
Version:	1.1
Last change:	1/12/2015 [fixed Float bug, vf]
Assigned to:	Netbase
Primary use:	admin 
-------------------------------------------------------------------*/
@import "bootstrap.min.css";
@import "font-awesome.min.css";
@import "owl.carousel.css";
/*@import "subscribe-better.css";*/
@import "owl.transitions.css";
@import "theme-default.css";
/*@import "newsletter.css";*/
@import "responsive.css";


/* Tooltip container */
.tooltip2 {
    position: relative;
    top: 10px;
    color: #fff;
    display: inline-block;
    border-bottom: 1px dotted #fff; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip2 .tooltiptext2 {
    visibility: hidden;
    width: 230px;
    background-color: #666666;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip2:hover .tooltiptext2 {
    visibility: visible;
}

.review-container .rowm{display: none;}

.padding-zero{
  padding: 0;
}

/* new list */
.styled-list li{
  position: relative;
  list-style-type: none;
}

.styled-list li:before{
  content: "\2714";
  padding: 0 10px 0 0;

}

/*.split-white-green{
  background-image: -webkit-linear-gradient(left, #39b54a, #39b54a 49%, #fff 49%);
  background-image: linear-gradient(to right, #39b54a, #39b54a 49%, #fff 49%);
}

.split-green-white{
  background-image: -webkit-linear-gradient(left, #fff, #fff 49%, #39b54a 49%);
  background-image: linear-gradient(to right, #fff, #fff 49%, #39b54a 49%);
}*/

.green-background{
    background: #39b54a;
    padding: 50px 0;
}

.green-background h1,
.green-background h2{
    color: #fff!important;
    text-align: center;
}

.green-background h2{
  margin-bottom: 0;
}

.white-background{
  background: #fff;
}

.green-left h1,
.green-left h2,
.green-left p,
.green-left ul li{
  color: #fff!important;
}

.green-left ul,
.green-right ul {
    color: #fff;
    list-style-type: none; /* Remove default bullet */
    padding-left: 15px;
    margin: 20px 0;
    position: relative;
}

.green-left ul li,
.green-right ul li {
    position: relative;
    padding-left: 25px;
    margin: 10px 0;
}

.green-left ul li::before,
.green-right ul li::before {
    content: "\2713"; /* Unicode for check mark */
    color: #ffffff; /* Green check mark */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    line-height: 1.2;
}

.green-left h1{
  font-size: 38px;
}

.green-left p{
  margin-bottom: 20px!important;
}

.green-left{
  padding: 50px 50px 50px 30px;
  margin-top: 25px;
}

.green-right{
  padding: 50px 0 0;
  margin-top: 25px;
}

.white-left{
  padding: 0px 50px 50px 30px;
  margin-top: 25px;
}
.green-left,
.green-right{
  background: #39b54a;
  margin-bottom: 50px;
  line-height: 1.2;
}

.green-left a,
.green-right a {
	color: #a2ffc3 !important;
	text-decoration: underline !important;
	
}

.green-left a:hover,
.green-right a:hover {
	color: #a2ffc3 !important;
	text-decoration: none !important;
}

.white-right{
  padding: 50px 0 0;
  margin-top: 25px;
}
.any-questions{
  padding: 50px 0;
/*  border-top: 2px solid #e1e1e1;
*/}
.any-questions p{
  font-size: 26px;
  text-align: center;
  margin: 0;
  padding: 5px 10px;
}

.any-questions button{
  font-size: 26px;
  background: #39b54a;
  color: #fff;
  padding: 5px 10px;
}

.any-questions .col-md-2{
  display: flex;
  justify-content: center;
}

.small-caption{font-size: 12px; margin: 5px 0 0;}

.google-header{
  float: left;
  margin: 0 10px 0 0;
  color: #39b54a;
}

.home-top{
  padding: 0px 50px 50px 30px;
  font-size: 16px;
  text-align: center;
}

#contact h1 {
	margin: 10px 0 10px;
	font-size: 24px;
	color: #333333;
}

#contact hr {
	color: inherit;
	height: 0;
	margin: 6px 0 6px 0;
	padding: 0;
	border: 1px solid #d9d9d9;
	border-style: none none solid;
}

#contact {
	display: block;
	width: 650px;
	margin: 50px auto;
	padding: 35px;
	border: 1px solid #cbcbcb;
	background-color: #FFF;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
	-webkit-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
	-moz-box-shadow: 0 2px 5px rgba(50, 50, 50, 0.1);
}

.contact-map{
	margin-top:25px !important;
}

/* Form style */

mark.validate {
	display: inline-block;
	margin: 12px 0 0 10px;
	width: 16px;
	height: 16px;
	background: transparent none;
}

mark.valid {
	background: url(../img/success.gif) no-repeat top left;
}

mark.error {
	background: url(../img/error.gif) no-repeat top left;
}

#contact label {
	display: inline-block;
	float: left;
	height: 1em;
	line-height: 1em;
	padding: 6px 0 0;
	width: 155px;
	font-size: 1.4em;
	margin: 5px 0;
	clear: both;
}

::-webkit-input-placeholder {
	color: #444;
	opacity: 1;
	font-size: 16px;
}

:-moz-placeholder {
	/* Firefox 18- */
	color: #444;
	opacity: 1;
	font-size: 16px;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: #444;
	opacity: 1;
	font-size: 16px;
}

:-ms-input-placeholder {
	color: #444;
	opacity: 1;
	font-size: 16px;
}



#contact label small {
	font-size: 0.75em;
	color: #ccc;
}

#contact label.verify {
	padding: 0;
	margin: 2px 10px 2px 0;
	width: 145px;
	text-align: right;
}

#contact label.verify img {
	padding: 1px;
	border: 1px solid #cccccc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#contact input,
#contact textarea,
#contact select {

	color: #444;
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;

	box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 0);
}

#contact select {
	width: 232px;
	margin: 8px 0;
}

#contact input#verify {
	width: 55px;
}

#contact textarea {
	width: 414px;
}

#contact input:focus,
#contact textarea:focus,
#contact select:focus {
	border: 1px solid #ddd;
	background-color: #fff;
	color: #444444;
	outline: none;
	position: relative;
	z-index: 5;

	box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
	-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);

	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);

	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
}

#contact input.error,
#contact textarea.error,
#contact select.error {
	box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
	-moz-box-shadow: 0 0 5px rgba(204, 0, 0, 0.5);
	border: 1px solid #faabab;
	background: #fef3f3
}

#contact input.submit {
	width: auto;
	cursor: pointer;
	position: relative;
	border: 1px solid #282828;
	padding: 6px 16px;
	text-decoration: none;
	font-size: 1.5em;

	background: -moz-linear-gradient(center bottom,
			rgb(60, 60, 60) 12%,
			rgb(85, 85, 85) 100%);

	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);

	text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}

#contact input.submit:hover {
	background: #282828 !important;
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
}

#contact input.submit:active,
#contact input.submit:focus {
	top: 1px;
}

#contact input[type="submit"][disabled] {
	background: #888;
}

#contact fieldset {
	padding: 20px;
	border: 1px solid #eee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin: 0 0 20px;
}

#contact legend {
	padding: 7px 10px;
	font-weight: bold;
	color: #000;
	border: 1px solid #eee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	margin-bottom: 0 !important;
	margin-bottom: 20px;
}

#contact input[type="checkbox"] {
	width: 20px;
	margin-top: 11px;
}

#contact span.required {
	font-size: 13px;
	color: #ff0000;
}

/* Select the colour of the * if the field is required. */

#message {
	margin: 1em 0;
	padding: 0;
	display: block;
	background: transparent none;
}

.error_message {
	display: block;
	height: 22px;
	line-height: 22px;
	background: #FBE3E4 url('../img/error.gif') no-repeat 10px center;
	padding: 3px 10px 3px 35px;
	color: #8a1f11;
	border: 1px solid #FBC2C4;
	-webkit-border-radius: 5px;
}

.loader {
	padding: 0 10px;
}

#contact #success_page h1 {
	background: url('../img/success.gif') left no-repeat;
	padding-left: 22px;
}

#contact input[type="radio"] {
	width: 20px;
	margin-top: 0px;
}

#contact .radio {
	width: 100%;
}

acronym {
	border-bottom: 1px dotted #ccc;
}

.btnx {
	border-radius: 3px;
	color: #fff !important;
	background: #39b54a !important;
	display: inline-block;
	font-weight: 400;
	padding: 6px 15px 9px;
	text-transform: uppercase;
	font-size: 16px;
}

.btnx:hover {
	color: #39b54a !important;
}

@media (min-width: 700px) {
	#table_style {
		background: #FFF;
		padding: 50px;
		margin: auto;
		width: 50%;
		text-align: center;
	}
}

@media (max-width: 700px) {
	#table_style {
		background: #FFF;
		padding: 50px;
		margin: auto;
		width: 100%;
		text-align: center;
	}
}

#table_style table {
	background: #fff;
	width: 100%;
}

#table_style td {
	padding: 5px 10px;
	border: 1px solid #39b54a;
	color: #000;
}

#table_style .rowkey {
	background: #39b54a;
	color: #fff;
	font-weight: bold;
}

#table_style .left {
	font-weight: bold;
	width: 30%
}

#table_style .right {
	width: 70%
}

#express_delivery {
	background: #e31717;
	padding: 20px;
}

.formCodeBlock {
	padding-top: 10px;
	padding-bottom: 10px;
}

.quoteHeader {
	font-size: 200%;
	margin-bottom: 20px !important
}

section.product-gallery {
	padding-top: 55px;
	padding-bottom: 25px;
	margin-bottom: 50px;
}

section.product-gallery h3 {
	font-size: 12px;
	text-align: center;
}

section.home-blog {
	background-size: cover;
	padding: 60px 0;
}

.product-tiles {
	padding-top: 25px;
	padding-bottom: 25px;
	margin-bottom: 50px;
	margin-left: 10px;
	margin-right: 10px;
	border: 1px solid #39b54a;
}

.product-tiles-spacing {
	padding-bottom: 30px;
}

.product-tiles h2 {
	font-size: 25px;
	text-align: center;
}

.product-tiles h3 {
	font-size: 18px;
	text-align: center;
	line-height: 1.6;
}

.product-tiles button {
	font-size: 18px;
	background: #39b54a;
	color: #fff;
	padding: 10px 10px;
	margin-top: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.product-detail .button {
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
	width: 70%;
	background: #39b54a;
	color: #fff;
	padding: 10px 10px;
	margin-top: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.product-detail .red-box {
	font-size: 16px;
	width: 70%;
	background: #DA5244;
	color: #fff;
	padding: 10px 10px;
	margin-top: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.product-detail .text {
	font-size: 14px;
	width: 70%;
	color: rgb(0, 0, 0);
	padding: 10px 10px;
	margin-top: 15px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.product-detail img {
	width: 70%
}

.product-grid img {
	width: 80%;
}

.watermark-container {
	position: relative;
	text-align: center;
}

.watermark {
	font-size: 320%;
	color: #EDEDED;
	font-family: sans-serif;
	font-weight: bold;
	position: absolute;
	top: 45%;
	left: 20%;
	transform: rotate(-30deg);
}

@media (min-width: 1200px) {
	.watermark {
		font-size: 320%;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.watermark {
		font-size: 270%;
	}
}

@media (min-width: 768px) and (max-width: 991px) {
	.watermark {
		font-size: 200%;
		left: 25%;
	}
}

@media (max-width: 767px) {
	.watermark {
		font-size: 13vw;
		left: 22%;
	}
}

@media (min-width: 992px) {
	.watermark-product-page {
		left: 25%;
	}
}

.sidebar-title {
	color: #FFFFFF !important;
}

.blog {
	margin: 0 0 80px 0;
}

.blog {
	Padding: 0 0 0 20px;
}

.blog ul {
	padding: 5px 0 10px 0;
}

.blog li {
	margin-left: 20px;
	list-style-type: disc;
}

.blog h2 {
	margin: 30px 0 15px 0;
}

.blog h3 {
	margin: 15px 0 5px 0;
}

.blog a {
	font-weight: 500;
}

/*.matched-row{
	display: flex;
}*/

.matched-column {
	flex: 1;
}

.site-column {
	min-height: 120px;
}

/* Style the Image Used to Trigger the Modal */
#myImg {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
}

#myImg:hover {
	opacity: 0.7;
}

/* The Modal (background) */
.modal {
	display: none;
	/* Hidden by default */
	position: fixed;
	/* Stay in place */
	z-index: 101;
	/* Sit on top */
	padding-top: 100px;
	/* Location of the box */
	left: 0;
	top: 0;
	width: 100%;
	/* Full width */
	height: 100%;
	/* Full height */
	overflow: auto;
	/* Enable scroll if needed */
	background-color: rgb(0, 0, 0);
	/* Fallback color */
	background-color: rgba(0, 0, 0, 0.9);
	/* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content,
#caption {
	animation-name: zoom;
	animation-duration: 0.6s;
}

@keyframes zoom {
	from {
		transform: scale(0)
	}

	to {
		transform: scale(1)
	}
}

/* The Close Button */
.close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover,
.close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
	.modal-content {
		width: 100%;
	}
}

/* Move reCAPTCHA v3 badge to the left */

.grecaptcha-badge {
	width: 70px !important;
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	left: 4px !important;
}

.grecaptcha-badge:hover {
	width: 256px !important;
}


section.white-pt {
	background: #fbfbfb;
	padding-bottom: 20px;
	padding-top: 50px;
}

section.white {
	background: #fbfbfb;
	padding-bottom: 20px;
}

section.white a {
	color: #39b54a;
	text-decoration: none;
}

section.white a:hover {
	color: #37a047;
	text-decoration: underline;
}

section.grey {
	padding-top: 20px;
}

/* Page Title */

.page-title {
	background: #39b54a;
	padding: 0;
}

.page-title h1 {
	color: #fff !important;
	margin-bottom: 0;
	font-size: 200%;
}

/* Questions */

.questions {
	background: #39b54a;
	padding: 10px 0;
}

.questions p {
	color: #fff !important;
	font-size: 20px;
	margin-bottom: 0;
	padding-top: 9px;
}

.questions-button {
    display: inline-block; /* match the legacy <button> box (we render an <a>) */
    background-color: #ffffff; /* White background */
    color: #39B54A; /* Green text to match the background */
    border: 2px solid #39B54A; /* Green border */
    padding: 10px 20px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}

/* Hover effect */
.questions-button:hover {
    background-color: #39B54A; /* Green background on hover */
    color: #ffffff; /* White text on hover */
}

/* Focus effect */
.questions-button:focus {
    outline: none;
    box-shadow: 0 0 5px #39B54A;
}

/* Primary Content */

.primary-content {
	padding-top: 50px;
}

.primary-content p {
	font-size: 15px;
}

.primary-content h3 {
	margin: 20px 0 10px 0;
}

/* Lists */

.primary-content ol {
	list-style-type: decimal;
	padding-left: 35px;
	margin: 20px 0;
}

.primary-content ol li {
	margin: 0;
	padding: 5px 0;
}

.primary-content ol ol {
	list-style-type: lower-alpha;
	margin-left: 20px;
	margin-top: 10px;
}

.primary-content ul {
    list-style-type: none; /* Remove default bullet */
    padding-left: 15px;
    margin: 20px 0;
    position: relative;
}

.primary-content ul li {
    position: relative;
    padding-left: 25px;
    margin: 10px 0;
}

.primary-content ul li::before {
    content: "\2713"; /* Unicode for check mark */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    line-height: 1.2;
}

.primary-content .print-icon p {
	font-size: 64px
}

/* Green Box */

.green-box {
	background: #39B54A;
	padding: 30px 30px;
	margin-bottom: 50px;
}

.green-box .row {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px dashed #fff;
}

.green-box .row {
	margin-bottom: 20px !important;
	padding-bottom: 20px !important;
	border-bottom: 1px dashed #fff;
}

.green-box a {
	color: #a2ffc3 !important;
	text-decoration: underline !important;
}

.green-box a:hover {
	color: #a2ffc3 !important;
	text-decoration: none !important;
}

.green-box p,
.green-box label,
.green-box h2 {
	color: #fff !important;
}

.green-box p {
	font-size: 15px;
}

/* Reveiws */

.reviews {
	padding: 50px 0 50px 0;
}

/* Trade Banner */

.trade-banner {
	padding-top: 25px;
}

/* Blog List */

.primary-content ul.blog-list {
    list-style-type: none !important; /* Remove default bullet */
    padding-left: 0px;
    margin: 20px 0;
    position: relative;
}

.primary-content ul.blog-list li.blog-list {
    position: relative;
    padding-left: 0px;
    margin: 10px 0;
}

/* Ensure no bullets and proper positioning */
.primary-content ul.blog-list li::before {
    content: ''; /* No content, just remove bullets */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
    line-height: 1.2;
}

.slick-slide{
	max-height: 450px !important;
}

.top-links p{
	color: #fff;
	font-size: 15px;
	margin-bottom: 0;
  }

  #top-header{
	background-color: #39b54a;
	padding: 7px 0 30px;
	height: 2px!important; 
  }

  h4 {
	font-weight: normal;
  }

 .footer-main h2 {
	border-bottom: 0px solid #e1e1e1;
 }

section.home-other-sites {
	background-color: #f0f0f0;
}

 .home-other-sites .row {
    display: flex;
    flex-wrap: wrap;
}

.home-other-sites .col-md-3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px; /* To ensure spacing between rows */
}

.home-other-sites .col-md-3 h4,
.home-other-sites .col-md-3 p,
.home-other-sites .col-md-3 a {
    margin-bottom: 15px;
}

.home-other-sites .col-md-3 a {
    margin-top: auto; /* Push the anchor tag with the image to the bottom */
}

.home-other-sites .block-title-w {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

.home-other-sites .block-title-w .block-title {
    margin-bottom: 10px;
}

.home-other-sites .block-title-w .icon-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-other-sites .block-title-w .icon-title span {
    width: 50px;
    height: 1px;
    background-color: #000;
    margin: 0 10px;
}

.home-other-sites .block-title-w .icon-title i {
    font-size: 1.5em;
    color: #000;
}

.cat-spacer {
	margin-top: 50px;
}

.tt{
	margin: 2%;
	width: 46%
}

.lgreen{
	background: #c2ecc8;
	color: #000000;
}

.lgreen p, h2, ul li {
	color: #000000 !important;
}

.lgreen a {
	color: #696969 !important;
}

.lgreen ul li {
	color: #000000 !important;
}

.lgreen ul li::before {

    color: #000000 !important;/
}

.matched-box {
	height: 566px;
}





/***************** Quote Form Main Styles *****************/

.ncr-container-modifier {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Overall form container */
.ncr-form-container {
    background-color: #ffffff; /* White background */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 3px; /* Rounded corners */
    padding: 40px;
    margin: 20px auto;
    box-sizing: border-box; /* Ensure padding doesn't increase total width */
}

/* Styling for the section headers and text */
.ncr-section {
    text-align: center; /* Center-align all text within sections */
    padding: 40px 0;
}

.ncr-section-no-padding {
    padding: 0 0 40px 0;
}

.ncr-section h2 {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.ncr-section p {
    font-size: 16px;
    color: #9a9a9a;
    margin: 0 auto 40px auto; /* Center paragraph text */
	width: 80%;
}

/* Form fields */
.ncr-form-group {
    margin-bottom: 20px;
    text-align: left;
	font-family: 'Poppins', sans-serif; /* Apply Poppins to form fields */
}

.ncr-form-group label {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
    display: block;
}

.ncr-form-group input,
.ncr-form-group select {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #e0e0e0; /* Matching grey border */
    border-radius: 3px;
    transition: border-color 0.3s ease;
}

.ncr-form-group input:focus,
.ncr-form-group select:focus {
    border-color: #39b54a; /* Orange highlight for focus */
    outline: none;
}

/* Styling for textarea */
.ncr-form-group textarea {
    width: 100%;
    padding: 10px;
	margin:0;
    font-size: 16px;
    border: 1px solid #e0e0e0; /* Matching grey border */
    border-radius: 3px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* Textarea focus state */
.ncr-form-group textarea:focus {
    border-color: #39b54a; /* Green highlight for focus */
    outline: none;
}

/* Button styling */
.ncr-button {
    background-color: #39b54a;
    color: white;
    font-size: 18px;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
}

.ncr-button:hover {
    background-color: #39b54a; /* Darker orange on hover */
	cursor: pointer;
}

.placeholder-text {
    font-size: 18px;
    color: #9a9a9a;
    text-align: center;
    padding: 40px;
}

/***************** Your Details *****************/

/* Styling for form container */
.form-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
}

.form-row .ncr-form-group {
    width: 48%; /* Two fields per row */
    margin-bottom: 20px;
}

.form-container {
    max-width: 970px; 
    margin: 0 auto;
    padding: 0 15px;
}

.form-container-80 {
    width: 80%; 
}

.form-container-42 {
    width: 40.5%; 
}

/* Two fields per row */
.form-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 auto;
    width: 100%;
}

.form-row .ncr-form-group {
    width: 48%; /* Two fields per row */
    margin-bottom: 20px;
}

/* Full-width for "Message" field */
.ncr-form-group.full-width {
    width: 100%;
}

/* Make input fields have grey border */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="radio"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #e0e0e0; /* Grey border */
    border-radius: 3px;
    box-sizing: border-box;
	font-family: 'Poppins', sans-serif !important; /* Apply Poppins to form fields */
}

input::placeholder,
textarea::placeholder {
    color: #888 !important; /* Change the placeholder text color */
    font-style: italic; /* Make the placeholder text italic */
    opacity: 1; /* Ensure the opacity is set, as some browsers reduce the opacity of placeholders */
	font-family: 'Poppins', sans-serif !important; /* Apply Poppins to form fields */
}

/* New radio button group styling */
.radio-group {
    display: flex;
    gap: 20px; /* Adds space between radio buttons */
    align-items: center; /* Vertically aligns the radio buttons with the text */
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 5px; /* Space between radio button and label */
}

/* Adjust form container to 100% width on mobile screens */
@media (max-width: 768px) {
    .form-container {
        width: 100%; /* Full width on mobile */
    }
    .form-row .ncr-form-group {
        width: 100%; /* Full width for form fields on mobile */
    }
}

/***************** Card Design *****************/

/* Uniform Card Design */

/* Flexbox grid for cards, centrally aligned */
.ncr-card-container {
    display: flex;
    justify-content: center; /* Center-align cards */
    flex-wrap: wrap;
    gap: 10px; /* Space between cards */
    margin: 0 auto; /* Center-align the card container itself */
}

.ncr-card {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 3px; /* Slight rounded corners */
    transition: border-color 0.3s ease, transform 0.3s ease; /* Smooth transition for border color and hover effect */
    background-color: #ffffff;
}

.ncr-card, 
.ncr-card * {
    cursor: pointer;
}

.ncr-card-3 {
    flex: 1 1 300px; /* Ensures cards maintain their size */
    max-width: 300px; /* Set a max width for cards */
	justify-content: start;
	padding: 15px;
}

.ncr-card-5 {
    flex: 1 1 200px; /* Ensures cards maintain their size */
    max-width: 200px; /* Set a max width for cards */
	justify-content: center;
	padding: 15px;
}

.ncr-card-5-l {
    flex: 1 1 200px; /* Ensures cards maintain their size */
    max-width: 200px; /* Set a max width for cards */
	justify-content: center;
	padding: 0px;
}

/* Responsive adjustments for tablets and smaller screens */
@media (max-width: 768px) {
    .ncr-card-5 {
        flex: 1 1 calc(50% - 20px); /* Display 2 cards per row */
        max-width: calc(50% - 20px); /* Remove max-width constraint */
    }
}

/* Responsive adjustments for tablets and smaller screens */
@media (max-width: 768px) {
    .ncr-card-single-row {
        flex: 1 1 calc(100% - 20px); /* Display 2 cards per row */
        max-width: calc(100% - 20px); /* Remove max-width constraint */
    }
}

.ncr-card-6 {
    flex: 1 1 150px; /* Ensures cards maintain their size */
    max-width: 150px; /* Set a max width for cards */	
	justify-content: center;
	padding: 0px;
}

/* Add hover zoom effect */
.ncr-card:hover {
    /*border-color: #39b54a; /* Green border when hovering */
    transform: scale(1.05); /* Slight zoom on hover */
}

.ncr-card-3 img {
    width: 100%;
    max-width: 220px; /* Larger image size */
    height: auto;
    object-fit: contain; /* Maintain image aspect ratio */
    margin-bottom: 15px;
}

.ncr-card-5 img {
    width: 100%;
    max-width: 150px; /* Larger image size */
    height: auto;
    object-fit: contain; /* Maintain image aspect ratio */
    margin-bottom: 15px;
}

.ncr-card-5-l img {
    width: 100%;
    max-width: 198px; /* Larger image size */
    height: auto;
    object-fit: contain; /* Maintain image aspect ratio */
    margin-bottom: 15px;
}

.ncr-card-6 img {
    width: 100%;
    max-width: 150px; /* Larger image size */
    height: auto;
    object-fit: contain; /* Maintain image aspect ratio */
    margin-bottom: 15px;
}

.ncr-card h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    text-align: center; /* Center align text */
}

.ncr-card p {
    font-size: 14px;
    font-weight: 400;
    color: #555;
    text-align: center;
    margin: 0;
}

.ncr-card h6 {
    font-size: 17px;
    font-weight: 500;
    padding: 0px 0;
	margin: 0;
	line-height: 1.3;
    text-align: center; /* Center align text */
	color: #444 !important;
}

/* Selected state for cards */
.ncr-card.selected {
    border-color: #39b54a; /* Green border when selected */
}

/* Styling for Colour Cards (same as .ncr-card-5 but adjusted for swatches) */
.ncr-card-swatch {
    flex: 1 1 200px;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start; /* Left align content */
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    padding: 15px;
    background-color: #fff;
    transition: transform 0.3s ease, border-color 0.3s ease; /* Add smooth transition for border */
}

/* Responsive adjustments for tablets and smaller screens */
@media (max-width: 768px) {
    .ncr-card-swatch {
        flex: 1 1 calc(50% - 20px); /* Display 2 cards per row */
        max-width: calc(50% - 20px); /* Remove max-width constraint */
    }
}

.ncr-card-swatch:hover {
    transform: scale(1.05);
}

/* When a swatch is selected, highlight with a green border */
.ncr-card-swatch.selected {
    border-color: #39b54a; /* Green border when selected */
}

.ncr-card-swatch h6 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    text-align: left;
    width: 100%;
	color: #000000 !important;
}

.swatch-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left align the group */
    margin-top: 10px;
    width: 100%; /* Make sure the group takes the full width of the card */
}

.swatch-item {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left align swatch and label */
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: 1px solid #e0e0e0;
    width: 100%; /* Ensure swatches fill the card width */
    margin-bottom: 10px;
}

.swatch-item.selected {
    border-color: #39b54a; /* Green border for selected swatch */
}

.swatch-item:hover {
    background-color: #f0f0f0;
}

.swatch-box {
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin-right: 10px;
}

.swatch-label {
    font-size: 14px;
    color: #555;
}

/* Flexbox grid for Colour Cards */
.swatch-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px; /* Space between swatch cards */
    margin: 0 auto; /* Center-align the card container itself */
}

/* Styling for Get Quote button */
.ncr-get-quote-button {
    background-color: #39b54a; /* Bright green color */
    color: #ffffff; /* White text color */
    font-size: 24px; /* Large font size for visibility */
    font-weight: bold; /* Bold text */
    padding: 15px 30px; /* Larger padding for better visibility */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor to indicate it's clickable */
    display: block; /* Block display to take up full width */
    width: 200px; /* Set a uniform width for button */
    margin: 20px auto; /* Center-align the button */
    text-align: center; /* Ensure text is centered */
    transition: background-color 0.3s ease; /* Smooth transition for hover effects */
}

.ncr-get-quote-button:hover {
    background-color: #2e8f3a; /* Slightly darker green on hover for effect */
}

/* Styling for the quote result container */

#quoteResultContainer {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #f9f9f9;
	text-align: center;
}

#quoteResultContainer h2 {
	font-size: 24px;
	font-weight: 700;
	color: #333 !important;
	margin: 0 auto 20px auto;
	text-align: center;
}

#quoteResultContainer p {
	color: #555;
	margin: 0 auto 20px auto;
}

.quote-message {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.table-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
	width: 50%;
    margin: 40px auto 20px auto;
}

/* Responsive adjustments for tablets and smaller screens */
@media (max-width: 768px) {
    .table-container {
        width: 100%;
    }
}

.table-header,
.table-row {
    display: flex;
    padding: 10px;
    background-color: #39b54a;
    color: #ffffff;
}

.table-header {
    font-weight: bold;
}

.table-row {
    background-color: #ffffff;
    color: #0a0e14;
}

.table-cell {
    flex: 1;
    padding: 0px;
    text-align: center;
}

.table-row:nth-child(even) {
    background-color: #f1f1f1;
}

#alterQuoteButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: #39b54a;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#alterQuoteButton:hover {
    background-color: #2d8e3a;
}

#quoteLoadingSpinner {
    display: none;  /* Initially hidden */
    position: fixed;  /* Fix the spinner to the viewport to cover the entire screen */
    top: 0;
    left: 0;
    width: 100vw;  /* Full viewport width */
    height: 100vh;  /* Full viewport height */
    background-color: rgba(0, 0, 0, 0.5); /* Dark semi-transparent overlay */
    z-index: 9999;  /* Ensure it's on top of everything */
    justify-content: center;
    align-items: center;
}

#quoteLoadingSpinner::after {
    content: '';
    width: 50px;
    height: 50px;
    border: 5px solid #ffffff;
    border-top: 5px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Disable modal dl button */
.download-link.disabled {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/***************** Site Banner *****************/

.site-banner {
    padding-bottom: 20px;
}


/* ==========================================================================
   Elfsight button legibility + rounding.
   The Reviews widget renders "Load More" / "Review us on Google" buttons in the
   LIGHT DOM (no shadow root). Its inner text spans (.es-button-base-overlay /
   -ellipsis) inherit the global `p,a,span { color:#444 }` from theme-default.css,
   so the label goes dark/muddy on the green button. Force white on those spans
   and round the button container to match the site's CTAs.
   ========================================================================== */
.es-button-base-container,
.es-button-base-container .es-button-base-overlay,
.es-button-base-container .es-button-base-ellipsis {
  color: #ffffff !important;
}
.es-button-base-container {
  border-radius: 5px !important;
  overflow: hidden; /* clip the square overlay to the rounded corners */
}