/* =========================================================
   GK CONSULTANCY
   UNIVERSAL SERVICE PAGE CSS
   BLUE PROFESSIONAL THEME
========================================================= */

:root {

    --primary-blue: #0b3d91;
    --primary-blue-dark: #06275f;
    --secondary-blue: #1261b5;
    --accent-blue: #2d8cff;

    --light-blue: #eef6ff;
    --very-light-blue: #f7fbff;

    --white: #ffffff;
    --black: #101828;

    --text-dark: #172033;
    --text-muted: #667085;

    --border: #e4eaf2;

    --shadow:
        0 15px 45px rgba(9, 48, 100, 0.10);

    --shadow-hover:
        0 25px 60px rgba(9, 48, 100, 0.16);

}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family: 'Poppins', sans-serif;

    color: var(--text-dark);

    background: var(--white);

    overflow-x: hidden;

}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

button {
    font-family: inherit;
}


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

.service-container {

    width: min(1180px, 92%);

    margin: 0 auto;

}


/* =========================================================
   SECTIONS
========================================================= */

.service-section {

    padding: 100px 0;

}

.service-white {
    background: #ffffff;
}

.service-light {
    background: #f8fafc;
}

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

.service-dark {

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(45,140,255,.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #061b3d,
            #092f67
        );

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading-center {

    max-width: 800px;

    margin: 0 auto 55px;

    text-align: center;

}

.section-label {

    display: inline-block;

    margin-bottom: 12px;

    font-family: 'Cinzel', serif;

    font-size: 0.72rem;

    font-weight: 700;

    letter-spacing: 0.16em;

    color: var(--primary-blue);

}

.section-label.light {

    color: #8fc4ff;

}

.section-title {

    margin: 0;

    font-family: 'Playfair Display', serif;

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    line-height: 1.15;

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

}

.section-title.light {

    color: #ffffff;

}

.section-subtitle {

    max-width: 720px;

    margin: 18px auto 0;

    color: var(--text-muted);

    font-size: 0.98rem;

    line-height: 1.8;

}

.section-subtitle.light {

    color: rgba(255,255,255,.72);

}

.blue-divider {

    width: 65px;

    height: 3px;

    margin: 18px 0 28px;

    background:
        linear-gradient(
            90deg,
            var(--primary-blue),
            var(--accent-blue)
        );

    border-radius: 20px;

}

.blue-divider.center {

    margin-left: auto;
    margin-right: auto;

}


/* =========================================================
   TWO COLUMN
========================================================= */

.service-two-column {

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    gap: 75px;

    align-items: center;

}


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

.service-image-wrap {

    position: relative;

}

.service-main-image {

    width: 100%;

    min-height: 520px;

    object-fit: cover;

    border-radius: 14px;

    box-shadow: var(--shadow);

}

.experience-badge {

    position: absolute;

    right: -25px;

    bottom: 35px;

    width: 145px;

    height: 145px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

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

    color: #ffffff;

    border-radius: 50%;

    border: 8px solid #ffffff;

    box-shadow: var(--shadow);

}

.experience-badge strong {

    font-family: 'Playfair Display', serif;

    font-size: 2rem;

    line-height: 1;

}

.experience-badge span {

    margin-top: 6px;

    font-size: .68rem;

    line-height: 1.4;

}


/* =========================================================
   WHY ITEMS
========================================================= */

.why-item {

    display: flex;

    gap: 18px;

    margin-bottom: 28px;

}

.why-icon {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #edf5ff;

    border: 1px solid #d9eaff;

    border-radius: 10px;

}

.why-icon svg {

    width: 24px;

    height: 24px;

    fill: none;

    stroke: var(--primary-blue);

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.why-item h4 {

    margin: 0 0 7px;

    font-size: 1rem;

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

}

.why-item p {

    margin: 0;

    color: var(--text-muted);

    font-size: .88rem;

    line-height: 1.7;

}

.why-cta {

    margin-top: 32px;

}


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

.service-btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 24px;

    border-radius: 7px;

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

    color: #ffffff;

    font-size: .82rem;

    font-weight: 600;

    box-shadow:
        0 10px 25px rgba(11,61,145,.22);

    transition: .3s ease;

}

.service-btn-primary:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(11,61,145,.30);

    color: #ffffff;

}

.service-btn-outline {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 13px 23px;

    border: 1px solid rgba(45,140,255,.6);

    border-radius: 7px;

    color: var(--primary-blue);

    background: #ffffff;

    font-size: .82rem;

    font-weight: 600;

    transition: .3s ease;

}

.service-btn-outline:hover {

    background: var(--primary-blue);

    color: #ffffff;

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

}


