/* 
==========================================
Mobile-first responsive design by WebSofa

Visit: https://www.websofa.com.au/ 

Email: info@websofa.com.au 
==========================================
*/

:root {
   --accent-color: rgb(141, 72, 159);
   --contrast-color: #f1a73a;
   --body-color: #222;
   --contrast-text-color: #fff;
   --btn-text-color: #fff;
   --heading-font-family: "Poppins", sans-serif;
   --body-font-family: "Poppins", sans-serif;
}
*,
*::after,
*::before {
   box-sizing: border-box;
}
html {
   font-size: 62.5%;
   scroll-behavior: smooth;
}
body {
   max-width: 100%;
   overflow-x: hidden;
   margin: 0;
   background-color: #fdfdfd;
}
img {
   display: block;
   width: 100%;
   height: auto;
   object-fit: cover;
}

/* Utility classes */

.center {
   text-align: center;
   margin: auto;
}
.top-padding {
   padding-top: 120px;
}
.bottom-padding {
   padding-bottom: 120px;
}
.section-line {
   text-align: center;
   width: 40%;
   margin: 50px auto;
   border-bottom: 3px dotted var(--accent-color);
}
.no-underline {
   border-bottom: none;
}


/* Font, link and button styling */

.main-heading {
   font-size: clamp(2.8rem, 3.5vw, 5rem);
   font-weight: bold;
   color: var(--accent-color);
   margin-block: 0.5em;
   font-family: "Arial", sans-serif;
   line-height: 1.6;
}
h2 {
   font-size: clamp(2.2rem, 3vw, 3.5rem);
   color: var(--accent-color);
   margin: 1em 0;
   font-family: "Poppins", sans-serif;
   font-weight: bold;
}
h3 {
   font-size: clamp(1.6rem, 1.9vw, 2rem);
   font-weight: normal;
   color: var(--accent-color);
   margin: 1em 0;
   font-family: "Poppins", sans-serif;
   padding-bottom: 1em;
   border-bottom: 1px solid;
   margin-bottom: 2em;
   line-height: 1.6;
}
p,
span,
a,
li,
label {
   font-size: clamp(1.4rem, 1.4vw, 1.8rem);
   color: var(--body-color);
   line-height: 1.7;
   font-family: "Poppins", sans-serif;
}
a {
   margin-top: 0;
   text-decoration: none;
}
a:hover {
   color: var(--accent-color);
}
.btn,
.herobtn {
   display: block;
   padding: 0.75em 1.5em;
   text-decoration: none;
   text-transform: uppercase;
   border-radius: 10px;
   text-align: center;
   transition: 0.5s ease-in-out;
   cursor: pointer;
}
.herobtn {
   background-color: var(--accent-color);
   color: var(--btn-text-color);
   border: none;
   margin-top: 1.5em;
}
.btn {
   margin: 30px 0;
   background-color: var(--btn-text-color);
   color: var(--accent-color);
   border: 1px solid var(--accent-color);
}
.btn:hover,
.btn:focus,
.herobtn:hover,
.herobtn:focus {
   background-color: var(--contrast-color);
   color: #fff;
   border: var(--contrast-color);
}
.btn-content {
   color: var(--accent-color);
   font-size: 1.5rem;
}
.btn-icon {
   color: var(--accent-color);
   font-weight: 300;
   margin-left: 10px;
}
.background {
   background-image: url(../img/background.jpg);
   width: 100%;
   box-shadow: 0px 2px 2px #EFEFE5, 0px -2px 2px #EFEFE5;
}

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

Mobile version

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

/* banner containing logo and business details */

.banner {
   background-image: url(../img/background.jpg);
   padding-block: 2em;
}
.logo {
   margin-left: 5%;
   width: auto;
}
.logo_image {
   width: 10em;
   height: auto;
}
.banner-details {
   margin-top: 1em;
}
.banner-details p {
   margin-left: 5%;
   font-size: 1.3rem;
   color: #000;
   line-height: 1.4;
}
.banner-details p:first-of-type {
   font-size: 1.4rem;
   font-weight: bold;
}

/* hero section */

