/*========================================================
	Main Style CSS for Danzco 2022
=========================================================*/

/* fonts declaration */

@font-face {
  font-family: barlowblack;
  src: url("../fonts/Barlow-Black.ttf");
}

@font-face {
  font-family: barlowbold;
  src: url("../fonts/Barlow-Bold.ttf");
  font-display: swap;
}

@font-face {
  font-family: barlowmedium;
  src: url("../fonts/Barlow-Medium.ttf");
  font-display: swap;
}

@font-face {
  font-family: barlowextrabold;
  src: url("../fonts/Barlow-ExtraBold.ttf");
}

/* colors declaration */

:root {
  --white: #fff;

  --orange: #f59912;

  --main-bg: #e5dbcf;

  --bg: #d8cdc1;

  --grey: #544d46;

  --black: #201b17;
}

/*========================================================

										RESET

=========================================================*/

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
abbr,
address,
em,
img,
sub,
sup,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
legend,
caption,
article,
aside,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;

  padding: 0;

  border: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;

  color: inherit;
}

*:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

input[type="submit"] {
  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;
}

/*========================================================

                      Main Styles

=========================================================*/

body {
  background: #fff;

  font-family: barlowmedium, arial, sans-serif;

  font-weight: 400;

  color: #010100;

  font-size: 26px;

  margin: 0;
}

p {
  font-family: barlowmedium, arial, sans-serif;
}

h1,
h2,
h3 {
  font-family: barlowbold, arial, sans-serif;

  text-transform: uppercase;

  font-weight: 400;
}

h1 {
  font-size: 25px;

  color: var(--orange);

  font-weight: 500;
}

h2 {
  font-size: 36px;

  font-weight: 800;

  color: #000;

  text-transform: capitalize;
}

h3 {
  font-size: 1.2em;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;

  color: inherit;
}

.clear {
  clear: both;
}

ol li {
  list-style-type: decimal;

  list-style-position: inside;

  text-align: left;

  padding-left: 20px;

  line-height: 1.3em;
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  h2 {
    font-size: 28px;
  }
}

/*=======================================================

                       Main Layout

=========================================================*/

.locMob,
.phoneMob,
.telMob,
.menu ul li.mmlink {
  display: none;
}

.bodyFrame {
  max-width: 100%;

  margin: 0 auto;

  overflow: hidden;

  position: relative;
}

.sectionFrame {
  width: 100%;

  margin: 0 auto;
}

.topWrap {
  width: 100%;

  margin: 0 auto;
}

.top {
  background: transparent;
}

.boxes {
  display: flex;

  align-items: center;

  height: 50px;
}

.navFrame {
  width: 100%;

  margin: 0 auto;

  background: #fff;

  box-shadow: 0 3px 9px rgb(0, 0, 0, 0.1);
}

.companyData {
  width: 100%;

  margin: 0 auto;

  height: 90px;

  display: flex;

  flex-direction: row;

  align-items: center;
}

.menu {
  width: 100%;
}

.menu ul {
  text-align: center;

  height: 80px;

  display: flex;

  flex-direction: row;

  align-items: center;
}

.menu ul li.mlinks {
  display: inline-block;
  line-height: 18px;
  color: #000;
}

.menu ul li.mslinks,
.menu ul li.doclinks,
.menu ul li.mobh6 {
  display: none;
}

.menu ul li.mlinks a {
  display: inline-block;
  text-transform: capitalize;
  text-align: center;
  font-size: 28px;
  padding: 0 15px;
  line-height: 20px;
}

.menu ul li.mlinks:hover {
  background: #f59812;
  padding: 30px 0;
  color: #fff;
}




@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .menu ul li a {
    font-size: 19px;

    line-height: 17px;
  }

  .menu ul li.mlinks {
    line-height: 13px;
  }

  .menu ul li.mlinks a {
    font-size: 24px;
    line-height: 17px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .menu ul li a {
    font-size: 16px;

    line-height: 14px;
  }

  .menu ul li.mlinks {
    line-height: 8px;
  }

  .menu ul li.mlinks a {
    font-size: 21px;
    line-height: 14px;
    padding: 0 10px;
  }
}

/*========================================================

	NAVIGATION

=========================================================*/

.menu ul li.mlogo,
.menu ul li.mphone,
.menu ul li.maddress,
.menu ul li.msocial,
.menu ul li.mobSocial,
.menu ul li.mhours,
.menu ul li.fall,
.smobitrigger,
.mnuclose,
.icoMob,
.logoMob,
.telMob,
.locMob,
.mloc,
.mbtn,
.btnBannMob,
.banerIndexMob,
.leafMob,
.foomapMob,
.tabletView,
.frameImgMob,
.adrMobile,
.ourTeamDoctorsMob {
  display: none;
}

/*========================================================

	CONTENT

=========================================================*/

.pageFull {
  width: 100%;

  margin: 0 auto;
}

.pageSize {
  width: 1920px;

  margin: 0 auto;
}

.pageInSize {
  width: 93%;

  margin: 0 auto;
}

.pageiSize {
  width: 93%;

  max-width: 1412px;

  margin: 0 auto;
}

.centerSize {
  width: 93%;

  max-width: 1412px;

  margin: 0 auto;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .pageSize {
    width: 90%;
  }
}

@media only screen and (max-width: 1919px) {
  .pageSize {
    width: 90%;
  }
}

@media only screen and (max-width: 479px) {
  .pageInSize {
    width: 100%;
  }
}

/*========================================================

									Buttons

=========================================================*/

.blackBtn {
  display: inline-block;

  color: var(--white);

  text-align: center;

  padding: 16px 42px;

  font-size: 24px;

  line-height: 1;

  font-family: barlowbold, arial, sans-serif;

  margin: 0 auto;

  text-transform: capitalize;

  background: #201b17;

  cursor: pointer;

  border-radius: 25px;

  transition: all 0.3s ease-in-out;
}

