/* =====================================================
   ROOT
===================================================== */

:root {

    --primary: #087fe5;
    --primary-dark: #0068c9;
    --navy: #102b45;
    --dark: #172d42;
    --text: #526273;
    --light: #f7f9fb;
    --border: #e4ebf2;
    --white: #ffffff;
    --contact-primary: #087fd8;
    --contact-blue: #0784df;
    --contact-navy: #153b5b;
    --contact-dark: #102f49;
    --contact-text: #536678;
    --contact-light: #f5f8fb;
    --contact-border: #dfe7ee;
        --rp-blue: #087fdc;
    --rp-dark: #082c49;
    --rp-dark-2: #0d3856;
    --rp-light: #f5f8fb;
    --rp-border: #dce6ee;
    --rp-text: #263f54;
    --rp-muted: #718294;
    --rp-white: #ffffff;
    --about-blue: #087fdc;
    --about-dark: #103b59;
    --about-dark-2: #072d46;
    --about-text: #506576;
    --about-light: #f5f8fb;
    --about-border: #dce7ef;
    --about-white: #ffffff;
                --rc-blue: #0868b8;
            --rc-dark-blue: #003b70;
            --rc-light-blue: #eaf6ff;
            --rc-navy: #082d50;
            --rc-text: #20252b;
            --rc-muted: #6b747d;
            --rc-border: #dce5ec;
            --rc-white: #ffffff;
            --rc-bg: #f5f9fc;
}


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

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

html {
    scroll-behavior: smooth;
}

a{
    text-decoration: none;
}

body {

    font-family: "DM Sans", sans-serif;

    color: var(--text);

    background: #ffffff;

    overflow-x: hidden;

}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

.section-padding {
    padding: 90px 0;
}


/* =====================================================
   TYPOGRAPHY
===================================================== */

.section-label {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-size: 11px;

    letter-spacing: 3px;

    font-weight: 700;

    color: var(--primary);

    margin-bottom: 12px;

}

.section-label::before {

    content: "";

    width: 18px;

    height: 3px;

    background: var(--primary);

    display: inline-block;

}

.section-title {

    font-family: "Playfair Display", serif;

    font-size: clamp(30px, 3vw, 42px);

    line-height: 1.1;

    color: var(--navy);

    font-weight: 700;

    margin-bottom: 18px;

}

.section-title span {

    color: var(--primary);

}

.section-text {

    font-size: 14px;

    line-height: 1.8;

    max-width: 620px;

    margin-bottom: 14px;

}




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



.hero-content {

    padding: 45px 0;

}

.light-label {

    color: #4d6175;

}

.about-hero h1 {

    font-family: "Playfair Display", serif;

    font-size: clamp(40px, 5vw, 60px);

    line-height: .98;

    color: var(--navy);

    margin: 12px 0;

}

.about-hero h1 span {

    color: var(--primary);

    display: block;

}

.about-hero p {

    max-width: 380px;

    font-size: 13px;

    line-height: 1.7;

    color: #627386;

}

.breadcrumb-custom {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 15px;

    font-size: 11px;

    color: #69798a;

}

.breadcrumb-custom a {

    color: #26394c;

}


/* =====================================================
   COUNTERS
===================================================== */

.counter-grid {

    display: grid;

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

    margin-top: 30px;

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

    padding-top: 22px;

}

.counter-item {

    display: flex;

    gap: 10px;

    align-items: center;

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

    padding: 0 15px;

}

.counter-item:first-child {

    padding-left: 0;

}

.counter-item:last-child {

    border-right: 0;

}

.counter-icon {

    color: var(--navy);

    font-size: 21px;

}

.counter-item h3 {

    font-size: 18px;

    margin: 0;

    color: var(--navy);

    font-weight: 700;

}

.counter-item p {

    margin: 2px 0 0;

    font-size: 9px;

    line-height: 1.35;

}


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

.about-image-wrapper {

    position: relative;

    padding-left: 20px;

}

.about-image-wrapper::before {

    content: "";

    position: absolute;

    top: 20px;

    left: 0;

    width: 90%;

    height: 90%;

    border: 1px solid #d8e5ef;

    z-index: 0;

}

.about-image-wrapper img {

    position: relative;

    z-index: 1;

    width: 100%;

    height: 420px;

    object-fit: cover;

}

.floating-card {

    position: absolute;

    right: -20px;

    bottom: 30px;

    z-index: 2;

    background: white;

    padding: 15px 20px;

    display: flex;

    gap: 12px;

    align-items: center;

    box-shadow: 0 15px 35px rgba(17, 45, 70, .15);

    min-width: 190px;

}

.floating-icon {

    width: 38px;

    height: 38px;

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

    color: var(--primary);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

}

.floating-card strong {

    display: block;

    font-size: 11px;

    color: var(--navy);

}

.floating-card span {

    font-size: 12px;

    color: var(--primary);

    font-weight: 700;

}


/* =====================================================
   MODERN JOURNEY SECTION
===================================================== */

.journey-modern {

    padding: 90px 0;

    background: #f7f9fb;

    position: relative;

    overflow: hidden;

}


/* Subtle background construction pattern */

.journey-modern::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    right: -220px;

    top: -200px;

    border: 1px solid rgba(8, 127, 229, .08);

    transform: rotate(45deg);

}

.journey-modern::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    left: -180px;

    bottom: -180px;

    border: 1px solid rgba(8, 127, 229, .06);

    transform: rotate(45deg);

}


/* Intro text */

.journey-intro {

    font-size: 13px;

    line-height: 1.8;

    color: #657586;

    max-width: 500px;

    margin-left: auto;

}


/* Main journey wrapper */

.journey-wrapper {

    position: relative;

    margin-top: 55px;

}


/* Vertical connecting line */

.journey-wrapper::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    bottom: 0;

    width: 1px;

    background: #cbdce9;

    transform: translateX(-50%);

}


/* Journey card */

.journey-card {

    width: 100%;

    display: grid;

    grid-template-columns: 1fr 70px 1fr;

    align-items: center;

    margin-bottom: 25px;

    position: relative;

}


/* Alternate layout */

.journey-card:nth-child(even) .journey-year {

    grid-column: 3;

    grid-row: 1;

    text-align: left;

    padding-left: 45px;

}

.journey-card:nth-child(even) .journey-marker {

    grid-column: 2;

    grid-row: 1;

}

.journey-card:nth-child(even) .journey-content {

    grid-column: 1;

    grid-row: 1;

    text-align: right;

    padding-right: 45px;

}


/* Year */

.journey-year {

    grid-column: 1;

    grid-row: 1;

    text-align: right;

    padding-right: 45px;

    font-family: "Playfair Display", serif;

    font-size: 42px;

    line-height: 1;

    font-weight: 700;

    color: #dce7ef;

    transition: .4s ease;

}


/* Marker */

.journey-marker {

    grid-column: 2;

    grid-row: 1;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #cbdce8;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-size: 21px;

    position: relative;

    z-index: 3;

    margin: auto;

    box-shadow: 0 8px 25px rgba(24, 61, 90, .08);

    transition: .4s ease;

}


/* Inner ring */

.journey-marker::before {

    content: "";

    position: absolute;

    inset: 6px;

    border: 1px dashed #b8d8ed;

    border-radius: 50%;

}


/* Content */

.journey-content {

    grid-column: 3;

    grid-row: 1;

    padding-left: 45px;

    padding-top: 5px;

    padding-bottom: 5px;

    position: relative;

}


/* Number */

.journey-number {

    display: inline-block;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

    color: var(--primary);

    margin-bottom: 5px;

}


/* Heading */

.journey-content h3 {

    font-family: "Playfair Display", serif;

    color: var(--navy);

    font-size: 24px;

    margin: 0 0 5px;

}


/* Subheading */

.journey-content h5 {

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;

    margin-bottom: 8px;

}


/* Description */

.journey-content p {

    max-width: 390px;

    font-size: 11px;

    line-height: 1.7;

    color: #69798a;

    margin: 0;

}


/* Hover */

.journey-card:hover .journey-marker {

    background: var(--primary);

    border-color: var(--primary);

    color: white;

    transform: scale(1.1);

    box-shadow: 0 12px 30px rgba(8, 127, 229, .25);

}

.journey-card:hover .journey-year {

    color: #b8d9f1;

}

.journey-card:hover .journey-content h3 {

    color: var(--primary);

}


/* Current year */

.journey-current .journey-marker {

    background: var(--primary);

    color: white;

    border-color: var(--primary);

    box-shadow: 0 10px 30px rgba(8, 127, 229, .25);

}

.journey-current .journey-year {

    color: var(--primary);

}


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

@media (max-width: 991px) {

    .journey-modern {

        padding: 70px 0;

    }

    .journey-intro {

        margin: 15px 0 0;

    }

}


@media (max-width: 767px) {

    .journey-modern {

        padding: 60px 0;

    }

    .journey-wrapper {

        margin-top: 35px;

    }

    /* Vertical line on left */

    .journey-wrapper::before {

        left: 28px;

        transform: none;

    }

    .journey-card {

        display: grid;

        grid-template-columns: 56px 1fr;

        margin-bottom: 35px;

        align-items: start;

    }

    .journey-year {

        position: absolute;

        top: 0;

        left: 75px;

        padding: 0 !important;

        text-align: left !important;

        font-size: 28px;

        color: #dce7ef;

    }

    .journey-marker,

    .journey-card:nth-child(even) .journey-marker {

        grid-column: 1;

        grid-row: 1;

        width: 56px;

        height: 56px;

        margin: 0;

    }

    .journey-content,

    .journey-card:nth-child(even) .journey-content {

        grid-column: 2;

        grid-row: 1;

        text-align: left;

        padding: 5px 0 0 25px;

    }

    .journey-content h3 {

        padding-top: 35px;

        font-size: 21px;

    }

    .journey-content p {

        max-width: 100%;

    }

    .journey-number {

        display: none;

    }

}

/* =====================================================
   MISSION & VISION - DETAILED CONTENT
===================================================== */

.mission-modern {
    padding: 90px 0;
    background: #f7f9fb;
    position: relative;
    overflow: hidden;
}


/* Background architectural elements */

.mission-modern::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    right: -220px;
    top: -200px;

    border: 1px solid rgba(8,127,229,.07);

    transform: rotate(45deg);
}

.mission-modern::after {
    content: "";

    position: absolute;

    width: 300px;
    height: 300px;

    left: -170px;
    bottom: -180px;

    border: 1px solid rgba(8,127,229,.06);

    transform: rotate(45deg);
}


/* Intro */

.mission-intro {

    max-width: 500px;

    margin-left: auto;
    margin-bottom: 5px;

    font-size: 13px;

    line-height: 1.8;

    color: #667789;
}


/* Main layout */

.mission-vision-wrapper {

    position: relative;

    display: grid;

    grid-template-columns: 1fr 90px 1fr;

    align-items: stretch;

    margin-top: 45px;
}


/* =====================================================
   PURPOSE BOX
===================================================== */

.purpose-box {

    position: relative;

    background: #ffffff;

    border: 1px solid #e1e9f0;

    padding: 42px;

    overflow: hidden;

    transition: .45s ease;
}


/* Top blue animation line */

.purpose-box::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 4px;

    background: var(--primary);

    transition: .5s ease;
}


/* Background number */

.purpose-number {

    position: absolute;

    right: 25px;
    top: 10px;

    font-family: "Playfair Display", serif;

    font-size: 90px;

    line-height: 1;

    font-weight: 700;

    color: #f1f5f8;

    z-index: 0;
}


/* Icon */

.purpose-icon {

    width: 58px;
    height: 58px;

    border: 1px solid #cfe4f2;

    background: #f4faff;

    color: var(--primary);

    display: flex;

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

    font-size: 27px;

    margin-bottom: 22px;

    position: relative;

    z-index: 2;

    transition: .4s ease;
}


/* Label */

.purpose-label {

    display: block;

    color: var(--primary);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2.5px;

    margin-bottom: 8px;
}


/* Heading */

.purpose-content h3 {

    font-family: "Playfair Display", serif;

    font-size: 33px;

    color: var(--navy);

    line-height: 1.15;

    margin-bottom: 15px;
}

.purpose-content h3 span {

    color: var(--primary);
}


/* Main paragraph */

.purpose-description {

    font-size: 15px;

    line-height: 1.8;

    color: #68798a;

    margin-bottom: 25px;
}


/* =====================================================
   MISSION POINTS
===================================================== */

.mission-points {

    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 20px;
}


.mission-point {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    padding-bottom: 15px;

    border-bottom: 1px solid #edf1f4;
}


.mission-point:last-child {

    border-bottom: 0;

    padding-bottom: 0;
}


.point-icon {

    width: 34px;
    height: 34px;

    min-width: 34px;

    border-radius: 50%;

    background: #edf7ff;

    color: var(--primary);

    display: flex;

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

    font-size: 15px;
}


.mission-point h4 {

    font-size: 17px;

    color: var(--navy);

    font-weight: 700;

    margin: 0 0 3px;
}


.mission-point p {

    font-size: 14.5px;

    line-height: 1.55;

    color: #728293;

    margin: 0;
}


/* =====================================================
   VISION HIGHLIGHT
===================================================== */

.vision-highlight {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding: 17px;

    margin: 20px 0;

    background: #f5faff;

    border-left: 3px solid var(--primary);
}


.vision-highlight-icon {

    width: 38px;
    height: 38px;

    min-width: 38px;

    display: flex;

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

    background: white;

    color: var(--primary);

    border: 1px solid #d9eaf6;

    font-size: 18px;
}


.vision-highlight strong {

    display: block;

    font-size: 16px;

    color: var(--navy);

    margin-bottom: 4px;
}


.vision-highlight p {

    font-size: 15.5px;

    line-height: 1.6;

    color: #718192;

    margin: 0;
}


/* =====================================================
   VISION VALUES
===================================================== */

.vision-values {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    margin-top: 20px;
}


.vision-value {

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 11px;

    border: 1px solid #e8eef3;

    background: #fff;

    transition: .3s ease;
}


.vision-value:hover {

    border-color: #b9dff7;

    transform: translateY(-3px);
}


.vision-value > i {

    color: var(--primary);

    font-size: 23px;
}


.vision-value strong {

    display: block;

    font-size: 16px;

    color: var(--navy);
}


.vision-value span {

    display: block;

    font-size: 13px;

    color: #8492a0;

    margin-top: 2px;
}


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

.purpose-bottom {

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

    border-top: 1px solid #edf1f4;

    margin-top: 25px;

    padding-top: 18px;
}


.purpose-bottom span {

    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 15.5px;

    font-weight: 700;

    color: #40566b;
}


.purpose-bottom i {

    color: var(--primary);

    font-size: 11px;
}


/* =====================================================
   CENTER CONNECTOR
===================================================== */

.purpose-connector {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    z-index: 5;
}


.connector-line {

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background: #cbdce8;

    z-index: -1;
}


.connector-icon {

    width: 62px;
    height: 62px;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #cbdce8;

    display: flex;

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

    color: var(--primary);

    font-size: 24px;

    box-shadow: 0 10px 30px rgba(20,55,80,.08);

    position: relative;
}


.connector-icon::before {

    content: "";

    position: absolute;

    inset: 7px;

    border: 1px dashed #b8d9ed;

    border-radius: 50%;
}


.connector-icon i {

    position: relative;

    z-index: 2;
}


.purpose-connector > span {

    position: absolute;

    top: calc(50% + 40px);

    font-size: 7px;

    letter-spacing: 2px;

    font-weight: 700;

    color: #8797a6;
}


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

.purpose-box:hover {

    transform: translateY(-7px);

    box-shadow: 0 20px 45px rgba(20,55,80,.10);

    border-color: #c9dfef;
}


.purpose-box:hover::before {

    width: 100%;
}


.purpose-box:hover .purpose-icon {

    background: var(--primary);

    color: white;

    border-color: var(--primary);

    transform: rotate(-5deg);
}


.purpose-box:hover .purpose-number {

    color: #e7f2fa;
}


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

@media (max-width: 1199px) {

    .purpose-box {

        padding: 32px;
    }

    .purpose-content h3 {

        font-size: 24px;
    }

}


@media (max-width: 991px) {

    .mission-modern {

        padding: 70px 0;
    }

    .mission-intro {

        margin: 15px 0 0;
    }

    .mission-vision-wrapper {

        grid-template-columns: 1fr;

        gap: 25px;
    }

    .mission-box,
    .vision-box {

        border: 1px solid #e1e9f0;
    }


    /* Center connector becomes vertical */

    .purpose-connector {

        height: 55px;
    }

    .connector-line {

        left: 50%;

        right: auto;

        top: 0;
        bottom: 0;

        width: 1px;

        height: auto;
    }

    .purpose-connector > span {

        display: none;
    }

}


@media (max-width: 575px) {

    .mission-modern {

        padding: 60px 0;
    }

    .purpose-box {

        padding: 27px 22px;
    }

    .purpose-number {

        font-size: 65px;

        right: 15px;
    }

    .purpose-icon {

        width: 50px;
        height: 50px;

        font-size: 23px;
    }

    .purpose-content h3 {

        font-size: 23px;
    }

    .vision-values {

        grid-template-columns: 1fr;
    }

    .purpose-bottom {

        gap: 10px;

        flex-direction: column;
    }

}

/* =====================================================
   VALUES
===================================================== */

.values-section {

    padding: 65px 0;

    background: #f8fafc;

}

.value-card {

    height: 100%;

    background: white;

    border: 1px solid #e4ebf2;

    text-align: center;

    padding: 25px 14px;

    transition: .3s ease;

}

.value-card:hover {

    transform: translateY(-8px);

    border-color: #b7dcf9;

    box-shadow: 0 12px 30px rgba(8,127,229,.1);

}

.value-card > i {

    font-size: 30px;

    color: var(--navy);

    display: block;

    margin-bottom: 12px;

}

.value-card h4 {

    font-size: 13px;

    color: var(--navy);

    line-height: 1.3;

}

.value-card p {

    font-size: 9px;

    line-height: 1.5;

    margin: 10px 0 0;

}


/* =====================================================
   WHY CHOOSE
===================================================== */

.why-section {

    background: #fff;

}

.why-image {

    height: 100%;

    min-height: 470px;

    position: relative;

    overflow: hidden;

}

.why-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.image-floating-card {

    position: absolute;

    bottom: 19px;

    left: 25px;

    background: white;

    padding: 17px 22px;

    display: flex;

    gap: 15px;

    align-items: center;

    box-shadow: 0 15px 30px rgba(0,0,0,.12);

}

.image-floating-card i {

    color: var(--primary);

    font-size: 30px;

}

.image-floating-card span {

    font-size: 11px;

    color: var(--navy);

    font-weight: 700;

}

.why-content {

    padding: 75px 10%;

    background: #f8fafc;

    height: 100%;

}

.why-list {

    list-style: none;

    padding: 0;

    margin: 25px 0 0;

}

.why-list li {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 14px;

    font-size: 12px;

    color: #3e5367;

}

.why-list i {

    color: var(--primary);

    font-size: 17px;

}


/* =====================================================
   EXPERTISE
===================================================== */

.expertise-section {

    padding: 75px 0;

}

.view-link {

    color: var(--primary);

    font-size: 11px;

    font-weight: 700;

}

.expertise-card {

    height: 180px;

    position: relative;

    overflow: hidden;

    border-radius: 4px;

}

.expertise-card img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s ease;

}

.expertise-card:hover img {

    transform: scale(1.1);

}

.expertise-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(9,29,48,.9),
        rgba(9,29,48,.05)
    );

}

.expertise-title {

    position: absolute;

    left: 13px;

    bottom: 13px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: white;

}

.expertise-title i {

    font-size: 19px;

}

.expertise-title span {

    font-size: 9px;

    font-weight: 600;

    line-height: 1.3;

}


/* =====================================================
   LEADERSHIP TEAM
===================================================== */

.leadership-section {
    padding: 80px 0;
    background: #f7f9fb;
}

.leadership-intro {
    font-size: 13px;
    line-height: 1.8;
    color: #64748b;
    margin: 0;
    max-width: 400px;
    margin-left: auto;
}


/* ==============================
   LEADER CARD
============================== */

.leader-card {
    background: #ffffff;
    border: 1px solid #e3e9ef;
    height: 100%;
    transition: all 0.35s ease;
    overflow: hidden;
    position: relative;
}

.leader-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(15, 42, 67, 0.12);
}


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

.leader-image {
    height: 320px;
    position: relative;
    overflow: hidden;
    background: #e9eef2;
}

.leader-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s ease;
}

.leader-card:hover .leader-image img {
    transform: scale(1.05);
}


/* Number */

.leader-number {
    position: absolute;
    top: 15px;
    right: 15px;

    width: 42px;
    height: 42px;

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

    background: var(--primary);
    color: #ffffff;

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

    border-radius: 50%;
}


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

.leader-content {
    padding: 24px 22px 26px;
    position: relative;
}

.leader-content h3 {
    margin: 0 0 5px;

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

    color: var(--navy);
}

.leader-content span {
    display: block;

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

    color: var(--primary);

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 13px;
}

.leader-content p {
    margin: 0;

    font-size: 11px;
    line-height: 1.7;

    color: #687789;
}


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

@media (max-width: 991px) {

    .leadership-section {
        padding: 65px 0;
    }

    .leadership-intro {
        margin-left: 0;
        margin-top: 15px;
    }

    .leader-image {
        height: 300px;
    }

}


@media (max-width: 575px) {

    .leadership-section {
        padding: 55px 0;
    }

    .leader-image {
        height: 350px;
    }

    .leader-content {
        padding: 22px 20px;
    }

}

/* =====================================================
   TRUSTED ORGANISATIONS
===================================================== */

.trusted-section {
    padding: 65px 0 75px;
    background: #ffffff;
}

.trusted-heading {
    margin-bottom: 35px;
}

.trusted-label {
    display: block;

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

    letter-spacing: 2px;
    text-transform: uppercase;

    color: var(--primary);

    margin-bottom: 8px;
}

.trusted-title {
    font-family: "Playfair Display", serif;

    color: var(--navy);

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

    margin: 0 0 8px;
}

.trusted-subtitle {
    font-size: 16px;
    color: #718096;

    max-width: 500px;
    margin: 0 auto;

    line-height: 1.7;
}


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

.trusted-logo {
    width: 100px;
    height: 100px !important;

    background: #ffffff;

    border: 1px solid #e4e9ee;

    border-radius: 50%;

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

    margin: 5px auto;

    overflow: hidden;

    transition: all 0.3s ease;
}

.trusted-logo img {
    max-width: 75px;
    max-height: 65px;

    width: auto;
    height: auto;

    object-fit: contain;

    /* filter: grayscale(100%);
    opacity: 0.7; */

    transition: all 0.3s ease;
}

