/* =========================================
   SERVICES SECTION
========================================= */
html{
    scroll-behavior: smooth;
}

.services{

    padding:70px 0 70px;

    background:#F8FAFC;
    scroll-margin-top: 80px;

}

.section-heading{

    max-width:700px;

    margin:0 auto 50px;

    text-align:center;

}

.section-tag{

    display:inline-block;

    padding:12px 24px;

    background:#EAF3FF;

    color:#0F6FFF;

    font-size:18px;

    font-weight:700;

    border-radius:50px;

    letter-spacing:1.5px;

    margin-bottom:20px;

}

.section-heading h2{

    font-size:42px;

    color:#081B33;

    line-height:1.2;

    margin-bottom:12px;

}

.section-heading p{

    font-size:18px;
    color:#6B7280;
    line-height:1.6;
    max-width: 650px;
    margin: 0 auto;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.service-card{

    background:#ffffff;
    padding:32px 28px;
    min-height: 320px;
    border-radius:20px;
    border-top:4px solid #0F6FFF;
    transition:
    opacity .6s ease,
    transform .6s ease,
    box-shadow .35s ease,
    border-color .35s ease;
    border-left:1px solid #E8EDF5;
    border-right:1px solid #E8EDF5;
    border-bottom:1px solid #E8EDF5;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

}

.service-card:hover{

    transform:translateY(-30px);

    box-shadow:0 20px 45px rgba(15,111,255,.15);

    border-top-color:#0056D6;

}

.service-card:hover .service-icon{
    transform: scale(1.1) rotate(2deg);
}

.service-icon{

    width:70px;
    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    border-radius:18px;

    background:#EAF3FF;

    margin-bottom:25px;
    transition: transform .35s ease;

}

.service-icon img{
    width:55px;
    height:55px;
    object-fit:contain;
}

.service-card h3{

    font-size:24px;

    color:#081B33;

    margin-bottom:15px;

}

.service-card p{

    color:#6B7280;

    line-height:1.8;

    font-size:16px;

}

.service-card{
    opacity: 0;
    transform: translateY(40px);
}

.service-card.show{
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   EQUIPMENT SECTION
========================= */

.equipment{
    padding:90px 0;
    background:#ffffff;
}

#equipment{
    scroll-margin-top: 50px;
}

.equipment-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:70px;
}

.equipment-card{
    background:#fff;
    border-radius:22px;
    padding:24px 28px;
    text-align:left;
    border-top: 4px solid #0F6FFF;
    border-left: 1px solid #E8EDF5;
    border-right: 1px solid #E8EDF5;
    border-bottom: 1px solid #E8EDF5;
    transition:.35s ease;
    min-height: 275px;
}

.equipment-icon{
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    border-radius: 18px;
    background: #EAF3FF;
    margin-bottom: 18px;
    transition: none;
}

.equipment-card img{
    width:55px;
    height:55px;
    object-fit:contain;
    display:block;
    margin:0;
    transition:transform .35s ease;
}

.equipment-card h3{
    font-size:22px;
    color:#081B33;
    margin-top: 20px 0 12px;
    margin-bottom:14px;
    text-align: left;
}

.equipment-card p {
    color: #6B7280;
    line-height: 1.7;
    font-size: 16px;
    max-width: 280px;
    margin: 0;
}

.equipment-card{
    opacity: 0;
    transform: translateY(40px);
}

.equipment-card.show{
    opacity:1;
    transform:translateY(0);
}

.equipment-card:hover{
    box-shadow: 0 18px 40px rgba(15,111,255,.12);
}

/* ===============================
        PRICING SECTION
================================ */

.pricing{
    padding:90px 0;
    background:#F8FBFF;
}

#pricing{
    scroll-margin-top: 50px;
}

.pricing-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:70px;
}

.pricing-card{
    background:#fff;
    border:1px solid #E8EDF5;
    border-radius:20px;
    padding:30px 34px 34px;
    min-height: 500px;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
}

.pricing-card{
    transition:transform .35s ease,
               box-shadow .35s ease;
}

.pricing-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.pricing-card.featured:hover{
    transform:translateY(-14px);
}

.pricing-card.featured{
    transform: translateY(-12px);
    border: 2px solid #0F6FFF;
    transform: translateY(-18px);
    box-shadow: 0 18px 45px rgba(37, 99, 235, 0.15);
}

