.site_logo{    background: #fff;
    padding: 10px;
    border-radius: 5px;}

    .site_logo .logo{max-width: 150px;}
      .h5-banner-content .banner-title{font-size: 50px; line-height: 30px;}  

    /* .tj-text-slider {
    position: relative;
    display: inline-block;
    min-width: 300px;
    height: 1.15em;
    vertical-align: middle;
}

.tj-text-slider > span {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.5s ease;
    white-space: nowrap;
}

.tj-text-slider > span.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
} */

.tj-text-slider {
    position: relative;
    display: inline-block;
    width: 500px;
    height: 68;
    vertical-align: middle;
    margin: 0 5px;
}

.tj-text-slider > span {
    position: absolute;
    left: 0;
    top: 0;
   color: #fff;
    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
font-size: 30px;
    left: 32px;
    white-space: nowrap;
}

.tj-text-slider > span.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tj-text-slider {
    position: relative;
    display: inline-flex;
    align-items: center;

    width: 420px;
    height: 70px;

    margin: 10px 0 10px 0;

    background: rgba(19, 85, 87, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;

    overflow: hidden;
    vertical-align: middle;
}

.tj-text-slider > span {
    position: absolute;
    left: 28px;
    top: 50%;

    transform: translateY(-50%) translateY(15px);

    opacity: 0;
    visibility: hidden;

    font-size: 30px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;

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

.tj-text-slider > span.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(-50%);
}

.about-bottom-area .client-review-cont .desc{font-weight: 500;
    font-size: 19px;}
    .customers-number{padding: 25px 0 13px 0;}
    .footer-main-area{padding-top: 50px !important;}


    
/* =========================================================
   CORE VALUES SECTION
========================================================= */

.core-values-section {
    position: relative;
    overflow: hidden;
    padding: 85px 0;
    background:
        radial-gradient(
            circle at 8% 65%,
            rgba(0, 180, 185, 0.12) 0%,
            rgba(0, 90, 100, 0.06) 25%,
            transparent 50%
        ),
        linear-gradient(
            135deg,
            #001519 0%,
            #001d22 45%,
            #00171c 100%
        );

    color: #fff;
}


/* =========================================================
   BACKGROUND PATTERN
========================================================= */

.core-bg-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5;

    background:
        linear-gradient(
            135deg,
            transparent 0%,
            transparent 25%,
            rgba(0, 183, 190, .08) 25.2%,
            transparent 25.5%
        );

    background-size: 32px 32px;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.core-values-left {
    position: relative;
    min-height: 800px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 0 25px 25px 0;

    background-image:
        linear-gradient(
            180deg,
            rgba(0, 25, 30, 0.35) 0%,
            rgba(0, 40, 45, 0.30) 40%,
            rgba(0, 25, 30, 0.55) 75%,
            rgba(0, 15, 20, 0.75) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 25, 30, 0.50) 0%,
            rgba(0, 40, 45, 0.30) 55%,
            rgba(0, 15, 20, 0.55) 100%
        ),
        url("/assets/images/core-value.jpg");

    background-size: cover;
    background-position: center;
}


/*
   Extra dark gradient at bottom
   This is what gives the screenshot its
   deep teal/black lower section.
*/

.core-values-left::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        transparent 45%,
        rgba(0, 23, 28, 0.10) 65%,
        rgba(0, 16, 21, 0.45) 100%
    );

    pointer-events: none;
}


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

.core-values-content {
    position: relative;
    z-index: 2;

    max-width: 570px;
    padding: 40px 55px;
}


/* =========================================================
   LABEL
========================================================= */

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 9px 16px 9px 11px;

    border: 1px solid rgba(0, 190, 195, .40);
    border-radius: 6px;

    color: #00c5c9;

    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;

    background:
        linear-gradient(
            135deg,
            rgba(0, 184, 190, .20),
            rgba(0, 65, 73, .12)
        );

    box-shadow:
        inset 0 0 20px rgba(0, 180, 185, .05),
        0 0 20px rgba(0, 160, 170, .05);
}


