/************************************************************************************************************************************************/
/*********************************************************         section one         **********************************************************/
/************************************************************************************************************************************************/

.section-one {
   padding-block: 50px;
}

.section-one .left-box h6 {
   font-size: 15px;
   margin-bottom: 15px;
}

.section-one .left-box h3 {
   margin-bottom: 30px;
   line-height: 1.8;
}

.section-one .left-box p {
   margin-bottom: 60px;
   font-size: 15px;
}

.section-one .left-box .request-appointment-btn {
   background-color: var(--site_second_color);
   color: var(--site_text_color);
   border: 2px solid var(--site_fourth_color);
   border-radius: 8px;
   font-size: 12px;
}

.section-one .left-box .request-appointment-btn span {
   padding-block: 10px;
   border-color: var(--site_fourth_color) !important;
   border-width: 2px !important;
}

.section-one .left-box .request-appointment-btn:hover {
   background-color: var(--site_fourth_color);
}

#requestAppointmentModal .modal-content .modal-body label {
   width: 100%;
}

#requestAppointmentModal .modal-content .modal-body input,
#requestAppointmentModal .modal-content .modal-body textarea {
   background: none;
   color: var(--site_text_color);
   font-size: 16px;
   border: 2px solid var(--site_fourth_color);
}

#requestAppointmentModal .modal-content .modal-body input::placeholder,
#requestAppointmentModal .modal-content .modal-body textarea::placeholder {
   color: var(--site_text_color);
}

#requestAppointmentModal .modal-content .modal-body input:focus,
#requestAppointmentModal .modal-content .modal-body textarea:focus {
   box-shadow: none;
}

#requestAppointmentModal .modal-content .modal-body .form-check-inline {
   display: inline-flex;
   align-items: center;
   padding: 0;
   cursor: pointer;
}

#requestAppointmentModal .modal-content .modal-body .form-check-inline:last-of-type {
   margin: 0 !important;
}

#requestAppointmentModal .modal-content .modal-body .form-check-inline .form-check-input {
   margin-block: 0 !important;
   width: 20px;
   height: 20px;
   cursor: pointer;
}

#requestAppointmentModal .modal-content .modal-body .form-check-inline .form-check-input:checked {
background: var(--site_third_color)
}

#requestAppointmentModal .modal-content .modal-body .form-check-inline .form-check-label {
   width: calc(100% - (20px + .25rem));
   cursor: pointer;
}

/*customize select2*/
#requestAppointmentModal .modal-content .modal-body .select2-container {
   width: 100% !important;
}

#requestAppointmentModal .modal-content .modal-body .select2-container--default .select2-selection--single {
   background-color: transparent;
   border: 2px solid var(--site_fourth_color);
   border-radius: 0.5rem;
   height: 47px;
   color: var(--site_text_color);
}

#requestAppointmentModal .modal-content .modal-body .select2-container--default .select2-selection--single .select2-selection__rendered {
   color: var(--site_text_color);
   line-height: 47px;
}

#requestAppointmentModal .modal-content .modal-body .select2-container--default .select2-selection--single .select2-selection__placeholder {
   color: var(--site_text_color);
}

#requestAppointmentModal .modal-content .modal-body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
   border-color: transparent transparent var(--site_text_color) transparent;
}

#requestAppointmentModal .modal-content .modal-body .select2-container--default .select2-selection--single .select2-selection__arrow b {
   border-color: var(--site_text_color) transparent transparent transparent;
}

#requestAppointmentModal .modal-content .modal-body .select2-container--default .select2-selection--single .select2-selection__arrow {
   height: 47px;
}

#requestAppointmentModal .modal-content .modal-body .doctor-work-days ul li {
   margin-bottom: 10px;
   color: var(--site_text_color)
}

#requestAppointmentModal .modal-content .modal-body .doctor-work-days ul li:last-of-type {
   margin-bottom: 0;
}

#requestAppointmentModal .modal-content .modal-body .doctor-work-days ul li span {
   color: var(--site_fourth_color);
   font-weight: bold;
   font-size: 15px;
   margin-inline: 5px;
}

