/* ---------- Base / Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  scroll-behavior: smooth;
}

:root {
  --background: #afc9c8;
  --text: #3a3a3a;

  /* Design tokens */
  --radius: 30px;
  --radius-md: 20px;
  --shadow-soft: 0 0 40px rgba(58, 58, 58, 0.25);

  /* Fluid typography */
  --fs-sm: clamp(0.85rem, 0.9vw, 1rem);
  --fs-base: clamp(1rem, 1.1vw, 1.125rem);     /* ≈ 16–18px */
  --fs-md: clamp(1.05rem, 1.2vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1.6vw, 1.5rem);      /* ≈ 20–24px */
  --fs-xl: clamp(2.25rem, 7vw, 6.25rem);       /* Hero “Princeton Dental” */
  --fs-xxl: clamp(2rem, 4vw, 3.75rem);         /* Section titles ~60px */
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

html, body { width: 100%; height: 100%; background: #fff; color: var(--text); }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid #1e1b1e;
  outline-offset: 3px;
}

/* ---------- Layout Shell ---------- */
#container {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ---------- Home / Hero ---------- */
#home {
  width: 98%;
  height: 98vh;
  background-color: var(--background);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin-top: 1%;
}

/* Nav */
nav {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}

.leftnav {
  padding: 50px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: logo 3s ease-in-out infinite; /* gentler */
}
.leftnav img { width: 120px; height: auto; }

@keyframes logo {
  0%, 100% { transform: scale(1.02); }
  50%      { transform: scale(1); }
}

.rightnav {
  padding-right: 50px;
  display: flex;
  gap: 40px;
  font-size: 18px;
  color: var(--text);
}

#rightnav1 {
  padding: 10px 20px;
  background-color: transparent;
  border: 2px solid var(--text);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#rightnav1:hover { background-color: #3a3a3a; color: #fff; }

#rightnav2 {
  width: 50px;
  height: 50px;
  background-color: var(--text);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  border: 2px solid #3a3a3a;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
#rightnav2:hover { color: var(--text); background-color: transparent; border-color: #3a3a3a; }

/* Hero split */
#homeimg { width: 100%; height: 100vh; }

#homeimg img {
  width: auto;
  height: 90%;
  object-fit: cover;
  position: absolute;
  bottom: 0;
  left: 40%;
  filter: drop-shadow(0 0 40px var(--text)) grayscale(1);
}

#scrollarrow {
  position: absolute;
  bottom: 40%;
  right: 5%;
  rotate: -90deg;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#scrollarrow p { font-size: var(--fs-sm); }

#arrow a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: transparent;
  color: #1e1b1e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  cursor: pointer;
  border: 1px solid #1e1b1e;
  transition: background-color .1s ease, color .1s ease;
  animation: arrow 1.8s ease-in-out infinite;
}
#arrow:hover a { background-color: #1e1b1e; color: #fff; }

@keyframes arrow {
  0%, 100% { transform: translate(-5px, 0); }
  50%      { transform: translate(0, 0); }
}

#hometext {
  width: 50%;
  height: calc(100vh - 100px);
  color: #1e1b1e;
  padding: 100px 50px;
  text-wrap: wrap;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
}
#hometext p { font-size: var(--fs-lg); margin-bottom: 20px; }
#hometext p:nth-child(2) { font-weight: 700; font-size: var(--fs-xl); margin-bottom: 30px; }
#hometext button {
  padding: 15px 40px;
  border-radius: 50px;
  color: #fff;
  background-color: #1e1b1e;
  outline: none;
  border: none;
  cursor: pointer;
  transition: transform .1s ease, background-color .2s ease, color .2s ease;
}
#hometext button:hover { color: #1e1b1e; background-color: transparent; border: 2px solid #1e1b1e; }
#hometext button:active { transform: scale(0.98); }

/* ---------- Second Page ---------- */
#secondpage {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}

.secdiv {
  display: flex;
  align-items: start;
  justify-content: space-evenly;
  flex-direction: column;
  margin: 0 100px;
  color: var(--text);
}

.secdiv:nth-child(1) { width: 60%; height: 100%; padding: 30px 0; }
.secdiv:nth-child(2) { width: 40%; height: 100%; }

.secimgdiv {
  width: 95%;
  height: 90%;
  border-radius: 40px;
  overflow: hidden;
}
.secdiv:nth-child(1) h1 { font-size: var(--fs-xxl); }

.secimgdiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease-in-out;
}
.secimgdiv img:hover { transform: scale(1.06); }

.doubleimg { display: flex; }