.label-icon {
    width: 26px;
    height: 26px;

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

    color: #00d1d2;
}


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

.core-values-content h2 {
    margin: 24px 0 28px;

    font-size: clamp(42px, 4vw, 62px);
    line-height: 1.08;
    font-weight: 500;

    letter-spacing: -1.8px;
}


/* =========================================================
   HEADING LINE
========================================================= */

.heading-line {
    width: 67px;
    height: 4px;

    margin-bottom: 28px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #00bfc4 0%,
            #00a1a7 70%,
            transparent 100%
        );
}


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

.core-values-content > p {
    max-width: 470px;

    margin-bottom: 32px;

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

    font-size: 20px;
    line-height: 1.55;
}


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

.core-btn {
    display: inline-flex;
    align-items: center;

    padding: 4px 5px 4px 26px;

    color: #fff;
    text-decoration: none;

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

    border-radius: 40px;

    background:
        linear-gradient(
            90deg,
            #00aeb3 0%,
            #008c94 70%,
            #006d76 100%
        );

    transition: .3s ease;
}


.core-btn:hover {
    color: #fff;
    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0, 190, 195, .20);
}


.btn-arrow {
    width: 46px;
    height: 46px;

    margin-left: 18px;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #00272d,
            #001519
        );

    border: 1px solid rgba(255,255,255,.12);

    font-size: 20px;
}


/* =========================================================
   RIGHT SIDE
========================================================= */

.core-values-list {
    display: flex;
    flex-direction: column;
    gap: 22px;

    padding-right: 40px;
}


/* =========================================================
   VALUE CARD
========================================================= */

.value-card {
    position: relative;

    min-height: 267px;

    overflow: visible;

    /* border: 1px solid rgba(0, 181, 187, .35); */

    border-radius: 15px;

    /*
       MAIN CARD GRADIENT
       Dark on left -> image area on right
    */

    background:
        linear-gradient(
            90deg,
            rgba(0, 28, 34, .98) 0%,
            rgba(0, 28, 34, .94) 28%,
            rgba(0, 29, 34, .82) 48%,
            rgba(0, 26, 31, .48) 72%,
            rgba(0, 18, 24, .18) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0, 20, 25, .15),
            rgba(0, 30, 35, .65)
        );

    background-size: cover;
    background-position: center;

    box-shadow:
        inset 0 0 50px rgba(0, 140, 150, .025);
}


/* =========================================================
   CARD BACKGROUND IMAGES
========================================================= */

.value-card-1 {
    background-image:

        linear-gradient(
            90deg,
            rgba(0, 27, 33, .98) 0%,
            rgba(0, 28, 34, .96) 25%,
            rgba(0, 29, 34, .82) 47%,
            rgba(0, 24, 30, .48) 72%,
            rgba(0, 15, 20, .18) 100%
        ),

        url("/assets/images/core-ethics.jpg");

    background-size: cover;
    background-position: top;
}


.value-card-2 {
    background-image:

        linear-gradient(
            90deg,
            rgba(0, 27, 33, .98) 0%,
            rgba(0, 28, 34, .96) 28%,
            rgba(0, 29, 34, .80) 52%,
            rgba(0, 23, 29, .42) 75%,
            rgba(0, 15, 20, .15) 100%
        ),

        url("../images/integrity.jpg");

    background-size: cover;
    background-position: top;
}


.value-card-3 {
    background-image:

        linear-gradient(
            90deg,
            rgba(0, 27, 33, .98) 0%,
            rgba(0, 28, 34, .95) 28%,
            rgba(0, 29, 34, .78) 52%,
            rgba(0, 23, 29, .42) 75%,
            rgba(0, 15, 20, .15) 100%
        ),

        url("../images/quality.jpg");

    background-size: cover;
    background-position: top;
}


