/*
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Mono', monospace;
font-family: 'Roboto Slab', serif;
*/


@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@600&family=Roboto+Slab:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap');

*{
	margin: 0px;
	padding: 0px;
}

.fixit {
position: fixed;
top: 0px;

}

img{
	border:0px;
	}
	
a{-webkit-transition: 300ms linear 0s; -moz-transition: 300ms linear 0s; -o-transition: 300ms linear 0s; transition: 300ms linear 0s; outline: 0 none; text-decoration: none; }

ul{ padding: 0px; margin: 0px; list-style: none; }
	
/*The reason for this is to prevent "centering jumps" when navigating back and forth between 
pages with enough content to have a vertical scroll bar and pages that do not.*/

html {
overflow-y: scroll;
}
/*centering jump ends*/


html {  -webkit-font-smoothing: subpixel-antialiased; -webkit-text-stroke:1px transparent; }


/*content wrapper for fade effect starts*/
#content-wrapper{
display:none;	
}
/*content wrapper for fade effect ends*/


body{margin: 0; padding: 0px; text-align: center; -webkit-text-size-adjust: 100%;
/* change below to fixed or scroll*/ text-rendering: optimizeLegibility; background-color: #fff;
width: 100%; -moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover;background-attachment:fixed;background-image:url("../images/bg2.jpg");}


/*CTA STARTS*/
/* Shake animation keyframes - 2 seconds shake, 5 seconds pause */
@keyframes shake-attention {
  0% { transform: translateY(-50%) rotate(0deg); }
  2%, 6%, 10%, 14%, 18%, 22%, 26% { transform: translateY(-50%) rotate(-2deg); }
  4%, 8%, 12%, 16%, 20%, 24% { transform: translateY(-50%) rotate(2deg); }
  28.5%, 100% { transform: translateY(-50%) rotate(0deg); }
}

.side-cta {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  animation: shake-attention 7s ease-in-out infinite;
}

.side-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #61BEB6;
  color: #ffffff;
  text-decoration: none;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  padding: 28px 16px;
  border-radius: 8px 0 0 8px;
  box-shadow: -3px 0 10px rgba(0,0,0,0.25);
  gap: 14px;
  transition: background-color 0.3s ease;
}

.side-cta a:hover {
  background-color: #91C846;
}

.side-cta__label {
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.side-cta__number {
  font-family: Arial, sans-serif;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 2px;
  white-space: nowrap;
}
/*CTA ENDS*/



/*Master Container Starts*/
#master-container {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	text-align: left;/*this overrights  ie5 text align box model error*/
	-webkit-font-smoothing: subpixel-antialiased;
	text-rendering: geometricPrecision;
	background-color: #fff;
	border-bottom: 3px solid #91C846;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Soft shadow */
	}
	/*Master Container Ends*/


/*--------------------------------------------------------------------------------*/


