
.appointment-shloka-section{
    background:#FAF8F3;
    padding:4px 14px 10px;
}

.appointment-shloka-card{
    position:relative;

    max-width:1450px;
    margin:0 auto;

    background:#FFFDF8;
    border:1px solid #D4AF37;

    padding:30px 20px;

    text-align:center;
    overflow:hidden;
}

.kalash-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
}

.kalash-img{
    width:90px;
    height:auto;
}

.appointment-shloka{
    font-size:3rem;
    font-weight:600;
    color:#6B4E2E;
    margin-bottom:15px;
}

.appointment-shloka-hindi{
    font-size:1.3rem;
    color:#4F463D;
    margin-bottom:12px;
}

.appointment-shloka-english{
    font-size:1.1rem;
    color:#555;
    margin:0;
}

.corner{
    position:absolute;
    width:45px;
    height:45px;
    border-color:#D4AF37;
}

.top-left{
    top:12px;
    left:12px;
    border-top:1px solid;
    border-left:1px solid;
}

.top-right{
    top:12px;
    right:12px;
    border-top:1px solid;
    border-right:1px solid;
}

.bottom-left{
    bottom:12px;
    left:12px;
    border-bottom:1px solid;
    border-left:1px solid;
}

.bottom-right{
    bottom:12px;
    right:12px;
    border-bottom:1px solid;
    border-right:1px solid;
}
.appointment-updates-section{
    padding:0 14px 14px;
    background:#ffffff;
}

.appointment-updates-bar{
    max-width:1450px;
    margin:0 auto;

    display:flex;
    align-items:center;
    gap:12px;

    padding:12px 18px;

    background:#EAF7EF;

    border-left:4px solid #2FA86A;

    border-radius:8px;
}

.updates-label{
    color:#2FA86A;
    font-size:1rem;
    font-weight:600;
    white-space:nowrap;
}

.updates-message{
    color:#2D2D2D;
    font-size:.95rem;
    font-weight:500;
    line-height:1.5;
}
.appointment-form-section{
    padding:0 14px 30px;
    background:#ffffff;
}

.appointment-form-card{
    max-width:900px;
    margin:0 auto;
     border-radius:14px;
    padding:22px;
   background:#FFFFFF;
    border:1px solid #E5EAF0;
    border-top:4px solid #2FA86A;
    box-shadow:0 8px 24px rgba(17,24,39,.06);
   

}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.form-group{
    display:flex;
    flex-direction:column;
}

.full-width{
    grid-column:1/-1;
}

.form-group label{
    font-size:.9rem;
    font-weight:600;
   color:#1E3A5F;
    margin-bottom:6px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;

    padding:12px 14px;

    border:1px solid #D9D9D9;
    border-radius:10px;

    background:#ffffff;

    font-size:.95rem;
    color:#2D2D2D;

    outline:none;

    transition:.25s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:#2FA86A;
    box-shadow:0 0 0 3px rgba(47,168,106,.12);
}

.form-group textarea{
    min-height:90px;
    resize:vertical;
}

.appointment-submit-btn{
    display:block;

    margin:18px auto 0;

    border:none;
    border-radius:10px;

    padding:12px 28px;

    background:#2FA86A;

    color:#ffffff;

    font-size:.95rem;
    font-weight:600;

    cursor:pointer;

    transition:.3s ease;
}

.appointment-submit-btn:hover{
    transform:translateY(-2px);
    background:#258956;
}
.appointment-journey-section{
    padding:0 14px 24px;
    background:#ffffff;
}

.journey-card{
    max-width:1450px;
    margin:0 auto;

    background:#ffffff;

    border:1px solid #E5EAF0;
    border-radius:14px;

    padding:24px 20px;

    box-shadow:0 8px 24px rgba(17,24,39,.05);
}

.journey-heading{
    text-align:center;

    color:#18469B;

    font-size:2rem;
    font-weight:700;

    margin-bottom:24px;
}

.journey-steps{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    align-items:start;
    gap:12px;
}

.journey-step{
    text-align:center;
}

.journey-icon{
    width:60px;
    height:60px;

    margin:0 auto 12px;

    border-radius:50%;

    background:#18469B;
    color:#ffffff;

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

    font-size:1.3rem;
}

