/home/u775757334/domains/civicwelllife.com/public_html/function
Edit: /home/u775757334/domains/civicwelllife.com/public_html/function/custum.css (66753B)
/* google transalte */
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame {
display: none !important;
}
body {
top: 0px !important;
}
/* Hide full translate block */
.skiptranslate {
display: none !important;
}
.lang-btn {
background: #f1f5f9;
color: #0d6efd;
border: 1px solid #e2e8f0;
padding: 6px 12px;
font-size: 12px;
border-radius: 20px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s ease;
}
.lang-btn:hover {
background: #0d6efd;
color: #fff;
}
/* ================================== Google Transalte ========================================== */
/* ================================== Slider Section ========================================== */
.flat-spacing-25 {
padding-top: 0px;
padding-bottom: 0px;
}
/* ================================== Slider Section ========================================== */
/* ================================== Topbar Section ========================================== */
.tf-top-bar {
background: #0268b2;
}
.tf-page-title.style-2 {
padding: 15px 0 15px;
background: aliceblue;
}
.tf-page-title .heading {
font-size: 36px;
font-weight: 600;
line-height: normal;
color: #0268b2;
}
@media (max-width: 768px) {
.tf-page-title .heading {
font-size: 24px;
}
}
/* ================================== Topbar Section ========================================== */
/* ================================== Category Section ========================================== */
.ayur-category-section {
background: aliceblue;
padding: 10px 0px 30px;
}
.section-heading .title {
font-size: 34px;
font-weight: 600;
color: #2d3a2f;
}
.section-heading .subtitle {
color: #7a7a7a;
font-size: 15px;
margin-top: 10px;
}
.ayur-category-card {
background: #ffffff;
border-radius: 20px;
padding: 10px 20px;
text-align: center;
transition: all 0.4s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.ayur-category-card:hover {
transform: translateY(-5px);
}
.category-image {
width: 90px;
height: 90px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
background: aliceblue;
border-radius: 50%;
padding: 10px;
transition: 0.4s;
}
.category-image img {
max-width: 70px;
max-height: 70px;
}
.category-content h5 {
font-size: 17px;
font-weight: 600;
margin-top: 5px;
color: #0268b2;
}
.category-content span {
font-size: 13px;
color: #8a8a8a;
}
/* ================================== Category Section ========================================== */
/* ================================== Category Wise Product Section ========================================== */
.ayur-popular-section {
padding: 30px 0;
}
.ayur-popular-section .title {
font-size: 34px;
font-weight: 600;
color: #2d3a2f;
}
.ayur-tabs {
gap: 10px;
}
@media (min-width: 1150px) {
.flat-title {
margin-bottom: 30px;
}
}
.ayur-tabs .nav-tab-item a {
padding: 6px 20px;
border-radius: 30px;
border: 1px dashed #0268b2;
font-size: 15px;
font-weight: 600;
color: #4a4a4a;
transition: 0.3s ease;
background: #fff;
}
.ayur-tabs .nav-tab-item a.active {
background: #0268b2;
color: #fff;
border-color: #0268b2;
}
.ayur-tabs .nav-tab-item a:hover {
background: #f1f8fc;
border-color: #0268b2;
color: #0268b2;
}
.tf-grid-layout .col {
transition: 0.4s ease;
}
.tf-grid-layout .col:hover {
transform: translateY(-8px);
}
.card-product .card-product-wrapper {
padding: 0px 30px;
}
/* ================================== Category Wise Product Section ========================================== */
/* ================================== Video Section ========================================== */
.doctor-product-section {
padding: 30px 0;
background: #f8f6f2;
}
.doctor-product-section .container {
padding-left: 150px;
padding-right: 150px;
}
@media (max-width: 1350px) {
.doctor-product-section .container {
padding-left: 15px;
padding-right: 15px;
}
}
@media (max-width: 768px) {
.doctor-product-section .container {
padding-left: 15px;
padding-right: 15px;
}
.doctor-info h5 {
font-size: 12px !important;
}
}
/* Card */
.doctor-card {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
transition: all 0.4s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}
.doctor-card:hover {
transform: translateY(-8px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}
.video-box {
width: 100%;
aspect-ratio: 9 / 16;
overflow: hidden;
border-radius: 18px 18px 0 0;
}
.video-box video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.doctor-card:hover video {
transform: scale(1.05);
}
/* Bottom Content */
.doctor-info {
padding: 10px;
text-align: center;
}
.doctor-info h5 {
font-weight: 600;
font-size: 20px;
margin-bottom: 6px;
color: #222;
}
/* Button */
.buy-btn {
display: inline-block;
background: #ff6a00;
color: #fff;
padding: 5px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: 0.3s ease;
}
.buy-btn:hover {
background: #e85c00;
}
/* ================================== Video Section ========================================== */
/* ================================== Cta Section ========================================== */
.consult-cta {
margin-top: 30px;
margin-bottom: 30px;
}
.cta-img {
width: 100%;
display: block;
}
/* Desktop default */
.mobile-img {
display: none;
}
/* Mobile view */
@media (max-width: 768px) {
.desktop-img {
display: none;
}
.mobile-img {
display: block;
}
}
/* ================================== Cta Section ========================================== */
/* ================================== Footer Section ========================================== */
.footer-bottom {
background-color: aliceblue;
}
.footer .footer-wrap .footer-bottom .footer-bottom-wrap .footer-menu_item {
color: rgb(84, 84, 84);
font-weight: 700;
}
.footer .footer-wrap .footer-bottom .footer-bottom-wrap {
border-top: 1px solid #0181c7;
}
.footer .footer-wrap .footer-body::before {
background-color: #0181c7;
max-width: 100%;
}
.footer .footer-wrap .footer-body {
padding-top: 30px;
padding-bottom: 30px;
background-color: aliceblue;
}
.footer .footer-heading h6 {
font-size: 20px;
font-weight: 700;
color: #0580c4;
line-height: 18px;
}
.footer .footer-menu_item {
line-height: 30px;
font-weight: 600;
font-size: 16px;
}
.footer .footer-infor>a {
margin-bottom: 22px;
}
.footer .tf-btn.btn-line {
margin-top: 10px;
font-size: 15px;
font-weight: 700;
color: #0281c4;
}
.footer .footer-infor ul {
margin-bottom: 0px;
}
.footer .footer-infor ul li p {
line-height: 30px;
font-weight: 500;
font-size: 15px;
}
/* ================================== Footer Section ========================================== */
/* ================================== Impact Section ========================================== */
.our-impact-section {
padding: 30px 0;
background: #eaf2f9;
}
.impact-title {
font-size: 38px;
font-weight: 700;
line-height: normal;
margin-bottom: 10px;
color: #111;
}
.impact-divider {
width: 60px;
height: 4px;
background: #0281c4;
margin: 0 auto;
border-radius: 5px;
}
.impact-card {
padding: 15px 25px;
border-radius: 18px;
background: #ffffff;
transition: all 0.4s ease;
}
.impact-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.impact-icon {
width: 80px;
height: 80px;
margin: 0 auto 10px;
display: flex;
align-items: center;
justify-content: center;
background: rgb(240 248 255);
border-radius: 50%;
}
.impact-card h3 {
font-size: 34px;
font-weight: 700;
line-height: normal;
margin-bottom: 4px;
color: #111;
}
.impact-card p {
font-size: 16px;
color: #555;
line-height: 1.6;
}
@media (max-width: 768px) {
.impact-title {
font-size: 28px;
}
}
@media (max-width: 768px) {
.impact-card {
padding: 10px 8px;
}
.impact-icon {
width: 55px;
height: 55px;
margin-bottom: 8px;
}
.impact-card h3 {
font-size: 18px;
margin-bottom: 4px;
}
.impact-card p {
font-size: 12px;
line-height: 1.4;
}
.impact-row {
--bs-gutter-x: 0px;
}
.impact-row>[class*="col-"] {
padding-left: 4px;
padding-right: 4px;
}
}
/* ================================== Impact Section ========================================== */
/* ================================== Client Section ========================================== */
.media-section {
padding: 30px 0;
}
.media-title {
font-size: 36px;
line-height: normal;
font-weight: 700;
color: #0f172a;
}
.media-divider {
width: 70px;
height: 4px;
background: linear-gradient(90deg, #0281c4, #00c6ff);
margin: 12px auto 0;
border-radius: 20px;
}
/* Glass Style Wrapper */
.media-wrapper {
margin-top: 30px;
}
.media-swiper .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
}
/* Logo Box */
.media-logo-box {
width: 100%;
height: 100px;
padding: 10px;
background: aliceblue;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1px dashed #0268b2;
box-shadow: 0 5px 10px rgb(235 246 255);
transition: 0.3s ease;
}
/* Image Fit Proper */
.media-logo-box img {
max-width: 100%;
width: 100%;
height: 100%;
max-height: 100%;
object-fit: contain;
transition: 0.3s ease;
}
/* Hover Effect */
.media-logo-box:hover {
transform: translateY(-4px);
}
.media-logo-box:hover img {
filter: grayscale(0%);
opacity: 1;
}
/* Mobile */
@media (max-width: 768px) {
.media-logo-box {
width: 100%;
height: 80px;
}
.media-logo-box img {
max-width: 100%;
max-height: 100%;
}
.media-title {
font-size: 25px;
}
}
/* ================================== Client Section ========================================== */
/* ================================== Product Slide Section ========================================== */
.flat-spacing-6 {
padding: 3px 0px 30px;
}
/* Category Title */
.flat-title .title {
font-size: 34px;
font-weight: 700;
color: #0f172a;
position: relative;
margin: 0;
letter-spacing: 0.5px;
}
.tf-btn.btn-line {
font-size: 13px;
font-weight: 600;
color: #0281c4;
letter-spacing: 1px;
border-bottom: 2px solid transparent;
transition: all 0.3s ease;
}
.tf-btn.btn-line:hover {
border-bottom: 2px solid #0281c4;
color: #005fa3;
}
/* Arrow Hover */
.nav-sw-arrow:hover {
background: #0281c4;
color: #ffffff;
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 768px) {
.flat-title .title {
font-size: 24px;
text-align: center;
}
}
/* ================================== Product Slide Section ========================================== */
/* ================================== Trust Section ========================================== */
.trust-section {
padding: 30px 0;
background: #f9fafb;
}
.trust-title {
font-size: 34px;
line-height: normal;
font-weight: 700;
margin-bottom: 25px;
color: #111827;
}
/* Card */
.trust-card {
background: #ffffff;
border-radius: 18px;
margin-bottom: 10px;
overflow: hidden;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
transition: 0.4s ease;
}
.trust-card:hover {
transform: translateY(-8px);
}
/* Video Box */
.video-box {
position: relative;
width: 100%;
aspect-ratio: 9/16;
overflow: hidden;
}
.video-box video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Play Button */
.play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55px;
height: 55px;
background: rgba(255, 255, 255, 0.85);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
cursor: pointer;
transition: 0.3s ease;
}
.play-btn:hover {
background: #ff6a00;
color: #fff;
}
/* Product Info */
.product-info {
padding: 10px;
text-align: center;
}
.product-info h6 {
text-align: center;
font-size: 14px;
font-weight: 600;
margin-bottom: 3px;
line-height: normal;
}
.product-info p {
font-size: 13px;
text-align: center;
color: #666;
margin-bottom: 10px;
}
/* Buy Button */
.buy-btn {
display: inline-block;
background: #ff6a00;
color: #fff;
padding: 6px 18px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: 0.3s ease;
}
.buy-btn:hover {
background: #e65c00;
}
/* See More */
.more-videos-btn {
display: inline-block;
padding: 10px 28px;
border: 1px solid #ff6a00;
color: #ff6a00;
border-radius: 8px;
font-weight: 600;
transition: 0.3s ease;
text-decoration: none;
}
.more-videos-btn:hover {
background: #ff6a00;
color: #fff;
}
/* ================================== Trust Section ========================================== */
/* ================================== Testimonial Section ========================================== */
.flat-spacing-4 {
padding-top: 30px;
padding-bottom: 30px;
}
@media (min-width: 768px) {
.testimonial-item.style-column {
padding: 20px 20px 20px;
}
}
@media (min-width: 768px) {
.testimonial-item.style-column .rating {
margin-bottom: 20px;
}
}
.rating i {
font-size: 18px;
color: #0480c6;
}
@media (min-width: 768px) {
.testimonial-item.style-column .text {
margin-bottom: 15px;
}
}
@media (min-width: 768px) {
.testimonial-item.style-column .author {
margin-bottom: 0px;
border-top: 1px dashed #0480c6;
}
}
.testimonial-item .name {
font-weight: 700;
font-size: 20px;
margin-top: 12px;
color: #0480c6;
}
.testimonial-item .metas {
color: var(--text);
font-size: 15px;
font-weight: 500;
margin-top: 8px;
}
/* ================================== Testimonial Section ========================================== */
/* ================================== Consultation Section ========================================== */
/* Consultation Strip */
.consult-strip {
background: linear-gradient(90deg, #0268b2, #077fc4);
padding: 18px 0;
position: relative;
overflow: hidden;
}
/* Center content */
.consult-link {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
color: #ffffff;
font-size: 18px;
font-weight: 500;
text-decoration: none;
transition: 0.3s ease;
}
/* Bold highlight */
.consult-text strong {
font-weight: 700;
}
/* Arrow */
.consult-arrow {
font-size: 22px;
transition: 0.3s ease;
}
/* Hover effect */
.consult-link:hover {
letter-spacing: 0.5px;
}
.consult-link:hover .consult-arrow {
transform: translateX(6px);
}
/* Soft Glow Effect */
.consult-strip::before {
content: "";
position: absolute;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15), transparent 70%);
top: -100px;
left: -100px;
}
/* Mobile */
@media (max-width: 768px) {
.consult-link {
font-size: 10px;
text-align: center;
padding: 0 0px;
}
.consult-arrow {
font-size: 18px;
}
.consult-strip {
padding: 4px 0;
}
}
/* ================================== Consultation Section ========================================== */
/* ================================== Contact Page ========================================== */
.flat-spacing-9 {
padding: 30px 0px;
}
.contact-section {
padding: 30px 0;
background: #f9fafb;
}
.contact-wrapper {
max-width: 850px;
margin: auto;
background: #ffffff;
padding: 20px 30px;
border-radius: 20px;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.06);
}
.contact-heading h2 {
font-size: 34px;
font-weight: 700;
line-height: normal;
margin-bottom: 20px;
}
.contact-form .form-row {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.contact-form input,
.contact-form textarea {
width: 100%;
padding: 14px 16px;
border-radius: 12px;
border: 1px dashed #0268b2;
font-size: 14px;
transition: 0.3s;
background: #dff4ff30;
}
.contact-form textarea {
height: 140px;
resize: none;
margin-bottom: 20px;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #0284c7;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
outline: none;
background: #ffffff;
}
.btn-submit {
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
padding: 14px 35px;
border-radius: 40px;
border: none;
font-weight: 600;
transition: 0.3s ease;
cursor: pointer;
}
.btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(2, 132, 199, 0.3);
}
.map-wrapper {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
height: 450px;
}
@media (max-width: 991px) {
.map-wrapper {
height: 300px;
}
}
.map-wrapper iframe {
width: 100%;
height: 100%;
border: 0;
}
.contact-card {
background: #ffffff;
padding: 35px;
border-radius: 20px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(2, 132, 199, 0.08);
}
.contact-card h5 {
font-size: 26px;
font-weight: 700;
margin-bottom: 25px;
}
.contact-card strong {
font-size: 14px;
color: #0369a1;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.contact-card p {
color: #475569;
}
.info-item {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 25px;
}
.info-item h6 {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #0369a1;
margin-bottom: 5px;
}
.info-item p {
margin: 0;
color: #475569;
}
.info-icon {
width: 45px;
height: 45px;
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.social-modern {
display: flex;
gap: 15px;
margin-top: 25px;
}
.social-modern a {
width: 42px;
height: 42px;
border-radius: 12px;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
color: #475569;
transition: all 0.3s ease;
text-decoration: none;
}
.social-modern a:hover {
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(2, 132, 199, 0.3);
}
/* ================================== Contact Page ========================================== */
/* ================================== About Page ========================================== */
.about-section {
padding: 30px 0;
background: #ffffff;
}
.about-wrapper {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 60px;
align-items: center;
}
.about-image img {
width: 100%;
border-radius: 24px;
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.08);
}
.about-content h2 {
font-size: 36px;
font-weight: 700;
color: #0f172a;
}
.about-text {
color: #475569;
line-height: 1.8;
margin-bottom: 30px;
max-width: 520px;
}
.about-highlights div {
margin-bottom: 10px;
font-weight: 500;
color: #0369a1;
}
@media (max-width: 992px) {
.about-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
.about-content {
text-align: center;
}
.about-text {
margin: auto;
}
}
/* ================================== About Page ========================================== */
/* ================================== privacy policy Page ========================================== */
.policy-section {
padding: 30px 0;
}
.policy-wrapper {
max-width: 900px;
margin: auto;
background: #ffffff;
padding: 20px 50px;
border-radius: 20px;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
.policy-wrapper {
max-width: 100%;
padding: 15px;
}
.policy-header h2 {
font-size: 25px !important;
}
}
.policy-header h2 {
font-size: 36px;
font-weight: 700;
line-height: normal;
margin-bottom: 5px;
}
.policy-header p {
color: #64748b;
margin-bottom: 30px;
}
.policy-content {
color: #475569;
line-height: 1.9;
font-size: 15px;
}
.policy-content h3 {
margin-top: 30px;
margin-bottom: 15px;
font-weight: 600;
color: #0f172a;
}
.policy-content ul,
.policy-content ol {
padding-left: 20px;
margin-bottom: 20px;
}
.policy-content li {
margin-bottom: 10px;
}
/* ================================== privacy policy Page ========================================== */
/* ================================== Affiliate Registration Page ========================================== */
.affiliate-section {
padding: 30px 0;
}
/* FORM CARD */
.affiliate-terms-card {
background: #ffffff;
padding: 20px 45px;
border-radius: 20px;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.04);
}
.affiliate-form-card {
background: #ffffff;
padding: 45px;
border-radius: 24px;
box-shadow: 0 30px 80px rgba(2, 132, 199, 0.08);
border: 1px solid rgba(2, 132, 199, 0.08);
}
.affiliate-form-card h3 {
font-size: 30px;
font-weight: 700;
line-height: normal;
margin-bottom: 20px;
color: #0f172a;
}
.sub-text {
color: #64748b;
margin-bottom: 30px;
}
/* Floating label */
.form-group {
position: relative;
margin-bottom: 15px;
}
.form-group input {
width: 100%;
padding: 16px;
border-radius: 14px;
border: 1px solid #e2e8f0;
background: #ffffff;
transition: 0.3s ease;
}
.form-group input:focus {
border-color: #0284c7;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}
.form-group label {
position: absolute;
left: 14px;
top: 14px;
font-size: 13px;
color: #64748b;
transition: 0.3s;
pointer-events: none;
}
/* Button */
.btn-affiliate {
width: 100%;
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
padding: 14px;
border-radius: 40px;
border: none;
font-weight: 600;
transition: 0.3s ease;
}
.btn-affiliate:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(2, 132, 199, 0.3);
}
.affiliate-terms-card h3 {
margin-bottom: 20px;
line-height: normal;
font-weight: 700;
}
.terms-content {
color: #475569;
line-height: 1.8;
}
@media (max-width: 992px) {
.affiliate-wrapper {
grid-template-columns: 1fr;
gap: 40px;
}
}
@media (max-width: 768px) {
.affiliate-form-card {
padding: 20px;
}
.affiliate-form-card h3 {
font-size: 25px;
}
.affiliate-terms-card {
padding: 20px;
}
.affiliate-terms-card h3 {
margin-bottom: 15px;
line-height: normal;
font-weight: 700;
font-size: 25px;
}
}
/* ================================== Affiliate Registration Page ========================================== */
/* ================================== Login Page ========================================== */
.login-section {
padding: 30px 0;
}
.login-card {
background: #ffffff;
padding: 20px 50px;
border-radius: 24px;
box-shadow: 0 30px 80px rgba(2, 132, 199, 0.08);
border: 1px solid rgba(2, 132, 199, 0.08);
}
.login-header h2 {
font-size: 32px;
line-height: normal;
font-weight: 700;
margin-bottom: 30px;
}
.form-group input {
width: 100%;
padding: 16px;
border-radius: 14px;
border: 1px solid #e2e8f0;
background: #ffffff;
outline: none;
transition: 0.3s;
}
.form-group input:focus {
border-color: #0284c7;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1);
}
.form-group label {
position: absolute;
left: 25px;
top: 18px;
font-size: 16px;
color: #64748b;
transition: 0.3s;
pointer-events: none;
}
.form-group input:focus+label,
.form-group input:not(:placeholder-shown)+label {
top: -8px;
left: 12px;
background: #fff;
padding: 0 6px;
font-size: 11px;
color: #0284c7;
}
/* Button */
.btn-login {
width: 100%;
padding: 16px;
font-size: 20px;
border-radius: 50px;
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
font-weight: 600;
border: none;
transition: 0.3s ease;
}
.btn-login:hover {
transform: translateY(-3px);
box-shadow: 0 20px 40px rgba(2, 132, 199, 0.35);
}
.login-footer {
margin-top: 25px;
font-size: 16px;
}
.login-footer a {
color: #0284c7;
font-weight: 600;
text-decoration: none;
margin-left: 5px;
}
.login-footer a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.login-card {
padding: 20px;
}
}
/* ================================== Login Page ========================================== */
/* ================================== Product List Page ========================================== */
.card-product {
border-radius: 20px;
background: #fff;
padding: 15px;
transition: 0.4s ease;
box-shadow: 0 10px 25px rgba(15, 0, 0, 0.05);
}
.card-product:hover {
transform: translateY(-8px);
box-shadow: 0 15px 30px rgba(2, 132, 199, 0.15);
}
/* Image zoom */
.card-product-wrapper {
overflow: hidden;
border-radius: 18px;
}
.card-product-wrapper img {
transition: 0.5s ease;
}
.card-product:hover .img-product {
transform: scale(1.05);
}
/* Title */
.card-product-info .title {
font-weight: 600;
font-size: 16px;
margin-top: 10px;
}
/* Rating */
.rating {
color: #f97316;
font-size: 14px;
}
.card-product-info .rating i {
font-size: 16px;
color: var(--bg-5);
}
/* Add cart button */
.addbutton {
border-radius: 30px;
padding: 8px 20px;
background: linear-gradient(135deg, #0284c7, #0369a1);
border: none;
transition: 0.3s ease;
}
.addbutton:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(2, 132, 199, 0.3);
}
.flat-spacing-1 {
padding: 30px 0;
}
.tf-page-title.style-2 {
padding: 20px 0 20px;
}
.tf-page-title {
padding: 20px 0 20px;
background: aliceblue;
}
.card-product.style-9 .card-product-info {
display: block;
}
.product-name {
margin-bottom: 4px;
}
.product-price {
margin-top: 10px;
}
.price {
font-size: 17px !important;
}
.price-del {
font-size: 15px !important;
color: #d90606;
}
.addbutton {
background: #0281c4;
padding: 3px 14px;
}
@media (max-width: 768px) {
.addbutton {
padding: 3px 10px;
}
}
/* ================================== Product List Page ========================================== */
/* ================================== Product Details Page ========================================== */
.size-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.size-label {
font-size: 14px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 1px;
}
.variant-picker-label-value {
display: inline-block;
margin-right: 10px;
margin-bottom: 8px;
}
.variant-picker-label-value a {
padding: 10px 18px;
border-radius: 50px;
border: 1px solid #e2e8f0;
background: #f8fafc;
font-weight: 500;
}
.variant-picker-label-value.active a {
background: linear-gradient(135deg, #0284c7, #0369a1);
color: #fff;
border: none;
}
.new-price-style {
display: flex;
align-items: center;
gap: 15px;
margin: 15px 0;
}
.price-main {
font-size: 28px;
font-weight: 700;
color: #0284c7;
}
.price-old {
font-size: 18px;
color: #94a3b8;
}
.price-discount {
background: #dcfce7;
color: #16a34a;
padding: 5px 12px;
border-radius: 30px;
font-size: 14px;
font-weight: 600;
}
.variant-picker-label-value a {
text-decoration: none;
display: inline-block;
padding: 8px 15px;
border-radius: 8px;
border: 1px solid #e2e8f0;
color: #0f172a;
transition: 0.3s ease;
}
.variant-picker-label-value a:hover {
background: #0284c7;
color: #fff;
border-color: #0284c7;
}
.variant-picker-label-value.active a {
background: #0284c7;
color: #fff;
}
.product-rating {
margin: 10px 0;
font-size: 14px;
color: #f97316;
}
.product-rating span {
color: #64748b;
}
.btn-add-to-cart {
border-radius: 40px;
padding: 14px;
font-size: 16px;
background: linear-gradient(135deg, #0284c7, #0369a1);
border: none;
transition: 0.3s ease;
}
.btn-add-to-cart:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(2, 132, 199, 0.3);
}
.wg-quantity {
border-radius: 12px;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.wg-quantity input {
border: none;
width: 50px;
text-align: center;
}
.btn-quantity {
padding: 8px 12px;
cursor: pointer;
}
.tf-product-info-wrap {
background: #fff;
padding: 30px;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
}
.tf-product-info-list>div:not(:last-child) {
margin-bottom: 20px;
}
.tf-product-media-main .swiper-slide img {
border-radius: 20px;
transition: 0.4s ease;
}
.tf-product-media-main .swiper-slide img:hover {
transform: scale(1.03);
}
.tf-product-media-wrap {
background: linear-gradient(145deg, #f8fbff, #ffffff);
padding: 25px;
border-radius: 25px;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.06);
}
.tf-product-info-badges .badges {
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0 14px;
border: 1px solid var(--main);
border-radius: 3px;
font-size: 14px;
font-weight: 700;
line-height: 29px;
}
@media (max-width: 768px) {
.tf-product-info-wrap {
padding: 15px;
}
.price-main {
font-size: 16px;
}
.price-old {
font-size: 16px;
}
.price-discount {
padding: 4px 8px;
}
.card-product .card-product-wrapper {
padding: 0px 0px;
}
.floating-consult-btn {
bottom: 68px;
right: 7px;
}
}
/* ================================== Product Details Page ========================================== */
/* doctor- dashbord page */
.card-box {
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
.page-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 25px;
}
.preview-img {
margin-top: 10px;
border-radius: 8px;
}
/* Sidebar Box */
.sidebar-box {
position: sticky;
top: 100px;
background: #fff;
padding: 15px;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}
/* Menu Styling */
.my-account-nav {
list-style: none;
padding: 0;
margin: 0;
}
.my-account-nav-item {
display: block;
padding: 12px 15px;
border-radius: 8px;
color: #333;
transition: 0.3s;
}
.my-account-nav-item:hover {
background: #f1f5f9;
color: #0d6efd;
}
.my-account-nav-item.active {
background: #0d6efd;
color: #fff;
}
/* Content Box */
.content-box {
padding: 10px;
}
/* Card */
.card-box {
background: #fff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
/* Title */
.page-title {
font-size: 24px;
font-weight: 700;
}
/* Image */
.preview-img {
margin-top: 10px;
border-radius: 8px;
}
/* Background soft */
.dashboard-section {
background: #f6f8fb;
padding: 40px 0;
}
/* Sidebar Premium */
.sidebar-box {
position: sticky;
top: 100px;
background: #ffffff;
padding: 18px;
border-radius: 16px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
border: 1px solid #eef1f5;
}
/* Sidebar Menu */
.my-account-nav-item {
display: block;
padding: 12px 14px;
border-radius: 10px;
color: #000000;
font-weight: 500;
transition: all 0.3s ease;
}
.my-account-nav-item:hover {
background: #f1f5ff;
color: #0d6efd;
transform: translateX(4px);
}
.my-account-nav-item.active {
background: linear-gradient(135deg, #0d6efd, #4dabf7);
color: #fff;
}
/* Content box */
.content-box {
padding: 5px 10px;
}
/* Card Premium */
.card-box {
background: #ffffff;
padding: 30px;
border-radius: 16px;
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
border: 1px solid #eef1f5;
}
/* Title */
.page-title {
font-size: 26px;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 10px;
}
.title-icon {
font-size: 22px;
}
/* Inputs */
.form-control {
border-radius: 10px;
padding: 10px 14px;
border: 1px solid #e2e8f0;
transition: 0.3s;
}
.form-control:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1);
}
/* Buttons */
.btn-success {
border-radius: 10px;
font-weight: 500;
background: linear-gradient(135deg, #28a745, #4cd964);
border: none;
}
.btn-success:hover {
opacity: 0.9;
}
.btn-light {
border-radius: 10px;
}
/* Image preview */
.preview-img {
margin-top: 10px;
border-radius: 10px;
border: 1px solid #eee;
padding: 3px;
}
/* Subtle hover on card */
.card-box:hover {
transform: translateY(-2px);
transition: 0.3s;
}
/* MOBILE SIDEBAR HIDE */
@media (max-width: 991px) {
.sidebar-mobile {
position: fixed;
top: 0;
left: -100%;
width: 260px;
height: 100%;
background: #fff;
z-index: 9999;
padding: 20px;
overflow-y: auto;
transition: 0.3s;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}
.sidebar-mobile.active {
left: 0;
}
/* overlay */
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 9998;
display: none;
}
.sidebar-overlay.active {
display: block;
}
}
.my-account-nav {
list-style: none;
padding: 0;
margin: 0;
}
/* item */
.my-account-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
margin-bottom: 8px;
border-radius: 12px;
color: #374151;
font-weight: 500;
transition: all 0.3s ease;
}
/* icon */
.my-account-nav-item i {
font-size: 18px;
width: 20px;
text-align: center;
}
/* hover */
.my-account-nav-item:hover {
background: #f1f5ff;
color: #0d6efd;
transform: translateX(5px);
}
/* active */
.my-account-nav-item.active {
background: linear-gradient(135deg, #0d6efd, #4dabf7);
color: #fff;
box-shadow: 0 6px 15px rgba(13, 110, 253, 0.3);
}
/* logout */
.my-account-nav-item.logout {
color: #dc3545;
}
.my-account-nav-item.logout:hover {
background: #ffecec;
}
/* sidebar */
.sidebar-box {
padding: 18px;
}
/* doctor- dashbord page */
/* doctor- vedio page */
.all-video-page {
background: #f4f7fb;
min-height: 100vh;
padding-top: 30px;
padding-bottom: 60px;
}
.doctor-breadcrumb {
font-size: 14px;
color: #6b7280;
margin-bottom: 18px;
}
.doctor-breadcrumb a {
color: #374151;
text-decoration: none;
font-weight: 500;
}
.doctor-breadcrumb span {
margin: 0 6px;
}
.all-video-top-head {
max-width: 760px;
margin: 0 auto 40px;
}
.all-video-mini-badge {
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
background: #e9f0ff;
color: #2446c6;
font-size: 13px;
font-weight: 700;
margin-bottom: 12px;
}
.all-video-main-title {
font-size: 38px;
font-weight: 800;
color: #0f172a;
margin-bottom: 10px;
line-height: 1.2;
}
.all-video-main-subtitle {
font-size: 15px;
line-height: 1.8;
color: #64748b;
margin-bottom: 0;
}
.video-category-section {
margin-bottom: 34px;
}
.video-category-box {
background: #ffffff;
border: 1px solid #e6ecf5;
border-radius: 24px;
padding: 28px;
box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
}
.video-category-header {
margin-bottom: 24px;
}
.video-category-title {
font-size: 30px;
font-weight: 800;
color: #0f172a;
margin: 0;
position: relative;
display: inline-block;
padding-bottom: 12px;
}
.video-category-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 78px;
height: 4px;
border-radius: 10px;
background: linear-gradient(90deg, #2446c6 0%, #5b7cff 100%);
}
.home-video-card {
background: #fff;
border: 1px solid #e7edf6;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
transition: all 0.28s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.home-video-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.10);
}
.home-video-img-wrap {
position: relative;
display: block;
overflow: hidden;
background: #0f172a;
}
.home-video-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.home-video-card:hover .home-video-img {
transform: scale(1.05);
}
.home-video-img-wrap::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.28) 100%);
pointer-events: none;
}
.home-video-play-btn {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: none;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
z-index: 2;
}
.video-badge {
position: absolute;
top: 14px;
right: 14px;
z-index: 2;
background: rgba(15, 23, 42, 0.82);
color: #fff;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
}
.home-video-content {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.home-video-card-title {
font-size: 22px;
font-weight: 800;
line-height: 1.45;
margin-bottom: 10px;
min-height: 64px;
}
.home-video-card-title a {
color: #0f172a;
text-decoration: none;
}
.home-video-card-title a:hover {
color: #2446c6;
}
.home-video-card-desc {
color: #64748b;
font-size: 14px;
line-height: 1.8;
min-height: 76px;
margin-bottom: 6px;
}
.home-video-doctor {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
background: #f8fbff;
border: 1px solid #e5edf8;
border-radius: 16px;
padding: 14px;
}
.home-video-doctor-left {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.home-video-avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, #2446c6 0%, #4f74ff 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
flex-shrink: 0;
}
.home-video-doctor-left h6 {
font-size: 15px;
font-weight: 700;
color: #0f172a;
margin: 0 0 2px;
}
.home-video-doctor-left p {
font-size: 13px;
color: #64748b;
margin: 0;
}
.home-video-exp {
background: #e9f0ff;
color: #2446c6;
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.home-video-read-btn {
margin-top: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
color: #2446c6;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.home-video-read-btn:hover {
color: #1e3fae;
}
@media (max-width: 991px) {
.video-category-box {
padding: 22px;
}
.all-video-main-title {
font-size: 32px;
}
.video-category-title {
font-size: 27px;
}
}
@media (max-width: 767px) {
.all-video-page {
padding-top: 20px;
padding-bottom: 40px;
}
.video-category-box {
padding: 18px;
border-radius: 18px;
}
.all-video-main-title {
font-size: 26px;
}
.video-category-title {
font-size: 24px;
}
.home-video-content {
padding: 16px;
}
.home-video-card-title {
font-size: 19px;
min-height: auto;
}
.home-video-card-desc {
min-height: auto;
}
.home-video-doctor,
.home-video-doctor-left {
align-items: flex-start;
}
}
/* doctor- vedio page */
/* doctor- bLOG -DETAILS page */
.doctor-blog-details-page {
background: linear-gradient(180deg, #f7f9ff 0%, #eef4ff 100%);
}
.blog-detail-card,
.blog-sidebar-card,
.related-product-card {
background: #fff;
border-radius: 22px;
border: 1px solid #e8efff;
box-shadow: 0 10px 35px rgba(34, 64, 154, 0.08);
}
.blog-detail-card {
padding: 24px;
}
.blog-category-badge {
display: inline-block;
padding: 8px 14px;
border-radius: 40px;
background: #eef4ff;
color: #2446c6;
font-size: 13px;
font-weight: 700;
margin-bottom: 14px;
}
.blog-detail-title {
font-size: 36px;
font-weight: 800;
color: #111827;
line-height: 1.25;
margin-bottom: 12px;
}
.blog-detail-short {
color: #667085;
font-size: 15px;
line-height: 1.8;
margin-bottom: 16px;
}
.blog-meta-row {
display: flex;
flex-wrap: wrap;
gap: 18px;
color: #667085;
font-size: 14px;
font-weight: 500;
margin-bottom: 22px;
}
.blog-detail-image-wrap {
overflow: hidden;
border-radius: 18px;
margin-bottom: 20px;
}
.blog-detail-main-image {
width: 100%;
height: 430px;
object-fit: cover;
display: block;
border-radius: 18px;
}
.blog-author-mini-box {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border-radius: 16px;
background: #f8faff;
border: 1px solid #e8efff;
margin-bottom: 22px;
}
.blog-author-mini-img {
width: 58px;
height: 58px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.blog-author-mini-info h6 {
font-size: 16px;
font-weight: 700;
color: #111827;
}
.blog-author-mini-info p {
font-size: 13px;
color: #667085;
}
.blog-detail-content h3 {
font-size: 24px;
font-weight: 700;
color: #111827;
margin-top: 24px;
margin-bottom: 12px;
}
.blog-detail-content p {
font-size: 15px;
color: #5f6b7a;
line-height: 1.9;
margin-bottom: 16px;
}
.blog-quote-box {
background: #f4f7ff;
border-left: 4px solid #2446c6;
padding: 18px 20px;
border-radius: 14px;
color: #2446c6;
font-size: 16px;
font-weight: 600;
margin: 22px 0;
}
.blog-detail-list {
padding-left: 20px;
margin-bottom: 0;
}
.blog-detail-list li {
color: #5f6b7a;
line-height: 1.9;
margin-bottom: 8px;
}
.blog-sidebar-card {
padding: 22px;
}
.sidebar-card-title {
font-size: 22px;
font-weight: 800;
color: #111827;
margin-bottom: 18px;
}
.sidebar-doctor-card {
padding-bottom: 6px;
}
.sidebar-doctor-inner {
display: flex;
align-items: center;
gap: 14px;
background: #f8faff;
border: 1px solid #e8efff;
border-radius: 18px;
padding: 16px;
}
.sidebar-doctor-img {
width: 72px;
height: 72px;
border-radius: 16px;
object-fit: cover;
flex-shrink: 0;
}
.sidebar-doctor-inner h5 {
font-size: 17px;
font-weight: 700;
color: #111827;
}
.sidebar-doctor-inner p {
font-size: 14px;
color: #667085;
}
.sidebar-exp-badge {
display: inline-block;
background: #edf4ff;
color: #2446c6;
padding: 7px 12px;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
}
.blog-sidebar-card.sticky-top {
top: 90px;
}
.related-blog-item {
display: flex;
gap: 12px;
align-items: center;
text-decoration: none;
padding: 12px 0;
border-bottom: 1px dashed #e3eaf8;
}
.related-blog-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.related-blog-img {
width: 82px;
height: 82px;
object-fit: cover;
border-radius: 14px;
flex-shrink: 0;
}
.related-blog-text h6 {
font-size: 15px;
font-weight: 700;
color: #111827;
line-height: 1.5;
margin-bottom: 6px;
}
.related-blog-text span {
font-size: 13px;
color: #2446c6;
font-weight: 600;
}
.related-products-wrap .section-title-wrap h3 {
font-size: 28px;
font-weight: 800;
color: #111827;
display: flex;
align-items: center;
}
.related-products-wrap .section-title-wrap h3 i {
color: #2446c6;
}
.related-product-card {
overflow: hidden;
transition: 0.3s ease;
height: 100%;
}
.related-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(34, 64, 154, 0.12);
}
.related-product-img-wrap {
display: block;
overflow: hidden;
}
.related-product-img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
.related-product-content {
padding: 16px;
text-align: center;
}
.related-product-content h5 {
font-size: 18px;
font-weight: 700;
color: #111827;
margin-bottom: 8px;
}
.related-product-price {
color: #2446c6;
font-size: 18px;
font-weight: 800;
margin-bottom: 14px;
}
.related-product-btn {
display: inline-block;
padding: 10px 16px;
border-radius: 12px;
background: linear-gradient(135deg, #2446c6 0%, #3a63ff 100%);
color: #fff;
text-decoration: none;
font-size: 14px;
font-weight: 700;
}
.related-product-btn:hover {
color: #fff;
}
@media (max-width: 991px) {
.blog-sidebar-card.sticky-top {
position: relative !important;
top: 0 !important;
}
.blog-detail-title {
font-size: 30px;
}
}
@media (max-width: 767px) {
.blog-detail-card,
.blog-sidebar-card {
padding: 18px;
border-radius: 18px;
}
.blog-detail-title {
font-size: 24px;
}
.blog-detail-main-image {
height: 250px;
}
.related-blog-img {
width: 70px;
height: 70px;
}
.sidebar-doctor-inner {
align-items: flex-start;
}
}
/* doctor- bLOG -DETAILS page */
/* blog page */
.doctor-blog-page {
background: linear-gradient(180deg, #f7f9ff 0%, #eef4ff 100%);
}
.blog-top-head {
max-width: 760px;
margin: 0 auto;
}
.blog-mini-badge {
display: inline-block;
padding: 8px 14px;
border-radius: 40px;
background: #eef4ff;
color: #2446c6;
font-size: 13px;
font-weight: 700;
margin-bottom: 12px;
}
.blog-main-title {
font-size: 38px;
font-weight: 800;
color: #111827;
margin-bottom: 10px;
}
.blog-main-subtitle {
color: #667085;
font-size: 15px;
line-height: 1.8;
margin-bottom: 0;
}
.doctor-blog-card {
background: #fff;
border-radius: 22px;
overflow: hidden;
border: 1px solid #e9efff;
box-shadow: 0 10px 35px rgba(34, 64, 154, 0.08);
transition: 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.doctor-blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(34, 64, 154, 0.12);
}
.doctor-blog-image-wrap {
display: block;
overflow: hidden;
}
.doctor-blog-image {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
}
.doctor-blog-content {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.doctor-blog-title {
font-size: 20px;
font-weight: 700;
line-height: 1.5;
margin-bottom: 10px;
}
.doctor-blog-title a {
color: #111827;
text-decoration: none;
}
.doctor-blog-title a:hover {
color: #2446c6;
}
.doctor-blog-desc {
color: #667085;
font-size: 14px;
line-height: 1.8;
margin-bottom: 6px;
min-height: 75px;
}
.doctor-blog-doctor-box {
margin-top: auto;
padding: 14px;
border-radius: 16px;
background: #f8faff;
border: 1px solid #e8efff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.doctor-blog-doctor-left {
display: flex;
align-items: center;
gap: 12px;
}
.doctor-blog-doctor-avatar {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #2446c6 0%, #4f74ff 100%);
color: #fff;
font-weight: 700;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.doctor-blog-doctor-left h6 {
font-size: 15px;
font-weight: 700;
color: #111827;
}
.doctor-blog-doctor-left p {
font-size: 13px;
color: #667085;
}
.doctor-blog-exp {
background: #edf4ff;
color: #2446c6;
padding: 8px 12px;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.doctor-blog-readmore {
margin-top: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
color: #2446c6;
text-decoration: none;
font-weight: 700;
font-size: 14px;
}
.doctor-blog-readmore:hover {
color: #1e38a8;
}
@media (max-width: 767px) {
.blog-main-title {
font-size: 28px;
}
.doctor-blog-image {
height: 220px;
}
.doctor-blog-desc {
min-height: auto;
}
.doctor-blog-content {
padding: 16px;
}
}
/* blog page */
/* ===========================profile page ======================================= */
.doctor-profile-page {
background: linear-gradient(180deg, #f7f8fc 0%, #eef4ff 100%);
}
.doctor-breadcrumb {
font-size: 14px;
color: #6b7280;
}
.doctor-breadcrumb a {
color: #1f2937;
text-decoration: none;
font-weight: 500;
}
.doctor-breadcrumb span {
margin: 0 6px;
}
.doctor-hero-card,
.doctor-content-card,
.doctor-sidebar-card,
.doctor-nav-card {
background: #fff;
border-radius: 22px;
padding: 24px;
border: 1px solid #edf2ff;
box-shadow: 0 10px 35px rgba(34, 64, 154, 0.08);
}
.doctor-hero-card {
overflow: hidden;
position: relative;
}
.doctor-hero-card::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 180px;
height: 180px;
background: radial-gradient(circle, rgba(36, 70, 198, 0.10) 0%, rgba(36, 70, 198, 0) 70%);
pointer-events: none;
}
.doctor-image-box {
background: linear-gradient(180deg, #f5f8ff 0%, #edf3ff 100%);
border-radius: 20px;
padding: 18px;
border: 1px solid #e6eeff;
}
.doctor-profile-img {
width: 100%;
max-width: 250px;
height: 280px;
object-fit: cover;
border-radius: 18px;
}
.doctor-top-badge-wrap {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 14px;
}
.doctor-status-badge,
.doctor-like-badge {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 40px;
font-size: 13px;
font-weight: 600;
}
.doctor-status-badge {
background: #e9fff1;
color: #179a4d;
}
.doctor-like-badge {
background: #fff3f4;
color: #e14b61;
}
.doctor-name {
font-size: 34px;
font-weight: 800;
color: #111827;
line-height: 1.2;
}
.doctor-subtitle {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
color: #6b7280;
font-size: 15px;
font-weight: 500;
}
.doctor-subtitle .dot {
width: 5px;
height: 5px;
background: #b7c0d4;
border-radius: 50%;
}
.doctor-meta-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.doctor-meta-pill {
background: #f3f7ff;
color: #2446c6;
padding: 9px 15px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
border: 1px solid #e5ecff;
}
.doctor-short-about {
color: #5f6b7a;
font-size: 15px;
line-height: 1.8;
}
.doctor-highlights {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.highlight-item {
background: #f8faff;
border: 1px solid #e8efff;
border-radius: 14px;
padding: 10px 14px;
display: inline-flex;
align-items: center;
gap: 8px;
color: #334155;
font-size: 14px;
font-weight: 600;
}
.highlight-item i {
color: #2446c6;
}
.doctor-action-btns {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.doctor-btn-primary {
background: linear-gradient(135deg, #2446c6 0%, #3a63ff 100%);
color: #fff;
border: none;
border-radius: 12px;
padding: 12px 22px;
font-weight: 600;
box-shadow: 0 10px 20px rgba(36, 70, 198, 0.18);
}
.doctor-btn-primary:hover {
color: #fff;
transform: translateY(-1px);
}
.doctor-btn-outline {
background: #fff;
color: #2446c6;
border: 1px solid #cfdcff;
border-radius: 12px;
padding: 12px 22px;
font-weight: 600;
}
.doctor-btn-outline:hover {
background: #f3f7ff;
color: #2446c6;
}
.doctor-section-nav {
list-style: none;
display: flex;
gap: 12px;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.doctor-section-nav li a {
display: inline-block;
background: #f7f9ff;
color: #334155;
padding: 10px 16px;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
border: 1px solid #e5ecff;
transition: 0.3s ease;
}
.doctor-section-nav li a:hover {
background: #2446c6;
color: #fff;
border-color: #2446c6;
}
.section-title-wrap {
margin-bottom: 18px;
}
.section-title-wrap h3 {
margin: 0;
font-size: 23px;
font-weight: 700;
color: #111827;
display: flex;
align-items: center;
}
.section-title-wrap h3 i {
color: #2446c6;
}
.doctor-content-card p {
color: #5f6b7a;
font-size: 15px;
line-height: 1.9;
}
.clinic-box {
background: #fbfcff;
border: 1px solid #e9efff;
border-radius: 18px;
padding: 18px;
}
.clinic-name-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.clinic-name-row h5 {
font-size: 18px;
font-weight: 700;
color: #111827;
}
.clinic-sub-text {
color: #6b7280;
font-size: 14px;
}
.clinic-tag {
background: #ebfff2;
color: #16974b;
padding: 7px 14px;
border-radius: 50px;
font-size: 13px;
font-weight: 600;
}
.doctor-timing-table thead th {
background: #f4f7ff;
color: #1f2937;
font-weight: 700;
border: none;
padding: 14px;
}
.doctor-timing-table tbody td {
border-color: #edf2ff;
padding: 14px;
color: #475569;
font-weight: 500;
}
.day-badge {
background: #f3f7ff;
color: #2446c6;
padding: 7px 12px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
}
.doctor-tag-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.doctor-tag {
background: linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
color: #2446c6;
padding: 10px 15px;
border-radius: 40px;
font-size: 14px;
font-weight: 600;
border: 1px solid #dde7ff;
}
.doctor-list-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid #eef2fb;
}
.doctor-list-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.doctor-list-left {
display: flex;
align-items: center;
gap: 14px;
}
.list-icon {
width: 46px;
height: 46px;
border-radius: 14px;
background: #f3f7ff;
color: #2446c6;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.doctor-list-item h5 {
font-size: 17px;
font-weight: 700;
color: #111827;
}
.doctor-list-item p {
color: #6b7280;
margin: 0;
}
.doctor-year {
background: #f8faff;
color: #2446c6;
padding: 9px 14px;
border-radius: 12px;
font-size: 13px;
font-weight: 700;
border: 1px solid #e2eaff;
white-space: nowrap;
}
.sidebar-title {
font-size: 24px;
font-weight: 800;
color: #111827;
}
.sidebar-top-box {
padding-bottom: 18px;
border-bottom: 1px solid #edf2ff;
}
.fee-box,
.plus-fee-box {
background: #f8faff;
border-radius: 16px;
padding: 18px;
border: 1px solid #e8efff;
}
.fee-row,
.plus-price-row,
.sidebar-info-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.fee-row span,
.sidebar-info-item span {
color: #6b7280;
font-size: 14px;
}
.fee-row strong,
.sidebar-info-item strong {
color: #111827;
font-weight: 700;
}
.plus-title {
color: #6b7280;
font-size: 14px;
margin-bottom: 10px;
font-weight: 500;
}
.plus-price {
font-size: 24px;
color: #2446c6;
}
.old-price {
color: #9aa4b2;
text-decoration: line-through;
}
.discount-badge {
background: #ebfff2;
color: #16974b;
padding: 6px 10px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
}
.doctor-sidebar-info {
display: flex;
flex-direction: column;
gap: 6px;
}
.sidebar-info-item {
padding: 10px 0;
border-bottom: 1px dashed #e4eaf7;
}
.sidebar-info-item:last-child {
border-bottom: none;
}
.doctor-sidebar-card.sticky-top {
top: 90px;
}
.doctor-faq-accordion .accordion-item {
border: 1px solid #e8efff;
border-radius: 16px;
margin-bottom: 14px;
overflow: hidden;
box-shadow: none;
}
.doctor-faq-accordion .accordion-button {
font-weight: 600;
color: #1f2937;
padding: 18px;
box-shadow: none !important;
}
.doctor-faq-accordion .accordion-button:not(.collapsed) {
background: #f4f7ff;
color: #2446c6;
}
.doctor-faq-accordion .accordion-body {
color: #5f6b7a;
line-height: 1.8;
padding: 18px;
}
@media (max-width: 991px) {
.doctor-sidebar-card.sticky-top {
position: relative !important;
top: 0 !important;
}
.doctor-name {
font-size: 28px;
}
}
@media (max-width: 767px) {
.doctor-hero-card,
.doctor-content-card,
.doctor-sidebar-card,
.doctor-nav-card {
padding: 18px;
border-radius: 18px;
}
.doctor-profile-img {
height: 230px;
}
.doctor-list-item,
.fee-row,
.plus-price-row,
.sidebar-info-item {
flex-direction: column;
align-items: flex-start;
}
.doctor-list-left {
align-items: flex-start;
}
.doctor-action-btns .btn {
width: 100%;
}
}
/* =================================profile page =========================== */
/* ==========================header ===================== */
.health-link .link-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #e8f3ff, #f3f8ff);
color: #0d6efd;
font-size: 14px;
flex-shrink: 0;
}
/* main nav link */
.health-link {
display: inline-block;
text-decoration: none;
/* color: #183b56; */
font-size: 16px;
font-weight: 500;
padding: 12px 14px;
position: relative;
transition: 0.3s ease;
}
.health-link:hover {
color: #0d6efd;
}
.health-link::after {
content: "";
position: absolute;
left: 14px;
bottom: 4px;
width: calc(100% - 28px);
height: 1.5px;
/* background: #183b56; */
opacity: 0.8;
}
/* mega menu */
.clean-health-menu {
position: absolute;
top: calc(100% + 1px);
left: 50%;
transform: translateX(-50%) translateY(12px);
width: 950px;
background: #fff;
border: 1px solid #e8edf3;
border-radius: 0px;
padding: 8px 24px;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
opacity: 0;
visibility: hidden;
transition: all 0.28s ease;
z-index: 999;
}
/* hover gap cover */
.clean-health-menu::before {
content: "";
position: absolute;
top: -16px;
left: 0;
width: 100%;
height: 16px;
}
/* show menu */
.mega-parent:hover .clean-health-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* grid */
.clean-health-menu .mega-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
/* columns */
.clean-health-menu .mega-column {
padding: 0 10px;
}
.clean-health-menu .mega-column:not(:last-child) {
border-right: 1px solid #eef2f6;
}
/* headings */
.clean-health-menu .mega-column h6 {
margin: 0 0 16px;
font-size: 20px;
font-weight: 600;
color: #1e293b;
line-height: 1.2;
}
/* list */
.clean-health-menu .mega-column ul {
list-style: none;
margin: 0;
padding: 0;
}
.clean-health-menu .mega-column ul li {
margin-bottom: 1px;
}
/* links */
.clean-health-menu .mega-column ul li a {
display: block;
text-decoration: none;
font-size: 16px;
color: #64748b;
padding: 6px 0;
line-height: 1.5;
transition: all 0.25s ease;
}
.clean-health-menu .mega-column ul li a:hover {
color: #0d6efd;
transform: translateX(4px);
}
/* responsive */
@media (max-width: 991px) {
.clean-health-menu {
width: 95vw;
padding: 20px 16px;
}
.clean-health-menu .mega-container {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.clean-health-menu .mega-column {
padding: 0 8px;
border-right: none !important;
}
}
@media (max-width: 575px) {
.clean-health-menu {
width: 95vw;
left: 50%;
}
.clean-health-menu .mega-container {
grid-template-columns: 1fr;
}
.clean-health-menu .mega-column h6 {
font-size: 18px;
}
.clean-health-menu .mega-column ul li a {
font-size: 15px;
}
}
/* .clean-health-menu .mega-column {
padding: 0 8px;
} */
/* ==========================header ===================== */