/* Base Styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   font-size: 62.5%;
}

body {
   font-family: "Poppins", sans-serif;
   font-weight: 300;
   color: #989898;
   line-height: 1.9;
   background-color: #f3f3f3;
}

/* Header */
header {
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./img/thjrheader.jpg") no-repeat center center/cover;
   height: 90vh;
   font-size: 2rem;
   position: relative;
}

.header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: rgba(0, 0, 0, 0.3);
   padding: 2rem;
   backdrop-filter: blur(5px);
}

nav {
   display: flex;
   align-items: center;
   height: 150px;
}

nav ul {
   display: flex;
   gap: 2rem;
   list-style: none;
   padding-right: 2rem;
}

nav ul li a {
   color: #fff;
   text-decoration: none;
   font-size: 1.8rem;
   font-weight: 500;
   transition: all 0.3s ease;
   padding: 0.5rem 1rem;
   border-radius: 0.5rem;
}

nav ul li a:hover,
nav ul li a[aria-current="page"] {
   color: #00b5ba;
   background-color: rgba(255, 255, 255, 0.1);
}

.socials {
   display: flex;
   flex-direction: column;
   gap: 2rem;
   padding-right: 2rem;
}

.cta {
   width: 80%;
   padding-top: 8vh;
   margin: 0 auto;
   text-align: center;
}