/*Top Nav Starts*/
.top-nav{float: left; width: 1200px; padding: 16px 0px; background: #F3F3E8; border-top: 5px solid #61BEB6;}
.top-nav li{display: inline;}
.top-nav li a{font-family: 'Roboto'; font-style: normal; font-weight: 600; font-size: 20px;
text-transform: uppercase; color: #64D0C1; margin-left: 65px;}
.top-nav li a:hover{color: #91C846;}
.top-nav li #current{ color: #000;}
/*Top Nav Ends*/


/*--------------------------------------------------------------------------------*/



/*Banner Content Starts*/
.banner{float: left; width: 1100px; padding: 20px 50px 5px 50px; background: #fff;}

.tstrap{float: left; width: 1100px; padding: 10px 0px; text-align: center; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; color: #333;}

.master-logo{float: left; width: 400px; height: 148px; }

/*--------------------------------------------------------------------------------*/


/*Telephone Content Starts*/
.telsh{float: right; width: 254px; margin-right: 20px;}
.telh{float: left; width: 254px; margin-bottom: 15px;}
.telhl{float: left; width: 60px; margin-right: 10px;}
.telhr{float: right; width: 184px;}
.gtel{font-family: 'Roboto'; font-style: normal; font-weight: 500; color: #91C846; font-size: 24px; display: block; margin-bottom: 5px;}
.graytel{font-family: 'Roboto'; font-style: normal; font-weight: 500; color: #a4a4a4; font-size: 24px; display: block; margin-bottom: 5px;}
.graytel a{font-family: 'Roboto'; font-style: normal; font-weight: 500; color: #a4a4a4; font-size: 24px; display: block; margin-bottom: 5px;}
/*Telephone Content Ends*/

/*--------------------------------------------------------------------------------*/


/*Calls To Actions Starts*/
.calltoactions{width: 300px; float: right;}

.fbut2 a, .fbut3 a, .fbut4 a{ width: 260px; display: block; margin-bottom: 8px; padding: 10px 20px; border-radius: 20px; font-family: 'Roboto Slab';font-style: normal; font-weight: 700; font-size: 18px; line-height: 24px; color: #363637; background-image: url(../images/icons/cta-arrow.png); background-repeat: no-repeat; background-position: 95% 50%;}

.fbut2 a{ background-color: #91C846;}
.fbut2 a:hover{ background-color: rgba(174, 222, 216, 0.5);}
.fbut3 a{background-color: #AEDED8;}
.fbut3 a:hover{ background-color: rgba(174, 222, 216, 0.5); color: #000;}
.fbut4 a{background-color: #F3F031;}
.fbut4 a:hover{ background-color: rgba(174, 222, 216, 0.5); color: #000;}
.fbut5 a{background-color: #61BEB6;}
.fbut5 a:hover{ background-color: rgba(174, 222, 216, 0.5); color: #000;}
.fbut5 a{ width: 260px; display: block; margin-bottom: 8px; padding: 10px 20px; border-radius: 20px; font-family: 'Roboto Slab';font-style: normal; font-weight: 700; font-size: 16px; line-height: 24px; color: #363637; background-image: url(../images/icons/cta-arrow.png); background-repeat: no-repeat; background-position: 95% 50%;}

/*Calls To Actions Ends*/



/*Banner Content Ends*/


/*Rotator Starts*/
.rotator{float:left; width: 1200px; height: 541px;}
/*Rotator Ends*/

/*--------------------------------------------------------------------------------*/

/*Titles Starts*/
.titles{float:left; width: 1100px; padding: 20px 50px; background: #64D0C1;}
.titles h1{color: #333; font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 32px;}
.titles h2{color: #fff; font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-size: 19px; line-height: 32px;}
/*Titles Ends*/

/*--------------------------------------------------------------------------------*/

/*Home Copy Starts Here*/
.hcopy{float:left; width: 1100px; padding: 50px; background: #dcf5f2;}
.hcopyl{float:left; width: 450px;}
.hcopyr{float:right; width: 500px; margin-top: 15px; margin-right: 50px;}
.hcopyl h3{font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 40px; line-height: 50px;}
.hcopyr p{font-family: 'Roboto Slab'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 17px; line-height: 25px; display: block; margin-bottom: 20px;}
.hpbold{font-family: 'Roboto Slab'; color: #61BEB6; font-style: normal; font-weight: 700; font-size: 17px; line-height: 25px; display: block; margin-bottom: 20px;}
/*Home Copy Ends Here*/

/*--------------------------------------------------------------------------------*/


/*HOME BLOCK NAVIGATION SYSTEM STARTS HERE*/

/*Home Services Starts Here*/
.hservices{float:left; width: 1100px; padding: 20px 50px 50px 50px;}
.hststrips{float:left; width: 1100px; text-align: center; margin: 60px 0px 50px 0px;}
.green-title{font-family: 'Roboto Slab'; color: #91C846; font-style: normal; font-weight: 400; font-size: 37px; line-height: 43px; text-transform: uppercase; display: block; margin-bottom: 20px;}
.hststrips h3{font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 30px; line-height: 40px;}
.turquoise-title{font-family: 'Roboto Slab'; color: #61BEB6; font-style: normal; font-weight: 400; font-size: 37px; line-height: 25px; text-transform: uppercase; display: block; margin-bottom: 20px;}
.hststrips p{font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-size: 17px; line-height: 25px; color: #8b8b8b; margin-bottom: 20px;}


/*--------------------------------------------------------------------------------*/


/*Home Block Navigation System Starts Here*/
.hstript{ width: 1100px; float: left;}
.hstrip{ width: 1100px; float: left; margin-bottom: 50px;}


/*--------------------------------------------------------------------------------*/


/*HOME DOORS SECTION STARTS HERE*/
.bhmblinksl{ width: 346px; height: auto; float: left; margin: 0px 30px 0px 0px; text-align: center;}

.bhmblinksl a{ font-family: 'Roboto Slab'; color: #fff; font-style: normal; font-weight: 500; font-size: 22px; line-height: 25px; display: block; padding: 18px 18px 13px 18px; height: 60px; background: #64D0C1;}

.bhmblinksl a:hover{ background-color: #61BEB6; color: #d0ebe9;}

.bhmblinksr{ width: 346px; height: auto; float: left; margin: 0px; text-align: center;}
.bhmblinksr a{ font-family: 'Roboto Slab'; color: #fff; font-style: normal; font-weight: 500; font-size: 22px; line-height: 25px; display: block; padding: 18px 18px 13px 18px; height: 60px; background: #64D0C1;}
.bhmblinksr a:hover{ background-color: #61BEB6; color: #d0ebe9;}
/*Bespoke Service Links End Here*/
.hmbimgsl{ width: 346px; height: auto; background-color: #fff; float: left; margin: 0px 30px 0px 0px ;}
.hmbimgsr{ width: 346px; height: auto; background-color: #fff; float: left;}

.door-hmbcopyl{width: 326px; height: auto; float: left; text-align: left; padding: 20px 0px;}
.win-hmbcopyl p, .door-hmbcopyl p, .origin-text-holder p{font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px; color: #999;}
/*HOME DOORS SECTION ENDS HERE*/


.hmbimgsl img:hover, .hmbimgsr img:hover, .win-hmbimgsl img:hover, .win-hmbimgsr img:hover {
opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */-webkit-transition: 200ms linear 0s; -moz-transition: 200ms linear 0s; -o-transition: 200ms linear 0s; transition: 200ms linear 0s; outline: 0 none; text-decoration: none;}
/*HOME BLOCK NAVIGATION SYSTEM ENDS HERE*/

.punchline-holder{width: 1100px; float: left;}
#punchline{background-image:url("../images/hp/punch-line.png"); background-position: right top; background-repeat: no-repeat;}


/*HOME SERVICES END*/


/*--------------------------------------------------------------------------------*/

/*HOME SERVICES START*/
.why-choose{width: 1100px; float: left; padding: 60px 50px 30px 50px; background-color: #F3F3E8;}
.why-choose-title{width: 1100px; float: left; margin-bottom: 20px; font-family: 'Roboto Slab'; font-style: normal; font-weight: 300; font-size: 38px; line-height: 58px; color: #91C846; text-align: center;}
.why-choose-imgholder{width: 1100px; float: left; margin-bottom: 20px;}
.why-choose-imgsl{ width: 346px; height: 150px; float: left; margin: 0px 30px 0px 0px ;}
.why-choose-imgsr{ width: 346px; height: 150px; float: right;}
.why-choose-copy-holder{width: 1100px; float: left; margin-bottom: 40px;}
.why-choose-copyl{width: 346px; height: auto; float: left; text-align: left; margin: 0px 30px 0px 0px;}
.why-choose-copyr{width: 346px; height: auto; float: left; text-align: left;}
.why-choose-copy-holder h3{ display: block; font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 34px; line-height: 40px; margin-bottom: 20px;}
.why-choose-copy-holder p{font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-size: 14px; line-height: 24px; color: #999;}
/*HOME SERVICES END*/


/*--------------------------------------------------------------------------------*/

/*ORIGIN STARTS*/
.origin-banner{float: left; width: 1100px; height: 406px; background-image: url("../images/hp/origin-banner.jpg"); }

.origin-text-holder{float: left; width: 1000px; padding-top: 50px; margin-left: 30px;}

.origin-text-holder p{display: block; margin-bottom: 20px;}

.orgnavh{width: 1000px; float: left; text-align: center;}

.orgnavh ul{margin-top: 30px;}

.orgnavh li{display: inline-block; width: 450px; text-align: center;}

.orgnavh li a{ font-family: 'Roboto Slab'; color: #fff; background: #64D0C1; font-style: normal; font-weight: 500; font-size: 18px; line-height: 25px; display: block; margin: 0px 0px 20px 50px; padding: 10px 15px;}

.orgnavh li a:hover{ background-color: #61BEB6; color: #d0ebe9;}

/*ORIGIN ENDS*/
/*--------------------------------------------------------------------------------*/


/*ABOUT US STARTS HERE*/
.about-strip{width: 1100px; float: left; margin-bottom: 100px;}
.about-title{width: 1100px; float: left; margin-bottom: 20px;}
.about-header{font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 40px; line-height: 45px; display: block; margin-bottom: 30px;}
.about-strip h3{font-family: 'Roboto'; color: #91C846; font-style: normal; font-weight: 300; font-size: 50px; line-height: 55px; display: block; margin-bottom: 30px;}
.about-quote{font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 22px; line-height: 28px; display: block; margin-bottom: 10px;}
.about-strip p{font-family: 'Roboto Slab'; color: #8b8b8b; font-style: normal; font-weight: 300; font-size: 14px; line-height: 22px; display: block; margin-bottom: 30px;}
.circle-push{float: left; border-radius: 50%; margin: 0px 0px 0px 100px;}
.circle-pushr{float: right; border-radius: 50%; margin: 0px 100px 0px 0px;}

/*ABOUT PRODUCTS STARTS HERE*/
.about-prods{width: 1150px; float: left; padding: 20px 0px 60px 50px; background-image: url("../images/about-us/about-us-bkg.jpg"); height: 648px;}

.about-prodstitle{width: 1100px; float: left; font-family: 'Roboto'; color: #27818f; font-style: normal; font-weight: 300; font-size: 44px; line-height: 65px; display: block; margin-bottom: 35px;}

.about-servicesh{width: 1100px; float: left; margin-top: 300px;}

.about-prods-left{float: left; width: 330px; margin-right: 55px}
.about-prods-right{float: right; width: 320px;}

.about-prods h4{font-family: 'Roboto'; color: #fff; font-style: normal; font-weight: 500; font-size: 30px; line-height: 38px; display: block; margin-bottom: 20px;}

.agreen{display: inline-block; font-family: 'Roboto'; color: #fff; font-style: normal; font-weight: 300; font-size: 20px;  margin-bottom: 8px;}

.ablue{display: inline-block; font-family: 'Roboto'; color: #fff; font-style: normal; font-weight: 300; font-size: 15px;  margin-bottom: 10px;}


/*--------------------------------------------------------------------------------*/
/*INSIDE CONTENT STARTS HERE*/
.inside-container{width: 1100px; float: left; padding: 60px 50px 30px 50px;}
.isstrip{width: 1100px; float: left; margin-bottom: 100px;}
.insleft{width: 530px; float: left;}
.insright{width: 530px; float: right;}
.isstrip h3{font-family: 'Roboto'; color: #91C846; font-style: normal; font-weight: 300; font-size: 50px; line-height: 55px; display: block; margin-bottom: 30px;}
.isstrip h4{font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 25px; line-height: 30px; display: block; margin-bottom: 15px;}
.isstrip h5{font-family: 'Roboto'; color: #91C846; font-style: normal; font-weight: 700; font-size: 22px; line-height: 27px; display: block; margin-bottom: 15px;}
.isstrip h6{font-family: 'Roboto'; color: #91C846; font-style: normal; font-weight: 300; font-size: 22px; line-height: 30px; display: block; margin-bottom: 10px;}
.sub-green{font-family: 'Roboto'; color: #91C846; font-style: normal; font-weight: 300; font-size: 25px; line-height: 32px; display: block; margin-bottom: 10px;}
.sub-blue{font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 25px; line-height: 32px; display: block; margin-bottom: 10px;}
.isstrip p{font-family: 'Roboto Slab'; color: #8b8b8b; font-style: normal; font-weight: 300; font-size: 14px; line-height: 22px; display: block; margin-bottom: 30px;} 
.isstrip a{font-family: 'Roboto Slab'; color: #91C846; font-style: normal;}
.isstrip strong{font-weight: 600; color: #8b8b8b; font-size: 16px; line-height: 24px;} 
.insleft li, .insright li{font-family: 'Roboto Slab'; color: #000; font-style: normal; font-weight: 300; font-size: 14px; line-height: 22px; display: block; margin-bottom: 15px;}
.insleft ul, .insright ul{margin-bottom: 30px;}

.isgreen{font-family: 'Roboto'; color: #91C846; font-style: normal; font-weight: 300; font-size: 34px; line-height: 38px; display: block; margin-bottom: 15px;}
.isblue{font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 34px; line-height: 38px; display: block; margin-bottom: 15px;}
.imgpush{margin-bottom: 30px; box-shadow: 0 8px 8px -6px #999; border-radius: 5px;}

.isstrip hr {
    display: block;
    height: 1px;
    border-top: 1px dashed #949494;
    margin: 2em 0;
    padding: 0;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
    float: left;
    width: 100%;
}


/*ten good reasons starts*/
.tgrholder{width: 480px; padding: 30px; float: right; background: linear-gradient(123deg, #91C846 9.28%, #AEDED8 50.81%);}
.tgrtop{width: 460px; float: left; border-bottom: 1px solid #fff; padding-bottom: 8px; margin-bottom: 10px;}
.ten{width: 114px; float: left; font-family: 'Roboto'; color: #fff; font-style: normal; font-weight: 300; font-size: 100px; display: block;}
.tttxt{width: 324px; float: right; font-family: 'Roboto'; color: #fff; font-style: normal; font-weight: 400; font-size: 42px; line-height: 45px;  display: block; margin-top: 12px;}
.ttstxt{float: left; width: 460px; margin-top: 10px;}
.ttblue{color: #fff; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 22px; line-height: 26px;}
.ttwhite{color: #fff; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 22px; line-height: 26px; margin-right: 15px;}
.tgrholder p{display: block; margin-bottom: 8px; padding-left: 30px; color: #000;}
.ttstxtc{float: left; width: 460px; margin-top: 10px;}
.islgb{font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 36px; line-height: 40px; display: block; margin-bottom: 15px;}


/*INSIDE CONTENT LIST STARTS HERE*/
.strip-lists{float: left; width: 530px; padding-left: 10px; margin-bottom: 30px;}
.strip-lists li{font-family: 'Roboto Slab'; color: #8b8b8b; font-style: normal; font-weight: 300; font-size: 16px; display: block; margin-bottom: 15px; background-image: url("../images/icons/green-tick3.png"); background-position: left center; background-repeat: no-repeat; padding-left: 30px;}

/*LIST SECTION BLUE STARTS HERE*/
.lsectblue{width: 1150px; float: left; padding: 60px 0px 60px 50px; margin-bottom: 30px; background: linear-gradient(123deg, #91C846 9.28%, #AEDED8 50.81%);}
.lsectitle{width: 1100px;float: left; font-family: 'Roboto'; color: #fff; font-style: normal; font-weight: 300; font-size: 55px; line-height: 60px; display: block; margin-bottom: 30px;}
.lsectp{width: 1100px; float:left; font-family: 'Roboto Slab'; color: #363637; font-style: normal; font-weight: 300; font-size: 20px; line-height: 30px; display: block; margin-bottom: 30px;}
.lsect3collh{width: 1100px; float: left;}
.lsect3collh h6{font-family: 'Roboto'; color: #fff; font-style: normal; font-weight: 500; font-size: 20px; display: block; margin-bottom: 5px;}
.lsect3collh p{font-family: 'Roboto Slab'; color: #363637; font-style: normal; font-weight: 300; font-size: 16px; line-height: 30px; display: block; margin-bottom: 15px;}
.lsect3col{width: auto; float: left; margin-right: 50px;}
.lsect3col li{font-family: 'Roboto Slab'; color: #363637; font-style: normal; font-weight: 300; font-size: 16px; line-height: 16px; display: block; margin-bottom: 12px; padding-left: 25px; background-image: url("../images/icons/tick.png"); background-repeat: no-repeat; background-position: left center;}
/*LIST SECTION BLUE ENDS HERE*/


/*--------------------------------------------------------------------------------*/

/*SEO LANDING PAGES NAVIGATION STARTS HERE*/
.ldp-nav-holder{float: left; width: 1140px; padding: 0px 30px;}

.ldp-titles{float: left; width: 1200px; display: block; padding: 30px 0px; margin-bottom: 30px; background: linear-gradient(123deg, rgb(243, 243, 232) 9.28%, #dcf5f2 50.81%); text-align: center;}
.ldp-titles h3{color: #58BAAC; font-family: 'Roboto'; font-size: 40px; font-weight: 400; line-height: 45px; display: block; margin-bottom: 10px;}
.ldp-nav-inh{float: left; width: 1140px; padding: 50px 0px;}

.ldp-nav-left h4{display: block; color: rgb(97, 190, 182); font-family: 'Roboto'; font-weight: 500; font-size: 16px; margin-bottom: 10px;}

.ldp-nav-left li a{display: block; color: #363637; font-family: 'Roboto'; font-size: 14px; margin-top: 10px; padding-top: 10px; border-top: dashed 1px #58BAAC; font-weight: 400;}


.ldp-nav-left li a:hover{color: #58BAAC; padding-left: 2px;}

.ldp-nav-left{float: left; width: 225px; text-align: left; background: #fff; padding: 30px 30px 40px 30px; border-radius: 8px;}

.ldp-nav-left li #current{ color: #58BAAC; font-weight: 500;}

/*SEO LANDING PAGES NAVIGATION ENDS HERE*/



/*ACCORDIAN LANDING PAGE OTHER SERVICES CONTENT STARTS*/

 .accordion {
            border-radius: 4px;
            margin-bottom: 30px;
        }
        
        .accordion-header {
            background-color: #64D0C1;
            color: #fff;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            text-align: left;
            border: none;
            outline: none;
            transition: 0.4s;
            font-weight: 500;
            font-size: 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 8px 8px -6px #999;
        }
        
        .accordion-header:hover {
            background-color: rgb(243, 243, 232);
            color:rgb(88, 186, 172);
        }
        
        .accordion-header:after {
            content: '+';
            font-size: 18px;
            font-weight: bold;
        }
        
        .active:after {
            content: '-';
        }
        
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
            background-color: white;
            width: 1140px;
        }
        



/*--------------------------------------------------------------------------------*/


/*HEADER SECTION ULTRAFRAME PRODUCTS HERE*/
.breaktitles{width: 1200px; float: left; padding: 30px 0px 10px 0px; background-color: rgb(243, 243, 232); margin-bottom: 30px; text-align: center;}
.breaks{font-family: 'Roboto'; color: #61BEB6; font-style: normal; font-weight: 300; font-size: 40px; line-height: 50px; display: block; margin-bottom: 20px;}
.breaksp{font-family: 'Roboto Slab'; color: #363637; font-style: normal; font-weight: 300; font-size: 25px; line-height: 30px; display: block; margin-bottom: 30px;}
/*LIST SECTION BLUE ENDS HERE*/


/*--------------------------------------------------------------------------------*/



/*Enquire Actions Starts*/
.etoactions{width: 530px; margin-top: 30px; margin-bottom: 30px;}
.ebut1 a, .ebut2 a{ width: 490px; display: block; margin-bottom: 12px; padding: 10px 20px; border-radius: 20px; font-family: 'Roboto Slab';font-style: normal; font-weight: 700; font-size: 18px; line-height: 24px; color: #363637; background-image: url(../images/icons/vta-arrow.png); background-repeat: no-repeat; background-position: 96% 50%;}
.ebut1 a{ background-color: #CEE86D;}
.ebut1 a:hover{ background-color: #ccc;}
.ebut2 a{background-color: #64D0C1;}
.ebut2 a:hover{ background-color: #ccc; color: #000;}
/*Enquire Actions Ends*/

/*INSIDE CONTENT ENDS HERE*/



/*--------------------------------------------------------------------------------*/




/*TESTIMONIALS SECTION STARTS HERE*/
.testimonials-section{float: left; width: 1200px; height: 541px; background-image: url("../images/hp/testimonials.jpg");}
.tstitle{float: right; width: 700px; margin: 50px 15px 0px 0px;}
.tstitle h4{font-family: 'Roboto'; color: #20828f; font-style: normal; font-weight: 300; font-size: 60px; line-height: 64px; margin-bottom: 30px;}
.tstitle p{font-family: 'Roboto Slab'; color: #fff; font-style: normal; font-weight: 300; font-size: 27px; line-height: 35px; margin-bottom: 12px;}
.tspunch{float: right; width: 700px; font-family: 'Roboto'; color:#fff;font-style: normal; font-weight: 500; font-size: 26px; text-transform: uppercase;}
.tspunch a{float: right; width: 700px; height: 57px; font-family: 'Roboto'; color:#fff;font-style: normal; font-weight: 500; font-size: 26px; text-transform: uppercase; display: block; background-image: url("../images/hp/testimonials-yellow-arrow.png"); background-repeat: no-repeat; background-position: 90% 50%; padding-top: 30px;}
.tspunch a:hover{color: #20828f; background-image: url("../images/hp/testimonials-yellow-arrow-ov.png"); background-repeat: no-repeat; background-position: 90% 50%;}
/*TESTIMONIALS SECTION ENDS HERE*/


/*--------------------------------------------------------------------------------*/


/*TESTIMONIALS INSIDE PAGE SECTION STARTS HERE*/
.testth{float: left; width: 1100px; text-align: left;}
.testinonial-h{float: left; width: 1100px; margin-bottom: 50px;}
.testinonial-h p{ font-family: 'Roboto Slab'; color: #8b8b8b; font-size: 14px; font-weight: 300; line-height: 22px;}
.tlefth{width: 348px; margin-right: 24px; float: left; background-color: #fff; border: solid 1px #DBDBDB;}
.trighth{width: 348px; float: right; background-color: #fff; border: solid 1px #DBDBDB;}
.ttop{width: 348px; float: left; height: 86px;}
.ttopb{width: 348px; float: right; height: 65px;}
.ttcopy{ width: 310px; float: left; padding: 5px 20px;}
.tttitle{font-family: 'Roboto'; color: #61BEB6; font-size: 18px; font-weight: 400; line-height: 22px; display: block; margin-bottom: 10px;}
.tbold{ font-family: 'Roboto Slab'; color: #61BEB6; font-size: 14px; font-weight: 500; line-height: 21px;}
/*TESTIMONIALS INSIDE PAGE SECTION ENDS HERE*/


/*--------------------------------------------------------------------------------*/


/*BOOK APPOINTMENT BEGINS HERE*/
/*Book Appointment Starts Here*/
.book_appointment{ width: 1100px; float: left; padding: 50px; background: linear-gradient(123deg, #61BEB6 9.28%, #dcf5f2 50.81%);}
.book-left{ width: 540px; float: left; padding: 0px 15px 10px 0px;}
.book_appointment h3{ font-family: 'Roboto'; color: #fff; font-style: normal; font-weight: 300; font-size: 53px; line-height: 56px; margin-bottom: 20px; }
.book_appointment h4{ font-family: 'Roboto'; color: #fff; font-style: normal; font-weight: 400; font-size: 31px; line-height: 35px; margin-bottom: 20px; }

.basub{font-family: 'Roboto Slab'; color: #30371A; font-style: normal; font-weight: 600; font-size: 22px; line-height: 28px; display: block; margin-bottom: 25px;}

.book-left p{ font-family: 'Roboto Slab'; color: #30371A; font-style: normal; font-weight: 400; font-size: 16px; line-height: 25px; display: block; margin-bottom: 25px;}
.book-form{ width: 500px; float: right; }
.linefield{ width: 460px; float: left; padding: 10px 20px; background-color: #fff; margin-bottom: 5px; font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 25px; color: #000; text-transform: uppercase; border: 0px;}
.linefield2{ width: 460px; float: left; padding: 10px 20px; height: 120px; background-color: #fff; margin-bottom: 5px; font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 25px; color: #000; text-transform: uppercase; border: 0px;}
.book_appointment a{  width: 100%; float: left; text-align: center; padding: 15px 0px; background-color: #61BEB6; border: 0px; font-size: 20px; font-family: 'Roboto Slab'; font-style: normal; font-weight: 500; color: #fff; line-height: 25px; border-radius: 3px; text-transform: uppercase;}
.book_appointment a:hover{ background-color: #313031;}
/*below turns of blue border around formfields*/
.book_appointment input:focus {
border-color: #fff; box-shadow: 0 0 10px #fff; webkit-transition: 200ms linear 0s; -moz-transition: 200ms linear 0s; -o-transition: 200ms linear 0s; transition: 200ms linear 0s; outline: 0 none; text-decoration: none;}
/*below turns of blue border around textarea in form*/
.book_appointment textarea:focus {
 border-color: #fff; box-shadow: 0 0 10px #fff; webkit-transition: 200ms linear 0s; -moz-transition: 200ms linear 0s; -o-transition: 200ms linear 0s; transition: 200ms linear 0s; outline: 0 none; text-decoration: none;}	
.g-recaptcha{ float: left; margin: 5px 0px;}
/*Book Appointment Ends Here*/


/*--------------------------------------------------------------------------------*/


/*Footer Content Starts*/

.fstrap{float: left; width: 1100px; text-align: center; font-family: 'Roboto'; font-style: normal; font-weight: 500; font-size: 16px; color: #333; margin-bottom: 15px;}

.footer{float: left; width: 1200px;}
.ftop{float: left; width: 1100px; background: #F9F9F4; padding: 40px 50px;}
.flogos-tels{float: left; width: 1100px; border-bottom: 0.5px solid #91C846
;}
.flogo{float: left; width: 343px; height: 100px; margin-bottom: 6px;}

/*Footer Telephone Content Starts*/
.ftelsh{float: right; width: 528px; margin-top: 15px;}
.ftelh1{float: left; width: 254px; }
.ftelh2{float: right; width: 254px;}
.ftelhl{float: left; width: 60px; margin-right: 10px;}
.ftelhr{float: right; width: 184px;}
.gtel{font-family: 'Roboto'; font-style: normal; font-weight: 500; color: #91C846; font-size: 24px; display: block; margin-bottom: 5px;}
.graytel{font-family: 'Roboto'; font-style: normal; font-weight: 500; color: #a4a4a4; font-size: 24px; display: block; margin-bottom: 5px;}
/*Footer Telephone Content Ends*/

/*Footer Lists Start*/
.fstrips{float: left; width: 1100px; margin-top: 30px;}
.fcols{float: left; width: 220px; display: inline-block;}
.fcols h4{font-family: 'Roboto'; font-style: normal; font-weight: 700; display: block; margin-bottom: 10px; font-size: 12px; line-height: 18px; color: #000; text-transform: uppercase;}
.fcols li a{font-family: 'Roboto'; font-style: normal; display: block; margin-bottom: 10px; font-weight: 700; font-size: 12px; line-height: 18px; color: #a4a4a4; text-transform: uppercase;}
.fcols li a:hover{color: #91C846;}
/*Footer Lists Ends*/

/*--------------------------------------------------------------------------------*/

/*Footer Bottom Section Starts*/

.finance{float: left; width: 1180px; height: 300px; background-color: #79caf2; padding: 20px 0px 20px 20px;}

.fcalltoactions{width: 300px; float: right; margin-top: 10px;}
.footerbot{float: left; width: 1100px; background: #dcf5f2; padding: 30px 50px 0px 50px;}
.fblisth{float: left; width: 440px;}
.fbcol{float: left; width: 220px; display: inline-block;}
.fbcol h4{font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 12px; line-height: 30px; color: #000; text-transform: uppercase;}
.fbcol p{font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 11px; line-height: 30px; color: #61BEB6; text-transform: uppercase;}
.fbcol li a{font-family: 'Roboto'; font-style: normal; font-weight: 700; font-size: 11px; line-height: 30px; color: #61BEB6; text-transform: uppercase;}
.fbcol li a:hover{color: #91C846;}
/*Footer Bottom Section ends*/

.legal{float: left; width: 1100px; border-top: 0.5px solid #61BEB6; margin-top: 25px;}
.legalr{float: left; width: 600px; margin:20px 0px}
.legalr p{font-family: 'Roboto'; font-style: normal; font-weight: 600; font-size: 12px; line-height: 15px; color: #61BEB6;}
.legall{float: right; width: 300px; margin:20px 0px; text-align: right;}
.legall a{font-family: 'Roboto'; font-style: normal; font-weight: 600; font-size: 10px; line-height: 15px; color: #61BEB6;}
.legall a:hover{color: #91C846;}
/*Footer Content Ends*/

/*--------------------------------------------------------------------------------*/

/*Social Media Starts Here*/

.facebook{ width: 55px; float: left; height: 55px; margin-right: 33px;}
.facebook img:hover { opacity: 0.5; -webkit-transition: opacity 0.5s ease-in-out;  -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out;}	

.instagram{ width: 55px; float: left; height: 55px; margin-right: 33px; }
.instagram img:hover { opacity: 0.5; -webkit-transition: opacity 0.5s ease-in-out;  -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }	

.linkedin{ width: 55px; float: left; height: 55px;}
.linkedin img:hover { opacity: 0.5; -webkit-transition: opacity 0.5s ease-in-out;  -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; }	



.fsocial_media{ width: 176px; float: left;  margin-top: 60px; margin-left: 0px; }



/*--------------------------------------------------------------------------------*/

/*TICKER STARTS*/

.ticker-container {
      padding: 15px 0;
      width: 100%;
      background-color: #dcf5f2;
      overflow: hidden;
      position: relative;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }

    .ticker-header {
      position: absolute;
      top: 20px;
      left: 30px;
      color: #333;
      font-family: 'Roboto', sans-serif;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: 2px;
      z-index: 10;
    }

    .ticker-content {
      padding-top: 30px; /* Push the ticker below the header */
    }

    .ticker-track {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      animation: scroll 30s linear infinite;
      position: relative;
    }

    .areas-text {
      display: inline-flex;
      align-items: center;
      color: rgb(51, 51, 51);
      font-family: 'Roboto', sans-serif;
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 1px;
      position: relative;
      z-index: 1;
    }

    .area-item {
      display: inline-block;
      margin: 0 25px;
      padding: 8px 15px;
      background-color: #64D0C1;
      border-radius: 5px;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
      position: relative;
      z-index: 0;
    }
      
      .area-item a{color: #fff; text-decoration: none;}

    .area-item:hover {
      background: rgba(76, 175, 80, 0.2);
      transform: scale(1.05);
      color: #333333;
    }

    .van-wrapper {
      position: relative;
      z-index: 5;
      flex-shrink: 0;
      margin-left: 30px;
    }

    .van-image {
      width: 227px;
      height: 120px;
      filter: drop-shadow(2px 2px 8px rgba(0,0,0,0.3));
      animation: bounce 2s ease-in-out infinite;
      position: relative;
      z-index: 5;
    }

    @keyframes scroll {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }

    @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
      }
      40% {
        transform: translateY(-5px);
      }
      60% {
        transform: translateY(-3px);
      }
    }



.comparison-table {
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      border-collapse: collapse;
      background-color: #fff;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      overflow-x: auto;
	font-family: 'Roboto'; color: #000; font-style: normal; font-weight: 300;
    }

    .comparison-table th,
    .comparison-table td {
      padding: 14px 20px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    .comparison-table th {
      background-color: #91C846;
      letter-spacing: 0.5px;
    }

    .comparison-table tr:hover {
      background-color: #f1f1f1;
    }


/*--------------------------------------------------------------------------------*/

#push{margin-bottom: 100px;}

/* COMPLETELY UNIQUE FAQ SYSTEM - NO CONFLICTS POSSIBLE */
.doubleglaze-faq-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px;
    text-align: left;
    background: linear-gradient(123deg, #aadcf7 9.28%, #f0eeee 50.81%);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    animation: dgFadeInUp 0.8s ease-out;
}

@keyframes dgFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.doubleglaze-faq-title {
    background: #61BEB6;
    color: #363637;
    padding: 30px;
    text-align: center;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.doubleglaze-faq-title h3 {
    font-family: 'Roboto', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.doubleglaze-faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    padding: 0;
}

.doubleglaze-faq-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.doubleglaze-faq-card {
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: white;
}

.doubleglaze-faq-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.doubleglaze-faq-header {
    font-family: 'Roboto', sans-serif !important;
    background: #fff !important;
    padding: 20px 25px 20px 30px !important;
    cursor: pointer;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-weight: 600;
    font-size: 1rem;
    color: #2c3e50 !important;
    transition: all 0.3s ease;
    border-radius: 12px;
    line-height: 1.4;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    position: relative;
    box-sizing: border-box !important;
}

.doubleglaze-faq-header:hover {
    background: #c9f5ff !important;
    color: #2c3e50 !important;
}

.doubleglaze-faq-header.dg-faq-open {
    background: #c9f5ff !important;
    color: #2c3e50 !important;
    border-radius: 12px 12px 0 0;
}

/* CSS-GENERATED ARROW THAT CANNOT BE OVERRIDDEN */
.doubleglaze-faq-header::after {
    content: '' !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid transparent !important;
    border-right: 8px solid transparent !important;
    border-top: 12px solid #91C846 !important;
    border-bottom: none !important;
    transition: all 0.3s ease !important;
    margin-left: 15px !important;
    flex-shrink: 0 !important;
    display: block !important;
    position: static !important;
    z-index: 10 !important;
}

.doubleglaze-faq-header:hover::after {
    border-top-color: #61BEB6 !important;
    transform: scale(1.2) !important;
}

.doubleglaze-faq-header.dg-faq-open::after {
    transform: rotate(180deg) !important;
    border-top-color: #61BEB6 !important;
}

.doubleglaze-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
    background: white;
}

.doubleglaze-faq-content.dg-faq-open {
    max-height: 300px;
    padding: 25px;
    border-radius: 0 0 12px 12px;
    background: #f8f9fa;
}

.doubleglaze-faq-content p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

.doubleglaze-faq-content a {
    color: #91C846;
    font-weight: 600;
    text-decoration: underline;
}

.doubleglaze-faq-content strong {
    color: #2c3e50;
    font-weight: 600;
}

        

/*--------------------------------------------------------------------------------*/

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.2
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

#toTop {
  display:none;
  text-decoration:none;
  position:fixed;
  bottom:10px;
  right:10px;
  overflow:hidden;
  width:51px;
  height:51px;
  border:none;
  text-indent:100%;
  background:url(../ui.totop.png) no-repeat left top;
}

#toTopHover {
  background:url(../ui.totop.png) no-repeat left -51px;
  width:51px;
  height:51px;
  display:block;
  overflow:hidden;
  float:left;
  opacity: 0;
  -moz-opacity: 0;
  filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
  outline:none;
}

/*aligns cookies left*/
.cc-banner{ text-align: left;}