/* =========================================================
   NUMBER BOX
========================================================= */

.value-number {
    position: absolute;

    top: -9px;
    left: -1px;

    width: 62px;
    height: 56px;

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

    color: #fff;

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

    border-radius: 12px 3px 8px 3px;

    background:
        linear-gradient(
            145deg,
            #00aeb4 0%,
            #008c94 60%,
            #006b73 100%
        );

    box-shadow:
        0 8px 20px rgba(0, 160, 170, .16);
}


/* =========================================================
   CARD INNER
========================================================= */

.value-card-inner {
    min-height: 267px;

    display: flex;
    align-items: center;

    padding: 40px 45px 35px 35px;
}


/* =========================================================
   ICON AREA
========================================================= */

.value-icon-wrap {
    width: 135px;
    min-width: 135px;

    height: 145px;

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

    border-right: 1px solid rgba(0, 184, 190, .45);
}


.value-icon {
    width: 108px;
    height: 108px;

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

    border: 1px solid rgba(0, 190, 195, .55);
    border-radius: 50%;

    color: #00c5c8;

    font-size: 42px;

    background:
        radial-gradient(
            circle,
            rgba(0, 190, 195, .08) 0%,
            rgba(0, 90, 100, .03) 60%,
            transparent 70%
        );

    box-shadow:
        inset 0 0 25px rgba(0, 190, 195, .03);
}


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

.value-content {
    padding-left: 35px;
    max-width: 470px;
}


.value-content h3 {
    margin: 0 0 18px;

    color: #fff;

    font-size: 32px;
    line-height: 1.1;
    font-weight: 500;

    letter-spacing: -.8px;
}


.value-content p {
    margin: 0;

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

    font-size: 17px;
    line-height: 1.6;
}


/* =========================================================
   CARD HOVER
========================================================= */

.value-card {
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.value-card:hover {
    transform: translateY(-4px);

    border-color: rgba(0, 200, 205, .65);

    box-shadow:
        0 15px 45px rgba(0, 0, 0, .25),
        inset 0 0 40px rgba(0, 180, 185, .04);
}


/* =========================================================
   DECORATIVE GLOW
========================================================= */

.core-values-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -200px;

    background:
        radial-gradient(
            circle,
            rgba(0, 180, 190, .13) 0%,
            rgba(0, 110, 120, .05) 35%,
            transparent 70%
        );

    pointer-events: none;
}


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

@media (max-width: 1199.98px) {

    .core-values-content {
        padding: 40px 30px;
    }

    .core-values-content h2 {
        font-size: 46px;
    }

    .core-values-list {
        padding-right: 20px;
    }

    .value-card-inner {
        padding: 40px 25px;
    }

    .value-icon-wrap {
        width: 115px;
        min-width: 115px;
    }

    .value-content {
        padding-left: 25px;
    }

}


@media (max-width: 991.98px) {

    .core-values-section {
        padding: 60px 0;
    }

    .core-values-left {
        min-height: 600px;
    }

    .core-values-list {
        padding-right: 0;
    }

}


@media (max-width: 767.98px) {

    .core-values-section {
        padding: 50px 0;
    }

    .core-values-left {
        min-height: 550px;
        border-radius: 15px;
    }

    .core-values-content {
        padding: 35px 25px;
    }

    .core-values-content h2 {
        font-size: 38px;
    }

    .core-values-content > p {
        font-size: 17px;
    }

    .value-card {
        min-height: auto;
    }

    .value-card-inner {
        min-height: auto;
        display: block;
        padding: 55px 25px 30px;
    }

    .value-icon-wrap {
        width: 100%;
        min-width: 0;
        height: auto;

        padding-bottom: 25px;

        border-right: 0;
        border-bottom: 1px solid rgba(0, 184, 190, .35);
    }

    .value-content {
        padding: 25px 0 0;
    }

    .value-content h3 {
        font-size: 28px;
    }

    .value-content p {
        font-size: 16px;
    }

}


