@font-face {
   font-family: 'Roboto';
   src: url('./fonts/Roboto-Regular.ttf');
   font-weight: 400;
}

@font-face {
   font-family: 'Roboto';
   src: url('./fonts/Roboto-Light.ttf');
   font-weight: 300;
}

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

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

ul {
   list-style: none;
}

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

.btn {
   display: inline-block;
   transition: .2s;
   font-weight: 400;
   text-align: center;
}

html {
   font-family: 'Roboto', Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight: 300;
   overflow-x: hidden;
   background-color: #F6F3F3;
   color: #161616;
}


.container {
   max-width: 1200px;
   border: 0px solid #C30030;
   padding: 0 20px;
   margin: 0 auto;
}

.breadcrumb {
   display: flex;

   font-size: 15px;
   margin-bottom: 30px;
   margin-top: 20px;

}

.breadcrumb li:first-child::before {
   content: '';
}

.breadcrumb li::before {
   content: '/';
}

.breadcrumb__current-item {
   color: #A8A8A8;
}

.section {
   padding: 80px 0;
}

.primary-btn {
   background-color: #C30030;
   border-radius: 100px;
   padding: 11px 20px;
   font-size: 20px;
   color: #F0F0F0;
   border: 2px solid #C30030;
}

.primary-btn:hover {
   background-color: #F0F0F0;
   color: #C30030;
}

.primary-btn:active {
   transform: scale(.95);
}

.secondary-btn {
   background-color: #F6F3F3;
   border-radius: 100px;
   padding: 11px 20px;
   font-size: 20px;
   color: #C30030;
   border: 2px solid #F6F3F3;
}

.secondary-btn:hover {
   background-color: #F0F0F0;
   border: 2px solid #C30030;
   color: #C30030;
}

.secondary-btn:active {
   transform: scale(.95);
}

h1,
h2 {
   font-size: 35px;
   color: #444;
   font-weight: 400;
   text-transform: uppercase;
}

h2 {
   font-size: 35px;
   color: #444;
   font-weight: 400;
   text-align: center;
}

/* header */
.header {

   position: absolute;
   padding-top: 64px;
   width: 100%;
   left: 0;
   top: 0;
   z-index: 5;
}

.header_vtoro {

   position: absolute;
   padding-top: 19px;
   width: 100%;
   left: 0;
   top: 0;
   z-index: 5;
   border-bottom: 1px solid #C30030;
   padding-bottom: 25px;
}


.header__nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 30px;
}

.nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-grow: 2;
   max-width: 822px;
}

.nav__links {
   font-size: 20px;
   text-wrap: nowrap;
   transition: .2s;

}

.nav__links:hover {
   opacity: .8;
}

.logo-img__wrapper {
   width: 179px;
   height: 36px;
   display: block;
}

.logo-img__wrapper img {
   object-fit: contain;
}


/* hero */
.section_hero {
   min-height: 810px;
   padding-top: 244px;
   position: relative;
   overflow: hidden;
}

.hero_background {
   background: #F2EAEA;
   position: absolute;
   left: -100%;
   right: 38%;
   top: -200%;
   bottom: -100%;
   transform: rotate(10deg);
}

.hero_photo {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   width: 50%;

   pointer-events: none;
}

.hero_photo img {
   object-position: 0% 0%;
}

.hero__content {
   position: relative;
   max-width: 55%;
}

.red-text {
   color: #C30030;
}

.hero__info {
   max-width: 602px;
   width: 100%;
   margin: 90px 0 130px;
   font-size: 24px;
   line-height: 36px;
}

.hero__btn-wrapper {
   max-width: 605px;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
}

.hero-btn__info {
   color: #C30030;
   font-weight: 300;
   font-size: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 0 16px;
   border: 0px solid #445;
   text-wrap: nowrap;
}

.hero-btn__info::before {
   content: '';
   display: block;
   width: 30px;
   height: 30px;
   background: url('./img/users-2.svg') 50% / contain no-repeat;
}

