html, body {margin: 0; padding: 0; color: #343333; background-color: rgb(227, 227, 227);}
body * {box-sizing: border-box;}
.clear {clear: both;}
p {font-family: Raleway, sans-serif; line-height: 1.7em;}
p b {font-family: Raleway-Bold, sans-serif;}

img#logo {
    opacity: .9;
}

h1 {font-size: 3em;}

@font-face {
  font-family: "Raleway";
  src: url('/fonts/Raleway-Regular.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Raleway-Medium";
  src: url('/fonts/Raleway-Medium.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Raleway-Bold";
  src: url('/fonts/Raleway-Bold.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "DMSerifDisplay-Regular";
  src: url('/fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "DMSerifDisplay-Italic";
  src: url('/fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
}

/* ========================| FONT AWESOME | START */
.fa,.fas,.far,.fal,.fad,.fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}@font-face{font-family:'FontAwesome';font-style:normal;font-weight:300;font-display:block;src:url(/fonts/fa-light-300.eot);src:url(/fonts/fa-light-300.eot?#iefix) format("embedded-opentype"),url(/fonts/fa-light-300.woff2) format("woff2"),url(/fonts/fa-light-300.woff) format("woff"),url(/fonts/fa-light-300.ttf) format("truetype"),url(/fonts/fa-light-300.svg#fontawesome) format("svg")}.fal{font-family:'FontAwesome';font-weight:300}@font-face{font-family:'FontAwesome';font-style:normal;font-weight:400;font-display:block;src:url(/fonts/fa-regular-400.eot);src:url(/fonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(/fonts/fa-regular-400.woff2) format("woff2"),url(/fonts/fa-regular-400.woff) format("woff"),url(/fonts/fa-regular-400.ttf) format("truetype"),url(/fonts/fa-regular-400.svg#fontawesome) format("svg")}.far,.fa-solid{font-family:'FontAwesome';font-weight:400}@font-face{font-family:'FontAwesome';font-style:normal;font-weight:900;font-display:block;src:url(/fonts/fa-solid-900.eot);src:url(/fonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(/fonts/fa-solid-900.woff2) format("woff2"),url(/fonts/fa-solid-900.woff) format("woff"),url(/fonts/fa-solid-900.ttf) format("truetype"),url(/fonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.fas{font-family:'FontAwesome';font-weight:900}@font-face{font-family:'FontAwesome Brands';font-style:normal;font-weight:400;font-display:block;src:url(/fonts/fa-brands-400.eot);src:url(/fonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(/fonts/fa-brands-400.woff2) format("woff2"),url(/fonts/fa-brands-400.woff) format("woff"),url(/fonts/fa-brands-400.ttf) format("truetype"),url(/fonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:'FontAwesome Brands';font-weight:400}@font-face{font-family:'FontAwesome Duotone';font-style:normal;font-weight:900;font-display:block;src:url(/fonts/fa-duotone-900.eot);src:url(/fonts/fa-duotone-900.eot?#iefix) format("embedded-opentype"),url(/fonts/fa-duotone-900.woff2) format("woff2"),url(/fonts/fa-duotone-900.woff) format("woff"),url(/fonts/fa-duotone-900.ttf) format("truetype"),url(/fonts/fa-duotone-900.svg#fontawesome) format("svg")}.fad{position:relative;font-family:'FontAwesome Duotone';font-weight:900}.fad:before{position:absolute;color:var(--fa-primary-color,inherit);opacity:1;opacity:var(--fa-primary-opacity,1)}.fad:after{color:var(--fa-secondary-color,inherit);opacity:.4;opacity:var(--fa-secondary-opacity,0.4)}.fa-swap-opacity .fad:before,.fad.fa-swap-opacity:before{opacity:.4;opacity:var(--fa-secondary-opacity,0.4)}.fa-swap-opacity .fad:after,.fad.fa-swap-opacity:after{opacity:1;opacity:var(--fa-primary-opacity,1)}.fad.fa-inverse{color:#fff}.fad.fa-stack-1x,.fad.fa-stack-2x{position:absolute}.fad.fa-stack-1x:before,.fad.fa-stack-2x:before,.fad.fa-fw:before{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.far{font-family:'FontAwesome';font-weight:900}.fal{font-family:'FontAwesome';font-weight:300}.fa,.fas{font-family:'FontAwesome';font-weight:900}

.fa-chevron-circle-up:before {content: "\f139"}
.fa-angle-left:before {content: "\f104"}
.fa-angle-light:before {content: "\f104"}
.fa-angle-right:before {content: "\f105"}
.fa-angle-double-right:before {content: "\f101";}
.fa-dot-circle:before {content: "\f192";}
.fa-share-all:before {content: "\f367";}
.fa-file-download:before {content: "\f56d";}

/* MENU */

.fa-user-cog:before {content: "\f4fe";}
.fa-caret-circle-down:before {content: "\f32d";}
.fa-ellipsis-v-alt:before {content: "\f39c";}
.fa-bars:before {content: "\f0c9";}
.fa-plus-circle:before {content: "\f055";}
.fa-chevron-left:before {content: "\f053";}
.fa-chevron-right:before {content: "\f054";}


/* FontAwesome : SOCIAL */

.fa-facebook-f:before {  content: "\f39e";}
.fa-facebook:before {content: "\f09a";}
.fa-facebook-square:before {content: "\f082";}
.fa-navicon:before,.fa-reorder:before,.fa-bars:before {content: "\f0c9";}
.fa-youtube:before {content: "\f167";}
.fa-instagram:before {content: "\f16d";}
.fa-envelope:before {content: "\f0e0";}
.fa-envelope-square:before {content: "\f199";}
.fa-user-circle:before {content: "\f2bd";}
.fa-envelope-open-text:before {content: "\f658";}
.fa-search:before {content: "\f002";}
.fa-bars:before {content: "\f0c9";}
.fa-check-circle:before {content: "\f00c";}
.fa-circle:before {content: "\f111";}

  /* ========================| FONT AWESOME | END */

/* ============ COLOURS */

.WHB-Dark {color: rgb(50, 50, 49);}
.WHB-Grey {color: rgb(100, 99, 99);}
.WHB-Light {color: rgb(227, 227, 227);}
.WHB-White {color: rgb(254, 254, 254);}
.WHB-Blue {color:rgb(67, 112, 132);}
.WHB-Orange {color:rgb(184, 101, 47);}

.WHB-Dark-bg {background-color: rgb(50, 50, 49);}
.WHB-Grey-bg {background-color: rgb(100, 99, 99);}
.WHB-Light-bg {background-color: rgb(227, 227, 227);}
.WHB-White-bg {background-color: rgb(254, 254, 254);}
.WHB-Blue-bg {background-color:rgb(67, 112, 132);}
.WHB-Orange-bg {background-color:rgb(184, 101, 47);}


/* ============ NAV */

div#logo {
    margin: 40px 0;
}

header.scroll #logo {
    margin: 10px 0;
    display: flex;
    align-items: center;
}

#logo img {
  width: 500px; /* Example default width */
  
}

header.scroll {
    justify-content: space-between;
    padding-left: 10px;
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
    background-color: rgba(100, 99, 99,.5);
    /*-webkit-box-shadow: 0px 3px 15px 0px rgba(0,0,0,.7);
    box-shadow: 0px 3px 15px 0px rgba(0,0,0,.7);*/
    backdrop-filter: blur(11px);
}
header.scroll #logo {
    left: 5px;
    top: 5px;
    }
header.scroll #logo img {
  width: 125px;
}

.header {
  position: fixed;
  width: 100%;
  z-index: 3;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.header ul.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.header .menu li a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  background-color: #343333;
  color: #FFF;
  margin-right: 2px;
}

.header .menu li a:hover,
.header .menu-btn:hover {
  background-color: #b8652f;
  background-color: #b8652f;
}

.header .menu li a.tel {
    background-color: #b8652f;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
  transition: all .2s linear;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}



/* ============ BUTTONS */

.Btn {
    border-radius: 8px;
    display: block;
    background-color: #b8652f;
    color: #FFF;
    font-size: 1.2em;
    padding: 10px 30px;
    width: fit-content;
    text-decoration: none;
    background-color:rgb(67, 112, 132);
  }

  a.Btn:hover {
    background-color: rgb(50 85 100);
}

/* ============ HERO */
section#Hero {
  margin-top: 200px;;
}