.orangeBtn {
  display: inline-block;
  color: var(--white);
  text-align: center;
  padding: 25px 55px;
  font-size: 30px;
  line-height: 1;
  font-family: barlowbold, arial, sans-serif;
  margin: 0 auto;
  text-transform: capitalize;
  background: var(--orange);
  cursor: pointer;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.orangeBtn:hover {
  background: var(--black);
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {

  .blackBtn {
    font-size: 24px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .blackBtn {
    font-size: 18px;
  }

  .orangeBtn {
    font-size: 21px;
    padding: 18px 40px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .blackBtn {
    font-size: 16px;
  }

  .orangeBtn {
    font-size: 21px;
    padding: 18px 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .blackBtn {
    font-size: 16px;
  }

  .orangeBtn {
    font-size: 18px;
    padding: 15px 30px;
  }
}

@media only screen and (max-width: 767px) {
  .orangeBtn {
    font-size: 21px;
    padding: 18px 40px;
  }

  .blackBtn {
    font-size: 18px;
  }
}

/*========================================================
                      Navbar
=========================================================*/

.navbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.companyLogo {
  width: 180px;
}

.companyLogo img {
  width: 180px;
}

.navigation {
  display: flex;

  flex-direction: row;

  align-items: center;
}

.navigation a:hover {
  background: var(--orange);

  color: #fff;
}

.navigation a:hover::before {
  background: var(--orange);
}

.navigation .fir::before {
  content: "";

  height: 0;

  width: 0;
}

.tel p {
  color: var(--orange);
  font-size: 36px;
  font-family: barlowbold, arial, sans-serif;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .companyLogo {
    width: 220px;
  }
  .tel p {
    font-size: 31px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .companyLogo {
    width: 160px;
  }

  .tel p {
    font-size: 28px;
  }

  .companyLogo img {
    width: 120px;

    margin-top: 5px;
  }
}

@media only screen and (max-width: 1300px) {
  .tel p {
    /*font-size: 15px;*/
  }
}

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

@media only screen and (max-width: 479px) {
  .companyLogo {
    width: 100px;
  }

  .tel p {
    font-size: 13px;
  }
}

/*========================================================
					home section
=========================================================*/
.bannerTopMob {
  display: none;
}

.bannerDindex {
  background: url("../images/picsAndbanners/Banner-top.jpg") no-repeat;
  background-position: center center;
  background-size: cover;
}

.halfBannerWrap {
  width: 40%;
  background: rgba(0, 0, 0, 0.7);
}

.halfBanner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 12%;
  width: 100%;
}

.bheight {
  height: 1000px;
}

.halfBanner h1 {
  font-size: 85px;
  text-transform: capitalize;
  font-family: barlowbold, arial, sans-serif;
  color: var(--white);
}

.bannernormp {
  font-size: 32px;
  padding: 25px 0 35px;
  color: var(--white);
  font-family: barlowmedium, arial, sans-serif;
}

.bannerLine {
  height: 5px;
  background: var(--orange);
  margin: 30px 0 45px;
  width: 100%;
}

.bannermedp {
  font-size: 50px;
  color: var(--white);
  font-family: barlowbold, arial, sans-serif;
}

.bannerBtnWrap {
  text-align: left;
  padding-top: 40px;
}

/*.bannerDcont {
    text-align: center;
    width: 1000px;
    margin: 130px auto 0px auto;
}

.bannerHead {
    background: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    margin-bottom: 30px;
}
.bannerHead h1 {
    font-size: 90px;
}
.bannerHead p {
    font-size: 42px;
    color: var(--orange);
    font-weight: 500;
    font-family: barlowbold, arial, sans-serif;
    text-transform: uppercase;
}
.bannerPar {
    text-transform: uppercase;
    font-size: 35px;
}
.banf2 {
    display: block;
}*/
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .bannerDindex,
  .bheight {
    height: 900px;
  }

  .halfBanner h1 {
    font-size: 64px;
  }

  .bannernormp {
    font-size: 24px;
  }

  .bannerLine {
    margin: 25px 0 35px;
  }

  .bannermedp {
    font-size: 40px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .bannerDindex,
  .bheight {
    height: 750px;
  }

  .halfBannerWrap {
    width: 37%;
  }

  .halfBanner h1 {
    font-size: 42px;
  }

  .bannernormp {
    font-size: 18px;
    padding: 15px 0 25px;
    font-family: barlowregular, arial, sans-serif;
  }

  .bannerLine {
    margin: 20px 0 30px;
  }

  .bannermedp {
    font-size: 26px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .bannerDcont {
    width: 800px;
  }

  .bannerDindex,
  .bheight {
    height: 700px;
  }

  .halfBanner h1 {
    font-size: 48px;
  }

  .bannernormp {
    font-size: 19px;
    padding: 15px 0 25px;
    font-family: barlowregular, arial, sans-serif;
  }

  .bannerLine {
    margin: 20px 0 30px;
  }

  .bannermedp {
    font-size: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .bannerDcont {
    width: 700px;
  }

  .bannerDindex,
  .bheight {
    height: 600px;
  }

  .halfBanner h1 {
    font-size: 40px;
  }

  .bannernormp {
    font-size: 19px;
    padding: 15px 0 25px;
    font-family: barlowregular, arial, sans-serif;
  }

  .bannerLine {
    margin: 20px 0 30px;
  }

  .bannermedp {
    font-size: 26px;
  }
}

@media only screen and (max-width: 767px) {
  .bannerDindex {
    background: none;
    height: auto;
    display: block;
  }

  .bannerTopMob {
    width: 100%;
    display: block;
  }

  .bannerDcont {
    padding: 20px 0 35px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }

  .bheight {
    height: auto;
  }

  .halfBannerWrap {
    width: 100%;
    background: var(--grey);
    padding: 35px 0 60px;
  }

  .halfBanner h1 {
    font-size: 40px;
  }

  .bannernormp {
    font-size: 20px;
    padding: 15px 0 25px;
    font-family: barlowregular, arial, sans-serif;
  }

  .bannerLine {
    margin: 20px 0 30px;
  }

  .bannermedp {
    font-size: 30px;
  }

  .halfBanner {
    padding: 0 35px;
  }

  .bannerBtnWrap {
    padding-top: 20px;
  }
}

@media only screen and (max-width: 479px) {
  .bannerDcont {
    width: 100%;
  }

  .halfBanner {
    padding: 0 20px;
  }
}

/*========================================================
				warning
=========================================================*/
.attention {
  background-color: var(--orange);
  padding: 30px 0px;
}

.attenCon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.attIcon {
  width: 70px;
  margin-right: 8px;
}

.attIcon img {
  width: 100%;
  height: auto;
}

.attenCon h2 {
  font-size: 44px;
  font-weight: 800;
  text-transform: capitalize;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .attIcon {
    width: 100px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .attenCon h2 {
    font-size: 26px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .attIcon {
    width: 80px;
  }

  .attenCon h2 {
    font-size: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .attenCon h2 {
    font-size: 26px;
  }
}

@media only screen and (max-width: 767px) {
  .attIcon {
    width: 50px;
  }

  .attenCon h2 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 479px) {
  .attIcon {
    width: 30px;
  }

  .attenCon h2 {
    font-size: 26px;
    text-align: center;
  }

  .attenCon {
    flex-direction: column;
  }

  .attIcon img {
    width: 60px;
    margin: 0 auto;
  }
}

/*========================================================
					heading
=========================================================*/
.comTitle {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  margin: 120px 0px 30px 0px;
}

.imgCon {
  width: 40px;
}

.imgCon img {
  width: 100%;
  height: auto;
}

.underline {
  background-color: var(--orange);
  width: 200px;
  height: 4px;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .imgCon {
    width: 65px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .imgCon {
    width: 45px;
  }

  .comTitle {
    margin-top: 70px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .comTitle {
    margin-top: 35px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .comTitle {
    margin-top: 25px;
  }
}

@media only screen and (max-width: 767px) {
  .comTitle {
    margin-top: 25px;
  }
}

/*========================================================

					2nd section

=========================================================*/
.goal {
  padding-bottom: 120px;
}

.goalCon {
  text-align: center;
}

.head {
  font-size: 32px;
  text-transform: uppercase;
  font-family: barlowmedium, arial, sans-serif;
}

.head span {
  display: block;
}

.goalText {
  font-size: 24px;
  margin: 30px auto;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .head {
    font-size: 36px;
  }

  .goalText {
    font-size: 28px;

    margin: 30px auto 40px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .head {
    font-size: 24px;
  }

  .goalText {
    font-size: 21px;
  }

  .goal {
    padding-bottom: 70px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .head {
    font-size: 26px;
  }

  .goalText {
    font-size: 21px;
  }

  .goal {
    padding-bottom: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .goalText {
    font-size: 18px;
  }

  .head {
    font-size: 24px;
  }

  .goal {
    padding-bottom: 50px;
  }
}

@media only screen and (max-width: 767px) {
  .goalText {
    font-size: 21px;
  }

  .goal {
    padding-bottom: 50px;
  }

  .head {
    display: block;
    font-size: 26px;
  }
  .head br{
    display: none;
  }
}

@media only screen and (max-width: 479px) {
  .goal {
    padding-bottom: 35px;
  }
}

/*========================================================

					floor installment section

=========================================================*/

.photoMob {
  display: none;
}

h2 span {
  display: block;
}

.line {
  background: var(--orange);

  height: 5px;

  width: 50px;

  border-radius: 50px;

  margin: 20px 0px;
}

.floorBannerOne {
  background: url("../images/picsAndbanners/Photo1.jpg");

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  display: flex;

  height: 450px;

  align-items: center;
}

.floorBannerCon {
  background: rgba(221, 211, 201, 0.7);

  width: 50%;

  height: 450px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 30px 7%;
}

.floorBannerCon p {
  font-size: 24px;

  margin-bottom: 20px;
}

.floorBtnPlace {
  text-align: center;

  margin-left: 300px;
}

.floorBtnPlace .blackBtn:hover {
  background-color: var(--orange);
  color: #fff;
}

.floorBtwo {
  background: url("../images/picsAndbanners/Photo2.jpg");

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  display: flex;

  height: 450px;

  align-items: center;
}

.floorBtwo .floorBannerCon {
  background: rgba(221, 211, 201, 0.7);

  width: 50%;

  height: 450px;

  margin-left: 50%;

  padding-right: 7%;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.floorBtwo .floorBtnPlace {
  text-align: center;

  margin-right: 30px;
}

.floorBthree {
  background: url("../images/picsAndbanners/Photo3.jpg");

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  display: flex;

  height: 450px;

  align-items: center;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .floorBannerOne,
  .floorBannerCon,
  .floorBtwo,
  .floorBtwo .floorBannerCon {
    height: 700px;
  }

  .floorBannerCon p {
    font-size: 24px;

    margin-bottom: 50px;
  }

  h2 {
    font-size: 38px;
  }

  .line {
    height: 10px;

    width: 70px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .floorBtnPlace {
    margin-left: 200px;
  }

  .floorBannerOne,
  .floorBannerCon {
    height: 500px;
  }

  .floorBannerCon p {
    font-size: 18px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .floorBannerOne,
  .floorBannerCon,
  .floorBtwo,
  .floorBtwo .floorBannerCon {
    height: 450px;
  }

  .floorBannerCon p {
    font-size: 17px;

    margin-bottom: 30px;
  }

  h2 {
    font-size: 24px;
  }

  .floorBtnPlace {
    text-align: center;

    margin-left: 100px;
  }

  .floorBtwo .floorBtnPlace {
    text-align: center;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .floorBannerOne,
  .floorBannerCon,
  .floorBtwo,
  .floorBtwo .floorBannerCon {
    height: 450px;
  }

  .floorBannerCon {
    padding: 30px 25px;
  }

  .floorBtwo .floorBtnPlace {
    margin: 0 0 0 50px;
  }

  .floorBannerCon p {
    font-size: 17px;

    margin-bottom: 30px;
  }

  h2 {
    font-size: 24px;
  }

  .floorBtnPlace {
    text-align: center;

    margin-left: 100px;
  }

  .floorBtwo .floorBtnPlace {
    text-align: center;
  }
}

@media only screen and (max-width: 767px) {
  .floorBannerOne,
  .floorBtwo {
    background: none;

    height: auto;

    display: inline-block;
  }

  .photoMob {
    width: 100%;

    display: block;
  }

  h2 {
    font-size: 32px;

    line-height: 1;
  }

  .floorBannerCon {
    width: 100%;

    margin: auto;
  }

  .floorBannerCon p {
    font-size: 20px;
  }

  .floorBtwo .floorBannerCon {
    width: 100%;

    margin: auto;
  }

  .floorBtnPlace {
    text-align: left;

    margin-left: 0;
  }

  .floorBtwo .floorBtnPlace {
    margin: 0;

    text-align: left;
  }
}

@media only screen and (max-width: 479px) {
  .floorBtwo .floorBtnPlace {
    margin: 0;

    text-align: left;
  }
  .floorBannerCon {
    height: auto;
  }
}

/*========================================================

				warning

=========================================================*/

.attention {
  background-color: var(--orange);

  padding: 30px 0px;
}

.attenCon {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;
}

.attIcon {
  width: 70px;

  margin-right: 8px;
}

.attIcon img {
  width: 100%;

  height: auto;
}

.attenCon h2 {
  font-size: 32px;

  font-weight: 800;

  text-transform: capitalize;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .attIcon {
    width: 100px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .attenCon h2 {
    font-size: 26px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .attIcon {
    width: 80px;
  }

  .attenCon h2 {
    font-size: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .attenCon h2 {
    font-size: 26px;
  }
}

@media only screen and (max-width: 767px) {
  .attenCon{
    flex-direction: column;
    text-align: center;
  }
  .attIcon {
    display: block;
    width: 50px;
  }

  .attenCon h2 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 479px) {
  .attIcon {
    width: 60px;
    margin-right: 0;
  }

  .attenCon h2 {
    font-size: 26px;

    text-align: center;
  }

  .attenCon {
    flex-direction: column;
  }

  .attIcon img {
    width: 60px;

    margin: 0 auto;
  }
}

/*========================================================

				Parquet

=========================================================*/

.comTitle h2 {
  font-family: barlowbold, arial, sans-serif;

  text-transform: uppercase;

  font-weight: 400;

  font-size: 36px;

  margin: 30px 0px 10px 0px;
}

.parq {
  padding: 30px 0px;
}

.parqWrap {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

  gap: 66px;
}

.parqBox {
  display: flex;

  flex-direction: column;
}

.parqImg {
  position: relative;

  z-index: -22;

  cursor: pointer;
}

.headings {
  text-transform: capitalize;

  font-weight: 700;

  color: #fff;

  font-size: 42px;

  position: absolute;

  bottom: 30px;

  left: 20px;

  z-index: 9999;

  line-height: 1.1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.parqOverlay {
  background: var(--orange);

  height: 5%;

  width: 100%;

  position: absolute;

  bottom: 0%;

  transition: all 0.3s ease-in-out;
}

.parqImg:hover .parqOverlay {
  height: 50%;
}

.headings span {
  display: block;
}

.parqImg img {
  width: 100%;

  height: auto;
}

.parqCont {
  text-align: center;
}

.parqCont p {
  font-size: 24px;

  margin: 20px 0px;
}

.parqBtnPlace {
  text-align: center;

  margin-top: auto;
}

.parqBtnPlace .blackBtn {
  padding: 16px 32px;

  font-size: 18px;

  transition: all 0.3s ease-in-out;
}

.parqBtnPlace .blackBtn:hover {
  background-color: var(--orange);

  color: #fff;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .parqCont {
    text-align: center;

    height: 100px;
  }

  .parqCont p {
    font-size: 22px;
  }

  .parqWrap {
    width: 1728px;

    margin: 0 auto;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .headings {
    font-size: 32px;

    bottom: 20px;
  }

  .parqBtnPlace .blackBtn {
    padding: 10px 26px;

    font-size: 16px;
  }

  .parqCont p {
    font-size: 18px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .headings {
    font-size: 32px;
  }

  .parqBtnPlace .blackBtn {
    font-size: 16px;

    padding: 10px 26px;
  }

  .parqCont p {
    font-size: 18px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .headings {
    font-size: 30px;
  }

  .parq {
    padding: 0;
  }

  .parqBtnPlace .blackBtn {
    font-size: 15px;

    padding: 10px 26px;
  }

  .parqCont p {
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .parq {
    padding: 0;
  }

  .headings {
    font-size: 30px;
    bottom: 15px;
    left: 15px;
  }

  .parqBtnPlace .blackBtn {
    font-size: 17px;

    padding: 10px 26px;
  }

  .parqCont p {
    font-size: 20px;
  }

  .comTitle h2 {
    font-size: 28px;
  }
}

@media only screen and (max-width: 479px) {
  .parqCont {
    height: auto;
  }
}

/*========================================================

				Family based section

=========================================================*/

.fambg {
  padding: 150px 0 0;
}

.famWrap {
  width: 100%;

  margin: 0 auto;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  flex-wrap: wrap;
}

.famBox {
  width: 49.8%;

  background: #e5dbcf;

  padding: 25px;

  display: flex;

  flex-direction: row;

  align-items: center;

  margin-bottom: 10px;
}

.famBoxLeft {
  width: 55%;

  padding: 0 60px 0 35px;
}

.famBoxRight {
  width: 45%;
}

.famBoxLeft h2 {
  font-size: 36px;

  padding-right: 10px;

  line-height: 1;
}

.famBoxLeft h2 span {
  display: block;
}

.famBoxLeft p {
  font-size: 24px;

  padding-right: 10px;
}

.famBoxRight img {
  width: 100%;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .famBox {
    width: 49.8%;

    margin-bottom: 6px;

    padding: 50px;
  }

  .famWrap {
    width: 1728px;
  }

  .famBoxLeft {
    padding-right: 30px;
  }

  .famBoxLeft h2 {
    font-size: 36px;
  }

  .famBoxLeft p {
    padding-bottom: 25px;
  }

  .fambg {
    padding-bottom: 0;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .famBox {
    width: 49.8%;

    margin-bottom: 6px;
  }

  .famBoxLeft p {
    font-size: 18px;

    padding-bottom: 25px;
  }

  .fambg {
    padding: 90px 0 0;
  }

  .famBoxLeft h2 {
    font-size: 23px;
  }

  .famBoxLeft {
    padding: 0 30px 0 20px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .fambg {
    padding: 35px 0;
  }

  .famBox {
    width: 49.8%;

    margin-bottom: 6px;
  }

  .famBoxLeft p {
    font-size: 16px;

    padding-bottom: 15px;
  }

  .famBoxLeft {
    padding: 0;
  }

  .famBoxLeft h2 {
    font-size: 22px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .fambg {
    padding: 50px 0 35px;
  }

  .famBox {
    width: 49.8%;

    margin-bottom: 6px;

    flex-direction: column-reverse;

    align-items: flex-end;

    justify-content: flex-end;
  }

  .famBoxLeft,
  .famBoxRight {
    width: 100%;
  }

  .famBoxRight img {
    margin-bottom: 20px;
  }

  .famBoxLeft p {
    font-size: 16px;

    padding-bottom: 15px;
  }

  .famBoxLeft h2 {
    font-size: 23px;
  }

  .famBoxLeft {
    padding: 0;
  }
}

@media only screen and (max-width: 767px) {
  .famWrap {
    flex-direction: column;
  }

  .famBox {
    width: 100%;
    margin-bottom: 10px;
  }

  .famBoxLeft p {
    font-size: 20px;
    padding-bottom: 25px;
  }

  .famBoxLeft h2 {
    font-size: 24px;
  }

  .line {
    margin: 10px 0;
  }

  .fambg {
    padding: 70px 0 0;
  }

  .famBoxLeft {
    padding: 0;
  }
}

@media only screen and (max-width: 479px) {
  .famBox {
    flex-direction: column-reverse;
  }

  .famBoxLeft,
  .famBoxRight {
    width: 100%;
  }

  .famBoxRight img {
    margin-bottom: 20px;
  }
}

/*========================================================

				Gallery

=========================================================*/

.gallery {
  padding: 40px 0px;
}

.galleryWrap {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;
}

.gallBox {
  flex: 1 1 26rem;

  padding: 25px 5px;

  background: #e5dbcf;

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  height: 280px;
}

.gallBoxCon h2 {
  font-size: 25px;

  padding-right: 10px;

  line-height: 1;
}

.gallBoxCon .line {
  margin: 20px 0px;
}

.gallBoxCon p {
  font-size: 16px;

  padding-right: 10px;
}

.gallBoxImg {
  height: 250px;
}

.gallBoxImg img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.parBtnPlace {
  text-align: center;

  margin-top: 35px;
}

.parBtnPlace .blackBtn {
  font-size: 21px;
}

.parBtnPlace .blackBtn:hover {
  background: var(--orange);
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .gallBox {
    flex: 1 1 50rem;

    height: 400px;

    padding: 0px 20px;
  }

  .gallBoxCon h2 {
    font-size: 44px;

    padding-right: 60px;
  }

  .gallBoxCon .line {
    margin: 20px 0px;
  }

  .gallBoxCon p {
    font-size: 28px;
  }

  .gallBoxImg {
    height: 350px;
  }

  .parBtnPlace .blackBtn {
    font-size: 21px;

    padding: 13px 25px 15px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .gallBox {
    flex: 1 1 35rem;

    height: 400px;

    padding: 0px 20px;
  }

  .gallBoxCon h2 {
    font-size: 35px;
  }

  .gallBoxCon p {
    font-size: 25px;
  }

  .gallBoxImg {
    height: 300px;
  }

  .parBtnPlace .blackBtn {
    padding: 10px 26px;

    font-size: 16px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1300px) {
  .gallBoxCon h2 {
    font-size: 20px;
  }

  .gallBoxCon p {
    font-size: 18px;
  }

  .gallBoxImg {
    height: 250px;
  }

  .parBtnPlace .blackBtn {
    padding: 10px 26px;

    font-size: 16px;
  }

  .parBtnPlace {
    margin-top: 15px;
  }
}

@media only screen and (max-width: 767px) {
  .parBtnPlace .blackBtn {
    padding: 10px 26px;

    font-size: 17px;
  }

  .parBtnPlace {
    margin: 5px auto 10px;
  }
}

@media only screen and (max-width: 550px) {
  .gallBox {
    flex-wrap: wrap;

    height: 500px;
  }

  .gallBoxImg {
    height: 200px;
  }
}

@media only screen and (max-width: 479px) {
  .parBtnPlace .blackBtn {
    font-size: 18px;
  }
}

/*========================================================

				List section

=========================================================*/

.certifiedSec {
  padding: 40px 0 120px;
}

.cerSecWrap {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));

  gap: 40px;
}

.lisBoxImg {
  width: 100%;

  position: relative;

  z-index: -22;
}

.lisBoxImg p {
  text-align: center;

  color: #fff;

  font-size: 42px;

  font-weight: 600;

  position: absolute;

  bottom: 30px;

  left: 50%;

  transform: translateX(-50%);

  text-transform: capitalize;

  width: 100%;
}

.lisBoxImg img {
  width: 100%;

  height: auto;
}

.cerBoxList {
  padding: 20px 0 35px 100px;
}

.cerBoxList li {
  font-size: 24px;

  padding: 5px 0px 5px 35px;

  text-transform: capitalize;

  position: relative;

  display: flex;
}

.cerSecBox {
  display: flex;

  flex-direction: column;
}

.cerBoxList li::before {
  content: "";

  background: url("../images/icons/Icon-mark-list.png") no-repeat;

  background-size: 20px 20px;

  position: absolute;

  left: 0;

  top: 9px;

  width: 20px;

  height: 20px;
}

.listBtnPlace {
  text-align: center;

  margin-top: auto;
}

.cerSecBox .orangeBtn {
  font-size: 21px;

  padding: 14px 24px 16px;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .cerBoxList li {
    font-size: 22px;

    padding: 5px 0px 5px 40px;
  }

  .lisBoxImg p {
    font-size: 38px;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;
  }

  .cerBoxList {
    padding-left: 80px;
  }

  .cerSecBox .orangeBtn {
    padding: 12px 30px;
  }

  .cerSecWrap {
    width: 1728px;

    margin: 0 auto;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .cerBoxList li {
    font-size: 19px;

    padding: 5px 0px 5px 27px;
  }

  .cerBoxList li::before {
    background-size: 17px 17px;

    top: 8px;

    width: 17px;

    height: 17px;
  }

  .lisBoxImg p {
    font-size: 26px;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;
  }

  .comTitle h2 {
    font-size: 25px;
  }

  .cerSecBox .orangeBtn {
    font-size: 17px;

    padding: 12px 20px;
  }

  .cerBoxList {
    padding-left: 50px;
  }

  .certifiedSec {
    padding-bottom: 70px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .cerSecWrap {
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  }

  .cerBoxList li {
    font-size: 20px;

    padding: 5px 0px 5px 24px;
  }

  .cerBoxList li::before {
    background-size: 17px 17px;

    top: 15%;

    width: 17px;

    height: 17px;
  }

  .comTitle h2 {
    font-size: 28px;
  }

  .lisBoxImg p {
    font-size: 30px;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;
  }

  .cerSecBox .orangeBtn {
    font-size: 16px;

    padding: 12px 20px;
  }

  .cerBoxList {
    padding: 20px 0 20px 50px;
  }

  .certifiedSec {
    padding: 40px 0 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .cerSecWrap {
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  }

  .cerBoxList li {
    font-size: 20px;

    padding: 5px 0px 5px 24px;
  }

  .cerBoxList li::before {
    background-size: 17px 17px;

    top: 15%;

    width: 17px;

    height: 17px;
  }

  .comTitle h2 {
    font-size: 28px;
  }

  .lisBoxImg p {
    font-size: 30px;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;
  }

  .cerBoxList {
    width: 350px;

    margin: auto;

    padding-left: 0;
  }

  .cerSecBox .orangeBtn {
    font-size: 17px;

    padding: 12px 20px;
  }

  .certifiedSec {
    padding: 0 0 35px;
  }
}

@media only screen and (max-width: 767px) {
  .certifiedSec {
    padding: 0 0 35px;
  }

  .lisBoxImg p {
    font-size: 30px;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;
  }

  .cerSecBox .orangeBtn {
    font-size: 18px;
  }

  .cerBoxList {
    padding-left: 60px;
  }

  .cerBoxList li {
    font-size: 20px;
    padding: 5px 0px 5px 26px;
  }

  .cerBoxList li::before {
    background-size: 16px 16px;

    width: 16px;

    height: 16px;
  }
}

@media only screen and (max-width: 479px) {
  .cerBoxList {
    padding-left: 20px;
  }

  .lisBoxImg p {
    font-size: 24px;

    bottom: 20px;
  }
}

/*========================================================

				REVIEWS

=========================================================*/

.comTitle h2 {
  margin: 20px 0px 0px 0px;

  text-align: center;
}

.comTitle p {
  font-size: 24px;

  text-transform: uppercase;

  margin-bottom: 20px;
}

.reviewSec {
  background: #554b3f;

  height: 450px;
}

.reviewSec {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("../images/picsAndbanners/feedbackBanner.png");

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  display: flex;

  height: 600px;

  align-items: center;
}

.revBox {
  position: relative;

  z-index: -22;

  border: 2px solid #f59912;

  border-radius: 25px;

  padding: 30px 35px;

  height: 450px;

  text-align: center;

  line-height: 1.5;
}

.feedback {
  font-size: 21px;

  color: #fff;

  font-weight: normal;

  letter-spacing: 1px;
}

.name {
  color: #f59912;

  font-size: 35px;

  margin-top: 30px;

  text-transform: capitalize;
}

.revImg {
  width: 40px;

  margin-top: -50px;

  position: absolute;

  left: 45%;

  z-index: 9999999;
}

.revImg img {
  width: 100%;

  height: auto;
}

@media only screen and (min-width: 2560px) {
  .reviewSec {
    height: 1000px;
  }
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .comTitle h2 {
    font-size: 34px;
  }

  .comTitle p {
    font-size: 35px;
  }

  .reviewSec {
    height: 1000px;
  }

  .name {
    font-size: 40px;
  }

  .feedback {
    font-size: 25px;
  }

  .revBox {
    height: 800px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .comTitle h2 {
    font-size: 26px;
  }

  .comTitle p {
    font-size: 30px;
  }

  .reviewSec {
    height: 800px;
  }

  .name {
    font-size: 30px;
  }

  .feedback {
    font-size: 17px;
  }

  .revBox {
    height: 600px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .reviewSec {
    height: 600px;
  }

  .name {
    font-size: 25px;
  }

  .feedback {
    font-size: 16px;
  }

  .revBox {
    height: 450px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .reviewSec {
    height: 700px;
  }

  .name {
    font-size: 25px;
  }

  .feedback {
    font-size: 18px;
  }

  .revBox {
    height: 630px;
  }
}

@media only screen and (max-width: 767px) {
  .reviewSec {
    height: 650px;
  }

  .name {
    font-size: 25px;
  }

  .feedback {
    font-size: 18px;
  }

  .revBox {
    height: 450px;
  }

  .comTitle p {
    text-align: center;
  }
}

@media only screen and (max-width: 479px) {
  .reviewSec {
    height: 700px;
  }

  .name {
    font-size: 18px;
  }

  .feedback {
    font-size: 18px;
  }

  .revBox {
    height: 580px;
  }
}

/*========================================================
				FOOTER
=========================================================*/

.foobg {
  background: #201b17;
  padding: 90px 0px;
}

.fooWrap {
  display: flex;
  flex-direction: row;
}

.fooCol1 {
  justify-content: flex-start;
}

.fooLogo {
  width: 250px;
}

.fooLogo img {
  width: 100%;
  margin-bottom: 60px;
}

.fooCol1,
.fooCol2,
.fooCol3 {
  width: 33.33%;
}

.fooCol2 {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.col2Img {
  width: 140px;
  margin-bottom: 20px;
}

.col2Img img {
  width: 100%;
  height: auto;
}

.col1Cont {
  margin: 30px 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 45px;
}

.fooTel,
.fooHours {
  color: #fff;
  padding-left: 18px;
}

.fooTel {
  font-size: 28px;
}

.fooHours {
  font-size: 20px;
}

.col1Cont p span {
  display: block;
}

.col1Cont img {
  width: 45px;
}

.fooCol3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
}

.fooCol3Wrap {
  display: flex;
  align-items: flex-start;
  gap: 100px;
  text-align: left;
  margin-bottom: 35px;
}

.first,
.second {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

ul li.flinks a {
  font-size: 21px;
  text-transform: capitalize;
  color: #fff;
  background: transparent;
  padding: 8px 16px;
  border-radius: 25px;
  line-height: 18px;
  display: block;
}

ul li.flinks a:hover {
  background-color: var(--orange);
}

.socialIcons {
  display: flex;
  align-items: center;
  gap: 25px;
}

.icon {
  width: 35px;
}

.icon img {
  width: 100%;
  height: auto;
}

.outerSticky {
  display: none;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .fooWrap {
    justify-content: space-around;
  }

  .fooLogo {
    width: 350px;
  }

  .fooTel {
    font-size: 35px;
  }

  .fooHours {
    font-size: 24px;
  }

  ul li.flinks a {
    font-size: 25px;
  }

  .icon {
    width: 45px;
  }

  .col2Img {
    width: 250px;
  }

  .fooCol3Wrap {
    gap: 150px;
    margin-bottom: 50px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .fooWrap {
    justify-content: space-around;
  }

  .fooLogo {
    width: 330px;
  }

  .fooHours {
    font-size: 20px;
  }

  ul li.flinks a {
    font-size: 16px;
  }

  .fooCol3Wrap {
    gap: 80px;
  }

  .first,
  .second {
    gap: 5px;
  }

  .icon {
    width: 38px;
  }

  .col2Img {
    width: 200px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .fooWrap {
    justify-content: space-between;
  }

  .fooLogo {
    width: 250px;
  }

  .fooHours {
    font-size: 16px;
  }

  ul li.flinks a {
    font-size: 15px;
  }

  .icon {
    width: 35px;
  }

  .col2Img {
    width: 180px;
  }

  .fooCol1 {
    width: 35%;
  }

  .fooCol3 {
    width: 35%;
  }

  .fooCol2 {
    width: 30%;
  }

  .foobg {
    padding: 60px 0;
  }

  .fooCol3Wrap {
    gap: 60px;
  }

  .first,
  .second {
    gap: 1px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .fooLogo {
    width: 300px;
  }

  .fooHours {
    font-size: 18px;
  }

  ul li.flinks a {
    font-size: 16px;
  }

  .icon {
    width: 35px;
  }

  .col2Img {
    width: 180px;
  }

  .fooWrap {
    flex-wrap: wrap;
  }

  .foobg {
    padding: 35px 0 117px;
  }

  .fooCol1,
  .fooCol2 {
    width: 45%;
  }

  .fooCol3 {
    width: 50%;

    align-items: flex-start;
  }

  .fooCol2 {
    align-items: center;
  }

  .fooCol1 {
    margin-bottom: 50px;
  }

  .fooCol3Wrap {
    gap: 35px;
  }

  .socialIcons {
    padding-left: 20px;
  }

  .first,
  .second {
    gap: 3px;
  }

}

@media only screen and (max-width: 767px) {
  .fooWrap {
    flex-direction: column;
  }

  .fooCol1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 30px auto;
  }

  .fooCol3Wrap {
    flex-direction: column;
    gap: 15px;
  }

  .fooCol2 {
    align-items: center;
    width: 100%;
  }

  .fooLogo {
    width: 270px;
  }

  .fooHours {
    font-size: 20px;
  }

  .fooLogo img {
    margin-bottom: 0;
  }

  .col1Cont {
    min-width: 272px;
    margin: 20px 0 0;
  }

  .fooCol3 {
    width: 100%;

    margin: 20px auto;

    align-items: center;
  }

  .socialIcons {
    justify-content: center;
  }

  ul li.flinks a {
    font-size: 20px;
    text-align: center;
  }

  .foobg {
    padding: 0 0 95px;
  }

  .outerSticky {
    display: inline-block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }

  .stickyFooter {
    background: var(--grey);
    color: var(--white);
    padding: 10px 0;
    border-top: 1px solid var(--white);
}

.innerStickyFooter {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

.centeringSticky {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.innerStickyFooter a img {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
}

.innerStickyFooter a p {
    display: inline-block;
    font-size: 24px;
    font-weight: 700;
    font-family: barlowmedium, arial, sans-serif;
    vertical-align: middle;
    color: var(--white);
    padding-left: 10px;
}

  .innerStickyFooter a p span {
      display: block;
      font-size: 21px;
      font-weight: 400;
      text-transform: uppercase;
  }
}


/*========================================================
	INSTALLATION page
=========================================================*/

.bannerInstallMob {
  display: none;
}

.bannerInstal {
  background: url("../images/installation/bgInstall.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  /* height: 550px; */
  align-items: center;
  /* justify-content: center; */
}

.bannerIndH h1 {
  font-size: 45px;
}

.bannerIndH h1 span {
  display: block;

  font-size: 90px;
}

.installWrap {
  width: 100%;

  display: flex;

  flex-direction: row;
}

.installFirst,
.installSec {
  width: 50%;
}

.installFirst {
  background: rgba(221, 211, 201, 0.7);

  height: 550px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 30px 7%;
}

.instalr {
  padding-bottom: 0;
}

.installImg1 {
  background: url("../images/installation/installation1.jpg") no-repeat;
}

.installImg2 {
  background: url("../images/installation/installation2.jpg") no-repeat;
}

.installImg3 {
  background: url("../images/installation/installation3.jpg") no-repeat;
}

.installImg4 {
  background: url("../images/installation/installation4.jpg") no-repeat;
}

.installImg5 {
  background: url("../images/installation/installation5.jpg") no-repeat;
}

.installImg6 {
  background: url("../images/installation/installation6.jpg") no-repeat;
}

.installImg1,
.installImg2,
.installImg3,
.installImg4,
.installImg5,
.installImg6 {
  background-position: center center;

  background-size: cover;

  height: 550px;
}

.installCont h3 {
  font-size: 36px;

  font-weight: 700;

  color: #000;

  text-transform: capitalize;
}

.installpar p {
  font-size: 21px;

  margin-bottom: 20px;
}

.installBtnWrap {
  text-align: left;

  margin-top: 20px;
}

.installpar ul li {
  background: url("../images/installation/dot.png") no-repeat;

  background-position: left top 10px;

  background-size: 10px 10px;

  font-size: 20px;

  padding: 3px 0 3px 26px;

  text-transform: capitalize;
}

.refbg {
  padding: 75px 0;
}

.refStemp {
  width: 100%;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;
}

.refWrap {
  width: 100%;

  margin: 75px auto 0;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  flex-wrap: wrap;
}

.refBox {
  width: 31%;

  display: flex;

  flex-direction: column;
}

.refBox p {
  font-size: 30px;

  font-weight: 700;

  color: #000;

  text-transform: capitalize;

  padding-bottom: 35px;
}

.refBox ul li {
  background: url("../images/icons/Icon-mark-list.png") no-repeat;

  background-position: left top 10px;

  background-size: 18px 18px;

  font-size: 21px;

  padding: 5px 0 5px 36px;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .installCont h3 {
    font-size: 26px;
  }

  .installFirst {
    padding: 30px 35px;
  }

  .refBox p {
    font-size: 21px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .installCont h3 {
    font-size: 26px;
  }

  .installFirst {
    padding: 30px 35px;
  }

  .refBox p {
    font-size: 21px;
  }

  .installpar p {
    font-size: 17px;
  }

  .refBox {
    width: 47%;

    margin-bottom: 35px;
  }

  .refbg {
    padding: 50px 0 35px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .bannerInstal {
    /* height: 400px; */
  }

  .installCont h3 {
    font-size: 21px;
  }

  .installFirst {
    padding: 30px 35px;
  }

  .refBox p {
    font-size: 21px;
  }

  .installpar p {
    font-size: 16px;
  }

  .refBox {
    width: 47%;
    margin-bottom: 35px;
  }

  .refbg {
    padding: 50px 0 35px;
  }

  .instalLine {
    margin: 5px 0;
    height: 5px;
  }
}

@media only screen and (max-width: 767px) {
  .bannerInstallMob {
    display: block;
    width: 100%;
  }

  .bannerInstal {
    background: none;
    height: auto;
    flex-direction: column;
  }

  .bannerInstallCont {
    padding: 20px 0 0;
  }

  .bannerIndH {
    margin-bottom: 0;
  }

  .instRev {
    flex-direction: column-reverse;
  }

  .instAv {
    flex-direction: column;
  }

  .installFirst,
  .installSec {
    width: 100%;
  }

  .installImg1,
  .installImg2,
  .installImg3,
  .installImg4,
  .installImg5,
  .installImg6 {
    height: 350px;
  }

  .installCont h3 {
    font-size: 26px;
  }

  .instalLine {
    margin: 20px 0;
    height: 5px;
  }

  .installFirst {
    height: auto;
  }

  .refbg {
    padding: 35px 0 15px;
  }

  .refWrap {
    flex-direction: column;
    margin-top: 35px;
  }

  .refBox {
    width: 100%;
    margin-bottom: 35px;
  }

  .bannerIndH h1 span {
    font-size: 60px;
  }

  .bannerIndH h1 {
    font-size: 30px;
  }
}

@media only screen and (max-width: 479px) {
  .bannerIndH h1 span {
    font-size: 36px;
  }

  .bannerIndH h1 {
    font-size: 21px;
  }
}

/*========================================================

	RESTORATION page

=========================================================*/

.bannerRestoreMob {
  display: none;
}

.bannerRestor {
  background: url(../images/restoration/bgRestore.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  /* height: 550px; */
  align-items: center;
  /* justify-content: center; */
}

.restorImg1 {
  background: url("../images/restoration/restoration1.jpg") no-repeat;
}

.restorImg2 {
  background: url("../images/restoration/restoration2.jpg") no-repeat;
}

.restorImg3 {
  background: url("../images/restoration/restoration3.jpg") no-repeat;
}

.restorImg4 {
  background: url("../images/restoration/restoration4.jpg") no-repeat;
}

.installImg5 {
  background: url("../images/installation/installation5.jpg") no-repeat;
}

.installImg6 {
  background: url("../images/installation/installation6.jpg") no-repeat;
}

.restorImg1,
.restorImg2,
.restorImg3,
.restorImg4,
.installImg5,
.installImg6 {
  background-position: center center;
  background-size: cover;
  height: 550px;
}

.faqWrap {
  width: 1300px;
  margin: 0 auto;
}

.faqBox {
  width: 100%;
  padding: 30px 65px;
}

.faqBox h3 {
  font-size: 30px;
  text-transform: capitalize;
  color: var(--grey);
  padding-bottom: 5px;
  font-family: barlowbold, arial, sans-serif;
  margin-top: 10px;
}

.faqBox p {
  font-size: 24px;
  line-height: 1.5;
  padding: 15px 0 13px;
}

.faqTit {
  font-size: 36px;
  text-align: center;
  padding-bottom: 35px;
}

.faqbg {
  padding: 35px 0 75px;
}

.mark {
  width: 40px;
  margin-bottom: 5px;
}

.faqLine {
  width: 100px;
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .faqBox h3 {
    font-size: 21px;
  }

  .faqBox p {
    font-size: 18px;
  }

  .faqWrap {
    width: 1100px;
  }

  .mark {
    width: 35px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .faqWrap {
    width: 840px;
  }

  .faqBox h3 {
    font-size: 21px;
  }

  .faqBox p {
    font-size: 18px;
  }

  .faqbg {
    padding: 0 0 35px;
  }

  .mark {
    width: 35px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .faqWrap {
    width: 100%;
  }

  .faqBox h3 {
    font-size: 21px;
  }

  .faqBox p {
    font-size: 18px;
  }

  .faqbg {
    padding: 0 0 35px;
  }

  .faqBox {
    padding: 15px 65px;
  }

  .mark {
    width: 35px;
  }
}

@media only screen and (max-width: 767px) {
  .faqWrap {
    width: 100%;
  }

  .faqBox h3 {
    font-size: 21px;
  }

  .faqBox p {
    font-size: 18px;
  }

  .faqbg {
    padding: 0 0 35px;
  }

  .faqBox {
    padding: 15px 25px;
  }

  .mark {
    width: 35px;
  }

  .bannerRestor {
    background: none;

    height: auto;

    flex-direction: column;
  }

  .bannerRestoreMob {
    display: block;

    width: 100%;
  }

  .restorImg1,
  .restorImg2,
  .restorImg3,
  .restorImg4,
  .installImg5,
  .installImg6 {
    height: 350px;
  }
}

/*========================================================

	COLOR CHARTS page

=========================================================*/

.chartWrap {
  width: 84%;

  max-width: 1300px;

  text-align: center;

  overflow: hidden;

  margin: 0 auto 50px;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  flex-wrap: wrap;
}

.chartBox {
  width: 24%;

  padding: 10px 15px 20px;

  overflow: hidden;
}

.chartBox p {
  font-size: 21px;

  text-transform: capitalize;
}

.chartBox img {
  width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .chartBox {
    width: 48%;
  }
}

@media only screen and (max-width: 767px) {
  .chartBox {
    width: 49%;
  }

  .chartBox p {
    font-size: 18px;
  }
}

@media only screen and (max-width: 479px) {
  .chartBox {
    width: 100%;
  }

  .chartBox p {
    font-size: 18px;
  }
}

/*========================================================

	FLOOR TYPE page

=========================================================*/

.bannerFloorMob {
  display: none;
}

.bannerFloor {
  background: url(../images/floortype/banner-comparison.jpg) no-repeat;

  background-position: center center;

  background-size: cover;

  display: flex;

  /* height: 550px; */

  align-items: center;

  /* justify-content: center; */
}

.bannerFloorCont {
  text-align: center;

  width: 900px;

  margin: 130px auto 0px auto;
}

.floorWrap {
  width: 1300px;

  margin: 50px auto;
}

.floorList {
  width: 100%;

  margin: 35px 0;
}

.floorList h3 {
  font-size: 30px;

  padding-bottom: 20px;

  font-weight: 500;
}

.floorList ul li {
  background: url("../images/icons/Icon-mark-list.png") no-repeat;

  background-position: left top 12px;

  background-size: 15px 15px;

  padding: 5px 0 5px 25px;

  font-size: 24px;
}

.floorLast {
  margin-bottom: 90px;
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .floorWrap {
    width: 90%;
  }

  .bannerFloorCont h1 span {
    font-size: 60px;
  }

  .floorList h3 {
    font-size: 22px;
  }

  .floorList ul li {
    font-size: 20px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .floorWrap {
    width: 90%;
  }

  .bannerFloorCont h1 span {
    font-size: 60px;
  }

  .floorList h3 {
    font-size: 24px;
  }

  .floorList ul li {
    font-size: 20px;

    background-position: left top 10px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .floorWrap {
    width: 90%;
  }

  .bannerFloorCont {
    width: 100%;
  }

  .bannerFloorCont h1 span {
    font-size: 46px;
  }

  .floorList h3 {
    font-size: 21px;
  }

  .floorList ul li {
    font-size: 18px;

    background-position: left top 9px;
  }

  .floorLast {
    margin-bottom: 60px;
  }
}

@media only screen and (max-width: 767px) {
  .floorWrap {
    width: 90%;
  }

  .bannerFloorCont {
    width: 100%;

    margin: 0 auto;

    padding: 20px 0 35px;
  }

  .bannerFloorCont h1 span {
    font-size: 42px;

    line-height: 1;
  }

  .floorList h3 {
    font-size: 21px;
  }

  .floorList ul li {
    font-size: 18px;

    background-position: left top 9px;
  }

  .floorLast {
    margin-bottom: 60px;
  }

  .bannerFloor {
    background: none;

    height: auto;

    display: inline-block;
  }

  .bannerFloorMob {
    width: 100%;

    display: block;
  }
}

@media only screen and (max-width: 479px) {
}

/*========================================================

	WOOD SPECIES COMPARISON page

=========================================================*/

.woodBoxRow {
  display: flex;

  flex-wrap: wrap;

  flex-direction: row;

  justify-content: space-between;

  margin: 60px auto 75px;
}

.woodBoxWrap {
  width: 32%;

  display: flex;

  flex-direction: column;

  padding-bottom: 35px;
}

.woodBox {
  border: 1px solid rgba(163, 98, 9, 0.5);

  flex: 1;
}

.woodTit {
  color: #fff;

  font-size: 32px;

  text-transform: uppercase;

  text-align: center;

  padding: 18px 0;

  height: 75px;

  text-shadow: 2px 2px 1px rgb(0 0 0 / 80%);
}

.woodCol1,
.woodCol2,
.woodCol3 {
  padding: 0 20px;
}

.woodCol1 p,
.woodCol2tit,
.woodCol3 p {
  padding-top: 20px;

  font-size: 30px;

  text-transform: capitalize;

  font-weight: 700;
}

.woodCol1 p span {
  display: block;

  padding: 20px 0;

  font-size: 24px;

  font-weight: 400;

  line-height: 1.5;
}

.woodCol2desc {
  font-weight: 400;

  line-height: 1.5;

  font-size: 21px;

  padding-top: 20px;
}

.woodCol3 p span {
  padding: 20px 0;

  font-size: 21px;

  display: block;

  font-weight: 400;
}

.pinebg {
  background: url("../images/bgs/pinebg.jpg");

  background-size: cover;
}

.beechbg {
  background: url("../images/bgs/beechbg.jpg");

  background-size: cover;
}

.ashbg {
  background: url("../images/bgs/ashbg.jpg");

  background-size: cover;
}

.oakbg {
  background: url("../images/bgs/oakbg.jpg");

  background-size: cover;
}

.maplebg {
  background: url("../images/bgs/maplebg.jpg");

  background-size: cover;
}

.walnutbg {
  background: url("../images/bgs/walnutbg.jpg");

  background-size: cover;
}

.hickorybg {
  background: url("../images/bgs/hickorybg.jpg");

  background-size: cover;
}

.mahoganybg {
  background: url("../images/bgs/mahoganybg.jpg");

  background-size: cover;
}

.brazilianredcherrybg {
  background: url("../images/bgs/brazilianredcherrybg.jpg");

  background-size: cover;
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .woodCol1 p,
  .woodCol2tit,
  .woodCol3 p {
    font-size: 21px;
  }

  .woodCol1 p span,
  .woodCol2desc,
  .woodCol3 p span {
    font-size: 16px;
  }

  .woodBoxRow {
    margin-bottom: 35px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .woodCol1 p,
  .woodCol2tit,
  .woodCol3 p {
    font-size: 21px;
  }

  .woodCol1 p span,
  .woodCol2desc,
  .woodCol3 p span {
    font-size: 16px;
  }

  .woodBoxRow {
    margin-bottom: 35px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .woodBoxWrap {
    width: 48%;
  }

  .woodTit {
    font-size: 24px;
  }

  .woodCol1 p,
  .woodCol2tit,
  .woodCol3 p {
    font-size: 21px;
  }

  .woodCol1 p span,
  .woodCol2desc,
  .woodCol3 p span {
    font-size: 16px;
  }

  .woodBoxRow {
    margin: 40px auto 35px;
  }
}

@media only screen and (max-width: 767px) {
  .woodBoxWrap {
    width: 100%;
  }

  .woodTit {
    font-size: 28px;
  }

  .woodCol1 p,
  .woodCol2tit,
  .woodCol3 p {
    font-size: 21px;
  }

  .woodCol1 p span,
  .woodCol2desc,
  .woodCol3 p span {
    font-size: 16px;
  }

  .woodBoxRow {
    margin: 40px auto 15px;

    flex-direction: column;
  }
}

@media only screen and (max-width: 479px) {
  .woodTit {
    font-size: 24px;
  }
}

/*========================================================

    GALLERY page

=========================================================*/

.gallTitle {
  text-align: center;
}

.gall {
  padding: 80px 0 20px;
}

.galBox {
  width: 1920px;

  margin: 60px auto;

  overflow: hidden;
}

.galleria {
  display: flex;

  flex-direction: row;

  justify-content: space-between;

  flex-wrap: wrap;
}

.itemg {
  width: 32%;

  margin-bottom: 15px;
}

.itemg img {
  width: 100%;

  display: block;
}

.galleria .itemg p {
  padding: 20px 10px;

  font-size: 21px;

  line-height: 1.5;

  margin-bottom: 60px;
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .galBox {
    width: 100%;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .galBox {
    width: 100%;

    margin: 30px auto;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .galBox {
    width: 100%;

    margin: 30px auto;
  }

  .itemg {
    width: 49%;
  }
}

@media only screen and (max-width: 767px) {
  .galBox {
    width: 100%;

    margin: 30px auto;
  }

  .itemg {
    width: 100%;
  }

  .galleria {
    flex-direction: column;
  }
}

/*========================================================
   ABOUT page
=========================================================*/

.bannerAboutMob {
  display: none;
}

.bannerAbout {
  background: url(../images/about/bgAbout.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  /* height: 550px; */
  align-items: center;
  /* justify-content: center; */
}

.aboutbg {
  padding: 130px 0 75px;
}

.aboutFirstp,
.aboutSecp {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;
}

.aboutFirstp img,
.aboutSecp img {
  width: 40px;

  margin-bottom: 10px;
}

.aboutFirstp p,
.aboutSecp p {
  padding: 35px 0;

  width: 1300px;

  margin: 0 auto;

  font-size: 24px;

  line-height: 1.5;

  text-align: center;
}

.aboutSecp h2 {
  font-family: barlowbold, arial, sans-serif;

  text-transform: uppercase;

  font-weight: 400;

  font-size: 30px;

  margin: 20px 0px 0px 0px;

  text-align: center;
}

.aboutsecbg {
  padding: 120px 0;
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .aboutFirstp p,
  .aboutSecp p {
    width: 90%;

    font-size: 21px;
  }

  .aboutbg {
    padding: 50px 0 45px;
  }

  .aboutsecbg {
    padding: 70px 0 50px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .aboutFirstp p,
  .aboutSecp p {
    width: 90%;
  }

  .aboutbg {
    padding: 50px 0 45px;
  }

  .aboutsecbg {
    padding: 50px 0 35px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .aboutFirstp p,
  .aboutSecp p {
    width: 90%;

    font-size: 18px;
  }

  .aboutbg {
    padding: 50px 0 45px;
  }

  .aboutsecbg {
    padding: 50px 0 35px;
  }

  .aboutSecp h2 {
    font-size: 21px;
  }
}

@media only screen and (max-width: 767px) {
  .aboutFirstp p,
  .aboutSecp p {
    width: 90%;

    font-size: 18px;
  }

  .aboutbg {
    padding: 50px 0 45px;
  }

  .aboutsecbg {
    padding: 50px 0 15px;
  }

  .aboutSecp h2 {
    font-size: 21px;
  }

  .bannerAbout {
    background: none;

    height: auto;

    flex-direction: column;
  }

  .bannerAboutMob {
    display: block;

    width: 100%;
  }
}

/*========================================================

	HELPFUL TIPS page

=========================================================*/

.tipsbg {
  padding: 35px 0 75px;
}

.tipsWrap {
  width: 1300px;

  margin: 0 auto;
}

.tipsBox {
  width: 100%;

  padding: 30px 65px 75px;
}

.tipsBox h3 {
  font-size: 30px;

  text-transform: capitalize;

  color: var(--grey);

  padding-bottom: 5px;

  font-family: barlowbold, arial, sans-serif;

  margin: 10px auto 10px;
}

.tipsLine {
  background-color: var(--orange);

  height: 4px;

  width: 100px;
}

.tipsBox p {
  font-size: 24px;

  line-height: 1.5;

  padding: 15px 0 13px;
}

.tipsBtnWrap {
  text-align: left;

  margin-top: 10px;
}

.tipsBtnWrap .orangeBtn {
  font-size: 18px;

  padding: 10px 20px 13px;
}

/*========================================================

	BLOG page

=========================================================*/

.blogbg {
  padding: 0 0 100px;
}

.blogWrap {
  width: 1300px;

  margin: 0 auto;
}

.blogWrap h1 {
  color: var(--grey);

  padding-top: 20px;

  text-align: center;

  line-height: 1.5;
}

.blogCont {
  padding-top: 50px;
}

.blogCont p {
  font-size: 24px;

  line-height: 1.5;

  padding-bottom: 20px;
}

.blogCont h3 {
  font-size: 24px;

  padding-bottom: 15px;
}

.blogCont ul,
.blogCont ol {
  padding-bottom: 20px;
}

.blogCont ul li {
  background: url("../images/icons/Icon-mark-list.png") no-repeat;

  background-position: left top 9px;

  background-size: 18px 18px;

  font-size: 24px;

  padding: 3px 0 3px 30px;
}

.blogCont ol li {
  font-size: 24px;

  padding-left: 0;

  line-height: 1.3;
}

.blogTitle {
  display: flex;

  flex-direction: column;

  gap: 5px;

  margin: 120px 0px 30px 0px;
}

.blogImg img {
  width: 40px;
}

.blogTitle h1 {
  color: var(--grey);

  padding-top: 5px;

  text-align: left;

  line-height: 1.5;

  font-size: 30px;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .blogTitle h1 {
    font-size: 30px;

    line-height: 1.3;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .tipsWrap,
  .blogWrap {
    width: 1100px;
  }

  .tipsBox h3,
  .blogTitle h1 {
    font-size: 23px;

    line-height: 1.3;
  }

  .tipsBox p {
    font-size: 19px;
  }

  .blogCont ul li,
  .blogCont ol li,
  .blogCont p {
    font-size: 18px;
  }

  .tipsBtnWrap .orangeBtn {
    font-size: 16px;
  }

  .tipsbg {
    padding: 35px 0;
  }

  .blogCont {
    padding-top: 20px;
  }

  .blogCont h3 {
    font-size: 21px;

    padding-bottom: 5px;
  }

  .blogCont ul li {
    background-position: left top 7px;

    background-size: 16px 16px;

    padding: 3px 0 3px 28px;
  }

  .blogbg {
    padding-bottom: 75px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .tipsWrap,
  .blogWrap {
    width: 90%;
  }

  .tipsBox h3,
  .blogTitle h1 {
    font-size: 23px;

    line-height: 1.3;
  }

  .tipsBox p {
    font-size: 19px;
  }

  .blogCont ul li,
  .blogCont ol li,
  .blogCont p {
    font-size: 18px;
  }

  .tipsBtnWrap .orangeBtn {
    font-size: 16px;
  }

  .tipsbg {
    padding: 35px 0;
  }

  .blogCont {
    padding-top: 20px;
  }

  .blogCont h3 {
    font-size: 21px;

    padding-bottom: 5px;
  }

  .blogCont ul li {
    background-position: left top 7px;

    background-size: 16px 16px;

    padding: 3px 0 3px 28px;
  }

  .blogbg {
    padding-bottom: 75px;
  }

  .blogTitle {
    margin-top: 75px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .tipsWrap,
  .blogWrap {
    width: 90%;
  }

  .tipsBox h3,
  .blogTitle h1 {
    font-size: 21px;

    line-height: 1.3;
  }

  .tipsBox p {
    font-size: 18px;
  }

  .blogCont ul li,
  .blogCont ol li,
  .blogCont p {
    font-size: 18px;
  }

  .tipsBtnWrap .orangeBtn {
    font-size: 16px;
  }

  .tipsbg {
    padding: 0;
  }

  .blogCont {
    padding-top: 20px;
  }

  .blogCont h3 {
    font-size: 21px;

    padding-bottom: 5px;
  }

  .blogCont ul li {
    background-position: left top 7px;

    background-size: 16px 16px;

    padding: 3px 0 3px 28px;
  }

  .blogbg {
    padding-bottom: 75px;
  }

  .blogTitle {
    margin-top: 75px;
  }

  .tipsBox {
    padding: 30px 0 75px;
  }
}

@media only screen and (max-width: 767px) {
  .tipsWrap {
    width: 90%;
  }

  .blogWrap {
    width: 100%;
  }

  .tipsBox h3,
  .blogTitle h1 {
    font-size: 21px;

    line-height: 1.3;
  }

  .tipsBox p {
    font-size: 18px;
  }

  .blogCont ul li,
  .blogCont ol li,
  .blogCont p {
    font-size: 18px;
  }

  .tipsBtnWrap .orangeBtn {
    font-size: 16px;
  }

  .tipsbg {
    padding: 0;
  }

  .blogCont {
    padding-top: 20px;
  }

  .blogCont h3 {
    font-size: 21px;

    padding-bottom: 5px;
  }

  .blogCont ul li {
    background-position: left top 7px;

    background-size: 16px 16px;

    padding: 3px 0 3px 28px;
  }

  .blogbg {
    padding-bottom: 35px;
  }

  .blogTitle {
    margin-top: 50px;
  }

  .tipsBox {
    padding: 30px 0 75px;
  }
}

/*========================================================

    CONTACT page

=========================================================*/

.contbg {
  padding: 75px 0 120px;
}

.contWrap {
  width: 1300px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.contLeft {
  width: 45%;
}

.contRight {
  width: 55%;
}

.contTel,
.contAdr,
.contHours {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 45px;
  margin-bottom: 35px;
}

.contTel img,
.contAdr img,
.contHours img {
  width: 45px;
}

.contTel p {
  font-size: 28px;
  padding-left: 18px;
}

.contAdr p span,
.contHours p span {
  display: block;
}

.contAdr p,
.contHours p {
  line-height: 1.1;
  font-size: 22px;
  padding-left: 28px;
}

.shortForm {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.callformEr {
  font-size: 24px;
  text-align: center;
  width: 100%;
  font-family: barlowbold, arial, sans-serif;
  margin-bottom: 35px;
}

.shortForm input[type="text"] {
  margin: 0 auto 15px;
  background-color: rgb(255, 255, 255);
  border: none;
  border-bottom: 1px solid #e1e1e1;
  border-radius: 0;
  transition: color 100ms, margin 100ms;
  cursor: pointer;
  color: #777;
  padding: 10px 10px 10px 25px;
  display: block;
  width: 100%;
  height: 90px;
  font-size: 18px;
  outline: none;
}

.shortForm textarea {
  margin: 30px auto;
  border-top: 1px solid #e1e1e1;
  border-left: 1px solid #e1e1e1;
  border-right: 1px solid #e1e1e1;
  border-bottom: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px 10px 10px 25px;
  color: #777;
  font-size: 18px;
  width: 98%;
  height: 160px;
  outline: none;
}

.shortForm input[type="submit"] {
  display: inline-block;
  color: var(--white);
  text-align: center;
  padding: 16px 102px;
  font-size: 18px;
  line-height: 1;
  font-family: barlowbold, arial, sans-serif;
  margin: 0 auto;
  text-transform: capitalize;
  background: var(--orange);
  cursor: pointer;
  border-radius: 25px;
  outline: none;
  border: none;
}

.erRed {
  color: #f51212;
}

.erGreen {
  color: #4dac48;
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .contWrap {
    width: 1100px;
  }

  .callformEr {
    margin-bottom: 15px;
  }

  .shortForm input[type="text"],
  .shortForm textarea {
    font-size: 16px;
  }

  .shortForm input[type="text"] {
    height: 55px;
  }

  .contbg {
    padding: 75px 0 80px;
  }

  .contAdr p,
  .contHours p {
    font-size: 19px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .contWrap {
    width: 900px;
  }

  .callformEr {
    margin-bottom: 15px;
  }

  .shortForm input[type="text"],
  .shortForm textarea {
    font-size: 16px;
  }

  .shortForm input[type="text"] {
    height: 55px;
  }

  .contbg {
    padding: 75px 0 80px;
  }

  .contAdr p,
  .contHours p {
    font-size: 19px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .contWrap {
    width: 90%;

    flex-direction: column;
  }

  .contLeft,
  .contRight {
    width: 500px;

    margin: 0 auto;
  }

  .contRight {
    margin-top: 50px;
  }

  .callformEr {
    margin-bottom: 15px;
  }

  .shortForm input[type="text"],
  .shortForm textarea {
    font-size: 16px;
  }

  .shortForm input[type="text"] {
    height: 55px;
  }

  .contbg {
    padding: 75px 0 80px;
  }

  .contAdr p,
  .contHours p {
    font-size: 19px;
  }

  .contbg {
    padding: 50px 0 75px;
  }
}

@media only screen and (max-width: 767px) {
  .contWrap {
    width: 90%;

    flex-direction: column;
  }

  .contLeft,
  .contRight {
    width: 90%;

    max-width: 500px;

    margin: 0 auto;
  }

  .contRight {
    margin-top: 50px;
  }

  .callformEr {
    margin-bottom: 15px;
  }

  .shortForm input[type="text"],
  .shortForm textarea {
    font-size: 16px;
  }

  .shortForm input[type="text"] {
    height: 55px;
  }

  .contbg {
    padding: 75px 0 80px;
  }

  .contAdr p,
  .contHours p {
    font-size: 19px;
  }

  .contbg {
    padding: 35px 0 40px;
  }
}

@media only screen and (max-width: 479px) {
  .contAdr p,
  .contHours p {
    font-size: 16px;

    padding-left: 15px;
  }

  .contTel img,
  .contAdr img,
  .contHours img {
    width: 35px;
  }

  .contLeft,
  .contRight {
    width: 100%;
  }
}

/*========================================================

    REVIEW US page

=========================================================*/

.rewbg {
  padding: 75px 0 95px;
}

.rewWrap {
  width: 1300px;

  margin: 0 auto;

  display: flex;

  flex-wrap: wrap;

  gap: 2rem;
}

.rewBox {
  width: 23%;

  display: flex;

  flex-direction: column;

  padding: 25px;

  background-color: var(--black);

  border-radius: 25px;

  border: 1px solid var(--orange);
}

.inRewBox {
  width: 100%;
}

.inRewBox img {
  width: 100%;
}

.inRewBox p {
  line-height: 1.5;

  font-family: barlowregular, arial, sans-serif;

  font-size: 18px;

  color: var(--white);

  text-align: center;
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .rewWrap {
    width: 1100px;

    gap: 1.2rem;
  }

  .rewBox {
    width: 23.6%;
  }

  .rewbg {
    padding: 35px 0 75px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .rewWrap {
    width: 900px;

    gap: 1rem;
  }

  .rewBox {
    width: 23.6%;
  }

  .rewbg {
    padding: 35px 0 75px;
  }

  .inRewBox p {
    font-size: 16px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .rewWrap {
    width: 680px;

    gap: 0.5rem;
  }

  .rewBox {
    width: 32.3%;
  }

  .rewbg {
    padding: 35px 0 75px;
  }

  .inRewBox p {
    font-size: 16px;
  }
}

@media only screen and (max-width: 767px) {
  .rewWrap {
    width: 440px;

    gap: 0.9rem;
  }

  .rewBox {
    width: 48%;
  }

  .rewbg {
    padding: 25px 0 35px;
  }

  .inRewBox p {
    font-size: 16px;
  }
}

@media only screen and (max-width: 479px) {
  .rewWrap {
    width: 280px;

    gap: 0;
  }

  .rewBox {
    width: 100%;
  }
}

/*========================================================

    DISCLAIMER page

=========================================================*/

.discbg {
  padding: 75px 0;
}

.discWrap {
  width: 1300px;

  margin: 0 auto;
}

.discWrap h3 {
  font-size: 24px;

  font-family: barlowregular, arial, sans-serif;

  line-height: 1.3;
}

.discWrap p {
  font-size: 18px;

  line-height: 1.5;

  padding-bottom: 20px;
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .discWrap {
    width: 80%;
  }

  .discbg {
    padding: 35px 0 50px;
  }

  .discWrap h3 {
    font-size: 21px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .discWrap {
    width: 80%;
  }

  .discbg {
    padding: 35px 0 50px;
  }

  .discWrap h3 {
    font-size: 18px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .discWrap {
    width: 90%;
  }

  .discbg {
    padding: 35px 0 35px;
  }

  .discWrap h3 {
    font-size: 18px;
  }
}

@media only screen and (max-width: 767px) {
  .discWrap {
    width: 90%;
  }

  .discbg {
    padding: 35px 0 35px;
  }

  .discWrap h3 {
    font-size: 20px;
  }
}

@media only screen and (max-width: 479px) {
  .discbg {
    padding: 20px 0;
  }
}

/*========================================================

    Mobile Menu

=========================================================*/

@media only screen and (max-width: 1300px) {
  .smobitrigger,
  .mnuclose {
    display: inline-block;
  }

  .smobitrigger {
    color: transparent;

    width: 30%;
  }

  .smobitrigger {
    background: url("../images/menuopen.png");

    background-position: center center;

    background-repeat: no-repeat;

    background-size: 60px 60px;

    width: 60px;

    height: 60px;
    border: none;
    cursor: pointer;
  }

  .mnuclose {
    background: url("../images/menuclose.png");

    background-position: right top;

    background-repeat: no-repeat;

    background-size: 60px 60px;

    color: transparent;

    height: 60px;

    margin: 0 0 10px 0;

    width: 100%;

    text-align: right;

    display: inline-block;
    border: none;
    cursor: pointer;
  }

  .menu ul {
    padding: 0 20px;
    overflow-y: auto;
    margin: 0 auto;
    display: inline-block;
  }

  .menu ul li.mlinks,
  .menu ul li.mmlink {
    display: block;
    line-height: 44px;
    text-align: left;
    border-right: none;
  }

  .menu ul li.dtop {
    display: none;
  }

  .menu ul li.dlink a {
    margin: 0 auto;
    padding: 10px 0 10px 0;
    text-align: center;
    width: 100%;
    font-size: 21px;
    line-height: 1.3;
    text-transform: capitalize;
  }

  .menu ul li.mmlink a {
    display: inline-block;
    text-transform: capitalize;
    text-align: center;
    font-size: 28px;
    padding: 0 0;
    line-height: 20px;
  }
  .menu ul li.mlinks a{
    padding: 0 0;
  }

  .menu ul li.mlinks:hover {
    background: transparent;
    padding: 0;
    color: #ccc;
    border: none;
  }

  .menu ul li.mlogo {
    margin: 20px auto 0;
    display: block;
    text-align: left;
  }

  .menu ul li.mlogo img {
    width: 260px;
    margin: 0 auto 30px;
  }

  .menu ul li.mphone {
    display: block;
    color: #777;
    margin-bottom: 15px;
    text-align: left;
  }

  .menu ul li.mphone span {
    display: block;
    font-size: 16px;
    font-weight: 300;
    color: #777;
  }

  .menu ul li.mphone a {
    font-size: 32px;
  }

  .menu ul li.maddress {
    display: block;
    font-size: 20px;
    line-height: 1.5;
    text-transform: capitalize;
    margin: 35px auto;
    color: #777;
    text-align: center;
  }

  .menu ul li.maddress span {
    display: block;
  }

  .menu ul li.mhours {
    display: block;
    font-size: 21px;
    line-height: 1.5;
    margin: 0 auto 30px;
    color: #777;
    text-align: left;
  }

  .menu ul li.mhours span {
    display: block;
  }

  .menu ul li.msocial {
    display: block;
    text-align: left;
    margin: 30px 0 80px;
  }

  .menu ul li.msocial img {
    width: 50px;
    height: 50px;
    margin-right: 5px;
  }

  .menu ul li.msocial .googleCent img {
    width: 45px;
  }

  .mobimenu {
    padding: 0;
    margin: 0px;
    width: 14.9375em;
    position: fixed;
    height: 100% !important;
    top: 0px;
    left: -24.625em;
  }

  .mnuopn {
    left: 0px !important;
  }

  .ovrActv {
    position: fixed;
    background: rgba(0, 0, 0, 0.79);
    width: 100%;
    height: 100%;
    z-index: 9998;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }

  .companyLogo {
    width: 70%;
  }

  .companyLogo img {
    width: 200px;
    margin-top: 3px;
  }

  .navigation {
    width: 30%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    text-align: right;
  }

  .tel {
    display: none;
  }

  .telMob {
    display: inline-block;
    width: 50%;
  }

  .menu {
    width: 50%;
  }

  .menu span {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .menu ul {
    background: none !important;
  }
}

@media only screen and (max-width: 767px){
    .telMob {
        display: none;
      }
}




@media only screen and (max-width: 479px) {
  .companyLogo {
    width: 60%;
  }

  .navigation {
    width: 40%;
  }

  .companyLogo img {
    width: 180px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    padding: 10px;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
}