@media (max-width: 575.98px) {

    .core-values-content h2 {
        font-size: 34px;
    }

    .section-label {
        font-size: 13px;
    }

    .value-number {
        width: 55px;
        height: 50px;
        font-size: 21px;
    }

}
 .testimonial-slider-2 .testimonial-item .desc{padding-top:10px !important;}

 /* =========================================
   GRANDIX COUNTER SECTION
========================================= */

.grandix-counter-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;

    background-image: url("/assets/images/healthcare-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Dark / Teal Overlay */
.grandix-counter-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(4, 55, 52, 0.96) 0%,
            rgba(6, 73, 69, 0.90) 50%,
            rgba(10, 25, 27, 0.94) 100%
        );
}

/* Section Tag */

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 15px;

    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 5px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.2px;

    margin-bottom: 18px;
}

.section-tag i {
    color: #2aa1a0;
    font-size: 19px;
}

/* Heading */

.counter-title {
    max-width: 700px;
    margin: 0 auto;

    color: #ffffff;

    font-size: 46px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -1.5px;
}

.counter-title span {
    color: #2aa1a0;
}


/* Counter Row */

.grandix-counter-row {
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}


/* Counter Item */

.counter-item {
    position: relative;

    min-height: 320px;

    padding: 50px 35px;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* Vertical Separator */

.counter-item::after {
    content: "";

    position: absolute;

    top: 50px;
    right: 0;

    width: 1px;
    height: calc(100% - 100px);

    background: rgba(255,255,255,0.18);
}


/* Remove separator from last item */

.col-lg-3:last-child .counter-item::after {
    display: none;
}


/* Icon */

.counter-icon {
    width: 70px;
    height: 70px;

    margin-bottom: 25px;

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

    border: 1px solid rgba(42,161,160,0.6);
    border-radius: 50%;

    color: #2aa1a0;

    background: rgba(42,161,160,0.08);

    transition: all 0.3s ease;
}

.counter-icon i {
    font-size: 34px;
}


/* Icon Hover */

.counter-item:hover .counter-icon {
    background: #2aa1a0;
    border-color: #2aa1a0;
    color: #ffffff;

    transform: translateY(-5px);
}


/* Number */

.counter-number {
    margin-bottom: 12px;

    color: #ffffff;

    font-size: 52px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: -2px;
}

.counter-number > span:last-child {
    color: #2aa1a0;
}


/* Title */

.counter-item h3 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 21px;
    font-weight: 500;
}


/* Description */

.counter-item p {
    max-width: 240px;

    margin: 0;

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

    font-size: 15px;
    line-height: 1.6;
}


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

@media (max-width: 991px) {

    .grandix-counter-section {
        padding: 80px 0;
    }

    .counter-title {
        font-size: 38px;
    }

    .counter-item {
        min-height: 300px;
    }

    /* 2 column layout */
    .col-lg-3:nth-child(2) .counter-item::after {
        display: none;
    }
}


@media (max-width: 767px) {

    .grandix-counter-section {
        padding: 70px 0;
    }

    .counter-title {
        font-size: 32px;
    }

    .counter-item {
        min-height: auto;
        padding: 40px 25px;
    }

    .counter-item::after {
        display: none;
    }

    .counter-number {
        font-size: 46px;
    }

    .counter-icon {
        width: 62px;
        height: 62px;
    }

    .counter-icon i {
        font-size: 29px;
    }
}

/* ============================================
   CORPORATE DNA
============================================= */

.corporate-dna-section {
    position: relative;
    padding: 110px 0;

    background: #edf3f3;

    overflow: hidden;
}


/* subtle background decoration */

.corporate-dna-section::before {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    top: -200px;
    right: -180px;

    border: 1px solid rgba(32, 149, 150, 0.12);

    border-radius: 50%;
}

