/* =========================================
GLOBAL
========================================= */

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

body{
font-family:'Inter',sans-serif;
background:#faf8f5;
color:#222;
overflow-x:hidden;
}

/* =========================================
TOP BAR
========================================= */

.top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background: #2F6B63;
    color:#fff;
    padding:10px 25px;
    overflow:hidden;
}

.top-left{
    flex:1;
    overflow:hidden;
}

.marquee{
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}

.marquee-content{
    display:inline-block;
    white-space:nowrap;
    padding-left:100%;
    animation:scrollText 25s linear infinite;
    font-size:14px;
    font-weight:500;
}

@keyframes scrollText{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-100%);
    }
}

.top-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.clinic-btn{
    background:#fff;
    color: #2F6B63;
    text-decoration:none;
    padding:8px 16px;
    border-radius:30px;
    font-weight:600;
    transition:.3s;
}

.clinic-btn:hover{
    background:#f3f3f3;
}

.privacy{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
}

/* =========================================
NAVBAR
========================================= */

nav{
position:fixed;
top:52px;
left:0;
width:100%;
height:82px;
background:rgba(255,255,255,0.96);
backdrop-filter:blur(12px);
display:flex;
justify-content:space-between;
align-items:center;
padding:0 6%;
z-index:1500;
border-bottom:1px solid rgba(0,0,0,0.05);
}

/* LOGO */

.logo{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:inherit;
}

.logo-circle{
width:44px;
height:44px;
border-radius:50%;
background:#d36b4b;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:17px;
}

.logo h1{
font-size:30px;
font-family:'Cormorant Garamond',serif;
font-weight:700;
color:#222;
}

/* NAV LINKS */

.nav-links{
display:flex;
align-items:center;
gap:20px;
}

.nav-links a{
text-decoration:none;
font-size:15px;
color:#555;
font-weight:500;
transition:0.3s;
}

.nav-links a:hover{
color:#d36b4b;
}

/* AUTH BUTTONS */

.auth-buttons{
display:flex;
align-items:center;
gap:14px;
}

.login-btn,
.signup-btn,
.logout-btn{
padding:12px 24px;
border-radius:40px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:0.3s;
border:none;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
}

.login-btn{
background:#f1f1f1;
color:#333;
}

.signup-btn{
background:#d36b4b;
color:white;
}

.logout-btn{
background:#c62828;
color:white;
}

.login-btn:hover,
.signup-btn:hover,
.logout-btn:hover{
transform:translateY(-2px);
}

/* BURGER MENU */

.menu-toggle{
display:none;
width:44px;
height:44px;
border-radius:12px;
justify-content:center;
align-items:center;
cursor:pointer;
font-size:22px;
color:#222;
transition:0.3s;
}

.menu-toggle:hover{
background:#f2f2f2;
}

/* =========================================
USER MENU WRAPPER
========================================= */

.user-menu{
position: relative;
display: inline-block;
}

/* =========================================
USER PROFILE BUTTON
========================================= */

.user-profile{
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
padding: 8px 14px;
border-radius: 10px;
background: #ffffff;
transition: 0.3s;
}

.user-profile:hover{
background: #f5f5f5;
}

/* =========================================
USER AVATAR
========================================= */

.user-avatar{
width: 36px;
height: 36px;
border-radius: 50%;
background: #0f172a;
color: white;
display: flex;
align-items: center;
justify-content: center;
}

/* =========================================
DROPDOWN BOX
========================================= */

.user-dropdown{
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 220px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
overflow: hidden;
z-index: 9999;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: 0.25s ease;
}

/* =========================================
ACTIVE DROPDOWN
========================================= */

.user-dropdown.active{
opacity: 1;
visibility: visible;
transform: translateY(0);
}

/* =========================================
DROPDOWN LINKS
========================================= */

.user-dropdown a,
.user-dropdown button{
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 16px;
background: transparent;
border: none;
text-decoration: none;
color: #333;
font-size: 14px;
cursor: pointer;
transition: 0.2s;
}

/* =========================================
HOVER EFFECT
========================================= */

.user-dropdown a:hover,
.user-dropdown button:hover{
background: #f5f5f5;
}

/* =========================================
FLOATING BUTTONS
========================================= */

.floating{
position:fixed;
right:20px;
bottom:20px;
display:flex;
flex-direction:column;
gap:12px;
z-index:2500;
}

.floating a{
width:48px;
height:48px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:20px;
box-shadow:0 6px 18px rgba(0,0,0,0.15);
transition:all 0.3s ease;
}

.whatsapp{
background:#25D366;
color:#fff;
}

.chatbot{
background:#2f4e5d;
color:#fff;
}

.floating a:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

/* =========================================
FLOATING AUTH ICONS
========================================= */

.floating-auth{
position:fixed;
bottom:160px;
right:18px;
display:none;
flex-direction:column;
gap:12px;
z-index:3000;
}

.fab{
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:18px;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
transition:0.3s;
background:#fff;
color:#333;
}

.fab.login{
color:#2f6b63;
}

.fab.signup{
color:#d36b4b;
}

.fab.logout{
color:#c62828;
}

.fab:hover{
transform:translateY(-4px) scale(1.05);
}

/* =========================================
FOOTER
========================================= */

footer{
background:#163d3d;
padding:55px 20px;
text-align:center;
color:white;
font-size:15px;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1100px){

.top-bar{
padding:0 18px;
}

.top-left{
font-size:12px;
}

.top-right{
gap:10px;
}

.clinic-btn{
padding:8px 14px;
font-size:12px;
}

.privacy{
font-size:12px;
}

nav{
top:52px;
height:82px;
padding:0 5%;
}

.menu-toggle{
display:flex;
}

.auth-buttons{
display:flex;
}

.floating-auth{
display:flex;
}

.nav-links{
position:absolute;
top:82px;
left:0;
width:100%;
background:white;
display:none;
flex-direction:column;
align-items:flex-start;
padding:28px 5%;
gap:22px;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
border-top:1px solid rgba(0,0,0,0.05);
}

.nav-links.active{
display:flex;
}

}