@media (max-width:1170px) {
   .hero__btn-wrapper {
       flex-direction: column;

   }

   .hero_photo {
       width: 60%;

   }
}

@media (max-width:1000px) {
   br {
       display: none;
   }

   .hero__content {
       position: relative;
       max-width: none;
       display: flex;
       flex-direction: column;
       align-items: center;
       background-color: #f6f3f3ee;
       text-align: center;
       padding: 40px;
       border-radius: 12px;
       width: 100%;
       max-width: 650px;
       margin: 0 auto;
   }

   .hero_background {
       display: none;
   }

   .hero_photo {
       width: 100%;

   }

   .hero__info {
       max-width: 512px;
       width: 100%;
       margin: 30px 0 40px;
       font-size: 24px;
       line-height: 36px;
       min-height: 206px;
   }

   .section_hero {
       padding-top: 90px;

   }

   h1,
   h2 {
       font-size: 15px;
       font-weight: 400;
       text-transform: uppercase;
   }
}

@media (max-width:600px) {
   .hero__content {
       padding: 20px;

   }
}

/* section possibility */
.possibility-items {
   display: grid;
   grid-template-columns: repeat(4, 1fr);

   gap: 20px;
   margin-top: 50px;

}

.possibility-item {
   padding: 16px;
   border-radius: 12px;
   background: #FFFFFF;
   display: flex;
   flex-direction: column;
   gap: 24px;
   transition: .3s;
   min-height: 246px;
}

.possibility-item__title {
   font-size: 24px;
   font-weight: 400;
}

.possibility-item__info {
   font-size: 15px;
}

.possibility-item:hover {
   background: #C30030;
   opacity: 0.44;
   color: #FFFFFF;
}

.possibility-item__icon path {
   transition: .3s;
}

.possibility-item:hover .possibility-item__icon path {
   stroke: #FFFFFF;
}

@media (max-width:900px) {
   .possibility-items {
       grid-template-columns: repeat(3, 1fr);
       gap: 10px;
   }

}

@media (max-width:700px) {
   .possibility-items {
       grid-template-columns: repeat(2, 1fr);
   }

}

@media (max-width:500px) {
   .possibility-items {
       grid-template-columns: 1fr;
   }

}

/* section_whom */
.section_whom {
   background: #FFFFFF;

}

.whom-items {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-top: 60px;
}

.whom-item__img-wrapper {
   width: 80px;
   height: 80px;
}

.whom-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 178px;
}

.whom-item__img {
   object-fit: contain;
}

.whom-item__title {
   margin-top: 20px;
   font-size: 24px;
   font-weight: 400;
}

@media (max-width:700px) {
   .whom-items {
       grid-template-columns: repeat(2, 1fr);
   }

}

@media (max-width:500px) {
   .whom-item__title {
       margin-top: 20px;
       font-size: 18px;
       font-weight: 400;
   }

}

/* reg */
.section_reg {
   background: #F2EAEA;

}

.section_reg-content {
   display: flex;
   flex-direction: column;
   gap: 36px;
   align-items: center;
   justify-content: center;
}

.reg__text {
   font-size: 20px;
   font-weight: 400;
   text-align: center;
   line-height: 25px;
}

/* swiper */

.carousel {
   width: 100%;
   overflow: hidden;
   position: relative;
   margin: 0 auto;
}

.reviews-container {
   display: flex;
   align-items: center;
   /* transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); */
   gap: 45px;
   padding: 20px 0;
   will-change: transform;
   cursor: grab;
   user-select: none;
   touch-action: pan-y pinch-zoom;
}

.review,
.review-clone {
   flex: 0 0 328px;
   background: white;
   border-radius: 12px;
   padding: 16px;
   opacity: 0.7;
   transform: scale(0.9);
   will-change: transform, opacity;
}

.review.active,
.review-clone.active {
   flex: 0 0 414px;
   opacity: 1;
   transform: scale(1);
}