.confirmation-step .journey-icon{
    background:#2FA86A;
}

.journey-step h3{
    font-size:1rem;
    color:#18469B;
    margin-bottom:6px;
}

.journey-step p{
    font-size:.85rem;
    color:#555;
    line-height:1.5;
    margin:0;
}

.journey-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
     font-size:1.1rem;
    color:#2FA86A;
    white-space:nowrap;
    padding-top:20px;
}

.journey-arrow i{
    width:70px;
}
.services-section{
     display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
      padding:0 14px 30px;
    width:100%;
    max-width:100%;
   
    overflow:hidden;
}

.dental-card{
    background:#f6fbf8;
    border:1px solid #d9ebe2;
       width:100%;
    min-width:0;
    box-sizing:border-box;
}

.eye-card{
    background:#f7f9ff;
    border:1px solid #dce4ff;
      width:100%;
    min-width:0;
    box-sizing:border-box;
}

.card-title,
.eye-header{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:16px 18px 8px;
}

.title-icon,
.eye-header-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.title-icon{
    background:#e7f4ed;
}

.eye-header-icon{
    background:#eaf0ff;
}

.title-icon i{
    color:#0b8f63;
    font-size:1.8rem;
}

.eye-header-icon i{
    color:#1f4fbf;
    font-size:1.8rem;
}

.title-content h2{
    color:#0b8f63;
    font-size:1.8rem;
    font-weight:700;
    margin:0 0 6px;
    text-transform:uppercase;
}

.eye-header-content h2{
    color:#1f4fbf;
    font-size:1.8rem;
    font-weight:700;
    margin:0 0 6px;
    text-transform:uppercase;
}

.title-content p,
.eye-header-content p{
    color:#666;
    font-size:.9rem;
    margin:0 0 4px;
}

.title-content h3{
    color:#0b8f63;
    font-size:1rem;
    font-weight:700;
    margin:0;
}

.eye-header-content h3{
    color:#1f4fbf;
    font-size:1rem;
    font-weight:700;
    margin:0;
}

.dental-grid{
    display:grid;
     align-items:start;
    grid-template-columns:50% 50%;
   
    padding:0 14px 8px;
}

.rajkumar-services{
    padding:0 16px 12px;
    padding-bottom:0;
    margin-bottom:0;
}

.rajkumar-services ul{
    margin:0;
    padding:0 18px 0 0;
    list-style:none;
    border-right:1px solid #dfe8e3;
}

.rajkumar-services li{
    font-size:.92rem;
    color:#333;
    margin-bottom:6px;
    line-height:1.3;
}

.rajkumar-services li::before{
    content:"✓";
    color:#0b8f63;
    font-weight:700;
    margin-right:10px;
}