@media(max-width:768px){

.top-bar{
height:auto;
padding:10px 14px;
flex-direction:column;
gap:10px;
align-items:flex-start;
}

nav{
top:88px;
}

.logo h1{
font-size:26px;
}

}

.mobile-auth{
display:none;
}

/* =========================================
VIRTUAL CONSULT SECTION
========================================= */

.virtual-consult-section{
width:100%;
background:#faf8f5;
padding:170px 5% 80px;
font-family:'Inter',sans-serif;
}

/* =========================================
MAIN GRID LAYOUT
========================================= */

.consult-container{
width:100%;
max-width:1280px;
margin:0 auto;
display:grid;
grid-template-columns:minmax(0, 1fr) 320px;
gap:48px;
align-items:start;
}

.consult-main{
width:100%;
max-width:820px;
min-width:0;
}

.sub-tag{
display:inline-block;
font-size:10px;
letter-spacing:3px;
font-weight:700;
text-transform:uppercase;
color:#6b8a99;
border-bottom:1px solid #d8d2ca;
padding-bottom:5px;
margin-bottom:18px;
}

.consult-title{
font-family:'Cormorant Garamond',serif;
font-size:52px;
line-height:1.08;
font-weight:600;
color:#1f1f1f;
margin-bottom:18px;
max-width:760px;
}

.accent-text{
color:#c95a3d;
font-style:italic;
}

.fee-info{
font-size:15px;
line-height:1.7;
color:#666;
margin-bottom:34px;
}

/* =========================================
FORM BOX
========================================= */

.consult-form-box{
width:100%;
background:#fff;
border-radius:26px;
padding:30px;
border:1px solid rgba(0,0,0,0.05);
box-shadow:0 10px 30px rgba(0,0,0,0.04);
}

.step-label,
.step-header{
display:inline-block;
font-size:10px;
letter-spacing:2px;
font-weight:700;
text-transform:uppercase;
color:#6b8a99;
margin-bottom:14px;
padding-bottom:5px;
border-bottom:1px solid #ddd5cc;
}

.form-group{
margin-top:28px;
}

/* =========================================
DOCTOR CARDS
========================================= */

.doctor-toggle-group{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:10px;
}

.doctor-card{
background:#fff;
border:1.5px solid #e5ddd5;
border-radius:20px;
padding:22px;
display:flex;
align-items:flex-start;
gap:14px;
cursor:pointer;
transition:0.3s ease;
}

.doctor-card:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.05);
}

.doctor-card.active{
border-color:#c95a3d;
background:#fffaf7;
}

.doc-icon{
width:48px;
height:48px;
border-radius:14px;
background:#f3eee8;
display:flex;
align-items:center;
justify-content:center;
color:#c95a3d;
font-size:16px;
flex-shrink:0;
}

.doc-details strong{
display:block;
font-size:15px;
font-weight:600;
margin-bottom:4px;
color:#222;
}

.doc-details small{
display:block;
font-size:10px;
letter-spacing:1px;
font-weight:700;
color:#999;
margin-bottom:8px;
}

.doc-details p{
font-size:12px;
line-height:1.6;
color:#666;
margin-bottom:10px;
}

.doc-details .price{
font-size:14px;
font-weight:700;
color:#c95a3d;
}

/* =========================================
INPUTS
========================================= */

.partner-select,
.input-wrapper input,
.input-wrapper select,
.textarea-wrapper textarea{
width:100%;
padding:15px 16px;
border-radius:14px;
border:1px solid #ddd;
background:#fff;
font-size:13px;
outline:none;
transition:0.3s;
}

.partner-select:focus,
.input-wrapper input:focus,
.input-wrapper select:focus,
.textarea-wrapper textarea:focus{
border-color:#c95a3d;
box-shadow:0 0 0 4px rgba(201,90,61,0.08);
}

/* =========================================
GRID
========================================= */

.schedule-grid{
display:grid;
grid-template-columns:1fr 1fr auto;
gap:14px;
align-items:center;
}

.slot-tag{
min-height:54px;
padding:0 18px;
border-radius:14px;
background:#f3efe8;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
white-space:nowrap;
font-size:12px;
color:#666;
}

.textarea-wrapper textarea{
min-height:120px;
resize:none;
}

.consent-wrapper{
display:flex;
align-items:flex-start;
gap:10px;
margin:28px 0 24px;
}

.consent-wrapper label{
font-size:12px;
line-height:1.7;
color:#666;
}

.btn-login-book{
width:100%;
height:54px;
border:none;
border-radius:999px;
background:#c95a3d;
color:#fff;
font-size:14px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
cursor:pointer;
transition:0.3s ease;
}

.btn-login-book:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(201,90,61,0.2);
}

/* =========================================
SIDEBAR
========================================= */

.why-virtual-card{
width:100%;
background:#2f5558;
color:#fff;
border-radius:28px;
padding:30px;
}

.dashboard-card{
margin-top:24px;
background:#fff;
border-radius:28px;
padding:26px;
border:1px solid rgba(0,0,0,0.05);
box-shadow:0 10px 30px rgba(0,0,0,0.04);
}

.why-virtual-card h4{
font-size:10px;
letter-spacing:3px;
text-transform:uppercase;
color:#8eb0bc;
margin-bottom:26px;
}

.why-virtual-card ul{
list-style:none;
padding:0;
margin:0;
}

.why-virtual-card li{
display:flex;
gap:12px;
font-size:13px;
line-height:1.8;
margin-bottom:18px;
}

.why-virtual-card li:last-child{
margin-bottom:0;
}

.why-virtual-card i{
color:#f1a17e;
margin-top:5px;
flex-shrink:0;
}

/* =========================================
CONSULT ITEMS
========================================= */

.consult-item{
background-color:#f2eee8;
border-radius:18px;
padding:18px 22px;
margin-bottom:12px;
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
}

