/* =========================================================
   GK MILL CARE
   Main Website Styles
   Theme: Professional Blue / Rice Mill Industry
========================================================= */


/* =========================================================
   1. COLOR VARIABLES
========================================================= */

:root {

    --primary-blue: #0065B3;
    --deep-blue: #003B73;
    --dark-blue: #002D5A;

    --light-blue: #EAF5FF;
    --soft-blue: #F6FAFE;

    --white: #FFFFFF;

    --text-dark: #17202A;
    --text-medium: #52606D;
    --text-light: #718096;

    --border-light: #DCE8F2;

    --gold: #F5B942;
    --green: #249447;

    --shadow-small:
        0 4px 15px rgba(0, 59, 115, 0.08);

    --shadow-medium:
        0 12px 35px rgba(0, 59, 115, 0.12);

    --shadow-large:
        0 20px 60px rgba(0, 59, 115, 0.16);

    --radius-small: 8px;
    --radius-medium: 14px;
    --radius-large: 24px;

    --container-width: 1200px;

    --transition:
        all 0.3s ease;
}


/* =========================================================
   2. RESET
========================================================= */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    color: var(--text-dark);

    background: var(--white);

    line-height: 1.6;

}


/* Prevent horizontal scrolling */

html,
body {
    overflow-x: hidden;
}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
select,
textarea {

    font: inherit;

}


/* =========================================================
   3. CONTAINER
========================================================= */

.container {

    width: 90%;

    max-width:
        var(--container-width);

    margin:
        0 auto;

}


/* =========================================================
   4. HEADER
========================================================= */

.site-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    background:
        rgba(255, 255, 255, 0.97);

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid var(--border-light);

    transition:
        var(--transition);

}


.navbar {

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        30px;

}


/* =========================================================
   LOGO
========================================================= */

.brand {

    display:
        flex;

    align-items:
        center;

    flex-shrink:
        0;

}


.brand img {

    width:
        185px;

    height:
        auto;

}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-menu {

    display:
        flex;

    align-items:
        center;

    gap:
        32px;

    list-style:
        none;

    margin-left:
        auto;

}


.nav-menu a {

    position:
        relative;

    color:
        var(--text-dark);

    font-size:
        15px;

    font-weight:
        600;

    padding:
        8px 0;

    transition:
        var(--transition);

}


.nav-menu a::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        2px;

    background:
        var(--primary-blue);

    transition:
        var(--transition);

}


.nav-menu a:hover {

    color:
        var(--primary-blue);

}


.nav-menu a:hover::after {

    width:
        100%;

}


/* =========================================================
   QUOTATION BUTTON
========================================================= */

.nav-quote-button {

    background:
        var(--primary-blue);

    color:
        var(--white);

    padding:
        11px 20px;

    border-radius:
        8px;

    font-size:
        14px;

    font-weight:
        700;

    box-shadow:
        var(--shadow-small);

    transition:
        var(--transition);

}


.nav-quote-button:hover {

    background:
        var(--deep-blue);

    transform:
        translateY(-2px);

    box-shadow:
        var(--shadow-medium);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {

    display:
        none;

    border:
        none;

    background:
        transparent;

    color:
        var(--deep-blue);

    font-size:
        28px;

    cursor:
        pointer;

}


/* =========================================================
   5. HERO SECTION
========================================================= */

.hero-section {

    position:
        relative;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #F7FBFF 0%,
            #EAF5FF 55%,
            #FFFFFF 100%
        );

    padding:
        90px 0 100px;

}


.hero-section::before {

    content:
        "";

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    right:
        -180px;

    top:
        -180px;

    border-radius:
        50%;

    background:
        rgba(0, 101, 179, 0.08);

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        60px;

}


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

.hero-label {

    display:
        inline-block;

    color:
        var(--primary-blue);

    background:
        rgba(0, 101, 179, 0.08);

    padding:
        7px 14px;

    border-radius:
        30px;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1px;

    margin-bottom:
        20px;

}


.hero-text h1 {

    color:
        var(--deep-blue);

    font-size:
        clamp(42px, 5vw, 64px);

    line-height:
        1.08;

    letter-spacing:
        -1.5px;

    margin-bottom:
        24px;

}


.hero-text p {

    max-width:
        600px;

    color:
        var(--text-medium);

    font-size:
        18px;

    line-height:
        1.8;

    margin-bottom:
        32px;

}


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

.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}


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

.hero-image {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.hero-image img {

    width:
        100%;

    max-width:
        560px;

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-large);

}


/* =========================================================
   6. BUTTONS
========================================================= */

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        48px;

    padding:
        12px 24px;

    border-radius:
        8px;

    font-size:
        15px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        var(--transition);

}


.btn-primary {

    background:
        var(--primary-blue);

    color:
        var(--white);

    border:
        2px solid var(--primary-blue);

    box-shadow:
        var(--shadow-small);

}


.btn-primary:hover {

    background:
        var(--deep-blue);

    border-color:
        var(--deep-blue);

    transform:
        translateY(-3px);

    box-shadow:
        var(--shadow-medium);

}


.btn-outline {

    background:
        transparent;

    color:
        var(--primary-blue);

    border:
        2px solid var(--primary-blue);

}


.btn-outline:hover {

    background:
        var(--primary-blue);

    color:
        var(--white);

    transform:
        translateY(-3px);

}


.btn-white {

    background:
        var(--white);

    color:
        var(--primary-blue);

    border:
        2px solid var(--white);

}


.btn-white:hover {

    background:
        transparent;

    color:
        var(--white);

    transform:
        translateY(-3px);

}


/* =========================================================
   7. QUICK SERVICES
========================================================= */

.quick-services {

    position:
        relative;

    z-index:
        5;

    margin-top:
        -45px;

}


.service-highlights {

    display:
        grid;

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

    gap:
        18px;

}


.highlight-card {

    background:
        var(--white);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-medium);

    padding:
        26px 22px;

    box-shadow:
        var(--shadow-medium);

    transition:
        var(--transition);

}


.highlight-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(0, 101, 179, 0.3);

}


.highlight-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--light-blue);

    border-radius:
        12px;

    font-size:
        24px;

    margin-bottom:
        15px;

}


.highlight-card h3 {

    color:
        var(--deep-blue);

    font-size:
        17px;

    margin-bottom:
        7px;

}


.highlight-card p {

    color:
        var(--text-medium);

    font-size:
        14px;

}


/* =========================================================
   8. GENERAL SECTIONS
========================================================= */

.section {

    padding:
        100px 0;

}


.section-heading {

    max-width:
        700px;

    margin:
        0 auto 50px;

    text-align:
        center;

}


.section-label {

    display:
        inline-block;

    color:
        var(--primary-blue);

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    margin-bottom:
        10px;

}


.section-heading h2 {

    color:
        var(--deep-blue);

    font-size:
        clamp(32px, 4vw, 46px);

    line-height:
        1.15;

    margin-bottom:
        15px;

}


.section-heading p {

    color:
        var(--text-medium);

    font-size:
        16px;

}


/* =========================================================
   9. MACHINES
========================================================= */

.machines-section {

    background:
        var(--white);

}


.machine-grid {

    display:
        grid;

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

    gap:
        25px;

}


.machine-card {

    overflow:
        hidden;

    background:
        var(--white);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-medium);

    box-shadow:
        var(--shadow-small);

    transition:
        var(--transition);

}