.trusted-logo:hover {
    border-color: var(--primary);

    transform: translateY(-5px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.trusted-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* =====================================================
   OWL CAROUSEL
===================================================== */

.trusted-carousel {
    position: relative;
}

.trusted-carousel .owl-stage {
    display: flex;
    align-items: center;
}

.trusted-carousel .owl-item {
    display: flex;
}


/* Remove default dots */

.trusted-carousel .owl-dots {
    margin-top: 25px;
}

.trusted-carousel .owl-dot span {
    width: 7px;
    height: 7px;
    background: #cbd5df !important;
}

.trusted-carousel .owl-dot.active span {
    background: var(--primary) !important;
}


/* Navigation */

.trusted-carousel .owl-nav {
    margin: 0;
}

.trusted-carousel .owl-nav button {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 38px;
    height: 38px;

    border-radius: 50% !important;

    background: #ffffff !important;

    border: 1px solid #dce3e9 !important;

    color: var(--navy) !important;

    box-shadow: 0 5px 15px rgba(0,0,0,0.08);

    transition: all 0.3s ease;
}

.trusted-carousel .owl-nav button:hover {
    background: var(--primary) !important;

    color: #ffffff !important;

    border-color: var(--primary) !important;
}

.trusted-carousel .owl-prev {
    left: -50px;
}

.trusted-carousel .owl-next {
    right: -50px;
}


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

@media (max-width: 1200px) {

    .trusted-carousel .owl-prev {
        left: -15px;
    }

    .trusted-carousel .owl-next {
        right: -15px;
    }

}


@media (max-width: 768px) {

    .trusted-section {
        padding: 50px 0 60px;
    }

    .trusted-title {
        font-size: 24px;
    }

    .trusted-logo {
        height: 80px;
    }

    .trusted-logo img {
        max-width: 120px;
        max-height: 50px;
    }

    .trusted-carousel .owl-nav {
        display: none;
    }

}

/* =====================================================
   CTA
===================================================== */
@media (max-width:768px){
.cta-section {
    /*margin-bottom: 0px;*/
    padding: 35px 0 !important;
    background: linear-gradient(90deg, rgba(9, 34, 54, .97), rgba(9, 34, 54, .83)), url(../assets/building-6.jpg) !important;
    background-size: cover !important;
    background-position: center !important;
    /* border-radius: 76px; */
}
}

.cta-section {
    /*margin-bottom: 30px;*/
    padding: 35px 0;

    background:

        linear-gradient(
            90deg,
            rgba(9,34,54,.97),
            rgba(9,34,54,.83)
        ),

        url("../assets/building-6.jpg");

    background-size: cover;

    background-position: center;
    /*border-radius: 76px;*/
}

.cta-section h2 {

    color: white;

    font-family: "Playfair Display", serif;

    font-size: 32px;

    margin: 0;

}

.cta-section h2 span {

    display: block;

    color: var(--primary);

}

.cta-right {

    display: flex;

    align-items: center;

    gap: 25px;

}

.cta-right p {

    color: #dce7f0;

    font-size: 14px;

    line-height: 1.6;

    max-width: 250px;

    margin: 0;

}

.cta-btn {

    background: var(--primary);

    color: white;

    font-size: 10px;

    font-weight: 700;

    padding: 13px 18px;

    white-space: nowrap;

}

.cta-btn:hover {

    color: white;

    background: #1993f0;

}




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

.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes floating {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

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

.floating-card {

    animation: floating 3s ease-in-out infinite;

}


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

@media (max-width: 991px) {

    .navbar-nav {

        padding: 15px 0;

    }

    .nav-link {

        padding: 10px 0 !important;

    }

    .nav-link::after {

        display: none;

    }

    .quote-btn {

        display: inline-block;

        margin-bottom: 15px;

    }

    .counter-grid {

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

        gap: 20px;

    }

    .counter-item {

        border-right: 0;

        padding: 0;

    }

    .about-image-wrapper {

        padding-left: 0;

        margin-top: 20px;

    }

    .timeline {

        margin-top: 40px;

    }

    .why-content {

        padding: 55px 8%;

    }

    .cta-right {

        margin-top: 20px;

    }

}


@media (max-width: 767px) {

    .section-padding {

        padding: 60px 0;

    }

    .about-hero {

        min-height: 380px !important;

        background-position: 76% center;

    }

    .about-hero h1 {

        font-size: 42px;

    }

    .counter-grid {

        grid-template-columns: 1fr 1fr;

    }

    .timeline {

        display: block;

        padding-left: 30px;

    }

    .timeline-line {

        top: 0;

        bottom: 0;

        left: 20px;

        width: 1px;

        height: auto;

    }

    .timeline-item {

        width: 100%;

        display: grid;

        grid-template-columns: 45px 1fr;

        text-align: left;

        margin-bottom: 25px;

        align-items: center;

    }

    .timeline-icon {

        grid-row: span 3;

        margin: 0;

    }

    .timeline-item span,
    .timeline-item h4,
    .timeline-item p {

        margin-left: 15px;

    }

    .mission-card {

        padding: 20px;

    }

    .why-image {

        min-height: 350px;

    }

    .expertise-section .d-flex {

        display: block !important;

    }

    .view-link {

        display: inline-block;

        margin-top: 10px;

    }

    .leadership-card {

        border-right: 0;

        border-bottom: 1px solid #dce5ec;

    }

    .leadership-card:last-child {

        border-bottom: 0;

    }

    .cta-section h2 {

        font-size: 26px;

    }

    .cta-right {

        display: block;

    }

    .cta-btn {

        display: inline-block;

        margin-top: 15px;

    }

}


@media (max-width: 480px) {

    .counter-grid {

        grid-template-columns: 1fr;

    }

    .counter-item {

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

        padding-bottom: 12px;

    }

    .floating-card {

        right: 10px;

        bottom: 15px;

    }

}



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

.contact-hero,
.contact-info-strip,
.get-touch-section,
.office-section,
.presence-section,
.contact-faq,
.contact-final-cta {

    font-family: "DM Sans", sans-serif;

}



.section-title {
    font-family: "Playfair Display", serif;

    font-size: 38px;

    line-height: 1.15;

    color: var(--contact-navy);

    margin: 0;
}

.section-title span {
    color: var(--contact-primary);
}


/* =====================================================
   CONTACT HERO
===================================================== */

.contact-hero {
    position: relative;

    min-height: 380px;

    background:
        linear-gradient(
            90deg,
            rgba(2, 35, 57, .96) 0%,
            rgba(2, 43, 69, .86) 35%,
            rgba(2, 43, 69, .25) 75%,
            rgba(2, 43, 69, .1) 100%
        ),
        url("../img/contact-banner.png")
        center right / cover no-repeat;

    display: flex;

    align-items: center;

    overflow: hidden;
}

.contact-hero-content {
    margin: 120px 0 30px;
    padding: 50px 0;
    position: relative;
    z-index: 2;
}

.contact-hero-image {
    display: none;
}

.contact-hero h1 {
    font-family: "Playfair Display", serif;

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.02;

    font-weight: 600;

    color: #fff;

    margin: 0 0 18px;
}

.contact-hero h1 span {
    color: var(--contact-primary);
}

.contact-hero p {
    max-width: 480px;

    font-size: 15px;

    line-height: 1.7;

    color: #ffffff;

    margin-bottom: 22px;
}

.contact-breadcrumb {
    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 15px;

    color: #ffffff;
}

.contact-breadcrumb a {
    color: #ffffff;

    text-decoration: none;
}

.contact-breadcrumb i {
    font-size: 8px;

    color: var(--contact-primary);
}




/* =====================================================
   CONTACT INFO
===================================================== */
/* =========================================================
   CONTACT INFO CARDS
========================================================= */

.contact-info-strip {
    position: relative;
    z-index: 5;
    padding: 60px 0;
    background: #f6f9fc;
}


/* CARD */

.contact-info-item {
    position: relative;
    height: 100%;
    min-height: 180px;

    padding: 28px 25px;

    display: flex;
    align-items: flex-start;
    gap: 18px;

    background: #ffffff;

    border: 1px solid #e2eaf0;
    border-radius: 8px;

    box-shadow: 0 8px 25px rgba(17, 47, 73, 0.06);

    transition: all 0.35s ease;
}


/* HOVER */

.contact-info-item:hover {
    transform: translateY(-6px);

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

    box-shadow: 0 15px 35px rgba(17, 47, 73, 0.12);
}


/* ICON */

.contact-info-icon {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #eef7ff;
    color: var(--contact-primary);

    font-size: 21px;

    transition: all 0.3s ease;
}


.contact-info-item:hover .contact-info-icon {
    background: var(--contact-primary);
    color: #ffffff;
    transform: scale(1.08);
}


/* TITLE */

.info-title {
    display: block;

    margin-bottom: 7px;

    color: var(--contact-primary);

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

    letter-spacing: 1.5px;
    text-transform: uppercase;
}


/* PHONE / EMAIL / ADDRESS */

.contact-info-item a,
.contact-info-item strong {
    display: block;

    color: var(--contact-navy);

    text-decoration: none;

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

    line-height: 1.6;
}


/* DESCRIPTION */

.contact-info-item small {
    display: block;

    margin-top: 7px;

    color: #8492a0;

    font-size: 13px;
    line-height: 1.5;
}


/* GET DIRECTIONS */

.quick-link {
    color: var(--contact-primary) !important;

    font-size: 11px !important;
    font-weight: 600 !important;

    margin-top: 7px;
}


/* REMOVE OLD DIVIDER */

.contact-info-item:last-child {
    border-right: 1px solid #e2eaf0;
}


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

@media (max-width: 991px) {

    .contact-info-strip {
        padding: 45px 0;
    }

    .contact-info-item {
        min-height: 165px;
    }

}


@media (max-width: 767px) {

    .contact-info-strip {
        padding: 35px 0;
    }

    .contact-info-item {
        min-height: auto;
        padding: 22px 20px;
    }

}

/* =====================================================
   GET IN TOUCH
===================================================== */

.get-touch-section {
    padding: 90px 0;

    background: #f7f9fb;
}

.touch-description {
    font-size: 14px;

    line-height: 1.8;

    color: var(--contact-text);

    max-width: 470px;

    margin: 25px 0;
}

.contact-benefits {
    display: flex;

    flex-direction: column;

    gap: 13px;
}

.benefit-item {
    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 16px;

    color: #506476;
}

.benefit-item i {
    color: var(--contact-primary);

    font-size: 16px;
}


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

.contact-form-card {
    background: #ffffff;

    padding: 30px;

    border: 1px solid #e1e8ee;

    box-shadow: 0 15px 40px rgba(17, 47, 73, 0.06);
}

.contact-form-card label {
    display: block;

    font-size: 16px;

    font-weight: 600;

    color: var(--contact-navy);

    margin-bottom: 7px;
}

.contact-form-card label span {
    color: #e74c3c;
}

.contact-form-card .form-control,
.contact-form-card .form-select {
    height: 43px;

    border: 1px solid #dce4ea;

    border-radius: 2px;

    font-size: 15px;

    color: #506476;

    box-shadow: none;

    padding: 10px 13px;
}

.contact-form-card textarea.form-control {
    height: auto;

    min-height: 105px;

    resize: vertical;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
    border-color: var(--contact-primary);

    box-shadow: 0 0 0 3px rgba(8, 127, 216, 0.08);
}

.contact-form-card .form-control::placeholder {
    color: #a2adb7;
}

.contact-submit {
    width: 100%;

    height: 45px;

    border: 0;

    background: var(--contact-primary);

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .2px;

    transition: .3s ease;
}

.contact-submit:hover {
    background: var(--contact-navy);

}

.contact-submit i {
    margin-left: 8px;
}

.form-security {
    text-align: center;

    color: #98a5b1;

    font-size: 11px;
}

.form-security i {
    margin-right: 4px;

    color: #6c879a;
}


/* =====================================================
   OFFICE
===================================================== */

.office-section {
    padding: 80px 0;

    background: #ffffff;
}

.office-wrapper {
    border: 1px solid #e0e7ed;

    overflow: hidden;

    box-shadow: 0 12px 35px rgba(16, 47, 73, 0.05);
}

.office-map {
    height: 370px;

    background: #edf1f4;
}

.office-map iframe {
    width: 100%;
    height: 100%;

    border: 0;

    filter: grayscale(20%);
}

.office-details {
    height: 100%;

    padding: 55px 50px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.office-details h2 {
    font-family: "Playfair Display", serif;

    font-size: 34px;

    color: var(--contact-navy);

    margin-bottom: 35px;
}

.office-details h2 span {
    color: var(--contact-primary);
}

.office-detail {
    display: flex;

    gap: 18px;
}

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

    flex-shrink: 0;

    background: #eef7ff;

    color: var(--contact-primary);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;
}

.office-detail strong {
    display: block;

    color: var(--contact-navy);

    font-size: 21px;

    margin-bottom: 8px;
}

.office-detail p {
    font-size: 15px;

    color: #68798a;

    line-height: 1.7;

    margin: 0;
}

.direction-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-top: 25px;

    padding: 11px 18px;

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

    color: var(--contact-primary);

    text-decoration: none;

    font-size: 10px;

    transition: .3s ease;
}

.direction-btn:hover {
    background: var(--contact-primary);

    color: #ffffff;
}



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

.contact-faq {
    padding: 80px 0;

    background: #ffffff;
}

.faq-heading {
    margin-bottom: 35px;
}

.contact-accordion .accordion-item {
    border: 1px solid #e1e7ec;

    margin-bottom: 10px;

    border-radius: 0 !important;

    overflow: hidden;
}

.contact-accordion .accordion-button {
    background: #ffffff;

    color: var(--contact-navy);

    font-size: 19px;

    font-weight: 600;

    padding: 17px 20px;

    box-shadow: none;
}

.contact-accordion .accordion-button:not(.collapsed) {
    background: #f6faff;

    color: var(--contact-primary);
}

.contact-accordion .accordion-button::after {
    background-size: 12px;
}

.contact-accordion .accordion-body {
    font-size: 16px;

    line-height: 1.7;

    color: #718096;

    background: #ffffff;

    padding: 0 20px 18px;
}


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

.contact-final-cta {
    padding: 55px 0;

    background:
        linear-gradient(
            90deg,
            rgba(10, 39, 61, .96),
            rgba(10, 39, 61, .82)
        ),
        url("assets/images/construction-bg.jpg")
        center / cover no-repeat;

    color: #ffffff;
}

.cta-content {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}

.contact-final-cta .section-label {
    color: #59adf0;
}

.contact-final-cta h2 {
    font-family: "Playfair Display", serif;

    font-size: 34px;

    margin: 0 0 8px;

    color: #ffffff;
}

.contact-final-cta h2 span {
    color: #55aef2;
}

.contact-final-cta p {
    font-size: 11px;

    color: #c6d4df;

    margin: 0;
}

.cta-button {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    background: var(--contact-primary);

    color: #ffffff;

    text-decoration: none;

    padding: 13px 25px;

    font-size: 10px;

    font-weight: 600;

    white-space: nowrap;

    transition: .3s ease;
}

.cta-button:hover {
    background: #ffffff;

    color: var(--contact-navy);
}

.cta-button i {
    font-size: 12px;
}


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

@media (max-width: 991px) {

    .contact-hero {
        min-height: 420px;

        background-position: center;
    }

    .contact-hero-content {
        padding: 60px 0;
    }

    .contact-info-item {
        border-bottom: 1px solid #e1e7ec;
    }

    .contact-info-item:nth-child(even) {
        border-right: 0;
    }

    .office-details {
        padding: 45px 35px;
    }

    .cta-content {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 767px) {

    .contact-hero {
        min-height: 380px;
        background-position: 76% center !important;
    }

    .contact-hero h1 {
        font-size: 40px;
    }

    .contact-info-item {
        border-right: 0;
    }

    .get-touch-section,
    .office-section,
    .presence-section,
    .contact-faq {
        padding: 60px 0;
    }

    .section-title {
        font-size: 29px;
    }

    .contact-form-card {
        padding: 22px;
    }

    .office-map {
        height: 300px;
    }

    .office-details {
        padding: 35px 25px;
    }

    .office-details h2 {
        font-size: 29px;
    }

    .contact-final-cta h2 {
        font-size: 29px;
    }

}


@media (max-width: 575px) {

    .contact-hero-content {
        padding: 0px 0 10px;
    }

    .contact-hero h1 {
        font-size: 35px;
    }

    .contact-hero p {
        font-size: 11px;
    }

    .contact-info-item {
        min-height: 90px;

        padding: 18px;
    }

    .contact-info-icon {
        width: 38px;
        height: 38px;
    }

    .presence-card {
        padding: 22px;
    }

    .cta-button {
        width: 100%;

        justify-content: center;
    }

}


/* =====================================================
   OUR PROJECTS PAGE
===================================================== */

.projects-section,
.projects-hero,
.projects-cta {

    font-family: "DM Sans", sans-serif;

}


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

.projects-hero {

    min-height: 335px;

    position: relative;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(2, 35, 57, .96) 0%,
            rgba(2, 43, 69, .86) 35%,
            rgba(2, 43, 69, .25) 75%,
            rgba(2, 43, 69, .1) 100%
        ),
        url("../img/project-banner.png")
        center / cover no-repeat;

    overflow: hidden;

}


.projects-hero-content {

    padding: 60px 0;

}


.projects-label {

    display: inline-block;

    position: relative;

    padding-left: 25px;

    margin-bottom: 12px;

    color: #0784df;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.projects-label::before {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 16px;

    height: 2px;

    background: #0784df;

    transform: translateY(-50%);

}


.projects-hero h1 {

    font-family: "Playfair Display", serif;

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

    line-height: 1.02;

    font-weight: 600;

    color: #ffffff;

    margin: 0 0 18px;

}


.projects-hero h1 span {

    color: #0784df;

}


.projects-hero p {

    max-width: 500px;

    color: #66788a;

    font-size: 12px;

    line-height: 1.7;

    margin-bottom: 20px;

}


.projects-breadcrumb {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 9px;

    color: #ffffff;

}


.projects-breadcrumb a {

    text-decoration: none;

    color: #ffffff;

}


.projects-breadcrumb i {

    font-size: 8px;

    color: #0784df;

}


/* =====================================================
   PROJECTS SECTION
===================================================== */

/* =====================================================
   PROJECTS SECTION
===================================================== */

.projects-section {
    padding: 40px 0 90px;
    background: #ffffff;
    font-family: "DM Sans", sans-serif;
}


/* =====================================================
   MAIN PROJECT TABS
   COMPLETED / ONGOING
===================================================== */

.main-project-tabs {
    display: flex;
    justify-content: center;
    align-items: stretch;

    gap: 15px;

    margin-bottom: 55px;
}


/* Main Tab */

.main-project-tab {
    width:200px;
    height: 60px;

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

    gap: 15px;

    padding: 12px 20px;

    background: #ffffff;

    border: 1px solid #d6e0e8;
    border-radius: 30px;

    color: #153b5b;

    cursor: pointer;

    text-align: left;

    transition: all 0.3s ease;

    font-family: inherit;
}


/* Hover */

.main-project-tab:hover {
    border-color: #0784df;
}


/* Active */

.main-project-tab.active {
    background: #0784df;

    border-color: #0784df;

    color: #ffffff;

    box-shadow: 0 10px 25px rgba(7, 132, 223, 0.18);
}


/* =====================================================
   MAIN TAB ICON
===================================================== */

.main-tab-icon {
    width: 45px;
    height: 45px;

    min-width: 45px;

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

    border: 1px solid #d5e1e9;

    color: #0784df;

    font-size: 19px;

    transition: all 0.3s ease;
}


/* Active Icon */

.main-project-tab.active .main-tab-icon {
    color: #ffffff;

    border-color: rgba(255, 255, 255, 0.45);

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


/* =====================================================
   MAIN TAB TEXT
===================================================== */

.main-tab-text {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;
}


.main-tab-text strong {
    display: block;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.3;

    white-space: nowrap;
}


.main-tab-text small {
    display: block;

    font-size: 8px;

    font-weight: 400;

    line-height: 1.4;

    color: #7890a3;

    white-space: nowrap;
}


/* Active Small Text */

.main-project-tab.active .main-tab-text small {
    color: rgba(255, 255, 255, 0.75);
}


/* =====================================================
   MAIN TAB CONTENT
===================================================== */

.main-project-content {
    display: none;
}


.main-project-content.active {
    display: block;

    animation: projectFade 0.35s ease;
}


/* =====================================================
   TAB ANIMATION
===================================================== */

@keyframes projectFade {

    0% {
        opacity: 0;
        transform: translateY(25px) scale(.98);
        filter: blur(4px);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

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

}


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

.projects-heading-row {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 30px;

    text-align: center;
}


/* Section Label */

.section-label {
    display: inline-block;

    position: relative;

    padding-left: 25px;

    margin-bottom: 10px;

    color: #0784df;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* Label Line */

.section-label::before {
    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 16px;

    height: 2px;

    background: #0784df;

    transform: translateY(-50%);
}


/* Project Heading */

.projects-title {
    font-family: "Playfair Display", serif;

    font-size: 35px;

    line-height: 1.1;

    color: #153b5b;

    margin: 0;
}


.projects-title span {
    color: #0784df;
}


/* Heading Description */

.projects-heading-description {
    max-width: 600px;

    margin: 0 auto;

    text-align: center;
}


.projects-heading-description p {
    margin: 0;

    font-size: 10px;

    line-height: 1.8;

    color: #718096;
}


/* =====================================================
   CATEGORY TABS
===================================================== */

.category-tabs {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 30px;
}

.category-tab {
    padding: 9px 18px;

    border: 1px solid #dce5ec;

    border-radius: 3px;

    background: #ffffff;

    color: #31516d;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.25s ease;

    font-family: inherit;
}


/* Category Hover */

.category-tab:hover {
    border-color: #0784df;

    color: #0784df;
}


/* Category Active */

.category-tab.active {
    background: #07508c;

    border-color: #07508c;

    color: #ffffff;
}


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

.category-content {
    display: none;
}


.category-content.active {
    display: block;

    animation: projectFade 0.3s ease;
}


/* =====================================================
   PROJECT CARD
===================================================== */

.project-card {
    height: 100%;

    background: #ffffff;

    border: 1px solid #dfe7ed;

    overflow: hidden;

    transition: all 0.3s ease;
}


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

    box-shadow:
        0 15px 35px rgba(15, 54, 82, 0.09);
}


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

.project-image {
    height: 280px;

    position: relative;

    overflow: hidden;
}


.project-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.project-card:hover .project-image img {
    transform: scale(1.05);
}


/* =====================================================
   PROJECT BADGE
===================================================== */

.project-badge {
    position: absolute;

    top: 13px;

    left: 13px;

    padding: 6px 11px;

    background: #07508c;

    color: #ffffff;

    border-radius: 3px;

    font-size: 8px;

    font-weight: 600;

    line-height: 1;
}


/* =====================================================
   PROJECT VIEW ICON
===================================================== */

.project-view-icon {
    position: absolute;

    top: 13px;

    right: 13px;

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ffffff;

    color: #07508c;

    border-radius: 3px;

    text-decoration: none;

    font-size: 12px;

    transition: all 0.3s ease;
}


.project-view-icon:hover {
    background: #0784df;

    color: #ffffff;
}


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

.project-content {
    padding: 18px 17px 20px;
}


.project-content h3 {
    color: #153b5b;

    font-size: 17px;

    font-weight: 700;

    margin: 0 0 7px;
}


/* =====================================================
   PROJECT LOCATION
===================================================== */

.project-location {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #708397;

    font-size: 10px;

    margin-bottom: 10px;
}


.project-location i {
    color: #0784df;

    font-size: 11px;
}


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

.project-content p {
    min-height: 45px;

    margin: 0 0 15px;

    color: #708397;

    font-size: 11px;

    line-height: 1.7;
}


/* =====================================================
   VIEW MORE BUTTON
===================================================== */

.view-more-btn {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #0784df;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    transition: all 0.25s ease;
}


.view-more-btn i {
    transition: transform 0.25s ease;
}


.view-more-btn:hover {
    color: #07508c;
}


.view-more-btn:hover i {
    transform: translateX(4px);
}


/* =====================================================
   ONGOING PROJECT CARD
===================================================== */

.ongoing-card {
    display: flex;

    height: 100%;

    background: #ffffff;

    border: 1px solid #dce6ed;

    overflow: hidden;

    transition: all 0.3s ease;
}


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

    box-shadow:
        0 15px 35px rgba(15, 54, 82, 0.09);
}


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

.ongoing-image {
    width: 48%;

    min-height: 275px;

    position: relative;

    overflow: hidden;
}


.ongoing-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}


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

.ongoing-content {
    width: 52%;

    padding: 25px 20px;

    display: flex;

    flex-direction: column;
}


.ongoing-content h3 {
    color: #153b5b;

    font-size: 18px;

    font-weight: 700;

    margin: 0 0 7px;
}


.ongoing-content .project-location {
    margin-bottom: 25px;
}


/* =====================================================
   PROGRESS
===================================================== */

.progress-wrapper {
    margin-bottom: 18px;
}


.progress-info {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 7px;
}


.progress-info span {
    color: #718096;

    font-size: 12px;
}


.progress-info strong {
    color: #0784df;

    font-size: 12px;
}


.progress {
    height: 6px;

    background: #e9eff4;

    border-radius: 20px;

    overflow: hidden;
}


.progress-bar {
    height: 100%;

    background: #0784df;

    border-radius: 20px;
}


/* =====================================================
   COMPLETION DATE
===================================================== */

.completion-date {
    color: #718096;

    font-size: 11px;

    line-height: 1.6;

    margin-bottom: 20px;
}


.completion-date i {
    color: #0784df;

    margin-right: 5px;
}


.completion-date strong {
    color: #153b5b;
}


/* Keep View More at bottom */

.ongoing-content .view-more-btn {
    margin-top: auto;
}


/* =====================================================
   RESPONSIVE - TABLET
===================================================== */

@media (max-width: 991px) {

    .projects-heading-row {
        align-items: flex-start;

        flex-direction: column;

        gap: 20px;
    }


    .projects-heading-description {
        max-width: 600px;
    }


    .ongoing-card {
        flex-direction: column;
    }


    .ongoing-image,
    .ongoing-content {
        width: 100%;
    }


    .ongoing-image {
        height: 230px;

        min-height: 230px;
    }

}


/* =====================================================
   RESPONSIVE - MOBILE
===================================================== */

@media (max-width: 767px) {

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


    /* Main tabs */

    .main-project-tabs {
        flex-direction: column;

        align-items: center;

        gap: 8px;

        margin-bottom: 40px;
    }


    .main-project-tab {
        width: 100%;

        max-width: 400px;

        height: 78px;
    }


    /* Heading */

    .projects-title {
        font-size: 29px;
    }


    /* Category tabs */

    .category-tabs {
        /* flex-wrap: nowrap; */

        overflow-x: auto;

        padding-bottom: 7px;

        scrollbar-width: none;
    }


    .category-tabs::-webkit-scrollbar {
        display: none;
    }


    .category-tab {
        flex-shrink: 0;
    }

}


/* =====================================================
   RESPONSIVE - SMALL MOBILE
===================================================== */

@media (max-width: 575px) {

    .projects-title {
        font-size: 27px;
    }


    .project-image {
        height: 210px;
    }


    .ongoing-image {
        height: 220px;

        min-height: 220px;
    }


    .ongoing-content {
        padding: 22px 18px;
    }


    .main-project-tab {
        padding: 12px 18px;
    }


    .main-tab-icon {
        width: 43px;

        height: 43px;

        min-width: 43px;
    }

}

/* ================================
   SERVICES HERO
================================ */

.services-hero {
    min-height: 380px;
    background:
        linear-gradient(
            90deg,
            rgba(2, 35, 57, .96) 0%,
            rgba(2, 43, 69, .86) 35%,
            rgba(2, 43, 69, .25) 75%,
            rgba(2, 43, 69, .1) 100%
        )
        url("../images/services-banner.jpg") center center / cover no-repeat;

    display: flex;
    align-items: center;
}

.services-hero-content {
    max-width: 700px;
    color: #ffffff;
}

.services-hero-content span {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #0784df;

    margin-bottom: 15px;
}

.services-hero-content span::before {
    content: "";
    width: 25px;
    height: 2px;
    background: #0784df;
}

.services-hero-content h1 {
    font-family: "Playfair Display", serif;
    font-size: 48px;
    line-height: 1.15;
    font-weight: 600;
    margin-bottom: 20px;
}

.services-hero-content p {
    max-width: 620px;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,0.82);
    margin: 0;
}


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

.services-intro {
    padding: 95px 0;
    background: #ffffff;
}

.services-intro-label {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #0784df;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.services-intro-label span {
    width: 20px;
    height: 2px;
    background: #0784df;
}

.services-intro h2 {
    font-family: "Playfair Display", serif;
    font-size: 40px;
    line-height: 1.2;
    color: #153b5b;
    margin: 0;
}

.services-intro h2 span {
    color: #0784df;
}

.services-intro-text {
    font-size: 15px;
    line-height: 1.9;
    color: #687b8b;
    margin-bottom: 18px;
}


/* ================================
   SERVICES SECTION
================================ */

.services-section {
    padding: 95px 0;
    background: #f6f9fb;
}

.services-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

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

    color: #0784df;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 12px;
}

.section-label::before {
    content: "";
    width: 17px;
    height: 2px;
    background: #0784df;
}

.services-heading h2 {
    font-family: "Playfair Display", serif;
    color: #153b5b;
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.services-heading p {
    color: #718391;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}


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

.service-card {
    position: relative;
    height: 100%;

    padding: 38px 32px 34px;

    background: #ffffff;
    border: 1px solid #e3eaf0;

    transition: all 0.35s ease;
    overflow: hidden;
}

.service-card::after {
    content: "";
    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: #0784df;

    transition: width 0.35s ease;
}

.service-card:hover {
    transform: translateY(-7px);
    border-color: #d4e3ed;
    box-shadow: 0 18px 40px rgba(21, 59, 91, 0.10);
}

.service-card:hover::after {
    width: 100%;
}

.service-number {
    position: absolute;
    top: 20px;
    right: 25px;

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

    color: #dce6ed;
}

.service-icon {
    width: 58px;
    height: 58px;

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

    border: 1px solid #d8e5ed;

    font-size: 24px;

    margin-bottom: 25px;

    transition: all 0.3s ease;
}

.service-icon img{
    filter: brightness(0) saturate(100%)
            invert(42%) sepia(98%)
            saturate(1761%)
            hue-rotate(184deg)
            brightness(91%)
            contrast(102%);
}

.service-card:hover .service-icon {
    background: #0784df;
    border-color: #0784df;
}

.service-card:hover .service-icon img {
    filter: brightness(0) invert(1);
}



.service-card h3 {
    font-family: "Playfair Display", serif;

    font-size: 23px;
    line-height: 1.3;

    color: #153b5b;

    margin-bottom: 15px;
}

.service-card p {
    color: #718391;

    font-size: 13px;
    line-height: 1.8;

    margin-bottom: 25px;
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #153b5b;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.service-link i {
    color: #0784df;
    transition: transform 0.3s ease;
}

.service-link:hover {
    color: #0784df;
}

.service-link:hover i {
    transform: translateX(5px);
}


/* ================================
   WHY SECTION
================================ */

.services-why {
    padding: 100px 0;
    background: #ffffff;
}

.services-why h2 {
    font-family: "Playfair Display", serif;

    color: #153b5b;
    font-size: 40px;
    line-height: 1.2;

    margin-bottom: 20px;
}

.services-why h2 span {
    color: #0784df;
}

.services-why > .container > .row > .col-lg-5 > p {
    color: #718391;
    font-size: 14px;
    line-height: 1.8;

    margin-bottom: 30px;
}

.services-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 22px;

    background: #0784df;
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

    text-decoration: none;

    transition: all 0.3s ease;
}

.services-cta:hover {
    background: #153b5b;
    color: #ffffff;
}


/* WHY GRID */

.why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.why-item {
    display: flex;
    gap: 18px;

    padding: 25px;

    background: #f7f9fa;
    border: 1px solid #e7edf1;
}

.why-item > i {
    flex-shrink: 0;

    width: 42px;
    height: 42px;

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

    color: #0784df;

    border: 1px solid #d5e3eb;

    font-size: 18px;
}

.why-item h4 {
    color: #153b5b;

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

    margin-bottom: 7px;
}

.why-item p {
    color: #718391;

    font-size: 12px;
    line-height: 1.6;

    margin: 0;
}


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

.services-final-cta {
    padding: 65px 0;

    background: #153b5b;
}

.services-final-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.services-final-inner span {
    color: #63b8f2;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.services-final-inner h2 {
    font-family: "Playfair Display", serif;

    color: #ffffff;
    font-size: 36px;

    margin: 8px 0;
}

.services-final-inner p {
    color: rgba(255,255,255,0.7);

    font-size: 13px;

    margin: 0;
}

.services-final-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 16px 25px;

    background: #0784df;
    color: #ffffff;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

    text-decoration: none;

    white-space: nowrap;

    transition: all 0.3s ease;
}

.services-final-btn:hover {
    background: #ffffff;
    color: #153b5b;
}


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

@media (max-width: 991px) {

    .services-hero-content h1 {
        font-size: 40px;
    }

    .services-intro {
        padding: 75px 0;
    }

    .services-heading h2,
    .services-why h2 {
        font-size: 34px;
    }

    .services-final-inner {
        flex-direction: column;
        align-items: flex-start;
    }

}


@media (max-width: 767px) {

    .services-hero {
        min-height: 330px;
    }

    .services-hero-content h1 {
        font-size: 32px;
    }

    .services-hero-content p {
        font-size: 13px;
    }

    .services-intro,
    .services-section,
    .services-why {
        padding: 65px 0;
    }

    .services-intro h2,
    .services-heading h2,
    .services-why h2 {
        font-size: 30px;
    }

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

    .services-final-inner h2 {
        font-size: 30px;
    }

}

.services-hero {

    min-height: 335px;

    position: relative;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(2, 35, 57, .96) 0%,
            rgba(2, 43, 69, .86) 35%,
            rgba(2, 43, 69, .25) 75%,
            rgba(2, 43, 69, .1) 100%
        ),
        url("../img/services-banner.png")
        center / cover no-repeat;

    overflow: hidden;

}



.services-hero h1 {

    font-family: "Playfair Display", serif;

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

    line-height: 1.02;

    font-weight: 600;

    color: #fff;

    margin: 0 0 18px;

}


.services-hero h1 span {

    color: #0784df;

}


.services-hero p {

    max-width: 500px;

    color: #66788a;

    font-size: 12px;

    line-height: 1.7;

    margin-bottom: 20px;

}

/* =========================================
   PROJECT DETAILS PAGE
========================================= */

.project-details-section {
    padding: 90px 0;
    background: #ffffff;
}


/* =========================================
   MAIN PROJECT IMAGE
========================================= */

.project-main-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #edf2f5;
}

.project-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    transition: opacity 0.3s ease;
}


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

.project-gallery {
    position: relative;

    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 15px;
}

.project-thumbnails {
    display: flex;
    gap: 12px;

    width: 100%;
    overflow: hidden;
}

.project-thumbnail {
    flex: 0 0 calc(25% - 9px);

    height: 100px;

    cursor: pointer;
    overflow: hidden;

    border: 2px solid transparent;

    transition: all 0.3s ease;
}

.project-thumbnail img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.3s ease;
}

.project-thumbnail:hover img {
    transform: scale(1.05);
}

.project-thumbnail.active {
    border-color: #0784df;
}


/* Gallery Arrows */

.gallery-arrow {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border: 1px solid #d9e3ea;

    background: #ffffff;

    color: #153b5b;

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

    cursor: pointer;

    transition: all 0.3s ease;

    z-index: 2;
}

.gallery-arrow:hover {
    background: #0784df;
    border-color: #0784df;
    color: #ffffff;
}


/* =========================================
   PROJECT HEADER
========================================= */

.project-detail-header {
    padding: 45px 0 30px;

    border-bottom: 1px solid #e6edf1;
}

.project-detail-label {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #0784df;

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

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.project-detail-label span {
    width: 18px;
    height: 2px;

    background: #0784df;
}

.project-detail-header h1 {
    font-family: "Playfair Display", serif;

    font-size: 42px;
    line-height: 1.2;

    color: #153b5b;

    margin-bottom: 15px;
}

.project-detail-location {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #718391;

    font-size: 13px;
}

.project-detail-location i {
    color: #0784df;
}


/* =========================================
   DETAIL BLOCK
========================================= */

.project-detail-block {
    padding: 40px 0;

    border-bottom: 1px solid #e6edf1;
}

.detail-section-label {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #0784df;

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

    letter-spacing: 2px;

    margin-bottom: 10px;
}

.detail-section-label::before {
    content: "";

    width: 18px;
    height: 2px;

    background: #0784df;
}

.project-detail-block h2 {
    font-family: "Playfair Display", serif;

    font-size: 30px;

    color: #153b5b;

    margin-bottom: 20px;
}

.project-detail-block p {
    color: #718391;

    font-size: 14px;

    line-height: 1.9;

    margin-bottom: 15px;
}


/* =========================================
   PROJECT INFO GRID
========================================= */

.project-info-grid {
    display: grid;

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

    border-top: 1px solid #e1e8ed;
    border-left: 1px solid #e1e8ed;
}

.project-info-item {
    padding: 20px;

    border-right: 1px solid #e1e8ed;
    border-bottom: 1px solid #e1e8ed;

    background: #f8fafb;
}

.project-info-item span {
    display: block;

    color: #80919e;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 7px;
}

.project-info-item strong {
    color: #153b5b;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================
   LOCATION BOX
========================================= */

.project-location-box {
    display: flex;
    align-items: center;
    gap: 20px;

    padding: 25px;

    background: #f7f9fa;

    border: 1px solid #e3eaef;
}

.location-icon {
    width: 50px;
    height: 50px;

    flex-shrink: 0;

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

    background: #0784df;

    color: #ffffff;

    font-size: 20px;
}

.project-location-box h4 {
    color: #153b5b;

    font-size: 15px;

    margin-bottom: 5px;
}

.project-location-box p {
    color: #718391;

    font-size: 13px;

    margin: 0;
}


/* =========================================
   SIDEBAR
========================================= */

.projects-sidebar {
    position: sticky;
    top: 30px;
}


/* Sidebar Block */

.sidebar-block {
    padding: 28px;

    background: #f7f9fa;

    border: 1px solid #e2e9ee;

    margin-bottom: 25px;
}

.sidebar-title {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #0784df;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.8px;

    margin-bottom: 8px;
}

.sidebar-title span {
    width: 16px;
    height: 2px;

    background: #0784df;
}

.sidebar-block > h3 {
    font-family: "Playfair Display", serif;

    color: #153b5b;

    font-size: 25px;

    line-height: 1.25;

    margin-bottom: 25px;
}


/* =========================================
   SIDEBAR PROJECT
========================================= */

.sidebar-project-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.sidebar-project {
    display: flex;

    gap: 13px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid #e4ebef;

    text-decoration: none;

    transition: all 0.3s ease;
}



.sidebar-project-image {
    position: relative;

    width: 82px;
    height: 70px;

    flex-shrink: 0;

    overflow: hidden;

    background: #edf2f5;
}

.sidebar-project-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}

.sidebar-project-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 4px;
}

.sidebar-project-content strong {
    color: #153b5b;

    font-size: 12px;

    line-height: 1.35;
}

.sidebar-project-content small {
    color: #80919e;

    font-size: 9px;
}