.consult-item.expanded{
align-items:flex-start;
}

.consult-info h4{
font-size:15px;
color:#1a1a1a;
margin:0 0 6px 0;
font-weight:600;
}

.consult-info .meta-row{
font-size:12px;
color:#777;
display:flex;
gap:12px;
flex-wrap:wrap;
}

.btn-pay{
background-color:#fce8e3;
color:#c95a3d;
border:none;
padding:8px 18px;
border-radius:10px;
font-weight:700;
font-size:13px;
cursor:pointer;
}

.action-stack{
display:flex;
flex-direction:column;
gap:6px;
align-items:flex-end;
}

.btn-join,
.btn-whatsapp-small,
.btn-invoice-small{
border:none;
cursor:pointer;
}

.btn-join{
background:#2f4547;
color:#fff;
padding:9px 15px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

.btn-whatsapp-small{
background:#2ecc71;
color:#fff;
padding:9px 15px;
border-radius:20px;
font-size:12px;
width:100%;
}

.btn-invoice-small{
background:#e8f3f0;
color:#4a6b61;
padding:6px 15px;
border-radius:20px;
font-size:11px;
}

/* =========================================
FOOTER REPLICA
========================================= */

.vax-footer{
background-color:#f2eee8;
padding:50px 10% 40px 10%;
color:#444;
font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:40px;
}

.footer-brand{
max-width:380px;
}

.footer-logo{
display:flex;
align-items:center;
gap:12px;
margin-bottom:15px;
}

.logo-icon{
background-color:#c95a3d;
color:white;
width:32px;
height:32px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
transform:rotate(-45deg);
}

.logo-text{
font-family:'Georgia',serif;
font-size:24px;
color:#1a1a1a;
}

.footer-brand p{
font-size:14px;
line-height:1.5;
color:#666;
}

.footer-nav-group h4{
font-size:11px;
letter-spacing:2px;
color:#6b8a99;
text-transform:uppercase;
margin-bottom:15px;
border-bottom:1px solid #dcd6ce;
display:inline-block;
padding-bottom:4px;
}

.footer-links{
list-style:none;
padding:0;
}

.footer-links li{
margin-bottom:8px;
}

.footer-links a{
text-decoration:none;
color:#555;
font-size:13.5px;
transition:color 0.2s;
}

.footer-links a:hover{
color:#c95a3d;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px; /* Reduced from 15px */
    font-size: 13.5px;
    color: #555;
}

.contact-item i {
    font-size: 15px;
    color: #888;
}

.contact-item a {
    text-decoration: underline;
    color: #555;
    text-decoration-color: #ccc;
}

.contact-item {
    display: flex;
    align-items: flex-start; /* Align icon to top */
    gap: 12px;
    margin-bottom: 12px;
    font-size: 13.5px;
    color: #555;
    line-height: 1.6;
}

.contact-item i {
    font-size: 15px;
    color: #888;
    min-width: 18px; /* Keeps icons aligned */
    margin-top: 3px;
}

.contact-item a,
.contact-item span {
    flex: 1;
    color: #555;
    word-break: break-word;
}

.contact-item a {
    text-decoration: underline;
    text-decoration-color: #ccc;
}


/* =========================================
BUG FIX 1
DATE + TIME INPUTS
========================================= */

.datePicker,
.timePicker{
width:100%;
}

/* =========================================
BUG FIX 2
ALERT INFO BOX
========================================= */

.alert-info-box{

margin-top:14px;

background:#f8f4ef;

border:1px solid #e7ddd3;

padding:16px 18px;

border-radius:16px;

font-size:13px;

color:#666;

line-height:1.7;
}

.alert-info-box a{

color:#c95a3d;

text-decoration:none;

font-weight:600;
}

/* =========================================
BUG FIX 3
TEXTAREA HANDLE SAFE
========================================= */

.resize-handle{
display:none;
}

/* =========================================================
FINAL PREMIUM PAYMENT POPUP CSS
ONLY KEEP THIS CSS
DELETE ALL OLD PAYMENT CSS
========================================================= */

/* OVERLAY */

.payment-popup-overlay{

position:fixed;
inset:0;

background:rgba(0,0,0,0.65);

display:none;

justify-content:center;
align-items:center;

padding:20px;

z-index:99999;

backdrop-filter:blur(8px);
}

.payment-popup-overlay.active{
display:flex;
}

/* MAIN POPUP */

.payment-popup{

width:100%;
max-width:980px;

background:#f8f6f2;

border-radius:34px;

padding:34px;

position:relative;

animation:popupFade 0.35s ease;

max-height:95vh;

overflow-y:auto;
}

@keyframes popupFade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}
}

/* CLOSE BUTTON */

.payment-close{

position:absolute;

top:20px;
right:20px;

width:42px;
height:42px;

border:none;

border-radius:50%;

background:#ffffff;

cursor:pointer;

font-size:16px;

display:flex;
align-items:center;
justify-content:center;

box-shadow:0 4px 12px rgba(0,0,0,0.08);

transition:0.3s;
}

.payment-close:hover{
transform:rotate(90deg);
}

/* HEADER */

.payment-header{

margin-bottom:34px;
}

.payment-tag{

display:inline-block;

font-size:10px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

color:#6b8a99;

border-bottom:1px solid #ddd;

padding-bottom:6px;

margin-bottom:18px;
}

.payment-header h2{

font-size:44px;

font-family:'Cormorant Garamond',serif;

font-weight:600;

color:#222;

margin-bottom:10px;
}

.payment-header p{

font-size:15px;

color:#666;
}

/* TABS */

.payment-tabs{

display:flex;

gap:14px;

margin-bottom:34px;
}

.payment-tab{

flex:1;

height:58px;

border:none;

border-radius:18px;

background:#ece8e2;

cursor:pointer;

font-size:15px;
font-weight:600;

display:flex;

align-items:center;
justify-content:center;

gap:10px;

transition:0.3s;
}

