/*========================================================
Main Style for Skampa Painting 2025
=========================================================*/
/* colors declaration */
:root {
  --main-text: #000;
  --orange: #fd9106;
  --blue: #1e547a;
  --btn-white: #fff;
  --btn-black: #000;
  --light-black: #444;
  --blueSect-text: #e5e6e8;
  --footer-bg: #15415e;
}


/* 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,
fieldset,
form,
label,
legend,
caption,
article,
aside,
figcaption,
footer,
header,
hgroup,
menu,
nav,
section,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
}

ol,
ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

*:focus {
  outline: none;
}

* {
  box-sizing: border-box;
}

input[type='submit'] {
  -webkit-appearance: none;
  border-radius: 0;
}

/* end reset */

/***********************************************************************************************/

/* common layout sections  - ALL common layouts for frame exist in this section */
body {
  font-size: 21px;
  font-family: 'Barlow', sans-serif;
  font-weight: 400;
  color: #222;
}

p {
  line-height: 1.5;
  font-family: 'Barlow', arial, sans-serif;
  color: var(--main-text);
}


/***********************************************************************************************/

/* common styling */
h1,
h2,
h3 {
  font-family: catamaran, arial, sans-serif;
  text-transform: capitalize;
}

h1 {
  font-size: 115px;
}

h2 {
  font-size: 96px;
  color: var(--main-text);
}

h3 {
  line-height: 3em;
  font-size: 28px;
  letter-spacing: 1px;
}