.corporate-dna-section::after {
    content: "";

    position: absolute;

    width: 350px;
    height: 350px;

    bottom: -180px;
    left: -150px;

    border: 1px solid rgba(32, 149, 150, 0.10);

    border-radius: 50%;
}


/* ============================================
   SECTION LABEL
============================================= */

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px 14px;

    border: 1px dashed #b8cccc;

    border-radius: 5px;

    color: #122a2d;

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

    letter-spacing: 1px;

    margin-bottom: 20px;
}

.section-label i {
    color: #209596;
    font-size: 18px;
}


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

.corporate-dna-title {
    margin: 0 auto 22px;

    color: #092226;

    font-size: 54px;
    line-height: 1.08;

    font-weight: 500;

    letter-spacing: -2px;
}

.corporate-dna-title span {
    color: #209596;
}


.corporate-dna-intro {
    max-width: 720px;

    margin: 0 auto;

    color: #53696c;

    font-size: 17px;
    line-height: 1.7;
}


/* ============================================
   DNA CARD
============================================= */

.dna-card {
    position: relative;

    height: 100%;

    padding: 38px;

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid rgba(10, 40, 42, 0.04);

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


/* hover */

.dna-card:hover {

    transform: translateY(-6px);

    box-shadow:
        0 20px 45px rgba(20, 60, 62, 0.10);
}


/* ============================================
   CARD TOP
============================================= */

.dna-card-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 28px;
}


/* ============================================
   ICON
============================================= */

.dna-icon {

    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 50%;

    color: #209596;

    background: #e8f4f4;

    border: 1px solid rgba(32, 149, 150, 0.18);

    transition: all 0.3s ease;
}


.dna-icon i {
    font-size: 30px;
}


.dna-card:hover .dna-icon {

    color: #ffffff;

    background: #209596;

    transform: rotate(-5deg);
}


/* ============================================
   NUMBER
============================================= */

.dna-number {

    color: #d5e3e3;

    font-size: 48px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: -2px;
}


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

.dna-card h3 {

    margin: 0 0 15px;

    color: #092226;

    font-size: 26px;

    font-weight: 600;
}


.dna-card p {

    margin: 0;

    max-width: 600px;

    color: #52696c;

    font-size: 16px;

    line-height: 1.7;
}


/* ============================================
   TAGS
============================================= */

.dna-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 25px;
}


.dna-tags span {

    padding: 6px 12px;

    border-radius: 30px;

    background: #edf5f5;

    color: #27898a;

    font-size: 12px;

    font-weight: 600;
}


/* ============================================
   WIDE CARD
============================================= */

.dna-card-wide {

    padding: 42px;
}


.dna-highlight {

    height: 100%;

    min-height: 160px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background: #209596;

    border-radius: 12px;

    color: #ffffff;
}


.dna-highlight span {

    display: block;

    margin-bottom: 12px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    opacity: 0.75;
}


.dna-highlight strong {

    font-size: 21px;

    line-height: 1.6;

    font-weight: 500;
}


.dna-highlight b {

    margin: 0 4px;

    opacity: 0.6;
}


/* ============================================
   BOTTOM STATEMENT
============================================= */

.corporate-dna-bottom {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    margin-top: 65px;
}


.corporate-dna-bottom p {

    margin: 0;

    color: #53696c;

    font-size: 15px;
}


.corporate-dna-bottom strong {

    color: #209596;
}


.bottom-line {

    width: 70px;

    height: 1px;

    background: #b8cccc;
}


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

@media (max-width: 991px) {

    .corporate-dna-section {
        padding: 80px 0;
    }

    .corporate-dna-title {
        font-size: 44px;
    }

    .dna-highlight {
        margin-top: 30px;
    }
}