.right-column{
       display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.tooth-area{
    height:40px;
    display:flex;
    align-items:top-right;
    justify-content:center;
   
  
}

.tooth-area i{
    color:#0b8f63;
    font-size:3.5rem;
    opacity:.9;
     margin-top:-50px;
  

}

.ortho-services{
    border-top:1px solid #dfe8e3;
   padding:10px 12px 0 12px;
   padding-bottom:0;
    margin-bottom:0;
     margin-top:-18px;
    padding-top:6px;
     
}

.ortho-services h4{
    color:#0b8f63;
    font-size:1.3rem;
    font-weight:700;
    text-transform:uppercase;
    margin:0 0 8px;
}

.ortho-services p{
    color:#666;
    font-size:.9rem;
    margin:0 0 4px;
}

.ortho-services h5{
    color:#0b8f63;
    font-size:1rem;
    font-weight:700;
    margin:0 0 10px;
}

.ortho-services ul,
.rajkumar-services ul{
    padding-bottom:0;
    margin-bottom:0;
}


.ortho-services li{
    font-size:.92rem;
    color:#333;
    margin-bottom:6px;
    line-height:1.3;
}

.ortho-services li::before{
    content:"✓";
    color:#0b8f63;
    font-weight:700;
    margin-right:10px;
}
.ortho-services li:last-child,
.rajkumar-services li:last-child{
    margin-bottom:0;
}
.eye-layout{
 display:grid;
    grid-template-columns:1fr 120px;

    padding:0 22px 16px;
}

.eye-services ul{
    margin:0;
    padding:0;
    list-style:none;
}

.eye-services li{
    font-size:.92rem;
    color:#333;
    margin-bottom:6px;
    line-height:1.3;
}

.eye-services li::before{
    content:"✓";
    color:#1f4fbf;
    font-weight:700;
    margin-right:10px;
}

.eye-icon-side{
    display:flex;
    align-items:center;
    justify-content:center;
}

.eye-icon-side i{
    color:#1f4fbf;
    font-size:6rem;
    opacity:.18;
    margin-right:20px;
}
.emergency-contact{
    margin:20px 24px 20px 24px;
    padding:14px 20px;
    background:linear-gradient(135deg,#0f8d5a,#0b9f74);
    border-radius:16px;

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

    box-sizing:border-box;
    width:calc(100% - 48px);
}

.emergency-left{
    display:flex;
    align-items:center;
    gap:18px;
}

.emergency-icon{
    width:60px;
    height:60px;
    background:#ffffff;
    border-radius:14px;

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

    flex-shrink:0;
}

.emergency-icon i{
    font-size:1.5rem;
    color:#0f8d5a;
}

.emergency-content h3{
    margin:0 0 4px;
    color:#fff;
    font-size:1.4rem;
    font-weight:700;
}

.emergency-content p{
    margin:0;
    color:#f3f7f5;
    font-size:0.8rem;
}

.emergency-btn{
    background:#fff;
    color:#0f8d5a;

    padding:14px 28px;
    border-radius:14px;

    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;
    font-size:1.1rem;
    font-weight:700;

    min-width:280px;
    justify-content:center;

    flex-shrink:0;
}

.emergency-btn i{
    font-size:1.2rem;
}






@media (min-width:768px) and (max-width:1059px){
    .appointment-shloka-section{
        padding:4px 12px 10px;
    }

    .appointment-shloka-card{
        padding:28px 18px;
    }

    .kalash-img{
        width:70px;
    }

    .appointment-shloka{
        font-size:2.2rem;
        line-height:1.3;
    }

    .appointment-shloka-hindi{
        font-size:1.1rem;
    }

    .appointment-shloka-english{
        font-size:1rem;
    }
   .appointment-updates-section{
        padding:0 12px 12px;
    }

    .appointment-updates-bar{
        padding:11px 16px;
        gap:10px;
    }

    .updates-label{
        font-size:.95rem;
    }

    .updates-message{
        font-size:.9rem;
    }
     .appointment-form-section{
        padding:0 12px 24px;
    }

    .appointment-form-card{
        padding:20px;
    }

    .form-grid{
        gap:14px;
    }

    .form-group label{
        font-size:.88rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea{
        padding:11px 13px;
        font-size:.92rem;
    }

    .appointment-submit-btn{
        padding:11px 24px;
        font-size:.92rem;
    }
     .appointment-journey-section{
        padding:0 12px 20px;
    }

    .journey-card{
        padding:20px 16px;
    }

    .journey-heading{
        font-size:1.7rem;
        margin-bottom:20px;
    }

    .journey-icon{
        width:54px;
        height:54px;
        font-size:1.15rem;
    }

    .journey-step h3{
        font-size:.95rem;
    }

    .journey-step p{
        font-size:.78rem;
    }
    .services-section{
    grid-template-columns:1fr ;
    gap:16px;
}

.dental-grid{
    grid-template-columns:55% 45%;
}

.eye-layout{
    grid-template-columns:1fr 100px;
}

.title-content h2,
.eye-header-content h2{
    font-size:1.5rem;
}

.ortho-services h4{
    font-size:1.1rem;
}

.eye-icon-side i{
    font-size:4.5rem;
}

.tooth-area i{
    font-size:3rem;
}

.card-title,
.eye-header{
    padding:14px;
}

.dental-card,
.eye-card{
    border-radius:14px;
}
.emergency-contact{
    padding:12px;
}

.emergency-content h3{
    font-size:1.05rem;
}

.emergency-btn{
    min-width:180px;
    padding:10px 18px;
}
    
}







@media (max-width:767px){

     .appointment-shloka-section{
        padding:4px 8px 8px;
    }

    .appointment-shloka-card{
        padding:24px 14px;
    }

    .kalash-img{
        width:50px;
    }

    .appointment-shloka{
        font-size:1.6rem;
        line-height:1.35;
        margin-bottom:12px;
    }

    .appointment-shloka-hindi{
        font-size:.95rem;
        margin-bottom:10px;
    }

    .appointment-shloka-english{
        font-size:.88rem;
        line-height:1.6;
    }

    .corner{
        width:32px;
        height:32px;
    }
     .appointment-updates-section{
        padding:0 8px 10px;
    }

    .appointment-updates-bar{
        flex-direction:column;
        align-items:flex-start;

        gap:4px;

        padding:6px 10px;
    }

    .updates-label{
        font-size:.9rem;
    }

    .updates-message{
        font-size:.85rem;
        line-height:1.5;
    }
     .appointment-form-section{
        padding:0 8px 20px;
    }

    .appointment-form-card{
        padding:16px;
        border-radius:12px;
    }

    .form-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .full-width{
        grid-column:auto;
    }

    .form-group label{
        font-size:.85rem;
        margin-bottom:5px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea{
        padding:10px 12px;
        font-size:.9rem;
    }

    .form-group textarea{
        min-height:80px;
    }

    .appointment-submit-btn{
        width:100%;

        margin-top:16px;

        padding:12px;

        font-size:.9rem;
    }
    .appointment-journey-section{
        padding:0 8px 16px;
    }

    .journey-card{
        padding:16px 14px;
    }

    .journey-heading{
        font-size:1.35rem;
        margin-bottom:18px;
    }

    .journey-steps{
        display:flex;
        flex-direction:column;
        gap:0;
    }

    .journey-step{
        display:flex;
        align-items:flex-start;
        gap:12px;
        text-align:left;
    }

    .journey-icon{
        width:50px;
        height:50px;
        flex-shrink:0;
        margin:0;

        font-size:1rem;
    }

    .journey-content{
        flex:1;
        padding-top:4px;
    }

    .journey-step h3{
        font-size:.95rem;
        margin-bottom:3px;
    }

    .journey-step p{
        font-size:.78rem;
        line-height:1.4;
        margin:0;
    }

    .journey-arrow{
        display:flex;
        justify-content:flex-start;
        align-items:center;

        margin:4px 0 4px 0;

        padding-left:38px;
    }

    .journey-arrow i{
        transform:rotate(90deg);
        font-size:1rem;
        color:#2FA86A;
    }
    .services-section{
    grid-template-columns:1fr;
    gap:14px;
}

.card-title,
.eye-header{
    gap:10px;
    padding:12px;
}

.title-icon,
.eye-header-icon{
    width:48px;
    height:48px;
}

.title-icon i,
.eye-header-icon i{
    font-size:1.3rem;
}

.title-content h2,
.eye-header-content h2{
    font-size:1.15rem;
    line-height:1.2;
}

.title-content h3,
.eye-header-content h3{
    font-size:.9rem;
}

.dental-grid{
    grid-template-columns:1fr;
    padding:0 12px 12px;
}

.rajkumar-services{
    padding:0;
}

.rajkumar-services ul{
    border-right:none;
    padding-right:0;
}

.right-column{
    margin-top:10px;
}

.tooth-area{
    display:none;
}

.ortho-services{
    border-top:1px solid #dfe8e3;
    margin-top:0;
    padding:12px 0 0;
}

.ortho-services h4{
    font-size:1rem;
}

.ortho-services h5{
    font-size:.9rem;
}

.rajkumar-services li,
.ortho-services li,
.eye-services li{
    font-size:.85rem;
}

.eye-layout{
    grid-template-columns:1fr;
    padding:0 12px 12px;
}

.eye-icon-side{
    display:none;
}

.dental-card,
.eye-card{
    border-radius:12px;
}
.emergency-contact{
    flex-direction:column;
    gap:12px;
    text-align:center;
}

.emergency-left{
    flex-direction:column;
    gap:10px;
}

.emergency-btn{
    width:100%;
    min-width:unset;
}
}