.review:not(.active) .review-content p,
.review-clone:not(.active) .review-content p {
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.review-header {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
}

.avatar {
   min-width: 50px;
   max-width: 50px;
   width: 50px;
   height: 50px;
   border-radius: 100px;
   overflow: hidden;
}

.review-content {
   margin-bottom: 16px;
}



.review-footer {
   display: flex;
   align-items: center;
   gap: 10px;
}

.stars {
   display: flex;
   align-items: center;
   gap: 10px;
}

.star {
   width: 18px;
   height: 18px;
   background: url('./img/star.svg') 50% / contain no-repeat;
}

.star_null {
   width: 18px;
   height: 18px;
   background: url('./img/star_null.svg') 50% / contain no-repeat;
}

.rating {
   font-size: 13px;
   color: #A8A8A8;
}

.carousel-controls {
   display: flex;
   justify-content: center;
   gap: 20px;
   margin-top: 20px;
}

.nav-button {
   background: white;
   border: none;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
}

.nav-button:hover {
   background: #f0f0f0;
   transform: scale(1.1);
}

.nav-button:active {
   transform: scale(0.95);
}

.nav-button svg {
   width: 24px;
   height: 24px;
   color: #333;
}

.review-item {
   max-width: 414px;
   margin: 0 auto;
   width: 100%;
   max-height: 245px;
   background: #FFFFFF;
   padding: 16px 16px 24px 16px;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.user-feed__img-wrapper {
   min-width: 50px;
   height: 50px;
   border-radius: 100px;
   overflow: hidden;
}

.user-feed__desc {
   font-size: 13px;
   color: #A8A8A8;
}

@media (max-width:600px) {

   .review.active,
   .review-clone.active {
       flex: 0 0 100%;
   }
}

/* footer */
.footer {
   background: #404040;
   padding-top: 68px;
}

.footer-links {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   padding-bottom: 50px;
}

.footer-link {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 30px;
}

.footer-link:hover .footer-link__title {
   color: #C30030;
}

.footer-link:nth-child(2n) {
   border-left: 1px solid #353535;
   border-right: 1px solid #353535;
}

.footer-link__title {
   font-size: 20px;
   color: #F6F3F3;
}

.footer-link__icon {
   background: #353535;
   width: 48px;
   height: 48px;
   border-radius: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.copyrigth {
   text-align: center;
   color: #787878;
   padding: 30px;
   border-top: 1px solid #353535;
}

@media (max-width:700px) {
   .footer-links {

       grid-template-columns: 1fr;
       gap: 50px;
   }

   .footer-link:nth-child(2n) {
       border-left: none;
       border-right: none;

   }

}

/* burger */
.burger-checkbox {
   position: fixed;
   visibility: hidden;
}

.burger {
   position: relative;
   z-index: 1;
   cursor: pointer;
   display: block;
   border: none;
   background: transparent;
   width: 40px;
   height: 26px;
}

.burger::before,
.burger::after {
   content: '';
   left: 0;
   position: absolute;
   display: block;
   width: 100%;
   height: 4px;
   border-radius: 10px;
   background: #000000;
}

.burger::before {
   top: 0;
   box-shadow: 0 11px 0 #000000;
   transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
}

.burger::after {
   bottom: 0;
   transition: bottom .3s .15s, transform .3s;
}

.burger-checkbox:checked+.burger::before {
   top: 11px;
   transform: rotate(45deg);
   box-shadow: 0 6px 0 rgba(255, 255, 255, 0);
   transition: box-shadow .15s, top .3s, transform .3s .15s;
}

.burger-checkbox:checked+.burger::after {
   bottom: 11px;
   transform: rotate(-45deg);
   transition: bottom .3s, transform .3s .15s;
}

.menu-list {
   top: 0;
   left: 0;
   position: absolute;
   display: flex;
   flex-direction: column;
   gap: 20px;
   padding: 42px 10px;
   margin: 0;
   background: #404040;
   list-style-type: none;
   transform: translateX(-100%);
   transition: .3s;
   width: 70%;
   min-height: 100vh;
   text-align: center;
   z-index: 20;
}

.menu-item {
   display: block;
   padding: 8px;
   color: white;
   font-size: 18px;
   text-align: center;
   text-decoration: none;
   text-transform: uppercase;
}

.menu-item:hover {
   background: rgba(255, 255, 255, 0.2)
}

.burger-checkbox:checked~.menu-list {
   transform: translateX(0);
}

.desktop-hidden {
   display: none;
}

@media (max-width:830px) {
   .mobile-hidden {
       display: none;
   }

   .header {
       position: fixed;
       padding: 10px 0;
       background: #F2EAEA;
       border-bottom: 0px solid #C30030;
   }

   .header_vtoro {

       position: fixed;
       padding: 10px 0;
       background: #F2EAEA;
       border-bottom: 0px solid #C30030;

   }

   .desktop-hidden {
       display: block;
   }
}


@media (max-width:600px) {

   h1,
   h2 {
       font-size: 30px;

   }

   .hero__info {
       font-size: 20px;
   }

   .btn {
       width: 100%;
   }

   .hero-btn__info {
       font-size: 16px;
   }
}

/* auth */
.section_auth {

   overflow: hidden;
   position: relative;
   padding-top: 110px;
   display: flex;
   align-items: center;
   justify-content: center;

}

.section_auth__content {
   position: relative;
   width: 100%;
   padding: 0 20px;
   margin-top: 80px;
   margin-bottom: 200px;

}

.form {
   padding: 48px 24px;
   width: 100%;
   max-width: 460px;
   background: #FFFFFF;
   border-radius: 12px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
   gap: 24px;
   margin-top: 1rem;
}

.form-header {
   display: flex;
   gap: 12px;
   align-items: center;
}

.logo-mini__wrapper {
   width: 38px;
   height: 38px;
}

.logo-mini__wrapper img {
   object-fit: contain;
}

.form-header__title {
   font-weight: 600;
   font-size: 18px;
   line-height: 21px;
   color: #323232;
   max-width: 250px;
}

.input-group {
   position: relative;
}

.icon {
   position: absolute;
   left: 1rem;
   top: 50%;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
}

.toggle-password {
   left: auto;
   right: 1rem;
   cursor: pointer;
   transition: fill 0.3s ease;
}

.toggle-password:hover {
   fill: #323232;
}

.eye-closed {
   display: none;
}

.show-password .eye-open {
   display: none;
}

.show-password .eye-closed {
   display: block;
}

input {
   width: 100%;
   padding: 1rem 3rem;
   border: 1px solid #E6E6E6;
   border-radius: 6px;
   font-size: 1rem;
   transition: border-color 0.3s ease;
}

input:focus {
   outline: none;
   border-color: #C30030;
}

button {
   width: 100%;
   cursor: pointer;
}



@keyframes shake {

   0%,
   100% {
       transform: translateX(0);
   }

   25% {
       transform: translateX(-5px);
   }

   75% {
       transform: translateX(5px);
   }
}

.error {
   animation: shake 0.3s ease-in-out;
   border-color: #ff4747 !important;
}

.form__btn-group {
   display: flex;
   gap: 12px;
}

.form-link {
   text-align: center;
   color: #C30030;
   font-weight: 400;
}

@media (max-width:500px) {
   .form__btn-group {
       flex-direction: column;
       gap: 24px;
   }

   .form {
       padding: 38px 15px;
   }

   .section_auth__content {
       margin-top: 20px;
   }
}

.message-group {
   font-size: 18px;
   font-weight: 400;
}

.message_ok {
   color: green;
}

.message_no {
   color: #C30030;
}

.form__btn-group .btn {
   width: 100%
}

.terms-group {
   margin-bottom: 1.5rem;
}

.terms-label {
   display: flex;
   align-items: flex-start;
   position: relative;
   padding-left: 35px;
   cursor: pointer;
   font-size: 0.9rem;
   color: #666;
   user-select: none;
}

.terms-label input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
   height: 0;
   width: 0;
}

.checkmark {
   position: absolute;
   left: 0;
   top: 0;
   height: 20px;
   width: 20px;
   background-color: #fff;
   border: 2px solid #ddd;
   border-radius: 3px;
   transition: all 0.2s ease;
}

.terms-label:hover input~.checkmark {
   border-color: #C30030;
}

.terms-label input:checked~.checkmark {
   background-color: #C30030;
   border-color: #C30030;
}

.checkmark:after {
   content: "";
   position: absolute;
   display: none;
   left: 6px;
   top: 2px;
   width: 4px;
   height: 10px;
   border: solid white;
   border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}

.terms-label input:checked~.checkmark:after {
   display: block;
}

.terms-text {
   line-height: 1.4;
}

.terms-text a {
   color: #C30030;
   text-decoration: none;
}

.terms-text a:hover {
   text-decoration: underline;
}

.third-btn {
   border-radius: 100px;
   padding: 11px 20px;
   font-size: 20px;
   background-color: #F3F3F3;
   border: 2px solid #C30030;
   color: #C30030;
}

.third-btn:hover {
   background-color: #C30030;
   color: #fff;

}

.third-btn:active {
   transform: scale(.95);
}

/* appointment */
.section_appointment {

   overflow: hidden;
   position: relative;
   padding-top: 110px;


}

.section_appointment__content {
   position: relative;
   width: 100%;
   /* margin-top: 80px; */
   /* margin-bottom: 200px; */

}

.master__img-wrapper {
   max-width: 275px;
   width: 100%;
   height: 275px;
   border-radius: 12px;
   background: #FFFFFF;
   overflow: hidden;
}

.master__img {
   object-fit: cover;
}

.master__name {
   font-weight: 400;
   font-size: 35px;
   text-transform: none;
   margin-bottom: 10px;
}

.master__desc {
   color: #323232;
   font-size: 16px;
}

.master__main {
   display: grid;
   gap: 26px;
   grid-template-columns: auto 275px;
}

.master__content {
   display: flex;
   flex-direction: column;
   gap: 30px;
}

.appointment__header {
   display: flex;
   align-items: center;
   gap: 10px;
   font-style: 15px;
   margin-bottom: 20px;
}

.appointment__items {
   display: flex;
   gap: 30px;
   flex-wrap: wrap;
}

.appointment__item {
   display: flex;
   align-items: center;
   justify-content: center;
   border: 2px solid #C30030;color:#C30030;font-weight: 600;
   border-radius: 7px;
   cursor: pointer;
   transition: .2s;
   font-size: 18px;
   font-weight: 400;
}

.appointment__item:hover {
   border: 1px solid #C30030;
   color: #ffffff;
   background: #C30030;
}

.appointment__item_data {
   width: 80px;
   height: 60px;


}

.data-appointment {
   max-width: 750px;
}

.disabled-appointment__item {
   pointer-events: none;
   border: 1px solid #ccc;
   color: #ccc;
   background-color: #00000005;
}

.selected-appointment__item {
   background: #C30030;
   color: #FFFFFF;
   border: 1px solid #C30030;
}

.selected-appointment__item:hover {
   color: #FFFFFF;
}

.appointment__item_time {
   width: 75px;
   height: 45px;
   font-size: 15px;
}

.two_hours {
   width: 190px;
}

.three_hours {
   width: 300px;
}

.more-data-link {
   display: flex;
   align-items: center;
   font-size: 18px;
   color: #C30030;
}

@media (max-width:870px) {
   .master__main {
       display: grid;
       gap: 26px;
       grid-template-columns: auto;
   }

   .master__img-wrapper {
       grid-row: 1;
       margin: 0 auto;
   }

   .master__info {
       text-align: center;
   }

   .appointment__items {
       gap: 10px;
   }

   .two_hours {
       width: 170px;
   }

   .three_hours {
       width: 260px;

   }

   h2 {
       font-size: 35px;
       text-align: center;
       margin-top: -56px;
   }

   .desktop-12 ol {
       font-size: 20px;
       line-height: 1.8;
   }

   .poloska {
       display: none;
   }



}


.desktop-12 {
   margin-top: 26px;
   position: relative;
}

.desktop-12 li {
   font-size: 16px;
   margin: 6px;
   padding: 6px;
}

.desktop-12 a {
   font-size: 16px;
   color: #C30030;
   font-weight: 400;
}

.section_possibility {
   /* margin-top:76px; */
   padding-top: 166px;
   position: relative;
   overflow: hidden;

}

.section_possibility__content {
   position: relative;
}

.desktop-12 ol {
   font-size: 16px;
   line-height: 1.8;
}

.probel {
   margin: 26px;
}

.plashka {

   background: rgba(242, 234, 234, 0.45);
   padding: 4px 13px;
   border-radius: 43px;
   color: #444;
   border: 0px solid #fff;
}

.poloska {
   border-top: 1px solid #C30030;
   padding-top: 7px;
}

.h_menu {
   border: 0px solid #C30030;
   padding-top: 7px;
   margin-bottom: 26px;
   margin-top: -148px;
}

.h_menu a {
   border: 1px solid #C30030;
   padding: 5px 15px;
   margin: 4px;
   font-size: 14px;
   border-radius: 7px;
   line-height: 41px;
   background: #fff;
}

.h_menu a:hover {
   background: #C30030;
   color: #fff;

}

.activesss a {
   background: #C30030;
   color: #fff;

}

.h_menuhh {

   margin-top: -14px;
}

.h_menuhh a {
   border-top: 1px solid #888;
   border-right: 1px solid #888;
   padding: 5px 15px;
   margin: 1px;
   font-size: 14px;
   line-height: 41px;
   color: #888;
}

.password-form {
   max-width: 470px;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.password-form__message {
   color: green;background: #fff;padding:11px 23px;
}

.password-form__message_red {
   color: #C30030;
}


@media (max-width:1000px) {
   .password-form {
       margin: 0 auto;
   }
}

.appointment-form {
   margin-top: 30px;
   width: 70%;
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.appointment-form .primary-btn {
   width: fit-content;
   margin-left: auto;
}

.radio-input {
   position: relative;color:#C30030; background-color: #fff;   border-radius: 100px;
   width: 100%;
   text-align: center;
}

.radio-input input {
   position: absolute;
   z-index: -2;
   width: 1px;
   height: 1px;
   opacity: 0.1;
   

}

.radio-input input+span {
   display: block;
  
   padding: 10px;
   border-radius: 100px;
   border: 1px solid #C30030;
   cursor: pointer;
}

.radio-input input:checked+span {
   background-color: #C30030;
   color: #ffffff;
}

.input-group_depth {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 15px;
}

.input-group-time {
   display: flex;
   align-items: center;
   gap: 15px;
  margin-bottom:18px;
}

.radio-input_time {
   display: flex;
   align-items: center;
   gap: 6px;
}

.input-group-time input {
   width: fit-content;
   padding: 10px 10px;color:#C30030;
}

.input-group-time_radio {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.radio-input_time input {
   width: fit-content;
   accent-color: #C30030;
   width: 20px;
   height: 20px;
}
.input-titile {
   margin-bottom: 13px; margin-top: 13px;
     font-weight: 400;
   /* max-width: 350px; */
}

@media (max-width:1000px) {
   .appointment-form {
       margin: 0 auto;
       margin-top: 30px;
       width: 100%;
       max-width:500px;
   }
}

@media (max-width:400px) {
   .input-group_depth {
       display: grid;
       grid-template-columns: 1fr 1fr;
       text-align: center;
       gap: 8px;
   }

   .appointment-form .primary-btn {
       width: 100%;
       margin-left: auto;
   }
}

/* NEW */
.tab-content {
display: none;
}
.active-content {
display: block;
}
.active-tab {
color: #C30030 !important;
}