@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');

/* ===== Base ===== */
* {
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: 190px;
}

body {
  color: #222;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.6;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ===== Header ===== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 5%;
  width: 100%;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 998;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.logoImg { width: 20vw; max-width: 150px; height: auto; }
.headerCont { display: flex; align-items: center; gap: 20px; }
.button-28 {
  background: transparent;
  border: 2px solid #FF6600;
  border-radius: 12px;
  color: #FF6600;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.button-28:hover {
  background: #FF6600;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: rgba(0,0,0,0.2) 0 8px 15px;
}

/* ===== Slideshow ===== */
.slideshow {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  top: 0;
  left: 0;
}

.slide.active {
  opacity: 1;
  z-index: 1; /* Ensure active slide is on top */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}


/* ===== Services ===== */
.serviceCont { display: flex; flex-direction: column; align-items: center; padding: 5% 10%; gap: 40px; width: 100%; }
.serviceHeader { font-size: 2.5rem; text-align: center; font-weight: 600;color: #222; position: relative; }
.serviceHeader::after { content: ""; display: block; margin: 10px auto 0; width: 60px; height: 4px; background-color: #EE7400; border-radius: 2px; }

.hzService, .hzServicerv { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; padding: 2rem; border-radius: 12px; }
.hzServicerv { flex-direction: row-reverse; }
/*.hzService:nth-child(odd), .hzServicerv:nth-child(even) { background: #f9f9f9; }*/

.hzService img, .hzServicerv img { flex: 1 1 40%; max-width: 500px; border-radius: 12px; object-fit: cover; }
.hzService div, .hzServicerv div { flex: 1 1 45%; max-width: 500px; padding: 1rem; }
.hzService h3, .hzServicerv h3 { font-size: 1.8rem; margin-bottom: 1rem; }

/* ===== Animations ===== */
.animatedImg, .animatedText, .animatedImgRv, .animatedTextRv { opacity: 0; transform: translateX(0); }
.animateImg { animation: arriveLeft 1.5s forwards; }
.animateText { animation: arriveRight 1.5s forwards; }
.animateImgRv { animation: arriveRightReverse 1.5s forwards; }
.animateTextRv { animation: arriveLeftReverse 1.5s forwards; }

@keyframes arriveLeft { 0% { transform: translateX(-20%); opacity:0 } 100% { transform: translateX(0); opacity:1 } }
@keyframes arriveRight { 0% { transform: translateX(20%); opacity:0 } 100% { transform: translateX(0); opacity:1 } }
@keyframes arriveRightReverse { 0% { transform: translateX(-20%); opacity:0 } 100% { transform: translateX(0); opacity:1 } }
@keyframes arriveLeftReverse { 0% { transform: translateX(20%); opacity:0 } 100% { transform: translateX(0); opacity:1 } }

/* ===== Contact Form ===== */
.formCont { background: #f5f5f5; padding: 4rem 10%; width: 100%; text-align: center; }
.formTitleCont h3 { font-size: 2rem; margin-bottom: 0.5rem; }
.formTitleCont h4 { font-size: 1.4rem; margin-bottom: 2rem; color: #555; }
#form { max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.2rem; }
input, textarea { padding: 1rem; font-size: 1rem; border: 2px solid #b3aca7; background: transparent; color: #726659; border-radius: 8px; transition: all 0.3s ease; }
input:hover, textarea:hover { background: #b3aca7; color: #fff; }
textarea { min-height: 120px; resize: vertical; }
#submit { border: 2px solid #b3aca7; font-weight: bold; color: #b3aca7; cursor: pointer; border-radius: 8px; }
#submit:hover { background: #b3aca7; color: #fff; }
.altContact { margin-top: 2rem; font-size: 1rem; }
.altContact strong { font-weight: 700; }

/* ===== Gallery ===== */
.galleryCont { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding: 2rem; width: 90vw; }
.gallImgCont { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vw; }
.galleryCont img { width: 30vw; cursor: pointer; transition: transform 0.3s; border-radius: 8px; }
.galleryCont img:hover { transform: scale(1.02); }
.galleryCont h2 { font-size: 2.5rem; text-align: center; margin-bottom: 20px; color: #222; }
.galleryCont h2::after { content: ""; display: block; margin: 10px auto 0; width: 60px; height: 4px; background-color: #EE7400; border-radius: 2px; }

/* ===== Lightbox ===== */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 999;
}

/* Active (visible) state */
.lightbox.active {
  opacity: 1;
  visibility: visible;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.lightbox.active img {
  transform: scale(1.02);
}



/* ===== Footer ===== */
footer { width: 100%; padding: 2rem 5%; text-align: center; background: #f5f5f5; color: #fff; display: flex; flex-direction: row; justify-content: center;align-items: center; gap: 1rem; }
footer img { width: 120px; }
.footerSocialIcons { display: flex; gap: 12px; }
.socialIcon { width:28px; height:28px; transition: 0.2s; cursor:pointer; }
.socialIcon:hover { transform: scale(1.1); opacity: 0.8; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .hzService, .hzServicerv { flex-direction: column; text-align: center; }
  .hzService img, .hzServicerv img, .hzService div, .hzServicerv div { width: 100%; max-width:100%; }
  .galleryCont img { width: 90%; }
  .logoImg { width: 120px; }
  footer img { width: 60px; height: 60px; }
  .socialIcon{width: 18px; height:18px;}
  footer{padding: 1rem 5%}
}