@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Dafoe';
  src: url('../fonts/dafoe.ttf') format('truetype');
  font-display: swap;
}

body {
  font-family: 'Montserrat', sans-serif;
}

:root {
  --primary-color: #DE278A;
  --secondary-color: #684287;
  --white-color: #fafafa;
  --black-color: #1a1a1a;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 0;
}

img {
  max-width: 100%;
}

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

section {
  max-width: 100%;
}

.form-control {
  padding-block: 12px;
  border: none;
}

.light {
  font-weight: 300;
}

.bold {
  font-weight: 600;
}

.hero-dafoe {
  font-family: 'Dafoe', sans-serif;
  font-size: 64px;
  color: var(--primary-color);
}

.primary-title {
  color: var(--primary-color);
}

.secondary-title {
  color: var(--secondary-color);
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--white-color);
  padding: 10px 20px;
  border-radius: 12px;
  border: none;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;

  &:hover {
    background-color: var(--secondary-color);
  }
}

.topbar {
  width: 100%;
  background-color: var(--primary-color);
  color: var(--white-color);
}

.bottom-bar {
  width: 100%;
}

.hero {
  background-image: url('../img/nt-hero-bg.webp');
  background-size: cover;
  background-position: end;
  background-repeat: no-repeat;
  min-height: 600px;

  & .container {
    min-height: 600px;
    display: flex;
    align-items: center;
  }

  & .hero-form {
    background-color: #de2789b6;
    padding: 36px;
    border-radius: 12px;
  }
  
  & .hero-form .btn-primary {
    background-color: var(--secondary-color);
    color: var(--white-color);
  }
}

.bar {
  background-color: var(--primary-color);
  color: var(--black-color);

  & .bar-item {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  & path {
    fill: var(--white-color);
  }
}

.bar-form {
  color: var(--white-color);

  & .container {
    background-image: url('../img/nt-banner-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 24px;
    border-radius: 12px;
  }

  & .btn-primary {
    width: 100%;
    background-color: var(--white-color);
    color: var(--primary-color);
  }
}

.section-title h4 {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 3px;
}

.ortopedi-info img {
  max-height: 500px;
  width: 100%;
  object-fit: cover;
  object-position: center -80px;
  border-radius: 8px;
}

.services .item {
  background-color: #EEEFEF;
  min-height: 194px;
  padding: 24px;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;

  & h2 {
    font-size: 1.6rem;
    margin-bottom: 12px;
    font-weight: 600;
    text-transform: uppercase;
  }
}

.services .item:hover {
  background-color: var(--primary-color);
  color: var(--white-color);
}

.treatments-img img {
  max-height: 500px;
}

.why-us-item img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

.treatment-packages img {
  max-height: 500px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px;
}

footer {
  background-color: #2D2D2C;
  color: var(--white-color);
}

.map-holder img {
  border-radius: 12px;
  box-shadow: -8px 8px 0px #fff;
}

.owl-nav {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 24px;
}

.owl-nav button {
  background-color: var(--primary-color) !important;
  color: var(--white-color) !important;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.accordion-button:not(.collapsed) {
  background-color: var(--primary-color);
  color: var(--white-color);
  font-weight: 600;
}

.accordion-button:focus {
  box-shadow: none;
  border: none;
}

.info-card {
  background: linear-gradient(135deg, #794f9b, #684287);
  color: white;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(222, 39, 138, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(222, 39, 138, 0.4);
}

.info-card h3 {
  color: white;
  font-size: 1.2rem;
  line-height: 1.3;
}

.info-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.95;
}

.b-footer {
  position: relative;
  margin-bottom: -80px;
  z-index: 1;
}

footer {
  background-color: var(--primary-color);
}

.floating-wp {
  display: inline-block;
  position: fixed;
  z-index: 2;
  bottom: 16px;
  left: 24px;
}

@media (max-width: 991px) {
  .m-order-1 {
    order: 1;
  }

  .m-order-2 {
    order: 2;
  }

  .text-end,
  .text-start {
    text-align: center !important;
  }

  .nav-phone,
  .nav-wp-link {
    display: none !important;
  }

  .nav-logo {
    margin: 0 auto;
  }

  .hero {
    padding-block: 24px;

    & h1 {
      color: var(--white-color);
    }

    & .row {
      text-align: center;
      gap: 24px;
    }
  }

  .bar-item span {
    font-size: 14px;
  }

  .about-oae {
    padding-block: 24px;
  }

  .about-oae .row {
    gap: 24px;
  }

  .about-oae .text-end {
    text-align: center !important;
  }

  .bar-form {
    margin-inline: 12px;
  }

  .bar-form .white-text {
    margin-bottom: 18px;
  }

  .ortopedi-info .row {
    gap: 24px;
  }

  .ortopedi-info img {
    object-position: center;
  }

  .treatments-img {
    margin-bottom: 24px;
  }
}