@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

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

body {
    font-family: lato;
    position: relative
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    position: absolute;
    width: 100%
}

.cta-btn {
    padding: .9rem 1.5rem;
    background: #ff7e26;
    align-self: flex-start;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 12px -2px rgba(50, 50, 93, .25), 0 3px 7px -3px rgba(0, 0, 0, .3)
}

.h-numbers {
    display: flex;
    gap: 40px
}

.h-numbers a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #000;
    font-size: 18px
}

.hero-section {
    padding: 7rem 3rem 3rem
}

.inside-hero-section {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.hs-right {
    width: 40%;
    padding: 2rem;
    background: #105c86;
    border-radius: 15px;
    box-shadow: 0 13px 27px -5px rgba(50, 50, 93, .25), 0 8px 16px -8px rgba(0, 0, 0, .3)
}

.hs-left {
    width: 45%;
    padding: 0 1rem;
    row-gap: 1rem
}

.hs-left,
.hs-right form {
    display: flex;
    flex-direction: column
}

.hs-right form {
    row-gap: 20px
}

.hs-right input,
.hs-right textarea {
    padding: .9rem;
    border-radius: 6px;
    border: navajowhite
}

.hs-right button {
    padding: .9rem !important;
    align-self: flex-start;
    border-radius: 50px !important;
    border: none;
    background: #105c86;
}

.hs-left h1 {
    font-size: 40px;
    text-transform: capitalize;
    font-weight: 700
}

.clients-section {
    padding: 0px;
    display: flex;
    flex-direction: column;
    text-align: center;
    row-gap: 1rem
}

.client-slide img {
    object-fit: contain
}

.clients-section h2 {
    font-size: 41px
}

.clients-section p {
    font-size: 23px
}

.stats-section {
    padding: 3rem
}

.inside-stats-section {
    display: flex;
    align-items: center
}

.stats-left {
    width: 45%;
    padding: 0 1rem
}

.stats-right {
    width: 60%;
    display: flex;
    gap: 20px
}

.stat-cards {
    width: 50%;
    display: flex;
    flex-direction: column;
    row-gap: 20px
}

.stat-cards.lower {
    padding-top: 2rem
}

.stat-card {
    padding: 2rem;
    background: #fff;
    border-radius: 10px;
    background-repeat: no-repeat;
    box-shadow: 0 19px 38px rgba(99, 103, 108, .3), 0 15px 12px rgba(0, 0, 0, .22)
}

.stat-card h2 {
    font-size: 32px;
    margin-bottom: 1.5rem
}

.stat-card p {
    text-transform: capitalize;
    font-weight: 500;
    font-size: 19px
}

.stats-left h2 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 2rem
}

.desc-section {
    padding: 4rem
}

.inside-desc-section {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.desc-left {
    width: 40%;
    background: antiquewhite
}

.desc-right {
    width: 55%;
    display: flex;
    flex-direction: column;
    row-gap: 20px
}

.desc-right h2 {
    font-size: 40px;
    margin-bottom: 1rem;
    color: #105c86
}

.desc-right p {
    font-size: 17px;
    line-height: 28px
}

.inside-projects-section {
    display: flex;
    justify-content: space-between;
    padding: 0 4rem
}

.project-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    width: 18%;
    box-shadow: 0 6px 12px -2px rgba(50, 50, 93, .25), 0 3px 7px -3px rgba(0, 0, 0, .3)
}

.service-logo {
    margin-bottom: 1rem
}

.service-content h3 {
    font-size: 20px;
    color: #105c86;
    font-size: 22px;
    margin-bottom: .5rem
}

.service-content p {
    color: #105c86;
    font-weight: 700;
    font-size: 18px
}

.recruitment-section {
    padding: 5rem 2rem
}

.recruitment-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap
}

.recruitment-image img {
    width: 100%;
    max-width: 28rem;
    border-radius: 1.5rem;
    object-fit: cover
}

.recruitment-content {
    flex: 1 1;
    min-width: 20rem
}

.subheading {
    color: #ff5b2e;
    font-weight: 600;
    letter-spacing: .05rem;
    margin-bottom: 1rem
}

.recruitment-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem
}

.learn-more {
    display: inline-block;
    background: #006d5b;
    color: white;
    padding: .8rem 1.5rem;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 500;
    transition: background .3s ease;
    margin-bottom: 2rem
}

.learn-more:hover {
    background: #014d40
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(45%, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem
}

.feature-box {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 .3rem 1rem rgba(0, 0, 0, .05);
    transition: transform .3s ease, box-shadow .3s ease
}

.feature-box:hover {
    transform: translateY(-.3rem);
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1)
}

