.section.banner {
padding: 70px 0 50px 0 !important;
}
.xholder {
display: block;
width: 1100px;
height: auto;
margin: auto;
overflow: hidden;
color: #545454;
}
.xheader {
display: block;
width: 100%;
height: 90px;
padding: 10px 0px;
border-bottom: 1px solid #ff9900;
}
.xlogo {
display: block;
width: 260px;
height: 90px;
float: left;
}
span.xtelno_tap {
display: none !important;
}
.xtelno {
display: block;
width: 260px;
height: auto;
text-align: right;
float: right;
margin-top: 10px;
}
.xcontent {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
margin: 0px auto 0px auto;
clear: both;
}
.xtrade_heading {
display: block;
width: 100%;
min-height: 28px;
color: #005d95;
font-size: 24px;
line-height: 28px;
text-align: center;
text-transform: capitalize;
margin-top: 20px;
}
.xheading h1{
display: block;
width: 100%;
min-height: 68px;
line-height: 68px;
font-size: 48px;
font-weight: bold;
text-transform: capitalize;
color: #005d95;
clear: both;
margin-bottom: 20px;
}
.xtileblock {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
margin-bottom: 20px;
clear: both;
}
.xtile {
width: auto;
height: 30px;
font-size: 14px;
color: #000000;
text-align: center;
padding: 5px;
border: 1px solid orange;
}
.xlcol {
display: block;
width: 680px;
float: left;
padding: 0px;
}
.xlcol_heading {
color: #005d95;
font-size: 24px;
line-height: 28px;
font-weight: bold;
text-align: center;
}
.xlcol_para {
display: block;
width: 100%;
line-height: 28px;
font-size: 18px;
margin-top: 0px;
padding: 20px 0px 10px 0px;
}
.xlcol_para.first {
margin-top: 0px !important;
padding-top: 10px !important;
}
.xlcol_image {
display: block;
width: 480px;
height: 480px;
margin: 0px auto;
}
.xlcol_image img {
width: 100%;
height: auto;
border-radius: 12px;
border: 1px solid #d4d4d4;
margin: 0px auto;
}
.xlcol_napit {
display: block;
width: 270px;
height: 100px;
margin: 20px auto 0px auto;
}
.xlcol_napit img {
width: 100%;
height: auto;
}
ul.xlcol_list {
margin: 0px;
}
ul.xlcol_list li {
background-image: url(https://www.handyexperts.co.uk/2022/images/tick-circ.png);
background-position: left center;
background-repeat: no-repeat;
background-size: 32px 28px;
padding-left: 38px;
line-height: 38px !important;
}
.xrcol {
display: block;
width: 600px;
float: right;
}
.xform1, .xform2, .xform3, .xform4 {
display: block;
width: calc(100% - 20px);
height: auto;
background: #ffffff;
color: #000000 !important;
clear: both;
padding: 35px 10px;
margin: 0px;
border-radius: 12px;
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);
}
.xfooter {
display: block;
width: 100%;
height: 100px;
margin: 10px 0px 60px 0px;
padding-bottom: 40px;
border-top: 1px solid #ff9900;
clear: both;
}
.xfooter_logos {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.xfooterlinks {
display: block;
width: 100%;
height: 20px;
clear: both;
padding: 10px 0px 0px 0px;
margin: 0px;
}
.thumbnail-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}

.thumbnail {
width: 92px;
height: 118px;
font-size: 14px;
color: #005d95;
text-align: center;
padding: 5px;
cursor: pointer;
border: 1px solid orange;
border-radius: 6px;
}
.thumbnail img {
width: 70px;
height: auto;
object-fit: cover;
}
.timeslot-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.timeslot {
width: 82px;
height: 100px;
font-size: 14px;
color: #005d95;
text-align: center;
padding: 5px;
cursor: pointer;
border: 1px solid orange;
border-radius: 6px;
}
.xform3 .timeslot {
width: 122px !important;
height: 40px !important;
vertical-align: middle;
font-size: 14px;
line-height: 40px;
padding: 0px !important;
}

.xform3 .timeslot.urgent {
width: 386px !important;
}