.sidebar-project-content small i {
    color: #0784df;
    margin-right: 3px;
}


/* =========================================
   BADGES
========================================= */

.sidebar-badge {
    display: inline-flex;

    width: fit-content;

    padding: 3px 7px;

    background: #eaf5fc;

    color: #0784df;

    font-size: 7px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.7px;
}

.sidebar-badge.industrial {
    background: #eef2f4;
    color: #153b5b;
}

.sidebar-badge.educational {
    background: #f2eefb;
    color: #69539a;
}

.sidebar-badge.ongoing {
    background: #fff5e8;
    color: #c67b18;
}


/* =========================================
   ONGOING INDICATOR
========================================= */

.ongoing-dot {
    position: absolute;

    top: 6px;
    right: 6px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #0784df;

    border: 2px solid #ffffff;
}


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

.back-projects-btn {
    display: flex;

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

    gap: 10px;

    width: 100%;

    padding: 15px;

    background: #153b5b;

    color: #ffffff;

    text-decoration: none;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

    transition: all 0.3s ease;
}

.back-projects-btn:hover {
    background: #0784df;

    color: #ffffff;
}


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

@media (max-width: 991px) {

    .project-main-image {
        height: 450px;
    }

    .projects-sidebar {
        position: static;
    }

    .sidebar-project-list {
        display: grid;

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

}


@media (max-width: 767px) {

    .project-details-section {
        padding: 55px 0;
    }

    .project-main-image {
        height: 280px;
    }

    .project-gallery {
        gap: 7px;
    }

    .project-thumbnail {
        flex: 0 0 calc(33.333% - 8px);
        height: 75px;
    }

    .project-thumbnail:nth-child(n+4) {
        display: none;
    }

    .gallery-arrow {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .project-detail-header {
        padding-top: 30px;
    }

    .project-detail-header h1 {
        font-size: 30px;
    }

    .project-detail-block h2 {
        font-size: 26px;
    }

    .project-info-grid {
        grid-template-columns: 1fr;
    }

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

}

/* =========================================
   MAIN PROJECT IMAGE
========================================= */

.project-main-image {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background: #edf2f5;
}

.project-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}


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

.project-gallery {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    width: 100%;
}

.project-thumbnails {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.project-thumbnails::-webkit-scrollbar {
    display: none;
}

.project-thumbnail {
    flex: 0 0 calc(25% - 9px);
    height: 100px;
    cursor: pointer;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.3s ease;
}

.project-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-thumbnail.active {
    border-color: #0784df;
}

.project-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.project-thumbnail:hover img {
    transform: scale(1.05);
}

.project-thumbnail.active {
    border-color: #0784df;
}


/* =========================================
   GALLERY ARROWS
========================================= */

.gallery-arrow {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #d9e3ea;
    background: #ffffff;
    color: #153b5b;

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

    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.gallery-arrow:hover {
    background: #0784df;
    border-color: #0784df;
    color: #ffffff;
}

/* =========================================
   SERVICE DETAILS SECTION
========================================= */

.service-details-section {
    padding: 90px 0;
    background: #ffffff;
}


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

.service-detail-image {
    width: 100%;
    height: 460px;
    overflow: hidden;
    margin-bottom: 35px;
    background: #edf2f5;
}

.service-detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================
   SERVICE HEADER
========================================= */

.service-detail-header {
    padding-bottom: 35px;
    border-bottom: 1px solid #e4eaee;
}

.service-label {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #0784df;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 12px;
}

.service-label span {
    width: 18px;
    height: 2px;
    background: #0784df;
}

.service-detail-header h1 {
    font-family: "Playfair Display", serif;
    color: #153b5b;
    font-size: 42px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.service-detail-header p {
    max-width: 720px;
    color: #718391;
    font-size: 15px;
    line-height: 1.8;
    margin: 0;
}


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

.service-content-block {
    padding: 42px 0;
    border-bottom: 1px solid #e4eaee;
}

.content-label {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #0784df;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 10px;
}

.content-label span {
    width: 18px;
    height: 2px;
    background: #0784df;
}

.service-content-block h2 {
    font-family: "Playfair Display", serif;
    color: #153b5b;
    font-size: 30px;
    margin-bottom: 20px;
}

.service-content-block > p {
    color: #718391;
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 16px;
}


/* =========================================
   CAPABILITY CARDS
========================================= */

.capability-card {
    height: 100%;

    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 22px;

    background: #f7f9fa;
    border: 1px solid #e2e9ed;

    transition: all 0.3s ease;
}

.capability-card:hover {
    border-color: #0784df;
    transform: translateY(-3px);
}

.capability-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;

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

    background: #eaf6fd;
    color: #0784df;

    font-size: 19px;
}

.capability-card h4 {
    color: #153b5b;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}

.capability-card p {
    color: #718391;
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
}


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

.execution-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 25px;
}

.execution-item {
    display: flex;
    gap: 15px;

    padding: 20px;

    border: 1px solid #e2e9ed;
    background: #ffffff;
}

.execution-number {
    width: 38px;
    height: 38px;
    min-width: 38px;

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

    background: #edf7fc;
    color: #0784df;

    font-size: 10px;
    font-weight: 700;
}

.execution-item h4 {
    color: #153b5b;
    font-size: 14px;
    margin-bottom: 6px;
}

.execution-item p {
    color: #718391;
    font-size: 11px;
    line-height: 1.6;
    margin: 0;
}


/* =========================================
   APPLICATIONS
========================================= */

.application-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.application-item {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 17px;

    background: #f7f9fa;
    border: 1px solid #e2e9ed;
}

.application-item i {
    color: #0784df;
    font-size: 18px;
}

.application-item span {
    color: #153b5b;
    font-size: 12px;
    font-weight: 600;
}


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

.service-detail-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 35px;

    margin-top: 40px;

    background: #153b5b;
}

.service-detail-cta span {
    color: #63b8f2;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.service-detail-cta h3 {
    font-family: "Playfair Display", serif;
    color: #ffffff;
    font-size: 25px;
    margin: 8px 0;
}

.service-detail-cta p {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    margin: 0;
}

.service-detail-cta a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 22px;

    background: #0784df;
    color: #ffffff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    text-decoration: none;
    white-space: nowrap;

    transition: all 0.3s ease;
}

.service-detail-cta a:hover {
    background: #ffffff;
    color: #153b5b;
}


/* =========================================
   SIDEBAR
========================================= */

.services-sidebar {
    position: sticky;
    top: 30px;
}

.sidebar-box {
    padding: 28px;

    background: #f7f9fa;
    border: 1px solid #e1e8ed;
}

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

    color: #0784df;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;

    margin-bottom: 8px;
}

.sidebar-label span {
    width: 17px;
    height: 2px;
    background: #0784df;
}

.sidebar-box > h3 {
    font-family: "Playfair Display", serif;
    color: #153b5b;
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 23px;
}


/* =========================================
   SIDEBAR SERVICE ITEM
========================================= */

.sidebar-service {
    display: flex;
    align-items: center;
    gap: 12px;

    padding: 12px;

    background: #ffffff;
    border: 1px solid #e2e9ed;

    text-decoration: none;

    transition: all 0.3s ease;
}

.sidebar-service + .sidebar-service {
    margin-top: 8px;
}

.sidebar-service:hover,
.sidebar-service.active {
    background: #0784df;
    border-color: #0784df;
}


.sidebar-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

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

    background: #edf7fc;
    color: #0784df;

    font-size: 17px;
}

.sidebar-service:hover .sidebar-icon img{
    filter: brightness(0), invert(1);
}

.sidebar-service:hover .sidebar-icon,
.sidebar-service.active .sidebar-icon {
    background: rgba(255,255,255,0.15);
    /* color: #ffffff; */
}

.sidebar-service-text {
    flex: 1;
    min-width: 0;
}

.sidebar-service-text strong {
    display: block;

    color: #153b5b;

    font-size: 11px;
    line-height: 1.4;

    margin-bottom: 3px;
}

.sidebar-service-text small {
    display: block;

    color: #82929e;

    font-size: 8px;
}

.sidebar-service:hover .sidebar-icon img{
    filter: brightness(0) invert(1);
}

.sidebar-service:hover .sidebar-service-text strong,
.sidebar-service.active .sidebar-service-text strong {
    color: #ffffff;
}

.sidebar-service:hover .sidebar-service-text small,
.sidebar-service.active .sidebar-service-text small {
    color: rgba(255,255,255,0.7);
}

.sidebar-service > i {
    color: #0784df;
    font-size: 13px;
}

.sidebar-service:hover > i,
.sidebar-service.active > i {
    color: #ffffff;
}


/* =========================================
   CONTACT SIDEBAR
========================================= */

.sidebar-contact {
    margin-top: 25px;
    padding: 30px;

    background: #153b5b;
}

.sidebar-contact-icon {
    width: 48px;
    height: 48px;

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

    background: #0784df;
    color: #ffffff;

    font-size: 20px;

    margin-bottom: 20px;
}

.sidebar-contact-icon img{
    filter: brightness(0) invert(1);
}

.sidebar-contact > span {
    color: #63b8f2;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sidebar-contact h3 {
    font-family: "Playfair Display", serif;

    color: #ffffff;

    font-size: 25px;
    line-height: 1.3;

    margin: 8px 0 12px;
}

.sidebar-contact p {
    color: rgba(255,255,255,0.7);

    font-size: 12px;
    line-height: 1.7;

    margin-bottom: 20px;
}

.sidebar-contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #ffffff;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;

    text-decoration: none;
}

.sidebar-contact a i {
    color: #63b8f2;
}


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

@media (max-width: 991px) {

    .service-detail-image {
        height: 420px;
    }

    .services-sidebar {
        position: static;
    }

}


@media (max-width: 767px) {

    .service-details-section {
        padding: 55px 0;
    }

    .service-detail-image {
        height: 280px;
    }

    .service-detail-header h1 {
        font-size: 32px;
    }

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

    .execution-list,
    .application-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-cta {
        flex-direction: column;
        align-items: flex-start;
    }

}

/* =====================================================
   HOW WE BUILD
===================================================== */

.build-process-section {
    padding: 100px 0;
    background: #f7f9fb;
    overflow: hidden;
}

.build-process-heading {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 70px;
}

.build-process-heading h2 {
    font-family: "Playfair Display", serif;
    font-size: 40px;
    line-height: 1.15;
    color: #153b5b;
    margin: 10px 0 15px;
}

.build-process-heading h2 span {
    color: #0784df;
}

.build-process-heading p {
    font-size: 13px;
    line-height: 1.8;
    color: #718096;
}


/* Process */

.build-process {
    position: relative;

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

    gap: 30px;
}


/* Construction line */

.build-line {
    position: absolute;

    top: 37px;
    left: 12%;
    right: 12%;

    height: 2px;

    background:
        repeating-linear-gradient(
            90deg,
            #0784df 0,
            #0784df 10px,
            transparent 10px,
            transparent 18px
        );

    transform-origin: left;

    animation: buildLine 2s ease forwards;
}

@keyframes buildLine {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}


/* Step */

.build-step {
    position: relative;

    text-align: center;

    z-index: 2;
}

.build-icon {
    width: 74px;
    height: 74px;

    margin: 0 auto 18px;

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

    background: white;

    border: 1px solid #cbdde9;

    border-radius: 50%;

    color: #0784df;

    font-size: 25px;

    box-shadow:
        0 12px 30px rgba(20,55,80,.08);

    transition:
        all .45s ease;
}

.build-step:hover .build-icon {
    background: #0784df;
    color: white;

    transform:
        translateY(-8px)
        rotate(-5deg);

    box-shadow:
        0 18px 35px rgba(8,127,229,.25);
}

.build-step > span {
    display: block;

    color: #0784df;

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

    letter-spacing: 2px;

    margin-bottom: 7px;
}

.build-step h3 {
    font-family: "Playfair Display", serif;

    color: #153b5b;

    font-size: 23px;

    margin-bottom: 8px;
}

.build-step p {
    max-width: 220px;

    margin: auto;

    font-size: 11px;

    line-height: 1.7;

    color: #718096;
}


/* Mobile */

@media (max-width: 767px) {

    .build-process-section {
        padding: 70px 0;
    }

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

    .build-process {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .build-line {
        top: 37px;
        bottom: 37px;
        left: 36px;
        right: auto;

        width: 2px;
        height: auto;

        background:
            repeating-linear-gradient(
                180deg,
                #0784df 0,
                #0784df 10px,
                transparent 10px,
                transparent 18px
            );
    }

    .build-step {
        text-align: left;

        display: grid;

        grid-template-columns: 74px 1fr;

        column-gap: 20px;
    }

    .build-icon {
        grid-row: span 3;
        margin: 0;
    }

    .build-step > span {
        margin-top: 5px;
    }

    .build-step h3 {
        margin: 0;
    }

    .build-step p {
        margin: 5px 0 0;
        max-width: 100%;
    }

}



































/* =========================================================
   RAJHANS PROJECT PAGE
========================================================= */


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

.rp-hero {
    position: relative;
    background-image: url("../img/project-banner.png");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.rp-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(4, 30, 49, .94) 0%,
            rgba(4, 30, 49, .82) 35%,
            rgba(4, 30, 49, .28) 75%,
            rgba(4, 30, 49, .05) 100%
        );
}

.rp-hero-container {
    width: 100%;
    max-width: 1240px;
    margin: auto;
    padding: 0px 30px 0px;
    position: relative;
    z-index: 2;
}

.rp-hero-content {
    max-width: 720px;
}

.rp-eyebrow,
.rp-small-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--rp-blue);
}

.rp-eyebrow::before,
.rp-small-label::before {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--rp-blue);
}

.rp-hero .rp-eyebrow {
    color: #fff;
}

.rp-hero .rp-eyebrow::before {
    background: var(--rp-blue);
}

.rp-hero h1 {
    margin: 22px 0 20px;
    color: #fff;
    font-size: 60px;
    line-height: 1.02;
    font-weight: 600;
    letter-spacing: -2px;
}

.rp-hero h1 span {
    color: #1596ef;
}

.rp-hero-content > p {
    max-width: 650px;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 25px;
}

.rp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.7);
    font-size: 13px;
}

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

.rp-breadcrumb i {
    color: #1596ef;
}


/* =========================================================
   FLOATING SECTOR BOX
========================================================= */

.rp-sector-box {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    padding: 10px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,.18);
}

.rp-sector-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 13px;
    border-bottom: 1px solid #e8edf2;
    color: var(--rp-dark);
    font-size: 14px;
    font-weight: 600;
}

.rp-sector-item:last-child {
    border-bottom: 0;
}

.rp-sector-item i {
    color: var(--rp-blue);
    font-size: 18px;
}


/* =========================================================
   PROJECT AREA
========================================================= */

.rp-project-area {
    position: relative;
    padding: 0 0 110px;
    background: #fff;
}


/* =========================================================
   MAIN SWITCH
========================================================= */

.rp-main-switch {
    position: relative;
    z-index: 10;
    width: max-content;
    max-width: calc(100% - 30px);
    margin-top: 50px !important;
    margin: -34px auto 90px;
    padding: 7px;
    display: flex;
    gap: 5px;
    background: #fff;
    border-radius: 50px;
    box-shadow: 0 15px 40px rgba(16, 55, 82, .16);
}

.rp-switch-btn {
    border: 0;
    background: transparent;
    color: var(--rp-dark);
    min-width: 190px;
    padding: 17px 28px;
    border-radius: 40px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease;
}

.rp-switch-btn i {
    margin-right: 7px;
}

.rp-switch-btn.active {
    color: #fff;
    background: var(--rp-blue);
    box-shadow: 0 8px 22px rgba(8,127,220,.25);
}

.rp-switch-btn.active img{
    filter: brightness(0) invert(1);
}


/* =========================================================
   MAIN PANELS
========================================================= */

.rp-main-panel {
    display: none;
}

.rp-main-panel.active {
    display: block;
    animation: rpFade .5s ease;
}

@keyframes rpFade {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


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

.rp-portfolio-head {
    margin-bottom: 20px;
}

.rp-portfolio-head h2 {
    margin: 18px 0 0;
    color: var(--rp-dark);
    font-size: clamp(38px, 4vw, 58px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -1.5px;
}

.rp-portfolio-head h2 span {
    color: var(--rp-blue);
}

.rp-head-description {
    /* max-width: 520px; */
    margin-top: 15px;
    color: var(--rp-muted);
    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   CATEGORY LAYOUT
========================================================= */

.rp-portfolio-layout {
    align-items: flex-start;
}

.rp-category-menu {
    position: sticky;
    top: 100px;
    padding: 10px;
    border: 1px solid var(--rp-border);
    border-radius: 16px;
    background: #fff;
}

.rp-category-btn {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 17px 18px;
    margin-bottom: 5px;
    border-radius: 10px;
    text-align: left;
    color: var(--rp-text);
    font-size: 16px;
    font-weight: 600;
    transition: .3s ease;
}

.rp-category-btn:last-child {
    margin-bottom: 0;
}

.rp-category-btn i {
    color: var(--rp-blue);
    font-size: 18px;
}

.rp-category-btn:hover {
    background: #f1f7fc;
}

.rp-category-btn.active {
    background: var(--rp-dark);
    color: #fff;
}

.rp-category-btn.active i {
    color: #1596ef;
}


/* =========================================================
   CATEGORY PANELS
========================================================= */

.rp-category-panel {
    display: none;
}

.rp-category-panel.active {
    display: block;
    animation: rpCategory .45s ease;
}

@keyframes rpCategory {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   PROJECT CARD
========================================================= */

.rp-project-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 4px;
    overflow: hidden;
    transition: .4s ease;
}

.rp-project-card:hover {
    transform: translateY(-8px);
    border-color: rgba(8,127,220,.3);
    box-shadow: 0 20px 45px rgba(12, 50, 75, .13);
}

.rp-card-image {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.rp-card-image img {
    width: 303px;
    height: 280px;
    object-fit: cover;
    transition: .6s ease;
}

.rp-project-card:hover .rp-card-image img {
    transform: scale(1.07);
}

.rp-card-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 7px 13px;
    background: var(--rp-blue);
    color: #fff;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}

.rp-card-arrow {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 42px;
    height: 42px;
    border-radius: 7px;
    background: rgba(255,255,255,.95);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-dark);
    text-decoration: none;
    transition: .3s ease;
}

.rp-card-arrow:hover {
    background: var(--rp-blue);
    color: #fff;
}

.rp-card-body {
    padding: 24px;
}

.rp-card-body h3 {
    margin: 0 0 12px;
    color: var(--rp-dark);
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.rp-location {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-bottom: 15px;
    color: var(--rp-muted);
    font-size: 15px;
    line-height: 1.5;
}

.rp-location i {
    color: var(--rp-blue);
    margin-top: 2px;
}

.rp-card-body p {
    color: var(--rp-muted);
    font-size: 15px;
    font-weight: 100;
    line-height: 1.7;
    margin-bottom: 22px;
}

.rp-project-link {
    /*display: inline-flex;*/
    align-items: center;
    gap: 9px;
    color: var(--rp-blue);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.rp-project-link i {
    transition: .3s ease;
}

.rp-project-link:hover i {
    transform: translateX(5px);
}


/* =========================================================
   ONGOING CARD
========================================================= */

.rp-ongoing-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--rp-border);
    overflow: hidden;
    transition: .4s ease;
}

.rp-ongoing-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(10,50,75,.12);
}

.rp-ongoing-image {
    position: relative;
    height: 300px;
    overflow: hidden;
}

.rp-ongoing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .5s ease;
}

.rp-ongoing-card:hover .rp-ongoing-image img {
    transform: scale(1.05);
}

.rp-ongoing-body {
    padding: 28px;
}

.rp-ongoing-body h3 {
    color: var(--rp-dark);
    font-size: 21px;
    margin-bottom: 12px;
}


/* =========================================================
   PROGRESS
========================================================= */

.rp-progress-box {
    margin: 25px 0;
}

.rp-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
    font-size: 12px;
    color: var(--rp-muted);
}

.rp-progress-info strong {
    color: var(--rp-blue);
    font-size: 14px;
}

.rp-progress-track {
    height: 7px;
    background: #e9eff4;
    border-radius: 10px;
    overflow: hidden;
}

.rp-progress-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        #087fdc,
        #25a6f5
    );
    border-radius: 10px;
}

.rp-completion {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 22px;
    color: var(--rp-muted);
    font-size: 12px;
}

.rp-completion i {
    color: var(--rp-blue);
}

.rp-completion strong {
    color: var(--rp-dark);
}


/* =========================================================
   EMPTY PROJECT
========================================================= */

.rp-empty-project {
    min-height: 280px;
    border: 1px dashed #cbd8e2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.rp-empty-project i {
    font-size: 42px;
    color: var(--rp-blue);
    margin-bottom: 15px;
}

.rp-empty-project h3 {
    color: var(--rp-dark);
    margin-bottom: 8px;
}

.rp-empty-project p {
    color: var(--rp-muted);
    margin: 0;
}


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

.rp-process-section {
    background: #f5f8fb;
}

.rp-process-image {
    height: 100%;
    min-height: 650px;
    position: relative;
    overflow: hidden;
}

.rp-process-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        0deg,
        rgba(3,30,48,.75),
        transparent 65%
    );
}

.rp-process-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rp-process-image-content {
    position: absolute;
    z-index: 2;
    left: 60px;
    bottom: 55px;
    color: #fff;
}

.rp-process-image-content span {
    font-size: 12px;
    letter-spacing: 4px;
    font-weight: 700;
}

.rp-process-image-content h3 {
    margin: 15px 0 0;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 400;
}

.rp-process-image-content strong {
    color: #1596ef;
}

.rp-process-content {
    max-width: 720px;
    padding: 100px 8%;
}

.rp-process-content h2 {
    margin: 18px 0 18px;
    color: var(--rp-dark);
    font-size: clamp(38px, 4vw, 55px);
    line-height: 1.05;
}

.rp-process-content h2 span {
    color: var(--rp-blue);
}

.rp-process-intro {
    max-width: 600px;
    color: var(--rp-muted);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 55px;
}


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

.rp-process-timeline {
    position: relative;
}

.rp-process-timeline::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    left: 24px;
    width: 2px;
    background: #d5e0e8;
}

.rp-process-step {
    position: relative;
    display: grid;
    grid-template-columns: 50px 65px 1fr;
    gap: 18px;
    align-items: center;
    margin-bottom: 35px;
}

.rp-process-step:last-child {
    margin-bottom: 0;
}

.rp-step-number {
    color: var(--rp-blue);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    z-index: 2;
}

.rp-step-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #d7e3ec;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-blue);
    font-size: 20px;
    box-shadow: 0 7px 20px rgba(15,55,80,.08);
    z-index: 2;
}

.rp-step-content h3 {
    margin: 0 0 6px;
    color: var(--rp-dark);
    font-size: 20px;
}

.rp-step-content p {
    max-width: 390px;
    color: var(--rp-muted);
    font-size: 12px;
    line-height: 1.7;
    margin: 0;
}


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

.rp-project-cta {
    position: relative;
    overflow: hidden;
    padding: 75px 0;
    background-image: url("../img/construction-cta.jpg");
    background-size: cover;
    background-position: center;
}

.rp-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(3,28,47,.97),
        rgba(5,43,68,.88),
        rgba(4,43,68,.72)
    );
}

.rp-project-cta .container {
    position: relative;
    z-index: 2;
}

.rp-project-cta .rp-small-label {
    color: #fff;
}

.rp-project-cta h2 {
    color: #fff;
    margin: 17px 0 14px;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.05;
}

.rp-project-cta h2 span {
    color: #1596ef;
}

.rp-project-cta p {
    max-width: 480px;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    line-height: 1.8;
}

.rp-cta-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 45px;
}

.rp-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 25px;
    background: var(--rp-blue);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    border-radius: 5px;
    transition: .3s ease;
}

.rp-cta-button:hover {
    background: #fff;
    color: var(--rp-dark);
    transform: translateY(-3px);
}

.rp-cta-points {
    display: flex;
    gap: 25px;
}

.rp-cta-points div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    color: #fff;
}

.rp-cta-points i {
    font-size: 27px;
    color: #1596ef;
}

.rp-cta-points span {
    font-size: 10px;
    line-height: 1.5;
    color: rgba(255,255,255,.8);
}


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

@media (max-width: 1199px) {

    .rp-sector-box {
        right: 20px;
    }

    .rp-hero-container {
        padding-left: 25px;
    }

    .rp-hero-content {
        max-width: 650px;
    }

    .rp-process-content {
        padding: 70px 6%;
    }

    .rp-cta-right {
        gap: 25px;
    }

}


@media (max-width: 991px) {

    .rp-hero {
        min-height: 560px;
    }

    .rp-hero-container {
        padding: 90px 25px 140px;
    }

    .rp-sector-box {
        display: none;
    }

    .rp-main-switch {
        margin-bottom: 60px;
    }

    .rp-portfolio-head {
        margin-bottom: 40px;
    }

    .rp-head-description {
        margin-top: 25px;
    }

    .rp-category-menu {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 30px;
    }

    .rp-category-btn {
        width: auto;
        margin: 0;
        padding: 13px 17px;
    }

    .rp-process-image {
        min-height: 500px;
    }

    .rp-process-content {
        max-width: none;
        padding: 70px 30px;
    }

    .rp-cta-right {
        justify-content: flex-start;
        margin-top: 30px;
    }

}


@media (max-width: 767px) {

    .rp-hero {
        min-height: 380px;
        background-position: 45% center;
    }

    .rp-hero-container {
        padding: 40px 20px 47px;
    }

    .rp-hero h1 {
        font-size: 43px;
        letter-spacing: -1px;
    }

    .rp-hero-content > p {
        font-size: 14px;
    }

    .rp-main-switch {
        width: calc(100% - 30px);
        margin-top: -30px;
        margin-bottom: 55px;
    }

    .rp-switch-btn {
        min-width: 0;
        width: 50%;
        padding: 14px 10px;
        font-size: 11px;
    }

    .rp-switch-btn i {
        display: none;
    }

    .rp-portfolio-head h2 {
        font-size: 39px;
    }

    .rp-category-menu {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 5px;
    }

    .rp-category-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .rp-card-image {
        height: 250px;
    }

    .rp-process-image {
        min-height: 400px;
    }

    .rp-process-image-content {
        left: 30px;
        bottom: 35px;
    }

    .rp-process-image-content h3 {
        font-size: 35px;
    }

    .rp-process-content {
        padding: 60px 20px;
    }

    .rp-process-content h2 {
        font-size: 40px;
    }

    .rp-process-step {
        grid-template-columns: 35px 55px 1fr;
        gap: 10px;
    }

    .rp-step-icon {
        width: 48px;
        height: 48px;
    }

    .rp-process-timeline::before {
        left: 17px;
    }

    .rp-cta-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .rp-cta-points {
        width: 100%;
        justify-content: space-between;
    }

}


@media (max-width: 480px) {

    .rp-hero h1 {
        font-size: 37px;
    }

    .rp-eyebrow,
    .rp-small-label {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .rp-main-switch {
        padding: 5px;
    }

    .rp-switch-btn {
        padding: 13px 7px;
    }

    .rp-portfolio-head h2 {
        font-size: 35px;
    }

    .rp-card-body {
        padding: 20px;
    }

    .rp-process-step {
        grid-template-columns: 30px 50px 1fr;
    }

    .rp-step-content h3 {
        font-size: 17px;
    }

    .rp-step-content p {
        font-size: 11px;
    }

    .rp-project-cta {
        padding: 60px 0;
    }

}

/* =========================================================
   EXACT CONSTRUCTION PROCESS SECTION
========================================================= */

.exact-process-section {
    width: 100%;
    min-height: 500px;
    display: flex;
    background: #ffffff;
    overflow: hidden;
}


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

.exact-process-image {
    position: relative;
    width: 43%;
    min-height: 500px;
    overflow: hidden;

    /* Angled right edge */
    clip-path: polygon(
        0 0,
        100% 0,
        80% 100%,
        0 100%
    );
}

.exact-process-image img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* Blue angled strip */

.exact-process-image::after {
        content: "";
    position: absolute;
    top: -5%;
    right: 11%;
    width: 18px;
    height: 133%;
    background: #0787df;
    border-radius: 20px;
    transform: rotate(15deg);
    z-index: 2;
}


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

.exact-process-image-text {
    position: absolute;

right: 83%;
    top: 2%;

    z-index: 3;

    color: #000;

    font-family: "Brush Script MT", "Segoe Script", cursive;

    font-size: 30px;
    line-height: 1.05;

    font-weight: 600;

    transform: rotate(-3deg);

    text-shadow:
        0 2px 5px rgba(0,0,0,.25);
}


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

.exact-process-content {
    width: 57%;

    padding:
        65px
        5%
        50px
        2%;

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


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

.exact-process-heading {
    max-width: 700px;
}

.exact-process-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: #087fdc;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 8px;
}

.exact-process-label::before {
    content: "";

    width: 25px;
    height: 2px;

    background: #087fdc;
}


.exact-process-heading h2 {
    margin: 0 0 12px;

    color: #123c5b;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 38px;

    line-height: 1.05;

    font-weight: 600;

    letter-spacing: -1px;
}

.exact-process-heading h2 span {
    color: #087fdc;
}


.exact-process-heading p {
    max-width: 650px;

    margin: 0;

    color: #6f8190;

    font-size: 16px;

    line-height: 1.65;
}


/* =========================================================
   STEPS
========================================================= */

.exact-process-steps {
    position: relative;

    display: grid;

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

    margin-top: 42px;

    max-width: 720px;
}


/* Connecting line */

.exact-process-steps::before {
    content: "";

    position: absolute;

    top: 29px;

    left: 9%;

    right: 9%;

    height: 2px;

    background: #0794e8;

    z-index: 0;
}


/* =========================================================
   STEP
========================================================= */

.exact-process-step {
    position: relative;

    text-align: center;

    padding: 0 8px;

    z-index: 1;
}


.exact-step-top {
    height: 62px;

    display: flex;

    justify-content: center;

    align-items: center;
}


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

.exact-step-icon {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    display: flex;

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

    background: #087fdc;

    border: 5px solid #ffffff;

    box-shadow:
        0 0 0 1px #dce8f0,
        0 7px 18px rgba(0,0,0,.08);

    color: #ffffff;

    font-size: 21px;
}


/* Green second icon */

.exact-process-step:nth-child(2)
.exact-step-icon {
    background: #079347;
}


/* Yellow third icon */

.exact-process-step:nth-child(3)
.exact-step-icon {
    background: #f5ae19;
}


/* Blue fourth icon */

.exact-process-step:nth-child(4)
.exact-step-icon {
    background: #064d87;
}


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

.exact-step-number {
    display: block;

    margin-top: 8px;

    color: #087fdc;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   STEP TITLE
========================================================= */

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

    color: #173d59;

    font-size: 21px;

    font-weight: 700;
}


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

.exact-process-step p {
    max-width: 145px;

    margin: auto;

    color: #71818e;

    font-size: 15px;

    line-height: 1.65;
}


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

@media (max-width: 1199px) {

    .exact-process-image {
        width: 40%;
    }

    .exact-process-content {
        width: 60%;

        padding-left: 0;
        padding-right: 35px;
    }

    .exact-process-heading h2 {
        font-size: 34px;
    }

    .exact-process-image-text {
        font-size: 26px;
    }

}


@media (max-width: 991px) {

    .exact-process-section {
        display: block;
    }

    .exact-process-image {
        width: 100%;
        height: 450px;
        min-height: 450px;

        clip-path: none;
    }

    .exact-process-image img {
        min-height: 450px;
    }

    .exact-process-image::after {
        right: 8%;
    }

    .exact-process-image-text {
        left: 8%;
        bottom: 20%;
    }

    .exact-process-content {
        width: 100%;

        padding: 60px 30px;
    }

    .exact-process-heading {
        max-width: 700px;
        margin: auto;
        text-align: center;
    }

    .exact-process-label {
        justify-content: center;
    }

    .exact-process-heading p {
        margin: auto;
    }

    .exact-process-steps {
        max-width: 800px;
        margin: 45px auto 0;
    }

}


@media (max-width: 767px) {

    .exact-process-image {
        height: 350px;
        min-height: 350px;
    }

    .exact-process-image img {
        min-height: 350px;
    }

    .exact-process-image-text {
        font-size: 26px;
        left: 8%;
        bottom: 20%;
    }

    .exact-process-image::after {
        width: 12px;
        right: 7%;
    }

    .exact-process-content {
        padding: 50px 20px;
    }

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

    .exact-process-steps {
        grid-template-columns: 1fr 1fr;

        row-gap: 40px;
    }

    .exact-process-steps::before {
        display: none;
    }

}


@media (max-width: 480px) {

    .exact-process-image {
        height: 300px;
        min-height: 300px;
    }

    .exact-process-image img {
        min-height: 300px;
    }

    .exact-process-heading h2 {
        font-size: 28px;
    }

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

    .exact-process-step p {
        font-size: 8px;
    }

}


/* =========================================================
   PROJECT STATISTICS
========================================================= */

.rp-statistics-section {
    position: relative;
    padding: 90px 0;
    background: #f5f8fb;
    overflow: hidden;
}


/* TOP HEADING */

.rp-statistics-head {
    max-width: 650px;
    margin: 0 auto 55px;
    text-align: center;
}

.rp-statistics-head .rp-small-label {
    justify-content: center;
}

.rp-statistics-head h2 {
    margin: 18px 0 15px;
    color: var(--rp-dark);
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -1.5px;
}

.rp-statistics-head h2 span {
    color: var(--rp-blue);
}

.rp-statistics-head p {
    max-width: 550px;
    margin: auto;
    color: var(--rp-muted);
    font-size: 14px;
    line-height: 1.8;
}


/* STAT ROW */

.rp-statistics-row {
    position: relative;
    background: #fff;
    border: 1px solid #dce7ef;
    box-shadow: 0 20px 50px rgba(15, 55, 80, .08);
}


/* STAT BOX */

.rp-stat-box {
    position: relative;
    height: 100%;
    padding: 42px 25px;
    text-align: center;
    border-right: 1px solid #dce7ef;
    transition: .35s ease;
}

.rp-statistics-row > div:last-child .rp-stat-box {
    border-right: 0;
}

.rp-stat-box:hover {
    background: #fafdff;
    transform: translateY(-5px);
}


/* ICON */

.rp-stat-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #eaf5fd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rp-blue);
    font-size: 22px;
    transition: .35s ease;
}