.select2-dropdown {
   background-color: var(--site_fourth_color);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--selected {
   background-color: var(--site_second_color);
   color: var(--site_text_color);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:last-child,
.select2-container--default .select2-results__option--selected:last-child {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
   border: 2px solid var(--site_second_color);
   background: transparent;
   color: var(--site_text_color);
   border-radius: 7px;
   padding-inline: 10px;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
   outline: none;
}

.select2-container--open .select2-dropdown {
   top: 2px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
}

/*customize daterangepicker*/
.daterangepicker:after {
   border-bottom: 6px solid var(--site_fourth_color);
}

.daterangepicker {
   background-color: var(--site_fourth_color);
   border: 1px solid var(--site_fourth_color);
}

.daterangepicker .calendar-table {
   background-color: var(--site_fourth_color);
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
   border: solid var(--site_third_color);
   border-width: 0 2px 2px 0;
}

.daterangepicker td.available:hover span,
.daterangepicker th.available:hover span {
   border-color:var(--site_text_color);
}

.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
   background-color: transparent;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
   background-color: var(--site_third_color);
   border-color: transparent;
   color: var(--site_text_color);
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
   background-color: var(--site_second_color);
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect,
.daterangepicker select.ampmselect {
   background: transparent;
   border: 2px solid var(--site_text_color);
   border-radius: 4px;
   color: var(--site_text_color);
   font-size: 14px;
}

.daterangepicker select.monthselect option,
.daterangepicker select.yearselect option,
.daterangepicker select.hourselect option,
.daterangepicker select.minuteselect option,
.daterangepicker select.secondselect option,
.daterangepicker select.ampmselect option {
   color: var(--site_third_color);
}

.daterangepicker select.monthselect option:hover,
.daterangepicker select.yearselect option:hover,
.daterangepicker select.hourselect option:hover,
.daterangepicker select.minuteselect option:hover,
.daterangepicker select.secondselect option:hover,
.daterangepicker select.ampmselect option:hover {
   background-color: var(--site_second_color) !important;
   color: var(--site_text_color);
}

.daterangepicker .drp-buttons .cancelBtn {
   background-color: var(--site_third_color);
   color: var(--site_text_color);
}

.daterangepicker .drp-buttons .applyBtn {
   background-color: var(--site_second_color);
   border-color: var(--site_second_color);
   color: var(--site_text_color);
}

form .form-control.is-invalid {
   border-color: #dc3545 !important;
   border-width: 2px !important;
}

/************************************************************************************************************************************************/
/*********************************************************         section two         **********************************************************/
/************************************************************************************************************************************************/

.section-two {
   margin-top: 100px;
}

.section-two .box-parent {
   position: relative;
   background-image: var(--site_home_second_section_background_img);
   background-size: 100% 100%;
   overflow-x: hidden;
}

.section-two .box-parent .box {
   min-height: 370px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding-inline: 30px;
   position: relative;
}

.section-two .box-parent .box:first-of-type:after ,
.section-two .box-parent .box:nth-of-type(2):after {
   position: absolute;
   content: '';
   background-color: var(--site_main_color);
   height: 72%;
   width: 15px;
   bottom: 50%;
   transform: translateY(51%);
}

.section-two .box-parent .box h3 {
   margin-bottom: 35px;
   font-size: 22px;
}

.section-two .box-parent .box p {
   font-size: 13px;
   margin-bottom: 0;
   line-height: 2;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
.section-two .box-parent .box:nth-of-type(2):after {
  content: unset;
}
   .section-two .box-parent {
      background-size: cover;
      background-position-x: center;
   }

   .section-two .box-parent .box {
      min-height: 250px;
      margin-top: 50px;
   }

   .section-two .box-parent .box:first-of-type:after {
      height: 84%;
      bottom: 50%;
      transform: translateY(61%);
   }

   .section-two .box-parent .box:last-of-type {
      margin-top: 0;
      margin-bottom: 50px;
   }

   .section-two .box-parent .box:last-of-type:after {
      position: absolute;
      content: '';
      background-color: var(--site_main_color);
      height: 15px;
      width: 300%;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
   }
}

@media (max-width: 767.98px) {
   .section-two .box-parent {
      background-size: cover;
      background-position-x: left;
   }

   .section-two .box-parent .box {
      min-height: 180px;
      margin-top: 50px;
   }

   .section-two .box-parent .box:first-of-type {
      margin-top: 80px;
   }

   .section-two .box-parent .box:first-of-type:after {
      content: unset;
   }

   .section-two .box-parent .box:nth-of-type(2):after {
      height: 15px;
      width: 300%;
      left: 50%;
      top: -25px;
      transform: translateX(-50%);
   }

   .section-two .box-parent .box:last-of-type {
      margin-top: 50px;
      margin-bottom: 80px;
   }

   .section-two .box-parent .box:last-of-type:after {
      position: absolute;
      content: '';
      background-color: var(--site_main_color);
      height: 15px;
      width: 300%;
      left: 50%;
      top: -25px;
      transform: translateX(-50%);
   }
}

/************************************************************************************************************************************************/
/*********************************************************        section three        **********************************************************/
/************************************************************************************************************************************************/

.section-three {
   background-color: var(--site_third_color);
   background-image: var(--site_home_third_section_background_img);
   background-size: cover;
   padding-block: 60px;
}

.section-three .title {
   font-size: 30px;
   margin-bottom: 60px;
}

.section-three .box h4 {
   font-size: 18px;
   margin-bottom: 30px;
}

.section-three .box p {
   font-size: 13px;
   line-height: 2;
   margin-bottom: 0;
}

/************************************************************************************************************************************************/
/*********************************************************         section four        **********************************************************/
/************************************************************************************************************************************************/

.section-four {
   margin-block: 100px;
}

.section-four .title {
   font-size: 30px;
   margin-bottom: 60px;
}

.section-four .box-parent {
   background: linear-gradient(to right, var(--site_second_color) 20%, var(--site_fourth_color) 50%, var(--site_second_color) 80%);
   border-radius: 16px;
}

.section-four .box-parent .box:first-of-type .left-box img {
   width: 120px;
}

.section-four .box-parent .box:first-of-type .right-box h5 {
   font-size: 16px;
   margin-bottom: 20px;
}

.section-four .box-parent .box:first-of-type .right-box p {
   font-size: 12px;
}

.section-four .box-parent .box:last-of-type .request-appointment-btn {
background-color: var(--site_fourth_color);
   color: var(--site_text_color);
}

/************************************************************************************************************************************************/
/*********************************************************        section five         **********************************************************/
/************************************************************************************************************************************************/

.section-five .title {
   font-size: 30px;
   margin-bottom: 60px;
}

.section-five .box {
   padding-inline: 10px;
}

.section-five .box .box-parent {
   background-color: var(--site_second_color);
   padding: 15px;
   min-height: 200px;
   display: flex;
   align-items: center;
   border-radius: 16px;
   border: 2px solid var(--site_fourth_color);
}

.section-five .box .left-box {
display: flex;
   justify-content: center;
}

.section-five .box .left-box img {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   border: 3px solid var(--site_fourth_color);
   box-shadow: 0 0 10px var(--site_fourth_color);
}

.section-five .box .right-box h3 {
   font-size: 15px;
   margin-bottom: 10px;
}

.section-five .box .right-box h4 {
   font-size: 14px;
   color: var(--site_fourth_color);
}

.section-five .box .right-box p {
   font-size: 11px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
   .section-five .box .left-box img {
      width: 110px;
      height: 110px;
   }
}

/************************************************************************************************************************************************/
/*********************************************************         section six         **********************************************************/
/************************************************************************************************************************************************/
.section-six {
   margin-block: 100px;
}

.section-six .title {
   font-size: 30px;
   margin-bottom: 60px;
}

.section-six .box {
   padding-inline: 10px;
}

.section-six .box .profile-img {
   display: block;
   width: 100px;
   height: 100px;
   border-radius: 50%;
   margin-inline: auto;
   border: 3px solid var(--site_fourth_color);
   box-shadow: 0 0 3px var(--site_fourth_color);
}

.section-six .box .box-parent {
   background-color: var(--site_main_color);
   min-height: 250px;
   position: relative;
   display: block;
   top: -50px;
   z-index: -1;
   border: 1px solid var(--site_second_color);
}

.section-six .box .box-parent .top-box {
   background-color: var(--site_second_color);
   padding: 65px 15px 20px;
}

.section-six .box .box-parent .top-box h3 {
   font-size: 18px;
   margin-bottom: 10px;
}

.section-six .box .box-parent .bottom-box {
   background-color: var(--site_main_color);
   padding: 30px 20px;
}

.section-six .box .box-parent .bottom-box {
   font-size: 13px;
}

.section-six .slick-dots li.slick-active button ,
.section-six .slick-dots li button {
   background: var(--site_fourth_color);
   border-radius: 50%;
}

.section-six .slick-dots li.slick-active button {
   opacity: 1;
}

.section-six .slick-dots li button {
   opacity: 0.4;
}

.section-six .slick-dots li.slick-active button:before ,
.section-six .slick-dots li button:before {
   content: ''
}

.section-six .see-more a {
   background-color: var(--site_fourth_color);
   color: var(--site_text_color);
}

.section-six .slick-dots {
   bottom: 0
}

/************************************************************************************************************************************************/
/*********************************************************        section seven        **********************************************************/
/************************************************************************************************************************************************/

.section-seven {
   background-color: var(--site_third_color);
   padding-block: 50px;
   box-shadow: 0 0 100px var(--site_second_color)
}

.section-seven .top-box h3 {
   font-size: 30px;
   margin-bottom: 20px;
}

.section-seven .top-box p {
   font-size: 13px;
   line-height: 2;
}

.section-seven .top-box .action {
   display: flex;
}

.section-seven .top-box .action .google-play i ,
.section-seven .top-box .action .apple-store i {
   font-size: 25px;
}

.section-seven .top-box .action .google-play ,
.section-seven .top-box .action .apple-store {
   background-color: var(--site_text_color);
   color: var(--site_third_color);
   display: inline-flex;
   align-items: center;
   padding-inline: 20px;
}

.section-seven .top-box .action .google-play:hover ,
.section-seven .top-box .action .apple-store:hover {
   background-color: var(--site_fourth_color);
   color: var(--site_text_color);
}

.section-seven .top-box .action .google-play .text-content span,
.section-seven .top-box .action .apple-store .text-content span {
 display: block;
}

.section-seven .top-box .action .google-play .text-content .text-one ,
.section-seven .top-box .action .apple-store .text-content .text-one {
   font-size: 11px;
   font-weight: 500;
}

.section-seven .top-box .action .google-play .text-content .text-two ,
.section-seven .top-box .action .apple-store .text-content .text-two {
   font-weight: bold;
}

.section-seven .bottom-box img {
   max-height: 400px;
}

@media (max-width: 991.98px) {
   .section-seven .top-box .action {
     justify-content: center;
   }
}