.thumbnail.selected, .timeslot.selected {
border: 2px solid #005d95;
}
p.formtitle {
font-size: 24px;
text-transform: none;
font-weight: bold;
text-align: center;
color: #000000 !important;
padding: 0px !important;
margin: -10px 0px 20px 0px !important;
}
p.formline {
font-size: 24px;
text-transform: none;
font-weight: bold;
text-align: center;
color: #000000 !important;
padding: 0px !important;
margin: 20px 0px 20px 0px !important;
}
.xform2 p.formline {
font-size: 18px;
text-transform: none;
font-weight: bold;
text-align: left !important;
padding: 0px !important;
margin: 20px 0px 10px 0px !important;
}
p.formline.datasafe {
font-size: 12px;
text-transform: none;
font-weight: normal;
text-align: center !important;
padding: 0px !important;
margin: 10px 0px 0px 0px !important;
}
p.formline.first {
margin: -10px 0px 10px 0px !important;
}
.xpostcode {
display: block;
width: 100%;
height: 50px;
text-align: center;
margin-bottom: 30px;
clear: both;
}
.form-control.m_postcode {
width: 80%;
margin: 0px auto;
font-size: 18px;
text-transform: uppercase;
}
.form-control.details {
font-size: 18px;
}
.time-frame {
display: block;
width: 70%;
height: auto;
margin: 0px auto;
padding-left: 0px;
font-size: 18px;
line-height: 28px;
}
.time-frame1, .time-frame2, .time-frame3, .time-frame4 {
display: block;
width: 100%;
height: 28px;
float: none;
clear: both;
}
.form-group {
margin-bottom: 0px !important;
}
.xcatlogo {
width: 163px;
height: 50px;
clear: both;
margin: 0px 0px 10px 0px;
}
.xcatlogo img {
display: block;
width: auto;
height: 50px;
clear: both;
margin: 10px 0px 10px 0px;
}
.xchaslogo {
width: 163px;
height: auto;
clear: both;
margin: 0px 0px 10px 0px;
}
.xchaslogo img {
display: block;
width: 163px;
height: auto;
clear: both;
margin: 10px 0px 10px 0px;
}
.clear10 {
display: block;
width: 100%;
height: 10px;
clear: both;
}
.clear20 {
display: block;
width: 100%;
height: 20px;
clear: both;
}
.clear30 {
display: block;
width: 100%;
height: 30px;
clear: both;
}
.clear40 {
display: block;
width: 100%;
height: 40px;
clear: both;
}
.fmsender {
display: block;
width: 80% !important;
color: #fff;
text-transform: uppercase;
font-size: 25px;
text-align: center;
padding: 16px 40px;
border-radius: 5px;
background: #0D7C4B !important;
color: #fff;
margin: 0px auto !important;
transition:.25s;
}
.fmsender:hover {
background: #005d95 !important;
}
.form-control.obf_job_date {
display: block;
width: 80%;
height: 54px !important;
font-size: 18px !important;
line-height: 40px;
border-radius: 5px !important;
border: 2px solid #e4f5fd !important;
box-shadow: none !important;
color: #005d95 !important;
padding: 0px 0px 0px 10px !important;
background: #f2f9fc !important;
margin: 0px auto 10px auto;
}
p.para {
font-size: 18px !important;
line-height: 28px !important;
color: #000000 !important;
padding: 0px 5px 5px 5px !important;
margin: 0px !important;
}
p.schedule_response {
text-align: center;
}
.review-widget_net.excol {
display: none;
}
.review-widget_net.incol {
display: block;
}
.greyed-out {
pointer-events: none; /* Disable click events */
opacity: 0.5; /* Make it appear greyed out */
}
.underline {
text-decoration: underline;
}
.zapier-interfaces-chatbot-embed {
display: block;
width: 100% !important;
height: 600px !important;
}
.focus_border {
border: 2px solid #ff0000 !important;
}
.cartoonimg {
left: -170px;
bottom: 140px;
width: 250px;
}
.avplumber {
bottom: 180px;
left: -200px !important;
}
.formouter {
margin-left: 0px !important;
}
.stepbox .m-0 {
height: 204px !important;
}
.bannerlist ul li {
background: url(../images/orange-bullet.png) left 5px no-repeat;
background-size: 22px 22px;
padding-left: 35px;
vertical-align: middle;
}
.cat1 {
display: none;
margin: 20px auto 0px auto !important;
}
.footer {
padding: 25px 0px 20px 0px;
}
/* Extra Small Devices (small smartphones, portrait) */
@media (max-width: 320px) {
	.section.banner {
	padding: 30px 0 50px 0 !important;
	}
	.xholder {
	display: block;
	width: 100%;
	}
	.xheader {
	display: block;
	width: 100%;
	height: 80px;
	padding: 10px 0px;
	border-bottom: 1px solid #ff9900;
	}
	.xheader .container {
	margin: 0px;
	padding: 0px 10px;
	}
	.xlogo {
	display: block;
	width: 200px;
	height: 60px;
	float: left;
	margin: 0px;
	}
	.xlogo img {
	width: 200px;
	height: auto;
	float: left;
	margin: 0px auto;
	}
	.xtelno {
	display: block;
	width: 60px;
	height: 60px;
	text-align: center;
	float: right;
	margin-top: 4px;
	}
	span.xtelno_tap {
	display: block !important;
	width: 60px;
	height: 20px;
	text-align: center;
	font-size: 12px !important;
	}
	.phonesec {
	width: 60px;
	}
	.phonesec img {
    display: block;
	width: 30px;
    vertical-align: baseline;
    margin: 0px auto;
	}
	.xheading h1{
	display: block;
	width: calc(100% - 20px);
	min-height: 28px;
	line-height: 28px;
	font-size: 22px !important;
	text-align: center;
	clear: both;
	margin: 20px 10px;
	}
	.xcontent {
	display: flex;
    flex-direction: column;
	align-items: center;
	height: auto;
    }
    .xlcol {
	order: -1; /* Default order */
    }
	.review-widget_net {
	order: 1; /* Default order */
	}
	.review-widget_net.incol {
	display: block;
	margin-bottom: 20px;
	}
	.review-widget_net.excol {
	display: none;
	}
	.xlcol, .xrcol {
	width: calc(98% - 10px); /* Ensure the columns take full width on small screens */
	max-width: 320px; /* Optional: Limit the max width for better appearance */
	margin: 0px auto;
    }
	.xform1, .xform2, .xform3, .xform4 {
	display: block;
	width: calc(100% - 20px);
	height: auto;
	color: #000000 !important;
	clear: both;
	padding: 35px 10px;
	margin: 0px auto;
	}
	.time-frame {
	display: block;
	width: 70%;
	height: auto;
	margin: 0px auto;
	padding-left: 0px;
	}
	.time-frame1, .time-frame2, .time-frame3, .time-frame4 {
	display: block;
	width: 100%;
	height: 28px;
	float: none;
	clear: both;
	}
	.fmsender {
	font-size: 25px;
	padding: 16px;
	width: 90% !important;
	}
	.xlcol_image {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 0px auto;
	}
	.xlcol_image img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0px auto;
	}
	.xlcol_napit {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 20px auto 0px auto;
	}
	.xlcol_napit img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0px auto;
	}
	ul.xlcol_list li {
	background-position: left 5px;
	line-height: 28px !important;
	padding-bottom: 5px;
	}
	.form-control.obf_job_date {
	margin: 20px auto 0px auto;
	}
	.xfooter_logos {
	margin-left: 10px;
	}
	.xfooterlinks {
	padding: 10px 0px 0px 10px;
	}
	.zapier-interfaces-chatbot-embed {
	width: 100% !important;
	margin: 0px auto !important;
	}
	.timeslot-container {
	width: 90% !important;
	margin: 0px auto 10px auto !important;
	}
	.xform3 .timeslot {
	width: calc(50% - 5px) !important;
	}
	.charecter.text-center.d-block.d-md-none {
	display: none !important;
	}
	.cat1 {
	display: block;
	}
	.formouter {
	margin-top: 5px !important;
	}
	.footer {
	padding: 25px 0px 0px 0px;
	}
}
/* Small Devices (larger smartphones, portrait) */
@media (max-width: 480px) {
	.section.banner {
	padding: 30px 0 50px 0 !important;
	}
	.xholder {
	display: block;
	width: 100%;
	}
	.xheader {
	display: block;
	width: 100%;
	height: 80px;
	padding: 10px 0px;
	border-bottom: 1px solid #ff9900;
	}
	.xheader .container {
	margin: 0px;
	padding: 0px 10px;
	}
	.xlogo {
	display: block;
	width: 200px;
	height: 60px;
	float: left;
	margin: 0px;
	}
	.xlogo img {
	width: 200px;
	height: auto;
	float: left;
	margin: 0px auto;
	}
	.xtelno {
	display: block;
	width: 60px;
	height: 60px;
	text-align: center;
	float: right;
	margin-top: 4px;
	}
	span.xtelno_tap {
	display: block !important;
	width: 60px;
	height: 20px;
	text-align: center;
	font-size: 12px !important;
	}
	.phonesec {
	width: 60px;
	}
	.phonesec img {
    display: block;
	width: 30px;
    vertical-align: baseline;
    margin: 0px auto;
	}
	.xheading h1{
	display: block;
	width: calc(100% - 20px);
	min-height: 28px;
	line-height: 28px;
	font-size: 22px !important;
	text-align: center;
	clear: both;
	margin: 20px 10px;
	}
	.xcontent {
	display: flex;
    flex-direction: column;
	align-items: center;
	height: auto;
    }
    .xlcol {
	order: -1; /* Default order */
    }
	.review-widget_net {
	order: 1; /* Default order */
	}
	.review-widget_net.incol {
	display: block;
	margin-bottom: 20px;
	}
	.review-widget_net.excol {
	display: none;
	}
	.xlcol, .xrcol {
	width: calc(98% - 10px); /* Ensure the columns take full width on small screens */
	max-width: 480px; /* Optional: Limit the max width for better appearance */
	margin: 0px auto;
    }
	.xform1, .xform2, .xform3, .xform4 {
	display: block;
	width: calc(100% - 20px);
	height: auto;
	color: #000000 !important;
	clear: both;
	padding: 35px 10px;
	margin: 0px auto;
	}
	.time-frame {
	display: block;
	width: 70%;
	height: auto;
	margin: 0px auto;
	padding-left: 0px;
	}
	.time-frame1, .time-frame2, .time-frame3, .time-frame4 {
	display: block;
	width: 100%;
	height: 28px;
	float: none;
	clear: both;
	}
	.fmsender {
	font-size: 25px;
	padding: 16px;
	width: 90% !important;
	}
	.xlcol_image {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 0px auto;
	}
	.xlcol_image img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0px auto;
	}
	.xlcol_napit {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 20px auto 0px auto;
	}
	.xlcol_napit img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0px auto;
	}
	ul.xlcol_list li {
	background-position: left 5px;
	line-height: 28px !important;
	padding-bottom: 5px;
	}
	.form-control.obf_job_date {
	margin: 20px auto 0px auto;
	}
	.xfooter_logos {
	margin-left: 10px;
	}
	.xfooterlinks {
	padding: 10px 0px 0px 10px;
	}
	.zapier-interfaces-chatbot-embed {
	width: 100% !important;
	margin: 0px auto !important;
	}
	.timeslot-container {
	width: 90% !important;
	margin: 0px auto 10px auto !important;
	}
	.xform3 .timeslot {
	width: calc(50% - 5px) !important;
	}
	.charecter.text-center.d-block.d-md-none {
	display: none !important;
	}
	.cat1 {
	display: block;
	}
	.formouter {
	margin-top: 5px !important;
	}
	.footer {
	padding: 25px 0px 0px 0px;
	}
}

