/* =========================================================
   GRIDLABS SERVICE PAGE - #aa090a RED THEME
========================================================= */

.gridlabs_service_page {
    position: relative;
    padding: 75px 0 0;
    background:
        radial-gradient(circle at 5% 15%,
            rgba(96, 1, 1, 0.07),
            transparent 28%),
        radial-gradient(circle at 95% 85%,
            rgba(179, 10, 10, 0.06),
            transparent 30%),
        #ffffff;
    overflow: visible;
}




/* =========================================================
   CONTAINER
========================================================= */

.gridlabs_service_page>.container {
    position: relative;

    z-index: 2;

    width: min(1320px,
            calc(100% - 80px));

    max-width: 1320px;

    margin: 0 auto;

    padding: 0;
}


/* =========================================================
   SERVICE INTRO
========================================================= */

.service-intro {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(450px, 0.85fr);

    align-items: center;

    gap: 65px;

    padding: 35px 0 85px;
}


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

.service-intro-content {
    max-width: 680px;
}


.service-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #aa090a;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.4px;
}


.service-eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 10px;

    background: #aa090a;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.service-intro-content h2 {
    margin: 0 0 23px;

    max-width: 690px;

    color: #111827;

    font-size: clamp(40px,
            4vw,
            56px);

    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;
}


/* Red gradient heading */

