/* =========================================
   SERVICES PAGE
========================================= */


/* =========================================
   HERO
========================================= */

.services-hero {

    padding: 100px 0;

    background:
        linear-gradient(
            120deg,
            #061525,
            #083b67,
            #0075b8
        );

    color: white;

    text-align: center;

}


.services-hero .hero-small-title {

    color: #00d9ff;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 18px;

}


.services-hero h1 {

    font-size: 58px;

    margin-bottom: 20px;

}


.services-hero p:last-child {

    max-width: 750px;

    margin: auto;

    color: #dbeafe;

    font-size: 18px;

    line-height: 1.7;

}



/* =========================================
   SERVICES
========================================= */

.services-section {

    padding: 90px 0;

    background: #f5f8fc;

}


.metrology-section {

    background: white;

}



/* =========================================
   SECTION HEADING
========================================= */

.section-heading {

    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;

}


.section-tag {

    color: #008cff;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;

    margin-bottom: 12px;

}


.section-heading h2 {

    color: #10243a;

    font-size: 40px;

    margin-bottom: 18px;

}


.section-heading p:last-child {

    color: #64748b;

    font-size: 17px;

    line-height: 1.7;

}



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

.services-grid {

    display: grid;

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

    gap: 30px;

}



/* =========================================
   SERVICE CARD
========================================= */

.service-card {

    background: white;

    border-radius: 14px;

    overflow: hidden;

    border: 1px solid #e5edf5;

    box-shadow:
        0 8px 25px
        rgba(
            0,
            50,
            100,
            0.08
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

}


.service-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 20px 45px
        rgba(
            0,
            80,
            160,
            0.18
        );

}



/* =========================================
   SERVICE IMAGE
========================================= */

.service-image {

    width: 100%;

    height: 240px;

    background: #eef4f8;

    overflow: hidden;

}


.service-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform 0.5s ease;

}


.service-card:hover
.service-image img {

    transform: scale(1.08);

}



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

.service-content {

    padding: 26px;

    position: relative;

}


.service-number {

    display: inline-block;

    color: #008cff;

    font-size: 13px;

    font-weight: bold;

    margin-bottom: 8px;

}


.service-content h3 {

    color: #10243a;

    font-size: 23px;

    margin-bottom: 12px;

}


.service-content p {

    color: #64748b;

    font-size: 15px;

    line-height: 1.65;

    min-height: 74px;

    margin-bottom: 20px;

}



/* =========================================
   OLD LINK STYLE
========================================= */

.service-content a {

    color: #0078d7;

    text-decoration: none;

    font-weight: bold;

    font-size: 15px;

}


.service-content a:hover {

    color: #004c99;

}



/* =========================================
   ENQUIRE NOW BUTTON
========================================= */

.enquire-button {

    display: inline-block;

    padding: 0;

    margin-top: 0;

    border: none;

    background: transparent;

    color: #0078d7;

    font-family: inherit;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

    transition:
        color 0.25s ease,
        transform 0.25s ease;

}


.enquire-button:hover {

    color: #004c99;

    transform: translateX(4px);

}



/* =========================================
   SERVICE CTA
========================================= */

.service-cta {

    padding: 80px 20px;

    background:
        linear-gradient(
            120deg,
            #061525,
            #0066a6
        );

    text-align: center;

    color: white;

}


.service-cta h2 {

    font-size: 38px;

    margin-bottom: 15px;

}


.service-cta p {

    color: #d9e8f5;

    font-size: 17px;

    margin-bottom: 30px;

}


.service-cta a {

    display: inline-block;

    padding: 14px 30px;

    background: #00a8ff;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-weight: bold;

}


.service-cta a:hover {

    background: #0088d1;

}



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

.footer {

    padding: 25px 0;

    background: #04101c;

    color: #9fb2c4;

    text-align: center;

    font-size: 14px;

}



/* =========================================
   ACTIVE MENU
========================================= */

.navbar a.active {

    color: #0066cc;

}



/* =====================================================
   ENQUIRY MODAL
===================================================== */

.enquiry-modal {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 99999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

}


.enquiry-modal.show {

    display: flex;

}



/* =====================================================
   DARK BACKGROUND
===================================================== */

.enquiry-overlay {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background:
        rgba(
            3,
            15,
            28,
            0.72
        );

    backdrop-filter: blur(4px);

}