section#Hero .wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
}

section#Hero .wrap .txt,
section#Hero .wrap .img {
  width: 40%;
  padding: 20px;
}

section#Hero .wrap .img img {
  max-width: 100%;
}

/* ============ ABOUT */
section#About .wrap {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
}

section#About .wrap .txt,
section#About .wrap .img {
  width: 35%;
  padding: 20px;
}

section#About .wrap .img img {
  max-width: 100%;
}



/* ============ CONTACT */
section#Contact {
padding: 50px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-direction: row;
  background-image: url(/img/bg-pattern-tile.svg);
}

section#Contact .wrap {
    background-color: rgba(255, 255, 255, 1);
    padding: 20px;
    border-radius: 5px;
    -webkit-box-shadow: 3px 3px 15px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 3px 3px 15px -2px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

section#Contact .wrap  h2 {
    font-size: 3em;
    margin-top: 10px;
    }

section#Contact .wrap  a {
  color: rgb(50, 50, 49);
}

section#Contact .wrap .left {
    width: 40%;
    height: 100%;
    border-right: 1px solid #EEE;
    margin-right: 20px;
    padding-right: 40px;
}

section#Contact .wrap .right {
    width: 60%;
}

.ContactFormWrap .row {
  display: flex;
  align-items: center; /* Vertically align labels and inputs */
  margin-bottom: 10px; /* Add spacing between rows */
}