.payment-tab.active{

background:#c95a3d;

color:#fff;
}

/* CONTENT */

.payment-content{
display:none;
}

.payment-content.active{
display:block;
}

/* =========================================================
SPLIT LAYOUT
========================================================= */

.split-payment-layout{

display:grid;

grid-template-columns:420px 1fr;

gap:42px;

align-items:start;
}

/* LEFT */

.payment-left-side{

display:flex;
flex-direction:column;

gap:24px;
}

/* STEP TITLE */

.payment-step-title{

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

color:#7a97a6;
}

/* QR CARD */

.qr-payment-card{

background:#fff;

border:1px solid #e7ddd3;

border-radius:28px;

padding:28px;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;
}

/* QR BOX */

.qr-box{

width:300px;
height:300px;

background:#fafafa;

border:1px solid #e5ddd5;

border-radius:24px;

display:flex;

align-items:center;
justify-content:center;

padding:14px;

margin-bottom:22px;
}

.qr-box img{

width:100%;
height:100%;

object-fit:contain;

border-radius:18px;
}

/* MERCHANT */

.merchant-label{

font-size:12px;

letter-spacing:4px;

font-weight:700;

color:#7a97a6;

margin-bottom:12px;
}

.merchant-name{

font-size:20px;

font-family:'Cormorant Garamond',serif;

color:#222;

margin-bottom:24px;
}

/* UPI BAR */

.upi-box{

width:100%;

height:58px;

border:1px solid #ddd;

border-radius:999px;

padding:0 20px;

display:flex;

align-items:center;
justify-content:space-between;

background:#fff;

margin-bottom:12px;
}

.upi-box span{

font-size:18px;

font-weight:500;
}

.upi-box button{

border:none;
background:none;

cursor:pointer;

font-size:18px;
}

/* PAYMENT APPS */

.payment-apps{

font-size:14px;

color:#777;
}

/* INSTRUCTIONS */

.payment-instructions{

padding-left:20px;

display:flex;

flex-direction:column;

gap:10px;

font-size:15px;

line-height:1.7;

color:#555;
}

/* =========================================================
RIGHT SIDE
========================================================= */

.payment-right-side{

display:flex;
flex-direction:column;

gap:22px;
}

/* CONFIRM BOX */

.submit-confirm-box{

display:flex;

flex-direction:column;

gap:24px;
}

/* TITLE */

.confirm-title{

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

color:#7a97a6;
}

/* FIELD */

.payment-field{

display:flex;

flex-direction:column;

gap:10px;
}

.payment-field label{

font-size:16px;

font-weight:600;

color:#222;
}

/* INPUT */

.payment-field input,
.payment-field select{

width:100%;

height:62px;

border:1px solid #ddd;

border-radius:18px;

padding:0 22px;

font-size:16px;

background:#fff;

outline:none;

transition:0.3s;
}

.payment-field input:focus,
.payment-field select:focus{

border-color:#c95a3d;

box-shadow:
0 0 0 4px rgba(201,90,61,0.08);
}

/* UPLOAD */

.upload-box{

width:100%;

min-height:170px;

border:2px dashed #d8cec4;

border-radius:24px;

background:#fff;

display:flex;

flex-direction:column;

align-items:center;
justify-content:center;

text-align:center;

gap:10px;

cursor:pointer;

padding:20px;

transition:0.3s;
}

.upload-box:hover{

border-color:#c95a3d;

background:#fffaf7;
}

.upload-box i{

font-size:34px;

color:#c95a3d;
}

.upload-box strong{

font-size:18px;

font-weight:600;

color:#333;
}

.upload-box span{

font-size:14px;

color:#888;
}

/* SUBMIT BUTTON */

.submit-payment-btn{

width:100%;

height:68px;

border:none;

border-radius:999px;

background:#c95a3d;

color:#fff;

font-size:22px;

font-weight:700;

cursor:pointer;

transition:0.3s;
}

.submit-payment-btn:hover{

transform:translateY(-2px);

box-shadow:
0 14px 24px rgba(201,90,61,0.22);
}

/* SECURITY BADGES */

.payment-security-badges{

display:flex;

flex-wrap:wrap;

gap:12px;

justify-content:center;
}

.payment-security-badges span{

padding:12px 18px;

border-radius:999px;

background:#ececec;

font-size:14px;

color:#355;
}

/* =========================================================
CARD PREVIEW
========================================================= */

.card-preview-box{

width:100%;

height:260px;

border-radius:30px;

padding:30px;

background:linear-gradient(
135deg,
#111,
#2d2d2d,
#444
);

display:flex;

flex-direction:column;

justify-content:space-between;

color:#fff;

box-shadow:
0 20px 40px rgba(0,0,0,0.22);
}

.card-chip{

width:70px;
height:50px;

border-radius:12px;

background:linear-gradient(
135deg,
#d4af37,
#f5d06f
);
}

.card-number{

font-size:28px;

letter-spacing:4px;

font-weight:600;
}

.card-bottom{

display:flex;

justify-content:space-between;

font-size:16px;
}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:900px){

.payment-popup{

padding:22px;
}

.split-payment-layout{

grid-template-columns:1fr;

gap:34px;
}

.qr-box{

width:100%;
height:auto;

aspect-ratio:1/1;
}

.payment-header h2{

font-size:34px;
}

.submit-payment-btn{

height:60px;

font-size:18px;
}

.payment-tabs{

flex-direction:column;
}
}

@media(max-width:600px){

.payment-popup{

padding:18px;

border-radius:24px;
}

.qr-payment-card{

padding:20px;
}

.qr-box{

padding:10px;
}

.payment-header h2{

font-size:30px;
}

.payment-field input{

height:56px;
}

.upload-box{

min-height:140px;
}
}

/* =========================================================
FINAL PREMIUM PAYMENT POPUP CSS
ONLY KEEP THIS CSS
DELETE ALL OLD PAYMENT CSS
========================================================= */