.feature-box h4 {
    font-size: 1.1rem;
    margin-bottom: .5rem
}

.feature-box p {
    font-size: 1rem;
    color: #555
}

@media (max-width:768px) {
    .recruitment-container {
        flex-direction: column;
        text-align: center
    }

    .recruitment-image img {
        max-width: 100%
    }

    .features {
        grid-template-columns: 1fr
    }

    .learn-more {
        margin-bottom: 2.5rem
    }
}

.whyus-section {
    background: #fff;
    padding: 0 2rem 5rem
}

.whyus-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto
}

.whyus-left {
    flex: 1.5 1;
    min-width: 20rem
}

.whyus-left h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #111
}

.highlight {
    color: #ff5b2e
}

.whyus-left p {
    color: #555;
    font-size: 1rem;
    margin-bottom: 2rem
}

.whyus-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem
}

.feature {
    display: flex;
    gap: 1rem;
    align-items: flex-start
}

.feature img {
    width: 3rem;
    height: 3rem
}

.feature h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: .3rem
}

.feature p {
    font-size: .9rem;
    color: #555
}

.whyus-right {
    flex: 1 1;
    min-width: 20rem;
    background: #fff;
    box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .08);
    padding: 2rem;
    border-radius: .8rem
}

.whyus-right h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem
}

.whyus-right form {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.whyus-right input,
.whyus-right textarea {
    width: 100%;
    padding: .9rem 1rem;
    border: 1px solid #ccc;
    border-radius: .4rem;
    font-size: .95rem
}

.whyus-right textarea {
    resize: none;
    height: 6rem
}

.whyus-right button {
    background: #ff5b2e;
    color: #fff;
    border: none;
    padding: .9rem;
    border-radius: .4rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease
}

.whyus-right button:hover {
    background: #139a35
}

.testimonial-section {
    background-color: #fff;
    padding: 3rem 1.5rem 5rem
}

.testimonial-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center
}

.testimonial-header {
    margin-bottom: 2rem
}

.testimonial-header h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #111
}

.testimonial-header h2 span {
    font-weight: 700;
    color: #000
}

.testimonial-header p {
    color: #555;
    margin-top: .5rem;
    font-size: .95rem
}

.testimonial-header .trust {
    color: #16a34a;
    font-weight: 600
}

.custom-swiper-container {
    margin-top: 3rem;
    padding-bottom: 3rem
}

.testimonial-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
    padding: 1.5rem;
    text-align: left;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .3s ease
}

.testimonial-card:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, .1)
}

.testimonial-card p {
    color: black;
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem
}

.testimonial-user {
    display: flex;
    align-items: center;
    gap: .8rem
}

.testimonial-user img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover
}

.testimonial-user h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #111
}

.testimonial-user span {
    display: block;
    font-size: .8rem;
    color: #888
}

.stars {
    color: #16a34a;
    font-size: 1rem;
    margin-top: .5rem
}

.custom-swiper-pagination .swiper-pagination-bullet {
    background-color: #d1d5db;
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 6px !important;
    transition: all .3s ease;
    border-radius: 50%
}

.custom-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #16a34a;
    width: 25px;
    border-radius: 8px
}

.footer {
    background-color: #0f172a;
    color: #f1f5f9;
    padding: 4rem 2rem;
    font-family: Inter, sans-serif
}

.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto
}

.footer-addresses {
    flex: 1 1 40rem;
    display: grid;
    grid-gap: 2rem;
    gap: 2rem;
    display: flex;
    flex-wrap: wrap
}

.office h3 {
    font-size: 1.2rem;
    color: #38bdf8;
    margin-bottom: .5rem
}

.office p {
    font-size: 1rem;
    line-height: 1.6;
    color: #cbd5e1
}

.footer-form {
    flex: 1 1 24rem
}

.footer-form h3 {
    font-size: 1.5rem;
    color: #38bdf8;
    margin-bottom: 1rem
}

.footer-form form {
    display: flex;
    flex-direction: column;
    gap: 1rem
}

p.search {
    font-size: 14px;
    padding: 10px;
    border: 1px solid;
    border-radius: 50px;
    transition: all .3s ease
}