.ContactFormWrap .row label {
  width: 255px; /* Adjust label width as needed */
  margin-right: 10px; /* Add spacing between label and input */
}

.ContactFormWrap .submit-row {
  text-align: center; /* Center the submit button */
}


/* ============ SERVICES */
section#Services .wrap {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;

  /*background-color: rgba(170, 170, 170, 1);*/
  padding: 30px;
}

.ServicesWrap {
  flex-basis: 20%;
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 1);
  padding: 20px;
  margin: 10px;
  border-radius: 5px;
  -webkit-box-shadow: 3px 3px 15px -2px rgba(0, 0, 0, 0.5);
  box-shadow: 3px 3px 15px -2px rgba(0, 0, 0, 0.5);
}

.ServicesWrap h2 {
    font-size: 2.5em;
}

.ServicesWrap img {max-width: 100%;}

.ServicesWrap ul,
.ServicesWrap li {
  padding: 0;
  margin: 0;
  list-style: none;
}

.ServicesWrap ul {
  margin: 2em 0;
}

.ServicesWrap li {
  margin: 1em;
    margin-left: 35px;
    display: flex;
    align-items: center;
    font-size: 1.3em;
      background-color: #f5f5f5;
    color: #343333;
}

.ServicesWrap li:before {
      content: '\f058';
    content: '\e123';
    font-family: 'FontAwesome';
    float: left;
    margin-left: -35px;
    margin-right: 20px;
    font-weight: 900;
    font-size: 1.3em;
    color: #343333;
    color:rgb(184, 101, 47);
}


/* ============ REVIEWS */
section#Reviews .wrap {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
    background-image: url(/img/bg-pattern-tile.svg);
    background-attachment: fixed;
    background-color: rgb(184, 101, 47);

  padding: 10px;
}

.ReviewWrap {
  flex-basis: 20%;
  flex-grow: 1;
  background-color: rgba(255, 255, 255, 1);
  padding: 5px 20px;
  margin: 10px;
  border-radius: 5px;
  -webkit-box-shadow: 3px 3px 15px -2px rgba(0, 0, 0, 0.5);
  box-shadow: 3px 3px 15px -2px rgba(0, 0, 0, 0.5);
}

.ReviewWrap h2 {
    border-bottom: 1px solid;
    padding-bottom: 20px;
}