/* OVERLAY */

.payment-popup-overlay{

position:fixed;
inset:0;

background:rgba(0,0,0,0.65);

display:none;

justify-content:center;
align-items:center;

padding:20px;

z-index:99999;

backdrop-filter:blur(8px);
}

.payment-popup-overlay.active{
display:flex;
}

/* MAIN POPUP */

.payment-popup{

width:100%;
max-width:980px;

background:#f8f6f2;

border-radius:34px;

padding:34px;

position:relative;

animation:popupFade 0.35s ease;

max-height:95vh;

overflow-y:auto;
}

@keyframes popupFade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}
}

/* CLOSE BUTTON */

.payment-close{

position:absolute;

top:20px;
right:20px;

width:42px;
height:42px;

border:none;

border-radius:50%;

background:#ffffff;

cursor:pointer;

font-size:16px;

display:flex;
align-items:center;
justify-content:center;

box-shadow:0 4px 12px rgba(0,0,0,0.08);

transition:0.3s;
}

.payment-close:hover{
transform:rotate(90deg);
}

/* HEADER */

.payment-header{

margin-bottom:34px;
}

.payment-tag{

display:inline-block;

font-size:10px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

color:#6b8a99;

border-bottom:1px solid #ddd;

padding-bottom:6px;

margin-bottom:18px;
}

.payment-header h2{

font-size:44px;

font-family:'Cormorant Garamond',serif;

font-weight:600;

color:#222;

margin-bottom:10px;
}

.payment-header p{

font-size:15px;

color:#666;
}

/* TABS */

.payment-tabs{

display:flex;

gap:14px;

margin-bottom:34px;
}

.payment-tab{

flex:1;

height:58px;

border:none;

border-radius:18px;

background:#ece8e2;

cursor:pointer;

font-size:15px;
font-weight:600;

display:flex;

align-items:center;
justify-content:center;

gap:10px;

transition:0.3s;
}

.payment-tab.active{

background:#c95a3d;

color:#fff;
}

/* CONTENT */

.payment-content{
display:none;
}

.payment-content.active{
display:block;
}

/* =========================================================
SPLIT LAYOUT
========================================================= */

.split-payment-layout{

display:grid;

grid-template-columns:420px 1fr;

gap:42px;

align-items:start;
}

/* LEFT */

.payment-left-side{

display:flex;
flex-direction:column;

gap:24px;
}

/* STEP TITLE */

.payment-step-title{

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

color:#7a97a6;
}

/* QR CARD */

.qr-payment-card{

background:#fff;

border:1px solid #e7ddd3;

border-radius:28px;

padding:28px;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;
}

/* QR BOX */

.qr-box{

width:300px;
height:300px;

background:#fafafa;

border:1px solid #e5ddd5;

border-radius:24px;

display:flex;

align-items:center;
justify-content:center;

padding:14px;

margin-bottom:22px;
}

.qr-box img{

width:100%;
height:100%;

object-fit:contain;

border-radius:18px;
}

/* MERCHANT */

.merchant-label{

font-size:12px;

letter-spacing:4px;

font-weight:700;

color:#7a97a6;

margin-bottom:12px;
}

.merchant-name{

font-size:20px;

font-family:'Cormorant Garamond',serif;

color:#222;

margin-bottom:24px;
}

/* UPI BAR */

.upi-box{

width:100%;

height:58px;

border:1px solid #ddd;

border-radius:999px;

padding:0 20px;

display:flex;

align-items:center;
justify-content:space-between;

background:#fff;

margin-bottom:12px;
}

.upi-box span{

font-size:18px;

font-weight:500;
}

.upi-box button{

border:none;
background:none;

cursor:pointer;

font-size:18px;
}

/* PAYMENT APPS */

.payment-apps{

font-size:14px;

color:#777;
}

/* INSTRUCTIONS */

.payment-instructions{

padding-left:20px;

display:flex;

flex-direction:column;

gap:10px;

font-size:15px;

line-height:1.7;

color:#555;
}

/* =========================================================
RIGHT SIDE
========================================================= */

.payment-right-side{

display:flex;
flex-direction:column;

gap:22px;
}

/* CONFIRM BOX */

.submit-confirm-box{

display:flex;

flex-direction:column;

gap:24px;
}

/* TITLE */

.confirm-title{

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

color:#7a97a6;
}

/* FIELD */

.payment-field{

display:flex;

flex-direction:column;

gap:10px;
}

.payment-field label{

font-size:16px;

font-weight:600;

color:#222;
}

/* INPUT */

.payment-field input,
.payment-field select{

width:100%;

height:62px;

border:1px solid #ddd;

border-radius:18px;

padding:0 22px;

font-size:16px;

background:#fff;

outline:none;

transition:0.3s;
}

.payment-field input:focus,
.payment-field select:focus{

border-color:#c95a3d;

box-shadow:
0 0 0 4px rgba(201,90,61,0.08);
}

/* UPLOAD */

.upload-box{

width:100%;

min-height:170px;

border:2px dashed #d8cec4;

border-radius:24px;

background:#fff;

display:flex;

flex-direction:column;

align-items:center;
justify-content:center;

text-align:center;

gap:10px;

cursor:pointer;

padding:20px;

transition:0.3s;
}

.upload-box:hover{

border-color:#c95a3d;

background:#fffaf7;
}

.upload-box i{

font-size:34px;

color:#c95a3d;
}

.upload-box strong{

font-size:18px;

font-weight:600;

color:#333;
}

.upload-box span{

font-size:14px;

color:#888;
}

/* SUBMIT BUTTON */

.submit-payment-btn{

width:100%;

height:68px;

border:none;

border-radius:999px;

background:#c95a3d;

color:#fff;

font-size:22px;

font-weight:700;

cursor:pointer;

transition:0.3s;
}

.submit-payment-btn:hover{

transform:translateY(-2px);

box-shadow:
0 14px 24px rgba(201,90,61,0.22);
}