.pricing-card .btn-primary{
    margin-top: 32px;
    background:#fff;
    color:#2563EB;
    border:2px solid #2563EB;
    box-shadow:none;
}

.pricing-card .btn-primary:hover{
    background:#2563EB;
    color:#fff;
}

.pricing-card h3{
    font-size:26px;
    line-height:1.25;
    font-weight:700;
    color:#081B33;
    margin:0 0 10px;
}

.price{
    font-size:36px;
    font-weight:800;
    line-height:1;
    color:#2563EB;
    margin:8px 0 6px;
}

.price-subtitle{
    color:#5B6B84;
    font-size:17px;
    font-weight:500;
    margin-top:4px;
    margin-bottom:36px;
}

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

.pricing-card li{
    display:flex;
    align-items:center;
    gap:10px;

    font-size:17px;
    font-weight:500;
    color:#081B33;

    margin-bottom:14px;
}

.pricing .section-heading h2{
    font-size: 40px;
}

.popular-badge{
    display:inline-block;
    width: fit-content;
    background:#FFF4CC;
    color:#8A5A00;
    padding:8px 14px;
    border-radius:999px;
    font-size:14px;
    font-weight:700;
    margin-bottom:18px;
}

.plan-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:6px 14px;

    border-radius:999px;

    background:#EEF5FF;

    color:#2563EB;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;
}

.popular-badge{
    background:#FFF4CC;
    color:#8A5A00;
}

.featured-btn{
    background:#2563EB !important;
    color:#fff !important;
    border:none !important;
    box-shadow:0 10px 24px rgba(37,99,235,.25);
}

.featured-btn:hover{
    background:#1D4ED8 !important;
    transform: scale(1.08);
    box-shadow: 0 18px 40px rgba(37, 99, 235, 0.35);
}

.pricing-divider{
    height:1px;
    background:#E7EDF5;
    border:none;
    margin:16px 0 34px;
}

.plan-eligibility{
    margin: 12px 0 16px;
    padding: 8px 12px;
    background: #F8FAFC;
    border-left: 4px solid #0F6FFF;
    border-radius: 8px;
    color: #4B5563;
    font-size: 13px;
    line-height: 1.4;
}

.plan-eligibility strong{
    color: #081B33;
    font-weight: 600;
}

/* ==========================================
          WHY CHOOSE VELTRA
========================================== */

.why-choose{
    padding:15px 0 30px;
    background:#F7FAFF;
    scroll-margin-top:100px;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:20px;
}

.why-card{
    background: #fff;
    border-radius: 22px;
    border-top: 4px solid #0F6FFF;
    border-left: 1px solid #E8EDF5;
    border-right: 1px solid #E8EDF5;
    border-bottom: 1px solid #E8EDF5;

    padding: 35px 30px;
    min-height: 260px;

    transition: .35s ease;
}

.why-card:hover{
    transform: translateY(-12px);
    box-shadow: 0 20px 45px rgba(15,111,255,.15);
    border-top-color: #0056D6;
}

.why-icon{
    width:64px;
    height:64px;
    border-radius:16px;
    background:#EEF5FF;

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

    font-size:28px;
    margin-bottom:24px;
}

.why-card h3{
    font-size:26px;
    color:#081B33;
    margin-bottom:14px;
}

.why-card p{
    color:#5B6B84;
    line-height:1.8;
    font-size:17px;
}

/* =========================================
            TESTIMONIALS
========================================= */

.testimonials{
    padding:90px 0;
    background:#F8FBFF;
}

#testimonials{
    scroll-margin-top:100px;
}

.testimonials-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:70px;
}

.testimonial-card{
    background:#fff;
    border-radius:22px;

    border-top:4px solid #0F6FFF;
    border-left:1px solid #E8EDF5;
    border-right:1px solid #E8EDF5;
    border-bottom:1px solid #E8EDF5;

    padding:35px 30px;
    min-height:270px;

    transition:.35s ease;
}

.testimonial-card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(15,111,255,.15);
    border-top-color:#0056D6;
}

.stars{
    color:#F4B400;
    font-size:28px;
    letter-spacing:4px;
    margin-bottom:20px;
}

.testimonial-card p{
    color:#6B7280;
    line-height:1.9;
    font-size:18px;
    margin-bottom:28px;
}