/* =========================================================
   TIMELINE
========================================================= */

.timeline-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 55px;

}

.timeline-month {

    position: relative;

    display: flex;

    gap: 20px;

    padding-bottom: 28px;

    margin-bottom: 28px;

    border-bottom:
        1px solid
        rgba(255,255,255,.09);

}

.timeline-dot {

    width: 52px;

    height: 52px;

    flex: 0 0 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

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

    color: #ffffff;

    font-size: .65rem;

    font-weight: 700;

    box-shadow:
        0 0 0 6px rgba(45,140,255,.08);

}

.timeline-month h4 {

    margin: 0 0 7px;

    color: #ffffff;

    font-size: 1rem;

}

.timeline-month p {

    margin: 0;

    color: rgba(255,255,255,.64);

    font-size: .85rem;

    line-height: 1.7;

}


/* =========================================================
   MONITORING CARD
========================================================= */

.monitoring-card {

    padding: 32px;

    background:
        rgba(255,255,255,.045);

    border:
        1px solid
        rgba(100,170,255,.18);

    border-radius: 12px;

}

.monitoring-card h4 {

    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 22px;

    color: #8fc4ff;

    font-size: 1rem;

}

.monitoring-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}

.monitoring-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding: 14px 16px;

    background:
        rgba(255,255,255,.045);

    border-radius: 6px;

}

.monitoring-item span {

    color: rgba(255,255,255,.82);

    font-size: .84rem;

}

.monitoring-item strong {

    color: #73b5ff;

    font-size: .75rem;

}


/* =========================================================
   CASE STUDY
========================================================= */

.case-study {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    background: #ffffff;

    border-radius: 14px;

    overflow: hidden;

    box-shadow: var(--shadow);

}

.case-image img {

    width: 100%;

    height: 100%;

    min-height: 480px;

    object-fit: cover;

}

.case-content {

    padding: 50px 45px;

}

.case-badge {

    display: inline-block;

    margin-bottom: 20px;

    padding: 7px 12px;

    border-radius: 30px;

    background: #edf5ff;

    color: var(--primary-blue);

    font-family: 'Cinzel', serif;

    font-size: .65rem;

    letter-spacing: .08em;

    font-weight: 700;

}

.case-content h3 {

    margin: 0 0 25px;

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

    font-family: 'Playfair Display', serif;

    font-size: 1.6rem;

}

.case-content h3 span {

    display: block;

    margin-top: 5px;

    font-family: 'Poppins', sans-serif;

    font-size: .85rem;

    font-weight: 500;

    color: var(--text-muted);

}

.case-block {

    padding-left: 17px;

    margin-bottom: 22px;

    border-left: 3px solid;

}

.case-block.challenge {

    border-color: #ef4444;

}

.case-block.approach {

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

}

.case-block.result {

    border-color: #16a34a;

}

.case-block small {

    display: block;

    margin-bottom: 6px;

    font-family: 'Cinzel', serif;

    font-size: .65rem;

    letter-spacing: .1em;

    font-weight: 700;

    color: var(--primary-blue);

}

.case-block.challenge small {

    color: #dc2626;

}

.case-block.result small {

    color: #16a34a;

}

.case-block p {

    margin: 0;

    color: var(--text-muted);

    font-size: .86rem;

    line-height: 1.7;

}

.case-stats {

    display: flex;

    flex-wrap: wrap;

    gap: 35px;

    margin-top: 30px;

}

.case-stats div {

    text-align: center;

}

.case-stats strong {

    display: block;

    font-family: 'Playfair Display', serif;

    color: var(--primary-blue);

    font-size: 1.8rem;

}

.case-stats span {

    display: block;

    margin-top: 3px;

    color: var(--text-muted);

    font-size: .7rem;

}


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

.faq-wrapper {

    max-width: 860px;

    margin: auto;

}

.faq-item {

    margin-bottom: 12px;

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

    border-radius: 8px;

    overflow: hidden;

    background: #ffffff;

    transition: .3s ease;

}

.faq-item.open {

    border-color: #bdd8f5;

    box-shadow:
        0 10px 30px rgba(11,61,145,.07);

}

.faq-q {

    width: 100%;

    padding: 20px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border: 0;

    background: #ffffff;

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

    text-align: left;

    cursor: pointer;

    font-size: .9rem;

    font-weight: 600;

}

.faq-q i {

    color: var(--primary-blue);

    transition: .3s ease;

}

.faq-item.open .faq-q i {

    transform: rotate(180deg);

}

.faq-a {

    display: grid;

    grid-template-rows: 0fr;

    transition: .35s ease;

}

.faq-item.open .faq-a {

    grid-template-rows: 1fr;

}