/* SECURITY BADGES */

.payment-security-badges{

display:flex;

flex-wrap:wrap;

gap:12px;

justify-content:center;
}

.payment-security-badges span{

padding:12px 18px;

border-radius:999px;

background:#ececec;

font-size:14px;

color:#355;
}

/* =========================================================
CARD PREVIEW
========================================================= */

.card-preview-box{

width:100%;

height:260px;

border-radius:30px;

padding:30px;

background:linear-gradient(
135deg,
#111,
#2d2d2d,
#444
);

display:flex;

flex-direction:column;

justify-content:space-between;

color:#fff;

box-shadow:
0 20px 40px rgba(0,0,0,0.22);
}

.card-chip{

width:70px;
height:50px;

border-radius:12px;

background:linear-gradient(
135deg,
#d4af37,
#f5d06f
);
}

.card-number{

font-size:28px;

letter-spacing:4px;

font-weight:600;
}

.card-bottom{

display:flex;

justify-content:space-between;

font-size:16px;
}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:900px){

.payment-popup{

padding:22px;
}

.split-payment-layout{

grid-template-columns:1fr;

gap:34px;
}

.qr-box{

width:100%;
height:auto;

aspect-ratio:1/1;
}

.payment-header h2{

font-size:34px;
}

.submit-payment-btn{

height:60px;

font-size:18px;
}

.payment-tabs{

flex-direction:column;
}
}

@media(max-width:600px){

.payment-popup{

padding:18px;

border-radius:24px;
}

.qr-payment-card{

padding:20px;
}

.qr-box{

padding:10px;
}

.payment-header h2{

font-size:30px;
}

.payment-field input{

height:56px;
}

.upload-box{

min-height:140px;
}
}

/* =========================================================
FINAL PREMIUM PAYMENT POPUP CSS
DELETE ALL OLD PAYMENT CSS & REPLACE WITH THIS
========================================================= */

/* =========================================================
OVERLAY
========================================================= */

.payment-popup-overlay{

position:fixed;
inset:0;

background:rgba(0,0,0,0.65);

display:none;

justify-content:center;
align-items:center;

padding:20px;

z-index:99999;

backdrop-filter:blur(8px);
}

.payment-popup-overlay.active{
display:flex;
}

/* =========================================================
MAIN POPUP
========================================================= */

.payment-popup{

width:100%;
max-width:980px;

background:#f8f6f2;

border-radius:34px;

padding:34px;

position:relative;

animation:popupFade 0.35s ease;

max-height:95vh;

overflow-y:auto;
}

@keyframes popupFade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}
}

/* =========================================================
CLOSE BUTTON
========================================================= */

.payment-close{

position:absolute;

top:20px;
right:20px;

width:44px;
height:44px;

border:none;

border-radius:50%;

background:#fff;

cursor:pointer;

font-size:16px;

display:flex;
align-items:center;
justify-content:center;

box-shadow:0 6px 16px rgba(0,0,0,0.08);

transition:0.3s;
}

.payment-close:hover{

transform:rotate(90deg);
}

/* =========================================================
HEADER
========================================================= */

.payment-header{

margin-bottom:34px;
}

.payment-tag{

display:inline-block;

font-size:10px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

color:#6b8a99;

border-bottom:1px solid #ddd;

padding-bottom:6px;

margin-bottom:18px;
}

.payment-header h2{

font-size:44px;

font-family:'Cormorant Garamond',serif;

font-weight:600;

color:#222;

margin-bottom:10px;
}

.payment-header p{

font-size:15px;

color:#666;
}

/* =========================================================
TABS
========================================================= */

.payment-tabs{

display:flex;

gap:14px;

margin-bottom:34px;
}

.payment-tab{

flex:1;

height:58px;

border:none;

border-radius:18px;

background:#ece8e2;

cursor:pointer;

font-size:15px;
font-weight:600;

display:flex;
align-items:center;
justify-content:center;

gap:10px;

transition:0.3s;
}

.payment-tab.active{

background:#c95a3d;

color:#fff;
}

/* =========================================================
CONTENT
========================================================= */

.payment-content{
display:none;
}

.payment-content.active{
display:block;
}

/* =========================================================
COMMON SPLIT LAYOUT
========================================================= */

.split-payment-layout,
.bank-card-layout{

display:grid;

grid-template-columns:420px 1fr;

gap:42px;

align-items:start;
}

/* =========================================================
LEFT SIDE
========================================================= */

.payment-left-side{

display:flex;
flex-direction:column;

gap:24px;
}

/* =========================================================
RIGHT SIDE
========================================================= */

.payment-right-side{

display:flex;
flex-direction:column;

gap:22px;
}

/* =========================================================
STEP TITLES
========================================================= */

.payment-step-title,
.bank-card-title,
.confirm-title,
.bank-submit-title{

font-size:13px;

letter-spacing:4px;

text-transform:uppercase;

font-weight:700;

color:#7a97a6;
}

/* =========================================================
UPI QR CARD
========================================================= */

.qr-payment-card{

background:#fff;

border:1px solid #e7ddd3;

border-radius:28px;

padding:28px;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;
}

/* =========================================================
QR BOX
========================================================= */

.qr-box{

width:300px;
height:300px;

background:#fafafa;

border:1px solid #e5ddd5;

border-radius:24px;

display:flex;

align-items:center;
justify-content:center;

padding:14px;

margin-bottom:22px;
}

.qr-box img{

width:100%;
height:100%;

object-fit:contain;

border-radius:18px;
}

/* =========================================================
MERCHANT
========================================================= */

.merchant-label{

font-size:12px;

letter-spacing:4px;

font-weight:700;

color:#7a97a6;

margin-bottom:12px;
}

.merchant-name{

font-size:20px;

font-family:'Cormorant Garamond',serif;

color:#222;

margin-bottom:24px;
}

/* =========================================================
UPI BAR
========================================================= */

