:root {
    --primary-blue: #009CD0;
    --dark-heading: #212529;
    --light-bg    : #f8f9fa;
    --text-color  : #666666;
}

/*------------------------------------------------hero section-------------------------------------------------*/
.service-hero-section {
    position       : relative;
    height         : 60vh;
    display        : flex;
    justify-content: center;
    align-items    : center;
    text-align     : center;
    color          : white;
}

.service-hero-section img {
    width   : 100%;
    height  : 100%;
    display : block;
    position: absolute;
    top     : 0;
    left    : 0;
    z-index : 0;
}

.service-hero-section::before {
    content         : '';
    position        : absolute;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index         : 1;
}

.service-hero-section h1 {
    font-size: 48px;
    margin   : 0 0 15px;
}

.service-hero-section p {
    font-size: 18px;
    margin   : 0 0 40px;
    padding  : 0 190px;
}

.breadcrumb {
    display         : flex;
    align-items     : center;
    background-color: rgba(255, 255, 255, 0.22) !important;
    padding         : 10px 30px !important;
    border-radius   : 0px !important;
    font-size       : 14px;
    font-weight     : 600;
    color           : white;
}

.breadcrumb a {
    color                : white;
    text-decoration      : underline;
    text-decoration-color: transparent;
    transition           : text-decoration-color 0.3s ease, text-underline-offset 0.3s ease;
}

.breadcrumb a:hover {
    color                : white;
    text-decoration-color: white;
    text-underline-offset: 3px;
}

.breadcrumb i {
    color    : #ccc;
    margin   : 0 5px;
    font-size: 14px;
}

/*------------------------------------------------company section-------------------------------------------------*/
.service-cards-row {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap                  : 30px;
    margin-top           : 40px;
}

.service-card {
    text-align: center;
}

.icon-circle {
    width           : 90px;
    height          : 90px;
    background-color: #007bff;
    border-radius   : 50%;
    margin          : 0 auto 20px auto;
    display         : flex;
    align-items     : center;
    justify-content : center;
    transition      : transform 0.25s ease-out;
    cursor          : pointer;
}

.icon-content {
    color    : white;
    font-size: 32px;
}

.icon-circle:hover {
    animation: bounceCircle 0.45s ease-out forwards;
}

@keyframes bounceCircle {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.18);
    }

    60% {
        transform: scale(0.92);
    }

    85% {
        transform: scale(1.10);
    }

    100% {
        transform: scale(1.12);
    }
}

.company-section {
    padding: 60px 0px;
}

.com-section-title {
    font-size    : 2.5rem;
    font-weight  : 700;
    text-align   : center;
    margin-bottom: 10px;
}

.com-section-subtitle {
    font-size : 17px;
    color     : rgb(102, 102, 102);
    text-align: center;
}

.benefit-title {
    font-size    : 20px;
    font-weight  : 600;
    margin-bottom: 10px;
}

.benefit-subtitle {
    font-size  : 15px;
    line-height: 1.5;
    color      : #555;
}

.service-cards-row {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap                  : 30px;
    margin-top           : 40px;
}

.service-card {
    text-align: center;
}

.icon-wrapper {
    width : 110px;
    height: 110px;
    margin: 0 auto 20px auto;
}

.icon-circle-outer {
    width          : 100%;
    height         : 100%;
    border-radius  : 50%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    transition     : background-color 0.25s ease-out;
}

.icon-circle-outer:hover {
    background-color: rgba(0, 123, 255, 0.4);
}

.icon-circle-inner {
    width           : 90px;
    height          : 90px;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    position        : relative;
    background-color: transparent;
}

.icon-circle-inner::after {
    content         : "";
    position        : absolute;
    top             : 0;
    left            : 0;
    right           : 0;
    bottom          : 0;
    background-color: #009CD0;
    border-radius   : 50%;
    z-index         : -1;
}