.machine-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow-medium);

}


.machine-image {

    overflow:
        hidden;

    height:
        240px;

    background:
        var(--light-blue);

}


.machine-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.5s ease;

}


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

    transform:
        scale(1.06);

}


.machine-content {

    padding:
        25px;

}


.machine-category {

    color:
        var(--primary-blue);

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        1px;

}


.machine-content h3 {

    color:
        var(--deep-blue);

    font-size:
        22px;

    margin:
        8px 0 10px;

}


.machine-content p {

    color:
        var(--text-medium);

    font-size:
        14px;

    margin-bottom:
        18px;

}


.machine-content a {

    color:
        var(--primary-blue);

    font-size:
        14px;

    font-weight:
        700;

}


.machine-content a:hover {

    color:
        var(--deep-blue);

}


.section-button {

    display:
        flex;

    justify-content:
        center;

    margin-top:
        40px;

}


/* =========================================================
   10. RECOMMENDATION SECTION
========================================================= */

.recommendation-section {

    padding:
        90px 0;

    background:
        linear-gradient(
            135deg,
            var(--deep-blue),
            var(--primary-blue)
        );

}


.recommendation-box {

    display:
        grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:
        50px;

    align-items:
        center;

}


.recommendation-text
.section-label {

    color:
        #8FD2FF;

}


.recommendation-text h2 {

    color:
        var(--white);

    font-size:
        clamp(32px, 4vw, 46px);

    line-height:
        1.15;

    margin-bottom:
        18px;

}


.recommendation-text p {

    color:
        rgba(255,255,255,0.8);

    font-size:
        16px;

}


.recommendation-form {

    display:
        grid;

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

    gap:
        16px;

    background:
        var(--white);

    padding:
        28px;

    border-radius:
        var(--radius-medium);

    box-shadow:
        var(--shadow-large);

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.form-group label {

    color:
        var(--deep-blue);

    font-size:
        13px;

    font-weight:
        700;

}


.form-group select {

    width:
        100%;

    padding:
        13px;

    border:
        1px solid var(--border-light);

    border-radius:
        8px;

    outline:
        none;

    background:
        var(--white);

    color:
        var(--text-dark);

}


.form-group select:focus {

    border-color:
        var(--primary-blue);

}


.recommendation-form .btn {

    grid-column:
        1 / -1;

}


.recommendation-result {

    grid-column:
        1 / -1;

    color:
        var(--white);

    margin-top:
        10px;

}


/* =========================================================
   11. SERVICES
========================================================= */

.services-section {

    background:
        var(--soft-blue);

}


.services-grid {

    display:
        grid;

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

    gap:
        20px;

}


.service-card {

    background:
        var(--white);

    border:
        1px solid var(--border-light);

    border-radius:
        var(--radius-medium);

    padding:
        30px 25px;

    text-align:
        center;

    box-shadow:
        var(--shadow-small);

    transition:
        var(--transition);

}


.service-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow-medium);

}


.service-card > span {

    width:
        60px;

    height:
        60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 auto 20px;

    border-radius:
        50%;

    background:
        var(--light-blue);

    font-size:
        28px;

}


.service-card h3 {

    color:
        var(--deep-blue);

    font-size:
        19px;

    margin-bottom:
        10px;

}


.service-card p {

    color:
        var(--text-medium);

    font-size:
        14px;

}


/* =========================================================
   12. ABOUT SECTION
========================================================= */

.about-content {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        60px;

    align-items:
        center;

}


.about-image img {

    width:
        100%;

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow-medium);

}


.about-text h2 {

    color:
        var(--deep-blue);

    font-size:
        clamp(32px, 4vw, 46px);

    line-height:
        1.15;

    margin-bottom:
        20px;

}


.about-text p {

    color:
        var(--text-medium);

    margin-bottom:
        18px;

}


/* =========================================================
   13. QUOTATION SECTION
========================================================= */

.quotation-section {

    padding:
        90px 0;

    background:
        linear-gradient(
            135deg,
            var(--primary-blue),
            #0086DF
        );

    text-align:
        center;

}


.quotation-content {

    max-width:
        750px;

    margin:
        0 auto;

}


.quotation-content .section-label {

    color:
        #CCEAFF;

}


.quotation-content h2 {

    color:
        var(--white);

    font-size:
        clamp(34px, 4vw, 48px);

    margin-bottom:
        15px;

}


.quotation-content p {

    color:
        rgba(255,255,255,0.85);

    font-size:
        17px;

    margin-bottom:
        28px;

}


/* =========================================================
   14. CONTACT SECTION
========================================================= */

.contact-wrapper {

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        50px;

}


.contact-info {

    background:
        var(--light-blue);

    padding:
        35px;

    border-radius:
        var(--radius-medium);

}


.contact-info h3 {

    color:
        var(--deep-blue);

    font-size:
        25px;

    margin-bottom:
        5px;

}


.contact-info > p {

    color:
        var(--text-medium);

    margin-bottom:
        25px;

}


.contact-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        3px;

    padding:
        15px 0;

    border-bottom:
        1px solid rgba(0,59,115,0.12);

}


.contact-item strong {

    color:
        var(--deep-blue);

    font-size:
        13px;

}


.contact-item a {

    color:
        var(--primary-blue);

    font-weight:
        600;

}


.contact-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;

}


.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;

}


.contact-form input,
.contact-form textarea {

    width:
        100%;

    border:
        1px solid var(--border-light);

    border-radius:
        8px;

    padding:
        14px 16px;

    outline:
        none;

    background:
        var(--white);

    color:
        var(--text-dark);

}


.contact-form input:focus,
.contact-form textarea:focus {

    border-color:
        var(--primary-blue);

    box-shadow:
        0 0 0 3px rgba(0,101,179,0.08);

}


.contact-form textarea {

    resize:
        vertical;

}


/* =========================================================
   15. FOOTER
========================================================= */

.site-footer {

    background:
        #061D33;

    color:
        var(--white);

    padding:
        60px 0 20px;

}


.footer-content {

    display:
        grid;

    grid-template-columns:
        1.5fr 1fr 1fr;

    gap:
        50px;

    padding-bottom:
        40px;

}


.footer-brand img {

    width:
        210px;

    margin-bottom:
        15px;

}


.footer-brand p {

    color:
        rgba(255,255,255,0.65);

    max-width:
        300px;

}


.footer-links {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.footer-links h3 {

    color:
        var(--white);

    margin-bottom:
        10px;

    font-size:
        17px;

}


.footer-links a {

    color:
        rgba(255,255,255,0.65);

    font-size:
        14px;

    transition:
        var(--transition);

}


.footer-links a:hover {

    color:
        #73C7FF;

    transform:
        translateX(4px);

}


.footer-bottom {

    padding-top:
        20px;

    border-top:
        1px solid rgba(255,255,255,0.1);

    text-align:
        center;

}


.footer-bottom p {

    color:
        rgba(255,255,255,0.55);

    font-size:
        13px;

}


/* =========================================================
   16. FLOATING CONTACT BUTTONS
========================================================= */

.floating-contact {

    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        999;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.floating-contact a {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        90px;

    padding:
        11px 15px;

    border-radius:
        30px;

    color:
        var(--white);

    font-size:
        13px;

    font-weight:
        700;

    box-shadow:
        var(--shadow-medium);

    transition:
        var(--transition);

}


.floating-whatsapp {

    background:
        #1FBD5B;

}


.floating-call {

    background:
        var(--primary-blue);

}


.floating-contact a:hover {

    transform:
        translateY(-3px)
        scale(1.03);

}


/* =========================================================
   17. FORM PLACEHOLDER
========================================================= */

::placeholder {

    color:
        #9AA7B4;

}


/* =========================================================
   18. ACCESSIBILITY
========================================================= */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline:
        3px solid rgba(0,101,179,0.35);

    outline-offset:
        3px;

}


/* =========================================================
   END OF STYLE.CSS
========================================================= */

/* =========================================
   RECOMMENDATION RESULTS
========================================= */

#recommendationResult {
    margin-top: 30px;
}