.roundimgdiv {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #fff;
}
.roundimgdiv img { width: 100%; height: 100%; object-fit: cover; }

.roundimgdiv:nth-child(1) { z-index: 5; }
.roundimgdiv:nth-child(2) { z-index: 4; margin-left: -15px; }
.roundimgdiv:nth-child(3) { z-index: 3; margin-left: -15px; }
.roundimgdiv:nth-child(4) { z-index: 2; margin-left: -15px; }
.roundimgdiv:nth-child(5) { z-index: 1; margin-left: -15px; }
.roundimgdiv:nth-child(6) { z-index: 0; margin-left: -15px; }

.secdiv button {
  padding: 15px 40px;
  border-radius: 50px;
  color: var(--text);
  background-color: transparent;
  outline: none;
  border: 2px solid #1e1b1e;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.secdiv button:hover { color: #fff; background-color: #1e1b1e; }

/* ---------- Third Page ---------- */
#thirdpage {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#thirdmain {
  width: 97%;
  height: 90%;
  border-radius: var(--radius);
  background-image: url(../assets/back.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.thirdmindiv:nth-child(1) {
  width: 100%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.thirdmindivtop:nth-child(1) {
  width: 65%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: start;
  padding: 0 50px;
}
.thirdmindivtop:nth-child(1) p {
  font-size: clamp(2rem, 3.5vw, 3.125rem); /* ~50px */
  font-weight: 600;
  color: #fff;
}

.thirdmindivtop:nth-child(2) {
  width: 35%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-evenly;
  color: #fff;
  padding-right: 50px;
}
.thirdmindivtop:nth-child(2) button {
  padding: 10px 25px;
  outline: none;
  border: 1px solid #fff;
  color: #fff;
  background-color: transparent;
  border-radius: 50px;
  cursor: pointer;
  transition: gap .5s ease, background-color .2s ease;
}
.thirdmindivtop:nth-child(2) button:hover { display: flex; gap: 20px; background: #ffffff22; }

.thirdmindiv:nth-child(2) {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
}

.thirdcard {
  width: 350px;
  height: 350px;
  border-radius: 25px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 50px;
}
.thirdcard:nth-child(1) { background-color: #a7aaca; }
.thirdcard:nth-child(2) { background-color: #b5beba; }
.thirdcard:nth-child(3) { background-color: #cbbe91; }

.thirdcard h1 { margin-bottom: 20px; font-size: clamp(1.25rem, 1.8vw, 1.75rem); }
.thirdcard p  { font-size: var(--fs-sm); margin-bottom: 20px; }
.thirdcard hr { width: 100%; border-color: #3a3a3a; margin-bottom: 30px; }
.thirdcard li { font-size: var(--fs-sm); }
.thirdcard i  {
  position: absolute;
  top: 4%;
  right: 4%;
  padding: 10px;
  color: #fff;
  font-size: 25px;
  border-radius: 50%;
  background-color: #1e1b1e;
}

/* ---------- Fourth Page ---------- */
#fourthpage {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: column;
}
.fourthdivs { width: 100%; height: 30%; }

.fourthdivs:nth-child(1) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
}
.fourthdivs:nth-child(1) h1 { width: 45%; font-size: var(--fs-xxl); }
.fourthdivs:nth-child(1) p  { width: 30%; font-size: var(--fs-sm); }

.fourthdivs:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
}
.fourthmid:nth-child(1) {
  width: 30%;
  height: 100%;
  border-radius: var(--radius-md);
  background-image: url(../assets/back.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 30px;
}
.fourthmid:nth-child(1) h1 { width: 70%; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.fourthmid:nth-child(1) p  { width: 75%; font-size: var(--fs-sm); }
.fourthmid:nth-child(2) {
  width: 65%;
  height: 100%;
  border-radius: var(--radius-md);
  background-image: url(../assets/Patient2.jpeg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 5px #3a3a3a;
}

.fourthdivs:nth-child(3) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
}
.fourthfoot { width: 30%; height: 100%; border-radius: var(--radius-md); }

.fourthfoot:nth-child(1) {
  width: 25%;
  background-color: transparent;
  border: 2px solid #000;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  padding: 20px 30px;
}
.fourthfoot:nth-child(1) h1,
.fourthfoot:nth-child(3) h1 { width: 60%; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.fourthfoot:nth-child(1) p,
.fourthfoot:nth-child(3) p { width: 90%; font-size: var(--fs-sm); }

.fourthfoot:nth-child(2) {
  background-image: url(../assets/Chair1.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 5px #3a3a3a;
}
.fourthfoot:nth-child(3) {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  padding: 20px 30px;
  background-color: #a7aaca;
}

/* ---------- Fifth Page (Reviews) ---------- */
#fifthpage {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}





.fifthcontent:nth-child(1) {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 0 50px;
}
.fifthcontent:nth-child(2) {
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px;
}

.fifthmain:nth-child(1) {
  width: 60%;
  height: 90%;
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-direction: column;
  color: #fff;
}
.fifthmain:nth-child(1) h1 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); width: 40%; }

.fifthdual { width: 100%; display: flex; justify-content: space-between; }

.fifthcard {
  width: 100%;
  height: auto;
  border-radius: 25px;
  padding: 20px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.fifthcard p { font-size: var(--fs-sm); font-weight: 600; opacity: .8; }
.fifthcard:nth-child(1) { background-color: #e8d8bd; }
.fifthcard:nth-child(2) { background-color: #ffffff; }

.fifthmain:nth-child(2) { width: 38%; height: 90%; }

#candidimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  overflow: hidden;
}
#candidimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}
#candidimg img:hover { transform: scale(1.06); }

.profile { display: flex; gap: 20px; }
.protext { display: flex; flex-direction: column; gap: 5px; }
.protext p { font-size: var(--fs-sm); }
.profileimg {
  width: 60px; height: 60px; border-radius: 10px; overflow: hidden;
}
.profileimg img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Footer / Booking ---------- */
#foot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px;
}

.footdiv:nth-child(1) {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footimg {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.footimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s ease;
}
.footimg img:hover { transform: scale(1.06); }

.footdiv:nth-child(2) {
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 40px;
}
.foothead {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.foothead h1 { width: 30%; font-size: clamp(1.75rem, 2.6vw, 2.5rem); }
.foothead p  { font-size: var(--fs-sm); margin-top: 10%; width: 50%; }

form { width: 100%; height: 80%; }
.row  { width: 100%; height: 100%; display: flex; flex-direction: column; }

label { margin-bottom: 5px; font-weight: 700; font-size: var(--fs-sm); }

input,
textarea {
  max-width: 100%;
  min-width: 100%;
  height: 40px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: var(--fs-base);
}
textarea { height: 120px; resize: vertical; }

form button {
  padding: 15px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: var(--fs-base);
  cursor: pointer;
  transition: background-color .2s ease, transform .05s ease;
}
form button:hover  { background-color: #555; }
form button:active { transform: scale(0.98); }

/* ---------- Fullscreen Menu ---------- */
#menu-bar {
  width: 100%;
  height: 100vh;
  background-color: #afc9c833;
  backdrop-filter: blur(10px);
  position: fixed;
  z-index: 7;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(-100%, 0);
  transition: transform .5s ease;
}
#menu-bar a {
  width: 100%;
  height: 10%;
  text-decoration: none;
  font-size: 2vw;
  color: #232946;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s ease, color .3s ease;
}
#menu-bar a:hover { background-color:#1e1b1e; color: #ccc; }

.cross {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  position: absolute;
  top: 5%;
  right: 5%;
  cursor: pointer;
  padding: 10px;
  border: 2px solid #000;
  border-radius: 50%;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cross:hover {
  background-color: #00000077;
  color: #fff;
  border-color: #fff;
}

/* ---------- Site Footer ---------- */
footer {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background);
}
footer span a { color: #232946; }


/* ---------- Elfsight Reviews (Cleaned & Desktop-Focused) ---------- */
.review-widget-container,
.elfsight-app-baf1c677-2c05-457b-83eb-ef4978f93539,
.elfsight-app-baf1c677-2c05-457b-83eb-ef4978f93539 iframe,
.review-widget iframe,
.review-widget img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  object-fit: contain; /* prevents image distortion */
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* Desktop-only: 1024px and above */
/* Desktop only */
@media screen and (min-width: 1024px) {
  #fifthdiv {
  min-height: 100vh;
  max-height: 90vh ;
  height: auto !important;
  background-image: url(../assets/back.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  overflow: auto;
  padding: 50px;
}
  .elfsight-app-baf1c677-2c05-457b-83eb-ef4978f93539 {
    height: 100% !important;
    max-height: none !important;
    min-height: 600px !important; /* ensures container has enough space */
  }
  .elfsight-app-baf1c677-2c05-457b-83eb-ef4978f93539 iframe {
    min-height: 1500px !important;
    width: 100% !important;
  }
}


/* Hide WhatsApp icon on desktop */
@media screen and (min-width: 1024px) {
  .whatsapp-wrapper,
  .whatsapp-float {
    display: none !important;
  }
}