.rp-stat-icon img{
        filter: brightness(0) saturate(100%)
            invert(42%) sepia(98%)
            saturate(1761%)
            hue-rotate(184deg)
            brightness(91%)
            contrast(102%);
}

.rp-stat-box:hover .rp-stat-icon img{
    filter: brightness(0) invert(1);
}

.rp-stat-box:hover .rp-stat-icon{
    background: var(--rp-blue);
    color: #fff;
    transform: scale(1.08);
}


/* NUMBER */

.rp-stat-number {
    color: var(--rp-dark);
    font-size: 45px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -2px;
}

.rp-stat-number::after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    margin: 14px auto 13px;
    background: var(--rp-blue);
}


/* TITLE */

.rp-stat-box h3 {
    margin: 0 0 6px;
    color: var(--rp-dark);
    font-size: 24px;
    font-weight: 700;
}


/* DESCRIPTION */

.rp-stat-box p {
    margin: 0;
    color: var(--rp-muted);
    font-size: 15px;
    line-height: 1.6;
}


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

@media (max-width: 991px) {

    .rp-statistics-section {
        padding: 75px 0;
    }

    .rp-stat-box {
        border-bottom: 1px solid #dce7ef;
    }

    .rp-statistics-row > div:nth-child(2) .rp-stat-box {
        border-right: 0;
    }

    .rp-statistics-row > div:nth-child(3) .rp-stat-box,
    .rp-statistics-row > div:nth-child(4) .rp-stat-box {
        border-bottom: 0;
    }

}


@media (max-width: 767px) {

    .rp-statistics-section {
        padding: 60px 0;
    }

    .rp-statistics-head {
        margin-bottom: 35px;
    }

    .rp-statistics-head h2 {
        font-size: 35px;
    }

    .rp-statistics-head p {
        font-size: 13px;
    }

    .rp-stat-box {
        padding: 32px 15px;
    }

    .rp-stat-number {
        font-size: 38px;
    }
    
    .rp-card-image img {
    width: 349px;
    height: 280px;
    object-fit: cover;
    transition: .6s ease;
}

}


@media (max-width: 575px) {

    .rp-statistics-row > div:nth-child(2) .rp-stat-box {
        border-right: 0;
    }

    .rp-statistics-row > div:nth-child(1) .rp-stat-box,
    .rp-statistics-row > div:nth-child(2) .rp-stat-box {
        border-bottom: 1px solid #dce7ef;
    }

    .rp-statistics-row > div:nth-child(3) .rp-stat-box {
        border-bottom: 1px solid #dce7ef;
    }

    .rp-stat-box {
        padding: 30px 15px;
    }

}




























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

        .about-label {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--about-blue);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .about-label::before {
            content: "";
            width: 27px;
            height: 2px;
            background: var(--about-blue);
        }

        .about-heading {
            color: var(--about-dark);
            font-family: "Playfair Display", serif;
            font-size: clamp(38px, 4vw, 58px);
            line-height: 1.08;
            font-weight: 600;
            margin: 18px 0;
        }

        .about-heading span {
            color: var(--about-blue);
        }

        .about-description {
            color: var(--about-text);
            font-size: 15px;
            line-height: 1.8;
        }


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

        .about-hero {
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
            background-image:
                linear-gradient(90deg, rgb(4 29 47 / 77%) 0%, rgb(4 29 47 / 46%) 38%, rgb(4 29 47 / 0%) 75%, rgb(4 29 47 / 0%) 100%), url(../img/about-banner2.jpg);
            background-size: cover;
            background-position: center;
        }

        .about-hero-content {
            position: relative;
            z-index: 2;
            max-width: 720px;
            padding: 156px 0 60px;
        }

        .about-hero .about-label {
            color: #fff;
        }

        .about-hero .about-label::before {
            background: var(--about-blue);
        }

        .about-hero h1 {
            color: #fff;
            font-family: "Playfair Display", serif;
            font-size: 60px;
            line-height: 1.02;
            font-weight: 600;
            margin: 22px 0;
            letter-spacing: -2px;
        }

        .about-hero h1 span {
            color: #1596ef;
        }

        .about-hero p {
            max-width: 620px;
            color: rgba(255,255,255,.82);
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 28px;
        }

        .about-breadcrumb {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255,255,255,.65);
            font-size: 13px;
        }

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

        .about-breadcrumb i {
            color: var(--about-blue);
        }


        /* =====================================================
           ABOUT STORY
        ===================================================== */

        .about-story {
            padding: 110px 0;
            background: #fff;
        }

        .about-story-images {
            position: relative;
            min-height: 560px;
            padding-right: 70px;
        }

        .about-story-main-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 3px;
        }

        .about-story-small-image {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 48%;
            height: 250px;
            object-fit: cover;
            border: 10px solid #fff;
            box-shadow: 0 20px 50px rgba(10,45,70,.16);
        }

        .about-experience-box {
                position: absolute;
                left: -51px;
                bottom: -85px;
                width: 155px;
                padding: 20px;
                background: var(--about-blue);
                color: #fff;
                box-shadow: 0 15px 35px rgba(8, 127, 220, .28);
        }

        .about-experience-box strong {
            display: block;
            font-family: "Playfair Display", serif;
            font-size: 38px;
            line-height: 1;
            margin-bottom: 7px;
        }

        .about-experience-box span {
            font-size: 11px;
            line-height: 1.5;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .about-story-content {
            padding-left: 35px;
        }

        .about-story-content .about-heading {
            max-width: 600px;
        }

        .about-story-content p {
            font-size: 15px;
            line-height: 1.9;
            color: var(--about-text);
            margin-bottom: 18px;
        }

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

        .about-story-list li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 14px;
            color: var(--about-dark);
            font-size: 14px;
            font-weight: 600;
        }

        .about-story-list i {
            color: var(--about-blue);
            font-size: 18px;
        }


        /* =====================================================
           STATISTICS
        ===================================================== */

        .about-statistics {
            padding: 85px 0;
            background: var(--about-dark);
            position: relative;
            overflow: hidden;
        }

        .about-statistics::before {
            content: "";
            position: absolute;
            width: 500px;
            height: 500px;
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 50%;
            right: -200px;
            top: -220px;
        }

        .about-statistics::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border: 1px solid rgba(255,255,255,.06);
            border-radius: 50%;
            left: -150px;
            bottom: -170px;
        }

        .about-stat-box {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: 15px 25px;
            border-right: 1px solid rgba(255,255,255,.13);
        }

        .about-stat-box:last-child {
            border-right: 0;
        }

        .about-stat-icon {
            width: 52px;
            height: 52px;
            margin: 0 auto 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(8,127,220,.14);
            color: #35a9ff;
            border-radius: 50%;
            font-size: 22px;
        }

        .about-stat-number {
            color: #fff;
            font-family: "Playfair Display", serif;
            font-size: 50px;
            font-weight: 600;
            line-height: 1;
        }

        .about-stat-number span {
            color: #1596ef;
        }

        .about-stat-box h3 {
            color: #fff;
            font-size: 15px;
            margin: 13px 0 5px;
            font-weight: 700;
        }

        .about-stat-box p {
            color: rgba(255,255,255,.55);
            font-size: 12px;
            margin: 0;
        }


        /* =====================================================
           MISSION VISION
        ===================================================== */

        .about-purpose {
            background: #f5f8fb;
        }

        .about-purpose-heading {
            text-align: center;
            /* max-width: 700px; */
            margin-bottom: 55px;
        }

        .about-purpose-heading p {
            /* max-width: 620px; */
            text-align: center;
            font-size: 15px;
            line-height: 1.8;
        }

        .about-purpose-card {
            height: 100%;
            padding: 40px 35px;
            background: #fff;
            border: 1px solid var(--about-border);
            transition: .35s ease;
        }

        .about-purpose-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 45px rgba(10,50,75,.10);
            border-color: rgba(8,127,220,.25);
        }

        .about-purpose-icon {
            width: 62px;
            height: 62px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #edf7ff;
            color: var(--about-blue);
            font-size: 25px;
            margin-bottom: 25px;
        }

        .about-purpose-card h3 {
            color: var(--about-dark);
            font-family: "Playfair Display", serif;
            font-size: 27px;
            margin-bottom: 15px;
        }

        .about-purpose-card p {
            color: var(--about-text);
            font-size: 14px;
            line-height: 1.8;
            margin: 0;
        }


        /* =====================================================
           VALUES
        ===================================================== */

        .about-values {
            padding: 110px 0;
            background: #fff;
        }

        .about-values-image {
            position: relative;
            height: 580px;
            overflow: hidden;
        }

        .about-values-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .about-values-image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                0deg,
                rgba(4,30,48,.75),
                transparent 60%
            );
        }

        .about-values-image-content {
            position: absolute;
            left: 45px;
            bottom: 40px;
            z-index: 2;
            color: #fff;
        }

        .about-values-image-content span {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 3px;
        }

        .about-values-image-content h3 {
            font-family: "Playfair Display", serif;
            font-size: 38px;
            margin: 12px 0 0;
        }

        .about-values-image-content h3 span {
            color: #1596ef;
            letter-spacing: 0;
            font-size: inherit;
        }

        .about-values-content {
            padding: 20px 0 20px 70px;
        }

        .value-item {
            display: flex;
            gap: 22px;
            padding: 25px 0;
            border-bottom: 1px solid var(--about-border);
        }

        .value-item:first-child {
            padding-top: 0;
        }

        .value-number {
            flex: 0 0 45px;
            color: var(--about-blue);
            font-size: 12px;
            font-weight: 700;
            padding-top: 4px;
        }

        .value-item h3 {
            color: var(--about-dark);
            font-size: 23px;
            margin: 0 0 8px;
            font-weight: 700;
        }

        .value-item p {
            margin: 0;
            color: var(--about-text);
            font-size: 16px;
            line-height: 1.7;
        }


        /* =====================================================
           DIFFERENCE
        ===================================================== */

        .about-difference {
            padding: 110px 0;
            background: #f5f8fb;
        }

        .difference-heading {
            text-align: center;
            max-width: 750px;
            margin: 0 auto 55px;
        }

        .difference-heading p {
            font-size: 15px;
            line-height: 1.8;
        }

        .difference-card {
            height: 100%;
            background: #fff;
            padding: 38px 30px;
            border: 1px solid var(--about-border);
            text-align: center;
            transition: .35s ease;
        }

        .difference-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(12,50,75,.10);
        }

        .difference-icon {
            width: 65px;
            height: 65px;
            margin: 0 auto 22px;
            border-radius: 50%;
            background: #edf7ff;
            color: var(--about-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
        }

        .difference-card h3 {
            color: var(--about-dark);
            font-size: 23px;
            margin-bottom: 12px;
        }

        .difference-card p {
            margin: 0;
            font-size: 16px;
            line-height: 1.7;
        }


        /* =====================================================
           TEAM
        ===================================================== */

        .about-team {
            padding: 110px 0;
            background: #fff;
        }

        .about-team-head {
            margin-bottom: 50px;
        }

        .team-card {
            position: relative;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--about-border);
        }

        .team-image {
            height: 464px;
            overflow: hidden;
        }

        .team-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .5s ease;
        }

        .team-card:hover .team-image img {
            transform: scale(1.06);
        }

        .team-body {
            padding: 23px;
        }

        .team-body h3 {
            color: var(--about-dark);
            font-size: 25px;
            margin-bottom: 5px;
        }

        .team-body span {
            color: var(--about-blue);
            font-size: 18px;
            font-weight: 700;
        }


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

        .about-cta {
            position: relative;
            padding: 100px 0;
            background-image:
                linear-gradient(
                    90deg,
                    rgba(3,28,47,.96),
                    rgba(5,43,68,.84)
                ),
                url("assets/img/about-cta.jpg");
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .about-cta-content {
            position: relative;
            z-index: 2;
            max-width: 720px;
        }

        .about-cta .about-label {
            color: #fff;
        }

        .about-cta h2 {
            color: #fff;
            font-family: "Playfair Display", serif;
            font-size: clamp(38px, 4vw, 58px);
            line-height: 1.08;
            margin: 18px 0;
        }

        .about-cta h2 span {
            color: #1596ef;
        }

        .about-cta p {
            max-width: 600px;
            color: rgba(255,255,255,.7);
            font-size: 15px;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .about-cta-button {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 25px;
            background: var(--about-blue);
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 700;
            transition: .3s ease;
        }

        .about-cta-button:hover {
            background: #fff;
            color: var(--about-dark);
            transform: translateY(-3px);
        }


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

        @media (max-width: 991px) {

            .about-hero {
                min-height: 420px;
            }

            .about-story {
                padding: 80px 0;
            }

            .about-story-content {
                padding-left: 0;
                margin-top: 60px;
            }

            .about-stat-box {
                border-right: 0;
                border-bottom: 1px solid rgba(255,255,255,.13);
                padding: 30px 15px;
            }

            .about-stat-box:nth-last-child(-n+2) {
                border-bottom: 0;
            }

            .about-purpose,
            .about-values,
            .about-difference,
            .about-team {
                padding: 80px 0;
            }

            .about-values-content {
                padding: 55px 0 0;
            }

            .about-values-image {
                height: 480px;
            }
        }


        @media (max-width: 767px) {

            .about-hero {
                min-height: 395px !important;
                background-position: 92% center !important;
            }

            .about-hero-content {
                padding-top: 71px;
        padding-bottom: 20px;
            }

            .about-hero h1 {
                font-size: 45px;
                letter-spacing: -1px;
            }

            .about-hero p {
                font-size: 11px;
            }

            .about-story-images {
                min-height: 430px;
                padding-right: 40px;
            }

            .about-story-main-image {
                width: 90%;
                height: 400px;
            }

            .about-story-small-image {
                width: 50%;
                height: 180px;
                border-width: 6px;
            }

            .about-experience-box {
                left: 10px;
                bottom: 20px;
                width: 135px;
                padding: 16px;
            }

            .about-experience-box strong {
                font-size: 31px;
            }

            .about-heading {
                font-size: 39px;
            }

            .about-stat-number {
                font-size: 43px;
            }

            .about-purpose,
            .about-values,
            .about-difference,
            .about-team {
                padding: 65px 0;
            }

            .about-values-image {
                height: 400px;
            }

            .about-values-image-content {
                left: 25px;
                bottom: 25px;
            }

            .about-values-image-content h3 {
                font-size: 30px;
            }

            .value-item {
                gap: 15px;
            }

            .about-cta {
                padding: 70px 20px;
            }
        }


        @media (max-width: 480px) {

            .about-hero h1 {
                font-size: 32px;
            }

            .about-heading {
                font-size: 33px;
            }

            .about-story-images {
                min-height: 350px;
            }

            .about-story-main-image {
                height: 320px;
            }

            .about-story-small-image {
                height: 145px;
            }

            .about-stat-box {
                padding: 25px 10px;
            }

            .about-stat-number {
                font-size: 38px;
            }

            .about-values-image {
                height: 330px;
            }

            .team-image {
                height: 389px;
            }
        }



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

.rp-services-page {
    overflow: hidden;
    font-family: "Arial", sans-serif;
    color: var(--rp-text);
    background: #fff;
}

.rp-services-page h1,
.rp-services-page h2,
.rp-services-page h3,
.rp-services-page h4,
.rp-services-page h5 {
    font-family: Georgia, "Times New Roman", serif;
}

.rp-section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--rp-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.rp-section-label::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--rp-blue);
}

.rp-section-title {
    font-size: clamp(34px, 4vw, 48px);
    line-height: 1.05;
    font-weight: 700;
    color: var(--rp-dark);
    margin-bottom: 18px;
}

.rp-section-text {
    color: var(--rp-muted);
    line-height: 1.8;
    font-size: 15px;
}

.rp-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 4px;
    border: 0;
    background: var(--rp-blue);
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    transition: .3s ease;
}

.rp-btn:hover {
    background: var(--rp-blue-dark);
    color: #fff;
    transform: translateY(-3px);
}


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

.rp-services-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(2, 35, 57, .96) 0%,
            rgba(2, 43, 69, .86) 35%,
            rgba(2, 43, 69, .25) 75%,
            rgba(2, 43, 69, .1) 100%
        ),
        url("../img/service-banner.jpg") center center / cover no-repeat;
        background-position: 0% 14%;
}

.rp-services-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,.05),
        rgba(0,0,0,.15)
    );
    pointer-events: none;
}

.rp-hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    padding: 156px 0 60px;
}

.rp-hero-label {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.rp-hero-label::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--rp-blue);
}

.rp-hero-title {
    color: #fff;
    font-size: 51px;
    line-height: .98;
    margin: 0;
    font-weight: 700;
}

.rp-hero-title span {
    color: var(--rp-blue);
}

.rp-hero-text {
    color: rgba(255,255,255,.88);
    max-width: 610px;
    margin: 25px 0;
    font-size: 15px;
    line-height: 1.8;
}

.rp-hero-buttons {
    display: flex;
    align-items: center;
    gap: 22px;
}

.rp-video-btn {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 600;
}

.rp-video-icon {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s ease;
}

.rp-video-btn:hover .rp-video-icon {
    background: var(--rp-blue);
    border-color: var(--rp-blue);
}

.rp-hero-quality {
    position: absolute;
    right: 2%;
    bottom: 69px;
    z-index: 3;
    border-left: 2px solid var(--rp-blue);
    padding-left: 18px;
    color: #fff;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================================================
   SERVICES INTRO
========================================================= */

.rp-services-overview {
    position: relative;
    padding: 80px 0 85px;
    background:
        linear-gradient(
            90deg,
            #fff 0%,
            #fff 35%,
            #f7fbfe 100%
        );
}

.rp-services-overview::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 360px;
    height: 360px;
    opacity: .06;
    background: url("assets/img/building-line-art.png") center / contain no-repeat;
    pointer-events: none;
}

.rp-overview-left {
    padding-right: 35px;
}

.rp-benefits {
    margin-top: 28px;
}

.rp-benefit {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    color: #526b7e;
    font-size: 17px;
}

.rp-benefit-icon {
    width: 30px;
    height: 30px;
    border: 1px solid #9bd5fa;
    color: var(--rp-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* =========================================================
   SERVICE CARDS
========================================================= */

.rp-services-grid {
    position: relative;
    z-index: 2;
}

.rp-service-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--rp-border);
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(16, 62, 91, .06);
    transition: .35s ease;
}

.rp-service-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 40px rgba(16, 62, 91, .13);
}

.rp-service-image {
    position: relative;
    height: 150px;
    overflow: visible; /* important */
    border-radius: 5px 5px 0 0;
}

.rp-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 5px 5px 0 0;
}

.rp-service-icon {
    position: absolute;
    left: 15px;
    bottom: -22px;

    width: 44px;
    height: 44px;

    background: #0796ed;
    color: #fff;

    border-radius: 50%;
    border: 4px solid #fff;

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

    font-size: 18px;

    z-index: 10;
}

.rp-service-icon img{
    filter: brightness(0) invert(1);
    width: 25px;
    height: 25px;
}

.rp-service-card:hover .rp-service-image img {
    transform: scale(1.08);
}

.rp-service-number {
        position: absolute;
    top: 12px;
    border: 1px solid #0796ed;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background: #0796ed;
    text-align: center;
    right: 15px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.rp-service-content {
    padding: 30px 16px 18px;
}

.rp-service-content h3 {
    color: var(--rp-dark);
    font-size: 24px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.rp-service-content p {
    color: var(--rp-muted);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 14px;
}

.rp-learn {
    color: var(--rp-blue);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.rp-learn i {
    margin-left: 6px;
    transition: .3s ease;
}

.rp-learn:hover i {
    margin-left: 10px;
}


/* =========================================================
   FEATURED SERVICE
========================================================= */

.rp-featured {
    position: relative;
    background: var(--rp-dark);
    padding: 65px 0;
    overflow: hidden;
}

.rp-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(0,150,237,.15),
            transparent 35%
        );
}

.rp-featured-image {
    position: relative;
    height: 340px;
    border-radius: 6px;
    overflow: hidden;
}

.rp-featured-image img {
    width: 100%;
    height: 100%;
    border: 4px solid #fff;
    object-fit: cover;
}

.rp-experience-box {
    position: absolute;
    bottom: 18px;
    left: 18px;
    display: flex;
    background: rgba(3, 31, 48, .92);
    border-radius: 5px;
    overflow: hidden;
    color: #fff;
}

.rp-experience-item {
    padding: 13px 22px;
    border-right: 1px solid rgba(255,255,255,.25);
}

.rp-experience-item:last-child {
    border-right: 0;
}

.rp-experience-item strong {
    display: block;
    font-family: Georgia, serif;
    font-size: 28px;
}

.rp-experience-item span {
    font-size: 11px;
    color: rgba(255,255,255,.8);
}

.rp-featured-content {
    color: #fff;
    padding-left: 20px;
}

.rp-featured-content .rp-section-label {
    color: #fff;
}

.rp-featured-content .rp-section-title {
    color: #fff;
    font-size: 35px;
}

.rp-featured-content p {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    line-height: 1.8;
}

.rp-check-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.rp-check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 13px;
    margin-bottom: 11px;
}

.rp-check-list i {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--rp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.rp-feature-video {
    position: relative;
    height: 300px;
    border-radius: 6px;
    overflow: hidden;
    margin-left: 15px;
}

.rp-feature-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.55);
}

.rp-feature-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
}

.rp-feature-video-text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}


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

.rp-process {
    padding: 75px 0;
    background: #fff;
}

.rp-process-intro {
    padding-right: 30px;
}

.rp-process-step {
    position: relative;
    padding: 0 18px;
}

.rp-process-step:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -7px;
    top: 22px;
    color: var(--rp-blue);
    font-size: 20px;
}

.rp-process-icon {
    width: 48px;
    height: 48px;
    border: 1px solid #dceaf2;
    background: #f8fbfd;
    border-radius: 50%;
    color: var(--rp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 18px;
    box-shadow: 0 6px 20px rgba(0,0,0,.05);
}

.rp-process-step h4 {
    font-size: 15px;
    color: var(--rp-dark);
    margin-bottom: 10px;
}

.rp-process-step p {
    color: var(--rp-muted);
    font-size: 12px;
    line-height: 1.7;
}


/* =========================================================
   STATISTICS
========================================================= */

.rp-statistics {
    position: relative;
    padding: 45px 0;
    background:
        linear-gradient(
            90deg,
            rgba(2, 42, 68, .97),
            rgba(2, 42, 68, .90)
        ),
        url("../img/about-banner.png") center / cover no-repeat;
    color: #fff;
}

.rp-statistics .rp-section-label {
    color: #fff;
}

.rp-statistics-title {
    color: #fff;
    font-family: Georgia, serif;
    font-size: 35px;
    line-height: 1.1;
    margin: 0;
}

.rp-stat-item {
    position: relative;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.25);
    padding: 5px 20px;
}

.rp-stat-icon {
    color: var(--rp-blue);
    font-size: 23px;
    margin-bottom: 6px;
}

.rp-stat-number {
    color: #000;
    font-family: Georgia, serif;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 6px;
}

.rp-stat-label {
    color: rgba(255,255,255,.72);
    font-size: 11px;
}


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

.rp-services-cta {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    background:
        linear-gradient(
            90deg,
            rgba(2, 39, 64, .95),
            rgba(2, 39, 64, .72)
        ),
        url("assets/img/construction-cta.jpg") center / cover no-repeat;
    color: #fff;
}



.rp-services-cta .rp-section-label {
    color: #fff;
}

.rp-cta-title {
    color: #fff;
    font-size: clamp(32px, 4vw, 45px);
    margin-bottom: 10px;
}

.rp-cta-text {
    color: rgba(255,255,255,.82);
    font-size: 14px;
}

.rp-cta-button {
    text-align: right;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.rp-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .8s ease, transform .8s ease;
}

.rp-reveal.show {
    opacity: 1;
    transform: translateY(0);
}


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

@media (max-width: 991px) {

    .rp-services-hero {
        min-height: 580px;
    }

    .rp-hero-quality {
        display: none;
    }

    .rp-overview-left {
        padding-right: 0;
        margin-bottom: 35px;
    }

    .rp-featured-content {
        padding: 35px 0 0;
    }

    .rp-feature-video {
        margin: 25px 0 0;
    }

    .rp-process-step {
        margin-bottom: 35px;
    }

    .rp-process-step:not(:last-child)::after {
        display: none;
    }

    .rp-stat-item {
        margin-bottom: 25px;
        border-left: 0;
    }

    .rp-cta-button {
        text-align: left;
        margin-top: 25px;
    }
}


@media (max-width: 767px) {

    .rp-services-hero {
        min-height: 420px;
        background-position: 67% center;
    }

    .rp-hero-content {
        padding-top: 71px;
        padding-bottom: 20px;
    }

    .rp-hero-title {
        font-size: 43px;
    }

    .rp-hero-buttons {
        flex-wrap: wrap;
    }

    .rp-services-overview,
    .rp-featured,
    .rp-process {
        padding: 55px 0;
    }

    .rp-section-title {
        font-size: 35px;
    }

    .rp-service-image {
        height: 180px;
    }

    .rp-featured-image {
        height: 280px;
    }

    .rp-experience-box {
        left: 10px;
        right: 10px;
    }

    .rp-experience-item {
        padding: 10px 14px;
        flex: 1;
    }

    .rp-experience-item strong {
        font-size: 22px;
    }

    .rp-statistics-title {
        margin-bottom: 30px;
    }

    .rp-stat-item {
        border-bottom: 1px solid rgba(255,255,255,.15);
        padding-bottom: 20px;
    }

    .rp-services-cta {
        padding: 55px 0;
    }
}


@media (max-width: 480px) {

    .rp-hero-title {
        font-size: 38px;
    }

    .rp-hero-text {
        font-size: 13px;
    }

    .rp-experience-box {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin: -70px 10px 0;
        z-index: 3;
    }

    .rp-featured-image {
        height: 230px;
    }
}

/* =========================================================
   RAJHANS BRAND PROMISE
   MATCHING ABOUT PAGE COLORS
========================================================= */

.rp-brand-promise {

    position: relative;

    padding: 35px 0;

    background: #f5f8fb;

    overflow: hidden;

}


/* =========================================================
   MAIN BOX
========================================================= */

.rp-brand-promise-box {

    position: relative;

    min-height: 125px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 28px 38px;

    overflow: hidden;

    border-radius: 10px;

    background: #1d2f3f;

    box-shadow:
        0 12px 30px rgba(29, 47, 63, .12);

}


/* =========================================================
   BLUE TOP LINE
========================================================= */

.rp-brand-promise-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 3px;

    background: #168bd0;

}


/* =========================================================
   LEFT BLUE ACCENT
========================================================= */

.rp-brand-line {

    position: absolute;

    left: 0;

    top: 50%;

    width: 4px;

    height: 48px;

    background: #168bd0;

    transform:
        translateY(-50%)
        scaleY(0);

    transform-origin: center;

    animation:
        rpBrandLine .8s ease forwards .3s;

}


@keyframes rpBrandLine {

    to {

        transform:
            translateY(-50%)
            scaleY(1);

    }

}


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

.rp-brand-content {

    position: relative;

    z-index: 3;

    padding-left: 2px;

}


.rp-brand-label {

    display: block;

    margin-bottom: 9px;

    color: #168bd0;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.rp-brand-content h2 {

    margin: 0;

    color: #ffffff;

    font-family: "Manrope", sans-serif;

    font-size: clamp(23px, 2.5vw, 27px);

    line-height: 1.25;

    font-weight: 700;

    letter-spacing: -1px;

}


.rp-brand-content h2 span {

    color: #168bd0;

}


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

.rp-brand-icon {

    position: relative;

    z-index: 5;

    width: 58px;

    height: 58px;

    flex: 0 0 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #168bd0;

    font-size: 20px;

    border: 1px solid rgba(22,139,208,.7);

    border-radius: 50%;

}