.testimonial-card h3{
    font-size:24px;
    color:#081B33;
    margin-bottom:8px;
}

.testimonial-card span{
    color:#6B7280;
    font-size:17px;
}

/* =====================================================
   FAQ SECTION
===================================================== */

.faq{
    padding:30px 0 90px;
    background:#F7FAFF;
}

#faq{
    scroll-margin-top:100px;
}

.faq-container{
    max-width:1100px;
    margin:30px auto 0;
}

.faq-item{
    background:#fff;

    border-top:4px solid #0F6FFF;
    border-left:1px solid #E8EDF5;
    border-right:1px solid #E8EDF5;
    border-bottom:1px solid #E8EDF5;

    border-radius:22px;
    box-shadow: border-box;
    margin-bottom:24px;

    overflow:hidden;

    transition:.35s ease;
}

.faq-item:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px rgba(15,111,255,.12);
}

.faq-question{
    width:100%;
    border:none;
    background:none;
    cursor:pointer;

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

    padding:24px 30px;

    text-align:left;
}

.faq-question span:first-child{
    font-size:28px;
    font-weight:600;
    color:#081B33;
}

.faq-icon{

    width:42px;
    height:42px;

    border-radius:50%;

    background:#EEF5FF;

    color:#0F6FFF;

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

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

    transition:.3s;
}

.faq-item:hover .faq-icon{
    background:#0F6FFF;
    color:#fff;
}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.faq-answer p{

    padding:0 35px 35px;

    color:#6B7280;

    line-height:1.8;

    font-size:18px;

}

.faq-item.active .faq-answer{
    max-height:300px;
}

.faq-item.active .faq-icon{
    background:#0F6FFF;
    color:#fff;
}

/* ==========================================
   CONTACT
========================================== */

.contact{
    padding-top: 50px;
    scroll-margin-top: 80px;
}

.contact-grid{
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    margin-top: 40px;
    align-items: stretch;
}

.contact-info-card{
    display: flex;
    flex-direction: column;
}

.contact-info-card{
    background:#fff;
    border:1px solid #E5EAF2;
    border-radius:22px;
    padding:38px 38px 32px;
    box-shadow:0 15px 35px rgba(15,23,42,.06);
}

.contact-form-card{
    background:#fff;
    border:1px solid #E5EAF2;
    border-radius:22px;
    padding:38px;
    padding-bottom: 32px;
    box-shadow:0 15px 35px rgba(15,23,42,.06);
     margin-bottom:20px;
}

.contact-info-card{
    margin-bottom: 0;
}

.contact-info-card h3,
.contact-form-card h3{
    font-size:28px;
    margin-bottom:14px;
    color:#0F172A;
}

.contact-info-card>p{
    color:#667085;
    line-height:1.7;
    margin-bottom:30px;
}

.contact-item{
    display:flex;
    gap:18px;
    align-items:flex-start;
    margin-bottom:24px;
}

.contact-item:last-child{
    margin-bottom:0;
}

.availability-item{
    margin-bottom: 15px;
}

.contact-item i{
    width:52px;
    height:52px;
    border-radius:14px;
    background:#EEF5FF;
    color:#2563EB;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:20px;
}

.contact-item h4{
    margin-bottom:5px;
    font-size:17px;
    color:#111827;
}

.contact-item a,
.contact-item span{
    color:#667085;
    text-decoration:none;
    transition:.3s;
}

.contact-item a:hover{
    color:#2563EB;
}

.contact-form-card form{
    display:flex;
    flex-direction:column;
    gap:20px;
}

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

.contact-form-card input,
.contact-form-card textarea{
    width:100%;
    padding:16px 18px;
    border:1px solid #D9E2EF;
    border-radius:14px;
    font-size:15px;
    outline:none;
    transition:.3s;
}

.contact-form-card input:focus,
.contact-form-card textarea:focus{
    border-color:#2563EB;
}

.contact-form-card textarea{
    resize:vertical;
    min-height:110px;
}

.contact-form-card button{
    width:100%;
    justify-content:center;
}

/* ==========================================
   ELECTRONIC SIGNATURE
========================================== */

.signature-section {
    margin-top: 2rem;
}

.signature-section h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}

.signature-note {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.signature-section .input-group {
    margin-bottom: 0;
}