@media (max-width: 767px) {

    .corporate-dna-section {
        padding: 65px 0;
    }

    .corporate-dna-title {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .corporate-dna-intro {
        font-size: 15px;
    }

    .dna-card {
        padding: 28px;
    }

    .dna-card-wide {
        padding: 28px;
    }

    .dna-card h3 {
        font-size: 23px;
    }

    .dna-number {
        font-size: 38px;
    }

    .corporate-dna-bottom {
        gap: 12px;
    }

    .bottom-line {
        width: 35px;
    }

}

/* =========================================
   CORE VALUES SECTION
========================================= */

.core-values-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0 120px;
    /* background: #f5f8fa; */
}


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

.section-heading {
    position: relative;
    max-width: 780px;
    margin: 0 auto 80px;
    z-index: 2;
}

.section-tag {
    display: inline-block;
    margin-bottom: 14px;

    color: #159497;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

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

    color: #0c2429;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 600;
}

.section-heading p {
    margin: 0 auto;

    color: #526b70;
    font-size: 17px;
    line-height: 1.8;
}


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

.core-values-timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}


/* Vertical center line */

.core-values-timeline::before {
    content: "";
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 2px;

    background: linear-gradient(
        to bottom,
        transparent,
        #159497 10%,
        #159497 90%,
        transparent
    );

    transform: translateX(-50%);
}


/* =========================================
   VALUE ITEM
========================================= */

.core-value-item {
    position: relative;

    width: 50%;
    padding: 0 55px 70px;

    z-index: 2;
}

.core-value-item:nth-child(odd) {
    margin-right: auto;
    text-align: right;
}

.core-value-item:nth-child(even) {
    margin-left: 50%;
}


/* =========================================
   VALUE CARD
========================================= */

.core-value-content {
    position: relative;

    padding: 32px 34px;

    background: #ffffff;

    border-radius: 16px;

    border: 1px solid rgba(21, 148, 151, 0.08);

    box-shadow: 0 15px 45px rgba(20, 55, 65, 0.08);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.core-value-content:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 55px rgba(20, 55, 65, 0.14);
}


/* =========================================
   NUMBER
========================================= */

.core-value-number {
    position: absolute;

    top: 20px;
    right: 25px;

    color: rgba(21, 148, 151, 0.10);

    font-size: 48px;
    line-height: 1;

    font-weight: 700;
}

.core-value-item:nth-child(odd)
.core-value-number {
    right: auto;
    left: 25px;
}


/* =========================================
   ICON
========================================= */

.core-value-icon {
    display: inline-flex;

    /* width: 58px;
    height: 58px; */

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

    margin-bottom: 20px;

    color: #ffffff;

    background: #159497;

    border-radius: 50%;

    font-size: 21px;

    box-shadow:
        0 8px 20px rgba(21, 148, 151, 0.25);
         width: 70px;
    height: 70px;
}
.core-value-icon img{width:45px; height:45px;}

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

.core-value-text h3 {
    position: relative;

    margin: 0 0 12px;

    color: #0b252a;

    font-size: 22px;
    line-height: 1.35;

    font-weight: 600;
}

.core-value-text p {
    margin: 0;

    color: #587075;

    font-size: 15px;
    line-height: 1.75;
}


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

.core-value-item::after {
    content: "";

    position: absolute;

    top: 48px;

    width: 14px;
    height: 14px;

    background: #159497;

    border: 4px solid #f5f8fa;

    border-radius: 50%;

    box-sizing: content-box;
}

.core-value-item:nth-child(odd)::after {
    right: -8px;
}

.core-value-item:nth-child(even)::after {
    left: -8px;
}


/* =========================================
   DECORATIVE BACKGROUND
========================================= */

.core-pattern {
    position: absolute;

    width: 350px;
    height: 350px;

    opacity: 0.35;

    pointer-events: none;
}

.core-pattern-top {
    top: -100px;
    right: -100px;

    background-image:
        linear-gradient(
            30deg,
            transparent 70%,
            rgba(21, 148, 151, 0.15) 70%,
            rgba(21, 148, 151, 0.15) 71%,
            transparent 71%
        );

    background-size: 45px 45px;
}