.faq-a-inner {

    overflow: hidden;

    padding: 0 22px;

    color: var(--text-muted);

    font-size: .86rem;

    line-height: 1.8;

}

.faq-item.open .faq-a-inner {

    padding-bottom: 22px;

}


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

.testimonial-grid {

    display: grid;

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

    gap: 25px;

}

.testimonial-card {

    padding: 30px;

    background: #ffffff;

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

    border-radius: 12px;

    box-shadow:
        0 8px 25px rgba(9,48,100,.05);

    transition: .3s ease;

}

.testimonial-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow);

}

.stars {

    margin-bottom: 17px;

    color: #f5b700;

    letter-spacing: 3px;

}

.testimonial-card p {

    margin: 0 0 22px;

    color: var(--text-muted);

    font-size: .86rem;

    line-height: 1.8;

}

.testimonial-card strong {

    display: block;

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

    font-size: .9rem;

}

.testimonial-card span {

    display: block;

    margin-top: 4px;

    color: #8a95a5;

    font-size: .72rem;

}


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

.related-grid {

    display: grid;

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

    gap: 20px;

}

.related-card {

    position: relative;

    padding: 28px 24px;

    background: #ffffff;

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

    border-radius: 10px;

    transition: .35s ease;

}

.related-card:hover {

    transform: translateY(-8px);

    border-color: #b9d8f7;

    box-shadow: var(--shadow);

}

.related-icon {

    margin-bottom: 18px;

    color: var(--primary-blue);

    font-size: 2rem;

}

.related-card h4 {

    margin: 0 0 10px;

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

    font-size: .98rem;

}

.related-card p {

    margin: 0 0 18px;

    color: var(--text-muted);

    font-size: .8rem;

    line-height: 1.7;

}

.related-card span {

    color: var(--primary-blue);

    font-size: .72rem;

    font-weight: 700;

}

.related-card span i {

    margin-left: 5px;

    transition: .3s ease;

}

.related-card:hover span i {

    transform: translateX(5px);

}


/* =========================================================
   CLIENTS
========================================================= */

.clients-section {

    padding: 70px 0;

    overflow: hidden;

    background: #f7f9fc;

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

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

}

.clients-label {

    margin-bottom: 30px;

    text-align: center;

    color: #778399;

    font-family: 'Cinzel', serif;

    font-size: .7rem;

    letter-spacing: .18em;

    font-weight: 700;

}

.clients-track-wrap {

    overflow: hidden;

    margin-bottom: 20px;

}

.clients-track {

    display: flex;

    width: max-content;

    gap: 55px;

    animation:
        clientsMove 35s linear infinite;

}

.clients-track.reverse {

    animation:
        clientsMoveReverse 40s linear infinite;

}

.clients-track span {

    white-space: nowrap;

    color: #526173;

    font-size: .82rem;

    font-weight: 600;

}

@keyframes clientsMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}

@keyframes clientsMoveReverse {

    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }

}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

    position: relative;

    padding: 100px 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(52,145,255,.22),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #051a3b,
            #073b7c
        );

}

.final-cta-content {

    max-width: 850px;

    margin: auto;

    text-align: center;

}

.final-cta h2 {

    margin: 0;

    color: #ffffff;

    font-family: 'Playfair Display', serif;

    font-size: clamp(
        2rem,
        4vw,
        3.2rem
    );

    line-height: 1.2;

}

.final-cta h2 span {

    color: #6eb3ff;

}

.final-cta p {

    max-width: 680px;

    margin: 22px auto 32px;

    color: rgba(255,255,255,.72);

    font-size: .95rem;

    line-height: 1.8;

}

.final-buttons {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

}


/* =========================================================
   BLOG
========================================================= */

.blog-grid {

    display: grid;

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

    gap: 25px;

}

.blog-card {

    overflow: hidden;

    background: #ffffff;

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

    border-radius: 12px;

    transition: .3s ease;

}

.blog-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow);

}

.blog-card > img {

    width: 100%;

    height: 220px;

    object-fit: cover;

}

.blog-body {

    padding: 25px;

}

.blog-tag {

    display: inline-block;

    margin-bottom: 10px;

    color: var(--primary-blue);

    font-family: 'Cinzel', serif;

    font-size: .62rem;

    font-weight: 700;

    letter-spacing: .1em;

}

.blog-body h4 {

    margin: 0 0 10px;

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

    font-family: 'Playfair Display', serif;

    font-size: 1.05rem;

    line-height: 1.4;

}

.blog-body p {

    margin: 0 0 18px;

    color: var(--text-muted);

    font-size: .82rem;

    line-height: 1.7;

}