/* Medium Devices (tablets and small desktops) */
@media (max-width: 820px) {
	.xholder {
	display: block;
	width: 100%;
	}
	.xheader {
	display: block;
	width: 100%;
	height: 80px;
	padding: 10px 0px;
	border-bottom: 1px solid #ff9900;
	}
	.xheader .container {
	margin: 0px;
	padding: 0px 10px;
	}
	.xlogo {
	display: block;
	width: 200px;
	height: 60px;
	float: left;
	margin: 0px;
	}
	.xlogo img {
	width: 200px;
	height: auto;
	float: left;
	margin: 0px auto;
	}
	.xtelno {
	display: block;
	width: 60px;
	height: 60px;
	text-align: center;
	float: right;
	margin-top: 4px;
	}
	span.xtelno_tap {
	display: block !important;
	width: 60px;
	height: 20px;
	text-align: center;
	font-size: 12px !important;
	}
	.phonesec {
	width: 60px;
	}
	.phonesec img {
    display: block;
	width: 30px;
    vertical-align: baseline;
    margin: 0px auto;
	}
	.xheading h1{
	display: block;
	width: calc(100% - 20px);
	min-height: 32px;
	line-height: 32px;
	font-size: 28px !important;
	text-align: center;
	clear: both;
	margin: 20px 10px;
	}
	.xcontent {
	display: flex;
    flex-direction: column;
	align-items: center;
	height: auto;
    }
	.review-widget_net {
	order: 1; /* Default order */
	}
	.review-widget_net.incol {
	display: block;
	margin-bottom: 20px;
	}
	.review-widget_net.excol {
	display: none;
	}
    .xlcol {
	order: -1; /* Default order */
    }
	.xlcol, .xrcol {
	width: calc(98% - 10px); /* Ensure the columns take full width on small screens */
	max-width: 768px; /* Optional: Limit the max width for better appearance */
	margin: 0px auto;
    }
	.xform1, .xform2, .xform3, .xform4 {
	display: block;
	width: calc(100% - 20px);
	height: auto;
	color: #000000 !important;
	clear: both;
	padding: 35px 10px;
	margin: 0px auto;
	}
	.time-frame {
	display: block;
	width: 80%;
	height: auto;
	margin: 0px auto;
	padding-left: 0px;
	}
	.time-frame1, .time-frame2, .time-frame3, .time-frame4 {
	display: block;
	width: 100%;
	height: 28px;
	float: none;
	clear: both;
	}
	.fmsender {
	font-size: 25px;
	padding: 16px;
	width: 90% !important;
	}
	.xlcol_image {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 0px auto;
	}
	.xlcol_image img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0px auto;
	}
	.xlcol_napit {
	display: inline-block;
	width: 100%;
	height: auto;
	margin: 20px auto 0px auto;
	}
	.xlcol_napit img {
	display: block;
	width: 90%;
	height: auto;
	margin: 0px auto;
	}
	ul.xlcol_list li {
	background-position: left 5px;
	line-height: 28px !important;
	padding-bottom: 5px;
	}
	.form-control.obf_job_date {
	margin: 20px auto 0px auto;
	}
	.xfooter_logos {
	margin-left: 10px;
	}
	.xfooterlinks {
	padding: 10px 0px 0px 10px;
	}
	.zapier-interfaces-chatbot-embed {
	width: 100% !important;
	margin: 0px auto !important;
	}
	.timeslot-container {
	width: 90% !important;
	margin: 0px auto 10px auto !important;
	}
	.xform3 .timeslot {
	width: calc(50% - 5px) !important;
	}
	.cat1 {
	display: block;
	}
	.formouter {
	margin-top: 5px !important;
	}
	.footer {
	padding: 25px 0px 0px 0px;
	}
}

/* Large Devices (larger TABLETS and small laptops) */
@media (min-width: 768px) and (max-width: 1024px) {

	.xholder {
	display: block;
	width: 100%;
	height: auto;
	margin: auto;
	overflow: hidden;
	color: #545454;
	}
	.xheader {
	display: block;
	width: 100%;
	height: 80px;
	padding: 10px 0px;
	border-bottom: 1px solid #ff9900;
	}
	.xheader .container {
	margin: 0px;
	padding: 0px 10px;
	}
	.xtelno {
	display: block;
	width: 260px !important;
	height: auto;
	text-align: right;
	float: right;
	margin-top: 10px;
	}
	span.xtelno_tap {
	display: none !important;
	}
	.phonesec {
	width: 260px !important;
	}
	.phonesec img {
    display: inline-block !important;
	width: 40px;
	height: auto;
    vertical-align: baseline;
    margin-right: 12px;
	}
	.xlcol_image {
    display: block;
    width: 98% !important;
    height: auto;
    margin: 0px auto;
	}
}

/* Extra Large Devices (desktops and large laptops) */
@media (max-width: 1200px) {
}

/* Extra Extra Large Devices (large desktops and wide screens) */
@media (max-width: 1600px) {
}