/* inner technical circle */

.rp-icon-ring {

    position: absolute;

    inset: 6px;

    border: 1px dashed rgba(22,139,208,.45);

    border-radius: 50%;

    animation:
        rpRingRotate 12s linear infinite;

}


@keyframes rpRingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


.rp-brand-icon i {

    position: relative;

    z-index: 2;

}


/* =========================================================
   ARCHITECTURAL CIRCLES
========================================================= */

.rp-brand-promise-box::after {

    content: "";

    position: absolute;

    width: 430px;

    height: 430px;

    right: -210px;

    top: -155px;

    border-radius: 50%;

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

    box-shadow:

        0 0 0 35px rgba(255,255,255,.018),

        0 0 0 70px rgba(255,255,255,.012),

        0 0 0 105px rgba(255,255,255,.008);

    pointer-events: none;

}


/* =========================================================
   SUBTLE BLUEPRINT GRID
========================================================= */

.rp-brand-promise-box {

    background-color: #1d2f3f;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 35px 35px;

}


/* =========================================================
   ENTRY ANIMATION
========================================================= */

.rp-brand-promise-box {

    opacity: 0;

    transform: translateY(20px);

    animation:
        rpBrandAppear .8s ease forwards;

}


@keyframes rpBrandAppear {

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


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

.rp-brand-promise-box:hover
.rp-brand-icon {

    background: #168bd0;

    color: #ffffff;

    transition: .35s ease;

}


.rp-brand-promise-box:hover
.rp-brand-content h2 span {

    color: #48a9e2;

    transition: .35s ease;

}


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

@media (max-width: 767px) {

    .rp-brand-promise {

        padding: 25px 0;

    }

    .rp-brand-promise-box {

        min-height: 145px;

        padding: 25px 22px 25px 27px;

        border-radius: 8px;

    }

    .rp-brand-line {

        width: 3px;

        height: 42px;

    }

    .rp-brand-label {

        font-size: 7px;

        letter-spacing: 2px;

        margin-bottom: 8px;

    }

    .rp-brand-content h2 {

        font-size: 20px;

        line-height: 1.35;

        letter-spacing: -.5px;

        padding-right: 8px;

    }

    .rp-brand-icon {

        width: 45px;

        height: 45px;

        flex: 0 0 45px;

        font-size: 16px;

    }

    .rp-icon-ring {

        inset: 5px;

    }

}


@media (max-width: 480px) {

    .rp-brand-promise-box {

        padding-right: 65px;

    }

    .rp-brand-icon {

        position: absolute;

        right: 17px;

        top: 50%;

        transform: translateY(-50%);

    }

}

/* =========================================================
   OUR PHILOSOPHY
========================================================= */

.rp-philosophy {

    position: relative;

    padding: 75px 0 80px;

    overflow: hidden;

    background: #f5f8fb;

}


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

.rp-philosophy-heading {

    text-align: center;

    max-width: 650px;

    margin: 0 auto 45px;

}


.rp-section-label {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 12px;

    color: #168bd0;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}


.rp-section-label::before,
.rp-section-label::after {

    content: "";

    width: 18px;

    height: 1px;

    background: #168bd0;

}


.rp-philosophy-heading h2 {

    margin: 0;

    color: #1d2f3f;

    font-family: "Manrope", sans-serif;

    font-size: clamp(38px, 4vw, 58px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -1.5px;

}


.rp-philosophy-heading h2 span {

    color: #168bd0;

}


.rp-philosophy-heading p {

    max-width: 560px;

    margin: 14px auto 0;

    color: #6d7a84;

    font-size: 16px;

    line-height: 1.7;

}


/* =========================================================
   MAIN MAP
========================================================= */

.rp-philosophy-map {

    position: relative;

    width: 100%;

    max-width: 1050px;

    height: 440px;

    margin: 0 auto;

}


/* =========================================================
   CENTER CIRCLE
========================================================= */

.rp-philosophy-center {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 165px;

    height: 165px;

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

    border-radius: 50%;

    background: #1d2f3f;

    box-shadow:
        0 20px 45px rgba(29,47,63,.16);

    z-index: 10;

}


/* outer blue ring */

.rp-center-ring {

    position: absolute;

    inset: -12px;

    border: 1px solid rgba(22,139,208,.35);

    border-radius: 50%;

}


/* small architectural markers */

.rp-center-ring::before,
.rp-center-ring::after {

    content: "";

    position: absolute;

    width: 8px;

    height: 8px;

    background: #168bd0;

    border-radius: 50%;

}


.rp-center-ring::before {

    top: 10px;

    right: 25px;

}


.rp-center-ring::after {

    bottom: 15px;

    left: 22px;

}


/* center content */

.rp-center-inner {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


.rp-center-small {

    color: #168bd0;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

}


.rp-center-inner strong {

    margin-top: 5px;

    color: #fff;

    font-size: 18px;

    letter-spacing: -.4px;

}


.rp-center-line {

    width: 28px;

    height: 1px;

    margin: 9px 0 7px;

    background: #168bd0;

}


.rp-center-inner small {

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

    font-size: 7px;

    letter-spacing: 2px;

}


/* =========================================================
   CONNECTING LINES
========================================================= */

.rp-connect {

    position: absolute;

    display: block;

    background: rgba(22,139,208,.25);

    z-index: 1;

}


/* top */

.rp-connect-top {

    width: 1px;

    height: 100px;

    left: 50%;

    top: 0;

}


/* bottom */

.rp-connect-bottom {

    width: 1px;

    height: 100px;

    left: 50%;

    bottom: 0;

}


/* left */

.rp-connect-left {

    width: 130px;

    height: 1px;

    left: 0;

    top: 50%;

}


/* right */

.rp-connect-right {

    width: 130px;

    height: 1px;

    right: 0;

    top: 50%;

}


/* =========================================================
   PHILOSOPHY CARDS
========================================================= */

.rp-philosophy-card {

    position: absolute;

    width: 285px;

    min-height: 145px;

    padding: 23px 24px;

    display: flex;

    gap: 15px;

    background: #ffffff;

    border: 1px solid #e3ebf1;

    box-shadow:
        0 10px 30px rgba(29,47,63,.055);

    z-index: 5;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;

}


/* =========================================================
   INITIAL POSITION
   ALL CARDS START NEAR CENTER
========================================================= */

.rp-philosophy-card {

    left: 50%;

    top: 50%;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(.75);

}


/* =========================================================
   FINAL POSITIONS
   CARDS SPREAD OUT ONCE
========================================================= */

.rp-philosophy-map.is-visible .rp-card-1 {

    opacity: 1;

    transform:
        translate(-100%, -100%)
        translate(-35px, -25px)
        scale(1);

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        opacity .5s ease;

}


.rp-philosophy-map.is-visible .rp-card-2 {

    opacity: 1;

    transform:
        translate(35px, -100%)
        translate(0, -25px)
        scale(1);

    transition:
        transform .8s cubic-bezier(.16,1,.3,1) .12s,
        opacity .5s ease .12s;

}


.rp-philosophy-map.is-visible .rp-card-3 {

    opacity: 1;

    transform:
        translate(-100%, 25px)
        translate(-35px, 0)
        scale(1);

    transition:
        transform .8s cubic-bezier(.16,1,.3,1) .24s,
        opacity .5s ease .24s;

}


.rp-philosophy-map.is-visible .rp-card-4 {

    opacity: 1;

    transform:
        translate(35px, 25px)
        scale(1);

    transition:
        transform .8s cubic-bezier(.16,1,.3,1) .36s,
        opacity .5s ease .36s;

}


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

.rp-card-number {

    position: absolute;

    top: 12px;

    right: 17px;

    color: #edf3f7;

    font-size: 28px;

    font-weight: 700;

    line-height: 1;

}


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

.rp-card-icon {

    position: relative;

    flex: 0 0 36px;

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #168bd0;

    background: #eef7fd;

    border-radius: 50%;

    font-size: 14px;

}


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

.rp-card-label {

    display: block;

    margin-bottom: 4px;

    color: #168bd0;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.8px;

}


.rp-philosophy-card h3 {

    margin: 0 0 7px;

    color: #1d2f3f;

    font-size: 24px;

    font-weight: 700;

}


.rp-philosophy-card p {

    margin: 0;

    color: #74818a;

    font-size: 15px;

    line-height: 1.65;

}


/* =========================================================
   CARD HOVER
   NO MOVING / ROTATING
========================================================= */

.rp-philosophy-card:hover {

    border-color: rgba(22,139,208,.45);

    box-shadow:
        0 16px 35px rgba(22,139,208,.09);

}


/* =========================================================
   SMALL BLUE CORNER
========================================================= */

.rp-philosophy-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 28px;

    height: 3px;

    background: #168bd0;

}


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

@media (max-width: 991px) {

    .rp-philosophy-map {

        height: 500px;

    }

    .rp-philosophy-card {

        width: 250px;

    }

    .rp-connect-left,
    .rp-connect-right {

        width: 90px;

    }

}


@media (max-width: 767px) {

    .rp-philosophy {

        padding: 55px 0;

    }
    
    .rc-cta {
    min-height: 290px;
    background: linear-gradient(90deg, rgb(2 31 52 / 81%), rgb(2 31 52 / 65%), rgb(2 31 52 / 50%)), url("../img/about-banner2.jpg") center / cover !important;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .rp-philosophy-heading {

        margin-bottom: 35px;

    }

    .rp-philosophy-heading h2 {

        font-size: 29px;

    }

    .rp-philosophy-map {

        height: auto;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 15px;

        padding-top: 105px;

    }

    .rp-philosophy-center {

        width: 105px;

        height: 105px;

        top: 48px;

    }

    .rp-center-inner strong {

        font-size: 13px;

    }

    .rp-center-small {

        font-size: 6px;

    }

    .rp-center-inner small {

        font-size: 5px;

    }

    .rp-philosophy-card {

        position: relative;

        left: auto;

        top: auto;

        width: auto;

        min-height: 150px;

        padding: 18px;

        opacity: 0;

        transform: translateY(20px) scale(.95);

    }


    /* mobile spread animation */

    .rp-philosophy-map.is-visible .rp-card-1,
    .rp-philosophy-map.is-visible .rp-card-2,
    .rp-philosophy-map.is-visible .rp-card-3,
    .rp-philosophy-map.is-visible .rp-card-4 {

        opacity: 1;

        transform: translateY(0) scale(1);

    }


    .rp-connect {

        display: none;

    }

}


@media (max-width: 480px) {

    .rp-philosophy-map {

        grid-template-columns: 1fr;

        padding-top: 125px;

    }

    .rp-philosophy-card {

        min-height: 125px;

    }

}

/* =========================================================
   MILESTONES
========================================================= */

.rp-milestones {

    position: relative;

    padding: 80px 0 90px;

    background: #ffffff;

    overflow: hidden;

}


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

.rp-milestone-heading {

    max-width: 650px;

    margin: 0 auto 55px;

    text-align: center;

}


.rp-milestone-heading .rp-section-label {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 13px;

    color: #168bd0;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 3px;

}


.rp-milestone-heading h2 {

    margin: 0;

    color: #1d2f3f;

    font-family: "Manrope", sans-serif;

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

    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -1.5px;

}


.rp-milestone-heading h2 span {

    display: block;

    color: #168bd0;

}


.rp-milestone-heading p {

    max-width: 570px;

    margin: 15px auto 0;

    color: #74818a;

    font-size: 12px;

    line-height: 1.7;

}


/* =========================================================
   TRACK
========================================================= */

.rp-milestone-track {

    position: relative;

    display: grid;

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

    gap: 18px;

    max-width: 1180px;

    margin: 0 auto;

    padding-top: 35px;

}


/* =========================================================
   HORIZONTAL LINE
========================================================= */

.rp-milestone-line {

    position: absolute;

    left: 7%;

    right: 7%;

    top: 52px;

    height: 1px;

    background: #dce8ef;

    z-index: 0;

}


.rp-milestone-line span {

    display: block;

    width: 0;

    height: 100%;

    background: #168bd0;

    transition:
        width 1.8s cubic-bezier(.16,1,.3,1);

}


.rp-milestone-track.is-visible
.rp-milestone-line span {

    width: 100%;

}


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

.rp-milestone-card {

    position: relative;

    min-height: 310px;

    padding: 25px 22px 22px;

    background: #f7fafc;

    border: 1px solid #e4edf2;

    z-index: 2;

    overflow: hidden;

    /* opacity: 0; */

    transform:
        translateY(35px);

}


/* =========================================================
   CARD REVEAL
========================================================= */

.rp-milestone-track.is-visible
.rp-milestone-card:nth-of-type(1) {

    animation:
        rpMilestoneReveal .75s ease forwards .15s;

}


.rp-milestone-track.is-visible
.rp-milestone-card:nth-of-type(2) {

    animation:
        rpMilestoneReveal .75s ease forwards .35s;

}


.rp-milestone-track.is-visible
.rp-milestone-card:nth-of-type(3) {

    animation:
        rpMilestoneReveal .75s ease forwards .55s;

}


.rp-milestone-track.is-visible
.rp-milestone-card:nth-of-type(4) {

    animation:
        rpMilestoneReveal .75s ease forwards .75s;

}


@keyframes rpMilestoneReveal {

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   TOP AREA
========================================================= */

.rp-milestone-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 30px;

}


.rp-milestone-year {

    color: #1d2f3f;

    font-size: 24px;

    font-weight: 800;

    letter-spacing: -1px;

}


.rp-milestone-index {

    color: #d9e5ec;

    font-size: 30px;

    font-weight: 800;

}


/* =========================================================
   MARKER
========================================================= */

.rp-milestone-marker {

    position: relative;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    color: #168bd0;

    background: #ffffff;

    border: 1px solid #d9eaf3;

    border-radius: 50%;

    font-size: 15px;

}


/* line connector from marker */

.rp-milestone-marker::before {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 100%;

    width: 1px;

    height: 35px;

    background: #168bd0;

    transform: translateX(-50%);

}


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

.rp-milestone-label {

    display: block;

    margin-bottom: 6px;

    color: #168bd0;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2px;

}


/* =========================================================
   TITLE
========================================================= */

.rp-milestone-content h3 {

    margin: 0 0 10px;

    color: #1d2f3f;

    font-size: 18px;

    font-weight: 700;

    letter-spacing: -.4px;

}


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

.rp-milestone-content p {

    margin: 0;

    color: #71808a;

    font-size: 10px;

    line-height: 1.7;

}


/* =========================================================
   ARROW
========================================================= */

.rp-milestone-arrow {

    position: absolute;

    right: 18px;

    bottom: 17px;

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #168bd0;

    border: 1px solid #d8e8f0;

    border-radius: 50%;

    font-size: 11px;

    transition:
        background .3s ease,
        color .3s ease;

}


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

.rp-milestone-card:hover {

    background: #1d2f3f;

    border-color: #1d2f3f;

}


.rp-milestone-card:hover .rp-milestone-year,
.rp-milestone-card:hover .rp-milestone-content h3 {

    color: #ffffff;

}


.rp-milestone-card:hover .rp-milestone-index {

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

}


.rp-milestone-card:hover .rp-milestone-content p {

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

}


.rp-milestone-card:hover .rp-milestone-marker {

    background: #168bd0;

    border-color: #168bd0;

    color: #ffffff;

}


.rp-milestone-card:hover .rp-milestone-arrow {

    background: #168bd0;

    color: #ffffff;

    border-color: #168bd0;

}


/* =========================================================
   BLUE CORNER
========================================================= */

.rp-milestone-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 0;

    height: 3px;

    background: #168bd0;

    transition:
        width .45s ease;

}


.rp-milestone-card:hover::before {

    width: 100%;

}


/* =========================================================
   SUBTLE ARCHITECTURAL DETAIL
========================================================= */

.rp-milestone-card::after {

    content: "";

    position: absolute;

    right: -50px;

    bottom: -70px;

    width: 160px;

    height: 160px;

    border: 1px solid rgba(22,139,208,.08);

    border-radius: 50%;

    transition:
        transform .6s ease;

}


.rp-milestone-card:hover::after {

    transform: scale(1.4);

}


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

@media (max-width: 991px) {

    .rp-milestone-track {

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

        gap: 18px;

    }

    .rp-milestone-line {

        display: none;

    }

    .rp-milestone-card {

        min-height: 290px;

    }

}


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

@media (max-width: 767px) {

    .rp-milestones {

        padding: 60px 0 65px;

    }

    .rp-milestone-heading {

        margin-bottom: 38px;

    }

    .rp-milestone-heading h2 {

        font-size: 29px;

    }

    .rp-milestone-track {

        grid-template-columns: 1fr;

        gap: 14px;

        padding-top: 0;

    }

    .rp-milestone-card {

        min-height: 230px;

        padding: 22px;

    }

    .rp-milestone-marker::before {

        display: none;

    }

}

/* =========================================
   MILESTONE CARD REVEAL
========================================= */

.rp-milestone-card {
    opacity: 0;
    transform: translateY(35px);
}

.rp-milestone-track.is-visible .rp-milestone-card {
    animation: rpMilestoneReveal 0.7s ease forwards;
}

.rp-milestone-track.is-visible .milestone-1 {
    animation-delay: 0.15s;
}

.rp-milestone-track.is-visible .milestone-2 {
    animation-delay: 0.35s;
}

.rp-milestone-track.is-visible .milestone-3 {
    animation-delay: 0.55s;
}

.rp-milestone-track.is-visible .milestone-4 {
    animation-delay: 0.75s;
}

@keyframes rpMilestoneReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   ACHIEVEMENTS SECTION
========================================================= */

.rp-achievements {
    position: relative;
    padding: 90px 0 100px;

    background: #F5F8FB;

    overflow: hidden;
}


/* =========================================================
   SECTION TITLE
========================================================= */

.rp-achievements-title {
    text-align: center;
    margin-bottom: 55px;
}

.rp-section-label {
    display: inline-block;

    margin-bottom: 15px;

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

    letter-spacing: 3px;
    text-transform: uppercase;

    color: #168BD0;
}

.rp-achievements-title h2 {
    margin: 0;

    font-size: clamp(38px, 4vw, 58px);

    font-weight: 700;
    letter-spacing: -2.5px;

    color: #1D2F3F;
}

.rp-achievements-title h2 span {
    display: block;

    color: #168BD0;
}

.rp-achievements-title p {

    margin: 20px 0 0;

    font-size: 16px;
    line-height: 1.8;

    color: #74818A;
}


/* =========================================================
   SHOWCASE
========================================================= */

.rp-certificate-showcase {
    position: relative;

    height: 540px;

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


/* =========================================================
   BACKGROUND LINE
========================================================= */

.rp-certificate-line {
    position: absolute;

    left: 5%;
    right: 5%;

    top: 50%;

    height: 1px;

    background: #d7e3ea;
}

.rp-certificate-line::before,
.rp-certificate-line::after {
    content: "";

    position: absolute;

    top: -3px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #168BD0;
}

.rp-certificate-line::before {
    left: 0;
}

.rp-certificate-line::after {
    right: 0;
}


/* =========================================================
   CERTIFICATE CARD
========================================================= */

.rp-certificate-card {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 300px;
    height: 400px;

    padding: 9px;

    background: #ffffff;

    border: 1px solid #dce7ee;

    box-shadow:
        0 12px 35px rgba(29, 47, 63, .10);

    text-decoration: none;

    transform:
        translate(-50%, -50%)
        scale(.72);

    opacity: 0;

    pointer-events: none;

    transition:
        transform .75s cubic-bezier(.22, .61, .36, 1),
        opacity .65s ease,
        filter .65s ease,
        box-shadow .5s ease;
}


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

.rp-certificate-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    background: #ffffff;
}


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

.rp-certificate-number {
    position: absolute;

    top: 18px;
    right: 18px;

    width: 40px;
    height: 40px;

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

    border-radius: 50%;

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

    color: #168BD0;

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

    letter-spacing: 1px;

    box-shadow: 0 4px 15px rgba(0,0,0,.08);
}


/* =========================================================
   CENTER CARD
========================================================= */

.rp-certificate-card.active {
    z-index: 10;

    opacity: 1;

    pointer-events: auto;

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

    box-shadow:
        0 28px 60px rgba(29, 47, 63, .18);
}


/* =========================================================
   LEFT CARD
========================================================= */

.rp-certificate-card.left {
    z-index: 5;

    opacity: .65;

    pointer-events: auto;

    transform:
        translate(calc(-50% - 310px), -50%)
        scale(.72);

    filter: saturate(.75);
}


/* =========================================================
   RIGHT CARD
========================================================= */

.rp-certificate-card.right {
    z-index: 5;

    opacity: .65;

    pointer-events: auto;

    transform:
        translate(calc(-50% + 310px), -50%)
        scale(.72);

    filter: saturate(.75);
}


/* =========================================================
   FAR LEFT
========================================================= */

.rp-certificate-card.far-left {
    z-index: 2;

    opacity: .22;

    transform:
        translate(calc(-50% - 540px), -50%)
        scale(.55);

    filter: saturate(.4);
}


/* =========================================================
   FAR RIGHT
========================================================= */

.rp-certificate-card.far-right {
    z-index: 2;

    opacity: .22;

    transform:
        translate(calc(-50% + 540px), -50%)
        scale(.55);

    filter: saturate(.4);
}


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

.rp-certificate-card.active:hover {
    transform:
        translate(-50%, -50%)
        scale(1.025);

    box-shadow:
        0 35px 70px rgba(29, 47, 63, .23);
}

.rp-certificate-card.left:hover,
.rp-certificate-card.right:hover {
    opacity: .9;

    filter: saturate(1);
}


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

.rp-certificate-center-label {
    position: absolute;

    bottom: 5px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 20;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 18px;

    background: #1D2F3F;

    border-radius: 3px;

    white-space: nowrap;
}

.rp-certificate-center-label span {
    font-size: 9px;

    letter-spacing: 2px;

    color: #8ea0ad;
}

.rp-certificate-center-label strong {
    font-size: 10px;

    letter-spacing: 1.5px;

    color: #ffffff;
}


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

.rp-achievement-bottom {
    display: flex;

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

    padding-top: 25px;

    border-top: 1px solid #dce7ee;
}

.rp-achievement-count {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #168BD0;
}

.rp-achievement-note {
    font-size: 12px;

    color: #74818A;
}

.rp-achievement-note i {
    margin-right: 7px;

    color: #168BD0;
}


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

@media (max-width: 991px) {

    .rp-certificate-showcase {
        height: 500px;
    }

    .rp-certificate-card {
        width: 270px;
        height: 365px;
    }

    .rp-certificate-card.left {
        transform:
            translate(calc(-50% - 220px), -50%)
            scale(.68);
    }

    .rp-certificate-card.right {
        transform:
            translate(calc(-50% + 220px), -50%)
            scale(.68);
    }

    .rp-certificate-card.far-left,
    .rp-certificate-card.far-right {
        opacity: 0;
    }
}


@media (max-width: 767px) {

    .rp-achievements {
        padding: 70px 0 75px;
    }

    .rp-achievements-title {
        margin-bottom: 30px;
    }

    .rp-achievements-title h2 {
        font-size: 42px;
    }

    .rp-certificate-showcase {
        height: 470px;
    }

    .rp-certificate-card {
        width: 245px;
        height: 330px;
    }

    .rp-certificate-card.left {
        transform:
            translate(calc(-50% - 120px), -50%)
            scale(.62);

        opacity: .3;
    }

    .rp-certificate-card.right {
        transform:
            translate(calc(-50% + 120px), -50%)
            scale(.62);

        opacity: .3;
    }

    .rp-certificate-line {
        left: 0;
        right: 0;
    }

    .rp-achievement-bottom {
        display: block;
    }

    .rp-achievement-note {
        margin-top: 10px;
    }

    .rp-certificate-center-label {
        bottom: 0;
    }
}


.career-hero {
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
            background-image:
                linear-gradient(
                    90deg,
                    rgba(4, 29, 47, .94) 0%,
                    rgba(4, 29, 47, .80) 38%,
                    rgba(4, 29, 47, .25) 75%,
                    rgba(4, 29, 47, .05) 100%
                ),
                url("../img/career-banner.png");
            background-size: cover;
            background-position: center;
        }


/* =========================================================
   RAJHANS CAREER APPLICATION
========================================================= */

.rp-career-application {
    position: relative;
    padding: 100px 0;
    background: #f5f8fb;
    overflow: hidden;
}


/* =========================================================
   BACKGROUND ARCHITECTURAL DETAIL
========================================================= */

.rp-career-application::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(22, 139, 208, 0.08);
    border-radius: 50%;
    right: -220px;
    top: -180px;
}

.rp-career-application::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(29, 47, 63, 0.05);
    border-radius: 50%;
    left: -180px;
    bottom: -160px;
}


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

.rp-career-heading {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}

.rp-career-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #168bd0;
}

.rp-career-eyebrow span {
    width: 30px;
    height: 1px;
    background: #168bd0;
}

.rp-career-heading h2 {
    margin: 0;

    font-size: clamp(38px, 5vw, 64px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -2px;
    color: #1d2f3f;
}

.rp-career-heading h2 strong {
    display: block;
    color: #168bd0;
    font-weight: 700;
}

.rp-career-heading p {
    max-width: 600px;
    margin: 22px auto 0;

    font-size: 15px;
    line-height: 1.8;
    color: #6a7680;
}


/* =========================================================
   MAIN FORM BOX
========================================================= */

.rp-career-form-box {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 300px 1fr;

    max-width: 1180px;
    min-height: 650px;

    margin: auto;

    background: #ffffff;

    box-shadow:
        0 25px 70px rgba(29, 47, 63, 0.10);

    border: 1px solid rgba(29, 47, 63, 0.06);
}


/* =========================================================
   SIDEBAR
========================================================= */

.rp-career-sidebar {
    position: relative;

    display: flex;
    flex-direction: column;

    padding: 45px 35px;

    background: #1d2f3f;
    color: #ffffff;

    overflow: hidden;
}


/* architectural circle */

.rp-career-sidebar::before {
    content: "";
    position: absolute;

    width: 300px;
    height: 300px;

    right: -180px;
    top: -100px;

    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 50%;
}

.rp-career-sidebar::after {
    content: "";
    position: absolute;

    width: 220px;
    height: 220px;

    left: -150px;
    bottom: -100px;

    border: 1px solid rgba(22,139,208,0.25);
    border-radius: 50%;
}


/* =========================================================
   SIDEBAR TOP
========================================================= */

.rp-sidebar-top {
    position: relative;
    z-index: 2;
}

.rp-sidebar-number {
    display: block;

    margin-bottom: 25px;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #168bd0;
}

.rp-sidebar-top h3 {
    margin: 0;

    font-size: 32px;
    line-height: 1.05;
    font-weight: 700;

    letter-spacing: -1px;
}

.rp-sidebar-top p {
    margin: 20px 0 0;

    font-size: 13px;
    line-height: 1.8;

    color: rgba(255,255,255,0.62);
}


/* =========================================================
   STEP PROGRESS
========================================================= */

.rp-step-progress {
    position: relative;
    z-index: 2;

    margin-top: 55px;
}


.rp-progress-line {
    position: absolute;

    width: 1px;

    left: 17px;
    top: 17px;
    bottom: 17px;

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

.rp-progress-line span {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 0;

    background: #168bd0;

    transition: height 0.5s ease;
}


/* =========================================================
   STEP ITEM
========================================================= */

.rp-step-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 25px;

    opacity: 0.42;

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

.rp-step-item:last-child {
    margin-bottom: 0;
}

.rp-step-item.active {
    opacity: 1;
}

.rp-step-item.completed {
    opacity: 0.85;
}

.rp-step-item.active {
    transform: translateX(5px);
}


.rp-step-circle {
    position: relative;
    z-index: 3;

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

    width: 35px;
    height: 35px;

    flex: 0 0 35px;

    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;

    background: #1d2f3f;

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

    transition: all 0.35s ease;
}

.rp-step-item.active .rp-step-circle {
    background: #168bd0;
    border-color: #168bd0;

    box-shadow: 0 0 0 6px rgba(22,139,208,0.12);
}

.rp-step-item.completed .rp-step-circle {
    background: #168bd0;
    border-color: #168bd0;
}


.rp-step-item strong {
    display: block;

    font-size: 15px;
    font-weight: 600;
}

.rp-step-item small {
    display: block;

    margin-top: 3px;

    font-size: 12px;
    color: rgba(255,255,255,0.45);
}


/* =========================================================
   SIDEBAR BOTTOM
========================================================= */

.rp-sidebar-bottom {
    position: relative;
    z-index: 2;

    margin-top: auto;

    display: flex;
    align-items: center;
    gap: 12px;
}

.rp-sidebar-line {
    width: 30px;
    height: 1px;
    background: #168bd0;
}

.rp-sidebar-bottom small {
    font-size: 8px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.4);
}


/* =========================================================
   FORM AREA
========================================================= */

.rp-career-form-area {
    position: relative;

    padding: 55px 60px;

    background: #ffffff;
}


/* =========================================================
   FORM STEP
========================================================= */

.rp-form-step {
    display: none;

    animation: rpStepIn 0.5s ease forwards;
}

.rp-form-step.active {
    display: block;
}

@keyframes rpStepIn {

    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================================
   FORM TOP
========================================================= */

.rp-form-top {
    margin-bottom: 38px;
}

.rp-form-top > span {
    display: block;

    margin-bottom: 10px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;

    color: #168bd0;
}

.rp-form-top h3 {
    margin: 0;

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

    color: #1d2f3f;
}

.rp-form-top p {
    margin: 10px 0 0;

    font-size: 13px;
    color: #74818a;
}


/* =========================================================
   FORM GRID
========================================================= */

.rp-form-grid {
    display: grid;

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

    gap: 22px 20px;
}

.rp-field-full {
    grid-column: 1 / -1;
}


/* =========================================================
   FIELD
========================================================= */

.rp-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;

    color: #1d2f3f;
}

.rp-field label b {
    color: #168bd0;
}


.rp-field input,
.rp-field select {
    width: 100%;
    height: 48px;

    padding: 0 15px;

    border: 1px solid #dce4e9;
    border-radius: 2px;

    outline: none;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;

    color: #1d2f3f;

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

.rp-field input::placeholder {
    color: #a7b0b7;
}

.rp-field input:focus,
.rp-field select:focus {
    border-color: #168bd0;

    box-shadow:
        0 0 0 3px rgba(22,139,208,0.08);
}


/* =========================================================
   FILE UPLOAD
========================================================= */

.rp-file-box {
    position: relative;

    display: flex;
    align-items: center;
    gap: 10px;

    height: 48px;

    padding: 0 15px;

    border: 1px dashed #cbd7de;

    background: #f9fbfc;

    overflow: hidden;
}

.rp-file-box i {
    font-size: 18px;
    color: #168bd0;
}

.rp-file-box span {
    font-size: 12px;
    color: #74818a;
}

.rp-file-box input {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


/* =========================================================
   DECLARATION
========================================================= */

.rp-declaration {
    grid-column: 1 / -1;

    margin-top: 8px;

    padding: 20px;

    background: #f5f8fb;

    border-left: 3px solid #168bd0;
}


.rp-check-label {
    display: flex;
    align-items: flex-start;
    gap: 13px;

    cursor: pointer;
}


.rp-check-label input {
    position: absolute;
    opacity: 0;
}


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

    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    border: 1px solid #bdcbd4;

    background: #ffffff;

    transition: 0.25s ease;
}

.rp-custom-check i {
    opacity: 0;

    font-size: 13px;
    color: #ffffff;

    transition: 0.2s ease;
}

.rp-check-label input:checked + .rp-custom-check {
    background: #168bd0;
    border-color: #168bd0;
}

.rp-check-label input:checked + .rp-custom-check i {
    opacity: 1;
}


.rp-declaration-text {
    font-size: 11px;
    line-height: 1.7;
    color: #6a7680;
}


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

.rp-form-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 40px;

    padding-top: 25px;

    border-top: 1px solid #edf1f3;
}


.rp-required-note {
    font-size: 10px;
    color: #98a3aa;
}


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

.rp-next-btn,
.rp-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;

    min-height: 48px;

    padding: 0 24px;

    border: 0;

    background: #168bd0;
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;

    cursor: pointer;

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

.rp-next-btn:hover,
.rp-submit-btn:hover {
    background: #1d2f3f;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(29,47,63,0.15);
}


.rp-prev-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    min-height: 48px;

    padding: 0 20px;

    border: 1px solid #dce4e9;

    background: #ffffff;
    color: #1d2f3f;

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

    cursor: pointer;

    transition: 0.3s ease;
}

