@import "./assets/styles/index.css";

/*
Theme Name: MDS-Multiple-Theme
Text Domain: MDS-Multiple-Theme
Version: 1.0
Description: Theme for MDS-Multiple-Theme
Tag: responsive, custom, multiple
Author: Derek Dalton
Author URI: https://multipleinc.com/
*/
/* 
Global css 
*/

html {
  margin-top: 0 !important;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  letter-spacing: 0.5px;
  -webkit-font-smoothing: antialiased;
}

footer {
  background-color: var(--DarkGray__darkgray080);
  color: var(--Neutral__LightGray__lightgray050);
}

.front-page-choose {
  display: flex;
  gap: var(--spacer-mega);
  background-color: var(--Neutral__White__white050);
  padding: var(--spacer-mega);
}

.front-page-choose div:first-child {
  max-width: 703px;
}

.front-page-choose img {
  max-width: 335px;
  width: 100%;
}

.office.image-card {
  aspect-ratio: 1/1;
}


.doctor-info {
  grid-column: 6 / -1;
  margin-top: var(--spacer-centi);
  margin-bottom: var(--spacer-centi);
  display: flex;
  flex-direction: column;
  gap: var(--spacer-deca);
}

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

.animal-text-button {
  display: flex;
  grid-column: 1 / -1;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--spacer-base);
  margin: var(--spacer-deca) 0;
}

.animal-text-button div {
  display: flex;
  gap: inherit;
}

.office div:first-child {
  grid-column: 1 / 9;
  margin: var(--spacer-base) 0;
}

.spacer {
  grid-column: span 1;
}

#front-page-services {
  background-color: white;
  padding: var(--spacer-giga);
  margin: 0;
}

@media(max-width: 1440px) {

  .front-page-choose .header-02 {
    font-size: 24px;
    margin-bottom: 0;
  }
}

@media(max-width: 1133px) {
  .doctor-info {
    grid-column: 1 / -1;
  }

  .front-page-choose {
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;

  }

  .spacer {
    display: none;
  }
}

@media(max-width: 744px) {
  .office div:first-child {
    grid-column: 1 / 5;
  }

  .front-page-choose {
    padding: var(--spacer-deci) var(--spacer-micro);
  }

  .animal-text-button div {
    flex-direction: column;
  }

  #front-page-services {
    background-color: white;
    padding: var(--spacer-giga) var(--spacer-micro);
  }


}

button {
  outline: none;
  border: none;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  width: 80%;
  max-width: 500px;
  border-radius: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.close{
  margin: 0 auto;
}

.modalText{
  padding: 50px 0;
}

.staff-card {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 1070px;
  padding: var(--spacing-40);
  gap: 30px;
  margin: 0 !important;
}

@media(max-width: 2560px) {
  .staff-card {
      width: 823px;
  }
}

@media(max-width: 1440px) {
  .staff-card {
      width: 663px;
  }
}

@media(max-width: 1365px) {
  .staff-card {
      width: 593px;
  }
}

@media(max-width: 1132px) {
  .staff-card {
      width: 580px;
  }
}

@media(max-width: 744px) {
  .staff-card {
      display: flex !important;
      flex-direction: column-reverse;
      padding: var(--spacing-20);
      width: calc(100vw - 32px);
      grid-column: span 3;
      margin-left: var(--spacer-milli) !important;
  }


  .staff-card-info p:last-of-type {
      margin-bottom: var(--spacer-kilo);
  }
}

.slick-slide img {
  margin: 0 auto;
}