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

a {
  text-decoration: none;
}


#Main #Appointment {
    background-color: #eef3f8;
    padding: 3rem 0;
}

    #Main #Appointment .container {
        max-width: unset;
    }

        #Main #Appointment .container .all {
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
            height: 800px;
        }

            #Main #Appointment .container .all input,
            #Main #Appointment .container .all textarea {
                padding: 10px;
                border-radius: 10px;
                border: 1px solid #d9dadb;
                min-width: 30px;
            }

            #Main #Appointment .container .all textarea {
                height: 100%;
                resize: none;
            }

            #Main #Appointment .container .all .left {
                width: 50%;
                height: 700px;
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                transform: translateX(-40px);
                border-radius: 20px;
            }

            #Main #Appointment .container .all .right {
                height: 700px;
                transform: translateX(40px);
                z-index: 99;
                width: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: 0.5s;
            }

                #Main #Appointment .container .all .right .content {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    background-color: #132C31;
                    border-radius: 10px;
                    transition: 0.5s;
                }

                    #Main #Appointment .container .all .right .content .title-div {
                        padding: 1rem;
                    }

                        #Main #Appointment .container .all .right .content .title-div .title {
                            text-align: center;
                            color: #fff;
                            margin: 0;
                            font-size: 28px;
                        }

                    #Main #Appointment .container .all .right .content .set-appointment-div form {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        gap: 14px;
                        background-color: #fff;
                        padding: 20px;
                        border-radius: 0 0 10px 10px;
                    }

                        #Main #Appointment .container .all .right .content .set-appointment-div form .fullname-div,
                        #Main #Appointment .container .all .right .content .set-appointment-div form .email-div,
                        #Main #Appointment .container .all .right .content .set-appointment-div form .phone-div,
                        #Main #Appointment .container .all .right .content .set-appointment-div form .zip-div,
                        #Main #Appointment .container .all .right .content .set-appointment-div form .address-div,
                        #Main #Appointment .container .all .right .content .set-appointment-div form .details-div {
                            display: flex;
                            flex-direction: column;
                            flex: 1;
                        }

                            #Main #Appointment .container .all .right .content .set-appointment-div form .fullname-div label,
                            #Main #Appointment .container .all .right .content .set-appointment-div form .email-div label,
                            #Main #Appointment .container .all .right .content .set-appointment-div form .phone-div label,
                            #Main #Appointment .container .all .right .content .set-appointment-div form .zip-div label,
                            #Main #Appointment .container .all .right .content .set-appointment-div form .address-div label,
                            #Main #Appointment .container .all .right .content .set-appointment-div form .details-div label {
                                margin-left: 5px;
                            }

                        #Main #Appointment .container .all .right .content .set-appointment-div form .fullname-and-phone,
                        #Main #Appointment .container .all .right .content .set-appointment-div form .address-and-zip {
                            display: flex;
                            gap: 20px;
                        }

                            #Main #Appointment .container .all .right .content .set-appointment-div form .fullname-and-phone .zip-div, #Main #Appointment .container .all .right .content .set-appointment-div form .fullname-and-phone .phone-div,
                            #Main #Appointment .container .all .right .content .set-appointment-div form .address-and-zip .zip-div,
                            #Main #Appointment .container .all .right .content .set-appointment-div form .address-and-zip .phone-div {
                                flex: 0.6;
                            }

                        #Main #Appointment .container .all .right .content .set-appointment-div form .submit-div {
                            width: 100%;
                            height: 50px;
                            margin-top: 10px;
                        }

                            #Main #Appointment .container .all .right .content .set-appointment-div form .submit-div button {
                                width: 100%;
                                height: 100%;
                                color: #fff;
                                background-color: #132C31;
                                border-radius: 10px;
                                outline: 0;
                                border: 0;
                                font-size: 22px;
                            }


@media (max-width: 1150px) {
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .title {
    font-size: 18px;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .plan {
    width: 100%;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .plan .plan-content {
    height: 80px;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .plan .plan-content .plan-details p {
    font-size: 12px;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .plan:nth-child(3) {
    margin-top: 10px;
  }
}
@media (max-width: 500px) {
  /*#Main #Appointment .container .all .right .content .tabs .pc-tab nav ul li label {
    padding: 15px 15px;
  }*/
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .title {
    font-size: 18px;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .plan {
    width: 100%;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .plan .plan-content {
    height: 80px;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .plan .plan-content .plan-details p {
    font-size: 12px;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .top .plans .plan:nth-child(3) {
    margin-top: 10px;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .bottom .custom-buttons .prev-div button {
    padding: 10px 30px !important;
  }
  #Main #Appointment .container .all .right .content .tabs .pc-tab section .tab2 .tab-all .bottom .custom-buttons .submit-div button {
    padding: 10px 30px !important;
  }
}
@media (max-width: 992px) {
  
  #Appointment .container {
    padding: 0;
  }
  #Appointment .container .all {
    position: relative;
    height: 600px !important;
  }
  #Appointment .container .all .right {
    transform: translate(0) !important;
    position: absolute;
    width: 100% !important;
    height: 100%;
    z-index: 1;
    padding: 1rem !important;
    background-color: rgba(71, 78, 93, 0.733);
  }
  #Appointment .container .all .right .content {
    background-color: unset !important;
  }
  #Appointment .container .all .right .content .title-div .title {
    color: #fff !important;
  }
  #Appointment .container .all .right .content .tabs section .tab {
    height: 500px !important;
  }
  #Appointment .container .all .left {
    border-radius: 0px !important;
    transform: translate(0) !important;
    width: 100% !important;
  }
}

@media (min-width: 1200px) {
  .container {
    --bs-gutter-x: 6rem;
  }
}
@media (min-width: 992px) and (max-width: 1200px) {
  .container {
    --bs-gutter-x: 4rem;
  }
  
}
@media (min-width: 768px) and (max-width: 992px) {
  .container {
    --bs-gutter-x: 2rem;
  }
  
}
@media (min-width: 576px) and (max-width: 768px) {
  
}
@media (max-width: 650px) {

    #Main #Appointment .container .all .right .content .set-appointment-div form .fullname-and-phone, 
    #Main #Appointment .container .all .right .content .set-appointment-div form .address-and-zip{
        flex-direction: column;
    }

        #Main #Appointment .container .all .right .content .set-appointment-div form .fullname-and-phone .zip-div,
        #Main #Appointment .container .all .right .content .set-appointment-div form .fullname-and-phone .phone-div,
        #Main #Appointment .container .all .right .content .set-appointment-div form .address-and-zip .zip-div,
        #Main #Appointment .container .all .right .content .set-appointment-div form .address-and-zip .phone-div {
            flex: 1 !important;
        }
  
}/*# sourceMappingURL=appointment.css.map */