.icon-circle-inner::before {
    content         : "";
    position        : absolute;
    top             : 0;
    left            : 0;
    right           : 0;
    bottom          : 0;
    background-color: rgba(0, 156, 208, 0.5);
    border-radius   : 50%;
    z-index         : -2;
    animation       : ripple-out 2s ease-in-out infinite;
}

.icon-content {
    color    : white;
    font-size: 32px;
    z-index  : 1;
}

@keyframes ripple-out {
    0% {
        transform: scale(1);
        opacity  : 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity  : 0;
    }
}

.icon-circle-outer:hover .icon-circle-inner {
    animation: bounceCircle 0.45s ease-out forwards;
}

@keyframes bounceCircle {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(1.18);
    }

    60% {
        transform: scale(0.92);
    }

    85% {
        transform: scale(1.10);
    }

    100% {
        transform: scale(1.12);
    }
}

.benefit-title {
    font-size    : 20px;
    font-weight  : 600;
    margin-bottom: 10px;
}

.benefit-subtitle {
    font-size  : 15px;
    color      : #555;
    line-height: 1.5;
}

.slide-track {
    display    : flex;
    align-items: center;
    width      : max-content;
    animation  : scrollLeft var(--speed) linear infinite;
    transform  : translateX(0);
}

.slide-track.reverse {
    animation: scrollRight var(--speed) linear infinite;
}

.top_slide,
.bot_slide {
    width     : 100%;
    overflow  : hidden;
    position  : relative;
    margin-top: 40px;
}

.slide-wrapper {
    display            : flex;
    align-items        : center;
    will-change        : transform;
    backface-visibility: hidden;
    transform          : translate3d(0, 0, 0);
}

.slide-track {
    display: flex;
}

.slide-img {
    display      : block;
    height       : 250px;
    width        : 500px;
    margin-right : 16px;
    border-radius: 12px;
    object-fit   : cover;
}

@keyframes scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(calc(var(--half-width) * -1), 0, 0);
    }
}

.top_slide:hover .slide-wrapper,
.bot_slide:hover .slide-wrapper {
    animation-play-state: paused;
}

.slide-wrapper {
    cursor: grab;
}

.slide-wrapper.dragging {
    cursor    : grabbing;
    transition: none !important;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(var(--half-width) * -1));
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(calc(var(--half-width) * -1));
    }

    100% {
        transform: translateX(0);
    }
}

/*------------------------------------------------gen button-------------------------------------------------*/
.gen-section-wrapper {
    background-image   : url(../img/pin_overlay.png);
    background-position: center left;
    background-repeat  : no-repeat;
}

.gen-pre-title {
    font-size     : 15px;
    font-weight   : 600;
    color         : var(--primary-blue);
    text-transform: uppercase;
    margin-bottom : 25px;
}

.gen-main-title {
    font-size    : 40px;
    font-weight  : 700;
    color        : var(--heading-color);
    line-height  : 1.2;
    margin-bottom: 20px;
}

.gen-content-inner {
    padding-left : 280px;
    padding-right: 30px;
}

.gen-description {
    font-size    : 16px;
    color        : #666666;
    line-height  : 1.6;
    margin-bottom: 25px;
}