.blog-body a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: var(--primary-blue);

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .08em;

}


/* =========================================================
   FLOATING BUTTONS
========================================================= */

.floating-wa,
.floating-call {

    position: fixed;

    right: 22px;

    z-index: 1000;

}

.floating-wa {

    bottom: 90px;

}

.floating-call {

    bottom: 25px;

}

.floating-wa-btn,
.floating-call-btn {

    width: 55px;

    height: 55px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(0,0,0,.20);

    transition: .3s ease;

}

.floating-wa-btn {

    background: #25d366;

    font-size: 1.6rem;

}

.floating-call-btn {

    background: var(--primary-blue);

    font-size: 1rem;

}

.floating-wa-btn:hover,
.floating-call-btn:hover {

    transform: scale(1.08);

    color: #ffffff;

}


/* =========================================================
   BACK TOP
========================================================= */

.back-top {

    position: fixed;

    right: 22px;

    bottom: 160px;

    width: 42px;

    height: 42px;

    border: 0;

    border-radius: 7px;

    background: var(--primary-blue);

    color: #ffffff;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: .3s ease;

    z-index: 999;

}

.back-top.show {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/* =========================================================
   FADE UP
========================================================= */

.fade-up {

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.fade-up.visible {

    opacity: 1;

    transform: translateY(0);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .service-section {
        padding: 80px 0;
    }

    .service-two-column {

        grid-template-columns: 1fr;

        gap: 50px;

    }

    .service-main-image {

        min-height: 430px;

    }

    .experience-badge {

        right: 20px;

    }

    .timeline-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .related-grid {

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

    }

    .testimonial-grid {

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

    }

    .blog-grid {

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

    }

}


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

@media (max-width: 700px) {

    .service-container {

        width: 91%;

    }

    .service-section {

        padding: 65px 0;

    }

    .section-heading-center {

        margin-bottom: 40px;

    }

    .section-title {

        font-size: 2rem;

    }

    .section-subtitle {

        font-size: .86rem;

    }

    .service-two-column {

        gap: 35px;

    }

    .service-main-image {

        min-height: 330px;

        border-radius: 10px;

    }

    .experience-badge {

        width: 105px;

        height: 105px;

        right: 12px;

        bottom: 18px;

        border-width: 5px;

    }

    .experience-badge strong {

        font-size: 1.5rem;

    }

    .experience-badge span {

        font-size: .57rem;

    }

    .why-item {

        gap: 13px;

    }

    .why-icon {

        width: 42px;

        height: 42px;

        flex-basis: 42px;

    }

    .why-item h4 {

        font-size: .9rem;

    }

    .why-item p {

        font-size: .8rem;

    }

    .timeline-month {

        gap: 14px;

    }

    .timeline-dot {

        width: 45px;

        height: 45px;

        flex-basis: 45px;

    }

    .monitoring-card {

        padding: 22px 18px;

    }

    .monitoring-item {

        align-items: flex-start;

        flex-direction: column;

        gap: 5px;

    }

    .case-study {

        grid-template-columns: 1fr;

    }

    .case-image img {

        min-height: 280px;

        max-height: 320px;

    }

    .case-content {

        padding: 30px 22px;

    }

    .case-content h3 {

        font-size: 1.35rem;

    }

    .case-stats {

        justify-content: space-between;

        gap: 12px;

    }

    .case-stats strong {

        font-size: 1.45rem;

    }

    .testimonial-grid {

        grid-template-columns: 1fr;

    }

    .related-grid {

        grid-template-columns: 1fr;

    }

    .blog-grid {

        grid-template-columns: 1fr;

    }

    .blog-card > img {

        height: 210px;

    }

    .final-cta {

        padding: 75px 0;

    }

    .final-buttons {

        flex-direction: column;

        align-items: stretch;

    }

    .service-btn-primary,
    .service-btn-outline {

        width: 100%;

    }

    .floating-wa,
    .floating-call {

        right: 14px;

    }

    .floating-wa {

        bottom: 80px;

    }

    .floating-call {

        bottom: 18px;

    }

    .floating-wa-btn,
    .floating-call-btn {

        width: 50px;

        height: 50px;

    }

    .back-top {

        right: 14px;

        bottom: 140px;

    }

}


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

@media (max-width: 420px) {

    .service-section {

        padding: 55px 0;

    }

    .section-title {

        font-size: 1.75rem;

    }

    .service-main-image {

        min-height: 270px;

    }

    .why-item {

        align-items: flex-start;

    }

    .case-stats {

        display: grid;

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

    }

    .case-stats strong {

        font-size: 1.2rem;

    }

    .case-stats span {

        font-size: .6rem;

    }

}