.core-pattern-bottom {
    bottom: -100px;
    left: -100px;

    background-image:
        linear-gradient(
            30deg,
            transparent 70%,
            rgba(21, 148, 151, 0.12) 70%,
            rgba(21, 148, 151, 0.12) 71%,
            transparent 71%
        );

    background-size: 45px 45px;
}


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

@media (max-width: 991px) {

    .core-values-section {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 60px;
    }

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

    .core-values-timeline::before {
        left: 25px;
    }

    .core-value-item,
    .core-value-item:nth-child(even),
    .core-value-item:nth-child(odd) {
        width: 100%;
        margin: 0;

        padding: 0 0 45px 70px;

        text-align: left;
    }

    .core-value-item::after,
    .core-value-item:nth-child(odd)::after,
    .core-value-item:nth-child(even)::after {
        left: 18px;
        right: auto;
    }

    .core-value-item:nth-child(odd)
    .core-value-number {
        right: 25px;
        left: auto;
    }
}


@media (max-width: 575px) {

    .core-values-section {
        padding: 65px 0;
    }

    .section-heading {
        margin-bottom: 45px;
    }

    .section-tag {
        font-size: 12px;
    }

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

    .section-heading p {
        font-size: 15px;
    }

    .core-values-timeline::before {
        left: 17px;
    }

    .core-value-item,
    .core-value-item:nth-child(even),
    .core-value-item:nth-child(odd) {
        padding-left: 50px;
        padding-bottom: 30px;
    }

    .core-value-item::after,
    .core-value-item:nth-child(odd)::after,
    .core-value-item:nth-child(even)::after {
        left: 10px;
    }

    .core-value-content {
        padding: 25px;
    }

    .core-value-icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .core-value-text h3 {
        font-size: 19px;
    }

    .core-value-text p {
        font-size: 14px;
    }

    .core-value-number {
        font-size: 38px;
    }
}


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

.products-hero {
    position: relative;
    min-height: 360px;

    display: flex;
    align-items: center;

    background-image:
        url("../images/products-banner.jpg");

    background-size: cover;
    background-position: center;
}

.products-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 19, 48, 0.94),
            rgba(3, 35, 63, 0.72),
            rgba(3, 35, 63, 0.55)
        );
}

.products-hero-content {
    position: relative;
    z-index: 2;

    padding-top: 50px;
}

.hero-subtitle {
    display: block;

    color: #36a0a3;

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

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 12px;
}

.products-hero h1 {
    color: #fff;

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

    font-weight: 600;

    margin-bottom: 18px;
}

.breadcrumb-custom {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

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

    font-size: 14px;
}

.breadcrumb-custom a {
    color: #fff;
    text-decoration: none;
}

.breadcrumb-custom strong {
    color: #36a0a3;
    font-weight: 500;
}


/* =========================================
   COMMON SECTION
========================================= */

.section-space {
    padding: 100px 0 50px;
}

.products-intro {
    background: #f5f8f9;
}

.section-heading {
    max-width: 760px;
    margin: auto;
}

.section-label {
    display: inline-block;

    color: #23979b;

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

    letter-spacing: 2px;

    margin-bottom: 15px;
}

.section-heading h2 {
    color: #071b30;

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

    line-height: 1.15;

    font-weight: 600;

    margin-bottom: 25px;
}

.section-heading p {
    color: #526873;

    font-size: 17px;

    line-height: 1.8;

    max-width: 680px;

    margin: auto;
}


/* =========================================
   PRODUCTS SECTION
========================================= */

.products-section {
    padding: 50px 0 110px;

    background: #f5f8f9;
}


/* =========================================
   PRODUCT CARD
========================================= */

