Book an Appointment
-Conveniently Connect with the Healthcare Experts!
+ @media screen and (max-width: 768px) { + .content { + text-align: center; + padding: 10px; + } - + .footer-col form { + display: flex; + gap: 5px; + } -
-
+
-
Appointment Details
- - - + .footer-col input { + height: 40px; + border-radius: 6px; + background: none; + width: 100%; + outline: none; + border: 1px solid #7489c6; + caret-color: #fff; + color: #fff; + padding-left: 10px; + } + + .footer-col input::placeholder { + color: #ccc; + } + + .footer-col form button { + background: #fff; + border: none; + color: #08434551; + padding: 10px 15px; + border-radius: 6px; + cursor: pointer; + font-weight: 1000; + transition: 0.2s ease; + } + + .footer-col form button:hover { + background: #cecccc; + } + + /* + .icons { + display: flex; + margin-top: 30px; + gap: 30px; + cursor: pointer; +} + + .icons i { + color: #afb6c7; +} + + .icons i:hover { + color: #fff; +} +*/ + @media (max-width: 768px) { + .footer { + position: relative; + bottom: 0; + left: 0; + transform: none; + width: 100%; + border-radius: 0; + } + + .footer .footer-row { + padding: 20px; + gap: 1rem; + } + + .footer-col form { + display: block; + } + + .footer-col form :where(input, button) { + width: 100%; + } + + .footer-col form button { + margin: 10px 0 0 0; + } + } + + /*################----Back to top----################*/ + footer { + position: relative; + padding: 50px 0; + } + + #back-to-top-container { + position: fixed; + bottom: 100px; + right: 47px; + cursor: pointer; + z-index: 1000; + } + + .circle { + background-color: #00093d; + border-radius: 50%; + width: 35px; + height: 35px; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.3s; + } + + #back-to-top { + width: 40px; + height: 40px; + fill: #4178c0; + color: #00093d; + transition: fill 0.3s; + } + + #back-to-top:hover { + fill: hsl(214, 50%, 60%); + } + + .back-to-top:hover { + background: #3fbcc0cd; + color: #fff; + } + + .back-to-top.active { + visibility: visible; + opacity: 1; + } + + :root { + --text-color: #959da5; + --footer-bg: #3fbcc051; + --footer-bottom-bg: #3fbcc051s; + --white: white; + --link-color: #959da5; + --link-hover: #2f81cf; + --button-border: #848d97; + } + + .subscribe-btn { + display: flex; + align-items: center; + justify-content: center; + max-width: 8rem; + color: var(--white); + text-decoration: none; + font-size: 1rem; + height: 3rem; + font-weight: 700; + white-space: nowrap; + vertical-align: middle; + user-select: none; + border: 1px solid var(--link-color); + border-radius: 0.375rem; + transition: all 0.2s ease-in-out; + } + + .subscribe-btn:hover { + border: 3px solid var(--white); + } + + /*? footer containers */ + footer { + bottom: 0; + background-color: var(--footer-bg); + width: 100%; + min-width: 20re; + bottom: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + .footer-wrapper { + display: flex; + flex-direction: column; + max-width: 80rem; + width: 100%; + margin: 0 auto; + padding: 1rem; + } + + .footer-logo-columns { + list-style-type: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-grow: 4; + gap: 3rem 1rem; + } + + .footer-logo { + margin-bottom: 2rem; + width: 3rem; + } + + .footer-logo-column { + display: flex; + grid-area: footer-logo; + flex-direction: column; + min-width: 16rem; + flex-grow: 1; + padding-right: 0.5rem; + } + + .footer-logo-column p { + color: var(--text-color); + font-size: 0.95rem; + margin-bottom: 1.5rem; + } + + .footer-logo-column h3 { + color: var(--white); + margin-top: 0.25rem; + margin-bottom: 0.25rem; + } + + /* other columns */ + + .other-columns { + display: inline-grid; + grid-template-columns: repeat(2, 1fr); + width: 100%; + gap: 2rem 1rem; + padding-top: 2rem; + } + + .other-columns ul { + display: flex; + gap: 0.75rem; + list-style-type: none; + padding: 0; + margin: 0; + flex-direction: column; + font-weight: 600; + } + + .other-columns ul a { + color: var(--text-color); + text-decoration: none; + font-size: 0.85rem; + } + + .other-columns h3 { + color: var(--link-color); + margin-bottom: 1rem; + font-size: 1rem; + font-family: ui-monospace, monospace; + } + + .footer-logo svg { + fill: var(--white); + } + + /*? Footer bottom */ + + /* Remove underline from all links in the footer sections */ + .links a { + position: relative; + text-decoration: none; + color: inherit; + /* Optional: Use this if you want the link to inherit the color from its parent element */ + transition: color 0.3s ease; + /* Smooth transition effect */ + } + + /* Add the underline effect */ + .links a::after { + content: ""; + position: absolute; + width: 0; + height: 2px; + /* Adjust the thickness of the underline */ + bottom: -2px; + /* Adjust position if needed */ + left: 0; + background-color: #000; + /* Change this to your desired underline color */ + transition: width 0.3s ease; + transition-delay: 0.1s; + /* Optional: Adds a slight delay to the animation */ + } + + .links a:hover { + color: #000; + /* Change text color to black */ + } + + /* Hover effect */ + .links a:hover::after { + width: 100%; + left: 0; + /* Reset to left 0 to create the effect from right to left */ + right: auto; + } + + .footer-bottom { + width: 100%; + color: var(--text-color); + background-color: var(--footer-bottom-bg); + } + + .footer-bottom-wrapper { + display: flex; + max-width: 80rem; + margin: 0 auto; + gap: 1rem; + width: 100%; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + align-content: center; + padding: 1rem; + } + + .footer-bottom small { + font-size: 1rem; + display: inline; + white-space: nowrap; + } + + .footer-bottom-links { + text-decoration: none; + list-style-type: none; + display: inline-flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + } + + .footer-bottom-links a { + color: var(--link-color); + text-decoration: none; + white-space: nowrap; + } + + .footer-bottom-links a:hover { + color: var(--link-hover); + text-decoration: none; + } + + .footer-bottom > small { + font-size: 1rem; + margin: 0 auto; + width: 100%; + } + + /*? socials */ + .social-wrapper { + display: flex; + gap: 0.5rem; + margin: 0 auto; + } + + .social-links { + display: inline-flex; + gap: 0.5rem; + align-items: center; + } + + .social-links img { + width: 1.5rem; + height: 1.5rem; + transition: all 0.2s ease-in-out; + } + + .social-links img:hover { + transform: scale(1.1); + } + + .social-links ul { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + list-style-type: none; + } + + .footer-bottom-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + } + + @media (min-width: 600px) { + .other-columns { + display: grid; + grid-template-columns: repeat(4, 1fr); + } + + .footer-bottom-wrapper { + flex-direction: row; + } + + .footer-bottom-wrapper small { + font-size: smaller; + } + + .footer-bottom-links { + margin-left: 1.5rem; + } + } + + @media (max-width: 800px) { + .footer-top { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 1rem 0.5rem 2rem 0.5rem; + } + } + #abc :hover { + background: #55a5ea; + border-color: #3fbbc0; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: "Raleway", sans-serif; + } + + /* General form section styles */ +.form-section { + display: flex; + flex-direction: column; + margin-bottom: 15px; +} + +.form-section label { + margin-bottom: 5px; + font-weight: bold; + color: #e0f7e4; +} + +.form-section input, +.form-section select, +.form-section textarea { + padding: 8px; + border: 1px solid #5a7f5a; + border-radius: 5px; + font-size: 14px; + width: 100%; + box-sizing: border-box; + background-color: #005253; + color: #e0f7e4; +} + +.form-section textarea { + resize: vertical; + height: 80px; +} + +/* Specific styles for checkbox and patient ID */ +.form-section .existing-patient-container { + display: flex; + align-items: center; + margin-bottom: 15px; /* Adjust margin for spacing */ +} + +.form-section .existing-patient-container input[type="checkbox"] { + margin-right: 10px; +} + +.form-section input#patient-id { + margin-top: 10px; + display: none; +} + +/* Styles for the buttons */ +#appointment-form button { + display: block; + width: 100%; + padding: 10px; + background-color: #4caf50; + color: white; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + margin-top: 20px; +} + +#appointment-form button:hover { + background-color: #45a045; +} + +/* Styles for preview section */ +#preview-section { + margin-top: 30px; + background-color: #2e462e; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +#preview-section h2 { + text-align: center; + margin-bottom: 20px; + color: #e0f7e4; +} + +#preview-details { + font-size: 16px; + line-height: 1.5; + color: #e0f7e4; +} + +#preview-section button { + display: inline-block; + width: auto; + padding: 10px 20px; + margin: 10px 5px 0 0; + background-color: #4caf50; + color: white; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; +} + +#preview-section button:hover { + background-color: #45a045; +} + +#preview-section button:last-child { + background-color: #e53935; +} + +#preview-section button:last-child:hover { + background-color: #d32f2f; +} + +/* Additional responsive styles */ +@media (max-width: 768px) { + .form-section { + flex-direction: column; + } + + #appointment-form button { + font-size: 14px; + } + + #preview-section button { + font-size: 14px; + } +} + + + + + + + + + + + + + + + +
+ 
+
+
+
+ Rapidoc
+
-
+
+
+
+
+
+
+
+ Doctor's Contact Information
-123 Clinic Street, MediCity
-Phone: +91 1234567890
-Email: contact@clinic.com
+ +
+
+
Book an Appointment
+Conveniently Connect with the Healthcare Experts!
+ + + +
+
+