@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Quicksand:wght@500;700&display=swap');
:root {
  --first-color: #5D534A;
  --second-color: #FFF5DA;
  --first-font: 'Quicksand', sans-serif;
  --second-font: 'Abril Fatface', cursive;
}
/* CSS Document */
html {
  scroll-behavior: smooth;
}
main {
  padding-bottom: 20px;
}
.btn1 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--first-color);
  color: var(--second-color);
  width: 286px;
  height: 57px;
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  border-radius: 52px;
  padding: 12px 85px;
  transition: all 0.2s ease-in-out;
}
.btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--second-color);
  color: var(--first-color);
  border: 2px solid var(--first-color);
  width: 286px;
  height: 57px;
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  border-radius: 52px;
  padding: 12px 0;
  transition: all 0.2s ease-in-out;
}
.more {
  background-color: var(--first-color);
  color: var(--second-color);
  font-family: var(--first-font);
  font-weight: 700;
  font-size: calc(15px + 0.6vw);
  line-height: 24px;
  height: 5rem;
  width: 100%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*Navigation*/
nav {
  background-color: transparent;
  color: var(--first-color);
  position: absolute;
  box-shadow: none;
  /*	z-index: 10;*/
}
nav .nav-wrapper {
  height: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  padding: 0 30px;
  margin: 0 auto;
}
nav .brand-logo {
  color: var(--first-color);
  position: relative;
}
nav i, nav i.material-icons {
  font-size: 40px;
}
nav .button-collapse {
  margin: 0;
}
nav a {
  color: var(--first-color);
  font-family: var(--first-font);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  z-index: 1;
}
nav ul a {
  color: var(--first-color);
  transition: all 0.2s ease-in-out;
  font-family: var(--first-font);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  margin: 0 10px;
}
nav ul a:hover {
  background-color: rgba(93, 83, 74, 0.80);
  color: var(--second-color);
  border-radius: 10px;
  outline: none;
}
nav ul li:focus, nav ul a:focus {
  outline-style: none;
}
nav ul a.active {
  background-color: var(--first-color);
  color: var(--second-color);
  border-radius: 10px;
}
nav .nav-close {
  text-align: right;
  font-size: 16px !important;
  align-self: flex-end;
  background-color: var(--first-color);
  color: var(--second-color);
  width: fit-content;
  border-radius: 10px;
  padding: 6px 11px;
}
/*
nav ul li:last-child {
  float: right;
}
*/
nav .btn {
  background-color: var(--first-color);
  color: var(--second-color);
  border-radius: 52px;
  transition: all 0.2s ease-in-out;
}
.btn:focus, .btn-large:focus, .btn-floating:focus {
	background-color: var(--first-color);
}
nav .btn:hover {
  box-shadow: 0 20px 30px -11px rgb(31 35 65 / 37%);
  transform: translate(0px, -3px);
  background-color: var(--first-color);
}
.btn:hover, .btn1:hover, .btn2:hover {
  box-shadow: 0 20px 30px -11px rgb(31 35 65 / 37%);
  transform: translate(0px, -3px);
  transition: all 0.3s ease-in-out;
}
.side-nav {
  padding: 20px 0;
}
.side-nav li > a:hover {
  background-color: rgba(93, 83, 74, 0.80);
}
/*Navigation-End*/
/*Hero*/
#hero {
  background-image: url("assets/large/hero-bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  align-items: center;
  width: -webkit-fill-available;
  /*  min-height: 720px;*/
}
#hero h1 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: calc(40px + 0.9vw);
  line-height: 60px;
  padding-bottom: 2rem;
}
#hero ul li {
  color: var(--first-color);
  font-family: var(--first-font);
  font-size: calc(16px + 0.9vw);
  font-weight: 700;
  line-height: calc(27px + 0.9vw);
}
/*End-Hero*/
/*Stairlifts*/
#stairlifts {
  max-width: 1200px;
  /*  width: 85%;*/
}
#stairlifts h2 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: calc(35px + 0.9vw);
  line-height: calc(65px +0.6vw);
}
#stairlifts .card {
  border: 2px solid var(--first-color);
}
#stairlifts h1 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: calc(35px + 0.9vw);
  line-height: clac(72px + 0.6vw);
}
#stairlifts h3 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: calc(30px + 0.5vw);
  line-height: calc(32px + 0.9vw);
  padding-bottom: 1rem;
}
#stairlifts p {
  color: var(--first-color);
  font-family: var(--first-font);
  font-weight: 500;
  font-size: calc(14px + 0.6vw);
  line-height: calc(20px + 0.6vw);
}
#stairlifts .more {
  position: unset;
  transition: all 0.3s ease-in-out;
}
/*
#stairlifts .more:hover {
  box-shadow: 0 20px 30px -11px rgb(31 35 65 / 37%);
  transform: translate(0px, -3px);
}
*/
#stairlifts img {
  object-fit: cover;
  object-position: top;
}
#stairlifts .need-card {
  background-color: var(--first-color);
  justify-content: space-evenly;
  min-height: 336px;
  padding: 1rem 11rem;
}
#stairlifts .need-card h2 {
  color: var(--second-color);
}
#stairlifts .need-card p {
  color: var(--second-color);
}
#stairlifts .btn1 {
  background-color: var(--second-color);
  color: var(--first-color);
  width: 286px;
  height: 57px;
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  border-radius: 52px;
  padding: 12px 85px;
}
#stairlifts .btn2 {
  background-color: var(--first-color);
  color: var(--second-color);
  width: 286px;
  height: 57px;
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  border-radius: 52px;
  padding: 12px 85px;
  border: 2px solid var(--second-color);
  transition: all 0.2s ease-in-out;
}
/*STAIRLIFTS-END*/
/*REVIEWS*/
#reviews {
  max-width: 1280px;
  width: 80%;
}
#reviews img {
  width: 100%;
}
#reviews h2 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: 48px;
  line-height: 65px;
}
#reviews .cards {
  background-image: url("assets/large/quotes.png");
  background-repeat: no-repeat;
  background-position: center;
  justify-content: space-evenly;
  padding: 20px 60px;
  min-height: 275px;
}
#reviews h4 {
  font-family: var(--second-font);
  color: var(--first-color);
  font-weight: 400;
  font-size: calc(16px + 0.6vw);
  line-height: calc(20px + 0.9vw);
}
#reviews h8 {
  font-family: var(--first-font);
  color: var(--first-color);
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
}
/*REVIEWS-END*/
/*CONTACT-FORM*/
#contact-form {
  max-width: 1280px;
  width: 80%;
  margin: 0 auto;
}
#contact-form h2 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: calc(35px + 0.9vw);
  line-height: calc(40px + 0.9vw);
}
#contact-form label {
  font-family: var(--first-font);
  color: var(--first-color);
  font-weight: 700;
  font-size: 18px;
  line-height: 18px;
  display: flex;
  flex-direction: column;
}
#contact-form input {
  border: 2px solid var(--first-color);
  border-radius: 10px;
  margin-top: 10px;
  padding-left: 10px;
  width: -webkit-fill-available;
}
#contact-form textarea {
  border: 2px solid var(--first-color);
  border-radius: 10px;
  margin-top: 10px;
  height: 120px;
}
#contact-form button {
  background-color: var(--first-color);
  color: var(--second-color);
  width: 50%;
  padding: 14px;
  border-radius: 52px;
  transition: all 0.2s ease-in-out;
}
#contact-form button:hover {
  box-shadow: 0 20px 30px -11px rgb(31 35 65 / 37%);
  transform: translate(0px, -3px);
}
#contact-form .address-block {
  background: #FFF;
  border-radius: 5px;
  /*  padding: 20px;*/
  display: none;
}
#contact-form .address-block.addresses-found {
  display: grid;
  /*  border: 2px solid limegreen;*/
}
/*CONTACT-FORM--END*/
/*STAIRLIFTS_PAGE*/
#ourStairlifts {
  max-width: 1200px;
  padding: 70px 10px 10px 10px;
  margin: 0px auto;
}
#ourStairlifts h1 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: 60px;
  line-height: 72px;
}
#ourStairlifts h2 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: 48px;
  line-height: 65px;
}
#ourStairlifts p {
  color: var(--first-color);
  font-family: var(--first-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
}
#ourStairlifts .cards {
  border: 2px solid var(--first-color);
  min-height: 516px;
  max-width: 1051px;
}
#ourStairlifts .image1 {
  background-image: url("assets/large/acorn-130.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -174px;
  width: 100%;
  border-right: 2px solid var(--first-color);
}
#ourStairlifts .image2 {
  background-image: url("assets/large/acorn-180.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position-x: -134px;
  width: 100%;
  border-right: 2px solid var(--first-color);
}
#ourStairlifts ul li {
  list-style-type: initial;
}
#ourStairlifts ul {
  padding-left: 20px;
}
#ourStairlifts .btn1, #ourStairlifts .btn2 {
  padding: 0px;
  transition: all 0.2s ease-in-out;
}
#ourStairlifts .need-card {
  background-color: var(--first-color);
  justify-content: space-evenly;
  min-height: 336px;
  padding: 1rem 6rem;
  max-width: 1051px;
  width: 100%
}
#ourStairlifts .need-card h2 {
  color: var(--second-color);
}
#ourStairlifts .need-card p {
  color: var(--second-color);
  font-weight: 500px;
  font-size: 24px;
  line-height: 36px;
}
#ourStairlifts .need-card .btn1 {
  background-color: var(--second-color);
  color: var(--first-color);
  width: 286px;
  height: 57px;
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  border-radius: 52px;
  padding: 12px 85px;
  transition: all 0.2s ease-in-out;
}
#ourStairlifts .need-card .btn2 {
  background-color: var(--first-color);
  color: var(--second-color);
  width: 286px;
  height: 57px;
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  border-radius: 52px;
  padding: 12px 85px;
  border: 2px solid var(--second-color);
  transition: all 0.2s ease-in-out;
}
/*END-STAIRLIFTS_PAGE*/
/*HELP*/
#help {
  padding-top: 70px;
  max-width: 1100px;
  margin: 0 auto;
}
#help section {
  margin: 0 20px;
}
#help h2 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: 48px;
  line-height: 65px;
  text-align: center;
}
#help p {
  color: var(--first-color);
  font-family: var(--first-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
}
/*Accordion-Styling*/
#help .accordion {
  width: 100%;
  margin: 30px auto 20px;
  background: #FFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