.gen-feature-list {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.gen-feature-list li {
    font-size    : 16px;
    color        : black;
    margin-bottom: 10px;
    font-weight  : 500;
}

.gen-icon-check {
    color       : var(--primary-blue);
    margin-right: 10px;
    font-size   : 14px;
}

.gen-open-positions-btn {
    background         : linear-gradient(to left, var(--primary-blue) 0%, var(--primary-blue) 50%, black 50%, black 100%);
    background-size    : 250% 110%;
    background-position: right bottom;
    color              : #ffffff !important;
    border             : none;
    padding            : 10px 24px !important;
    border-radius      : 4px;
    font-weight        : 600;
    font-size          : 15px;
    cursor             : pointer;
    display            : flex;
    align-items        : center;
    gap                : 8px;
    text-decoration    : none;
    transition         : background-position 0.4s ease-in-out;
    width              : fit-content;
}

.gen-open-positions-btn:hover {
    background-position: left bottom;
    color              : #ffffff;
    text-decoration    : none;
}

.gen-image-col {
    position     : relative;
    padding-right: 0 !important;
    padding-left : 0 !important;
}

.gen-image-container {
    position: relative;
}

.gen-main-image {
    width     : 100%;
    height    : 650px !important;
    object-fit: cover;
    display   : block;
}

.gen-wrapper {
    display    : flex;
    align-items: center;
}

.gen-metrics-box {
    position: absolute;
    bottom  : 0;
    right   : 0;
    display : flex;
    width   : 380px;
    z-index : 10;
}

.gen-metrics-item {
    padding        : 30px 15px;
    color          : #ffffff;
    text-align     : center;
    flex           : 1;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    align-items    : center;
}

.gen-metrics-success {
    background-color: white;
    color           : black;
}

.gen-metrics-health {
    background-color: #333333;
}

.gen-metric-number {
    font-size    : 22px;
    font-weight  : 700;
    line-height  : 1;
    margin-top   : 5px;
    margin-bottom: 5px;
}

.gen-metric-label {
    font-size     : 13px;
    text-transform: uppercase;
    font-weight   : 500;
    letter-spacing: 0.5px;
}

.gen-metric-icon {
    font-size   : 22px;
    margin-right: 4px;
    color       : var(--primary-blue);
}

.small-image-footer2 {
    display   : flex;
    gap       : 10px;
    margin-top: 22px;
    padding   : 0 15px;
}

.footer-img2 {
    width        : 19%;
    object-fit   : cover;
    border-radius: 5px;
    cursor       : pointer;
}

.gallery-modal {
    display         : none;
    position        : fixed;
    z-index         : 9999;
    padding         : 40px;
    left            : 0;
    top             : 0;
    width           : 100%;
    height          : 100%;
    overflow        : auto;
    background-color: rgba(0, 0, 0, 0.85);
    text-align      : center;
}

.gallery-modal-content {
    max-width    : 90%;
    max-height   : 90vh;
    margin-top   : 40px;
    border-radius: 8px;
}

.gallery-close {
    position   : absolute;
    top        : 20px;
    right      : 35px;
    color      : white;
    font-size  : 35px;
    font-weight: bold;
    cursor     : pointer;
    z-index    : 10000;
}

.gallery-prev,
.gallery-next {
    cursor     : pointer;
    position   : absolute;
    top        : 50%;
    font-size  : 45px;
    padding    : 10px;
    color      : white;
    font-weight: bold;
    user-select: none;
    transform  : translateY(-50%);
}

.gallery-prev {
    left: 20px;
}

.gallery-next {
    right: 20px;
}

.gallery-prev:hover,
.gallery-next:hover {
    color: #ddd;
}

/*------------------------------------------------job section-------------------------------------------------*/
.job-section {
    padding            : 60px 0;
    background-color   : #eff3f7;
    background-image   : url(../img/work2_overlay.png);
    background-repeat  : no-repeat;
    background-size    : cover;
    background-position: center;
    position           : relative;
}

.job-section-title {
    text-align : center;
    font-size  : 40px;
    font-weight: 700;
}

.job-section-subtitle {
    font-size    : 17px;
    text-align   : center;
    color        : #666;
    margin-bottom: 50px;
    max-width    : 750px;
    margin-left  : auto;
    margin-right : auto;
    position     : relative;
}

.job-section-subtitle::before {
    content         : '';
    position        : absolute;
    top             : 100%;
    left            : 50%;
    transform       : translateX(-50%);
    width           : 50%;
    height          : 3px;
    background-color: #d8d8d8;
    margin-top      : 15px;
}

.job-section-subtitle::after {
    content         : '';
    position        : absolute;
    top             : 100%;
    left            : 50%;
    transform       : translateX(-50%);
    width           : 15%;
    height          : 3px;
    background-color: var(--primary-blue);
    margin-top      : 15px;
}

.job-cards-row {
    display       : flex;
    flex-direction: column;
    gap           : 20px;
    margin-top    : 20px;
}

.job-card {
    display              : grid;
    grid-template-columns: 130px 1fr 150px;
    background           : #fff;
    border-radius        : 12px;
    border               : 1px solid #ddd;
    padding              : 20px;
    gap                  : 20px;
    align-items          : start;
}

.job-card-left img {
    width        : 100%;
    object-fit   : cover;
    border-radius: 8px;
}

.job-title {
    margin-bottom: 15px;
    font-size    : 20px;
    font-weight  : 600;
}

.job-subtitle {
    margin   : 4px 0 15px 0;
    font-size: 15px;
    color    : #444;
}

.job-chips {
    display      : flex;
    gap          : 10px;
    margin-bottom: 15px;
}

.chip {
    padding        : 6px 12px;
    border         : 1px solid #ccc;
    background     : white;
    border-radius  : 5px;
    font-size      : 15px;
    font-weight    : 700;
    display        : flex;
    gap            : 6px;
    align-items    : center;
    width          : 17%;
    justify-content: center;

}

.job-btn-quote {
    background         : linear-gradient(to left, var(--primary-blue) 0%, var(--primary-blue) 50%, black 50%, black 100%);
    background-size    : 250% 110%;
    background-position: right bottom;
    color              : #ffffff !important;
    border             : none;
    padding            : 10px 24px !important;
    border-radius      : 4px;
    font-weight        : 600;
    font-size          : 15px;
    cursor             : pointer;
    display            : flex;
    align-items        : center;
    gap                : 8px;
    text-decoration    : none;
    transition         : background-position 0.4s ease-in-out;
    width              : 35.5%;
    justify-content    : center;
}

.job-btn-quote:hover {
    background-position: left bottom;
    color              : #ffffff;
    text-decoration    : none;
}

.job-card-right {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    text-align     : right;
    height         : 100%;
}

.apply-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    cursor          : pointer;
    height          : 40px;
    padding         : 0 24px;
    border-radius   : 100px;
    border          : none;
    font-weight     : 600;
    font-size       : 14px;
    letter-spacing  : 0.1px;
    background-color: #e0e8f5;
    color           : #001D35;
    box-shadow      : 0px 1px 2px rgba(0, 0, 0, 0.3),
        0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.apply-btn:hover {
    background-color: #BACDFF;
    box-shadow      : 0px 4px 8px 3px rgba(0, 0, 0, 0.15),
        0px 1px 3px rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

.apply-btn:active {
    background-color: #A1B9FF;
    transform       : scale(0.97);
}

.publish-date {
    font-size      : 13px;
    font-weight    : 500;
    color          : #64748b;
    letter-spacing : 0.3px;
    font-family    : 'Inter', -apple-system, sans-serif;
    display        : flex;
    justify-content: flex-end;
    align-items    : center;
    gap            : 6px;
    margin-top     : 8px;
    font-style     : normal;
}

.publish-date i {
    font-size: 14px;
    color    : #94a3b8;
}

.chips-row-mobile,
.buttons-row-mobile {
    display: none;
}

/*------------------------------------------------Scroll button-------------------------------------------------*/
.scroll-to-top-btn {
    display         : none;
    position        : fixed;
    bottom          : 20px;
    right           : 20px;
    z-index         : 99;
    width           : 50px;
    line-height     : 50px;
    text-align      : center;
    background-color: var(--primary-blue);
    color           : #fff;
    border-radius   : 4px;
    box-shadow      : 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    font-size       : 20px;
}

.scroll-to-top-btn:hover {
    background-color: #077499;
    color           : #fff;
    transform       : scale(1.05);
}

.scroll-to-top-btn i {
    pointer-events: none;
}

@media (max-width: 450px) {

    .top_slide,
    .bot_slide {
        margin-top: 13px;
    }

    .slide-img {
        height: 216px;
    }

    /*------------------------------------------------hero section------------------------------------------------*/
    .service-hero-section {
        position  : relative;
        padding   : 80px 15px;
        text-align: center;
        overflow  : hidden;
        min-height: 350px;
        margin-top: 70px;
    }

    .service-hero-section img {
        position  : absolute;
        top       : 0;
        left      : 0;
        width     : 100%;
        height    : 100%;
        object-fit: cover;
        z-index   : 0;
    }

    .service-hero-section .container {
        position: relative;
        z-index : 2;
    }

    .service-hero-section .row {
        width  : 100%;
        margin : 0;
        display: block;
    }

    .service-hero-section h1 {
        color        : white;
        font-size    : 26px;
        font-weight  : 700;
        line-height  : 1.3;
        margin-bottom: 10px;
    }

    .service-hero-section p {
        color        : rgba(255, 255, 255, 0.8);
        font-size    : 14px;
        margin-bottom: 15px;
        padding      : 0 10px;
    }

    .service-hero-section .breadcrumb {
        color          : white;
        font-size      : 13px;
        padding        : 10px 20px !important;
        justify-content: center;
    }

    .service-hero-section .breadcrumb a {
        color          : white;
        text-decoration: none;
    }

    .service-hero-section .breadcrumb i {
        font-size     : 10px;
        vertical-align: middle;
        margin        : 0 5px;
    }

    /*------------------------------------------------gen section------------------------------------------------*/
    .gen-section-wrapper {
        background-position: center bottom;
    }

    .gen-wrapper {
        display       : flex;
        flex-direction: column;
    }

    .gen-feature-list li {
        display      : flex;
        align-items  : baseline;
        gap          : 5px;
        line-height  : 1.3;
        margin-bottom: 12px;
    }

    .gen-content-row {
        margin-left : 0px !important;
        margin-right: 0px !important;
        overflow    : hidden;
    }

    .gen-content-inner {
        padding: 0px 15px 30px 15px;
    }

    .gen-main-title {
        font-size    : 30px;
        margin-bottom: 15px;
    }

    .gen-main-image {
        height: 350px !important;
    }

    .gen-metrics-box {
        width     : 100%;
        left      : 0;
        right     : 0;
        position  : relative;
        margin-top: 1px;
    }

    .gen-metrics-item {
        padding: 20px 10px;
    }

    .gen-metric-number,
    .gen-metric-icon {
        font-size: 28px;
    }

    .gen-metric-label {
        font-size: 11px;
    }

    .small-image-footer2 {
        margin-top   : 1px;
        padding      : 0px;
        gap          : 0px;
        border-radius: 0px;


    }

    .com-section-title,
    .job-section-title {
        font-size: 30px;
    }

    .footer-img2 {
        border-radius: 0px;
        width        : 22%;
        border       : 1px solid white;
    }

    /*------------------------------------------------job section-------------------------------------------------*/
    .job-card {
        display              : grid;
        grid-template-columns: 25% 75%;
        grid-template-rows   : auto auto auto;
        gap                  : 5px;
        padding              : 10px;
        align-items          : flex-start;
    }

    .job-card-left {
        grid-column    : 1 / 2;
        grid-row       : 1 / 2;
        display        : flex;
        align-items    : center;
        justify-content: center;
    }

    .job-card-left img {
        width        : 70%;
        object-fit   : cover;
        border-radius: 8px;
    }

    .job-card-middle {
        grid-column: 2 / 3;
        grid-row   : 1 / 2;
    }

    .job-title {
        font-size    : 17px;
        margin-bottom: 6px;
    }

    .job-subtitle {
        font-size    : 14px;
        margin-bottom: 5px;
    }

    .job-card-right {
        display: none !important;
    }

    .job-chips,
    .job-btn-quote {
        display: none !important;
    }

    .chips-row-mobile {
        grid-column       : 1 / 3;
        grid-row          : 2 / 3;
        width             : 100%;
        overflow-x        : auto;
        overflow-y        : hidden;
        -ms-overflow-style: none;
        scrollbar-width   : none;
        white-space       : nowrap;
    }

    .chips-row-mobile::-webkit-scrollbar {
        display: none;
    }

    .job-chips-mobile {
        display        : flex;
        align-items    : center;
        white-space    : nowrap;
        flex-wrap      : nowrap;
        justify-content: space-between;
        width          : 100%;
    }

    .job-chips-mobile .chip {
        display      : inline-flex;
        align-items  : center;
        gap          : 6px;
        padding      : 6px 12px;
        background   : white;
        border       : 1px solid #ccc;
        border-radius: 5px;
        font-size    : 14px;
        font-weight  : 600;
        white-space  : nowrap;
        width        : 30%;
    }

    .chips-row-mobile {
        grid-column: 1 / 3;
        grid-row   : 2 / 3;
        display    : flex;
        align-items: center;
        gap        : 12px;
        flex-wrap  : wrap;
    }

    .buttons-row-mobile {
        grid-column    : 1 / 3;
        grid-row       : 3 / 4;
        display        : flex;
        align-items    : center;
        flex-wrap      : wrap;
        gap            : 5px;
        margin-top     : 5px;
        justify-content: space-between;
    }

    .job-btn-quote-mobile {
        background         : linear-gradient(to left, var(--primary-blue) 0%, var(--primary-blue) 50%, black 50%, black 100%);
        background-size    : 250% 110%;
        background-position: right bottom;
        color              : #ffffff !important;
        border             : none;
        padding            : 8px 16px !important;
        border-radius      : 4px;
        font-weight        : 600;
        font-size          : 15px;
        cursor             : pointer;
        display            : flex;
        align-items        : center;
        gap                : 8px;
        text-decoration    : none;
        transition         : background-position 0.4s ease-in-out;
        width              : 48%;
        justify-content    : center;
    }

    .job-btn-quote-mobile:hover {
        background-position: left bottom;
        color              : #ffffff;
        text-decoration    : none;
    }

    .apply-btn-mobile {
        display        : inline-flex;
        align-items    : center;
        gap            : 6px;
        font-size      : 15px;
        font-weight    : 700;
        cursor         : pointer;
        border         : 1px solid #ccc;
        padding        : 8px 16px;
        border-radius  : 5px;
        margin-right   : 4px;
        width          : 48%;
        justify-content: center;
        color          : black;
    }

    /*------------------------------------------------Scroll button-------------------------------------------------*/
    #scrollToTopBtn {
        bottom: 30px;
        right : 15px;
    }
}

@media (max-width: 320px) {
    .apply-btn-mobile {
        margin-right: 0px;
    }

    .job-chips-mobile .chip {
        gap      : 3px;
        padding  : 7px 7px;
        font-size: 11px;
        width    : 32%;
    }

}

@media (min-width: 992px) and (max-width: 1299px) {
    .service-hero-section {
        height: 60vh;
    }

    .service-hero-section h1 {
        font-size: 48px;
    }

    .service-hero-section p {
        font-size: 18px;
        padding  : 0 100px;
    }

    .gen-content-inner {
        padding-left: 30px;
    }

    .gen-main-image {
        height: 590px !important;
    }

    .small-image-footer2 {
        gap: 8px;
    }
}


@media (min-width: 1300px) and (max-width: 1700px) {

    .service-hero-section {
        height: 60vh;
    }

    .service-hero-section h1 {
        font-size: 48px;
    }

    .service-hero-section p {
        font-size: 18px;
        padding  : 0 220px;
    }

    .gen-content-inner {
        padding-left: 30px;
    }

    .gen-main-image {
        height: 590px !important;
    }

    .small-image-footer2 {
        gap: 8px;
    }
}