.rp-prev-btn:hover {
    border-color: #168bd0;
    color: #168bd0;
}


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

@media (max-width: 991px) {

    .rp-career-application {
        padding: 75px 0;
    }

    .rp-career-form-box {
        grid-template-columns: 1fr;
    }

    .rp-career-sidebar {
        padding: 35px;
    }

    .rp-sidebar-top h3 {
        font-size: 28px;
    }

    .rp-sidebar-top br {
        display: none;
    }

    .rp-step-progress {
        margin-top: 35px;

        display: flex;
        justify-content: space-between;
        gap: 8px;
    }

    .rp-progress-line {
        display: none;
    }

    .rp-step-item {
        flex-direction: column;
        gap: 8px;

        margin: 0;

        text-align: center;
    }

    .rp-step-item.active {
        transform: none;
    }

    .rp-step-item > div:last-child {
        display: none;
    }

    .rp-sidebar-bottom {
        display: none;
    }

    .rp-career-form-area {
        padding: 45px 40px;
    }

}


@media (max-width: 767px) {

    .rp-career-application {
        padding: 200px 15px;
    }

    .rp-career-heading {
        margin-bottom: 35px;
    }

    .rp-career-heading h2 {
        font-size: 40px;
    }

    .rp-career-heading p {
        font-size: 13px;
    }

    .rp-career-sidebar {
        padding: 30px 20px;
    }

    .rp-sidebar-top p {
        max-width: 400px;
    }

    .rp-step-progress {
        margin-top: 30px;
    }

    .rp-step-circle {
        width: 31px;
        height: 31px;
        flex-basis: 31px;

        font-size: 8px;
    }

    .rp-career-form-area {
        padding: 35px 22px;
    }

    .rp-form-top {
        margin-bottom: 28px;
    }

    .rp-form-top h3 {
        font-size: 26px;
    }

    .rp-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .rp-field-full {
        grid-column: auto;
    }

    .rp-declaration {
        grid-column: auto;
    }

    .rp-form-navigation {
        gap: 12px;
    }

    .rp-required-note {
        display: none;
    }

    .rp-next-btn,
    .rp-submit-btn,
    .rp-prev-btn {
        padding: 0 17px;
    }

}


@media (max-width: 480px) {

    .rp-career-heading h2 {
        font-size: 34px;
    }

    .rp-career-sidebar {
        padding: 25px 15px;
    }

    .rp-sidebar-top h3 {
        font-size: 25px;
    }

    .rp-career-form-area {
        padding: 30px 17px;
    }

    .rp-form-navigation {
        justify-content: flex-end;
    }

    .rp-prev-btn {
        padding: 0 13px;
    }

    .rp-next-btn,
    .rp-submit-btn {
        padding: 0 15px;
    }

}


/* Home Page */


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

        .rc-container {
            max-width: 1240px;
            margin: auto;
        }

        .rc-section {
            padding: 75px 0;
        }

        .rc-section-light {
            background: var(--rc-bg);
        }

        .rc-section-heading {
            margin-bottom: 30px;
        }

        .rc-section-heading-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        .rc-section-label {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            background: var(--rc-blue);
            color: #fff;
            padding: 8px 18px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .5px;
        }

        .rc-section-label::after {
            content: "";
            width: 42px;
            height: 1px;
            background: rgba(255,255,255,.8);
        }

        .rc-section-title {
            font-size: 32px;
            line-height: 1.15;
            font-weight: 700;
            margin-top: 12px;
            color: #18232d;
        }

        .rc-section-title span {
            color: var(--rc-blue);
        }

        .rc-section-description {
            color: var(--rc-muted);
            max-width: 680px;
            line-height: 1.7;
            margin-top: 12px;
        }

        .rc-view-btn {
            border: 1px solid #aebdca;
            padding: 9px 17px;
            border-radius: 4px;
            color: #283d4e;
            font-size: 12px;
            font-weight: 700;
            transition: .3s ease;
            white-space: nowrap;
        }

        .rc-view-btn:hover {
            color: #fff;
            background: var(--rc-blue);
            border-color: var(--rc-blue);
        }


        /* =========================================
           TOP NAVBAR
        ========================================= */

        .rc-navbar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 0 25px;
            transition: .4s ease;
        }

        .rc-navbar.scrolled {
            /* padding: 7px 0px 7px; */
            position: fixed;
            /* background: rgba(4, 35, 64, .96);
            backdrop-filter: blur(12px);
            box-shadow: 0 5px 25px rgba(0,0,0,.12); */
        }

        

       .rc-navbar.scrolled .rc-logo {
    /* width: 95px;
    height: 65px; */
    padding: 6px 8px;
}

        .rc-nav-inner {
            max-width: 1280px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

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

.my-icon{
    filter: brightness(0) saturate(100%) invert(35%) sepia(89%) saturate(1014%) hue-rotate(157deg) brightness(91%) contrast(101%);
}

/*.my-icon-white{*/
/*    filter: brightness(0) invert(1);*/
/*}*/


/* Navbar positioning */
.rc-navbar {
    top: 15px;
}

/* Logo spacing */
.rc-logo {
        /*margin-top: 15px;*/
    width: 292px;
    background: #fff;
    height: 52px;
    padding: 4px 0px 5px 0px;
    border-radius: 57px;
}

/* Keep logo image properly fitted */
.rc-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

        .rc-menu {
            background: #fff;
            border-radius: 35px;
            padding: 7px 12px;
            display: flex;
            align-items: center;
            gap: 11px;
        }

        .rc-menu a {
            color: #41515f;
            font-size: 16px;
            font-weight: 600;
            padding: 9px 12px;
            border-radius: 20px;
            transition: .3s;
        }

        .rc-menu a:hover,
        .rc-menu a.active {
            background: var(--rc-blue);
            color: #fff;
        }

        .rc-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rc-social a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 17px;
    transition: 0.3s ease;
}

.rc-social .linkedin {
    background: #0A66C2;
    color: #fff;
}

.rc-social .instagram {
    background: linear-gradient(
        45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5
    );
    color: #fff;
}

.rc-social .whatsapp {
    background: #25D366;
    color: #fff;
}

.rc-social .youtube {
    background: #FF0000;
    color: #fff;
}

.rc-social a:hover {
    transform: translateY(-3px);
}


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

        .rc-hero {
            height: 650px;
            position: relative;
            overflow: hidden;
            background: #071e32;
        }

        .rc-hero .carousel,
        .rc-hero .carousel-inner,
        .rc-hero .carousel-item {
            height: 100%;
        }

        .rc-hero-slide {
            height: 100%;
            position: relative;
            background-position: center;
            background-size: cover;
            transform: scale(1.08);
        }

        .carousel-item.active .rc-hero-slide {
            animation: heroZoom 7s ease forwards;
        }

        @keyframes heroZoom {

            from {
                transform: scale(1.08);
            }

            to {
                transform: scale(1);
            }
        }

        .rc-hero-overlay {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(
                    90deg,
                    rgba(1,25,46,.88) 0%,
                    rgba(2,31,55,.70) 38%,
                    rgba(2,31,55,.12) 75%
                );
        }

        .rc-hero-content {
            position: absolute;
            left: 7%;
            top: 50%;
            transform: translateY(-45%);
            color: #fff;
            max-width: 570px;
            z-index: 2;
        }

        .carousel-item.active .rc-hero-content {
            animation: heroContent .9s ease both;
        }

        @keyframes heroContent {

            from {
                opacity: 0;
                transform: translate(-40px, -45%);
            }

            to {
                opacity: 1;
                transform: translate(0, -45%);
            }
        }

        .rc-hero-small {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 13px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .rc-hero-small::after {
            content: "";
            width: 55px;
            height: 1px;
            background: #fff;
        }

        .rc-hero h1 {
            font-size: clamp(42px, 5vw, 70px);
            font-weight: 800;
            line-height: .98;
            text-transform: uppercase;
            margin-bottom: 20px;
        }

        .rc-hero h1 span {
            color: #0797ed;
        }

        .rc-hero p {
            max-width: 460px;
            font-size: 18px;
            line-height: 1.65;
            color: rgba(255,255,255,.9);
            margin-bottom: 25px;
        }

        .rc-btn-primary {
            background: #0799e8;
            border: 1px solid #0799e8;
            color: #fff;
            padding: 12px 20px;
            font-size: 12px;
            font-weight: 700;
            border-radius: 25px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: .3s;
        }

        .rc-btn-primary:hover {
            background: #fff;
            color: var(--rc-blue);
        }

        .rc-btn-outline {
            border: 1px solid #fff;
            color: #fff;
            padding: 12px 20px;
            font-size: 12px;
            font-weight: 700;
            border-radius: 25px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-left: 8px;
            transition: .3s;
        }

        .rc-btn-outline:hover {
            background: #fff;
            color: var(--rc-blue);
        }

        .rc-hero .carousel-control-prev,
        .rc-hero .carousel-control-next {
            width: 50px;
            top: 50%;
            transform: translateY(-50%);
        }

        .rc-hero .carousel-control-prev {
            left: 10px;
        }

        .rc-hero .carousel-control-next {
            right: 10px;
        }


        /* =========================================
           STATISTICS
        ========================================= */

        .rc-stats-wrapper {
            position: relative;
            margin-top: -28px;
            z-index: 10;
        }

        .rc-stats {
            background: #fff;
            box-shadow: 0 10px 35px rgba(0,0,0,.12);
            border-radius: 3px;
            overflow: hidden;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .rc-stat {
            min-height: 105px;
            padding: 18px 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            border-right: 1px solid #e6edf2;
        }

        .rc-stat:last-child {
            border-right: 0;
        }

        .rc-stat-icon {
            color: var(--rc-blue);
            font-size: 29px;
        }

        .rc-stat-number {
            font-size: 27px;
            font-weight: 800;
            color: #172531;
            line-height: 1;
        }

        .rc-stat-label {
            font-size: 15px;
            color: #71808d;
            margin-top: 5px;
            line-height: 1.3;
        }


        /* =========================================
           ABOUT / INTRO
        ========================================= */

        .rc-intro {
            position: relative;
            overflow: hidden;
        }

        .rc-intro::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            background: radial-gradient(
                circle,
                rgba(8,104,184,.08),
                transparent 70%
            );
            left: -200px;
            top: -100px;
        }

        .rc-intro-image {
            position: relative;
            height: 430px;
            overflow: visible;
        }

        .rc-intro-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .7s ease;
        }

        .rc-intro-image:hover img {
            transform: scale(1.06);
        }

        /* .rc-intro-image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                180deg,
                transparent 50%,
                rgba(0,38,70,.4)
            );
        } */

        .rc-benefit-box {
                position: absolute;
                right: -102px;
                bottom: -45px;
                width: 248px;
                background: var(--rc-blue);
                color: #fff;
                padding: 22px;
                z-index: 2;
                box-shadow: 0 15px 35px rgba(0, 0, 0, .2);
        }

        .rc-benefit {
            display: flex;
            align-items: center;
            gap: 13px;
            margin-bottom: 17px;
            font-size: 11px;
            font-weight: 600;
        }

        .rc-benefit img{
            filter: brightness(0) invert(1);
            width: 25px;
            height: 25px;
        }

        .rc-benefit:last-child {
            margin-bottom: 0;
        }

        .rc-benefit i {
            font-size: 19px;
        }


        /* =========================================
           EXPERTISE
        ========================================= */

        .rc-expertise-card {
            background: #fff;
            border: 1px solid #dce7ef;
            transition: .35s ease;
            overflow: hidden;
            height: 343px;
        }

        .rc-expertise-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 18px 35px rgba(0,65,110,.13);
        }

        .rc-expertise-image {
            height: 250px;
            overflow: hidden;
        }

        .rc-expertise-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .6s ease;
        }

        .rc-expertise-card:hover .rc-expertise-image img {
            transform: scale(1.08);
        }

        .rc-expertise-bottom {
            min-height: 70px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
        }

        .rc-expertise-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--rc-blue);
            background: #eaf6ff;
            border-radius: 5px;
            font-size: 19px;
            flex-shrink: 0;
        }

        .rc-expertise-bottom h6 {
            font-size: 18px;
            margin: 0;
            font-weight: 700;
        }

        .rc-expertise-bottom p {
            margin: 3px 0 0;
            font-size: 14px;
            color: #89949d;
        }


        /* =========================================
           PROJECTS
        ========================================= */

        .rc-project-card {
            background: #fff;
            border: 1px solid #dde7ee;
            overflow: hidden;
            height: 100%;
            transition: .4s ease;
        }

        .rc-project-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 20px 40px rgba(0,48,85,.13);
        }

        .rc-project-image {
            height: 210px;
            overflow: hidden;
            position: relative;
        }

        .rc-project-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .7s ease;
        }

        .rc-project-card:hover .rc-project-image img {
            transform: scale(1.1);
        }

        .rc-project-status {
            position: absolute;
            top: 12px;
            left: 12px;
            background: var(--rc-blue);
            color: #fff;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 6px 10px;
            border-radius: 2px;
        }

        .rc-project-content {
            padding: 15px;
        }

        .rc-project-content h5 {
            font-size: 19px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .rc-project-location {
            font-size: 15px;
            color: #82909b;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .rc-project-link {
            font-size: 14px;
            color: var(--rc-blue);
            font-weight: 700;
            margin-top: 12px;
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }


        /* =========================================
           LANDMARK PROJECTS
        ========================================= */

        .rc-landmark-section {
            background: #edf6fb;
        }

        .rc-landmark-wrapper {
            position: relative;
            overflow: hidden;
        }

        .rc-landmark-track {
            display: flex;
            gap: 18px;
            transition: transform .55s ease;
        }

        .rc-landmark-card {
            min-width: calc(33.333% - 12px);
            height: 320px;
            position: relative;
            overflow: hidden;
            border-radius: 2px;
        }

        .rc-landmark-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: .7s ease;
        }

        .rc-landmark-card:hover img {
    transform: scale(1.04);
}
.rc-landmark-card::after {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 58%;

    background: linear-gradient(
        to bottom,
        rgba(0, 32, 59, 0) 0%,
        rgba(0, 32, 59, 0.08) 18%,
        rgba(0, 32, 59, 0.40) 45%,
        rgba(0, 32, 59, 0.78) 72%,
        rgba(0, 32, 59, 0.94) 100%
    );

    z-index: 1;

    pointer-events: none;

    transition: opacity .4s ease;
}

        .rc-landmark-content {
            position: absolute;
            z-index: 2;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 24px;
            color: #fff;
        }

        .rc-landmark-content small {
            font-size: 10px;
            opacity: .8;
        }

        .rc-landmark-content h4 {
            font-size: 19px;
            margin: 5px 0;
            font-weight: 700;
        }

        .rc-landmark-content p {
            margin: 0;
            font-size: 10px;
            opacity: .8;
        }

        .rc-landmark-controls {
            display: flex;
            gap: 7px;
        }

        .rc-landmark-control {
            width: 38px;
            height: 38px;
            border: 1px solid #b8cbd9;
            background: #fff;
            color: var(--rc-blue);
            border-radius: 50%;
            transition: .3s;
        }

        .rc-landmark-control:hover {
            background: var(--rc-blue);
            color: #fff;
        }


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

        .rc-cta {
            min-height: 290px;
            background:
                linear-gradient(90deg, rgba(2, 31, 52, .96), rgb(2 31 52 / 9%), rgb(2 31 52 / 0%)),
                url("../img/about-banner2.jpg") center/cover;
            background-position: 76% 43%;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .rc-cta::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(
                90deg,
                transparent,
                rgba(0,156,240,.08)
            );
            animation: ctaGlow 4s ease-in-out infinite alternate;
        }

        @keyframes ctaGlow {

            from {
                opacity: .3;
            }

            to {
                opacity: 1;
            }
        }

        .rc-cta-content {
            position: relative;
            z-index: 2;
            color: #fff;
        }

        .rc-cta-content small {
            text-transform: uppercase;
            font-size: 10px;
            letter-spacing: 2px;
        }

        .rc-cta-content h2 {
            font-size: clamp(30px, 4vw, 52px);
            font-weight: 700;
            margin: 8px 0 12px;
        }

        .rc-cta-content h2 span {
            color: #0799e8;
        }

        .rc-cta-content p {
            font-size: 16px;
            max-width: 600px;
            opacity: .85;
        }


        /* =========================================
           WHY CHOOSE
        ========================================= */

        .rc-why-item {
            text-align: center;
            padding: 20px 12px;
            border-right: 1px solid #e0e7ec;
            transition: .3s;
        }

        .rc-why-item:last-child {
            border-right: 0;
        }

        .rc-why-item:hover {
            transform: translateY(-5px);
        }

        .rc-why-icon {
            width: 50px;
            height: 50px;
            border: 1px solid #d5e4ed;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            color: var(--rc-blue);
            font-size: 30px;
            border-radius: 6px;
        }

        .rc-why-item h6 {
            font-size: 18px;
            margin: 12px 0 5px;
            font-weight: 700;
        }

        .rc-why-item p {
            font-size: 15px;
            color: #87939c;
            margin: 0;
        }


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

        .rc-client-marquee {
            overflow: hidden;
            position: relative;
        }

        .rc-client-track {
            display: flex;
            align-items: center;
            width: max-content;
            animation: clientMove 25s linear infinite;
        }

        .rc-client {
            width: 170px;
            height: 70px;
            margin-right: 30px;
            /*border: 1px solid #e4e9ed;*/
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 15px;
        }
        
        .rc-testimonial-card .rc-client {
    width: auto;
    height: auto;
    margin-right: 110px;
    border: none;
    background: transparent;
    padding: 0;
}

        .rc-client img {
            max-width: 120px;
            max-height: 51px;
            object-fit: contain;
            /*opacity: .7;*/
            transition: .3s;
        }

        .rc-client:hover img {
            /*filter: grayscale(0);*/
            opacity: 1;
        }

        @keyframes clientMove {

            from {
                transform: translateX(0);
            }

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


        /* =========================================
           FOOTER
        ========================================= */

        .rc-footer {
            background: #052e53;
                padding-left: 51px;
                padding-right: 51px;

            color: #fff;
            padding-top: 55px;
        }

        .rc-footer-logo {
            filter: brightness(0) invert(1);
            width: 300px;
            /*background: #fff;*/
            padding: 8px;
            margin-bottom: 18px;
        }

        .rc-footer p {
            font-size: 16px;
            color: rgba(255,255,255,.65);
            line-height: 1.7;
        }

        .rc-footer h6 {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 18px;
        }

        .rc-footer ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .rc-footer li {
            margin-bottom: 16px;
        }

        .rc-footer li a {
            color: rgba(255,255,255,.65);
            font-size: 17px;
            transition: .3s;
        }

        .rc-footer li a:hover {
            color: #fff;
            padding-left: 4px;
        }

        .rc-footer-contact {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }

        .rc-footer-contact i {
            color: #18a4f1;
        }

        .rc-footer-bottom {
            border-top: 1px solid rgba(255,255,255,.12);
            margin-top: 35px;
            padding: 17px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }

        .rc-footer-bottom p {
            margin: 0;
            font-size: 14px;
        }


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

        .rc-reveal {
            opacity: 0;
            transform: translateY(40px);
            transition:
                opacity .8s ease,
                transform .8s ease;
        }

        .rc-reveal.show {
            opacity: 1;
            transform: translateY(0);
        }

        .rc-reveal-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: .8s ease;
        }

        .rc-reveal-left.show {
            opacity: 1;
            transform: translateX(0);
        }

        .rc-reveal-right {
            opacity: 0;
            transform: translateX(50px);
            transition: .8s ease;
        }

        .rc-reveal-right.show {
            opacity: 1;
            transform: translateX(0);
        }


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

        @media(max-width: 991px) {

            .rc-navbar {
                padding: 10px 15px;
            }

            .rc-menu {
                display: none;
            }

            .rc-social {
                display: none;
            }

            .rc-hero {
                height: 600px;
            }

            .rc-hero-content {
                left: 6%;
                right: 6%;
            }

            .rc-stats {
                grid-template-columns: repeat(3, 1fr);
            }

            .rc-stat:nth-child(3) {
                border-right: 0;
            }

            .rc-stat:nth-child(4),
            .rc-stat:nth-child(5) {
                border-top: 1px solid #e6edf2;
            }

            .rc-landmark-card {
                min-width: calc(50% - 9px);
            }

            .rc-why-item:nth-child(3) {
                border-right: 0;
            }
        }


        @media(max-width: 767px) {

            .rc-section {
                padding: 55px 0;
            }

            .rc-section-heading-row {
                align-items: flex-start;
            }

            .rc-section-title {
                font-size: 27px;
            }

            .rc-logo {
                position: relative;
    left: 0px;
        width: 84px;
        height: 55px;
        padding: 6px 7px;
    }

            .rc-hero {
                height: 460px;
            }

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

            .rc-hero p {
                font-size: 13px;
            }

            .rc-btn-primary,
            .rc-btn-outline {
                padding: 10px 15px;
                font-size: 10px;
            }

            .rc-stats {
                grid-template-columns: repeat(2, 1fr);
            }

            .rc-stat {
                min-height: 90px;
            }

            .rc-stat:nth-child(2) {
                border-right: 0;
            }

            .rc-stat:nth-child(3) {
                border-right: 1px solid #e6edf2;
            }

            .rc-stat:nth-child(5) {
                grid-column: 1 / -1;
            }

            .rc-benefit-box {
                right: 10px;
                width: 220px;
                bottom: 15px;
                padding: 16px;
            }

            .rc-intro-image {
                height: 330px;
            }

            .rc-landmark-card {
                min-width: 85%;
                height: 300px;
            }

            .rc-why-item {
                border-right: 0;
                border-bottom: 1px solid #e0e7ec;
            }

            .rc-why-item:last-child {
                border-bottom: 0;
            }

            .rc-footer-bottom {
                flex-direction: column;
                text-align: center;
            }
        }

        

/* =========================================================
   LANDMARK PROJECTS
========================================================= */

.rc-landmark-section {
    position: relative;
    padding: 90px 0 100px;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   CAROUSEL WRAPPER
========================================================= */

.rc-landmark-carousel {
    position: relative;

    height: 520px;

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

    overflow: hidden;
}


/* =========================================================
   BACKGROUND LINE
========================================================= */






/* =========================================================
   LANDMARK CARD
========================================================= */

.rc-landmark-card {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 350px;
    height: 430px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid #dce5ec;

    text-decoration: none;

    overflow: hidden;

    transform:
        translate(-50%, -50%)
        scale(.72);

    opacity: 0;

    pointer-events: none;

    z-index: 1;

    box-shadow:
        0 12px 35px rgba(8, 45, 80, .10);

    transition:
        transform .75s cubic-bezier(.22, .61, .36, 1),
        opacity .65s ease,
        filter .65s ease,
        box-shadow .5s ease;
}


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

.rc-landmark-card img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    background: #f5f9fc;
}


/* =========================================================
   DARK IMAGE OVERLAY
========================================================= */

.rc-landmark-card::after {

    content: "";

    position: absolute;

    left: 8px;
    right: 8px;
    bottom: 8px;

    height: 55%;

    background:
        linear-gradient(
            to top,
            rgba(5, 28, 48, .92),
            rgba(5, 28, 48, .55),
            transparent
        );

    pointer-events: none;

    opacity: .9;
}


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

.rc-landmark-number {

    position: absolute;

    top: 20px;
    right: 20px;

    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

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

    color: #0868b8;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    z-index: 5;

    box-shadow:
        0 5px 18px rgba(0,0,0,.12);
}


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

.rc-landmark-content {

    position: absolute;

    left: 28px;
    right: 28px;
    bottom: 25px;

    z-index: 5;

    color: #ffffff;
}

.rc-landmark-content small {

    display: block;

    margin-bottom: 7px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #69b7eb;
}

.rc-landmark-content h4 {

    margin: 0 0 7px;

    font-size: 30px;

    line-height: 1.15;

    font-weight: 700;

    color: #ffffff;
}