.hero {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.hero1,
.hero2,
.hero3 {
   position: relative;
   width: 100%;
   display: flex;
   justify-content: center;
   height: 35vh;
}
.hero1 img,
.hero2 img,
.hero3 img {
   width: 100%;
   height: 35vh;
   object-fit: cover;
}
.hero-content {
   /* align inside parent element */
   padding-left: 5%;
   position: absolute;
   top: 50px;
}
.hero-text {
   /* format hero font*/
   font-size: 2rem;
   color: #f2f2f2;
   text-shadow: 2px 2px 2px var(--body-color);
   line-height: 1.5;
   margin: 0;
   font-family: "arial", sans-serif;
}
.mySlides {
   display: none;
}

/* Fading animation */
.fade {
   animation-name: fade;
   animation-duration: 1.5s;
}

@keyframes fade {
   from {
      opacity: 0.4;
   }
   to {
      opacity: 1;
   }
}

.grid-2,
.grid-2-specialty {
   display: grid;
   grid-template-columns: 1fr;
}
.container {
   padding: 30px 5%;
   overflow: hidden;
   margin: 0 auto;
   max-width: 1444px;
}
.container p {
   margin-bottom: 10px;
}
.grid-list-ul {
   margin: 0 auto;
   padding-left: 15px;
   list-style-type: square;
}
.grid-list-item {
   line-height: 1.2;
   margin: 0;
   color: var(--accent-color);
   text-align: left;
}
.grid-list-span {
   color: var(--body-color);
}
.grid-before-after {
   display: grid;
   grid-template-columns: 1fr;
   justify-content: center;
}
.grid-4 {
   display: grid;
   grid-template-columns: 1fr;
   gap: 30px;
   justify-content: center;
   align-items: center;
   width: 90%;
   margin: 30px auto;
}
.grid-image {
   border-radius: 10px;
   object-fit: contain;
   border: 1px solid #d3d3d3;
   box-shadow: 5px 5px 8px #888888;
   margin-bottom: 3em;
}
.grid-3 {
   display: grid;
   grid-template-columns: 1fr;
   justify-content: center;
   margin-top: 30px;
}

/* -------Form (mobile version)----- */

.form {
   margin-bottom: 30px;
}
label {
   display: inline-block;
   color: #1b1b1b;
   font-size: 1.8rem;
   font-weight: 500;
   margin: 10px 0;
   font-family: "Poppins", sans-serif;
}
.sweet {
   margin-top: 0;
   display: none;
   visibility: hidden;
}

/*make the two columns stack on top of each other instead of next to each other */

.col-25,
.col-75,
input[type="submit"] {
   width: 100%;
   margin-top: 0;
}
input[type="text"],
select,
textarea {
   width: 100%;
   padding: 12px;
   border-width: 1px;
   border-style: solid;
   border-color: #ccc #ccc #ccc var(--accent-color);
   border-radius: 3px;
   box-sizing: border-box;
   resize: vertical;
   font-family: "Poppins", sans-serif;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.submit {
   background-color: var(--accent-color);
   color: white;
   font-size: 1.6rem;
   padding: 20px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   margin: 30px 0;
   transition: 0.7s ease-in-out;
}
.submit:hover {
   background-color: var(--contrast-color);
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */

@media (max-width: 600px) {

   .col-25,
   .col-75,
   .submit { 
      width: 100%;
      margin-top: 0;
   }
}

/* New Testimonials Section (cards)*/

.testimonials {
   padding: 40px 5%;
   color: #1b1b1b;
   text-align: left;
   margin: 0 auto;
}
.row {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   margin-bottom: 10px;
}
.testimonial {
   padding: 30px;
   box-shadow: 5px 5px 12px 0px rgba(134, 134, 134, 0.37);
   border: 1px solid rgb(197, 196, 196);
   border-radius: 5px;
   background-color: #fff;
   margin-bottom: 1em;
}
.testimonial p {
   font-size: 1.5rem;
   line-height: 1.5;
}
.name {
   font-size: 20px;
   margin: 20px auto;
}
.name h3 {
   font-family: "Poppins", sans-serif;
   font-size: 1.8rem;
   font-weight: 500;
   text-align: center;
   font-style: italic;
}

/* Fading animation */

.fade {
   animation-name: fade;
   animation-duration: 1.5s;
}

@keyframes fade {
   from {
      opacity: 0.4;
   }
   to {
      opacity: 1;
   }
}

/* ----- Specialty page ------- */

.lhs-text {
   margin-bottom: 3em;
}

/* =========================
Footer
   ========================= */

footer {
   width: 100%;
   overflow-x: hidden;
   text-align: center;
   padding: 2rem 1rem;
   margin: 0 auto;
   color: #f2f2f2;
   background-image: linear-gradient(90deg, rgba(141, 72, 159, 0.8) 0%, var(--accent-color) 50%, rgba(141, 72, 159, 0.8) 100%);
}
footer h2 {
   font-size: 2.8rem;
   margin-bottom: 10px;
   font-stretch: extra-expanded;
   color: var(--btn-text-color);
}
footer p {
   line-height: 2.2;
   margin-top: 15px;
   margin-bottom: 20px;
   color: var(--btn-text-color);
}
footer span {
   padding-left: 10px;
   line-height: 2.2;
   margin: 5px 0;
   color: var(--btn-text-color);
}
footer a {
   line-height: 2.2;
   margin: 5px 0;
   color: #f2f2f2;
   transition: ease-in-out 0.4s;
}
footer a:hover {
   color: var(--contrast-color);
}

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

Screen Sizes Up to 767px

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

@media screen and (max-width: 767px) {
   .desktop span {
      display: none;
   }
   .desktop i {
      display: none;
   }
   .mobile span {
      display: inline;
   }
   .mobile i {
      display: inline;
   }
}

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

Desktop version

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



/* ------ Index page - desktop ------ */

@media only screen and (min-width: 768px) {

   /* ------ Utility classes ------ */

   .columns {
      column-count: 2;
      column-gap: 5em;
      margin-bottom: 5em;
}
   .active {
      color: var(--accent-color);
      padding-bottom: 10px;
      border-bottom-style: solid;
      border-bottom-width: 2px;
      width: fit-content;
      pointer-events: none;
   }
   .btn,
   .herobtn {
      display: block;
      padding: 0.75em 1.5em;
      font-size: inherit;
      text-decoration: none;
      text-transform: uppercase;
      border-radius: 10px;
      text-align: center;
      transition: 0.5s ease-in-out;
      cursor: pointer;
   }
   .herobtn {
      margin-top: 2em;
   }
   .websofa {
      font-size: 1.6rem;
      font-style: italic;
      font-weight: 200;
   }
   section {
      margin-bottom: 8em;
   }

   /* banner containing logo and business details */

   .banner {
      background-image: url(../img/background.jpg);
      padding: 2em 5%;
   }
   .banner-content {
      display: grid;
      grid-template-columns: 0.5fr 1fr;
      justify-content: space-between;
      align-items: center;
   }
  .logo_image {
      margin: 0;
      width: 12em;
      height: auto;
   }
   .banner-details {
      margin-top: 0;
      justify-self: end;
      align-self: start;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items:flex-start;
      width: 500px;
   }
   .banner-details p {
      font-size: 1.4rem;
      color: #000;
      line-height: 1.4;
   }
   .banner-details p:first-of-type {
      font-size: 1.8rem;
      font-weight: bold;
   }

   /* hero section */

   .hero {
      height: 60vh;
      width: 100%;
      position: relative;
   }
   .hero1,
   .hero2,
   .hero3 {
      position: relative;
      width: 100%;
      height: 60vh;
      display: flex;
   }
   .hero1 img,
   .hero2 img,
   .hero3 img {
      width: 100%;
      height: 60vh;
      object-fit: cover;
   }
   .hero-content {
      /* align inside parent elements hero1, hero2, hero3 */
      position: absolute;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: left;
      margin-left: 50px;
   }
   .hero-text {
      font-size: 4.2rem;
   }
   .grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-items: start;
      align-items: start;
   }
   .grid-2-specialty {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      align-items: start;
      justify-items: center;
      gap: 10em;
      margin-bottom: 3em;
   }
   .lhs-text {
      justify-self: start;
      margin-bottom: 0;
   }
   .specialty-image {
      justify-self: start;
   }
   .specialty-image img {
      aspect-ratio: 3 / 2;
      max-height: 250px;
   }
   .grid-list-ul {
      margin: 0 auto;
      padding-left: 20px;
      list-style-type: square;
   }
   .grid-list-item {
      max-width: 1024px;
      line-height: 1.2;
      margin: 0;
      color: var(--accent-color);
      text-align: left;
   }

   /* Testimonials Section (desktop)*/


.testimonialcards {
      display: flex;
      flex: 50%;
      padding: 10px 0;
      gap: 2em;
   }
   .testimonial {
      padding: 30px;
      flex: 0.9;
      border-radius: 10px;
      box-shadow: 5px 5px 12px 0px rgba(134, 134, 134, 0.37);
      background-color: #fff;
   }
   .container {
      margin: 0 auto;
      padding: 0 10% 5em;
   }
   .grid-before-after {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0px;
      width: 80%;
      margin: 0;
      height: fit-content;
      justify-items: center;
      margin: 50px auto;
   }
   .grid-3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      justify-content: center;
      height: fit-content;
      justify-items: left;
      margin: 50px auto;
      gap: 20px;
   }
   .grid3-specialty {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      justify-content: center;
      height: fit-content;
      justify-items: left;
      margin: 50px auto;
      gap: 50px;
   }
   .grid-3-text {
      font-size: 1.6rem;
      margin-top: 30px;
      padding: 20px 5% 0 5%;
   }
   .grid-image,
   .grid-3_image {
      border-radius: 10px;
      object-fit: cover;
      border: 1px solid #d3d3d3;
      box-shadow: 5px 5px 8px #888888;
      margin-bottom: 0;
   }
   .grid-4 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      justify-content: center;
      height: fit-content;
      justify-items: center;
      margin: 50px auto;
      gap: 20px;
      width: 100%;
   }
   .grid-4_image {
      border-radius: 10px;
      width: 300px;
      height: auto;
      border: 1px solid #d3d3d3;
      box-shadow: 5px 5px 8px #888888;
   }

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

   Contact Form (desktop)

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

   .form {
      margin: 5em auto;
      padding: 5em auto;
   }
   input[type="text"],
   select,
   textarea {
      width: 100%;
      padding: 12px;
      border-width: 1px;
      border-style: solid;
      border-color: #ccc #ccc #ccc var(--accent-color);
      border-radius: 4px;
      box-sizing: border-box;
      resize: vertical;
      font-family: "Poppins", sans-serif;
      font-size: 1.4rem;
      box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
   }
   label {
      padding: 0 12px 12px 0;
      display: inline-block;
   }
   .submit {
      margin-top: 20px;
      background-color: var(--accent-color);
      color: #fff;
      font-size: 1.8rem;
      padding: 1em 2em;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      float: right;
      transition: ease-in-out 0.7s;
   }
   .submit:hover {
      background-color: var(--contrast-color);
   }
   .sweet {
      display: none;
      visibility: hidden;
   }
   .col-25 {
      float: left;
      width: 25%;
      margin-top: 6px;
   }
   .col-75 {
      float: left;
      width: 75%;
      margin-top: 6px;
   }

   /* Clear floats after the columns */

   .row:after {
      content: "";
      display: table;
      clear: both;
   }

   /* Testimonials Section (tablet)*/

   .testimonials {
      padding: 50px 10%;
      color: #1b1b1b;
      text-align: left;
      min-height: 350px;
      margin: 0 auto;
      max-width: 1444px;
   }
   .testimonialcards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 10px 0;
   }
   .testimonial {
      padding: 30px;
      border-radius: 10px;
      box-shadow: 5px 5px 12px 0px rgba(134, 134, 134, 0.37);
      background-color: #fff;
   }
}

@media only screen and (min-width: 1024px) {
   /* Testimonials Section (desktop)*/

   .testimonials {
      padding: 50px 10%;
      color: #1b1b1b;
      text-align: left;
      min-height: 350px;
      margin: 0 auto;
      max-width: 1444px;
   }
   .testimonialcards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2em;
      padding: 10px 0;
   }
   .testimonial {
      padding: 30px;
      flex: 0.9;
      border-radius: 10px;
      box-shadow: 5px 5px 12px 0px rgba(134, 134, 134, 0.37);
      background-color: #fff;
   }
}

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

Large screens

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

@media only screen and (min-width: 1544px) {

   .hero-content {
      /* align inside parent element */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 10%;
      position: absolute;
      top: 15em;
   }
   .testimonials-banner-text {
      color: var(--contrast-text-color);
      width: 850px;
      font-size: 2.2rem;
      line-height: 1.3;
      margin: 0 auto;
   }
   cite {
      color: var(--contrast-text-color);
      font-size: 1.8rem;
      display: block;
      text-align: center;
      width: auto;
      margin: 10px auto;
   }
}