.upi-box{

width:100%;

height:58px;

border:1px solid #ddd;

border-radius:999px;

padding:0 20px;

display:flex;

align-items:center;
justify-content:space-between;

background:#fff;

margin-bottom:12px;
}

.upi-box span{

font-size:17px;

font-weight:500;
}

.upi-box button{

border:none;
background:none;

cursor:pointer;

font-size:18px;
}

/* =========================================================
PAYMENT APPS
========================================================= */

.payment-apps{

font-size:14px;

color:#777;
}

/* =========================================================
INSTRUCTIONS
========================================================= */

.payment-instructions{

padding-left:20px;

display:flex;

flex-direction:column;

gap:10px;

font-size:15px;

line-height:1.7;

color:#555;
}

/* =========================================================
FORM BOXES
========================================================= */

.submit-confirm-box,
.bank-submit-box{

display:flex;

flex-direction:column;

gap:24px;
}

/* =========================================================
FIELDS
========================================================= */

.payment-field,
.bank-field{

display:flex;

flex-direction:column;

gap:10px;
}

.payment-field label,
.bank-field label{

font-size:16px;

font-weight:600;

color:#222;
}

/* =========================================================
INPUTS
========================================================= */

.payment-field input,
.payment-field select,
.bank-field input,
.bank-field select,
.bank-info-card select{

width:100%;

height:62px;

border:1px solid #ddd;

border-radius:18px;

padding:0 22px;

font-size:16px;

background:#fff;

outline:none;

transition:0.3s;
}

.payment-field input:focus,
.payment-field select:focus,
.bank-field input:focus,
.bank-field select:focus,
.bank-info-card select:focus{

border-color:#c95a3d;

box-shadow:
0 0 0 4px rgba(201,90,61,0.08);
}

/* =========================================================
UPLOAD BOX
========================================================= */

.upload-box{

width:100%;

min-height:170px;

border:2px dashed #d8cec4;

border-radius:24px;

background:#fff;

display:flex;

flex-direction:column;

align-items:center;
justify-content:center;

text-align:center;

gap:10px;

cursor:pointer;

padding:20px;

transition:0.3s;
}

.upload-box:hover{

border-color:#c95a3d;

background:#fffaf7;
}

.upload-box i{

font-size:34px;

color:#c95a3d;
}

.upload-box strong{

font-size:18px;

font-weight:600;

color:#333;
}

.upload-box span{

font-size:14px;

color:#888;
}

/* =========================================================
SUBMIT BUTTON
========================================================= */

.submit-payment-btn{

width:100%;

height:68px;

border:none;

border-radius:999px;

background:#c95a3d;

color:#fff;

font-size:22px;

font-weight:700;

cursor:pointer;

transition:0.3s;
}

.submit-payment-btn:hover{

transform:translateY(-2px);

box-shadow:
0 14px 24px rgba(201,90,61,0.22);
}

/* =========================================================
SECURITY BADGES
========================================================= */

.payment-security-badges{

display:flex;

flex-wrap:wrap;

gap:12px;

justify-content:center;
}

.payment-security-badges span{

padding:12px 18px;

border-radius:999px;

background:#ececec;

font-size:14px;

color:#355;
}

/* =========================================================
NET BANKING CARD
========================================================= */

.bank-info-card{

background:#fff;

border:1px solid #e7ddd3;

border-radius:28px;

padding:28px;
}

.bank-visual-box{

display:flex;

flex-direction:column;

gap:22px;
}

/* =========================================================
ACCOUNT PREVIEW
========================================================= */

.account-preview{

background:#faf7f3;

border-radius:22px;

padding:24px;

display:flex;

flex-direction:column;

gap:18px;
}

.account-row{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

padding-bottom:12px;

border-bottom:1px solid #ece2d8;
}

.account-row:last-child{

border-bottom:none;

padding-bottom:0;
}

.account-row span{

font-size:14px;

color:#777;
}

.account-row strong{

font-size:15px;

color:#222;
}

/* =========================================================
CARD PREVIEW
========================================================= */

.card-preview-box{

width:100%;

height:260px;

border-radius:30px;

padding:30px;

background:linear-gradient(
135deg,
#111,
#2d2d2d,
#444
);

display:flex;

flex-direction:column;

justify-content:space-between;

color:#fff;

box-shadow:
0 20px 40px rgba(0,0,0,0.22);
}

.card-chip{

width:70px;
height:50px;

border-radius:12px;

background:linear-gradient(
135deg,
#d4af37,
#f5d06f
);
}

.card-number{

font-size:28px;

letter-spacing:4px;

font-weight:600;
}

.card-bottom{

display:flex;

justify-content:space-between;

font-size:16px;
}

/* =========================================================
RESPONSIVE
========================================================= */

@media(max-width:900px){

.payment-popup{

padding:22px;
}

.split-payment-layout,
.bank-card-layout{

grid-template-columns:1fr;

gap:34px;
}

.qr-box{

width:100%;
height:auto;

aspect-ratio:1/1;
}

.payment-header h2{

font-size:34px;
}

.submit-payment-btn{

height:60px;

font-size:18px;
}

.payment-tabs{

flex-direction:column;
}
}

@media(max-width:600px){

.payment-popup{

padding:18px;

border-radius:24px;
}

.qr-payment-card,
.bank-info-card{

padding:20px;
}

.qr-box{

padding:10px;
}

.payment-header h2{

font-size:30px;
}

.payment-field input,
.bank-field input,
.bank-info-card select{

height:56px;

font-size:15px;
}

.upload-box{

min-height:140px;
}

.card-preview-box{

height:220px;

padding:24px;
}

.card-number{

font-size:22px;
}

.card-bottom{

font-size:14px;
}
}

/* =========================================
SAFE RESPONSIVE FIX
========================================= */

html,
body{
    width:100%;
    overflow-x:hidden;
}

/* Images */
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* Videos */
video,
iframe{
    max-width:100%;
}

/* Forms */
input,
select,
textarea{
    max-width:100%;
}