.rc-landmark-content p {

    margin: 0;

    font-size: 11px;

    line-height: 1.5;

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


/* =========================================================
   CENTER CARD
========================================================= */

.rc-landmark-card.rc-landmark-active {

    z-index: 10;

    opacity: 1;

    pointer-events: auto;

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

    box-shadow:
        0 28px 60px rgba(8, 45, 80, .20);
}


/* =========================================================
   LEFT CARD
========================================================= */

.rc-landmark-card.rc-landmark-left {

    z-index: 5;

    opacity: .65;

    pointer-events: auto;

    transform:
        translate(calc(-50% - 350px), -50%)
        scale(.72);

    filter: saturate(.75);
}


/* =========================================================
   RIGHT CARD
========================================================= */

.rc-landmark-card.rc-landmark-right {

    z-index: 5;

    opacity: .65;

    pointer-events: auto;

    transform:
        translate(calc(-50% + 350px), -50%)
        scale(.72);

    filter: saturate(.75);
}


/* =========================================================
   FAR LEFT
========================================================= */

.rc-landmark-card.rc-landmark-far-left {

    z-index: 2;

    opacity: .20;

    transform:
        translate(calc(-50% - 600px), -50%)
        scale(.55);

    filter: saturate(.4);
}


/* =========================================================
   FAR RIGHT
========================================================= */

.rc-landmark-card.rc-landmark-far-right {

    z-index: 2;

    opacity: .20;

    transform:
        translate(calc(-50% + 600px), -50%)
        scale(.55);

    filter: saturate(.4);
}


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

.rc-landmark-card.rc-landmark-active:hover {

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

    box-shadow:
        0 35px 70px rgba(8, 45, 80, .25);
}

.rc-landmark-card.rc-landmark-left:hover,
.rc-landmark-card.rc-landmark-right:hover {

    opacity: .9;

    filter: saturate(1);
}


/* =========================================================
   BOTTOM INFO
========================================================= */

.rc-landmark-bottom {

    display: flex;

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

    padding-top: 25px;

    border-top: 1px solid #dce5ec;
}

.rc-landmark-count {

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #0868b8;
}

.rc-landmark-note {

    font-size: 12px;

    color: #6b747d;
}

.rc-landmark-note i {

    margin-right: 7px;

    color: #0868b8;
}


/* =========================================================
   CONTROLS
========================================================= */

.rc-landmark-controls {

    display: flex;

    gap: 8px;
}

.rc-landmark-control {

    width: 42px;
    height: 42px;

    border: 1px solid #dce5ec;

    background: #ffffff;

    color: #082d50;

    display: flex;

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

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.rc-landmark-control:hover {

    background: #0868b8;

    border-color: #0868b8;

    color: #ffffff;

    transform: translateY(-2px);
}


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

@media (max-width: 991px) {

    .rc-landmark-carousel {
        height: 500px;
    }

    .rc-landmark-card {

        width: 300px;
        height: 380px;
    }

    .rc-landmark-card.rc-landmark-left {

        transform:
            translate(calc(-50% - 220px), -50%)
            scale(.68);
    }

    .rc-landmark-card.rc-landmark-right {

        transform:
            translate(calc(-50% + 220px), -50%)
            scale(.68);
    }

    .rc-landmark-card.rc-landmark-far-left,
    .rc-landmark-card.rc-landmark-far-right {

        opacity: 0;
    }
}


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

@media (max-width: 767px) {

    .rc-landmark-section {

        padding: 70px 0 75px;
    }

    .rc-landmark-carousel {

        height: 470px;
    }

    .rc-landmark-card {

        width: 245px;
        height: 330px;
    }

    .rc-landmark-card.rc-landmark-left {

        transform:
            translate(calc(-50% - 120px), -50%)
            scale(.62);

        opacity: .3;
    }

    .rc-landmark-card.rc-landmark-right {

        transform:
            translate(calc(-50% + 120px), -50%)
            scale(.62);

        opacity: .3;
    }

    .rc-landmark-content {

        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .rc-landmark-content h4 {

        font-size: 19px;
    }

    .rc-landmark-controls {

        gap: 5px;
    }

    .rc-landmark-control {

        width: 38px;
        height: 38px;
    }

    .rc-landmark-bottom {

        display: block;
    }

    .rc-landmark-note {

        display: block;

        margin-top: 10px;
    }
}

   /* ==========================================
       FAQ + CONTACT SECTION
    ========================================== */

    .rc-faq-contact {
        position: relative;
        padding: 90px 0;
        background: #fff;
        overflow: hidden;
    }


    /* subtle background shape */

    .rc-faq-contact::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(0, 145, 225, 0.035);
        left: -220px;
        top: 100px;
        pointer-events: none;
    }


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

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

        padding: 8px 18px;

        background: #087fc3;
        color: #fff;

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

        letter-spacing: .8px;
        text-transform: uppercase;

        margin-bottom: 17px;

        position: relative;
    }

    .rc-section-label::after {
        content: "";
        width: 25px;
        height: 1px;
        background: rgba(255,255,255,.7);
    }


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

    .rc-section-heading {
        margin-bottom: 30px;
    }

    .rc-section-heading h2 {
        margin: 0 0 12px;

        font-size: 38px;
        line-height: 1.15;

        font-weight: 700;

        color: #132b40;
    }

    .rc-section-heading h2 span {
        color: #0789d1;
    }

    .rc-section-heading p {
        max-width: 600px;

        margin: 0;

        color: #707b84;

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


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

    .rc-faq {
        border: 0;
    }

    .rc-faq .accordion-item {
        border: 0;
        border-bottom: 1px solid #e5ebef;

        background: transparent;

        border-radius: 0 !important;
    }


    .rc-faq .accordion-header {
        margin: 0;
    }


    .rc-faq .accordion-button {
        position: relative;

        padding: 20px 50px 20px 0;

        background: transparent;

        color: #17354b;

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

        box-shadow: none;

        border-radius: 0;

        line-height: 1.5;
    }


    .rc-faq .accordion-button:not(.collapsed) {
        color: #0789d1;
        background: transparent;
        box-shadow: none;
    }


    .rc-faq .accordion-button::after {
        display: none;
    }


    /* plus icon */

    .rc-faq-icon {
        position: absolute;

        right: 5px;
        top: 50%;

        width: 30px;
        height: 30px;

        border: 1px solid #d8e2e8;
        border-radius: 50%;

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

        transform: translateY(-50%);

        color: #0789d1;

        transition: .3s ease;
    }


    .rc-faq .accordion-button:not(.collapsed)
    .rc-faq-icon {
        background: #0789d1;
        border-color: #0789d1;
        color: #fff;
        transform: translateY(-50%) rotate(45deg);
    }


    .rc-faq-icon i {
        font-size: 13px;
    }


    .rc-faq .accordion-body {
        padding: 0 50px 20px 0;

        color: #707b84;

        font-size: 16px;
        line-height: 1.8;
    }


    /* ==========================================
       CONTACT CARD
    ========================================== */

    .rc-contact-card {
        position: relative;

        background: #f4f9fc;

        border: 1px solid #e1edf3;

        padding: 35px;

        box-shadow: 0 18px 45px rgba(8, 55, 82, .08);

        overflow: hidden;
    }


    /* blue top line */

    .rc-contact-card::before {
        content: "";

        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 4px;

        background: #0789d1;
    }


    .rc-contact-top {
        margin-bottom: 25px;
    }


    .rc-contact-label {
        color: #0789d1;

        font-size: 9px;
        font-weight: 800;

        letter-spacing: 1px;

        margin-bottom: 10px;
    }


    .rc-contact-top h3 {
        color: #15364d;

        font-size: 32px;

        line-height: 1.2;

        font-weight: 700;

        margin: 0 0 12px;
    }


    .rc-contact-top h3 span {
        display: block;
        color: #0789d1;
    }


    .rc-contact-top p {
        margin: 0;

        color: #71808a;

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


    /* ==========================================
       INPUTS
    ========================================== */

    .rc-input {
        position: relative;
    }


    .rc-input > i {
        position: absolute;

        left: 15px;
        top: 50%;

        transform: translateY(-50%);

        color: #0789d1;

        font-size: 14px;

        z-index: 2;
    }


    .rc-input .form-control,
    .rc-input .form-select {
        height: 48px;

        border: 1px solid #dce7ed;

        border-radius: 3px;

        background: #fff;

        padding: 0 15px 0 43px;

        color: #243b4d;

        font-size: 17px;

        box-shadow: none;

        transition: .25s ease;
    }


    .rc-input .form-control::placeholder {
        color: #9aa7af;
    }


    .rc-input .form-control:focus,
    .rc-input .form-select:focus {
        border-color: #0789d1;

        box-shadow: 0 0 0 3px rgba(7, 137, 209, .08);
    }


    .rc-input .form-select {
        cursor: pointer;
    }


    /* textarea */

    .rc-input.rc-textarea > i {
        top: 19px;
        transform: none;
    }


    .rc-textarea .form-control {
        height: auto;

        min-height: 105px;

        padding-top: 14px;
        padding-right: 15px;
    }


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

    .rc-submit-btn {
        width: 100%;

        height: 50px;

        border: 0;

        background: #0789d1;

        color: #fff;

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

        letter-spacing: .2px;

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

        padding: 0 8px 0 20px;

        transition: .3s ease;
    }


    .rc-submit-btn span {
        width: 36px;
        height: 36px;

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

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

        border-radius: 2px;

        transition: .3s ease;
    }


    .rc-submit-btn:hover {
        background: #056fae;
        transform: translateY(-2px);
    }


    .rc-submit-btn:hover span {
        background: #fff;
        color: #0789d1;
    }


    /* ==========================================
       CONTACT INFO
    ========================================== */

    .rc-contact-bottom {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 15px;

        margin-top: 25px;

        padding-top: 22px;

        border-top: 1px solid #dce7ed;
    }


    .rc-contact-info {
        display: flex;
        align-items: center;

        gap: 10px;
    }


    .rc-info-icon {
        width: 34px;
        height: 34px;

        flex-shrink: 0;

        background: #e3f3fb;

        color: #0789d1;

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

        border-radius: 50%;

        font-size: 12px;
    }


    .rc-contact-info small {
        display: block;

        color: #8997a0;

        font-size: 12px;

        font-weight: 700;

        letter-spacing: .7px;

        margin-bottom: 2px;
    }


    .rc-contact-info strong {
        display: block;

        color: #23445b;

        font-size: 16px;

        font-weight: 600;

        word-break: break-word;
    }


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

    @media (max-width: 991px) {

        .rc-faq-contact {
            padding: 70px 0;
        }

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

        .rc-contact-card {
            padding: 30px;
        }

    }


    @media (max-width: 575px) {

        .rc-faq-contact {
            padding: 55px 0;
        }

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

        .rc-contact-card {
            padding: 23px;
        }

        .rc-contact-top h3 {
            font-size: 24px;
        }

        .rc-contact-bottom {
            grid-template-columns: 1fr;
        }

        .rc-faq .accordion-button {
            font-size: 13px;
            padding-right: 45px;
        }

        .rc-faq .accordion-body {
            font-size: 12px;
        }

    }
    
    
/* =========================================================
   TESTIMONIAL SECTION
========================================================= */

.rc-testimonial-section {
    position: relative;
    padding: 85px 0;
    background: #f5f9fc;
    overflow: hidden;
}


/* subtle background element */

.rc-testimonial-section::before {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    border: 1px solid rgba(7, 137, 209, .06);
    border-radius: 50%;

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

    pointer-events: none;
}


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

.rc-testimonial-heading h2 {
    margin: 0 0 12px;

    color: #15364d;

    font-size: 38px;
    line-height: 1.15;

    font-weight: 700;
}

.rc-testimonial-heading h2 span {
    color: #0789d1;
}

.rc-testimonial-heading p {
    max-width: 650px;

    margin: 0;

    color: #71808a;

    font-size: 16px;
    line-height: 1.8;
}


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

.rc-testimonial-nav {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.rc-testimonial-nav button {
    width: 42px;
    height: 42px;

    border: 1px solid #d8e4eb;

    background: #fff;

    color: #0789d1;

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

    border-radius: 50%;

    transition: .3s ease;

    cursor: pointer;
}

.rc-testimonial-nav button:hover {
    background: #0789d1;
    border-color: #0789d1;
    color: #fff;
}


/* ==========================================
   CAROUSEL
========================================== */

.rc-testimonial-carousel {
    margin-top: 25px;
}

.rc-testimonial-carousel .owl-stage {
    display: flex;
}

.rc-testimonial-carousel .owl-item {
    display: flex;
}


/* ==========================================
   TESTIMONIAL CARD
========================================== */

.rc-testimonial-card {
    position: relative;
    display: flex;
    flex-direction: column;

    width: 100%;

    min-height: 340px;

    padding: 32px;

    background: #fff;

    border: 1px solid #e2ebf0;

    box-shadow: 0 12px 35px rgba(8, 55, 82, .06);

    transition: .35s ease;
}

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

    box-shadow: 0 18px 40px rgba(8, 55, 82, .10);
}


/* blue top line */

.rc-testimonial-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 55px;
    height: 3px;

    background: #0789d1;
}


/* ==========================================
   QUOTE
========================================== */

.rc-quote {
    position: absolute;

    top: 22px;
    right: 28px;

    width: 40px;
    height: 40px;

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

    background: #eef8fd;

    color: #0789d1;

    border-radius: 50%;
}

.rc-quote i {
    font-size: 22px;
}


/* ==========================================
   STARS
========================================== */

.rc-stars {
    margin-bottom: 18px;

    color: #f2ae32;

    font-size: 11px;

    letter-spacing: 2px;
}


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

.rc-testimonial-text {
    margin: 0;

    color: #586b78;

    font-size: 13px;

    line-height: 1.9;

    min-height: 100px;

    padding-right: 15px;
}


/* ==========================================
   CLIENT
========================================== */

.rc-client {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: auto;

    padding-top: 18px;

    border-top: 1px solid #edf1f3;
}


.rc-client-avatar {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    border-radius: 50%;

    overflow: hidden;

    background: #eef6fa;
    border: none !important;

}

.rc-client-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


.rc-client h5 {
    margin: 0 0 3px;

    color: #17364b;

    font-size: 16px;

    font-weight: 700;
}


.rc-client span {
    color: #8a979f;

    font-size: 13px;
}


/* ==========================================
   OWL DOTS
========================================== */

.rc-testimonial-carousel .owl-dots {
    margin-top: 30px !important;
}

.rc-testimonial-carousel .owl-dot span {
    width: 7px !important;
    height: 7px !important;

    margin: 4px !important;

    background: #cbd9e1 !important;

    transition: .3s ease;
}

.rc-testimonial-carousel .owl-dot.active span {
    width: 22px !important;

    background: #0789d1 !important;
}


/* hide default owl nav */

.rc-testimonial-carousel .owl-nav {
    display: none;
}


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

@media (max-width: 991px) {

    .rc-testimonial-section {
        padding: 70px 0;
    }

    .rc-testimonial-heading h2 {
        font-size: 34px;
    }

    .rc-testimonial-nav {
        justify-content: flex-start;
        margin-top: 25px;
    }

}


@media (max-width: 575px) {

    .rc-testimonial-section {
        padding: 55px 0;
    }

    .rc-testimonial-heading h2 {
        font-size: 29px;
    }

    .rc-testimonial-card {
        padding: 25px;
    }

    .rc-testimonial-text {
        font-size: 12px;
    }

}



#rajhans-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ffffff;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease,
              visibility 0.7s ease;
}

#rajhans-preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rajhans-loader-content {
  width: min(82%, 620px);
  text-align: center;
  position: relative;
  z-index: 2;
  animation: rajhansReveal 1s ease both;
}

.rajhans-loader-logo {
  display: block;
  width: min(100%, 560px);
  height: auto;
  margin: 0 auto 38px;
  object-fit: contain;
}

.rajhans-loader-line {
  height: 5px;
  width: min(100%, 360px);
  background: #e7e7e7;
  border-radius: 20px;
  margin: 0 auto;
  overflow: hidden;
}

.rajhans-loader-line span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: #08a9df;
  box-shadow: 0 0 12px rgba(8, 169, 223, .3);
  animation: rajhansProgress 1.5s ease-in-out infinite;
}

.rajhans-loader-tagline {
  margin-top: 22px;
  color: #333333;
  font-size: 12px;
  letter-spacing: 7px;
  font-weight: 500;
}

.rajhans-loader-bottom {
  position: absolute;
  bottom: -100px;
  left: 50%;
  width: 600px;
  height: 160px;
  border: 1px solid rgba(8, 169, 223, .18);
  transform: translateX(-50%) rotate(-8deg);
  opacity: .6;
  pointer-events: none;
}

@keyframes rajhansProgress {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(270%); }
}

@keyframes rajhansReveal {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 576px) {
  .rajhans-loader-content {
    width: 88%;
  }

  .rajhans-loader-logo {
    margin-bottom: 28px;
  }

  .rajhans-loader-tagline {
    font-size: 9px;
    letter-spacing: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rajhans-loader-content {
    animation: none;
  }

  .rajhans-loader-line span {
    animation-duration: 3s;
  }
}



/* =====================================================
   RAJHANS CONSTRUCTION - MOBILE HEADER & OFFCANVAS
   Keep existing desktop navbar CSS unchanged
===================================================== */


/* =====================================================
   1. MOBILE HEADER
===================================================== */

@media (max-width: 991px) {

    .rc-navbar {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 8px 14px;
        background: #ffffff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        z-index: 1050;
        transition: background 0.3s ease;
    }

    .rc-navbar.scrolled {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #ffffff !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    }

    .rc-navbar .rc-nav-inner {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    /* Main navbar logo - no border or shadow */

    .rc-navbar .rc-logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 1;
        min-width: 0;
        max-width: 200px;
        margin: 0;
        padding: 0 !important;
        border: none !important;
        outline: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .rc-navbar .rc-logo img {
        display: block;
        width: auto;
        max-width: 100%;
        max-height: 48px;
        height: auto;
        padding: 0 !important;
        margin: 0;
        border: none !important;
        outline: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        object-fit: contain;
        object-position: left center;
    }

    /* Hide desktop navigation and social icons */

    .rc-navbar .rc-menu,
    .rc-navbar > .rc-nav-inner > .rc-social {
        display: none !important;
    }

    /* Hamburger button */

    .rc-navbar .rc-mobile-toggle {
        display: flex;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        padding: 0;
        margin: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        border: 1px solid #eeeeee !important;
        border-radius: 10px;
        background: #ffffff !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
        cursor: pointer;
        transition: 0.3s ease;
    }

    .rc-navbar .rc-mobile-toggle span {
        display: block;
        width: 15px;
        height: 1.5px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 2px;
        background: #183b62 !important;
        transition: 0.3s ease;
    }

    .rc-navbar .rc-mobile-toggle:hover {
        background: #f7f9fb !important;
    }
}


/* =====================================================
   2. OFFCANVAS PANEL
===================================================== */

#rcMobileMenu.rc-offcanvas {
    --bs-offcanvas-width: 360px;

    width: min(360px, 88vw);
    max-width: 88vw;
    height: 100%;
    background: #ffffff;
    border: none !important;
    box-shadow: -10px 0 35px rgba(0, 25, 50, 0.12);
    overflow-x: hidden;
}


/* =====================================================
   3. OFFCANVAS HEADER
===================================================== */

#rcMobileMenu .rc-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 72px;
    padding: 14px 20px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #edf0f3;
}

/* Offcanvas logo - separate from main navbar logo */

#rcMobileMenu .rc-offcanvas-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    min-width: 0;
    max-width: 210px;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#rcMobileMenu .rc-offcanvas-logo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 48px;
    height: auto;
    margin: 0;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    object-fit: contain;
    object-position: left center;
}

/* Offcanvas close button */

#rcMobileMenu .rc-close-btn {
    display: flex;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #e7edf2;
    border-radius: 10px;
    background: #ffffff;
    color: #183b62;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s ease;
}

#rcMobileMenu .rc-close-btn:hover {
    background: #183b62;
    color: #ffffff;
    border-color: #183b62;
}


/* =====================================================
   4. OFFCANVAS BODY
===================================================== */

#rcMobileMenu .rc-offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 28px 20px 22px !important;
    background: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
}

#rcMobileMenu .rc-menu-label {
    display: block;
    margin: 0 0 18px;
    color: #0873bd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
}


/* =====================================================
   5. OFFCANVAS NAVIGATION LINKS
===================================================== */

#rcMobileMenu .rc-mobile-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#rcMobileMenu .rc-mobile-link {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 17px 0;
    margin: 0;
    border: none;
    border-bottom: 1px solid #e8edf2;
    border-radius: 0;
    background: transparent;
    color: #10375e;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.25s ease;
}

#rcMobileMenu .rc-mobile-link > span:first-child {
    color: #91a1b0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

#rcMobileMenu .rc-mobile-link > span:nth-child(2) {
    min-width: 0;
    transition: transform 0.25s ease;
}

#rcMobileMenu .rc-mobile-link > i {
    color: #93a5b5;
    font-size: 14px;
    text-align: right;
    transition: transform 0.25s ease, color 0.25s ease;
}

#rcMobileMenu .rc-mobile-link:hover,
#rcMobileMenu .rc-mobile-link:focus {
    color: #0873bd;
}

#rcMobileMenu .rc-mobile-link:hover > span:nth-child(2) {
    transform: translateX(4px);
}

#rcMobileMenu .rc-mobile-link:hover > i {
    color: #0873bd;
    transform: translate(2px, -2px);
}


/* =====================================================
   6. CONTACT CTA BUTTON
===================================================== */

#rcMobileMenu .rc-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin-top: 26px;
    padding: 17px 16px;
    background: #0b2f50;
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: background 0.3s ease;
}

#rcMobileMenu .rc-mobile-cta i {
    font-size: 18px;
    flex-shrink: 0;
}

#rcMobileMenu .rc-mobile-cta:hover {
    background: #0873bd;
    color: #ffffff;
}


/* =====================================================
   7. OFFCANVAS SOCIAL ICONS
===================================================== */

#rcMobileMenu .rc-mobile-social {
    display: block;
    width: 100%;
    margin-top: 28px;
}

#rcMobileMenu .rc-mobile-social > span {
    display: block;
    margin-bottom: 14px;
    color: #8798a8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Reuse your existing social icon colors */

#rcMobileMenu .rc-mobile-social .rc-social {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#rcMobileMenu .rc-mobile-social .rc-social a {
    flex-shrink: 0;
}

#rcMobileMenu .rc-menu-footer {
    margin: auto 0 0;
    padding-top: 28px;
    color: #8998a6;
    font-size: 11px;
    line-height: 1.7;
}


/* =====================================================
   8. DARK BACKDROP BEHIND OFFCANVAS
===================================================== */

.offcanvas-backdrop.show {
    opacity: 0.55;
}


/* =====================================================
   9. SMALL MOBILE SCREENS
===================================================== */

@media (max-width: 420px) {

    .rc-navbar {
        padding: 7px 12px;
    }

    .rc-navbar .rc-logo {
        max-width: 180px;
    }

    .rc-navbar .rc-logo img {
        max-height: 44px;
    }

    .rc-navbar .rc-mobile-toggle {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }

    #rcMobileMenu .rc-offcanvas-header {
        min-height: 65px;
        padding: 12px 16px !important;
    }

    #rcMobileMenu .rc-offcanvas-logo {
        max-width: 180px;
    }

    #rcMobileMenu .rc-offcanvas-logo img {
        max-height: 44px;
    }

    #rcMobileMenu .rc-offcanvas-body {
        padding: 24px 16px 20px !important;
    }

    #rcMobileMenu .rc-mobile-link {
        padding: 16px 0;
        font-size: 13px;
    }
}


/* =====================================================
   10. REDUCED MOTION ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .rc-navbar,
    .rc-navbar .rc-mobile-toggle,
    .rc-navbar .rc-mobile-toggle span,
    #rcMobileMenu .rc-mobile-link,
    #rcMobileMenu .rc-mobile-cta {
        transition: none !important;
    }
}


       
.wa-ultimate-button1 {
  position: fixed;
  bottom: 30px;
  left: 45px;
  z-index: 100;
  perspective: 1200px;
  animation: fadeInUp 1.2s ease-out;
}

.wa-entry {
  position: relative;
  width: 65px;
  height: 65px;
  background: radial-gradient(circle, #25d366 0%, #128c7e 100%);
  border-radius: 50%;
  color: white;
  font-size: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow:
    0 0 20px #25d366,
    0 0 60px rgba(37, 211, 102, 0.6),
    inset 0 0 15px #128c7e;
  transition: transform 0.3s ease;
  overflow: visible;
  animation: pulse 2.5s infinite ease-in-out;
}

.wa-entry:hover {
  transform: scale(1.08) rotateX(10deg);
}

.wa-glow {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  top: -20px;
  left: -20px;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.3), transparent);
  animation: glowPulse 3s ease-in-out infinite;
  filter: blur(12px);
  z-index: 0;
}

.wa-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgb(33 197 107);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring1 {
  width: 75px;
  height: 75px;
  animation: spin 8s linear infinite;
}

.ring2 {
  width: 120px;
  height: 120px;
  animation: spinReverse 12s linear infinite;
}

.wa-bubbles {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: white;
  opacity: 0.6;
  animation: bubbles 4s linear infinite;
  box-shadow:
    0 0 4px #fff,
    0 -10px 0 0 rgba(255,255,255,0.3),
    0 -20px 0 0 rgba(255,255,255,0.2),
    0 -30px 0 0 rgba(255,255,255,0.1);
}

.wa-tooltip {
  position: absolute;
  bottom: 100%;
  margin-bottom: 15px;
  padding: 6px 14px;
  font-size: 14px;
  color: #000;
  white-space: nowrap;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  opacity: 0;
  transform: scale(0.95);
  transition: 0.4s ease;
  text-shadow: 0 0 4px #25d366;
}

.wa-entry:hover .wa-tooltip {
  opacity: 1;
  transform: scale(1);
}
.wa-entry:hover i{
  color: #fff
}
.wa-tooltip span {
  display: inline-block;
  overflow: hidden;
  border-right: 2px solid #fff;
  white-space: nowrap;
  animation: typing 3s steps(25) 1s forwards, blink 0.8s step-end infinite;
  max-width: 0;
}

/* Animations */
@keyframes pulse {
  0%, 100% {
    box-shadow:
      0 0 20px #25d366,
      0 0 60px rgba(37, 211, 102, 0.5),
      inset 0 0 15px #128c7e;
  }
  50% {
    box-shadow:
      0 0 30px #25d366,
      0 0 80px rgba(37, 211, 102, 0.8),
      inset 0 0 25px #128c7e;
  }
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spinReverse {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes bubbles {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.6;
  }
  100% {
    transform: translateX(-50%) translateY(-50px);
    opacity: 0;
  }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

@keyframes typing {
  to { max-width: 220px; }
}

@keyframes blink {
  0%, 100% { border-color: transparent; }
  50% { border-color: white; }
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}


@media (max-width: 767px) {
    .call-to-action-6 {
        display: none !important;
    }
}


/* UP TURN CAREER SECTION */
.up-career {
    --up-orange: #ffb900;
    --up-dark: #252525;
    --up-red: #9b1823;
    --up-gray: #686868;
    --up-border: #e5e5e5;

    background: #fff;
    padding: 65px 0 85px;
    color: var(--up-dark);
    font-family: 'Poppins', sans-serif;
}

.up-career * {
    box-sizing: border-box;
}

.up-career .container {
    max-width: 1140px;
}

.up-career .career-intro-row {
    display: flex;
    align-items: center;
    gap: 45px;
    margin-bottom: 48px;
}

.up-career .career-intro {
    flex: 1;
    min-width: 0;
}

.up-career .career-kicker {
    display: inline-block;
    color: #0d6efd;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.up-career .career-intro h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 18px;
    color: #222;
}

.up-career .career-intro p {
    font-size: 14px;
    line-height: 1.9;
    color: var(--up-gray);
    margin-bottom: 13px;
}

.up-career .career-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 22px;
    margin-top: 23px;
}

.up-career .career-contact a {
    color: #292929;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.up-career .career-contact a:hover {
    color: #0d6efd;
}

.up-career .career-contact .contact-icon {
    color: #0d6efd;
    margin-right: 6px;
}

.up-career .career-quote {
    flex: 0 0 35%;
    padding: 35px 28px;
    background: #faf7f1;
    border-left: 4px solid #0d6efd;
}

.up-career .career-quote .quote-mark {
    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 1;
    color: #0d6efd;
}

.up-career .career-quote blockquote {
    font-family: 'Playfair Display', serif;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.5;
    margin: 10px 0 15px;
}

.up-career .career-quote span {
    font-size: 12px;
    font-weight: 600;
    color: var(--up-gray);
}

/* Job heading */
.up-career .job-section-heading {
    margin-bottom: 22px;
}

.up-career .job-section-heading h3 {
    font-family: 'Playfair Display', serif;
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 8px;
}

.up-career .job-section-heading p {
    color: var(--up-gray);
    font-size: 13px;
    margin: 0;
}

/* Job cards */
.up-career .job-accordion {
    --bs-accordion-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
}

.up-career .job-card {
    border: 1px solid var(--up-border);
    border-radius: 5px !important;
    overflow: hidden;
    margin-bottom: 15px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0,0,0,.035);
    transition: box-shadow .25s ease, border-color .25s ease;
}

.up-career .job-card:hover {
    border-color: #e8c978;
    box-shadow: 0 5px 16px rgba(0,0,0,.07);
}

.up-career .job-card .accordion-button {
    flex: 1;
    min-width: 0;
    padding: 19px 22px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #222;
    background: #fff;
    gap: 12px;
    box-shadow: none;
}

.up-career .job-card .accordion-button:not(.collapsed) {
    color: #222;
    background: #fff;
}

.up-career .job-card .accordion-button::after {
    display: none;
}

.up-career .job-title-wrap {
    flex: 1;
    min-width: 0;
}

.up-career .job-title {
    font-size: 20px;
    display: block;
    margin-bottom: 12px;
}

.up-career .job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.up-career .job-badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.up-career .job-experience {
    color: #a41b2b;
    background: #fce9eb;
}

.up-career .job-vacancy {
    color: #18794e;
    background: #e4f4eb;
}

.up-career .job-qualification {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.8;
    color: #555;
    font-weight: 400;
}

.up-career .job-qualification strong {
    color: #252525;
    font-weight: 600;
}

/* Apply button */
.up-career .job-card .job-apply {
    align-self: center;
    flex: 0 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 124px;
    min-width: 85px;
    height: 50px;
    padding: 8px 10px;
    margin: 0 22px 0 0;
    border-radius: 30px;
    background: #0868b8;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: .25s ease;
}

.up-career .job-card .job-apply:hover {
    background: #242424;
    color: #fff;
}



/* Expanded description */
.up-career .job-description {
    padding: 0 22px 24px;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
    line-height: 1.9;
    color: #666;
}

.up-career .job-description h5 {
    font-size: 13px;
    font-weight: 700;
    color: #242424;
    margin: 20px 0 8px;
}

.up-career .job-description p {
    margin-bottom: 10px;
}

.up-career .job-description ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

.up-career .job-description li {
    margin-bottom: 5px;
}

.up-career .job-description .salary {
    color: #252525;
    font-weight: 600;
}

/* Bottom CTA */
.up-career .career-bottom-cta {
    margin-top: 32px;
    padding: 25px 28px;
    background: #faf7f1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.up-career .career-bottom-cta h4 {
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 8px;
}

.up-career .career-bottom-cta p {
    margin: 0;
    font-size: 13px;
    color: #686868;
}

.up-career .career-bottom-cta a {
    flex-shrink: 0;
    background: var(--up-orange);
    border-radius: 30px;
    padding: 12px 22px;
    color: #171717;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.up-career .career-bottom-cta a:hover {
    background: #242424;
    color: #fff;
}

/* Responsive */
@media (max-width: 767px) {
    .up-career {
        padding: 42px 0 55px;
    }

    .up-career .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .up-career .career-intro-row {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        margin-bottom: 38px;
    }

    .up-career .career-quote {
        flex-basis: auto;
        padding: 24px;
    }

    .up-career .career-quote blockquote {
        font-size: 21px;
    }

    .up-career .job-section-heading h3 {
        font-size: 25px;
    }

    .up-career .job-card .accordion-button {
        padding: 16px 13px;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
    }

    .up-career .job-apply {
        min-width: 69px;
        padding: 10px 11px;
        font-size: 10px;
    }

    .up-career .job-meta {
        gap: 5px;
    }

    .up-career .job-badge {
        font-size: 9px;
        padding: 4px 6px;
    }

    .up-career .job-description {
        padding: 0 15px 20px;
    }

    .up-career .career-bottom-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }
}

.up-career .job-card .accordion-header {
    display: flex;
    align-items: stretch;
    position: relative;
    margin-bottom: 0;
}


/* RAJHANS CONSTRUCTION APPLICATION FORM */
.rc-application {
    --rc-gold: #ffb900;
    --rc-dark: #252525;
    --rc-muted: #727272;
    --rc-border: #e3e3e3;

    background: #fff;
    padding: 65px 15px 85px;
    font-family: 'Poppins', sans-serif;
    color: var(--rc-dark);
}

.rc-application * {
    box-sizing: border-box;
}

.rc-application .rc-form-container {
    max-width: 1000px;
    margin: 0 auto;
}

.rc-application .rc-form-heading {
    text-align: center;
    margin-bottom: 35px;
}

.rc-application .rc-form-heading span {
    display: inline-block;
    color: #087fe5;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.rc-application .rc-form-heading h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4vw, 40px);
    font-weight: 700;
    margin-bottom: 12px;
}

.rc-application .rc-form-heading p {
    color: var(--rc-muted);
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

/* Form panel */
.rc-application .rc-form-panel {
    border: 1px solid var(--rc-border);
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 5px 25px rgba(0,0,0,.045);
}

/* Progress */
.rc-application .rc-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 30px;
}

.rc-application .rc-progress span {
    flex: 1;
    height: 5px;
    border-radius: 10px;
    background: #e9e9e9;
    transition: background .25s ease;
}

.rc-application .rc-progress span.active {
    background: #0784df;
}

.rc-application .rc-step-label {
    font-size: 12px;
    font-weight: 600;
    color: #777;
    margin-bottom: 8px;
}

.rc-application .rc-step-label strong {
    color: #a66e00;
}

/* Step title */
.rc-application .rc-form-step h3 {
    font-family: 'Playfair Display', serif;
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 8px;
}

.rc-application .rc-step-description {
    color: var(--rc-muted);
    font-size: 13px;
    line-height: 1.8;
    margin-bottom: 25px;
}

.rc-application .rc-form-step[hidden] {
    display: none !important;
}

/* Fields */
.rc-application .rc-field {
    margin-bottom: 21px;
}

.rc-application .rc-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 9px;
    color: #303030;
}

.rc-application .rc-field label .required {
    color: #d32f40;
}

.rc-application .rc-field input,
.rc-application .rc-field select,
.rc-application .rc-field textarea {
    display: block;
    width: 100%;
    min-height: 46px;
    border: 1px solid #dedede;
    border-radius: 4px;
    padding: 11px 13px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    background-color: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.rc-application .rc-field textarea {
    min-height: 105px;
    resize: vertical;
}

.rc-application .rc-field input:focus,
.rc-application .rc-field select:focus,
.rc-application .rc-field textarea:focus {
    border-color: #d49a1c;
    box-shadow: 0 0 0 3px rgba(255,185,0,.12);
}

.rc-application .rc-field input[type="file"] {
    padding: 9px;
    background: #fffdf8;
}

.rc-application .rc-field .field-hint {
    display: block;
    color: #888;
    font-size: 10px;
    margin-top: 6px;
    line-height: 1.6;
}

/* Declaration */
.rc-application .rc-declaration {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 16px;
    border: 1px solid #eee2c8;
    background: #fffaf0;
    border-radius: 5px;
    margin: 10px 0 25px;
}

.rc-application .rc-declaration input {
    margin-top: 4px;
    accent-color: #d49a1c;
    flex-shrink: 0;
}

.rc-application .rc-declaration label {
    font-size: 11px;
    line-height: 1.8;
    color: #555;
}

/* Buttons */
.rc-application .rc-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid #eee;
    margin-top: 10px;
}

.rc-application .rc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 43px;
    padding: 11px 24px;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.rc-application .rc-btn-primary {
    border: 1px solid #0784df);
    background: #0784df;
    color: #fff;
}

.rc-application .rc-btn-primary:hover {
    background: #252525;
    border-color: #252525;
    color: #fff;
}

.rc-application .rc-btn-secondary {
    background: #fff;
    color: #333;
    border: 1px solid #d9d9d9;
}

.rc-application .rc-btn-secondary:hover {
    border-color: #b5b5b5;
    background: #f8f8f8;
}

.rc-application .rc-btn[hidden] {
    display: none !important;
}

