@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Kanit';
  src: url('fonts/Kanit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

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

body {
  font-family: 'Montserrat', Arial, sans-serif;
  color: #000;
  background: #fff;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

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

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

/* ===== CONTAINER ===== */
.container {
  max-width: 1920px;
  min-width: 1920px;
  margin: 0 auto;
  width: 100%;
}

/* ===== HEADER ===== */
.header {
  background: #b2e2fe;
}

.header .container {
  height: 142px;
  display: flex;
  align-items: center;
  padding: 0 160px;
  position: relative;
}

.header__logo {
  width: 304px;
  height: 76px;
  object-fit: contain;
  flex-shrink: 0;
}

.header__nav {
  display: flex;
  gap: 58px;
  margin-left: 52px;
  align-items: center;
}

.header__nav a {
  font-size: 24px;
  font-weight: 400;
  color: #000;
  transition: opacity 0.3s;
}

.header__nav a:hover {
  opacity: 0.7;
}

.header__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.header__phone-icon {
  width: 26px;
  height: 25px;
}

.header__phone-number {
  font-size: 30px;
  font-weight: 700;
}

.header__btn {
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 40px;
  flex-shrink: 0;
  position: relative;
}

.header__btn img {
  width: 251px;
  height: 55px;
}

.header__btn-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: 'Inter', 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: 400;
  white-space: nowrap;
}

/* ===== BANNER ===== */
.banner {
  width: 100%;
  overflow: hidden;
}

.banner .container {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== LOCATIONS ===== */
.locations {
  background: #ffccd2;
}

.locations .container {
  padding: 90px 160px 60px;
  min-height: 400px;
}

.locations__grid {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}

.locations__item {
  flex: 1;
}

.locations__name {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.locations__hours {
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 0;
}

.locations__content {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.locations__image {
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 40px;
}

.locations__services {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.9;
}

/* ===== SPECIALISTS ===== */
.specialists {
  background: #fff;
}

.specialists .container {
  padding: 89px 160px 80px;
}

.specialists__title {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 66px;
}

.specialists__title span {
  color: #367ef6;
}

.specialists__grid {
  display: flex;
  gap: 80px;
  justify-content: space-between;
}

.specialists__card {
  flex: 1;
  max-width: 380px;
}

.specialists__photo {
  width: 343px;
  height: 429px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 24px;
}

.specialists__name {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 12px;
}

.specialists__role {
  font-size: 22px;
  font-weight: 400;
}

.specialists__more {
  text-align: center;
  margin-top: 60px;
}

.specialists__more img {
  width: 281px;
  height: 55px;
  margin: 0 auto;
  cursor: pointer;
}

/* ===== WHY CHOOSE US ===== */
.why-us {
  overflow: hidden;
}

.why-us .container {
  position: relative;
  height: 925px;
}

.why-us__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.why-us__title {
  position: absolute;
  top: 87px;
  left: 160px;
  font-size: 48px;
  font-weight: 900;
  color: #fff;
}

/* ===== PHOTO GALLERY ===== */
.gallery {
  background: #fff;
}

.gallery .container {
  padding: 112px 160px;
}

.gallery__grid {
  display: grid;
  grid-template-columns: 465px 547px 466px;
  grid-template-rows: 310px 310px;
  gap: 46px 17px;
  justify-content: center;
}

.gallery__item {
  overflow: hidden;
  border-radius: 4px;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__item--tall {
  grid-row: 1 / 3;
  grid-column: 2;
}

/* ===== ABOUT US ===== */
.about {
  background: #fff;
}

.about .container {
  position: relative;
  min-height: 1844px;
}

.about__bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 0;
}

.about__content {
  position: relative;
  z-index: 1;
  padding: 136px 160px 100px;
  display: flex;
  flex-direction: column;
  min-height: 1844px;
}

.about__title {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 50px;
}

.about__subtitle {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 24px;
}

.about__text {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.7;
  max-width: 1900px;
  margin-bottom: 30px;
}

.about__trust-title {
  font-size: 22px;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
}

.about__highlight {
  font-size: 22px;
  font-weight: 700;
}

.about__stats {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  max-width: 1600px;
  padding-bottom: 60px;
}

.about__stat {
  text-align: center;
}

.about__stat-number {
  font-family: 'Kanit', sans-serif;
  font-size: 140px;
  font-weight: 400;
  color: #367ef6;
  line-height: 1;
}

.about__stat-suffix {
  font-family: 'Montserrat', sans-serif;
  font-size: 46px;
  font-weight: 700;
  color: #367ef6;
  vertical-align: baseline;
  margin-left: 4px;
}

.about__stat-label {
  font-size: 22px;
  font-weight: 400;
  margin-top: 10px;
}

/* ===== REVIEWS ===== */
.reviews .container {
  background: #0437c0;
  padding: 90px 160px;
  min-height: 549px;
}

.reviews__title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.reviews__title h2 {
  font-size: 48px;
  font-weight: 900;
  color: #fff;
}

.reviews__heart {
  width: 47px;
  height: 41px;
}

/* ===== SERVICES ===== */
.services {
  background: #fff;
}

.services .container {
  padding: 122px 160px 0;
}

.services__title {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 77px;
}

.services__title span {
  color: #367ef6;
}

.services__layout {
  display: flex;
  gap: 112px;
  align-items: stretch;
}

.services__grid {
  display: grid;
  grid-template-columns: 324px 321px 321px;
  grid-template-rows: 154px 153px;
  gap: 82px 80px;
  align-self: flex-start;
}

.services__card {
  overflow: hidden;
  border-radius: 4px;
}

.services__card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.services__sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: auto;
  align-self: stretch;
  justify-content: space-between;
}

.services__show-all {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 400;
  cursor: pointer;
  margin-bottom: 40px;
}

.services__show-all img {
  width: 32px;
  height: 32px;
}

.services__dog {
  width: 291px;
  height: 467px;
  object-fit: cover;
  margin-top: auto;
}

/* ===== FOOTER ===== */
.footer {
  background: #ffccd2;
}

.footer .container {
  padding: 40px 160px;
  display: flex;
  align-items: flex-start;
  min-height: 370px;
}

.footer__logo {
  width: 304px;
  height: 76px;
  object-fit: contain;
  margin-top: 90px;
  flex-shrink: 0;
}

.footer__addresses {
  font-size: 22px;
  font-weight: 400;
  margin-top: 90px;
  margin-left: 160px;
}

.footer__addresses table {
  border-collapse: collapse;
}

.footer__addresses td {
  padding: 4px 0;
  font-size: 22px;
  font-family: 'Montserrat', Arial, sans-serif;
}

.footer__addresses td:first-child {
  padding-right: 40px;
}

.footer__nav {
  display: flex;
  flex-direction: column;
  gap: 21px;
  margin-left: auto;
}

.footer__nav a {
  font-size: 24px;
  font-weight: 400;
  transition: opacity 0.3s;
}

.footer__nav a:hover {
  opacity: 0.7;
}

.footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 66px;
  margin-top: 70px;
  margin-left: 240px;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 46px;
}

.footer__social img {
  width: 50px;
  height: 50px;
}

.footer__up {
  width: 68px !important;
  height: 68px !important;
  cursor: pointer;
}

.footer__phone {
  display: flex;
  align-items: center;
  gap: 15px;
}

.footer__phone-icon {
  width: 26px;
  height: 25px;
}

.footer__phone-number {
  font-size: 30px;
  font-weight: 700;
}

/* ===== RESPONSIVE: OS scaling 125% (1920px / 1.25 = 1536px viewport) ===== */
@media (max-width: 1919px) {
  html {
    overflow-x: hidden;
  }

  body {
    zoom: 0.8; /* 1536/1920 ≈ 0.8 */
  }
}

/* ===== RESPONSIVE: OS scaling 150% (1920px / 1.5 = 1280px viewport) ===== */
@media (max-width: 1536px) {
  body {
    zoom: 0.667; /* 1280/1920 ≈ 0.667 */
  }
}

/* Fallback for Firefox (doesn't support zoom) */
@supports not (zoom: 0.8) {
  @media (max-width: 1919px) {
    body {
      transform: scale(0.8);
      transform-origin: top left;
      width: 125%;
    }
  }

  @media (max-width: 1536px) {
    body {
      transform: scale(0.667);
      transform-origin: top left;
      width: 150%;
    }
  }
}