.service-intro-content h2 span {
    display: inline;

    background: linear-gradient(90deg,
            #aa090a,
            #b30a0a);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.service-intro-content>p {
    max-width: 625px;

    margin: 0 0 28px;

    color: #667085;

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   GET FREE QUOTE
========================================================= */

.get-free-quote {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 22px;
    border-radius: 8px;
    background: #aa090a;
    color: #ffffff !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}


.get-free-quote:hover {
    background: #8a0505;

    color: #ffffff !important;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(96, 1, 1, 0.25);
}


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

.service-intro-image {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 480px;
}


/* Image background circle */

.service-image-shape {
    position: absolute;

    width: 430px;
    height: 430px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(96, 1, 1, 0.08);

    opacity: 0.8;
}


/* Image card */

.service-image-card {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 500px;

    border: 2px solid #aa090a;

    border-radius: 25px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 25px 60px rgba(96, 1, 1, 0.13),
        0 5px 20px rgba(96, 1, 1, 0.06);
}


.service-image-card img {
    display: block;

    width: 100%;

    height: 440px;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   CONTENT + FORM
========================================================= */

.service-content-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 410px;

    gap: 60px;

    align-items: start;
}


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

.service-content {
    max-width: 850px;

    min-width: 0;
}


.service-content h2 {
    margin: 0 0 27px;

    color: #111827;

    font-size: 39px;

    line-height: 1.18;

    font-weight: 800;

    letter-spacing: -1.2px;
}


/* Red heading */

.service-content h2 span {
    background: linear-gradient(90deg,
            #aa090a,
            #b30a0a);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* Content headings */

.service-content h4 {
    position: relative;

    margin: 28px 0 10px;

    padding-left: 17px;

    color: #172033;

    font-size: 18px;

    line-height: 1.4;

    font-weight: 700;
}


.service-content h4::before {
    content: "";

    position: absolute;

    left: 0;
    top: 3px;

    width: 4px;
    height: 23px;

    border-radius: 10px;

    background: #aa090a;
}


.service-content p {
    max-width: 850px;

    margin: 0 0 18px;

    color: #667085;

    font-size: 15px;

    line-height: 1.78;
}


/* Highlight */

.service-content .content-highlight {
    margin-top: 28px;

    padding: 20px 22px;

    border: 1px solid rgba(96, 1, 1, 0.12);

    border-radius: 14px;

    background: #fff8f8;

    color: #374151;
}


/* =========================================================
   SAME HOME PAGE FORM
========================================================= */


@media (max-width: 767px) {

    .gridlabs_service_page {

        padding: 55px 0 70px;
    }


    .gridlabs_service_page>.container {

        width: calc(100% - 30px);
    }


    .service-intro {

        grid-template-columns: 1fr;

        gap: 35px;

        padding: 20px 0 60px;

        text-align: center;
    }


    .service-intro-content {

        max-width: 100%;
    }


    .service-eyebrow {

        justify-content: center;
    }


    .service-intro-content h2 {

        max-width: 100%;

        font-size: 34px;

        line-height: 1.14;

        letter-spacing: -1px;
    }


    .service-intro-content>p {

        max-width: 100%;

        font-size: 14px;

        line-height: 1.75;
    }


    .service-intro-image {

        min-height: auto;

        padding: 10px 0 20px;
    }


    .service-image-shape {

        width: 290px;

        height: 290px;
    }


    .service-image-card {

        width: calc(100% - 15px);

        max-width: 500px;

        border-radius: 20px;
    }


    .service-image-card img {

        height: 300px;
    }


    .service-content-grid {

        gap: 40px;
    }


    .service-content h2 {

        font-size: 30px;

        line-height: 1.2;
    }


    .service-content h4 {

        font-size: 18px;
    }


    .service-content p {

        font-size: 14px;

        line-height: 1.75;
    }


    .service-form-column .glass-card {

        padding: 27px 18px 22px;

        border-radius: 16px;
    }


    .service-form-column .glass-card h2 {

        font-size: 23px;
    }


    .service-form-column .glass-card input[type="text"],
    .service-form-column .glass-card input[type="email"],
    .service-form-column .glass-card input[type="tel"],
    .service-form-column .glass-card select {

        height: 49px;
    }


    .service-form-column .glass-card textarea {

        height: 105px;

        min-height: 105px;
    }

}


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

@media (max-width: 480px) {

    .gridlabs_service_page>.container {

        width: calc(100% - 24px);
    }


    .service-intro-content h2 {

        font-size: 29px;
    }


    .service-image-shape {

        width: 250px;

        height: 250px;
    }


    .service-image-card {

        width: 100%;
    }


    .service-image-card img {

        height: 250px;
    }


    .service-content h2 {

        font-size: 27px;
    }


    .service-form-column .glass-card {

        padding: 25px 15px 20px;
    }


    .service-form-column .glass-card h2 {

        font-size: 21px;
    }


    .service-form-column .glass-card>p {

        font-size: 12px;
    }

}

.hero-wrapper {
    position: relative;
}

.hero-wrapper .right {
    will-change: transform;
}

.hero-wrapper .glass-card {
    width: 100%;
}

/* =========================================================
   FORM STICKY - CLEAN VERSION
   ========================================================= */

.service-content-grid {
    position: relative;
    overflow: visible;
}

.service-form-column {
    position: relative;
    align-self: start;
    min-width: 0;
}

.service-form-column .glass-card {
    position: sticky;
    top: 100px;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Keep intl-tel-input completely under its own library CSS. */
.service-form-column .iti {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.service-form-column .iti input.phone-input {
    width: 100%;
    padding-left: 92px;
}

.service-form-column .iti__country-container {
    z-index: 20;
}

@media (max-width: 991px) {
    .service-form-column .glass-card {
        position: relative;
        top: auto;
        max-width: 600px;
        margin: 0 auto;
    }
}
/* =========================================================
   ALL SERVICES PAGE
========================================================= */
.all-services-page .services-hero {
    padding-bottom: 70px;
}

.services-hero-actions {
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}

.services-view-link {
    color:#172033;
    text-decoration:none;
    font-size: 16px;
    font-weight: 600;
}
.services-view-link i { margin-left:6px; color:#aa090a; }

.services-mini-points {
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-top:28px;
}
.services-mini-points span {
    color: #3e4249;
    font-size: 17px;
    font-weight: 500;
}
.services-mini-points i { color:#aa090a; margin-right:5px; }

.services-hero-card {
    position:relative;
    box-shadow:0 30px 70px rgba(96,1,1,.14), 0 8px 25px rgba(96,1,1,.07);
}
.services-hero-card img {
    height:430px;
    object-fit:cover;
}

.services-floating-card {
    position:absolute;
    z-index:4;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:125px;
    padding:12px 15px;
    border:1px solid rgba(170,9,10,.12);
    border-radius:12px;
    background:rgba(255,255,255,.96);
    box-shadow:0 12px 30px rgba(16,24,40,.12);
}
.services-floating-card i {
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    border-radius:9px;background:#fff2f2;color:#aa090a;
}
.services-floating-card strong { display:block;color:#172033;font-size:17px;line-height:1.1; }
.services-floating-card small { display:block;color:#667085;font-size:10px;margin-top:2px; }
.services-floating-top { top:28px; right:-25px; }
.services-floating-bottom { bottom:28px; left:-25px; }

.services-page-heading {
    text-align:center;
    max-width:720px;
    margin:10px auto 45px;
}
.services-page-heading .service-eyebrow { margin-bottom:12px; }
.services-page-heading .service-eyebrow::before { display:none; }
.services-page-heading h2 {
    margin:0 0 12px;
    color:#111827;
    font-size:42px;
    line-height:1.15;
    font-weight:800;
    letter-spacing:-1.3px;
}
.services-page-heading h2 span {
    background:linear-gradient(90deg,#aa090a,#b30a0a);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}
.services-page-heading p {color: #3e4249;font-size: 17px;line-height: 1.4;margin:0;}

.all-services-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    margin-bottom:90px;
}

.all-service-card {
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:1px solid #eaecf0;
    border-radius:18px;
    background:#fff;
    box-shadow:0 8px 30px rgba(16,24,40,.055);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.all-service-card:hover {
    transform:translateY(-6px);
    border-color:rgba(170,9,10,.22);
    box-shadow:0 18px 45px rgba(16,24,40,.11);
}
.all-service-card.all-service-featured {
    grid-column:span 2;
    display:grid;
    grid-template-columns:1fr 1fr;
}
.all-service-image {
    height:190px;
    overflow:hidden;
    background:#fafafa;
}
.all-service-featured .all-service-image { height:100%;min-height:310px; }
.all-service-image img {
    width:100%;height:100%;display:block;object-fit:cover;
    transition:transform .5s ease;
}
.all-service-card:hover .all-service-image img { transform:scale(1.04); }
.all-service-body { padding:25px 25px 24px; }
.all-service-number {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 40px;
    height: 40px;
    margin-bottom:14px;
    border-radius: 50%;
    background:#fff2f2;
    color:#aa090a;
    font-size: 15px;
    font-weight: 600;
}
.all-service-body h3 {
    margin:0 0 10px;color:#172033;font-size:21px;line-height:1.25;font-weight:750;
}
.all-service-body p {
    margin:0 0 18px;
    color: #3e4249;
    font-size: 16px;
    line-height: 1.4;
}
.all-service-body a {
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#aa090a;
    text-decoration:none;
    font-size: 15px;
    font-weight: 600;
}
.all-service-body a i { transition:transform .25s ease; }
.all-service-card:hover .all-service-body a i { transform:translateX(4px); }
.all-service-tags { display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 18px; }
.all-service-tags span {
    padding:5px 9px;border-radius:20px;background:#f8f8f8;color:#667085;font-size:10px;font-weight:700;
}

.services-bottom-section {
    border-top:1px solid #eaecf0;
    padding-top:80px;
}
.services-why-content { max-width:820px; }
.services-why-content h2 { margin-top:4px; }
.services-benefit-list { display:grid;gap:18px;margin:30px 0; }
.services-benefit-list > div { display:flex;gap:13px;align-items:flex-start; }
.services-benefit-list > div > i { color:#aa090a;margin-top:4px; }
.services-benefit-list strong { color:#172033;font-size:15px; }
.services-benefit-list p { margin:4px 0 0;font-size:13px; }
.services-final-cta {
    margin-top:30px;padding:24px;border-radius:15px;
    background:linear-gradient(135deg,#fff7f7,#fff);
    border:1px solid rgba(170,9,10,.12);
}
.services-final-cta h3 { margin:0 0 7px;color:#172033;font-size:20px; }
.services-final-cta p { margin:0 0 16px; }
.services-final-cta .get-free-quote { display:inline-flex; }

@media (max-width: 1100px) {
    .all-services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .all-service-card.all-service-featured { grid-column:span 2; }
    .services-floating-top { right:5px; }
    .services-floating-bottom { left:5px; }
}
@media (max-width: 767px) {
    .all-services-page .services-hero { padding-bottom:55px; }
    .services-hero-actions { justify-content:center; }
    .services-mini-points { justify-content:center; gap:9px 15px; }
    .services-mini-points span { font-size:11px; }
    .services-hero-card img { height:300px; }
    .services-floating-card { transform:scale(.88); }
    .services-floating-top { top:12px;right:-5px; }
    .services-floating-bottom { bottom:12px;left:-5px; }
    .services-page-heading h2 { font-size:31px; }
    .all-services-grid { grid-template-columns:1fr;gap:18px;margin-bottom:65px; }
    .all-service-card.all-service-featured { grid-column:span 1;display:flex; }
    .all-service-featured .all-service-image { height:230px;min-height:0; }
    .all-service-image { height:210px; }
    .all-service-body { padding:22px 20px; }
    .services-bottom-section { padding-top:55px; }
}
@media (max-width: 480px) {
    .services-hero-card img { height:250px; }
    .services-floating-card { display:none; }
    .services-page-heading h2 { font-size:28px; }
}

/* =========================================================
   SERVICES PAGE - UNIFORM SERVICE CARDS / SEO LAYOUT
========================================================= */
.all-services-page .services-list-section {
    scroll-margin-top: 100px;
}

.all-services-page .all-services-grid {
    align-items: stretch;
}

.all-services-page .all-service-card {
    min-height: 0;
}

.all-services-page .all-service-image {
    height: 215px;
    flex: 0 0 215px;
    background: #fafafa;
}

.all-services-page .all-service-image img {
    object-fit: contain;
    object-position: center;
    padding: 26px;
    box-sizing: border-box;
}

.all-services-page .all-service-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 24px 25px 25px;
}

.all-services-page .all-service-body h3 {
    min-height: 27px;
}

.all-services-page .all-service-body p {
    flex: 1;
}

.all-services-page .all-service-body a {
    margin-top: auto;
}

/* Project CTA */
.services-project-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin: 10px 0 80px;
    padding: 34px 42px;
    border: 1px solid rgba(170, 9, 10, .08);
    border-radius: 18px;
    background: linear-gradient(100deg, #fff7f7 0%, #fffafa 52%, #fff 100%);
}

.services-project-cta > div {
    max-width: 720px;
}

.services-project-cta > div > span {
    display: block;
    margin-bottom: 7px;
    color: #aa090a;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.services-project-cta h2 {
    margin: 0 0 7px;
    color: #172033;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
}

.services-project-cta p {
    margin: 0;
    color: #3e4249;
    font-size: 16px;
    line-height: 1.65;
}

.services-project-cta .get-free-quote {
    flex: 0 0 auto;
    min-width: 165px;
    justify-content: center;
}

/* Why GridLabs */
.services-why-section {
    padding: 0 0 25px;
}

.services-why-section .services-page-heading {
    margin-bottom: 38px;
}

.services-why-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.services-why-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 10px;
}

.services-why-card > i {
    flex: 0 0 44px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #fff3f3;
    color: #aa090a;
    font-size: 17px;
    border: 1px solid #9c0008;
}

.services-why-card h3 {
    margin: 1px 0 6px;
    color: #172033;
    font-size: 20px;
    line-height: 1.35;
    font-weight: 700;
}

.services-why-card p {
    margin: 0;
    color: #3e4249;
    font-size: 16px;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    .services-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .all-services-page .all-service-image {
        height: 210px;
        flex-basis: 210px;
    }

    .all-services-page .all-service-image img {
        padding: 24px;
    }

    .services-project-cta {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 55px;
        padding: 27px 23px;
    }

    .services-project-cta h2 {
        font-size: 24px;
    }

    .services-project-cta .get-free-quote {
        width: 100%;
    }

    .services-why-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .services-why-card {
        padding: 12px 2px;
    }
}