/* =====================================================
   MODAL BOX
===================================================== */

.enquiry-box {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 700px;

    max-height: 92vh;

    overflow-y: auto;

    box-sizing: border-box;

    background: white;

    border-radius: 16px;

    padding: 35px;

    box-shadow:
        0 25px 80px
        rgba(
            0,
            0,
            0,
            0.30
        );

    animation:
        enquiryOpen
        0.25s
        ease;

}



/* =====================================================
   MODAL OPEN ANIMATION
===================================================== */

@keyframes enquiryOpen {

    from {

        opacity: 0;

        transform:
            translateY(25px)
            scale(0.97);

    }

    to {

        opacity: 1;

        transform:
            translateY(0)
            scale(1);

    }

}



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

.enquiry-close {

    position: absolute;

    top: 15px;

    right: 18px;

    width: 38px;

    height: 38px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #edf4f8;

    color: #263b50;

    font-size: 28px;

    line-height: 38px;

    text-align: center;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease;

}


.enquiry-close:hover {

    background: #0078d7;

    color: white;

}



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

.enquiry-header {

    padding-right: 40px;

    margin-bottom: 25px;

}


.enquiry-header p {

    color: #008cff;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 2px;

    margin-top: 0;

    margin-bottom: 8px;

}


.enquiry-header h2 {

    color: #10243a;

    font-size: 30px;

    margin-top: 0;

    margin-bottom: 8px;

}


.enquiry-header span {

    color: #64748b;

    font-size: 14px;

    line-height: 1.6;

}



/* =====================================================
   FORM ROW
===================================================== */

.enquiry-form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;

}



/* =====================================================
   FORM GROUP
===================================================== */

.enquiry-form-group {

    margin-bottom: 18px;

}


.enquiry-form-group label {

    display: block;

    color: #263b50;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 7px;

}


.enquiry-form-group input,
.enquiry-form-group textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 12px 13px;

    border: 1px solid #d7e1e9;

    border-radius: 6px;

    background: #fbfdff;

    color: #263b50;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.enquiry-form-group input:focus,
.enquiry-form-group textarea:focus {

    border-color: #008cff;

    box-shadow:
        0 0 0 3px
        rgba(
            0,
            140,
            255,
            0.10
        );

}



/* =====================================================
   SELECTED SERVICE
===================================================== */

.enquiry-form-group input[readonly] {

    background: #eef7fc;

    color: #0078d7;

    font-weight: 700;

    cursor: default;

}



/* =====================================================
   TEXTAREA
===================================================== */

.enquiry-form-group textarea {

    resize: vertical;

    min-height: 130px;

}



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

.enquiry-submit {

    width: 100%;

    padding: 14px;

    border: none;

    border-radius: 7px;

    background: #0078d7;

    color: white;

    font-size: 16px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;

}


.enquiry-submit:hover {

    background: #005fa8;

    transform: translateY(-1px);

}



/* =====================================================
   RESPONSIVE - TABLET
===================================================== */

@media (max-width: 1000px) {

    .services-grid {

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

    }

}



/* =====================================================
   RESPONSIVE - MOBILE
===================================================== */

@media (max-width: 700px) {


    .services-hero {

        padding: 70px 20px;

    }


    .services-hero h1 {

        font-size: 42px;

    }


    .section-heading h2 {

        font-size: 32px;

    }


    .services-grid {

        grid-template-columns: 1fr;

    }


    .service-image {

        height: 230px;

    }

}



/* =====================================================
   ENQUIRY MODAL - MOBILE
===================================================== */

@media (max-width: 600px) {


    .enquiry-modal {

        padding: 12px;

    }


    .enquiry-box {

        width: 100%;

        max-height: 94vh;

        padding: 28px 20px;

        border-radius: 12px;

    }


    .enquiry-header {

        padding-right: 35px;

    }


    .enquiry-header h2 {

        font-size: 25px;

    }


    .enquiry-header span {

        font-size: 13px;

    }


    .enquiry-form-row {

        grid-template-columns: 1fr;

        gap: 0;

    }


    .enquiry-close {

        top: 12px;

        right: 12px;

        width: 36px;

        height: 36px;

        line-height: 36px;

        font-size: 25px;

    }

}