* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  scroll-behavior: smooth;
}
html {
  scroll-behavior: smooth;
}
body, button, textarea, input, select {
  font-family: "Nunito", sans-serif;
/*  background-color: #d1efef;*/
}

/*
TEAL = #1BAFB1
WHITE = #FFFFFF
BLACK/DARK GREY = #393534 
LIGHT TEAL = #E9FBFC
*/

nav {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 10000;
  background-color: #FFFFFF;
  transition: 0.5s ease;
}

nav .logo-bar {
  display: flex;
  justify-content: center;
  padding: 15px;
  align-items: center;
  height: 100px;
}
nav .logo-bar img {
  width: 200px;
  height: auto;
}
nav .nav-links {
  text-align: center;
  background-color: #1BAFB1;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
nav .nav-links ul {
  right: 0;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
nav .nav-links ul li {
  display: inline-block;
  margin: 10px 30px;
}
nav .nav-links ul li a {
  color: #FFFFFF;
  letter-spacing: 1px;
  font-weight: bold;
  font-size: 14px;
}
nav .nav-links ul li a.active, nav .nav-links ul li a:hover {
  color: #393534;
  transition: .5s ease;
}
.checkbtn {
  font-size: 30px;
  color: #1BAFB1;
  display: none;
  margin-right: 10px;
}
#check {
  display: none;
}
#hidebtn {
  display: none;
}

/* Download Button Styling */
.floating-btn {
  position: fixed;
  bottom: 15px;
  right: 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #FFF;
  padding: 10px;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  z-index: 999;
}
.floating-btn img {
  width: 30px;
}