/* ============ FOOTER */
section#Footer {
    background-color: rgb(254, 254, 254);
    background-color: rgb(100, 99, 99);
}

section#Footer .wrap {
  display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 50px;
}

section#Footer .wrap a {
  color: #FFF;
  color: rgb(50, 50, 49);
}

section#Footer .wrap ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }

  section#Footer .wrap ul li {
  display: inline-block;
    font-size: 2em;
    margin: 0 10px;
}
  }

section#Footer .col:first-of-type {
  width: 50%;
}

section#Footer .col {
  width: 25%;
}


.footer-bottom {
    padding: 10px 20px;
    text-align: center;
    font-size: .8em;
    background-color: rgb(50, 50, 49);
    color: rgb(100, 99, 99);
    color: rgb(227, 227, 227);
}


/* ============ PARALLAX */
.PX {
  background-attachment: fixed;  /* Keep the image fixed during scrolling */
  background-size: cover;  /* Make the image cover the entire element */
  height: 500px;  /* Example height, adjust as needed */
}

.PX .wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.PX .wrap h2 {
    color: #FFF;
    font-size: 5em;
    color: rgba(255,255,255,.3);
}

.PxImage01 {
  background-image: url('/img/bg-pattern-tile.svg');
  height: 50px;
  background-size: contain;
}

.PxImage02 {
  background-image: url('/img/lifestyle/image11.jpg');
  height: 33.333vh;
}



/* ============ ANNIMATION */
/*.Animate {
  opacity: 0;
  transform: translateY(100%);
  transition: all 2s ease-in-out;
}

.Animate.slide-in {
  opacity: 1; 
  transform: translateY(0);
}*/

/* ============ ANNIMATION : Staggered */


#Services .ServicesWrap {
  opacity: 0;
  bottom: -100%;
  transition: opacity 0.5s ease-in-out, left 0.5s ease-in-out; /* Transition properties */
}

#Services .ServicesWrap.animate {
  opacity: 1;
  bottom: 0;
}




/* FORM */

form {
    max-width: 600px;
    text-align: right;
    margin: 20px auto;
}

.FormWrap {
    margin-left: 20px;
}

form label {
    width: 100%;
}

input,
textarea {
    border: 0;
    outline: 0;
    padding: 1em;
    border-radius: 8px;
    display: block;
    width: 100%;
    /*margin-top: 1em;*/
    font-family: 'Raleway', sans-serif;
    box-shadow: 0 1px 1px rgba(black, 0.1);
    resize: none;
    background-color: #EEE;
}

input:active,
textarea:active {
    box-shadow: 0 0px 2px rgba(31, 120, 80, 1) !important;
}

input[type="submit"] {
    background-color: #b8652f;
    color: #FFF;
    font-size: 1.2em;
    margin: 10px auto;
}
input[type="submit"]:hover {
    background-color: #da6a22;
    cursor: pointer;
}

form label {
    padding-right: 20px;
    color: #333;
    font-family: 'Raleway', sans-serif;
}






.ContactFormWrap {
}

.formholder {
    display: flex;
    align-items: center;
}


.formholder>label {
    flex: 2;
    color: #666;
    font-weight: bold;
    padding-right: 1%;
    text-align: right;
    margin-right: 10px;
    margin-bottom: 0 !important;
}

input:active,
textarea:active {
    box-shadow: 0 0px 2px rgba(31, 120, 80, 1) !important;
}

.formholder>input {
    flex: 5;
    border: 1px solid #d3dedf;
    margin: 1% auto;
    height: 35px;
}

.formholder>textarea {
    flex: 5;
    border: 1px solid #d3dedf;
    margin: 1% auto;
    height: 200px;
}


.submitblue {
    background-color: #DF460D;
    border: none;
    font-size: 13px;
    letter-spacing: .38px;
    color: #FFFFFF;
    padding: 19px;
    text-align: center !important;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    font-weight: bold !important;
    width: 220px;
    text-transform: uppercase !important;
    margin-top: 3%;
}