#help .accordion li {
  margin-bottom: 2rem;
}
#help .accordion .link {
  font-family: var(--first-font);
  font-weight: 700;
  font-size: calc(16px + 0.6vw);
  line-height: 24px;
  cursor: pointer;
  display: block;
  padding: 15px 38px 15px 20px;
  color: #4D4D4D;
  border: 1px solid #CCC;
  border-radius: 10px;
  position: relative;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
/*
#help .accordion li:first-child .link { border-radius: 10px 10px 0 0; }
#help .accordion li:last-child .link { border-radius: 0 0px 10px 10px; }
*/
#help .accordion li i {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: 18px;
  color: #595959;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
#help .accordion li i.fa-chevron-down {
  right: 12px;
  left: auto;
  font-size: 16px;
}
#help .accordion li.open .link {
  background-color: var(--first-color);
  color: var(--second-color);
  border-radius: 10px 10px 0 0;
  border-bottom: 0px;
  border: 1px;
}
#help .accordion li.open i {
  background-color: var(--first-color);
  color: var(--second-color);
}
#help .accordion li.open i.fa-chevron-down {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
/**
 * Submenu
 -----------------------------*/
#help .submenu {
  display: none;
  background-color: var(--first-color);
  color: var(--second-color);
  font-family: var(--first-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 30px;
  border-radius: 0 0px 10px 10px;
  padding: 10px 55px;
}
/*#help .submenu li { border-bottom: 1px solid #4b4a5e; }*/
#help .submenu a {
  display: block;
  text-decoration: none;
  color: #d9d9d9;
  padding: 12px;
  padding-left: 42px;
  -webkit-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