/* Result Header */

.recommendation-header {
    margin-bottom: 22px;
}

.recommendation-label {
    display: inline-block;

    margin-bottom: 8px;

    padding: 6px 12px;

    border-radius: 30px;

    background: var(--light-blue);

    color: var(--primary-blue);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.8px;
}

.recommendation-header h3 {
    margin: 0 0 8px;

    color: var(--dark-blue);

    font-size: 26px;
}

.recommendation-header p {
    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================
   RECOMMENDATION SUMMARY
========================================= */

.recommendation-summary {
    display: grid;

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

    gap: 15px;

    margin-bottom: 25px;
}

.recommendation-summary > div {
    display: flex;

    flex-direction: column;

    gap: 5px;

    padding: 15px 18px;

    border: 1px solid #e2e8f0;

    border-radius: 10px;

    background: #ffffff;
}

.recommendation-summary strong {
    color: var(--dark-blue);

    font-size: 13px;
}

.recommendation-summary span {
    color: #64748b;

    font-size: 14px;
}


/* =========================================
   RECOMMENDATION LIST
========================================= */

.recommendation-list {
    display: grid;

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

    gap: 18px;
}


/* =========================================
   RECOMMENDATION CARD
========================================= */

.recommendation-card {
    display: flex;

    gap: 15px;

    padding: 20px;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 6px 20px rgba(0, 45, 90, 0.06);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.recommendation-card:hover {
    transform: translateY(-5px);

    border-color: #b9daf2;

    box-shadow:
        0 15px 30px rgba(0, 45, 90, 0.10);
}


/* Icon */

.recommendation-icon {
    flex-shrink: 0;

    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 12px;

    background: var(--light-blue);

    color: var(--primary-blue);

    font-size: 22px;
}


/* Content */

.recommendation-card-content {
    min-width: 0;
}

.recommendation-category {
    display: block;

    margin-bottom: 5px;

    color: var(--primary-blue);

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.6px;
}

.recommendation-card h3 {
    margin: 0 0 7px;

    color: var(--dark-blue);

    font-size: 18px;
}

.recommendation-card p {
    margin: 0 0 12px;

    color: #64748b;

    font-size: 13px;

    line-height: 1.6;
}


/* Why recommendation */

.recommendation-reason {
    display: flex;

    flex-direction: column;

    gap: 3px;

    padding-top: 10px;

    border-top: 1px solid #edf1f5;
}

.recommendation-reason strong {
    color: #334155;

    font-size: 12px;
}

.recommendation-reason span {
    color: #64748b;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================
   RECOMMENDATION ACTION
========================================= */

.recommendation-action {
    display: flex;

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

    gap: 20px;

    margin-top: 25px;

    padding: 20px;

    border-radius: 12px;

    background: var(--light-blue);
}

.recommendation-action p {
    margin: 0;

    color: var(--dark-blue);

    font-size: 14px;

    font-weight: 600;
}


/* =========================================
   EMPTY STATE
========================================= */

.recommendation-empty {
    padding: 30px;

    text-align: center;

    border: 1px dashed #b9c9d8;

    border-radius: 12px;

    background: #f8fbfe;
}

.recommendation-empty h3 {
    margin: 0 0 8px;

    color: var(--dark-blue);

    font-size: 20px;
}

.recommendation-empty p {
    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================
   LOADING
========================================= */

.recommendation-loading {
    display: flex;

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

    flex-direction: column;

    gap: 15px;

    min-height: 160px;

    color: #64748b;
}

.recommendation-loading p {
    margin: 0;

    font-size: 14px;
}


/* Loading Spinner */

.loading-spinner {
    width: 40px;
    height: 40px;

    border: 4px solid #dcecf8;

    border-top-color: var(--primary-blue);

    border-radius: 50%;

    animation:
        recommendationSpin 0.8s linear infinite;
}

@keyframes recommendationSpin {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================
   SCROLL REVEAL
========================================= */

.reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.show {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================
   ACTIVE NAVIGATION
========================================= */

.nav-links a.active {
    color: var(--primary-blue);
}

.nav-links a.active::after {
    width: 60%;
}


/* =========================================
   HEADER AFTER SCROLL
========================================= */

.header.scrolled {
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08);
}


/* =========================================
   FORM ERROR
========================================= */

.input-error {
    border-color: #dc3545 !important;

    box-shadow:
        0 0 0 3px rgba(220, 53, 69, 0.08) !important;
}


/* =========================================
   MOBILE RECOMMENDATION RESULTS
========================================= */

@media (max-width: 768px) {

    .recommendation-summary {
        grid-template-columns: 1fr;
    }

    .recommendation-list {
        grid-template-columns: 1fr;
    }

    .recommendation-action {
        flex-direction: column;

        align-items: stretch;

        text-align: center;
    }

    .recommendation-action .btn {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .recommendation-card {
        padding: 16px;

        gap: 12px;
    }

    .recommendation-icon {
        width: 42px;
        height: 42px;

        font-size: 18px;
    }

    .recommendation-card h3 {
        font-size: 16px;
    }

}

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

.page-hero {
    padding: 90px 0;

    background:
        linear-gradient(
            135deg,
            var(--dark-blue),
            var(--primary-blue)
        );

    color: #ffffff;

    text-align: center;
}

.page-hero-content {
    max-width: 800px;

    margin: auto;
}

.page-hero h1 {
    margin: 15px 0;

    font-size: 46px;

    line-height: 1.15;
}

.page-hero p {
    max-width: 680px;

    margin: auto;

    color: rgba(255, 255, 255, 0.88);

    font-size: 17px;

    line-height: 1.7;
}


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

.section-heading {
    max-width: 760px;

    margin: 0 auto 45px;

    text-align: center;
}

.section-label {
    display: inline-block;

    margin-bottom: 10px;

    color: var(--primary-blue);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.section-heading h2 {
    margin: 0 0 15px;

    color: var(--dark-blue);

    font-size: 36px;

    line-height: 1.2;
}

.section-heading p {
    margin: 0;

    color: #64748b;

    font-size: 15px;

    line-height: 1.8;
}


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

.service-card {
    position: relative;

    padding: 30px;

    border: 1px solid #e2e8f0;

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 8px 25px rgba(0, 45, 90, 0.06);
}

.service-icon {
    display: flex;

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

    width: 55px;
    height: 55px;

    margin-bottom: 20px;

    border-radius: 14px;

    background: var(--light-blue);

    font-size: 25px;
}

.service-number {
    position: absolute;

    top: 25px;
    right: 25px;

    color: #d8e7f3;

    font-size: 30px;

    font-weight: 800;
}

.service-card h3 {
    margin: 0 0 12px;

    color: var(--dark-blue);

    font-size: 21px;
}

.service-card > p {
    margin: 0 0 20px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}

.service-card ul {
    margin: 0 0 22px;

    padding: 0;

    list-style: none;
}

.service-card li {
    position: relative;

    margin-bottom: 9px;

    padding-left: 20px;

    color: #475569;

    font-size: 13px;
}

.service-card li::before {
    content: "✓";

    position: absolute;

    left: 0;

    color: var(--green);

    font-weight: 700;
}

.service-link {
    color: var(--primary-blue);

    font-size: 13px;

    font-weight: 700;

    text-decoration: none;
}

.service-link:hover {
    text-decoration: underline;
}


/* =========================================
   PROCESS
========================================= */

.service-process {
    background: var(--soft-background);
}

.process-grid {
    display: grid;

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

    gap: 20px;
}

.process-step {
    position: relative;

    padding: 25px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 14px;

    text-align: center;
}

.process-number {
    display: flex;

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

    width: 48px;
    height: 48px;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: var(--primary-blue);

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}

.process-step h3 {
    margin: 0 0 8px;

    color: var(--dark-blue);

    font-size: 18px;
}

.process-step p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.6;
}


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

.service-cta {
    background: var(--light-blue);

    text-align: center;
}

.cta-content {
    max-width: 750px;

    margin: auto;
}

.cta-content h2 {
    margin: 0 0 15px;

    color: var(--dark-blue);

    font-size: 36px;
}

.cta-content p {
    margin: 0 auto 25px;

    max-width: 650px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.7;
}

.cta-content .hero-buttons {
    justify-content: center;
}


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

@media (max-width: 768px) {

    .page-hero {
        padding: 65px 0;
    }

    .page-hero h1 {
        font-size: 34px;
    }

    .page-hero p {
        font-size: 15px;
    }

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

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

    .cta-content h2 {
        font-size: 30px;
    }

}


@media (max-width: 480px) {

    .page-hero {
        padding: 55px 0;
    }

    .page-hero h1 {
        font-size: 29px;
    }

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

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

    .service-card {
        padding: 23px;
    }

    .cta-content h2 {
        font-size: 27px;
    }

}

/* =========================================
   QUOTATION PAGE
========================================= */

.quotation-page {
    background: var(--soft-background);
}

.quotation-layout {
    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 60px;

    align-items: start;
}


/* =========================================
   QUOTATION INFORMATION
========================================= */

.quotation-info {
    padding-top: 15px;
}

.quotation-info h2 {
    margin: 0 0 18px;

    color: var(--dark-blue);

    font-size: 38px;

    line-height: 1.2;
}

.quotation-info > p {
    margin: 0 0 30px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================
   QUOTATION POINTS
========================================= */

.quotation-points {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.quotation-point {
    display: flex;

    gap: 15px;

    align-items: flex-start;
}

.quotation-point-icon {
    flex-shrink: 0;

    display: flex;

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

    width: 48px;
    height: 48px;

    border-radius: 12px;

    background: var(--light-blue);

    font-size: 21px;
}

.quotation-point h3 {
    margin: 0 0 5px;

    color: var(--dark-blue);

    font-size: 16px;
}

.quotation-point p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================
   QUOTATION FORM
========================================= */

.quotation-form-wrapper {
    position: relative;
}

.quotation-form {
    padding: 35px;

    border: 1px solid #e2e8f0;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 15px 45px rgba(0, 45, 90, 0.08);
}

.form-heading {
    margin-bottom: 25px;
}

.form-heading h2 {
    margin: 0 0 7px;

    color: var(--dark-blue);

    font-size: 25px;
}

.form-heading p {
    margin: 0;

    color: #64748b;

    font-size: 13px;
}


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

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 13px;

    font-weight: 600;
}

.form-group label span {
    color: #dc3545;
}

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

    padding: 12px 14px;

    border: 1px solid #d7e0e8;

    border-radius: 8px;

    outline: none;

    background: #ffffff;

    color: #17202a;

    font-family: inherit;

    font-size: 14px;

    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;

    min-height: 120px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #94a3b8;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-blue);

    box-shadow:
        0 0 0 3px rgba(0, 101, 179, 0.08);
}


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

.quotation-submit {
    width: 100%;

    margin-top: 5px;

    border: none;

    cursor: pointer;

    font-family: inherit;
}

.form-note {
    margin: 12px 0 0;

    color: #94a3b8;

    font-size: 11px;

    line-height: 1.5;

    text-align: center;
}


/* =========================================
   DIRECT CTA
========================================= */

.quotation-direct {
    background: var(--light-blue);
}

.quotation-direct-content {
    display: flex;

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

    gap: 40px;
}

.quotation-direct-content h2 {
    margin: 0 0 10px;

    color: var(--dark-blue);

    font-size: 30px;
}

.quotation-direct-content p {
    max-width: 650px;

    margin: 0;

    color: #64748b;

    font-size: 14px;

    line-height: 1.7;
}

.quotation-direct-content .hero-buttons {
    flex-shrink: 0;
}


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

@media (max-width: 900px) {

    .quotation-layout {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .quotation-info {
        padding-top: 0;
    }

}


@media (max-width: 768px) {

    .quotation-info h2 {
        font-size: 31px;
    }

    .quotation-form {
        padding: 25px 20px;
    }

    .quotation-direct-content {
        flex-direction: column;

        align-items: flex-start;
    }

    .quotation-direct-content h2 {
        font-size: 27px;
    }

}


@media (max-width: 480px) {

    .quotation-info h2 {
        font-size: 27px;
    }

    .quotation-point-icon {
        width: 42px;
        height: 42px;

        font-size: 18px;
    }

}

/* =========================================
   HEADER LOGO SIZE
========================================= */

.site-header .logo img {
    width: 115px;
    height: 115px;
    object-fit: contain;
    display: block;
}

.site-header .logo {
    display: flex;
    align-items: center;
}
@media (max-width: 768px) {

    .site-header .logo img {
        width: 85px;
        height: 85px;
    }

}

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

.site-header .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.site-header .logo img {
    width: 105px;
    height: 105px;
    object-fit: contain;
}

.site-header .logo-text {
    display: flex;
    align-items: baseline;
    font-size: 30px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -0.2px;
}

.site-header .logo-g {
    color: #0065B3;
}

.site-header .logo-k {
    color: #249447;
}

.site-header .logo-name {
    color: #003B73;
    font-size: 25px;
    font-weight: 700;
    margin-left: 6px;
}

@media (max-width: 768px) {

    .site-header .logo {
        gap: 8px;
    }

    .site-header .logo img {
        width: 75px;
        height: 75px;
    }

    .site-header .logo-text {
        font-size: 20px;
    }
    

}

/* =========================================================
   MOBILE FIXES - HOMEPAGE CARDS & RECOMMENDATION
========================================================= */

@media (max-width: 768px) {

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

    .quick-services {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
        overflow: hidden;
    }

    .quick-service-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /* =========================================
       RECOMMENDATION
    ========================================= */

    .recommendation-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 30px;
    }

    .recommendation-info {
        width: 100%;
        min-width: 0;
    }

    .recommendation-form {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

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

    .recommendation-form input,
    .recommendation-form select,
    .recommendation-form textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .recommendation-form button {
        width: 100%;
    }

}


@media (max-width: 480px) {

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

    .quick-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .quick-service-card {
        padding: 18px 12px;
    }


    /* =========================================
       RECOMMENDATION
    ========================================= */

    .recommendation-wrapper {
        gap: 25px;
    }

    .recommendation-info h2 {
        font-size: 29px;
        line-height: 1.15;
    }

    .recommendation-info p {
        font-size: 14px;
        line-height: 1.7;
    }

    .recommendation-form {
        padding: 22px 18px;
        border-radius: 16px;
    }

}


@media (max-width: 360px) {

    /* Very small screens */

    .quick-services {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   GK MILL CARE - CURRENT PAGE COMPONENT COMPATIBILITY
   Shared styles for all current page markup.
========================================================= */

/* Header state / active navigation */
.site-header.scrolled {
    box-shadow: 0 6px 24px rgba(0, 45, 90, 0.10);
}

.nav-menu a.active {
    color: var(--primary-blue);
}

.nav-menu a.active::after {
    width: 60%;
}

/* About layouts */
.about-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: start;
}

.about-highlight {
    display: grid;
    gap: 16px;
}

.about-list {
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
}

.about-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 22px;
    color: #475569;
    line-height: 1.6;
}

.about-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
}

/* Contact page layouts */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: stretch;
}

.contact-details {
    padding: 30px 8px 30px 0;
}

.contact-details > h2 {
    margin-bottom: 14px;
}

.contact-details > p {
    max-width: 560px;
    margin-bottom: 26px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
    padding: 15px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    background: #fff;
}

.contact-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--light-blue);
    color: var(--primary-blue);
    font-weight: 800;
}

.contact-info-item span {
    display: block;
    margin-bottom: 3px;
    color: #64748b;
    font-size: 12px;
}

.contact-info-item strong,
.contact-info-item a {
    display: block;
    color: var(--dark-blue);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.55;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-info-item a:hover {
    color: var(--accent-orange-dark);
}

.contact-info-item > div:last-child {
    min-width: 0;
}

.contact-form-wrapper {
    min-width: 0;
    align-self: stretch;
    padding: 34px;
    border: 1px solid var(--border-light);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 15px 45px rgba(0, 45, 90, 0.08);
}

.form-header {
    margin-bottom: 25px;
}

.form-header h2 {
    margin: 8px 0;
    color: var(--dark-blue);
    font-size: 28px;
}

.form-header p {
    margin: 0;
    color: #64748b;
    line-height: 1.7;
}

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

.contact-form .form-group {
    margin-bottom: 18px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.btn-full {
    width: 100%;
}

/* Service page */
.main-services {
    background: var(--soft-background);
}

.services-intro {
    background: #fff;
}

.service-benefits {
    background: #fff;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.service-grid .service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.service-grid .service-card a {
    margin-top: auto;
}

.service-grid .service-card {
    min-width: 0;
}

.service-card .service-icon {
    flex-shrink: 0;
}

.service-card .service-number {
    line-height: 1;
}

/* Machines page */
.machines-intro,
.machine-catalogue {
    background: #fff;
}

.machine-catalogue .machine-grid {
    align-items: stretch;
}

.machine-catalogue .machine-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.machine-catalogue .machine-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.machine-catalogue .machine-content .btn {
    margin-top: auto;
    align-self: flex-start;
}

.complete-solution {
    padding: 90px 0;
    background: var(--light-blue);
    text-align: center;
}

.complete-solution-content {
    max-width: 760px;
    margin: 0 auto;
}

.complete-solution-content h2 {
    margin: 10px 0 15px;
    color: var(--dark-blue);
    font-size: 38px;
    line-height: 1.2;
}

.complete-solution-content p {
    max-width: 650px;
    margin: 0 auto 25px;
    color: #64748b;
    line-height: 1.7;
}

/* Footer variants */
.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
    gap: 35px;
    padding-bottom: 35px;
}

.footer-grid .footer-brand img {
    width: 180px;
    max-width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.footer-grid .footer-contact h4,
.footer-grid .footer-links h4 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 16px;
}

.footer-grid .footer-contact p {
    margin: 0 0 10px;
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    line-height: 1.6;
}

.footer-grid .footer-links {
    gap: 9px;
}

.footer-grid .footer-links a {
    line-height: 1.5;
}

.footer {
    background: #061D33;
    color: #fff;
    padding: 60px 0 20px;
}

/* Floating button variants used by different pages */
.floating-actions {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.floating-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    box-shadow: var(--shadow-medium);
}

.floating-quote {
    background: var(--primary-blue);
}

.floating-whatsapp {
    background: #20b95b;
}

.floating-call {
    background: var(--primary-blue);
}

/* Image placeholder when actual machinery/project photos are not yet supplied */
.image-placeholder,
.machine-image.image-placeholder {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
    box-sizing: border-box;
    border-radius: var(--radius-medium);
    background: linear-gradient(135deg, #eaf5ff, #f7fbff);
    color: var(--deep-blue);
    text-align: center;
    font-weight: 700;
}

/* Scroll reveal: JS adds .visible, not .show */
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Prevent accidental horizontal overflow from long content */
html,
body {
    max-width: 100%;
}

* {
    box-sizing: border-box;
}
/* ================================
   TOP INFORMATION BAR
================================ */

.top-bar {
  width: 100%;
  background: #101a2f;
  color: #ffffff;
  min-height: 34px;
  display: flex;
  align-items: center;
}

.top-bar-inner {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.top-bar span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.4px;
  line-height: 1.2;
  text-transform: uppercase;
}

.top-bar span:last-child {
  text-transform: none;
  letter-spacing: 1px;
}


/* =========================================================
   GK MILL CARE — MODERN 2026 UI LAYER
========================================================= */

:root{
  --accent-orange:#f45b0a;
  --accent-orange-dark:#d94700;
  --ink:#0c1830;
  --muted:#64748b;
  --surface:#f7faff;
  --glass:rgba(255,255,255,.78);
  --orange-soft:#fff1e9;
}

/* Top / bottom header bars */
.top-bar{
  min-height:34px;
  background:#0d172c;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.top-bar-inner{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.top-bar span{
  font-family:"Courier New",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.header-service-bar{
  position:relative;
  z-index:998;
  background:#fff;
  border-bottom:1px solid #e6edf5;
  box-shadow:0 3px 14px rgba(12,24,48,.04);
}
.header-service-inner{
  min-height:38px;
  display:flex;
  align-items:center;
  gap:25px;
  overflow:auto;
  scrollbar-width:none;
}
.header-service-inner::-webkit-scrollbar{display:none}
.header-service-inner > span{
  white-space:nowrap;
  color:#506177;
  font-size:11px;
  font-weight:700;
}
.header-service-inner i{
  color:var(--accent-orange);
  font-style:normal;
  margin-right:5px;
}
.service-bar-link{
  margin-left:auto;
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--accent-orange-dark);
  font-weight:800;
  font-size:11px;
  cursor:pointer;
}
.service-bar-link span{margin-left:5px}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(215,226,238,.8);
  box-shadow:0 8px 30px rgba(12,24,48,.045);
}
.navbar{min-height:78px}
.logo{display:flex;align-items:center;gap:11px;flex-shrink:0}
.logo img{width:40px;height:40px;object-fit:contain}
.logo-text{display:flex;align-items:baseline;gap:0;font-size:22px;font-weight:900;letter-spacing:-.7px;color:var(--ink)}
.logo-g{color:var(--primary-blue)}
.logo-k{color:#22a35a}
.logo-name{color:var(--ink);margin-left:1px}
.nav-menu a{font-size:13px;font-weight:750;color:#24354e}
.nav-menu a.active,.nav-menu a:hover{color:var(--accent-orange)}
.nav-menu a::after{background:var(--accent-orange);height:3px;border-radius:10px}
.nav-quote-button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:0;
  background:var(--accent-orange);
  color:#fff;
  padding:14px 19px;
  border-radius:0;
  box-shadow:none;
  cursor:pointer;
  font-size:13px;
  font-weight:850;
  letter-spacing:.1px;
}
.nav-quote-button:hover{background:var(--accent-orange-dark);transform:none}
.mobile-menu-button{
  width:42px;height:42px;border-radius:10px;background:#0d172c;color:#fff;
}

/* Hero */
.hero-section{
  background:
    radial-gradient(circle at 78% 18%,rgba(244,91,10,.12),transparent 25%),
    radial-gradient(circle at 10% 85%,rgba(0,101,179,.09),transparent 30%),
    linear-gradient(135deg,#f8fbff 0%,#eef7ff 56%,#fff 100%);
  padding:90px 0 110px;
}
.hero-section::after{
  content:"";
  position:absolute;
  width:300px;height:300px;
  right:5%;bottom:-160px;
  border-radius:50%;
  border:1px solid rgba(244,91,10,.2);
  box-shadow:0 0 0 35px rgba(244,91,10,.035),0 0 0 70px rgba(0,101,179,.025);
}
.hero-text h1{color:var(--ink);font-weight:900;letter-spacing:-2.8px}
.hero-text h1::first-line{color:var(--ink)}
.hero-label{
  background:var(--orange-soft);
  color:var(--accent-orange-dark);
  border-left:3px solid var(--accent-orange);
  border-radius:0 999px 999px 0;
}
.hero-buttons .btn-primary{
  background:var(--accent-orange);
  border-color:var(--accent-orange);
}
.hero-buttons .btn-primary:hover{background:var(--accent-orange-dark);border-color:var(--accent-orange-dark)}
.hero-buttons .btn-outline{border-color:#0d172c;color:#0d172c}
.hero-buttons .btn-outline:hover{background:#0d172c;color:#fff;border-color:#0d172c}
.hero-image img{border-radius:28px;box-shadow:0 25px 70px rgba(12,24,48,.16);border:8px solid rgba(255,255,255,.8)}

/* Quick services */
.quick-services{margin-top:-42px}
.highlight-card{
  border:1px solid rgba(0,101,179,.10);
  border-radius:18px;
  padding:25px 22px;
  position:relative;
  overflow:hidden;
}
.highlight-card::after{
  content:"";
  position:absolute;right:-35px;top:-35px;width:100px;height:100px;border-radius:50%;
  background:rgba(244,91,10,.06);
}
.highlight-icon{background:linear-gradient(135deg,#eaf5ff,#fff1e9);color:var(--primary-blue);border:1px solid #e4edf6}

/* Section typography */
.section-label{color:var(--accent-orange-dark);letter-spacing:2px}
.section-heading h2,.about-text h2,.quotation-content h2{color:var(--ink);font-weight:900;letter-spacing:-1.5px}

/* Machine cards */
.machine-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.machine-card{
  position:relative;
  border:1px solid #e2eaf2;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 8px 30px rgba(12,24,48,.06);
}
.machine-card::before{
  content:"";
  position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--primary-blue),var(--accent-orange));
  opacity:.9;
}
.machine-card:hover{transform:translateY(-9px);box-shadow:0 22px 45px rgba(12,24,48,.13)}
.machine-image{height:245px;position:relative;background:#edf5fb}
.machine-image::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(5,20,40,.2));
  pointer-events:none;
}
.machine-image-badge{
  position:absolute;left:14px;bottom:14px;z-index:2;
  padding:7px 10px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#20334e;
  font-size:10px;font-weight:800;letter-spacing:.4px;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
}
.machine-content{padding:24px}
.machine-category{color:var(--accent-orange-dark);font-weight:800;letter-spacing:1.2px}
.machine-content h3{color:var(--ink);font-weight:850;letter-spacing:-.4px}
.machine-content a{display:inline-flex;gap:7px;color:var(--primary-blue);font-weight:850}
.machine-content a:hover{color:var(--accent-orange-dark)}
.machine-card-featured{border-color:rgba(244,91,10,.22)}

/* Recommendation */
.recommendation-section{
  background:
    radial-gradient(circle at 85% 15%,rgba(244,91,10,.09),transparent 20%),
    linear-gradient(135deg,#f5f9fd,#eef7ff);
}
.recommendation-box{
  border:1px solid rgba(0,101,179,.12);
  border-radius:28px;
  box-shadow:0 25px 70px rgba(12,24,48,.08);
}

/* Services */
.service-card{
  border:1px solid #e4ebf2;
  border-radius:20px;
  box-shadow:0 8px 25px rgba(12,24,48,.05);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.service-card:hover{transform:translateY(-7px);box-shadow:0 20px 40px rgba(12,24,48,.10);border-color:rgba(244,91,10,.2)}
.service-icon{background:linear-gradient(135deg,#eaf5ff,#fff1e9)!important}

/* Location / coverage */
.location-section{padding:100px 0;background:#f7f9fc;border-top:1px solid #e7edf3}
.location-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:75px;align-items:center}
.location-copy{padding-left:4px}
.location-label{display:flex;align-items:center;gap:13px}
.location-label::before{content:"";width:21px;height:2px;background:var(--accent-orange)}
.location-copy h2{font-size:clamp(44px,5vw,64px);line-height:.98;letter-spacing:-3px;color:var(--ink);margin:12px 0 28px;font-weight:900}
.location-copy h2 span{color:var(--accent-orange)}
.location-copy p{max-width:410px;color:#617187;font-size:16px;line-height:1.8;margin-bottom:25px}
.text-arrow-link{border:0;border-bottom:1px solid var(--accent-orange);background:none;color:var(--ink);font-weight:900;font-size:15px;padding:4px 0;cursor:pointer}
.text-arrow-link span{margin-left:7px;color:var(--accent-orange)}
.india-map-card{
  min-height:370px;
  position:relative;
  overflow:hidden;
  border:1px solid #dce6ef;
  background:#edf4f8;
  box-shadow:0 18px 50px rgba(12,24,48,.08);
}
.map-grid-pattern{
  position:absolute;inset:0;
  opacity:.72;
  background:
    linear-gradient(135deg,rgba(255,255,255,.72) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.72) 50%,rgba(255,255,255,.72) 75%,transparent 75%);
  background-size:52px 52px;
}
.map-service-badge{
  position:absolute;top:26px;left:26px;
  display:flex;align-items:center;gap:11px;
  background:#fff;padding:13px 16px;
  box-shadow:0 8px 25px rgba(12,24,48,.08);
}
.map-pin{color:var(--accent-orange);font-size:25px}
.map-service-badge strong{display:block;color:var(--ink);font-size:12px}
.map-service-badge small{display:block;color:#7a899a;font-size:10px;margin-top:2px}
.map-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:var(--accent-orange);box-shadow:0 0 0 7px rgba(244,91,10,.14),0 0 0 13px rgba(244,91,10,.05);animation:mapPulse 2.6s infinite}
.dot-1{top:33%;left:58%}.dot-2{top:58%;left:72%;animation-delay:.8s}.dot-3{top:46%;left:39%;animation-delay:1.4s}
.state-tags{position:absolute;left:24px;right:24px;bottom:24px;display:flex;flex-wrap:wrap;gap:6px}
.state-tags span{background:rgba(255,255,255,.9);color:#617187;padding:6px 10px;font-size:10px;border:1px solid #e4ebf2}
@keyframes mapPulse{50%{transform:scale(1.08);box-shadow:0 0 0 9px rgba(244,91,10,.10),0 0 0 17px rgba(244,91,10,.035)}}

/* Footer */
.site-footer{background:#08162b;padding-top:72px}
.footer-links a:hover{color:#ff9c6d;transform:translateX(4px)}

/* Floating actions */
.floating-contact a{border-radius:999px;padding:12px 17px}

/* Quotation modal */
body.modal-open{overflow:hidden}
.quote-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
.quote-modal.is-open{opacity:1;visibility:visible}
.quote-modal-backdrop{position:absolute;inset:0;background:rgba(5,16,35,.78);backdrop-filter:blur(6px)}
.quote-modal-dialog{
  position:relative;z-index:1;width:min(100%,760px);max-height:calc(100vh - 40px);overflow:auto;
  background:#fff;padding:38px;border-radius:2px;box-shadow:0 35px 100px rgba(0,0,0,.28);
  transform:translateY(16px) scale(.985);transition:transform .3s ease;
}
.quote-modal.is-open .quote-modal-dialog{transform:translateY(0) scale(1)}
.quote-modal-close{position:absolute;top:15px;right:17px;width:34px;height:34px;border:0;background:transparent;color:#627086;font-size:30px;line-height:1;cursor:pointer}
.modal-eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-orange-dark);font:700 10px "Courier New",monospace;letter-spacing:1.6px}
.modal-eyebrow::before{content:"";width:20px;height:2px;background:var(--accent-orange)}
.quote-modal-heading{margin-bottom:23px}
.quote-modal-heading h2{margin:14px 0 5px;color:var(--ink);font-size:32px;line-height:1.1;letter-spacing:-1.2px;font-weight:900}
.quote-modal-heading p{color:#718096;font-size:13px}
.quote-modal-form{display:grid;gap:15px}
.modal-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.quote-modal .form-group{display:flex;flex-direction:column;gap:7px}
.quote-modal label{font-size:11px;font-weight:800;color:#53627a}
.quote-modal input,.quote-modal textarea{
  width:100%;border:1px solid #d9e2ec;background:#fff;padding:12px 13px;border-radius:0;color:var(--ink);outline:none;
}
.quote-modal input:focus,.quote-modal textarea:focus{border-color:var(--primary-blue);box-shadow:0 0 0 3px rgba(0,101,179,.08)}
.modal-submit{width:100%;border:0;background:var(--accent-orange);color:#fff;min-height:44px;padding:12px 18px;font-weight:900;cursor:pointer}
.modal-submit:hover{background:var(--accent-orange-dark)}
.modal-submit span{margin-left:8px}
.modal-note{font-size:10px;color:#8895a6;text-align:center;margin:0}

/* Make all quote triggers look interactive */
[data-quote-open]{cursor:pointer}

/* Scroll */
.site-header.scrolled{box-shadow:0 10px 30px rgba(12,24,48,.10)}


/* Final recommendation/location corrections */
.recommendation-section{
  padding:100px 0;
  background:linear-gradient(135deg,#f5faff 0%,#edf6ff 55%,#f8fbff 100%);
  overflow:hidden;
}
.recommendation-box{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:48px;
  align-items:center;
  padding:42px;
  border:1px solid #d9e8f5;
  border-radius:28px;
  background:rgba(255,255,255,.42);
  box-shadow:0 25px 70px rgba(0,55,105,.09);
}
.recommendation-text .section-label{color:#0065b3!important;}
.recommendation-text h2{color:#062b57!important;font-size:clamp(34px,4vw,50px);line-height:1.08;margin:14px 0 18px;}
.recommendation-text p{color:#62758b!important;max-width:480px;line-height:1.75;}
.recommendation-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  background:#fff;
  padding:30px;
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,50,100,.10);
}
.recommendation-form .form-group{min-width:0}
.recommendation-form .btn{grid-column:1/-1;min-height:52px}
.recommendation-result{grid-column:1/-1;color:#17202a;background:#fff;border-radius:18px;padding:0;}
.recommendation-empty,.recommendation-loading{color:#53627a!important}

/* Functional coverage panel */
.state-tags button{
  border:1px solid #e0e8ef;
  background:rgba(255,255,255,.94);
  color:#52657a;
  padding:7px 10px;
  font:600 10px/1.2 inherit;
  cursor:pointer;
  transition:all .2s ease;
}
.state-tags button:hover,.state-tags button.is-selected{
  background:#0065b3;
  border-color:#0065b3;
  color:#fff;
  transform:translateY(-2px);
}
.location-status{
  margin-top:14px;
  font-size:12px;
  color:#6b7c90;
  min-height:18px;
}
.location-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px}
.location-action-button{
  border:1px solid #0065b3;
  background:#fff;
  color:#0065b3;
  border-radius:999px;
  padding:10px 15px;
  font-weight:800;
  cursor:pointer;
}
.location-action-button:hover{background:#0065b3;color:#fff}

@media (max-width:768px){
  .recommendation-box{grid-template-columns:1fr;padding:26px;gap:28px}
  .recommendation-form{grid-template-columns:1fr;padding:22px}
  .recommendation-form .form-group,.recommendation-form .btn{grid-column:1}
  .location-grid{grid-template-columns:1fr;gap:35px}
  .india-map-card{min-height:330px}
}
@media (max-width:480px){
  .recommendation-section{padding:70px 0}
  .recommendation-box{padding:18px;border-radius:20px}
  .recommendation-form{padding:18px}
}

.location-action-button:disabled{opacity:.6;cursor:wait}


/* ==========================================================
   FINAL GK MILL CARE VISUAL SYSTEM
   Pepsi Blue dominant + Dark Orange accent
   Alignment-safe refinements
========================================================== */
:root {
  --primary-blue: #0065B3;
  --deep-blue: #003B73;
  --dark-blue: #002D5A;
  --accent-orange: #D94F00;
  --accent-orange-dark: #B83F00;
  --accent-orange-soft: #FFF1E8;
  --light-blue: #EAF5FF;
  --soft-blue: #F6FAFE;
  --text-dark: #17202A;
  --text-medium: #52606D;
  --border-light: #DCE8F2;
}

/* Global readability */
body { background:#fff; color:var(--text-dark); overflow-x:hidden; }
.container { width:min(1200px, calc(100% - 40px)); margin-inline:auto; }

/* Orange is reserved for action, blue for identity */
.btn-primary,
.nav-quote-button,
.modal-submit,
.location-action-button,
.service-bar-link:hover {
  background:var(--accent-orange) !important;
  border-color:var(--accent-orange) !important;
  color:#fff !important;
}
.btn-primary:hover,
.nav-quote-button:hover,
.modal-submit:hover,
.location-action-button:hover { background:var(--accent-orange-dark) !important; }
.btn-outline { border-color:var(--primary-blue); color:var(--primary-blue); }
.btn-outline:hover { background:var(--primary-blue); color:#fff; }
.section-label,.hero-label,.eyebrow { color:var(--primary-blue); }

/* Header hierarchy */
.top-bar { background:var(--dark-blue) !important; }
.site-header { background:#fff; border-bottom:1px solid #e3edf5; }
.header-service-bar { background:var(--primary-blue) !important; color:#fff; }
.header-service-bar .service-bar-link { color:#fff; }

/* Cards and grids: consistent geometry */
.machine-grid,
.service-grid,
.services-grid,
.features-grid,
.process-grid,
.service-highlights { align-items:stretch; }
.machine-card,
.service-card,
.highlight-card,
.feature-item,
.process-step { height:100%; box-sizing:border-box; }
.machine-card { display:flex; flex-direction:column; overflow:hidden; }
.machine-card .machine-content { display:flex; flex:1; flex-direction:column; }
.machine-card .btn { margin-top:auto; align-self:flex-start; }
.machine-image { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.service-card,.highlight-card { display:flex; flex-direction:column; }
.service-card .service-link { margin-top:auto; }

/* Recommendation */
.recommendation-section { background:linear-gradient(135deg,#f6faff 0%,#eaf5ff 100%) !important; }
.recommendation-form { border:1px solid #d6e7f5; box-shadow:0 18px 45px rgba(0,59,115,.10); }
.recommendation-form h3 { color:var(--dark-blue); }

/* Contact / quotation alignment */
.contact-grid,
.quotation-layout,
.about-grid,
.map-layout { align-items:stretch; }
.contact-form-wrapper,
.quotation-form-wrapper { height:100%; box-sizing:border-box; }
.contact-info-list { display:grid; gap:16px; }
.contact-info-item { min-height:68px; box-sizing:border-box; }

/* Service map */
.service-map-section { padding:80px 0; }
.map-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:42px; }
.map-copy { display:flex; flex-direction:column; justify-content:center; }
.map-copy h2 { color:var(--dark-blue); margin:10px 0 14px; }
.map-copy p { color:var(--text-medium); line-height:1.8; }
.map-contact-strip { margin:22px 0 26px; padding:16px 18px; background:#fff; border:1px solid var(--border-light); border-left:4px solid var(--accent-orange); border-radius:12px; display:flex; flex-direction:column; gap:4px; }
.map-contact-strip span { color:var(--text-medium); font-size:14px; }
.map-frame-wrap { min-height:390px; border-radius:22px; overflow:hidden; border:1px solid #d7e6f2; box-shadow:0 18px 45px rgba(0,45,90,.12); background:#eaf5ff; }
.map-frame-wrap iframe { width:100%; height:100%; min-height:390px; border:0; display:block; }

/* Footer contact consistency */
.footer-contact p,.footer-contact a { word-break:break-word; }
.footer-founder { color:#dce9f4; font-size:13px; margin:12px 0 0; }
.footer-founder strong { color:#fff; }

@media (max-width:768px) {
  .container { width:min(94%,1200px); }
  .map-layout { grid-template-columns:1fr; gap:24px; }
  .map-frame-wrap,.map-frame-wrap iframe { min-height:300px; }
  .machine-grid,.service-grid,.services-grid,.features-grid,.process-grid { grid-template-columns:1fr; }
}


/* ==========================================================
   FINAL BRAND + ALIGNMENT OVERRIDES
   GK Mill Care: Pepsi Blue dominant + Dark Orange accent
========================================================== */
:root{
  --primary-blue:#0065B3;
  --deep-blue:#003B73;
  --dark-blue:#002D5A;
  --accent-orange:#D95A00;
  --accent-orange-dark:#B84400;
  --accent-orange-soft:#FFF2E8;
  --light-blue:#EAF5FF;
  --soft-blue:#F6FAFE;
  --text-dark:#17202A;
  --text-medium:#52606D;
  --border-light:#DCE8F2;
  --gold:#D95A00;
  --green:#0065B3;
}

/* Brand hierarchy */
.logo-g{color:#0065B3 !important}.logo-k{color:#249447 !important}.logo-name{color:#002D5A !important}
.nav-menu a:hover,.nav-menu a.active{color:#0065B3 !important}
.nav-menu a.active::after{background:#D95A00 !important}
.section-label,.hero-label,.eyebrow{color:#0065B3 !important}

/* Strong blue/orange visual language */
.btn-primary,.nav-quote-button,.modal-submit,.location-action-button{background:#D95A00 !important;border-color:#D95A00 !important;color:#fff !important}
.btn-primary:hover,.nav-quote-button:hover,.modal-submit:hover,.location-action-button:hover{background:#B84400 !important;border-color:#B84400 !important}
.btn-outline{border-color:#0065B3 !important;color:#0065B3 !important}.btn-outline:hover{background:#0065B3 !important;color:#fff !important}
.header-service-bar{background:#0065B3 !important}
.top-bar{background:#002D5A !important}

/* Remove legacy green/gold accents */
.service-card li::before,.about-list li::before{color:#0065B3 !important}

/* All catalogue cards share geometry */
.machine-grid,.service-grid,.services-grid,.features-grid,.process-grid,.highlight-grid{align-items:stretch !important}
.machine-card,.service-card,.highlight-card,.feature-item,.process-step{height:100% !important}
.machine-card{display:flex !important;flex-direction:column !important}
.machine-content{display:flex !important;flex-direction:column !important;flex:1 !important}
.machine-content a,.service-link{margin-top:auto !important}
.machine-image{aspect-ratio:16/10 !important;overflow:hidden !important}
.machine-image img{width:100% !important;height:100% !important;object-fit:cover !important}

/* Contact and map */
.contact-grid{align-items:stretch !important}
.contact-info,.contact-form-wrapper{height:100% !important}
.contact-info-list{display:grid !important;gap:14px !important}
.contact-info-item{min-height:72px !important;align-items:center !important}
.map-layout{align-items:stretch !important}
.map-frame-wrap{min-height:420px !important}
.map-frame-wrap iframe{min-height:420px !important}

/* No fake image placeholders */
.image-placeholder{display:none !important}

/* Floating actions must perform the actual actions */
.floating-contact{position:fixed !important;right:20px !important;bottom:20px !important;z-index:1100 !important;display:flex !important;gap:10px !important}
.floating-whatsapp,.floating-call{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-width:86px !important;height:46px !important;border-radius:999px !important;color:#fff !important;font-weight:800 !important;box-shadow:0 10px 28px rgba(0,45,90,.20) !important}
.floating-whatsapp{background:#1F9D55 !important}.floating-call{background:#D95A00 !important}

/* Modal layering */
.quote-modal{z-index:3000 !important}.quote-modal-dialog{max-height:90vh !important;overflow:auto !important}

@media(max-width:768px){
 .floating-contact{right:12px !important;bottom:12px !important}.floating-whatsapp,.floating-call{min-width:78px !important;height:42px !important;font-size:13px !important}
 .map-frame-wrap,.map-frame-wrap iframe{min-height:300px !important}
 .machine-grid,.service-grid,.services-grid,.features-grid,.process-grid,.highlight-grid{grid-template-columns:1fr !important}
}

.map-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.location-status{margin-top:10px;font-size:13px;color:#52606D;min-height:20px}