.product-card {
    position: relative;

    display: block;

    height: 420px;

    overflow: hidden;

    border-radius: 18px;

    text-decoration: none;

    background: #071b30;

    box-shadow:
        0 15px 40px rgba(7, 27, 48, 0.12);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.product-card img {
    position: absolute;

    width: 100%;
    height: 100%;

    inset: 0;

    /* object-fit: cover; */

    transition:
        transform 0.7s ease;
}


/* Dark gradient */

.product-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3, 18, 34, 0.05) 20%,
            rgba(3, 18, 34, 0.25) 45%,
            rgba(3, 18, 34, 0.94) 100%
        );

    transition:
        background 0.4s ease;
}


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

.product-content {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

    z-index: 2;
}

.product-number {
    display: inline-flex;

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

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background: rgba(35, 151, 155, 0.9);

    color: #fff;

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

    margin-bottom: 15px;
}

.product-content h3 {
    color: #fff;

    font-size: 27px;

    font-weight: 600;

    margin-bottom: 10px;
}

.product-content p {
    color: rgba(255,255,255,0.82);

    font-size: 14px;

    line-height: 1.6;

    max-width: 390px;

    margin-bottom: 16px;
}

.product-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #62c7c9;

    font-size: 14px;

    font-weight: 600;

    transition: gap 0.3s ease;
}


/* =========================================
   HOVER
========================================= */

.product-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 25px 55px rgba(7, 27, 48, 0.20);
}

.product-card:hover img {
    transform: scale(1.08);
}

.product-card:hover .product-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(3, 18, 34, 0.05) 10%,
            rgba(3, 18, 34, 0.30) 40%,
            rgba(3, 18, 34, 0.98) 100%
        );
}

.product-card:hover .product-link {
    gap: 14px;
}


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

.products-cta {
    padding: 80px 0;

    
}

.products-cta-inner {
    display: flex;

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

    gap: 40px;
}

.products-cta h2 {
    color: #fff;

    max-width: 650px;

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

    line-height: 1.2;

    font-weight: 500;

    margin: 0;
}

.btn-product {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 26px;

    border: 1px solid #36a0a3;

    border-radius: 50px;

    color: #fff;

    text-decoration: none;

    white-space: nowrap;

    transition: all 0.3s ease;
}

.btn-product:hover {
    background: #36a0a3;

    color: #fff;
}


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

@media (max-width: 991px) {

    .products-hero {
        min-height: 300px;
    }

    .section-space {
        padding: 75px 0 35px;
    }

    .product-card {
        height: 390px;
    }

    .products-cta-inner {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 767px) {

    .products-hero {
        min-height: 280px;
    }

    .products-hero h1 {
        font-size: 42px;
    }

    .section-space {
        padding: 60px 0 30px;
    }

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

    .section-heading p {
        font-size: 15px;
    }

    .products-section {
        padding: 30px 0 70px;
    }

    .product-card {
        height: 380px;
    }

    .product-content {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    .product-content h3 {
        font-size: 24px;
    }

}

.new-width{max-width: 850px !important;}
.newmargin{margin-top: 250px !important;}
.h5-service-section .sec-headingnew{max-width: 650px !important;}

.h5-working-process-item .process-content h4 {
  background-image: linear-gradient(
    180deg,
    var(--tj-color-theme-primary) 0%,
    rgba(30, 138, 138, 0) 116.09%
);

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: var(--tj-color-theme-primary);
font-size: 45px;
}

@media only screen and (max-width:600px){
    .h5-banner-content .banner-title{
        font-size: 35px;
    line-height: 40px;
    margin-bottom: 0;
    
    }
    .h5-banner-content .banner-title:first-child{margin-top: 45px;}
    .newmargin{margin-top: 15px !important;}
}

.hamburger-infos .contact-info .contact-item:first-child{display:none !important;}
 .star-ratings{display: none;}
 .counter-icon img{width:50px; height: 45px;}
 .counter-item:hover .counter-icon img{filter: brightness(0) invert(1);}