#help .submenu a:hover {
  background: #b63b4d;
  color: #FFF;
}
/*--Accordion-END--*/
#help a {
  background-color: var(--first-color);
  color: var(--second-color);
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  width: 100%;
  padding: 50px 0px;
  border-radius: 10px;
  text-align: -webkit-center;
  transition: all 0.3s ease-in-out;
}
#help a:hover {
  box-shadow: 0 20px 30px -11px rgb(31 35 65 / 37%);
  transform: translate(0px, -3px);
}
/*HELP-END*/
/*CONTACT*/
#contact {
  padding-top: 70px;
  max-width: 1100px;
  margin: 0 auto;
}
#contact h2 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: calc(35px + 0.6vw);
  line-height: calc(41px + 0.6vw);
  text-align: center;
}
#contact p {
  color: var(--first-color);
  font-family: var(--first-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  text-align: center;
}
/*CONTACT-END*/
/*Terms styling*/
.generic-content {
  font-family: var(--first-font);
  color: var(--first-color);
  padding: 0 4rem;
}
.generic-content h1 {
  font-size: calc(30px + 0.6vw);
}
.generic-content h2 {
  font-size: calc(20px + 0.6vw);
}
.generic-content p, .generic-content ol {
  padding-bottom: 1rem;
}
/*Terms-END*/
/*FOOTER*/
footer {
  background-color: var(--first-color);
  /*  background-image: url("assets/large/footer-logo.png");*/
  background-repeat: no-repeat;
  background-position: right;
  background-origin: content-box;
  padding: 40px 50px;
  /*  margin-top: 20px;*/
  /*  min-height: 348px;*/
  color: var(--second-color);
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 15px;
}
/*DESCRIPTION*/
#description {
  padding-top: 110px;
  max-width: 1200px;
  margin: 0 auto;
}
#description .btn2 {
  width: 100%;
}
/*Image-Gallery*/
#description .row {
  display: flex;
  margin-top: 10px;
  width: 80% /*	column-gap: 10px;*/
}
#description .slideItem {
  cursor: pointer;
}
#description .cotainer {
  position: relative;
  display: block;
}
#description .cross {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
}
#description .text {
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 20px;
  color: white;
  letter-spacing: 1px;
}
/* Closable button inside the image */
#description .closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}
/*Gallery-END*/
#description input {
  display: none;
}
#description h1 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: calc(40px + 0.9vw);
  line-height: calc(50px + 0.6vw);
}
#description h2 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: calc(35px + 0.6vw);
  line-height: calc(50px + 0.6vw);
}
#description p {
  color: var(--first-color);
  font-family: var(--first-font);
  font-weight: 500;
  font-size: calc(12px + 0.3vw);
  line-height: calc(15px + 0.3vw);
}
#description ul li {
  list-style-type: initial;
}
#description .gallery-card {
  max-width: 90%;
}
/*TABS*/
/* Style the tab */
#descTab {
  width: 100%;
}
#descTab .tab {
  overflow: hidden;
  border-bottom: 1px solid var(--first-color);
  /*  background-color: #f1f1f1;*/
}
/* Style the buttons that are used to open the tab content */
#descTab .tab button {
  background-color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  width: 100%;
  color: rgba(93, 83, 74, 0.5);
}
/* Change background color of buttons on hover */
#descTab .tab button:hover {
  /*  border-bottom: 2px solid var(--first-color);*/
}
/* Create an active/current tablink class */
#descTab .tab button.active {
  border-bottom: 4px solid var(--first-color);
  color: var(--first-color);
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
}
/* Style the tab content */
#descTab .tabcontent {
  display: none;
  padding: 4rem 7rem;
  /*  border: 1px solid #ccc;*/
  border-top: none;
}
#descTab .tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#descTab h3 {
  color: var(--first-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: 32px;
  line-height: 42px;
  padding-bottom: 20px;
}
#descTab .info-tab {
  border-left: 2px solid var(--first-color);
}
#descTab .info-tab li {
  margin-left: 25px;
  list-style-type: none !important;
}
#descTab ol {
  border-left: 3px solid rgba(93, 83, 74, 0.50);
  padding-left: 20px;
  margin-left: 28px
}
#descTab ol li {
  counter-increment: item;
  text-indent: -31px
}
#descTab ol li:before {
  margin-right: 10px;
  content: counter(item);
  background-color: var(--first-color);
  border-radius: 18px;
  color: var(--second-color);
  font-weight: bold;
  width: 1.5rem;
  text-align: center;
  display: inline-flex;
  align-items: center;
  text-indent: 6px;
}
#descTab .nums {
  background-color: var(--first-color);
  color: var(--second-color);
  border-radius: 18px;
  padding: 4px 10px;
  margin-right: 13px;
}
/**/
#revTabs h3 {
  font-family: var(--second-font);
  color: var(--first-color);
  font-weight: 400;
  font-size: 45px;
  line-height: 60px;
}
#revTabs h8 {
  font-family: var(--first-font);
  color: var(--first-color);
  font-weight: 700;
  font-size: 24px;
  line-height: 25px;
}
#revTabs .rev-tab {
  position: relative;
  border: 2px solid var(--first-color);
  align-items: center;
  height: auto;
}
#revTabs .rev-tab img {
  position: absolute;
  /*	transform: translate(0, -46px);*/
  background-color: white;
  padding: 0 13px;
  width: 30%;
  top: -10px;
  min-width: 140px;
}
#revTabs .rev-tab p {
  font-family: var(--first-font);
  font-weight: 500;
  font-size: calc(10px + 0.4vw);
  line-height: 25px;
  padding: 5px;
}
#revTabs .rev-tab h6 {
  position: absolute;
  background-color: white;
  padding: 0 13px;
  bottom: -8px;
}
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 5; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  max-height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  padding-top: 30px;
  box-shadow: none;
}
/* Modal Content/Box */
#myModal h1 {
  color: var(--second-color);
  font-family: var(--second-font);
  font-weight: 400;
  font-size: 48px;
  line-height: 65px;
}
#myModal p {
  color: var(--second-color);
  font-family: var(--first-font);
  font-weight: 500;
  font-size: 24px;
  line-height: 30px;
}
.modal-content {
  background-color: var(--first-color);
  color: var(--second-color);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  text-align: center;
  align-items: center;
  max-width: 700px;
}
.modal-content .btn {
  background-color: var(--second-color);
  color: var(--first-color);
  width: 180px;
  height: 44px;
  font-family: var(--first-font);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  border-radius: 52px;
  /*    padding: 12px 85px;*/
}
/* The Close Button */
.modalClose {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.modalClose:hover, .modalClose:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
@media screen and (max-width: 800px) {
  .descTabs .follow {
    margin: 400px auto 0;
  }
}
/*TABS-END*/
/*DESCRIPTION-END*/
/*FOOTER-END*/ /*Page Transtion*/
/*
.fadeSiteIn {
  animation: fadeSiteIn 0.1s ease-out forwards; 
}
main.fadeSiteOut {
  animation: fadeSiteOut 0.1s ease-out forwards; 
}
*/
@keyframes fadeSiteIn { /* [1] */
  from {
    opacity: 0;
    filter: blur(0);
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(1);
    transform: scale(1);
  }
}
@keyframes fadeSiteOut { /* [2] */
  from {
    opacity: 1;
    filter: blur(1);
    transform: scale(1);
  }
  to {
    opacity: 0;
    filter: blur(0);
    transform: scale(0.99);
  }
}