/* Tables */
table{
    width:100%;
}

.table-wrapper{
    overflow-x:auto;
}

/* Prevent Grid Overflow */
.consult-container,
.split-payment-layout,
.bank-card-layout,
.schedule-grid,
.doctor-toggle-group,
.vax-footer{
    min-width:0;
}

/* =========================================
TABLET
========================================= */

@media (max-width:1024px){

    .consult-container{
        grid-template-columns:1fr;
        gap:30px;
    }

    .consult-main{
        max-width:100%;
    }

    .vax-footer{
        flex-wrap:wrap;
    }

}

/* =========================================
MOBILE
========================================= */

@media (max-width:768px){

    .schedule-grid{
        grid-template-columns:1fr;
    }

    .doctor-toggle-group{
        grid-template-columns:1fr;
    }

    .vax-footer{
        flex-direction:column;
        padding:40px 20px;
    }

    .consult-title{
        font-size:36px;
        line-height:1.2;
    }

    .consult-form-box{
        padding:20px;
    }

    .why-virtual-card,
    .dashboard-card{
        padding:20px;
    }

}

/* =========================================
SMALL MOBILE
========================================= */

@media (max-width:480px){

    .consult-title{
        font-size:28px;
    }

    .top-left{
        font-size:11px;
        line-height:1.4;
    }

    .clinic-btn{
        width:auto;
    }

    .payment-header h2{
        font-size:28px;
    }

    .card-number{
        font-size:18px;
        letter-spacing:2px;
    }

}/* ===== FINAL RESPONSIVE FIX ===== */

*{
    min-width:0;
}

html,
body{
    overflow-x:hidden;
    width:100%;
}

img,
video,
iframe{
    max-width:100%;
    height:auto;
}

.consult-container,
.split-payment-layout,
.bank-card-layout,
.vax-footer{
    width:100%;
    max-width:100%;
}

@media(max-width:900px){

.consult-container,
.split-payment-layout,
.bank-card-layout{
    grid-template-columns:1fr !important;
}

.payment-left-side,
.payment-right-side,
.consult-main{
    width:100%;
    max-width:100%;
}

}

@media(max-width:600px){

.payment-popup{
    padding:16px;
    border-radius:20px;
}

.payment-header h2{
    font-size:28px;
}

.submit-payment-btn{
    font-size:16px;
    height:56px;
}

.card-preview-box{
    height:auto;
    min-height:200px;
}

}

.top-bar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:52px;
    background:#2f6b63;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    z-index:2000;
}

.top-left{
    flex:1;
    overflow:hidden;
    margin-right:20px;
}

.top-left marquee{
    color:white;
    font-size:14px;
    font-weight:400;
    width:100%;
}

.top-right{
    display:flex;
    align-items:center;
    gap:16px;
    flex-shrink:0;
}

/* =========================
DESKTOP
========================= */
@media (min-width: 769px) {

  /* Show desktop login/signup or user icon */
  #desktopAuth {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  /* Hide floating icons */
  .floating-auth {
    display: none !important;
  }
}


/* =========================
MOBILE
========================= */
@media (max-width: 768px) {

  /* Hide desktop auth section */
  #desktopAuth {
    display: none !important;
  }

  /* Show floating auth icons */
  .floating-auth {
    display: flex !important;
  }
}

.consult-options{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:20px;
}

.consult-card{
    display:flex;
    align-items:center;
    gap:18px;

    background:#fff;
    border:1px solid #e6edf5;
    border-radius:18px;
    padding:20px;

    text-decoration:none;
    color:#222;

    box-shadow:0 10px 30px rgba(0,0,0,.06);

    transition:.3s ease;
}

.consult-card:hover{
    transform:translateY(-5px);
    border-color:#d36b4b;
    box-shadow:0 18px 40px rgba(13,79,139,.18);
}

.consult-icon{
    width:70px;
    height:70px;

    border-radius:16px;

    background:#d36b4b;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;
}

.consult-content{
    flex:1;
}

.consult-content h3{
    margin:0;
    font-size:20px;
    color:#d36b4b;
}

.consult-content p{
    margin:8px 0;
    color:#666;
    line-height:1.6;
}

.consult-price{
    display:inline-block;
    margin-top:5px;

    background:#eef6ff;
    color:#d36b4b;

    padding:6px 14px;
    border-radius:30px;

    font-weight:600;
}

.consult-arrow{
    font-size:30px;
    color:#d36b4b;
}

.consult-action{
    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;

    background:#d36b4b;
    color:#fff;

    border-radius:10px;

    font-size:14px;
    font-weight:600;

    white-space:nowrap;

    transition:.3s ease;
}

.consult-card:hover .consult-action{
    background:#d36b4b;
    transform:translateX(4px);
}

.consult-action i{
    font-size:16px;
}

.consult-action span{
    line-height:1;
}

@media(max-width:768px){

    .consult-action{
        padding:8px 14px;
        font-size:13px;
    }

    .consult-action i{
        font-size:15px;
    }
}

@media(max-width:768px){

    .consult-card{
        padding:16px;
    }

    .consult-icon{
        width:60px;
        height:60px;
        font-size:24px;
    }

    .consult-content h3{
        font-size:17px;
    }

    .consult-content p{
        font-size:14px;
    }
}
@media (max-width:768px){

    .consult-card{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
        padding:18px;
    }

    .consult-icon{
        width:58px;
        height:58px;
        font-size:24px;
    }

    .consult-content{
        width:100%;
    }

    .consult-content h3{
        font-size:18px;
        line-height:1.3;
    }

    .consult-content p{
        font-size:14px;
        line-height:1.6;
        margin:8px 0;
    }

    .consult-price{
        display:inline-block;
        margin-top:8px;
        font-size:13px;
        padding:6px 12px;
    }

    .consult-action{
        width:100%;
        justify-content:center;
        padding:12px;
        font-size:14px;
        border-radius:10px;
    }

    .consult-action i{
        font-size:16px;
    }
}