.submitholder {
    display: flex;
    align-items: left;
}

.submitholder>.inputholder {
    flex: 5;
}


.submitholder>label {
    flex: 2;
    font-size: 16px;
    color: #041E42;
    font-weight: bold;
    padding-right: 1%;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: 0 !important;
}

.textaligncenter {
    text-align: center;
}




@media (max-width: 767px) {

    .left-column {text-align: center;}

    .formholder {
        flex-direction: column !important;
        align-items: stretch !important;

    }

    .formholder>label {
        flex: 1 !important;
        width: auto !important;
        text-align: left;
        margin: 10px 0;
        text-align: center;
    }

    .formholder>input,
    .formholder>textarea {
        margin: 10px 0 !important;
        flex: 1 !important;
    }


    .submitholder>label {
        display: none !important;
    }

    .inputholder>input,
    .formholder>textarea {
        width: 100% !important
    }


}



/* ========================| TABLET | START */

@media only screen and (min-device-width : 600px) and (max-device-width : 1100px) {
section#Hero .wrap {
    flex-direction: column;
}
section#Hero .wrap .txt, section#Hero .wrap .img {
    width: 80%;
    margin: 0 auto;
  }

    section#Hero .wrap .txt {
    order: 2;
}
section#Hero .wrap .img {
    order: 1;
}

  section#About .wrap {
    flex-direction: column;
}
section#About .wrap .txt, section#About .wrap .img {
    width: 80%;
    margin: 0 auto;
    }

  section#Contact {
    flex-direction: column;
    text-align: center;
  }
  section#Contact .wrap {
    flex-direction: column;
  }

  section#Contact .wrap .left {
    width: 100%;
    height: 100%;
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}
section#Contact .wrap .right {
    width: 100%;
}
  section#Services .wrap {
    flex-direction: column;
  }
.ReviewWrap {
    flex-basis: 40%;
  }
}
/* ========================| TABLET | END */
/* ========================| MOBILE | START */
@media only screen and (max-width:600px) {

  div#logo {margin: 30px 0;}

.header {
    flex-direction: column;
    background-color: rgb(100, 99, 99);
    align-items: flex-start;
  }

.header .menu-icon {
    cursor: pointer;
    display: inline-block;
    right: 0;
    top: 0;
    padding: 28px 20px;
    position: absolute;
  }

header.scroll {
    padding-left: 0;
  }

  .header .menu-btn:checked ~ .menu {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
#logo img {
    width: 80%;
    margin: 0;
    margin-left: 30px;
  }
  section#Hero {
    margin-top: 125px;
    background-color: rgb(100, 99, 99);
}

section#Hero .wrap {
    flex-direction: column;
}
section#Hero .wrap .txt, section#Hero .wrap .img {
    width: 95%;
    margin: 0 auto;
  }
  section#Hero .wrap .txt {
    order: 2;
}
section#Hero .wrap .img {
    order: 1;
}

h1 {
    font-size: 2em;
    margin-top: 0;
}
  section#About .wrap {
    flex-direction: column;
}
section#About .wrap h2 {
  margin-top: 0;
  }
section#About .wrap .txt, section#About .wrap .img {
    width: 95%;
    margin: 0 auto;
    }

    .PxImage01 {
  background-size: cover;
}

section#Services .wrap {padding: 10px;}
  section#Contact {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    background-size: cover;
  }
  section#Contact .wrap {
    flex-direction: column;
    padding: 10px;
  }
  section#Contact .wrap .left {
    width: 100%;
    height: 100%;
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}
section#Contact .wrap .right {
    width: 100%;
}
  section#Contact .wrap a {
    font-size: .8em;
}
.ContactFormWrap {
    padding: 20px;
}
.ContactFormWrap .row {
    align-items: flex-start;
    flex-direction: column;
    text-align: left;
}
.ContactFormWrap .row label {
    margin-bottom: 10px;
}

section#Reviews .wrap {
    background-size: cover;
  }
.ReviewWrap {
    flex-basis: 100%;
  }

}

}
/* ========================| MOBILE | END */