/* Whatsapp Button Styling */
.whatsapp-btn {
  position: fixed;
  bottom: 10px;
  right: 115px;
  cursor: pointer;
  z-index: 999;
  animation: pulse .5s infinite alternate;
}
.whatsapp-btn img {
  width: 50px;
  filter: drop-shadow(1px 1px 2px #2FB447);
}

/* Call Button Styling */
.calling-btn {
  position: fixed;
  bottom: 10px;
  left: 20px;
  border: none;
  cursor: pointer;
  z-index: 999;
  animation: pulse .5s infinite alternate;
}
.calling-btn img {
  width: 50px;
  filter: drop-shadow(1px 1px 2px #C60000);
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

.landing-page {
  background: url(images/tooth_bg_cut.webp) no-repeat;
  background-size: cover;
  height: calc(100vh - 140px);
}
.overlay {
  display:flex;
  height: calc(100vh - 140px);
  background-image: linear-gradient(to right, rgba(0, 128, 128, 0), rgba(0, 128, 128, 0.8), rgba(0, 0, 0, 0.8));
}
.landing-text, .landing-space {
  flex: 1;
}
.landing-text {
  align-self: center;
}
.landing-big-title {
  font-size: 58px;
  color: #FFFFFF;
  font-weight: 600;
  margin-bottom: 25px;
  letter-spacing: 1px;
}
.landing-text p {
  font-size: 16px;
  color: #FFFFFF;
  width: 75%;
  margin-bottom: 50px;
}
.landing-text a {
  color: #FFFFFF;
  background-color: #1BAFB1;
  padding: 5px 15px;
  border: 1px solid #1BAFB1;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}
.landing-text a:hover {
  filter: brightness(1.2);
}
.video-section {
  height: calc(100vh - 140px);
  display: flex;
  justify-content: center;
}
.video-section video {
  height: calc(100vh - 140px);
}
.types-section {
  text-align: center;
  align-items: center;
  align-content: center;
  display: grid;
}
.type1 {
  height: 50vh;
  padding: 25px 200px;
  background-color: #1BAFB1;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  text-align: left;
}
.type1 h2, .type2 h2, .type3 h2 {
  letter-spacing: 1px;
}
.type2 {
  height: 50vh;
  padding: 25px 200px;
  background-color: #E9FBFC;
  color: #393534;
  display: flex;
  align-items: center;
  text-align: left;
}
.type3 {
  height: 50vh;
  padding: 25px 200px;
  background-color: #0E5B5C;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  text-align: left;
}
.type-desc {
  margin-right: 150px;
}
.type-desc h1 {
  margin-bottom: 25px;
  letter-spacing: 2px;
}
.type-desc p {
  margin-bottom: 50px;
}
.type-desc a {
  padding: 10px;
  border: 2px solid;
  border-radius: 5px;
  color: #FFFFFF;
  font-weight: bold;
}
.type-img img {
  width: 300px;
  filter: drop-shadow(1px 1px 1px #393534);
}
.services-section {
  height: calc(100vh - 140px);
  text-align: center;
  align-items: center;
  align-content: center;
  background-image: url('images/blob-scene-haikei.svg');
  background-size: cover;
}

.services-section h1 {
  text-align:center;
  text-transform:uppercase;
  color: #1BAFB1;
  font-size: 32px;
  letter-spacing: 5px;
  margin-bottom: 50px;
}
.services-container {
  display: flex;
  justify-content: center;
}
.service-card {
  width: 180px;
  height: 180px;
  margin: 50px;
}
.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  padding: 2px;
  border: 4px solid #1BAFB1;
  margin-bottom: 15px;
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.service-card h4 {
  color: #393534;
}
.products-section {
  height: calc(100vh - 140px);
  text-align: center;
  align-items: center;
  align-content: center;
  background-color: #1BAFB1;
  display: none;
}

.products-section h1 {
  text-align:center;
  text-transform:uppercase;
  color: #FFFFFF;
  font-size: 32px;
  letter-spacing: 5px;
  margin-bottom: 50px;
}
.products-container {
  display: flex;
  justify-content: center;
}
.product-card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  background-color: #FFFFFF;
  margin: 0 25px;
  cursor: pointer;
}
.product-card img {
  width: 100%;
  background-size: cover;
}
.product-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.product-desc {
  padding: 25px;
}
.product-desc h2 {
  color: #393534;
}
.product-desc p {
  color: #393534;
  margin: 15px 0;
}
.product-desc a {
  color: #FFFFFF;
  background-color: #1BAFB1;
  padding: 5px 15px;
  border: 1px solid #1BAFB1;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}
.product-desc a:hover {
  filter: brightness(1.2);
}

.appointment-section {
  height: unset;
  text-align: center;
  align-items: center;
  align-content: center;
  padding: 50px;
  background-size: cover;
  border-top: 2px solid #1BAFB1;
}
.appointment-section h1 {
  text-align:center;
  text-transform:uppercase;
  color: #1BAFB1;
  font-size: 32px;
  letter-spacing: 5px;
  margin-bottom: 50px;
}

/* Container for both columns */
.appointment-container {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
  border: 2px solid #393534;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Left Div Styling (Contact Info) */
.appointment-info {
  flex: 1;
  background-color: #E9FBFC;
  padding: 20px;
  align-content: center;
}

.appointment-info h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #393534;
}

.appointment-info p {
  font-size: 1rem;
  line-height: 1.6;
  color: #393534;
  margin-bottom: 25px;
}

.appointment-info strong {
  font-weight: bold;
  color: #393534;
}

/* Right Div Styling (Form) */
.appointment-form {
  flex: 1;
  background-color: #1BAFB1;
  padding: 25px 50px;
}

.appointment-form h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #FFFFFF;
}

.appointment-form form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Form Elements Styling */
.appointment-form input,
.appointment-form select,
.appointment-form textarea {
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
  color: #393534;
}
.appointment-form input:focus,
.appointment-form select:focus,
.appointment-form textarea:focus {
  border-color: #008c8c;
}

/* Submit Button Styling */
.appointment-form button {
  padding: 12px;
  background-color: #393534;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.appointment-form button:hover {
  background-color: #006f6f;
}
.review-section {
  height: calc(100vh - 140px);
  text-align: center;
  align-items: center;
  align-content: center;
  background-color: #1BAFB1;
}
.review-section h1 {
  text-align:center;
  text-transform:uppercase;
  color: #FFF;
  font-size: 32px;
  letter-spacing: 5px;
  margin-bottom: 50px;
}
.location-section {
  align-items: center;
  align-content: center;
}

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

/* Tablet Responsive*/
@media (min-width:767px) and (max-width:1023px) {
  .checkbtn {
    display: block;
  }
  nav {
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
  }
  nav .nav-links ul {
    position: fixed;
    width: 300px;
    height: 100vh;
    display: none;
    text-align: center;
    transition: all 0.5s ease;
    background-color: rgba(27, 175, 177, 1.0);
    backdrop-filter: blur(10px);
    right: 0;
    top: 0;
  }
  nav .nav-links ul li {
    display: block;
    margin: 40px 0px;
  }
  #check:checked ~ .nav-links ul {
    left: 0;
  }
  nav .logo-bar {
    justify-content: space-between;
  }
  nav .logo-bar img {
    width: 150px;
    margin-left: 20px;
  }
  nav .nav-links ul li a {
    font-size: 16px;
  }
  .whatsapp-btn {
    right: 110px;
  }
  .video-section {
    height: unset !important;
  }
  .video-section video {
    width: 100%;
    height: unset !important;
  }
  .floating-btn {
    padding: 10px;
  }
  .floating-btn img {
      width: 25px;
  }
  .landing-page {
    height: calc(100vh - 100px);
  }
  .landing-space {
    flex:0;
  }
  .landing-text {
    flex: 1;
  }
  .overlay {
    text-align: center;
    height: calc(100vh - 100px);
  }
  .landing-text p {
    width: 100%;
    padding: 0px 100px;
    margin-bottom: 25px;
  }
  .type1, .type2, .type3 {
    height: unset;
    padding: 25px 50px;
  }
  .type-desc {
    margin-right: 15px;
  }
  .type-desc p {
    margin-bottom: 25px;
  }
  .type-desc a {
    padding: 5px;
  }
  .type-img img {
    width: 200px;
  }
  .services-container {
    flex-wrap: wrap;
  }
  .services-section {
    height: unset;
    padding: 50px 0;
  }
  .services-section h1 {
    margin-bottom: 0;
  }
  .service-card {
    height: 150px;
    width: 150px;
  }
  .appointment-section {
    height: unset;
  }
  .appointment-section h1 {
    margin-bottom: 25px;
  }
  .appointment-form {
    padding: 25px;
  }
  .review-section {
    height: unset;
    padding: 50px 25px;
  }
  .review-section h1 {
    margin-bottom: 25px;
  }
}

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

/* Mobile Responsive */
@media (min-width:375px) and (max-width:767px) {
  .checkbtn {
      display: block;
    }
    nav {
      box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1);
    }
    nav .nav-links ul {
      position: fixed;
      width: 100%;
      height: 100vh;
      display: none;
      text-align: center;
      transition: all 0.5s ease;
      background-color: rgba(27, 175, 177, 1.0);
      backdrop-filter: blur(10px);
      right: 0;
      top: 0;
    }
    nav .nav-links ul li {
      display: block;
      margin: 40px 0px;
    }
    #check:checked ~ .nav-links ul {
      left: 0;
    }
    nav .logo-bar {
      justify-content: space-between;
    }
    nav .logo-bar img {
      width: 150px;
      margin-left: 20px;
    }
    nav .nav-links ul li a {
      font-size: 16px;
    }
    .floating-btn {
      right: 10px;
      bottom: 80px;
    }
    .floating-btn {
      padding: 5px;
    }
    .floating-btn img {
      width: 25px;
    }
    .floating-btn p {
      font-size: 11px;
    }
    .whatsapp-btn {
      right: 15px;
    }
    .landing-page {
      height: calc(100vh - 100px);
    }
    .landing-space {
      flex:0;
    }
    .landing-text {
      flex: 1;
    }
    .landing-big-title {
      font-size: 42px;
    }
    .landing-text p {
      width: 100%;
      padding: 0px 100px;
      margin-bottom: 25px;
    }
    .overlay {
      text-align: left;
      height: calc(100vh - 100px);
      padding: 0 25px;
    }
    .landing-text p {
      width: 100%;
      padding: 0px;
      margin-bottom: 25px;
    }
    .video-section {
      height: unset !important;
    }
    .video-section video {
      width: 100%;
      height: unset !important;
    }
    .type1, .type2, .type3 {
      height: unset;
      padding: 25px;
      flex-direction: column-reverse;
      text-align: center;
    }
    .type-desc {
      margin-right: 0;
    }
    .type-desc h1 {
      margin-bottom: 0;
      margin-top: 15px;
      font-size: 24px;
      letter-spacing: 2px;
    }
    .type-desc p {
      margin-bottom: 25px;
    }
    .type-desc a {
      padding: 5px;
    }
    .type-img img {
      width: 100px;
    }
    .services-container {
      flex-wrap: wrap;
    }
    .services-section {
      height: unset;
      padding: 50px 0;
    }
    .services-section h1 {
      margin-bottom: 0;
      color: #FFF;
      font-size: 24px;
      letter-spacing: 2px;
    }
    .service-card {
      height: 175px;
      width: 175px;
      margin: 40px;
    }
    .service-card img {
      margin-bottom: 5px;
    }
    .appointment-section {
      height: unset;
      padding: 25px;
    }
    .appointment-section h1 {
      margin-bottom: 25px;
      font-size: 24px;
      letter-spacing: 2px;
    }
    .appointment-container {
      flex-direction: column;
    }
    .appointment-form {
      padding: 25px;
    }
    .appointment-info h3, .appointment-form h3 {
      font-size: 1.3rem;
    }
    .review-section {
    height: unset;
    padding: 50px 25px;
  }
  .review-section h1 {
    margin-bottom: 25px;
    font-size: 24px;
    letter-spacing: 2px;
  }
}