/* end common styling */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {

  h1,
  h2 {
    font-size: 86px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  body{
    font-size: 19px;
  }
  h1,
  h2 {
    font-size: 76px;
    font-weight: 400;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  body{
    font-size: 19px;
  }
  h1,
  h2 {
    font-size: 60px;
    font-weight: 400;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  body{
    font-size: 19px;
  }
  h1,
  h2 {
    font-size: 60px;
    font-weight: 400;
  }
}

@media only screen and (max-width: 767px) {
  body{
    font-size: 19px;
  }
  h1,
  h2 {
    font-size: 60px;
    font-weight: 400;
  }
}

@media only screen and (max-width: 479px) {
  h1,
  h2 {
    font-size: 56px;
  }
}

/*========================================================
TOP & NAVIGATION
=========================================================*/
/* not display on large screen */
.smobitrigger,
.mnuclose,
.menu ul li.mlogo,
.phoneMob,
.logoMob,
.telMob,
.menu ul li.mphone,
.menu ul li.madr,
.menu ul li.mhours,
.menu ul li.msocial,
.menu ul li.mmlink,
.menu ul li.maddress,
.fooList ul li.mlogo,
.fooList ul li.mphone,
.fooList ul li.madr,
.fooList ul li.mhours,
.fooList ul li.msocial,
.fooList ul li.mmlink,
.scrollinglogosMob,
.bannerTopMobWrap,
.bannerTypesMob,
.mh1Mob,
.bannerAboutMob,
.topNavWrapMob {
  display: none;
}
/* end not display */

.pageFull {
  width: 100%;
}
.pageSize {
  width: 75%;
  margin: 0 auto;
  max-width: 1908px;
}
.newSize{
  width: 72%;
  margin: 0 auto;
}
.pageBann {
  width: 75%;
  margin: 0 auto;
  max-width: 1908px;
}
.pageLadder {
  width: 90%;
  margin: 0 auto;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .pageBann {
    width: 90%;
    max-width: 1728px;
  }
  .newSize {
    width: 86%;
  }
  .pageSize{
    width: 90%;
    max-width: 1728px;
  }
}

@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .pageSize,
  .pageBann {
    width: 90%;
    max-width: 1301px;
  }
  .newSize {
    width: 85%;
    max-width: 1301px;
  }
  .pageLadder{
    max-width: 1301px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .pageSize,
  .pageBann {
    width: 90%;
    max-width: 922px;
  }
  .newSize {
    width: 95%;
    max-width: 922px;
  }
  .pageLadder{
    max-width: 922px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .pageSize{
    width: 90%;
  }
  .newSize {
    width: 95%;
  }
  .pageBann {
    width: 100%;
  }
  .pageLadder {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .pageSize{
    width: 90%;
  }
  .pageLadder,
  .pageBann {
    width: 100%;
  }
  .newSize {
    width: 90%;
  }
}

/* top section  */
.sectionFrame{
  position: relative;
}
.top {
  width: 100%;
  display: block;
  position: static;
  background: #fff;
  border-bottom: 1px solid #ccc;
}

.boxesWrap {
  width: 75%;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  max-width: 1908px;
}

.one {
  width: 18%;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100px;
}

.two {
  width: 52%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.one img {
  width: 345px;
  display: block;
}

.three {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  height: 100px;
}


.topPhone{
  display: flex;
  justify-content: space-between;
}

.topPhone a span,
.topLocation p span{
  display: block;
  font-size: 24px;
  font-weight: 400;
  text-transform: capitalize;
}
.topPhone a {
  background: url('../images/index/phone-icon.png');
}
.topLocation p{
  background: url('../images/index/location-icon.png');
}
.topPhone a,
.topLocation p{
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 60px 60px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  padding-left: 75px;
  text-transform: capitalize;
  text-align: left;
  min-height: 60px;
}

/*** menu section ***/
.menu ul li.mlink,
.menu ul li.m1link,
.menu ul li.m2link,
.menu ul li.m3link,
.menu ul li.mmlinks {
  display: none;
}

.menu ul li.dlink {
  font-size: 30px;
  display: inline-block;
  text-transform: capitalize;
  line-height: 110px;
  padding: 0 20px;
  font-weight: 400;
  position: relative;
}
.menu ul li.dlink:hover::before{
  content: " ";
  background-image: url('../images/index/menu-dots.png');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 64px 9px;
  left: 20px;
  bottom: 20px;
  position: absolute;
  width: 64px;
  height: 9px;
}
.menu ul li.dlink a {
  color: var(--btn-black);
}
.topNavCenter{
  width: 75%;
  max-width: 1908px;
  margin: 0 auto;
  position: relative;
}
.topNavWrapDesk{
  position: absolute;
  left: 0;
  top: 0px;
}

/*** end menu section ***/
/* end top section  */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .boxesWrap {
    width: 90%;
    max-width: 1728px;
  }

  .one {
    width: 23%;
  }

  .two {
    width: 51%;
  }

  .three {
    width: 26%;
  }
  .topPhone a span,
  .topLocation p span {
    font-size: 18px;
  }
  .topPhone a,
  .topLocation p {
    background-size: 45px 45px;
    font-size: 24px;
    padding-left: 55px;
    min-height: 45px;
  }
  .topNavCenter{
    width: 90%;
    max-width: 1728px;
  }

  .menu ul li.dlink {
    font-size: 24px;
    line-height: 70px;
    padding: 0 20px 0 0;
  }
  .menu ul li.dlink:hover::before{
    background-size: 54px 7px;
    left: 5px;
    bottom: 4px;
    width: 54px;
    height: 7px;
  }
}
@media only screen and (min-width: 1601px) and (max-width: 1919px){
  .two {
    width: 41%;
  }
  .three {
    width: 36%;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .boxesWrap {
    width: 94%;
    max-width: 1301px;
  }

  .one {
    width: 23%;
  }

  .two {
    width: 42%;
  }

  .three {
    width: 35%;
  }


  .topPhone a span,
  .topLocation p span {
    font-size: 18px;
  }
  .topPhone a,
  .topLocation p {
    background-size: 45px 45px;
    font-size: 23px;
    padding-left: 55px;
    min-height: 45px;
  }
  .topNavCenter{
    width: 90%;
    max-width: 1301px;
  }
  .topNavWrapDesk {


  }
  .menu ul li.dlink {
    font-size: 18px;
    line-height: 70px;
    padding: 0 20px 0 0;
  }
  .one img {
    width: 300px;
  }
  .menu ul li.dlink:hover::before{
    background-size: 54px 7px;
    left: 0px;
    bottom: 10px;
    width: 54px;
    height: 7px;
  }
}

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

  .one {
    width: 23%;
  }

  .two {
    width: 51%;
  }

  .three {
    width: 26%;
  }

  .topPhone {
    min-height: 45px;
  }
  .topPhone a {
    background-size: 45px 45px;
    font-size: 26px;
    padding-left: 55px;
  }
  .topPhone a span,
  .topLocation p span {
    font-size: 18px;
  }
  .topLocation p {
    background-size: 45px 45px;
    font-size: 21px;
    padding-left: 55px;
  }
  .topNavWrapDesk {
    width: 90%;
    left: 5%;
  }
  .menu ul li.dlink {
    font-size: 16px;
    line-height: 70px;
    padding: 0 20px 0 0;
  }
  .one img {
    width: 220px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .one img {
    width: 220px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 2559px) {
  .menu ul {
    background: none !important;
  }
}


/*========================================================
Buttons
=========================================================*/
.banPetBtn {
  display: inline-block;
  padding: 55px 95px;
  font-family: arial, sans-serif;
  font-size: 30px;
  font-weight: 700;
  border-radius: 80px;
  background: var(--orange);
  color: var(--btn-white);
  text-transform: uppercase;
}

/*========================================================
INDEX BANNER
=========================================================*/
.bannImgMobile {
  display: none;
}
.banPaint {
  background: url('../images/index/bg-top-banner.jpg');
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 960px;
  position: relative;
}
.brushPainting{
  position: absolute;
  bottom: 21%;
  left: -7%;
  width: 24%;
  height: 10%;
}
.banPaintWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1908px;
  margin: 0 auto;
}
.banPaintLeft{
  width: 53%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.banPaintRight{
  width: 47%;
}
.banPaint h1{
  color: var(--blue);
  font-family: 'Abril Fatface', sans-serif;
  font-size: 207px;
  line-height: 1;
  text-transform: uppercase;
}
.banPaint h1 span{
  display: block;
  font-size: 86px;
}
.banPaint p{
  font-size: 48px;
  margin: 90px 0 0 50px;
}
.banPaintBtnPlace {
  margin-top: 50px;
  text-align: center;
}
.banPaintRight{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.bannImgDesktop {
  height: 95%;
  display: block;
}
br.onlyMobBr{
  display: none;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .banPaintWrap {
    max-width: 1728px;
  }
  .banPaint h1 span {
    font-size: 76px;
  }
  .banPaint h1 {
    font-size:  185px;
  }
  .banPaint p {
    margin: 60px auto 0;
    font-size: 38px;
  }
  .banPetBtn {
    padding: 35px 65px;
    font-size: 24px;
  }
  .brushPainting {
    bottom: 20%;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .banPaint h1 span {
    font-size: 54px;
  }
  .banPaint h1 {
    font-size:  130px;
    padding-top: 100px;
  }
  .banPaint p {
    margin: 60px auto 0;
    font-size: 28px;
  }
  .banPetBtn {
    padding: 25px 65px;
    font-size: 21px;
  }
  .banPaint,
  .banPaintWrap,
  .banPaintLeft,
  .banPaintRight {
    height: 660px;
  }
  .banPaintLeft{
    width: 52%;
  }
  .banPaintWrap{
    max-width: 1301px;
  }
  .banPaintBtnPlace {
    margin-top: 80px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .banPaint h1 span {
    font-size: 42px;
  }
  .banPaint h1 {
    font-size:  102px;
  }
  .banPaint p {
    margin: 35px auto 0;
    font-size: 21px;
  }
  .banPetBtn {
    padding: 25px 55px;
    font-size: 21px;
  }
  .banPaint,
  .banPaintWrap,
  .banPaintLeft,
  .banPaintRight {
    height: 760px;
  }
  .banPaintBtnPlace {
    margin-top: 180px;
  }
  .brushPainting {
    width: 320px;
    bottom: 36%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .banPaint {
    background: none;
    height: auto;
  }
  .banPaintWrap {
    flex-direction: column-reverse;
  }
  .banPaintLeft,
  .banPaintRight {
    width: 100%;
  }
  .bannImgDesktop {
    display: none;
  }
  .bannImgMobile {
    display: block;
    width: 100%;
  }
  .banPaint h1 span {
    font-size: 48px;
    padding-top: 35px;
  }
  .banPaintLeft {
    width: 90%;
    margin: 0 auto;
  }
  .banPaint h1 {
    font-size: 115px;
    text-align: center;
  }
  .banPaint p {
    font-size: 26px;
    margin: 35px auto 0;
  }
  .banPetBtn {
    padding: 25px 55px;
    font-size: 20px;
  }
  .banPaintBtnPlace {
    margin: 50px auto;
  }
  .brushPainting {
    bottom: 2%;
    width: 35%;
  }
}
@media only screen and (max-width: 767px) {
  .banPaint {
    background: none;
    height: auto;
  }
  br.onlyMobBr{
    display: block;
  }
  .banPaintWrap {
    flex-direction: column-reverse;
  }
  .banPaintLeft,
  .banPaintRight {
    width: 100%;
  }
  .bannImgDesktop {
    display: none;
  }
  .bannImgMobile {
    display: block;
    width: 100%;
  }
  .banPaint h1 span {
    font-size: 34px;
    padding-top: 35px;
  }
  .banPaintLeft {
    width: 90%;
    margin: 0 auto;
  }
  .banPaint h1 {
    font-size: 65px;
    text-align: center;
  }
  .banPaint p {
    font-size: 21px;
    margin: 35px auto 0;
    text-align: center;
  }
  .banPetBtn {
    padding: 25px 55px;
    font-size: 20px;
  }
  .banPaintBtnPlace {
    margin: 50px auto;
  }
  .brushPainting {
    display: none;
  }
}
@media only screen and (max-width: 479px) {
  .banPaint h1 span {
    font-size: 25px;
    padding-top: 25px;
  }
  .banPaint h1 {
    font-size: 64px;
  }
  .banPaint p {
    font-size: 21px;
    margin: 20px auto 0;
    line-height: 1.2;
  }
  .banPetBtn {
    padding: 20px 35px;
    font-size: 16px;
  }
  .banPaintBtnPlace {
    margin: 20px auto 25px;
  }
}

/*========================================================
blueSect Index
=========================================================*/
.blueSect{
  background: url('../images/index/bg-blue-2-block.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 1396px;
  padding: 150px 0 0;
}
.blueSectWrap{
  display: flex;
  justify-content: space-between;
}
.blueSectLeft,
.blueSectRight{
  width: 50%;
}
.blueSect h2{
  color: var(--btn-white);
  font-family: 'Abril Fatface', sans-serif;
  font-size: 72px;
  text-transform: uppercase;
  line-height: 1.2;
}
.blueSect h2 span{
  display: block;
  font-size: 120px;
}
.blueSectDotsWrap{
  margin-left: 200px;
  background: url('../images/index/line-dots.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 704px;
  height: 823px;
  padding: 40px 0 0 70px;
}
.blueSectDotsLink{
  margin-bottom: 85px;
}
.blueSectDotsLink p{
  display: flex;
  align-items: center;
}
.blueSectDotsLink p a{
  color: var(--blueSect-text);
  font-size: 48px;
  margin-left: 35px;
  text-transform: capitalize;
}
.blueSectDotsLink img{
  border-right: 5px solid var(--blueSect-text);
  padding-right: 35px;
}
.blueSectDotsBtnPlace{
  padding: 70px 0 0 100px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .blueSect h2 span {
    font-size: 100px;
  }
  .blueSect h2 {
    font-size: 58px;
  }
  .blueSectDotsLink img {
    width: 135px;
  }
  .blueSectDotsLink p a {
    font-size: 38px;
  }
  .blueSectDotsLink {
    margin-bottom: 105px;
  }
  .blueSect {
    height: 1200px;
    padding-top: 100px;
  }
}
@media only screen and (min-width: 1601px) and (max-width: 1919px) {
  .blueSect h2 span {
    font-size: 74px;
  }
  .blueSect h2 {
    font-size: 38px;
  }
  .blueSectDotsLink img {
    width: 100px;
  }
  .blueSectDotsLink p a {
    font-size: 28px;
  }
  .blueSectDotsLink {
    margin-bottom: 90px;
  }
  .blueSect {
    height: 1000px;
    padding-top: 100px;
  }
  .blueSectDotsWrap {
    margin-left: 80px;
    width: 500px;
    height: 585px;
  }
  .blueSectDotsBtnPlace {
    padding: 40px 0 0 80px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1600px) {
  .blueSect h2 span {
    font-size: 74px;
  }
  .blueSect h2 {
    font-size: 38px;
  }
  .blueSectDotsLink img {
    width: 100px;
  }
  .blueSectDotsLink p a {
    font-size: 28px;
  }
  .blueSectDotsLink {
    margin-bottom: 80px;
  }
  .blueSect {
    height: 980px;
    padding-top: 100px;
  }
  .blueSectDotsWrap {
    margin-left: 80px;
    width: 500px;
    height: 585px;
  }
  .blueSectDotsBtnPlace {
    padding: 40px 0 0 80px;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .blueSect h2 span {
    font-size: 74px;
  }
  .blueSect h2 {
    font-size: 38px;
  }
  .blueSectDotsLink img {
    width: 90px;
  }
  .blueSectDotsLink p a {
    font-size: 21px;
  }
  .blueSectDotsLink {
    margin-bottom: 50px;
  }
  .blueSect {
    height: 780px;
    padding-top: 50px;
  }
  .blueSectDotsWrap {
    margin-left: 80px;
    width: 360px;
    height: 421px;
    padding-top: 30px;
    padding-left: 50px;
  }
  .blueSectDotsBtnPlace {
    padding: 40px 0 0 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .blueSect {
    padding: 35px 0 70px;
    height: auto;
    background: #1e547a;
  }
  .blueSectWrap {
    flex-direction: column;
  }
  .blueSectLeft, .blueSectRight {
    width: 100%;
  }
  .blueSectLeft {
    margin-bottom: 50px;
  }
  .blueSect h2 span {
    font-size: 80px;
  }
  .blueSect h2 {
    font-size: 32px;
    text-align: center;
  }
  .blueSectDotsWrap {
    margin: 0 auto;
  }
  .blueSectDotsBtnPlace {
    padding-top: 110px;
  }
}
@media only screen and (max-width: 767px) {
  .blueSect {
    padding: 35px 0 70px;
    height: auto;
    background: #1e547a;
  }
  .blueSectWrap {
    flex-direction: column;
  }
  .blueSectLeft, .blueSectRight {
    width: 100%;
  }
  .blueSectLeft {
    margin-bottom: 50px;
  }
  .blueSect h2 span {
    font-size: 80px;
  }
  .blueSect h2 {
    font-size: 32px;
    text-align: center;
  }
  .blueSectDotsWrap {
    margin: 0 auto;
    width: 440px;
    height: 514px;
    padding-left: 50px;
    padding-top: 30px;
  }
  .blueSectDotsBtnPlace {
    padding-top: 80px;
    padding-left: 35px;
  }
  .blueSectDotsLink img {
    width: 110px;
  }
  .blueSectDotsLink p a {
    font-size: 26px;
  }
  .blueSectDotsLink {
    margin-bottom: 45px;
  }
}
@media only screen and (max-width: 479px) {
  .blueSectDotsWrap {
    width: 288px;
    height: 337px;
  }
  .blueSect h2 span {
    font-size: 60px;
  }
  .blueSect h2 {
    font-size: 24px;
  }
  .blueSectDotsLink img {
    width: 60px;
    padding-right: 15px;
  }
  .blueSectDotsLink p a {
    margin-left: 15px;
    font-size: 18px;
  }
  .blueSectDotsWrap {
    padding-left: 25px;
    padding-top: 20px;
  }
  .blueSectDotsLink {
    margin-bottom: 40px;
  }
  .blueSectDotsBtnPlace {
    padding-top: 35px;
    padding-left: 0;
  }
}

/*========================================================
grWaves Index
=========================================================*/
.grWaves{
  background: url('../images/index/gray-bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 580px 0 0;
}
.grWavesTitleWrap{
  display: flex;
  justify-content: space-between;
}
.grWavesTitleLeft,
.grWavesTitleRight{
  width: 50%;
}
.grWavesTitleLeft{
  position: relative;
}
.grWavesLeftBox{
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: -800px;
  left: 0;
}
.grWavesLeftBox h2{
  color: var(--blue);
  font-family: 'Abril Fatface', sans-serif;
  font-size: 90px;
  text-transform: uppercase;
}
.grWavesBlack{
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: capitalize;
  text-align: center;
  margin-top: 30px;
}
.grWaveOrangeRound{
  border: 8px dotted var(--orange);
  border-radius: 80px;
  padding: 20px 60px;
  margin-top: 60px;
}
.grWaveOrangeRound p{
  font-size: 36px;
  text-transform: capitalize;
  text-align: center;
}
.grWaveOrangeRound p span{
  display: block;
}
.grWavesBlack span{
  display: block;
}

.grWavesTitleRight{
  position: relative;
}
.grWavesDescr{
  margin-top: 80px;
  text-align: center;
  position: relative;
}
.path2{
  position: absolute;
  left: 0;
  top: 65px;
}
.grWavesTitleRight h2{
  color: var(--blue);
  font-family: 'Abril Fatface', sans-serif;
  font-size: 90px;
  text-transform: capitalize;
  line-height: 1.2;
  padding-left: 200px;
}
.brushPainting2{
  position: absolute;
  bottom: 78%;
  right: -32%;
  width: 48%;
  height: 22%;
}
.grWavesDescr p{
  font-size: 60px;
  line-height: 1.1;
  font-weight: 500;
  text-transform: capitalize;
  padding: 100px;
}
.grWavesDescr p span{
  display: block;
}


.grMiddle{
  background: #f6f6f6;
  padding: 0 0 100px;
}
.grMiddleWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 100px 0 60px;
}
.grMiddleWrapServPage{
  padding: 0 0 0;
}
.grMiddleWrapMobile{
  display: none!important;
}
.grMiddleBox{
  width: 31%;
  margin: 10px 0 40px 0;
}
.grMiddleBox p{
  font-size: 36px;
  line-height: 1.2;
  text-align: center;
  margin: 5px 0 0;
}
.grMiddleBox img{
  width: 100%;
  height: auto;
  border-radius: 80px;
  border: 9px dotted #c0bcbc;
  padding: 6px;
}
.grMiddleBtnPlace{
  text-align: center;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .grWavesLeftBox h2 {
    font-size: 70px;
  }
  .grWavesBlack {
    font-size: 48px;
    margin-top: 20px;
  }
  .grWaveOrangeRound p {
    font-size: 28px;
  }
  .grWaves {
    padding-top: 380px;
  }
  .grWavesTitleRight h2 {
    font-size: 70px;
    padding-left: 100px;
  }
  .grWavesLeftBox {
    top: -680px;
  }
  .grWavesDescr p {
    font-size: 42px;
    padding: 120px 100px 80px;
  }
  .grMiddleBox img {
    width: 100%;
    display: block;
  }
  .grMiddleBox {
    width: 32%;
  }
  .grMiddleBox p {
    font-size: 28px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .grWavesLeftBox h2 {
    font-size: 50px;
  }
  .grWavesBlack {
    font-size: 38px;
    margin-top: 20px;
  }
  .grWaveOrangeRound p {
    font-size: 21px;
  }
  .grWaves {
    padding-top: 240px;
  }
  .grWavesTitleRight h2 {
    font-size: 50px;
    padding-left: 100px;
  }
  .grWavesLeftBox {
    top: -380px;
  }
  .grWavesDescr p {
    font-size: 32px;
    padding: 120px 100px 80px;
  }
  .grMiddleBox img{
    border: 7px dotted #c0bcbc;
  }
  .grMiddleBox {
    width: 32%;
  }
  .grMiddleBox p {
    font-size: 22px;
  }
  .brushPainting2 {
    right: 0;
    bottom: 62%;
  }
  .grWavesDescr img {
    width: 600px;
  }
  .grMiddle {
    padding-bottom: 30px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .grWavesLeftBox h2 {
    font-size: 42px;
  }
  .grWavesBlack {
    font-size: 28px;
    margin-top: 20px;
  }
  .grWaveOrangeRound p {
    font-size: 21px;
  }
  .grWaves {
    padding-top: 240px;
  }
  .grWavesTitleRight h2 {
    font-size: 50px;
    padding-left: 100px;
  }
  .grWavesLeftBox {
    top: -380px;
  }
  .grWavesDescr p {
    font-size: 21px;
    padding: 90px 30px 80px;
  }
  .grMiddleBox img{
    border: 7px dotted #c0bcbc;
  }
  .grMiddleBox {
    width: 32%;
  }
  .grMiddleBox p {
    font-size: 22px;
  }
  .brushPainting2 {
    right: 0;
    bottom: 62%;
  }
  .grWavesDescr img {
    width: 300px;
  }
  .grMiddle {
    padding-bottom: 30px;
  }
  .grMiddleWrap {
    padding: 0 0 20px;
  }
  .grMiddleWrapServPage{
    padding: 0 0 0;
  }
  .path2 {
    right: 0;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .grWavesLeftBox {
    position: static;
  }
  .grWaves {
    padding-top: 50px;
  }
  .grWavesTitleWrap {
    flex-direction: column;
  }
  .grWavesTitleLeft, .grWavesTitleRight {
    width: 100%;
  }
  .grWavesLeftBox h2 {
    font-size: 70px;
  }
  .grWavesBlack {
    font-size: 48px;
  }
  .grWavesTitleLeft {
    margin-bottom: 50px;
  }
  .grWavesTitleRight h2 {
    font-size: 54px;
    padding-left: 0;
  }
  .brushPainting2 {
    right: 0;
  }
  .grWavesDescr {
    margin: 50px auto 0;
  }
  .grWavesDescr p {
    font-size: 40px;
    padding: 120px 100px 100px;
  }
  .grMiddleWrap {
    padding-top: 45px;
    flex-direction: column;
  }
  .grMiddleWrapServPage{
    padding: 0 0 0;
  }
  .grMiddleBox {
    width: 700px;
    margin: 10px auto 40px;
  }
  .grMiddleBox img{
    border: 7px dotted #c0bcbc;
  }
  .grMiddleBox p {
    font-size: 32px;
  }
  .grMiddle {
    padding-bottom: 50px;
  }
  .path2 {
    right: 0;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 767px) {
  .grWavesLeftBox {
    position: static;
  }
  .grWaves {
    padding-top: 50px;
  }
  .grWavesTitleWrap {
    flex-direction: column;
  }
  .grWavesTitleLeft,
  .grWavesTitleRight {
    width: 100%;
  }
  .grWavesLeftBox h2 {
    font-size: 40px;
  }
  .grWavesBlack {
    font-size: 28px;
  }
  .grWavesTitleLeft {
    margin-bottom: 50px;
  }
  .grWavesTitleRight h2 {
    font-size: 44px;
    padding-left: 0;
    text-align: center;
  }
  .grWaveOrangeRound p {
    font-size: 24px;
  }
  .brushPainting2 {
    display: none;
  }
  .grWavesDescr {
    margin: 0 auto;
  }
  .grWavesDescr p {
    font-size: 24px;
    padding: 95px 70px 80px;
  }
  .grMiddleWrap {
    padding: 35px 0 0;
    flex-direction: column;
  }
  .grMiddleWrapServPage{
    padding: 0 0 0;
  }
  .grMiddleWrapDesktop{
    display: none;
  }
  .grMiddleWrapMobile{
    display: block!important;
  }
  .grMiddleBox {
    width: 100%;
    max-width: 440px;
    margin: 0 auto 10px;
  }
  .grMiddleBox img{
    border: 7px dotted #c0bcbc;
  }
  .grMiddleBox p {
    font-size: 28px;
  }
  .grMiddle {
    padding-bottom: 50px;
  }
  .path2 {
    width: 400px;
    right: 0;
    margin: 0 auto;
  }
  .grMiddleBtnPlace {
    margin: 40px 0 0;
  }
}
@media only screen and (max-width: 479px) {
  .path2  {
    width: 288px;
  }
  .grMiddleBox {
    width: 100%;
  }
  .grWavesLeftBox h2 {
    font-size: 44px;
    text-align: center;
    line-height: 1.1;
  }
  .grWaves {
    padding-top: 30px;
  }
  .grWaveOrangeRound {
    padding: 20px;
    margin-top: 25px;
  }
  .grWavesDescr p {
    font-size: 18px;
    padding: 40px 20px 80px;
  }
  .path2 {
    top: 15px;
  }
  .grMiddleWrap {
    padding-top: 0;
  }
  .grMiddleBox p {
    font-size: 21px;
  }
}
/*========================================================
ladder Index
=========================================================*/
.ladderImgMobile,
.callTodayMobile {
  display: none;
}
.ladder{
  background: url('../images/index/ladder-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 560px 0 200px;
}
.ladderWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ladderLeft{
  width: 50%;
}
.ladderRight{
  width: 50%;
}
.ladderTitle h2{
  color: var(--btn-white);
  font-family: "Abril Fatface", arial;
  font-size: 72px;
  text-transform: uppercase;
}
.ladderTitle h2 span{
  display: block;
  font-family: "Barlow", arial;
  font-weight: 700;
  font-size: 70px;
  color: var(--orange);
}
.ladderBorder{
  border-left: 6px solid var(--btn-white);
  padding: 15px 0 15px 30px;
  margin: 65px 0 80px;
}
.ladderBorder p{
  color: var(--btn-white);
  font-size: 36px;
}
.ladderParag p{
  color: var(--btn-white);
  font-size: 30px;
  margin-bottom: 40px;
  font-style: italic;
}
.ladderBtnPlace{
  text-align: center;
}
.ladderBtnPlace .banPetBtn{
  box-shadow: 0 6px 4px 0px gray;
}
.callTodayPlace{
  margin-top: 420px;
}
.callTodayPlace img{
  max-width: 650px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .ladderTitle h2 {
    font-size: 60px;
  }
  .ladderTitle h2 span {
    font-size: 52px;
  }
  .ladderBorder p {
    font-size: 28px;
  }
  .ladderParag p {
    font-size: 24px;
  }
  .ladderBorder {
    margin: 65px 0 60px;
  }
  .ladder {
    padding: 350px 0 120px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .ladderTitle h2 {
    font-size: 48px;
  }
  .ladderTitle h2 span {
    font-size: 38px;
  }
  .ladderBorder p {
    font-size: 21px;
  }
  .ladderParag p {
    font-size: 18px;
  }
  .ladderBorder {
    margin: 65px 0 35px;
  }
  .ladder {
    padding: 330px 0 160px;
  }
  .callTodayPlace {
    margin-top: 240px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .ladderTitle h2 {
    font-size: 42px;
    padding-top: 50px;
  }
  .ladderTitle h2 span {
    font-size: 32px;
  }
  .ladderBorder p {
    font-size: 21px;
  }
  .ladderParag p {
    font-size: 18px;
  }
  .ladderBorder {
    margin: 35px 0 30px;
  }
  .ladder {
    padding: 160px 0 120px;
  }
  .callTodayPlace {
    margin-top: 320px;
  }
  .callTodayPlace img {
    max-width: 400px;
    margin-left: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .ladder {
    padding: 50px 0 0;
    background-image: none;
    background-color: #1e547a;
  }
  .ladderWrap {
    flex-direction: column;
  }
  .ladderLeft {
    width: 90%;
    margin: 0 auto;
  }
  .ladderRight {
    width: 100%;
    position: relative;
  }
  .ladderTitle h2 {
    font-size: 64px;
  }
  .ladderTitle h2 span {
    font-size: 50px;
  }
  .ladderBorder {
    margin: 35px 0 30px;
  }
  .ladderBorder p {
    font-size: 24px;
  }
  .ladderParag p {
    font-size: 18px;
  }
  .ladderImgMobile {
    display: block;
    width: 100%;
  }
  .callTodayPlace {
    display: none;
  }
  .callTodayMobile {
    display: block;
    position: absolute;
    left: 50px;
    top: 130px;
    width: 450px;
  }
}
@media only screen and (max-width: 767px) {
  .ladder {
    padding: 50px 0 0;
    background-image: none;
    background-color: #1e547a;
  }
  .ladderWrap {
    flex-direction: column;
  }
  .ladderLeft {
    width: 90%;
    margin: 0 auto 25px;
  }
  .ladderRight {
    width: 100%;
    position: relative;
  }
  .ladderTitle h2 {
    font-size: 40px;
  }
  .ladderTitle h2 span {
    font-size: 30px;
  }
  .ladderBorder {
    margin: 35px 0 30px;
  }
  .ladderBorder p {
    font-size: 21px;
  }
  .ladderParag p {
    font-size: 18px;
  }
  .ladderImgMobile {
    display: block;
    width: 100%;
  }
  .callTodayPlace {
    display: none;
  }
  .callTodayMobile {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 110px;
    width: 420px;
  }
  .callTodayMobile img {
    width: 100%;
  }
  .ladderTitle h2 {
    line-height: 1.1;
  }
}
@media only screen and (max-width: 479px) {
  .callTodayMobile {
    width: 280px;
    top: 50px;
  }
}
/*========================================================
Footer
=========================================================*/
.footer{
  background: var(--footer-bg);
  color: var(--btn-white);
  padding: 135px 0 70px;
}
.fooLogo{
  text-align: center;
}
.fooWrapInfo{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 60%;
  margin: 0 auto;
  padding: 130px 0;
}
.phoneFoot,
.hoursFoot,
.addrFoot {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 75px 75px;
  min-height: 75px;
  display: flex;
  align-items: center;
  padding-left: 100px;
}
.phoneFoot {
  background-image: url('../images/index/phone-icon.png');
  font-size: 48px;
  font-weight: 700;
}
.hoursFoot {
  background-image: url('../images/index/hours-icon.png');
  font-size: 36px;
  font-weight: 500;
}
.addrFoot {
  background-image: url('../images/index/location-icon.png');
  font-size: 36px;
  font-weight: 500;
}
.phoneFoot,
.addrFoot{
  margin-bottom: 30px;
}
.phoneFoot p,
.hoursFoot p,
.addrFoot p{
  color: var(--btn-white);
}
.addrFoot p{
  line-height: 1.2;
}
.fooCol1{
  width: 57%;
}
.fooCol2{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 43%;
}
.fooNav1{
  margin-right: 100px;
}

.fooNav1 ul li.f1link,
.fooNav2 ul li.f2link{
  font-size: 30px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 15px;
  padding-left: 20px;
  position: relative;
}
.fooNav1 ul li.f1link:hover::before,
.fooNav2 ul li.f2link:hover::before{
  content: " ";
  background-image: url('../images/index/orange-pointer.png');
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 8px 28px;
  border-radius: 20%;
  left: 0;
  bottom: 2px;
  position: absolute;
  width: 10px;
  height: 28px;
}
.fooGroups{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 65px;
}
.fooGroups img{
  margin: 0 10px;
}
.footCopy{
  text-align: center;
}
.footCopy p{
  color: var(--btn-white);
}
.sitemapFoo{
  text-align: center;
  color: var(--black);
  font-size: 16px;
  margin-top: 20px;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .fooLogo img {
    width: 420px;
  }
  .phoneFoot, .hoursFoot, .addrFoot {
    background-size: 55px 55px;
    padding-left: 75px;
  }
  .phoneFoot {
    font-size: 42px;
  }
  .addrFoot,
  .hoursFoot {
    font-size: 30px;
  }
  .fooNav1 ul li.f1link, .fooNav2 ul li.f2link {
    font-size: 26px;
  }
  .fooGroups img {
    max-width: 160px;
  }
  .footCopy p {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .fooLogo img {
    width: 320px;
  }
  .phoneFoot, .hoursFoot, .addrFoot {
    background-size: 45px 45px;
    padding-left: 60px;
  }
  .phoneFoot {
    font-size: 32px;
  }
  .addrFoot,
  .hoursFoot {
    font-size: 21px;
  }
  .fooNav1 ul li.f1link, .fooNav2 ul li.f2link {
    font-size: 21px;
  }
  .fooGroups img {
    max-width: 120px;
  }
  .footCopy p {
    font-size: 16px;
  }
  .footer {
    padding: 70px 0 35px;
  }
  .fooWrapInfo {
    width: 75%;
    padding: 75px 0;
  }
  .phoneFoot, .addrFoot {
    margin-bottom: 0;
  }
  .fooCol2 {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .fooLogo img {
    width: 320px;
  }
  .phoneFoot, .hoursFoot, .addrFoot {
    background-size: 45px 45px;
    padding-left: 60px;
  }
  .phoneFoot {
    font-size: 32px;
  }
  .addrFoot,
  .hoursFoot {
    font-size: 21px;
  }
  .fooNav1 ul li.f1link, .fooNav2 ul li.f2link {
    font-size: 18px;
  }
  .fooGroups img {
    max-width: 120px;
  }
  .footCopy p {
    font-size: 16px;
  }
  .footer {
    padding: 70px 0 35px;
  }
  .fooWrapInfo {
    width: 90%;
    padding: 75px 0;
  }
  .phoneFoot, .addrFoot {
    margin-bottom: 0;
  }
  .fooCol2 {
    margin-top: 30px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .fooLogo img {
    width: 320px;
  }
  .phoneFoot, .hoursFoot, .addrFoot {
    background-size: 35px 35px;
    padding-left: 50px;
  }
  .phoneFoot {
    font-size: 26px;
  }
  .addrFoot,
  .hoursFoot {
    font-size: 16px;
  }
  .fooNav1 ul li.f1link, .fooNav2 ul li.f2link {
    font-size: 16px;
  }
  .fooGroups img {
    max-width: 120px;
  }
  .footCopy p {
    font-size: 16px;
  }
  .footer {
    padding: 70px 0 35px;
  }
  .fooWrapInfo {
    width: 80%;
    padding: 75px 0;
  }
  .phoneFoot, .addrFoot {
    margin-bottom: 0;
  }
  .fooCol2 {
    margin-top: 17px;
    padding-left: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .fooLogo img {
    width: 320px;
  }
  .phoneFoot, .hoursFoot, .addrFoot {
    background-size: 35px 35px;
    padding-left: 50px;
  }
  .phoneFoot {
    font-size: 26px;
    min-height: 50px;
  }
  .addrFoot,
  .hoursFoot {
    font-size: 18px;
    min-height: 50px;
  }
  .fooNav1 ul li.f1link,
  .fooNav2 ul li.f2link {
    font-size: 18px;
    padding-left: 50px;
    margin-bottom: 25px;
  }
  .fooGroups img {
    max-width: 120px;
  }
  .footCopy p {
    font-size: 16px;
  }
  .footer {
    padding: 70px 0 35px;
  }
  .fooWrapInfo {
    width: 90%;
    padding: 75px 0 55px;
    flex-direction: column;
  }
  .phoneFoot,
  .addrFoot {
    margin-bottom: 0;
  }
  .fooCol2 {
    margin: 50px auto 0;
    padding-left: 0;
    width: 320px;
    flex-direction: column;
  }
  .fooCol1 {
    width: 335px;
    margin: 0 auto;
  }
  .fooNav1 {
    margin-right: 0;
  }
  .fooGroups{
    max-width: 285px;
    margin: 0 auto 65px;
  }
  .footCopy p span {
    display: block;
  }
}
@media only screen and (max-width: 479px) {
  .fooLogo img {
    width: 280px;
  }
  .addrFoot {
    font-size: 17px;
  }
  .fooCol2,
  .fooCol1 {
    width: 100%;
    padding: 0;
  }

}

/*========================================================
Services & Solutions Section Index
=========================================================*/
.lrSection{
  padding: 135px 0 145px;
}
.lrSection h1,
.lrSection h2{
  text-align: center;
  margin: 0 0 130px;
}
.lrSection h1 span,
.lrSection h2 span{
  display: block;
}
.lrSectionWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.lrSecLeftImg{
  width: 48%;
}
.lrSecRightText{
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lrSecLeftImg img{
  width: 100%;
  border-radius: 35px;
}
.lrSecRightText h3{
  font-family: 'Barlow', sans-serif;
  font-size: 44px;
  line-height: 1.2;
  font-weight: 700;
}
.lrSecRightText h3 span{
  display: block;
  font-size: 28px;
  color: var(--blue);
  font-family: axi-regular, arial, sans-serif;
}
.lrSecRightText p,
.lrExtraRect p{
  margin: 15px 0 0;
}
.lrGrayRectRound{
  background: #e8eae9;
  border-radius: 30px;
  padding: 20px 30px;
}
.lrSecUl{
  margin: 40px 0 0;
}
.lrSecUl li{
  background-image: url('../images/index/blue-tick.svg');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 18px 18px;
  padding-left: 30px;
  margin-bottom: 15px;
}
.lrSubUl{
  padding-left: 20px;
}
.lrSubUl2Cols{
  column-count: 2;
}
.lrSubUl li{
  list-style-type: disc;
  list-style-position: outside;
  margin-bottom: 15px;
}
.lrSubUl li span{
  display: block;
  font-weight: 700;
}
.lrSecBtnPlace{
  margin: 25px 0 0;
}
.lrSecBtnPlace .lrBtn{
  background: var(--blue);
}
.lrSecQuoteBtnPlace{
  text-align: center;
}
.lrSecQuoteBtnPlace .lrBtn{
  background: var(--white);
  border: 2px solid var(--blue);
  color: var(--blue);
  font-weight: 700;
}

.lrSectionWrapRever{
  flex-direction: row-reverse;
}
.lrSecAddMargin{
  margin: 110px 0 0;
}
.newBlue{
  background: var(--blue);
  color: var(--white);
}
.newBlue img{
  border-radius: 30px;
}
.lrExtraWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 50px 0 0;
}
.lrExtraRect{
  width: 48%;
}
.lrSection h4{
  text-transform: uppercase;
}
.addExtrSpace{
  padding: 20px 0 0;
}
.addExtrSpace2{
  padding: 30px 0 0;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .lrSecRightText h3 {
    font-size: 40px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .lrSection {
    padding: 115px 0 125px;
  }
  .lrSection h1,
  .lrSection h2 {
    margin: 0 0 110px;
  }
  .lrSecRightText h3 {
    font-size: 31px;
  }
  .lrSecRightText h3 span {
    font-size: 22px;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .lrSection {
    padding: 80px 0 85px;
  }
  .lrSection h1,
  .lrSection h2 {
    margin: 0 0 100px;
  }
  .lrSecRightText h3 {
    font-size: 27px;
  }
  .lrSecAddMargin {
    margin: 80px 0 0;
  }
  .lrSecRightText h3 span {
    font-size: 17px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .lrSection {
    padding: 80px 0 85px;
  }
  .lrSection h1,
  .lrSection h2 {
    margin: 0 0 90px;
  }
  .title768 h2 {
    width: 70%;
    margin: 0 auto 90px;
  }
  .lrSecLeftImg,
  .lrSecRightText {
    width: 100%;
  }
  .lrSecLeftImg{
    margin-bottom: 40px;
  }
  .lrSecRightText h3 {
    font-size: 34px;
  }
  .lrSecAddMargin {
    margin: 80px 0 0;
  }
  .lrSubUl2Cols{
    column-count: 1;
  }
  .lrExtraRect{
    width: 100%;
  }
  .lrExtraRect:last-child{
    margin: 40px 0 0;
  }
  .lrSecRightText h3 span {
    font-size: 21px;
  }
}
@media only screen and (max-width: 767px) {
  .lrSecRightText p,
  .lrExtraRect p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lrSecRightText p.show-full,
  .lrExtraRect p.show-full {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
  }
  .lrSubUl {
    display: none;
  }
  .lrSubUl.show-mobile {
    display: block;
  }
  .lrSubUlToggle {
    background: transparent;
    border: none;
    color: var(--blue);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 10px 0;
    margin-top: 10px;
    text-align: left;
    font-family: inherit;
  }
  .lrSubUlToggle:hover {
    opacity: 0.8;
  }
  .lrSubUlToggleSeeLess {
    display: none;
    margin-top: 15px;
  }
  .lrSubUlToggleSeeLess.show-mobile {
    display: inline-block;
  }
  .lrSection {
    padding: 60px 0 85px;
  }
  .lrSectionSubPage{
    padding: 60px 0 65px;
  }
  .lrSection h1,
  .lrSection h2 {
    margin: 0 0 60px;
  }
  .lrSection h1 span,
  .lrSection h2 span{
    display: block;
  }
  .lrSecLeftImg,
  .lrSecRightText {
    width: 100%;
  }
  .lrSecLeftImg{
    margin-bottom: 40px;
  }
  .lrSecRightText h3 {
    font-size: 26px;
  }
  .lrGrayRectRound{
    padding: 20px;
  }
  .lrSecAddMargin {
    margin: 60px 0 0;
  }
  .lrSecBtnPlace{
    text-align: center;
  }
  .lrSubUl2Cols{
    column-count: 1;
  }
  .lrExtraRect{
    width: 100%;
  }
  .lrExtraRect:last-child{
    margin: 40px 0 0;
  }
  .lrSecRightText h3 span {
    font-size: 19px;
  }
}

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

/*========================================================
Gallery page
=========================================================*/
.banNavi{
  height: 120px;
  position: relative;
}
.newGall h1,
.colChartPage h1{
  color: var(--blue);
  font-family: 'Abril Fatface', sans-serif;
  font-size: 86px;
  line-height: 1;
  text-align: center;
  margin: 0 0 80px;
}
.centerGalle{
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 0 0 60px 0;
}

.centerGalle h1{
  text-align: center;
  margin: 80px 0 120px 0;
  font-size: 2.3rem;
  font-weight: 500;
}

.galleWrapper{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 20px;
}

.item {
  position: relative;
  width: 32%;
  margin-bottom: 50px;
}
.item a {
  transition: all 0.3s linear 0s;
  display: inline-block;
  position: relative;
}
.item img{
  display: block;
  width: 100%;
  border-radius: 80px;
  border: 9px dotted #c0bcbc;
  padding: 6px;
}
.itempp {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 180px;
  height: 60px;
  background: rgba(255,255,255,.9);
  font-size: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.itempp p {
  padding-right: 15px;
  font-size: 16px;
  color: #777;
}
.fas {
  color: #777;
  font-size: 16px;
}
.galleWrapperMobile{
  display: none!important;
}
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .banNavi{
    height: 90px;
  }
  .newGall h1,
  .colChartPage h1 {
    font-size: 76px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .banNavi{
    height: 90px;
  }
  .newGall h1,
  .colChartPage h1 {
    font-size: 54px;
    margin: 0 0 60px;
  }
  .item{
    width: 31.33%;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .banNavi{
    height: 60px;
  }
  .centerGalle {
    padding: 0 0 30px 0;
  }
  .newGall h1,
  .colChartPage h1 {
    font-size: 44px;
    margin: 0 0 60px;
  }
  .item{
    width: 48%;
  }
  .item img {
    border: 6px dotted #c0bcbc;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .banNavi{
    height: 60px;
  }
  .centerGalle {
    padding: 0 0 30px 0;
  }
  .newGall h1,
  .colChartPage h1 {
    font-size: 44px;
    margin: 0 0 60px;
  }
  .item{
    width: 48%;
  }
  .itempp {
    height: 50px;
    width: 140px;
  }
  .item img {
    border: 6px dotted #c0bcbc;
  }
}
@media only screen and (max-width: 767px) {
  .banNavi{
    height: 40px;
  }
  .centerGalle {
    padding: 0 0 30px 0;
  }
  .newGall h1,
  .colChartPage h1 {
    font-size: 44px;
    margin: 0 0 60px;
  }
  .item{
    width: 100%;
    margin-bottom: 30px;
  }
  .item img {
    border: 6px dotted #c0bcbc;
    border-radius: 60px;
  }
  .galleWrapperDesktop{
    display: none;
  }
  .galleWrapperMobile{
    display: block!important;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {}
  @media only screen and (max-width: 479px) {
    .centerGalle{
      width: 100%;
      padding: 0 0 20px 0;
    }
    .galleWrapper {
      padding: 0 5px;
    }
    .newGall h1,
    .colChartPage h1 {
      font-size: 36px;
    }
  }

  /*========================================================
  Color Collections Page
  =========================================================*/
  .colChartPage{
    padding: 0 0 60px;
  }
  .boxes3ColorWrap{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .colorColBox {
    width: 25%;
    padding: 20px;
  }
  .colorSquare {
    width: 100%;
    height: 290px;
  }
  .colorColBox h3 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    padding-top: 20px;
  }
  .boxes3ColorFirstPage .colorColBox h3 {
    padding-top: 0px;
  }
  .colorColBox h3 span {
    font-weight: 400;
    display: block;
  }
  .colorColBox img {
    width: 100%;
    margin-bottom: 10px;
  }
  .colorColBox p {
    font-size: 21px;
    padding: 10px 0 20px;
    line-height: 1.5;
  }
  .boxes3ColorWrapMobile{
    display: none!important;
  }
  @media only screen and (min-width: 1920px) and (max-width: 2559px) {}
  @media only screen and (min-width: 1301px) and (max-width: 1919px) {
      .colorColBox h3 {
        font-size: 18px;
      }
    }
    @media only screen and (min-width: 1024px) and (max-width: 1300px) {
      .colorColBox {
        width: 50%;
      }
      .colorColBox h3 {
        font-size: 21px;
      }
    }
    @media only screen and (min-width: 768px) and (max-width: 1023px) {
      .colorColBox {
        width: 50%;
      }
      .colorColBox h3 {
        font-size: 22px;
      }
    }
    @media only screen and (max-width: 767px) {
      .colChartPage {
        padding: 0 0 30px;
      }
      .boxes3ColorWrap{
        flex-direction: column;
      }
      .colorColBox {
        width: 100%;
      }
      .colorColBox h3 {
        font-size: 21px;
      }
      .boxes3ColorWrapDesktop{
        display: none;
      }
      .boxes3ColorWrapMobile{
        display: block!important;
      }
      .colorColBox p {
      	font-size: 19px;
      }
    }
    @media only screen and (min-width: 480px) and (max-width: 767px) {}
      @media only screen and (max-width: 479px) {
        .colorColBox h3 {
          font-size: 20px;
        }
      }

      /*========================================================
      Color Collections Colors Page
      =========================================================*/
      .forsythia {
        background: #ffc801;
      }
      .bluechip {
        background: #016ea7;
      }
      .kilkenny {
        background: #4a8555;
      }
      .gentian {
        background: #6572a6;
      }
      .erpink {
        background: #c74f68;
      }
      .aquarium {
        background: #39a9ad;
      }
      .knorange {
        background: #e2703e;
      }
      .domino{
        background: #353338;
      }
      .forget-me-not	{
        background: #716998;
      }
      .funYellow	{
        background: #f7e594;
      }

      /* sweet retreat */

      .papaya	{background: #efb97b;}
      .stream {background: #adccd3;}
      .awesomeViolet	{background: #a7b2d4;}
      .heartsOfPalm	{background: #cfc291;}
      .lobelia	{background: #7498be;}
      .sunnyVeranda	{background: #fedf94;}
      .sockeye	{background: #e49780;}
      .aloe	{background: #accabc;}

      /* natural ground */

      .foxhallGreen {background: #454B41;}
      .half-caff {background: #5F4C3E;}
      .LlmaWool {background: #917864;}
      .cavernClay {background: #AC6C53;}
      .relentlessOlive {background: #71713F;}
      .flowerPot {background: #904339;}
      .atEaseSoldier {background: #9E9986;}
      .polvoDeOro {background: #E9B87E;}


      /* retro revival */

      .youthfulCoral {background: #F0AFA8;}
      .edamame {background: #827C5A;}
      .chivalryCopper {background: #D4966E;}
      .parisianPatina {background: #7D9B89;}
      .billowyBreeze {background: #AFC7CD;}
      .primavera {background: #D2D083;}
      .homburgGray {background: #666D69;}
      .oldenAmber {background: #EEB76B;}


      /* electric exploration */

      .frankBlue {background: #225288;}
      .erosPink {background: #C84F68;}
      .recliningGreen {background: #B7D7BF;}
      .izmirPurple {background: #4D426E;}
      .frolic {background: #D9C661;}
      .rivulet {background: #5FA59B;}
      .rejuvenate {background: #DD7861;}
      .awesomeViolet {background: #A7B2D4;}


      /* off the grid */

      .prairieGrass {background: #B1A38E;}
      .copperMountain {background: #A6613C;}
      .palmLeaf {background: #635936;}
      .cascades {background: #273E3E;}
      .almondRoca {background: #A78361;}
      .rojoMarron {background: #4B3029;}
      .goldCoast {background: #C78538;}
      .brickPaver {background: #93402F;}


      /* connected calm */

      .nurtureGreen {background: #98B092;}
      .skyFall {background: #89C6DF;}
      .celestial {background: #97B3D0;}
      .hazel {background: #A8C1B7;}
      .primavera {background: #D2D083;}
      .freshwater {background: #4DA6B2;}
      .sunset {background: #E2946F;}
      .belliniFizz {background: #F5C78E;}


      /* cozy living */

      .mothWing {background: #A0907F;}
      .vintageVessel {background: #94B2A6;}
      .blusterySky {background: #6F848C;}
      .tatamiTan {background: #BA8C64;}
      .bakedClay {background: #C1785C;}
      .farro {background: #C1A485;}
      .greatGreen {background: #ABB486;}
      .tinLizzie {background: #939591;}


      /* nurtured nature */

      .classicSand {background: #D6BCAA;}
      .copenBlue {background: #C2CCC4;}
      .sumptuousPeach {background: #E5B99B;}
      .classicIvory {background: #F2E0C3;}
      .colonialRevivalGray {background: #B4B9B9;}
      .biltmoreBuff {background: #E3C9A1;}
      .cascadeGreen {background: #ACB19F;}
      .daydream {background: #BDC3CD;}


      /* bright futures */

      .fullyPurple {background: #514C7E;}
      .hepGreen {background: #C4B146;}
      .kilkenny {background: #498555;}
      .calypso {background: #01B0BB;}
      .osageOrange {background: #F4A045;}
      .danube {background: #2377A2;}
      .invigorate {background: #E47237;}
      .dynamo {background: #953D68;}


      /* global student */

      .countrySquire {background: #124A42;}
      .rookwoodAmber {background: #C08650;}
      .moscowMidnight {background: #204652;}
      .oliveGrove {background: #857C5D;}
      .erosPink {background: #C84F68;}
      .westchesterGray {background: #797978;}
      .bakedCookie {background: #89674A;}
      .robustOrange {background: #C4633E;}


      /* goutdoor reflection */

      .dryDock {background: #A18D7D;}
      .porpoise {background: #6B645B;}
      .wheatPenny {background: #976B53;}
      .samovarSilver {background: #B8BEBE;}
      .jasperStone {background: #8D9E97;}
      .alaea {background: #81585B;}
      .darkClove {background: #4C3D31;}
      .shiitake {background: #C8BCAB;}


      /* modern vintage */

      .darkNight {background: #23383F;}
      .rusticRed {background: #703229;}
      .grandiose {background: #9C7F41;}
      .feltedWool {background: #979083;}
      .misty {background: #CDD2D2;}
      .dyersWoad {background: #7B99B0;}
      .plumDandy {background: #8B6878;}
      .cavernClay {background: #AC6B53;}


      /* new energy */

      .inventiveOrange {background: #E89D6F;}
      .livelyYellow {background: #E6D88E;}
      .erosPink {background: #C84F68;}
      .blitheBlue {background: #90BDBD;}
      .summitGray {background: #959491;}
      .extraWhite {background: #EEEFEA;}
      .merlot {background: #51323B;}
      .mesmerize {background: #5D657B;}


      /* fractal heirlooms */

      .frenchRoast {background: #4F3426;}
      .merlot {background: #51323B;}
      .cavernClay {background: #AC6B53;}
      .caramelized {background: #C29871;}
      .smokyBlue {background: #596E79;}
      .bakedCookie {background: #89674A;}
      .origamiWhite {background: #E5E2DA;}
      .temperateTaupe {background: #BFB1AA;}

      /*========================================================
      Disclaimer page
      =========================================================*/
      .warrantyTit h1 {
        font-size: 48px;
        font-weight: 900;
        text-transform: uppercase;
        line-height: 1.1;
        padding-bottom: 50px;
      }
      .warrantyTit h1 span {
        font-size: 24px;
        text-transform: none;
        font-weight: 300;
        letter-spacing: normal;
        display: block;
        text-transform: capitalize;
      }
      .warranty-box {
        width: 100%;
        margin: 20px auto 60px;
        overflow: hidden;
      }
      .warranty-box h2 {
        text-align: left;
        padding-bottom: 35px;
        color: #c60000;
        line-height: 1.2;
      }
      .warranty-title {
        font-size: 32px;
        font-weight: 700;
        text-transform: capitalize;
        line-height: 1.3;
        margin: 20px 0 0;
      }
      .warranty-title:nth-child(1){
        margin: 0 0 0;
      }
      .warranty-list ul {
        padding: 20px 0;
      }
      .warranty-list ul li {
        background-image: url('../images/check.png');
        background-position: left top 12px;
        background-repeat: no-repeat;
        background-size: 25px 25px;
        font-size: 21px;
        padding: 8px 0 8px 42px;
        text-transform: capitalize;
        line-height: 1.5;
      }
      .warranty-desc p {
        font-size: 21px;
        line-height: 1.5;
      }
      @media only screen and (min-width: 1920px) and (max-width: 2559px) {}
        @media only screen and (min-width: 1301px) and (max-width: 1919px) {
          .warranty-list ul li {
            font-size: 21px;
            background-size: 20px 20px;
          }
        }
        @media only screen and (min-width: 1024px) and (max-width: 1300px) {
          .warranty-title {
            font-size: 24px;
          }
          .warranty-list ul li {
            font-size: 18px;
            background-size: 15px 15px;
            padding: 8px 0 8px 30px;
          }
          .warranty-desc p {
            font-size: 18px;
          }
        }
        @media only screen and (min-width: 768px) and (max-width: 1023px) {
          .warranty-box h2 {
            font-size: 26px;
            padding-bottom: 15px;
          }
          .warranty-title {
            font-size: 24px;
          }
          .warranty-list ul li {
            font-size: 21px;
            background-size: 15px 15px;
            padding: 8px 0 8px 30px;
          }
          .warranty-box {
            margin: 20px auto 30px;
          }
          .warranty-desc p {
            font-size: 18px;
          }
        }
        @media only screen and (max-width: 767px) {
          .warranty-title {
            font-size: 24px;
          }
          .warranty-list ul li {
            font-size: 21px;
            background-size: 15px 15px;
            padding: 8px 0 8px 30px;
          }
          .warranty-desc p {
            font-size: 21px;
          }
          .warranty-box {
            margin: 20px auto 20px;
          }
        }

        /*========================================================
        Contact Us page
        =========================================================*/
        .infoAdress,
        .contName,
        .contTel,
        .contAdr,
        .contWHours{
          text-align: center;
        }
        .contTel{
          padding: 0 0 30px;
        }
        .contTel a{
          color: #000;
          font-size: 34px;
          font-weight: bold;
        }
        .contName{
          margin-top: 40px;
          font-size: 32px;
          color: #009add;
          text-transform: capitalize;
        }
        .contAdr,
        .contWHours{
          padding-bottom: 20px;
          color: #131313;
          font-weight: 400;
        }
        .contAdr span{
          display: block;
        }
        .contWHours span {
          display: block;
        }
        @media only screen and (min-width: 1920px) and (max-width: 2559px) {}
          @media only screen and (min-width: 1301px) and (max-width: 1919px) {}
            @media only screen and (min-width: 1024px) and (max-width: 1300px) {
              .contAdr {
                font-size: 18px;
              }
            }

  /*========================================================
  Mobile Menu
  =========================================================*/
  @media only screen  and (max-width: 1300px) {
    .smobitrigger,
    .mnuclose {
      display: inline-block;
    }
    .smobitrigger {
      color: transparent;
      width: 30%;
      margin: 0 auto;
    }
    .smobitrigger {
      background: url("../images/menuopen.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 60px 60px;
      width: 60px;
      height: 60px;
    }
    .mnuclose {
      background: url('../images/menuclose.png');
      background-position: right top;
      background-repeat: no-repeat;
      background-size: 45px 45px;
      color: transparent;
      height: 45px;
      margin: 0 0 10px 0;
      width: 100%;
      text-align: right;
      display: inline-block;
    }
    .menu  ul {
      padding: 0 10px;
      overflow-y: auto;
      margin: 0 auto;
      text-align: center;
    }
    .menu li {
      line-height: inherit;
    }
    .menu ul li.dlink {
      display: block;
      line-height: 1;
      padding: 8px 0;
      text-align: left;
    }
    .menu ul li a {
      font-size: 19px;
    }
    .menu ul li.dlink:hover::before{
      display: none;
    }
    .menu ul li.mlogo {
      margin: 20px auto 0;
      display: block;
      text-align: left;
    }
    .menu ul li.mlogo img {
      width: 240px;
      margin: 0 0 30px;
      position: static;
    }
    .menu ul li.mphone {
      display: block;
      margin-bottom: 10px;
      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: 30px;
      color: #fff;
      font-weight: 700;
    }
    .menu ul li.maddress {
      display: block;
      line-height: 1.5;
      text-transform: capitalize;
      margin: 35px auto 20px;
      color: #777;
      text-align: left;
    }
    .menu ul li.maddress a {
      font-size: 17px;
    }
    .menu ul li.maddress a span{
      display: block;
      font-size: 19px;
      font-weight: 500;
      text-align: left;
    }
    .menu ul li.mhours {
      display: block;
      font-family: barlowmedium,arial,sans-serif;
      font-size: 19px;
      line-height: inherit;
      margin: 0 auto 30px;
      color: #000;
      text-align: left;
    }
    .menu ul li.mhours span {
      display: block;
    }
    .menu ul li.msocial {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      width: 100%;
      margin: 35px 0 20px;
    }
    .menu ul li.msocial a{
      width: 50%;
    }
    .menu ul li.msocial img{
      width: 100%;
    }
    .menu ul li.dget{
      display: none;
    }
    .socIcoMob {
      background: var(--white);
      width: 42px;
      height: 42px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 5px;
    }
    .famobico {
      font-size: 16px;
      color: var(--red);
    }

    .mobimenu {
      padding: 0;
      margin: 0px;
      width: 15.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;
    }
    .topNavWrapDesk {
      display: none;
    }
    .boxesWrap {
      width: 90%;
      max-width: 922px;
    }
    .logoDesk {
      display: none;
    }
    .logoMob {
      width: 60%;
      position: relative;
      display: block;
    }
    .logoMob img {
      width: 140px;
      position: absolute;
      top: -40px;
    }
    nav{
      margin-right: 0;
    }
    .one {
      width: 70%;
      background: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-top: 0;
      position: inherit;
      height: 90px;
    }
    .three,
    .two {
      display: none;
    }
    .topPhone {
      display: none;
    }
    .four {
      width: 30%;
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .mobRest {
      width: 40%;
      display: flex;
      align-items: center;
      padding-left: 0;
      justify-content: flex-end;
    }
    .topNavWrapMob,
    .telMob {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    nav {
      padding-left: 0;
    }
    .telMob a {
      display: inline-block;
    }
    .telMob img,
    .locMob img {
      width: 50px;
    }
    .socIco {
      width: 50px;
      margin-right: 5px;
    }
    .menu ul li.mmlinks{
      display: block;
      margin-top: 15px;
      text-transform: capitalize;
      text-align: left;
    }
    .onlyMobBtn{
      display: block;
      margin: 20px 0 0;
    }
    .onlyMobBtn .estNew{
      color: var(--white)!important;
    }
  }
  @media only screen and (min-width: 1024px) and (max-width: 1300px) {}
  @media only screen and (min-width: 768px) and (max-width: 1023px) {}
  @media only screen and (max-width: 767px) {
    .one img {
      width: 170px;
    }
  }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .one{
      width: 60%;
      height: 80px;
    }
    .four{
      width: 40%;
    }
    .telMob img, .locMob img {
      width: 45px;
    }
  }
  @media only screen and (max-width: 479px) {
    .telMob img, .locMob img {
      width: 40px;
    }
    .smobitrigger {
      background-size: 55px 55px;
      width: 55px;
      height: 55px;
    }
    .one {
      height: 75px;
      width: 60%;
    }
    .four {
      width: 40%;
    }
  }

/*========================================================
Swipe text
=========================================================*/
.swipeMobOurWrk {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 0 25px;
  font-size: 16px;
  color: var(--main-text);
  font-family: arial, sans-serif;
  font-weight: 600;
  display: none;
}

.swipestleft,
.swipestright {
  color: var(--main-text);
  font-size: 18px;
}

.swipestleft {
  margin-right: 5px;
}

.swipestright {
  margin-left: 5px;
}
@media only screen and (max-width: 767px) {
  .swipeMobOurWrk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 0 25px;
    font-size: 16px;
    color: var(--main-text);
    font-family: arial, sans-serif;
    font-weight: 600;
  }

  .swipestleft,
  .swipestright {
    color: var(--main-text);
    font-size: 18px;
  }

  .swipestleft {
    margin-right: 5px;
  }

  .swipestright {
    margin-left: 5px;
  }
}