@import url(common.css);
@import url(../fonts/fonts.css);


html, body {
  font-family: Arial, sans-serif;
}
.main_panel {
    width: 100%;
    position: relative;
}

.inner_wraper {
    max-width:1080px;
    width: 100%;
    margin: 0 auto;

}

.inner_main_panel {
    width:100%;
    position: relative;
    
}
.web_inner_panel {
  width: 100%;
  position: relative;
}
.commn_link {
    display: block;
    font-size: 0;
    text-indent: -9999px;
    background: rgba(0, 0, 255, 0);
    position: absolute;
    overflow: hidden;
     border: none;
}

.web_inner_panel img {
    width: 100%;
}


.link_01 {
      width: 62%;
    top: 8%;
    height: 40%;
    left: 19%;
}
.link_02 {
         width: 62%;
    bottom: 10%;
    height: 22%;
    left: 19%;
}


.calendar-container {
  max-width: 920px;
  margin: auto;
  background: white;
  border-radius: 10px;
  padding: 15px;
}

.calendar-header {
  text-align: center;
  margin-bottom: 10px;
}

.calendar-days,
.calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.start-offset {
  grid-column-start: var(--start-col);
}

.calendar-days div {
  font-weight: bold;
  padding: 10px 0;
  color: #666;
  font-size: 22px;
}

.calendar-dates div {
  padding: 25px 15px;
  margin: 3px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.2s;
      font-size: 22px;
}

.calendar-dates div:hover {
  background: #f0f0f0;
}

.active-date {
  background: #2d2143;
  color: white;
}

.time-container {
  max-width: 920px;
  margin: 20px auto;
  background: white;
  padding: 15px 30px;
  border-radius: 10px;
  display: none;
}

.time-container  h3 {
  margin:0 0 20px
}

.time-slots {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.time-slots div {
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
}

.time-slots div:hover {
  background: #ddd;
}


.disabled {
  background: #eee;
  color: #aaa;
  pointer-events: none;
  text-decoration: line-through;
}

.time-slots div {
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
}

.time-slots div:hover {
  background: #ddd;
}

.main_page {
 
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f7f7f7;
}

/* Responsive */
@media (max-width: 500px) {
  .calendar-container,
  .time-container {
    width: 100%;
  }
}



@media screen and (max-width:1080px)
{
  .inner_wraper {
    max-width:100%;

}

.calendar-dates div {
      padding: 2vw;
      font-size: 4vw;
}
.calendar-days div {
  font-size: 4vw;
}



/* .big_img_86 {
     width: 100%;
  height: 86vw;
  object-fit: cover;
}
.big_img_67 {
   width: 100%;
  height: 67vw;
  object-fit: cover;
}

.big_img_22 {
   width: 100%;
  height: 22vw;
  object-fit: cover;
}

.big_img_3 {
   width: 100%;
  height: 42vw;
  object-fit: cover;
} */


}