.cta h1 {
   color: #fff;
   font-size: 4.2rem;
   font-weight: 700;
   margin-bottom: 2rem;
   line-height: 1.2;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
   color: #fff;
   font-size: 2rem;
   margin-bottom: 3rem;
   font-weight: 400;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.cta-button {
   display: inline-block;
   text-decoration: none;
   padding: 1.5rem 3rem;
   background: linear-gradient(45deg, #00b5ba, #007f81);
   color: #fff;
   font-size: 2rem;
   font-weight: 600;
   border-radius: 0.8rem;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 6px 20px rgba(0, 181, 186, 0.3);
   border: 2px solid transparent;
}

.cta-button:hover {
   background: linear-gradient(45deg, #007f81, #00b5ba);
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(0, 181, 186, 0.4);
   border-color: #fff;
}

/* Services */

.services {
   padding: 8rem 0;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.services h2 {
   font-size: 4.2rem;
   color: #00b5ba;
   text-align: center;
   margin-bottom: 2rem;
   font-weight: 700;
}

.services-intro {
   font-size: 2rem;
   text-align: center;
   margin-bottom: 6rem;
   color: #333;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.services-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 3rem;
   padding: 0 4rem;
   margin-bottom: 6rem;
}

.service-card {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   height: 350px;
   padding: 2rem;
   background-size: cover;
   background-position: center;
   border-radius: 1.5rem;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
   color: #fff;
   text-align: center;
   transition: all 0.4s ease;
   filter: blur(5px);
   position: relative;
   overflow: hidden;
}

.service-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
   z-index: 1;
}

.service-card > * {
   position: relative;
   z-index: 2;
}

.service-card.loaded {
   filter: none;
}

.service-card:hover {
   transform: translateY(-10px) scale(1.02);
   box-shadow: 0 15px 40px rgba(0, 181, 186, 0.25);
}

.service-card h3 {
   font-size: 2.4rem;
   font-weight: 700;
   margin-bottom: 1rem;
   background: rgba(0, 181, 186, 0.9);
   padding: 1rem;
   border-radius: 1rem;
   backdrop-filter: blur(10px);
}

.service-card p {
   font-size: 1.6rem;
   line-height: 1.6;
   background: rgba(0, 0, 0, 0.6);
   padding: 1rem;
   border-radius: 0.8rem;
   backdrop-filter: blur(5px);
}

/* Additional Services */
.additional-services {
   background: #fff;
   padding: 6rem 4rem;
   border-radius: 2rem;
   margin: 0 4rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.additional-services h3 {
   font-size: 3.2rem;
   color: #00b5ba;
   text-align: center;
   margin-bottom: 4rem;
   font-weight: 600;
}

.service-list {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 3rem;
}

.service-item {
   text-align: center;
   padding: 2rem;
   border-radius: 1rem;
   background: linear-gradient(135deg, #f8f9fa, #e9ecef);
   transition: all 0.3s ease;
}

.service-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 20px rgba(0, 181, 186, 0.15);
}

.service-item h4 {
   font-size: 2rem;
   color: #333;
   margin-bottom: 1rem;
   font-weight: 600;
}

.service-item p {
   font-size: 1.4rem;
   color: #666;
   line-height: 1.6;
}

/* Responsive Styles */
@media (max-width: 768px) {
   .services-container {
      flex-direction: column;
      align-items: center;
   }

   .service-card {
      width: 80%;
      margin-bottom: 2rem;
   }
}

@media (max-width: 480px) {
   .service-card {
      width: 90%;
   }

   .service-card h3 {
      font-size: 1.8rem;
   }

   .service-card p {
      font-size: 1.2rem;
   }
}

/* About */
.about {
   padding: 8rem 0;
   background: linear-gradient(135deg, #00b5ba 0%, #007f81 100%);
   color: #fff;
}

.about h2 {
   font-size: 4.2rem;
   color: #fff;
   text-align: center;
   margin-bottom: 6rem;
   font-weight: 700;
}

.about-container {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 6rem;
   padding: 0 4rem;
   max-width: 1400px;
   margin: 0 auto;
}

.about-container img {
   width: 350px;
   height: 350px;
   border-radius: 50%;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
   object-fit: contain;
   border: 5px solid rgba(255, 255, 255, 0.2);
}

.about-container div {
   flex: 1;
   max-width: 700px;
}

.about-container p {
   font-size: 1.8rem;
   margin-bottom: 2.5rem;
   line-height: 1.8;
   color: rgba(255, 255, 255, 0.95);
}

.about-container strong {
   color: #fff;
   font-weight: 600;
}

.why-choose-us {
   background: rgba(255, 255, 255, 0.1);
   padding: 3rem;
   border-radius: 1.5rem;
   margin: 3rem 0;
   backdrop-filter: blur(10px);
}

.why-choose-us h3 {
   font-size: 2.4rem;
   color: #fff;
   margin-bottom: 2rem;
   font-weight: 600;
}

.why-choose-us ul {
   list-style: none;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1rem;
}

.why-choose-us li {
   font-size: 1.6rem;
   color: rgba(255, 255, 255, 0.95);
   padding: 0.5rem 0;
   font-weight: 500;
}

.about-container .cta-button {
   background: #fff;
   color: #00b5ba;
   font-size: 1.8rem;
   font-weight: 600;
   padding: 1.2rem 2.5rem;
   border-radius: 0.8rem;
   text-decoration: none;
   display: inline-block;
   transition: all 0.3s ease;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.about-container .cta-button:hover {
   background: #f8f9fa;
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Testimonials */
.testimonials {
   padding: 8rem 0;
   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.testimonials h2 {
   font-size: 4.2rem;
   color: #00b5ba;
   text-align: center;
   margin-bottom: 2rem;
   font-weight: 700;
}

.testimonials-intro {
   font-size: 2rem;
   text-align: center;
   margin-bottom: 6rem;
   color: #333;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.testimonials-container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 4rem;
   padding: 0 4rem;
   margin-bottom: 6rem;
   max-width: 1400px;
   margin-left: auto;
   margin-right: auto;
}

.testimonial {
   text-align: center;
   background: #fff;
   padding: 3rem;
   border-radius: 2rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   position: relative;
}

.testimonial:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 40px rgba(0, 181, 186, 0.15);
}

.testimonial::before {
   content: '"';
   position: absolute;
   top: -10px;
   left: 20px;
   font-size: 8rem;
   color: #00b5ba;
   font-family: serif;
   line-height: 1;
}

.stars {
   font-size: 2rem;
   color: #ffd700;
   margin-bottom: 2rem;
}

.testimonial p:first-of-type {
   font-size: 1.6rem;
   margin-bottom: 2rem;
   line-height: 1.8;
   color: #333;
   font-style: italic;
}

.customer-name {
   font-size: 1.6rem;
   color: #00b5ba;
   font-weight: 600;
   margin-bottom: 0.5rem !important;
}

.service-type {
   font-size: 1.4rem;
   color: #666;
   font-weight: 500;
   margin-bottom: 0 !important;
}

/* Service Areas */
.service-areas {
   text-align: center;
   background: #fff;
   padding: 4rem;
   border-radius: 2rem;
   margin: 0 4rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.service-areas h3 {
   font-size: 3.2rem;
   color: #00b5ba;
   margin-bottom: 3rem;
   font-weight: 600;
}

.areas {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 2rem;
}

.area {
   background: linear-gradient(135deg, #00b5ba, #007f81);
   color: #fff;
   padding: 1rem 2rem;
   border-radius: 2rem;
   font-size: 1.6rem;
   font-weight: 500;
   transition: all 0.3s ease;
   box-shadow: 0 4px 10px rgba(0, 181, 186, 0.3);
}

.area:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(0, 181, 186, 0.4);
}

/* Contact */
.contact {
   padding: 8rem 0;
   background: linear-gradient(135deg, #007f81 0%, #00b5ba 100%);
   color: #fff;
}

.contact h2 {
   font-size: 4.2rem;
   color: #fff;
   text-align: center;
   margin-bottom: 2rem;
   font-weight: 700;
}

.contact-intro {
   font-size: 2rem;
   text-align: center;
   margin-bottom: 6rem;
   color: rgba(255, 255, 255, 0.95);
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.contact-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 6rem;
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 4rem;
}

.contact-info {
   background: rgba(255, 255, 255, 0.1);
   padding: 4rem;
   border-radius: 2rem;
   backdrop-filter: blur(10px);
}

.contact-info h3 {
   font-size: 3rem;
   color: #fff;
   margin-bottom: 3rem;
   font-weight: 600;
}

.contact-item {
   margin-bottom: 3rem;
}

.contact-item h4 {
   font-size: 2rem;
   color: #fff;
   margin-bottom: 1rem;
   font-weight: 600;
}

.contact-item p {
   font-size: 1.6rem;
   color: rgba(255, 255, 255, 0.9);
   line-height: 1.6;
}

.contact-item a {
   color: #fff;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s ease;
}

.contact-item a:hover {
   color: #f8f9fa;
   text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.contact form {
   background: #fff;
   padding: 4rem;
   border-radius: 2rem;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.contact form h3 {
   font-size: 2.8rem;
   color: #00b5ba;
   margin-bottom: 3rem;
   font-weight: 600;
   text-align: center;
}

.contact form label {
   font-size: 1.6rem;
   color: #333;
   font-weight: 600;
   margin-bottom: 0.8rem;
   display: block;
}

.contact form input,
.contact form textarea,
.contact form select {
   width: 100%;
   padding: 1.5rem;
   font-size: 1.6rem;
   border: 2px solid #e9ecef;
   border-radius: 0.8rem;
   background-color: #fff;
   margin-bottom: 2rem;
   transition: all 0.3s ease;
   font-family: inherit;
}

.contact form input:focus,
.contact form textarea:focus,
.contact form select:focus {
   outline: none;
   border-color: #00b5ba;
   box-shadow: 0 0 0 3px rgba(0, 181, 186, 0.1);
}

.contact form textarea {
   height: 120px;
   resize: vertical;
}

.contact form button {
   width: 100%;
   padding: 1.8rem 2rem;
   font-size: 1.8rem;
   background: linear-gradient(45deg, #00b5ba, #007f81);
   color: #fff;
   border: none;
   border-radius: 0.8rem;
   cursor: pointer;
   transition: all 0.3s ease;
   font-weight: 600;
   box-shadow: 0 6px 20px rgba(0, 181, 186, 0.3);
}

.contact form button:hover {
   background: linear-gradient(45deg, #007f81, #00b5ba);
   transform: translateY(-3px);
   box-shadow: 0 10px 30px rgba(0, 181, 186, 0.4);
}

.form-note {
   font-size: 1.4rem;
   color: #666;
   text-align: center;
   margin-top: 1rem;
   font-style: italic;
}

/* Details */
.details {
   padding: 8rem 0;
   background-color: #fff;
   display: flex;
   justify-content: center;
   gap: 5%;
   flex-wrap: wrap;
}

.details h2,
.details h3 {
   text-align: center;
   margin-bottom: 4rem;
   color: #00b5ba;
}

.address,
.hours,
.map {
   text-align: center;
   max-width: 300px;
}

.address p,
.hours p {
   font-size: 1.6rem;
   margin-bottom: 1rem;
}

.map img {
   width: 100%;
   border-radius: 1rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Footer */
footer {
   background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
   color: #fff;
   padding: 6rem 0 2rem;
}

.footer-content {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 4rem;
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 4rem;
}

.footer-section h4 {
   font-size: 2.2rem;
   color: #00b5ba;
   margin-bottom: 2rem;
   font-weight: 600;
}

.footer-section p {
   font-size: 1.6rem;
   line-height: 1.8;
   margin-bottom: 1.5rem;
   color: rgba(255, 255, 255, 0.9);
}

.footer-section ul {
   list-style: none;
}

.footer-section li {
   font-size: 1.6rem;
   color: rgba(255, 255, 255, 0.8);
   margin-bottom: 1rem;
   transition: color 0.3s ease;
}

.footer-section li:hover {
   color: #00b5ba;
}

.footer-section a {
   color: #00b5ba;
   text-decoration: none;
   font-weight: 600;
   transition: all 0.3s ease;
}

.footer-section a:hover {
   color: #fff;
   text-shadow: 0 0 10px rgba(0, 181, 186, 0.5);
}

.footer-bottom {
   margin-top: 4rem;
   padding-top: 2rem;
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   text-align: center;
}

.footer-bottom p {
   font-size: 1.4rem;
   color: rgba(255, 255, 255, 0.7);
   margin-bottom: 1rem;
}

.footer-keywords {
   font-size: 1.2rem;
   color: rgba(255, 255, 255, 0.5);
   font-style: italic;
}

.year {
   color: #00b5ba;
   font-weight: 600;
}

.social-container {
   display: flex;
   justify-content: center;
   gap: 2rem;
   margin-top: 2rem;
}

.social {
   color: #00b5ba;
   transition: all 0.3s ease;
   padding: 1rem;
   border-radius: 50%;
   background: rgba(0, 181, 186, 0.1);
   border: 2px solid rgba(0, 181, 186, 0.2);
   box-shadow: 0 2px 8px rgba(0, 181, 186, 0.1);
}

.social:hover {
   color: #fff;
   background: #00b5ba;
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 6px 20px rgba(0, 181, 186, 0.4);
   border-color: #00b5ba;
}

.ionicon {
   width: 3rem;
   height: 3rem;
   fill: #00b5ba;
   transition: all 0.3s ease;
}

/* Responsive Styles */
@media (max-width: 1200px) {
   .cta h1 {
      font-size: 3.6rem;
   }

   .hero-subtitle {
      font-size: 1.8rem;
   }

   .services-container,
   .testimonials-container {
      padding: 0 2rem;
   }

   .contact-container {
      padding: 0 2rem;
   }
}

@media (max-width: 992px) {
   .header-container {
      flex-direction: column;
      gap: 2rem;
   }

   .cta {
      width: 90%;
   }

   .about-container {
      flex-direction: column;
      text-align: center;
   }

   .about-container img {
      width: 250px;
      height: 250px;
   }

   .contact-container {
      grid-template-columns: 1fr;
      gap: 4rem;
   }

   .footer-content {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 768px) {
   html {
      font-size: 55%;
   }

   nav {
      height: auto;
   }

   nav ul {
      flex-direction: column;
      padding-right: 0;
      gap: 1rem;
   }

   .socials {
      flex-direction: row;
      padding-right: 0;
   }

   .cta h1 {
      font-size: 3.2rem;
   }

   .hero-subtitle {
      font-size: 1.6rem;
   }

   .services-container {
      grid-template-columns: 1fr;
      padding: 0 2rem;
   }

   .additional-services {
      margin: 0 2rem;
      padding: 4rem 2rem;
   }

   .service-list {
      grid-template-columns: 1fr;
   }

   .why-choose-us ul {
      grid-template-columns: 1fr;
   }

   .testimonials-container {
      grid-template-columns: 1fr;
      padding: 0 2rem;
   }

   .service-areas {
      margin: 0 2rem;
   }

   .areas {
      justify-content: center;
   }

   .footer-content {
      grid-template-columns: 1fr;
      gap: 3rem;
   }
}

@media (max-width: 480px) {
   html {
      font-size: 50%;
   }

   .header-container {
      padding: 1rem;
   }

   .cta {
      width: 95%;
      padding-top: 5vh;
   }

   .cta h1 {
      font-size: 2.8rem;
   }

   .cta-button {
      font-size: 1.6rem;
      padding: 1.2rem 2rem;
   }

   .services,
   .about,
   .testimonials,
   .contact {
      padding: 4rem 0;
   }

   .services-container,
   .additional-services,
   .service-areas,
   .testimonials-container {
      margin: 0 1rem;
   }

   .contact-container {
      padding: 0 1rem;
   }

   .footer-content {
      padding: 0 2rem;
   }
}