.rc-application .rc-form-message {
    display: none;
    padding: 14px;
    margin-top: 18px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.7;
}

.rc-application .rc-form-message.error {
    display: block;
    background: #fff0f0;
    color: #a51f2b;
}

.rc-application .rc-form-message.success {
    display: block;
    background: #edf8f0;
    color: #216b3c;
}

@media (max-width: 767px) {
    .rc-application {
        padding: 40px 12px 55px;
    }

    .rc-application .rc-form-panel {
        padding: 22px 16px;
    }

    .rc-application .rc-form-step h3 {
        font-size: 22px;
    }

    .rc-application .rc-form-actions {
        gap: 8px;
    }

    .rc-application .rc-btn {
        padding: 10px 17px;
        font-size: 11px;
    }
}

/* Expertise Owl Carousel */
#expertise .rc-expertise-carousel {
    width: 100%;
    display: block;
}

#expertise .rc-expertise-carousel .owl-item {
    box-sizing: border-box;
}

#expertise .rc-expertise-carousel .rc-reveal {
    opacity: 1;
    visibility: visible;
    transform: none;
}

#expertise .rc-expertise-image {
    height: 250px;
    overflow: hidden;
}

#expertise .rc-expertise-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* ==========================================
   SHARED SECTION STYLES
========================================== */

.rc-process-section,
.rc-quality-section,
.rc-why-section {
    position: relative;
    overflow: hidden;
}

.rc-process-section,
.rc-why-section {
    padding: 100px 0;
}

.rc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0788df;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.rc-eyebrow > span {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: #0788df;
}

.rc-process-heading {
    max-width: 700px;
    margin: 0 auto 70px;
    text-align: center;
}

.rc-process-heading h2,
.rc-why-content h2 {
    color: #0a2f4d;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.rc-process-heading h2 span,
.rc-why-content h2 span {
    color: #0788df;
}

.rc-process-heading > p {
    color: #687b8d;
    font-size: 15px;
    line-height: 1.9;
    max-width: 570px;
    margin: 0 auto;
}


/* ==========================================
   1. CONSTRUCTION PROCESS
========================================== */

.rc-process-section {
    background: #f5f9fc;
}

.rc-process-timeline {
    position: relative;
}

.rc-process-line {
    position: absolute;
    top: 31px;
    left: 9%;
    right: 9%;
    height: 2px;
    background: #d7e6f2;
    overflow: hidden;
}

.rc-process-line span {
    display: block;
    width: 100%;
    height: 100%;
    background: #0788df;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.5s ease;
}

.rc-process-section.rc-is-visible .rc-process-line span {
    transform: scaleX(1);
}

.rc-process-item {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 15px;
}

.rc-process-number {
    position: absolute;
    top: -27px;
    right: 15px;
    color: #1096f77d;
    font-size: 30px;
    font-weight: 800;
    transition: color 0.3s ease;
}

.rc-process-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 28px;
    background: #fff;
    border: 1px solid #dbe8f3;
    border-radius: 50%;
    color: #0788df;
    font-size: 25px;
    box-shadow: 0 5px 20px rgba(10, 47, 77, 0.06);
    transition:
        background 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.rc-process-item:hover .rc-process-icon {
    background: #0788df;
    color: #fff;
    transform: translateY(-7px) rotate(-5deg);
    box-shadow: 0 12px 25px rgba(7, 136, 223, 0.23);
}

.rc-process-item:hover .rc-process-number {
    color: #0788df;
}

.rc-process-item h5 {
    color: #0a2f4d;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
}

.rc-process-item p {
    color: #718195;
    font-size: 16px;
    line-height: 1.85;
    margin: 0;
}

.rc-process-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 55px;
    padding-top: 24px;
    border-top: 1px solid #dce7ef;
    color: #0a2f4d;
    font-size: 13px;
    font-weight: 600;
}

.rc-process-bottom i {
    color: #0788df;
    font-size: 22px;
}


/* ==========================================
   2. QUALITY & SAFETY STANDARDS
   WHITE BACKGROUND THEME
========================================== */

.rc-quality-section {
    padding: 100px 0;
    background: #ffffff;
    color: #0a2f4d;
}

/* Section label */

.rc-quality-section .rc-eyebrow-light {
    color: #0788df;
}

.rc-quality-section .rc-eyebrow-light > span {
    background: #0788df;
}

/* Main heading */

.rc-quality-section h2 {
    color: #0a2f4d;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.8px;
    margin-bottom: 0;
}

.rc-quality-section h2 span {
    color: #0788df;
}

/* Intro text */

.rc-quality-intro {
    color: #687b8d;
    font-size: 14px;
    line-height: 1.9;
    margin-bottom: 5px;
}

/* Cards grid */

.rc-quality-grid {
    margin-top: 50px;
}

/* Individual cards */

.rc-quality-card {
    position: relative;
    height: 100%;
    min-height: 245px;
    padding: 28px 23px;
    background: #ffffff;
    border: 1px solid #e0eaf2;
    border-radius: 5px;
    box-shadow: 0 8px 28px rgba(10, 47, 77, 0.045);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        background 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Animated top border */

.rc-quality-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #0788df;
    transition: width 0.4s ease;
}

.rc-quality-card:hover {
    transform: translateY(-8px);
    background: #ffffff;
    border-color: #9ed4f7;
    box-shadow: 0 16px 35px rgba(10, 47, 77, 0.10);
}

.rc-quality-card:hover::before {
    width: 100%;
}

/* Card top row */

.rc-quality-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

/* Icon box */

.rc-quality-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #eef7fe;
    border: 1px solid #d6eafa;
    border-radius: 5px;
    color: #0788df;
    font-size: 23px;
    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.rc-quality-card:hover .rc-quality-icon {
    transform: scale(1.08);
    background: #0788df;
    color: #ffffff;
}

/* Card number */

.rc-quality-index {
    color: #c9d9e6;
    font-size: 24px;
    font-weight: 800;
    transition: color 0.3s ease;
}

.rc-quality-card:hover .rc-quality-index {
    color: #0788df;
}

/* Card title */

.rc-quality-card h5 {
    color: #0a2f4d;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
}

/* Card description */

.rc-quality-card p {
    color: #718195;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 20px;
}

/* Bottom accent line */

.rc-quality-line {
    width: 35px;
    height: 2px;
    background: #0788df;
    transition: width 0.35s ease;
}

.rc-quality-card:hover .rc-quality-line {
    width: 65px;
}

/* Bottom information strip */

.rc-quality-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 30px;
    padding: 23px 25px;
    background: #f5f9fc;
    border: 1px solid #e0eaf2;
    border-left: 3px solid #0788df;
}

.rc-quality-footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #0788df;
    color: #ffffff;
    border-radius: 50%;
    font-size: 22px;
}

.rc-quality-footer h6 {
    color: #0a2f4d;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 5px;
}

.rc-quality-footer p {
    color: #718195;
    font-size: 14px;
    margin: 0;
}


/* ==========================================
   3. WHY CHOOSE RAJHANS
========================================== */

.rc-why-section {
    background: #fff;
}

.rc-why-visual {
    position: relative;
    padding: 0 25px 25px 0;
}

.rc-why-visual > img {
    display: block;
    width: 100%;
    height: 640px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    position: relative;
    z-index: 1;
}

.rc-why-corner {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 65%;
    height: 65%;
    border-right: 5px solid #0788df;
    border-bottom: 5px solid #0788df;
    border-radius: 0 0 4px 0;
}

.rc-why-image-label {
    position: absolute;
    z-index: 2;
    left: 20px;
    bottom: 45px;
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: calc(100% - 50px);
    padding: 17px 20px;
    background: rgba(8, 46, 75, 0.94);
    border-left: 3px solid #0788df;
    color: #fff;
}

.rc-why-label-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 43px;
    height: 43px;
    background: #0788df;
    border-radius: 3px;
    font-size: 21px;
}

/*.rc-why-image-label strong,*/
/*.rc-why-image-label span {*/
/*    display: block;*/
/*}*/

.rc-why-image-label strong {
    font-size: 14px;
    margin-bottom: 5px;
}

.rc-why-image-label div > span {
    color: #c1d2e0;
    font-size: 11px;
}

.rc-why-content h2 {
    font-size: clamp(31px, 3.5vw, 43px);
    margin-bottom: 20px;
}

.rc-why-description {
    color: #6e8091;
    font-size: 13px;
    line-height: 1.95;
    margin-bottom: 25px;
}

.rc-why-list {
    border-top: 1px solid #e5edf3;
}

.rc-why-item1 {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 17px 0;
    border-bottom: 1px solid #e5edf3;
    transition: padding 0.3s ease;
}

.rc-why-item1:hover {
    padding-left: 7px;
}

.rc-why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background: #eef7fe;
    border: 1px solid #dceefa;
    border-radius: 4px;
    color: #0788df;
    font-size: 20px;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.rc-why-item1:hover .rc-why-icon {
    background: #0788df;
    color: #fff;
}

.rc-why-item1 > div:nth-child(2) {
    flex: 1;
}

.rc-why-item1 h6 {
    color: #0a2f4d;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 5px;
}

.rc-why-item1 p {
    color: #758598;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.rc-why-arrow {
    color: #9aabba;
    font-size: 17px;
    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.rc-why-item1:hover .rc-why-arrow {
    color: #0788df;
    transform: translate(3px, -3px);
}

.rc-why-btn {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 27px;
    padding: 15px 22px;
    background: #0788df;
    border: 1px solid #0788df;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.rc-why-btn:hover {
    background: #086db0;
    color: #fff;
    transform: translateY(-3px);
}

.rc-footer li p {
    margin-bottom: 0px;
    color: rgba(255, 255, 255, .65);
    font-size: 16px;
    transition: .3s;
}


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

.rc-animate {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.75s ease,
        transform 0.75s cubic-bezier(0.2, 0.65, 0.3, 1);
    transition-delay: var(--rc-delay, 0ms);
}

.rc-animate.rc-revealed {
    opacity: 1;
    transform: translateY(0);
}


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

@media (max-width: 991.98px) {

    .rc-process-section,
    .rc-why-section,
    .rc-quality-section {
        padding: 75px 0;
    }

    .rc-process-heading {
        margin-bottom: 50px;
    }

    .rc-process-line {
        display: none;
    }

    .rc-process-item {
        padding: 15px 20px;
    }

    .rc-process-number {
        right: 25px;
    }

    .rc-process-bottom {
        margin-top: 35px;
    }

    .rc-quality-grid {
        margin-top: 35px;
    }

    .rc-why-visual > img {
        height: 420px;
    }
}

@media (max-width: 575.98px) {

    .rc-process-section,
    .rc-why-section,
    .rc-quality-section {
        padding: 60px 0;
    }

    .rc-process-heading {
        margin-bottom: 30px;
    }

    .rc-process-item {
        padding: 12px 8px;
    }

    .rc-process-icon {
        width: 55px;
        height: 55px;
        margin-bottom: 20px;
        font-size: 22px;
    }

    .rc-process-number {
        top: 0;
        right: 5px;
        font-size: 22px;
    }

    .rc-process-item h5 {
        font-size: 14px;
        line-height: 1.5;
    }

    .rc-process-item p {
        font-size: 12px;
    }

    .rc-process-bottom {
        align-items: flex-start;
        justify-content: flex-start;
        font-size: 12px;
        line-height: 1.8;
    }

    .rc-quality-card {
        min-height: 225px;
        padding: 22px 18px;
    }

    .rc-quality-footer {
        align-items: flex-start;
        padding: 18px 15px;
    }

    .rc-why-visual {
        padding-right: 15px;
        padding-bottom: 18px;
    }

    .rc-why-visual > img {
        height: 330px;
    }

    .rc-why-image-label {
        left: 10px;
        bottom: 28px;
        padding: 12px;
    }

    .rc-why-item {
        gap: 11px;
    }

    .rc-why-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .rc-why-item h6 {
        font-size: 13px;
    }

    .rc-why-item p {
        font-size: 11px;
    }
}


/* ==========================================
   ACCESSIBILITY: REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .rc-animate,
    .rc-process-line span,
    .rc-process-icon,
    .rc-quality-card,
    .rc-quality-icon,
    .rc-quality-card::before,
    .rc-quality-line,
    .rc-why-item,
    .rc-why-icon,
    .rc-why-arrow,
    .rc-why-btn {
        transition: none !important;
        transform: none !important;
    }

    .rc-animate {
        opacity: 1;
    }

    .rc-process-section .rc-process-line span {
        transform: scaleX(1);
    }
}





/* Know More Button */
.job-view-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-shrink: 0;
    margin: 0 18px;
    padding: 8px 12px;
    color: #0a2f4d;
    background: #dde8f1;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
}

.job-view-more:hover {
    color: #0a2f4d;
    background: #f2f9ff;
}

.job-view-more i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

.job-view-more:hover i {
    transform: translateY(3px);
}

@media (max-width: 575.98px) {
    .job-view-more {
        margin: 0 8px;
        padding: 6px 8px;
        font-size: 11px;
    }
}



.about-values-image {
    position: relative;
    overflow: hidden;
}

.about-values-carousel,
.about-values-carousel .owl-stage-outer,
.about-values-carousel .owl-stage,
.about-values-carousel .owl-item,
.about-values-carousel .item {
    height: 100%;
}

.about-values-carousel .item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keep text above the carousel */
.about-values-image-content {
    position: absolute;
    z-index: 5;
    left: 21px;
    right: 0;
    bottom: 17px;
}

/* Optional: subtle fade transition */
.about-values-carousel .owl-item img {
    transition: transform .6s ease;
}

.about-values-carousel .owl-item.active img {
    transform: scale(1.02);
}

.pt-hero {
    min-height: 380px;
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(2, 35, 57, .96) 0%, rgba(2, 43, 69, .86) 35%, rgba(2, 43, 69, .25) 75%, rgba(2, 43, 69, .1) 100%), url(../img/contact-banner1.png) center / cover no-repeat;
    overflow: hidden;
}

.text-counter{
        font-size: 33px !important;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 1px;
}


.sd-intro-collage {
    position: relative;
    min-height: 480px;
    padding: 0 45px 40px 0;
}

.sd-intro-main-image {
    height: 430px;
    width: 88%;
    overflow: hidden;
    border-radius: 12px 150px 12px 12px;
}

.sd-intro-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s ease;
}

.sd-intro-collage:hover .sd-intro-main-image img {
    transform: scale(1.04);
}

.sd-intro-small-image {
position: absolute;
    right: -67px;
    bottom: 25px;
    width: 47%;
    height: 191px;
    padding: 7px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.sd-intro-small-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.sd-intro-note {
    position: absolute;
    left: 15px;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    background: #087fc3;
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 25px rgba(3,61,43,.15);
}

.sd-intro-note > i {
    color: #fff;
    font-size: 22px;
}

.sd-intro-note > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sd-intro-note strong {
    font-size: 15px;
}

.sd-intro-note span {
    color: rgba(255,255,255,.7);
    font-size: 13px;
}

.sd-intro-outline {
    position: absolute;
    z-index: -1;
    top: -15px;
    left: -15px;
    width: 65%;
    height: 180px;
    border: 1px solid #087fc3;
    border-radius: 12px;
}


/* Mobile Responsive Fix */
@media (max-width: 767px) {

    .sd-intro-collage {
        position: relative;
        min-height: 390px;
        padding: 12px 12px 55px;
        margin: 0 auto 20px;
        width: 100%;
        overflow: hidden;
    }

    .sd-intro-main-image {
        width: 88%;
        height: 320px;
        border-radius: 12px 100px 12px 12px;
        overflow: hidden;
    }

    .sd-intro-main-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .sd-intro-small-image {
        position: absolute;
        right: 8px;
        bottom: 50px;
        width: 40%;
        height: 135px;
        padding: 5px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
        overflow: hidden;
    }

    .sd-intro-small-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    .sd-intro-note {
        position: absolute;
        left: 18px;
        bottom: 12px;
        z-index: 3;
        max-width: 75%;
        padding: 10px 12px;
        gap: 9px;
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(3, 61, 43, .15);
    }

    .sd-intro-note > i {
        font-size: 18px;
        flex-shrink: 0;
    }

    .sd-intro-note > div {
        min-width: 0;
        gap: 3px;
    }

    .sd-intro-note strong {
        font-size: 10px;
        line-height: 1.4;
    }

    .sd-intro-note span {
        font-size: 8px;
        line-height: 1.4;
    }

    .sd-intro-outline {
        top: 0;
        left: 0;
        width: 58%;
        height: 125px;
        border-radius: 10px;
        /*z-index: 0;*/
        pointer-events: none;
    }
}

/* Extra-small mobile screens */
@media (max-width: 380px) {

    .sd-intro-collage {
        min-height: 355px;
        padding: 10px 8px 50px;
    }

    .sd-intro-main-image {
        width: 90%;
        height: 285px;
        border-radius: 10px 80px 10px 10px;
    }

    .sd-intro-small-image {
        right: 5px;
        bottom: 45px;
        width: 39%;
        height: 115px;
    }

    .sd-intro-note {
        left: 2px;
        bottom: 35px;
        max-width: 78%;
        padding: 9px 10px;
        gap: 7px;
    }

    .sd-intro-note > i {
        font-size: 16px;
    }

    .sd-intro-note strong {
        font-size: 9px;
    }

    .sd-intro-note span {
        font-size: 7px;
    }
}

/* Main Visual Container */
.rc-visual {
    position: relative;
    min-height: 590px;
    margin: -35px -35px 0 -8px;
}

/* Blue Background Shape */
.rc-blue-shape {
    position: absolute;
    top: 12px;
    left: 16%;
    right: auto;
    width: 40%;
    height: 74%;
    background: linear-gradient(155deg, #0b77bf, #07365e);
    border-radius: 0 44% 42% 0;
    transform: rotate(-7deg);
}

/* Main Image */
.rc-main-photo {
    position: absolute;
    top: 0;
    right: 8%;
    width: 70%;
    height: 82%;
    overflow: hidden;
    border-radius: 12% 44% 0 0;
    border: 8px solid #fff;
    box-shadow: 0 22px 55px #0d2f762b;
    background: #e8d5b8;
}

.rc-main-photo img,
.rc-side-photo img,
.rc-team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rc-main-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        #07243b05,
        #07243b2e
    );
    pointer-events: none;
}

/* Small Construction Image */
.rc-side-photo {
    position: absolute;
    right: 8%;
    bottom: -6%;
    width: 45%;
    height: 35%;
    border: 7px solid #fff;
    border-radius: 46% 0 0 0;
    overflow: hidden;
    box-shadow: 0 18px 38px #0d2f7633;
    background: #d8e6ef;
}

/* Team Image */
.rc-team-photo {
    position: absolute;
    z-index: 3;
    left: 1%;
    bottom: -7%;
    width: 42%;
    height: 39%;
    border: 7px solid #fff;
    border-radius: 48%;
    overflow: hidden;
    background: #d9e5ee;
    box-shadow: 0 17px 40px #0e365433;
}

/* Experience Badge */
.rc-experience {
    position: absolute;
    z-index: 4;
    left: -7%;
    bottom: -17%;
    width: 135px;
    min-height: 135px;
    padding: 20px 18px;
    border-radius: 16px 16px 16px 4px;
    background: linear-gradient(145deg, #0d78c6, #064a83);
    color: #fff;
    box-shadow: 0 15px 35px #07497e42;
}

.rc-experience strong {
    display: block;
    font: 700 47px/1 "Playfair Display", serif;
}

.rc-experience span {
    display: block;
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Vertical Text */
.rc-vertical {
    position: absolute;
    top: 13%;
    left: 123px;
    writing-mode: vertical-rl;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* Decorative Dots */
.rc-dots {
    position: absolute;
    top: 6%;
    left: 13%;
    width: 60px;
    height: 68px;
    opacity: .55;
    z-index: 3;
    background-image: radial-gradient(
        #fff 1.4px,
        transparent 1.4px
    );
    background-size: 12px 12px;
}

/* Tablet View */
@media (max-width: 991.98px) {
    .rc-visual {
        min-height: 520px;
        margin: 40px 10px 0;
    }

    .rc-main-photo {
        right: 10%;
        width: 69%;
    }

    .rc-team-photo {
        left: 7%;
    }

    .rc-experience {
        left: 1%;
    }
}

/* Mobile View */
@media (max-width: 575.98px) {
    .rc-visual {
        min-height: 390px;
        margin: 35px 0 0;
    }

    .rc-blue-shape {
        top: 12px;
        left: 16%;
        width: 40%;
        height: 74%;
    }

    .rc-main-photo {
        top: 0;
        right: 8%;
        width: 76%;
        height: 77%;
        border-width: 5px;
    }

    .rc-side-photo {
        right: -1%;
        bottom: 5%;
        width: 43%;
        height: 30%;
        border-width: 5px;
    }

    .rc-team-photo {
        left: 3%;
        bottom: 7%;
        width: 43%;
        height: 34%;
        border-width: 5px;
    }

    .rc-experience {
        width: 94px;
        min-height: 94px;
        padding: 13px 12px;
        left: 0;
        bottom: -29px;
        border-radius: 12px;
    }

    .rc-experience strong {
        font-size: 32px;
    }

    .rc-experience span {
        font-size: 8px;
        margin-top: 6px;
    }

    .rc-vertical {
        font-size: 8px;
    }

    .rc-dots {
        width: 60px;
        height: 60px;
    }
}


.rp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
}

.rp-page-btn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e1e8ef;
    border-radius: 8px;
    background: #fff;
    color: #1596ef;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.rp-page-btn:hover,
.rp-page-btn.active {
    background: #1596ef;
    border-color: #1596ef;
    color: #fff;
}

.rp-page-dots {
    color: #777;
    padding: 0 4px;
}

@media (max-width: 576px) {
    .rp-pagination {
        gap: 5px;
        margin-top: 25px;
    }

    .rp-page-btn {
        width: 36px;
        height: 36px;
    }
}


/* ==========================================
   RAJHANS CONSTRUCTION - LEADERSHIP SECTION
========================================== */

.rc-leadership-section {
    --rc-blue: #1596ef;
    --rc-navy: #102b40;
    --rc-text: #4d5c68;
    --rc-muted: #82909a;
    --rc-border: #e5ebf0;
    --rc-light: #f5f8fb;

    position: relative;
    padding: 110px 0;
    background: #fff;
    overflow: hidden;
    font-family: "DM Sans", sans-serif;
}

/* Subtle background detail */
.rc-leadership-section::before {
    content: "";
    position: absolute;
    top: 0;
    right: -100px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(21, 150, 239, 0.07),
        transparent 70%
    );
    pointer-events: none;
}

.rc-leadership-section .container {
    position: relative;
    z-index: 1;
}

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

.rc-leadership-visual {
    position: relative;
    max-width: 530px;
    margin: 0 auto;
    padding: 0 20px 30px 0;
}

.rc-image-grid {
    position: absolute;
    top: -25px;
    left: -22px;
    width: 170px;
    height: 170px;
    opacity: 0.5;
    background-image: radial-gradient(
        #1596ef 1px,
        transparent 1px
    );
    background-size: 12px 12px;
    pointer-events: none;
}

.rc-image-frame {
    position: relative;
    height: 565px;
    background: #eaf2f8;
    overflow: hidden;
    border-radius: 4px 65px 4px 4px;
    z-index: 1;
}

.rc-leadership-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}

.rc-leadership-visual:hover .rc-leadership-image {
    transform: scale(1.035);
}

/* Blue accent at the bottom */
.rc-image-accent {
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 75%;
    height: 7px;
    background: linear-gradient(
        90deg,
        #1596ef,
        #75c7ff
    );
    z-index: 2;
}

/* Image caption */
.rc-image-caption {
    position: absolute;
        bottom: -27px;
    left: -46px;
    width: min(360px, 85%);
    padding: 25px 25px 25px 24px;
    display: flex;
    gap: 17px;
    align-items: flex-start;
    background: #fff;
    box-shadow: 0 15px 45px rgba(16, 43, 64, 0.13);
    z-index: 3;
}

.rc-caption-line {
    flex-shrink: 0;
    width: 3px;
    height: 64px;
    background: var(--rc-blue, #1596ef);
}

.rc-caption-small {
    display: block;
    margin-bottom: 9px;
    color: #1596ef;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rc-image-caption h3 {
    margin: 0;
    color: #102b40;
    font-family: "Playfair Display", serif;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 600;
}

.rc-image-index {
    position: absolute;
    top: 22px;
    right: 42px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.94);
    color: #102b40;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.rc-index-divider {
    width: 25px;
    height: 1px;
    background: #1596ef;
}

.rc-image-outline {
    position: absolute;
    top: 22px;
    right: 0;
    width: 75%;
    height: 92%;
    border: 1px solid rgba(21, 150, 239, 0.35);
    border-radius: 4px 65px 4px 4px;
    pointer-events: none;
}

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

.rc-leadership-content {
    padding-left: 24px;
}

.rc-section-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    color: #1596ef;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.rc-eyebrow-line {
    display: inline-block;
    width: 34px;
    height: 2px;
    background: #1596ef;
}

.rc-leadership-heading {
    margin: 0 0 23px;
    color: #102b40;
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 3.5vw, 52px);
    line-height: 1.17;
    font-weight: 600;
    letter-spacing: -1.1px;
}

.rc-leadership-heading span {
    display: block;
    color: #1596ef;
}

.rc-leadership-intro {
    max-width: 570px;
    margin-bottom: 13px;
    color: #102b40;
    font-size: 18px;
    line-height: 1.85;
    font-weight: 600;
}

.rc-leadership-description {
    max-width: 570px;
    margin-bottom: 27px;
    color: #63717d;
    font-size: 16px;
    line-height: 1.95;
}

/* ==========================================
   LEADERS LIST
========================================== */

.rc-leaders-list {
    border-top: 1px solid #e5ebf0;
}

.rc-leader-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 17px 8px;
    border-bottom: 1px solid #e5ebf0;
    transition:
        background 0.3s ease,
        padding 0.3s ease;
}

.rc-leader-item:hover {
    padding-left: 15px;
    background: #f5f9fc;
}

.rc-leader-number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 39px;
    height: 39px;
    color: #1596ef;
    background: #eaf6ff;
    border: 1px solid #d8edfc;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}

.rc-leader-info {
    flex: 1;
    min-width: 0;
}

.rc-leader-info h3 {
    margin: 0 0 4px;
    color: #102b40;
    font-family: "DM Sans", sans-serif;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
}

.rc-leader-info p {
    margin: 0;
    color: #7c8b97;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.rc-leader-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    color: #1596ef;
    border: 1px solid #e0eaf1;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.rc-leader-item:hover .rc-leader-arrow {
    color: #fff;
    background: #1596ef;
    border-color: #1596ef;
    transform: rotate(45deg);
}

/* ==========================================
   VALUES
========================================== */

.rc-leadership-values {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 25px;
    margin: 25px 0 28px;
}

.rc-value-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #344b5c;
    font-size: 15px;
    font-weight: 700;
}

.rc-value-item i {
    color: #1596ef;
    font-size: 16px;
}

/* ==========================================
   LINK
========================================== */

.rc-leadership-link {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    color: #102b40;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.rc-leadership-link > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    color: #fff;
    background: #1596ef;
    border-radius: 50%;
    font-size: 17px;
    transition: all 0.3s ease;
}

.rc-leadership-link:hover {
    color: #1596ef;
}

.rc-leadership-link:hover > span {
    background: #102b40;
    transform: translateX(5px);
}

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

@media (max-width: 991.98px) {
    .rc-leadership-section {
        padding: 85px 0;
    }

    .rc-leadership-visual {
        max-width: 590px;
        margin-bottom: 10px;
    }

    .rc-image-frame {
        height: 560px;
    }

    .rc-leadership-content {
        padding-left: 0;
    }

    .rc-leadership-heading {
        max-width: 650px;
        font-size: 46px;
    }

    .rc-leadership-intro,
    .rc-leadership-description {
        max-width: 700px;
    }
}

@media (max-width: 575.98px) {
    .rc-leadership-section {
        padding: 65px 0;
    }

    .rc-leadership-visual {
        padding: 0 12px 23px 0;
    }

    .rc-image-frame {
        height: 390px;
        border-top-right-radius: 42px;
    }

    .rc-image-outline {
        top: 14px;
        height: 94%;
        border-top-right-radius: 42px;
    }

    .rc-image-grid {
        top: -14px;
        left: -10px;
        width: 110px;
        height: 110px;
        background-size: 10px 10px;
    }

    .rc-image-index {
        top: 14px;
        right: 23px;
        gap: 8px;
        padding: 9px 11px;
        font-size: 9px;
    }

    .rc-image-caption {
        bottom: 37px;
        left: -5px;
        gap: 12px;
        padding: 17px 15px;
    }

    .rc-caption-line {
        height: 53px;
    }

    .rc-caption-small {
        font-size: 8px;
        letter-spacing: 1.3px;
    }

    .rc-image-caption h3 {
        font-size: 18px;
    }

    .rc-section-eyebrow {
        gap: 8px;
        font-size: 9px;
        letter-spacing: 1.2px;
        line-height: 1.7;
    }

    .rc-eyebrow-line {
        flex-shrink: 0;
        width: 25px;
    }

    .rc-leadership-heading {
        margin-bottom: 18px;
        font-size: 36px;
        letter-spacing: -0.7px;
    }

    .rc-leadership-intro {
        font-size: 15px;
        line-height: 1.8;
    }

    .rc-leadership-description {
        font-size: 13px;
        line-height: 1.85;
    }

    .rc-leader-item {
        gap: 12px;
        padding: 15px 4px;
    }

    .rc-leader-number {
        width: 34px;
        height: 34px;
        font-size: 10px;
    }

    .rc-leader-info h3 {
        font-size: 13px;
    }

    .rc-leader-info p {
        font-size: 11px;
    }

    .rc-leader-arrow {
        width: 30px;
        height: 30px;
    }

    .rc-leadership-values {
        gap: 14px 18px;
        margin: 23px 0;
    }

    .rc-value-item {
        font-size: 11px;
    }

    .rc-leadership-link {
        gap: 13px;
        font-size: 10px;
    }

    .rc-leadership-link > span {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rc-leadership-section *,
    .rc-leadership-section *::before,
    .rc-leadership-section *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* Project Card Layout */
.rc-project-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Project Content */
.rc-project-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Read More Button at the Bottom */
.rc-project-link {
    margin-top: auto;
    padding-top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}


/* Align Learn More links at the bottom of all service cards */
.rp-service-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rp-service-content {
    padding: 30px 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rp-service-content p {
    margin-bottom: 14px;
}

.rp-learn {
    margin-top: auto;
    /*padding-top: 10px;*/
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
}

/* Align View Project button at the bottom of project cards */
.rp-project-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rp-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rp-card-body > .rp-project-link:last-child {
    margin-top: auto;
    padding-top: 12px;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
}

/* Align ongoing project cards */
.rp-ongoing-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rp-ongoing-image {
    flex-shrink: 0;
}

.rp-ongoing-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rp-ongoing-body > .rp-project-link:last-child {
    margin-top: auto;
    padding-top: 15px;
    align-self: flex-start;
}