.related-searches {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

p.search:hover {
    background: #fff;
    color: #105c86
}

.footer-form input,
.footer-form textarea {
    padding: .9rem 1rem;
    border-radius: .6rem;
    border: none;
    outline: none;
    background: #1e293b;
    color: #f1f5f9;
    font-size: 1rem
}

.footer-form input::placeholder,
.footer-form textarea::placeholder {
    color: #94a3b8
}

.footer-form button {
    padding: .9rem 1rem;
    border: none;
    border-radius: .6rem;
    background-color: #38bdf8;
    color: #0f172a;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s ease
}

.footer-form button:hover {
    background-color: #0ea5e9
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    font-size: .95rem;
    color: #94a3b8;
    border-top: 1px solid #1e293b;
    margin-top: 3rem
}

@media (max-width:1024px) {
    .desc-section {
        padding: 2rem
    }

    .desc-right h2 {
        font-size: 30px
    }

    .inside-projects-section {
        padding: 0 1rem
    }
}

@media (max-width:900px) {
    .hs-left h1 {
        font-size: 35px
    }

    .hero-section {
        padding: 7rem 1rem 1rem
    }

    .hs-left {
        width: 50%
    }

    .stats-section {
        padding: 1rem
    }

    .inside-stats-section {
        flex-direction: column;
        row-gap: 21px
    }

    .stats-left {
        width: 100%;
        padding: 0
    }

    .stats-right {
        width: 100%
    }

    .desc-left {
        display: none
    }

    .desc-right {
        width: 100%
    }

    .service-content p {
        color:#105c86;
        font-weight: 700;
        font-size: 15px
    }
}

@media (max-width:768px) {
    .footer-container {
        flex-direction: column
    }
}

@media (min-width:768px) {
    .testimonial-header h2 {
        font-size: 2.2rem
    }
}

@media (max-width:700px) {
    .inside-hero-section {
        flex-direction: column;
        row-gap: 20px
    }

    .hs-left {
        margin-top: 23px
    }

    .hs-left,
    .hs-right {
        width: 100%
    }

    .hs-left h1 {
        font-size: 30px
    }

    .inside-projects-section {
        padding: 0 1rem
    }

    .inside-projects-section>.project-card {
        flex: 0 0 32%
    }

    .inside-projects-section {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 22px
    }

    .recruitment-image img {
        max-width: 100%;
        object-position: top
    }
}

@media (min-width:1024px) {
    .testimonial-header h2 {
        font-size: 2.5rem
    }
}

@media (max-width:900px) {
    .whyus-container {
        flex-direction: column
    }

    .whyus-right {
        width: 100%
    }

    header {
        flex-direction: column;
        margin-bottom: 1rem;
        padding: 0
    }

    .hero-section {
        padding-top: 9rem
    }

    .h-numbers {
        gap: 12px;
        justify-content: space-between
    }
}

@media (max-width:600px) {
    header {
        flex-direction: row
    }

    .h-numbers {
        flex-direction: column;
        padding: 1rem
    }
}

@media (max-width:400px) {
    header {
        flex-direction: column
    }

    .hero-section {
        padding-top: 13rem
    }

    .inside-projects-section>.project-card {
        flex: 0 0 49%
    }

    .desc-section {
        padding: 1rem
    }

    .desc-right h2 {
        font-size: 25px;
        margin-bottom: 0
    }

    .desc-right p {
        text-align: justify
    }

    .testimonial-section {
        padding: 0 1rem 2rem
    }

    .clients-section {
        padding: 1rem
    }

    .recruitment-content h2 {
        font-size: 1.5rem
    }

    .feature-box {
        padding: 1rem
    }

    .whyus-container {
        gap: 0
    }
}

@font-face {
    font-family: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../media/8d697b304b401681-s.woff2) format("woff2");
    unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116
}

@font-face {
    font-family: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../media/ba015fad6dcf6784-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Geist;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../media/4cf2300e9c8272f7-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Geist Fallback;
    src: local("Arial");
    ascent-override: 95.94%;
    descent-override: 28.16%;
    line-gap-override: 0.00%;
    size-adjust: 104.76%
}

.__className_188709 {
    font-family: Geist, Geist Fallback;
    font-style: normal
}

.__variable_188709 {
    --font-geist-sans: "Geist", "Geist Fallback"
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../media/9610d9e46709d722-s.woff2) format("woff2");
    unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../media/747892c23ea88013-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: Geist Mono;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../media/93f479601ee12b01-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: Geist Mono Fallback;
    src: local("Arial");
    ascent-override: 74.67%;
    descent-override: 21.92%;
    line-gap-override: 0.00%;
    size-adjust: 134.59%
}

.__className_9a8899 {
    font-family: Geist Mono, Geist Mono Fallback;
    font-style: normal
}

.__variable_9a8899 {
    --font-geist-mono: "Geist Mono", "Geist Mono Fallback"
}