/* poppins and alexandria font */
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* fatfrank and ivypresto font */
@import url("https://p.typekit.net/p.css?s=1&k=jih4fbp&ht=tk&f=25163.45402&a=4008275&app=typekit&e=css");

@font-face {
    font-family: "fatfrank";
    src: url("https://use.typekit.net/af/101136/0000000000000000775c76ed/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"), url("https://use.typekit.net/af/101136/0000000000000000775c76ed/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"), url("https://use.typekit.net/af/101136/0000000000000000775c76ed/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
}

@font-face {
    font-family: "ivypresto-display";
    src: url("https://use.typekit.net/af/619bdc/00000000000000007735e5a5/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff2"), url("https://use.typekit.net/af/619bdc/00000000000000007735e5a5/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("woff"), url("https://use.typekit.net/af/619bdc/00000000000000007735e5a5/31/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n1&v=3") format("opentype");
    font-display: auto;
    font-style: normal;
    font-weight: 100;
    font-stretch: normal;
}

/* variables */
:root {
    --fontAlex: "Alexandria", sans-serif;
    --fontPoppins: "Poppins", sans-serif;
    --fontDisplay: "ivypresto-display", serif;
    --fontFrank: "fatfrank", sans-serif;
    --transition: all .3s ease-in-out;
    --grey: #F1EFE8;
    --blue: #1A098B;
    --lightBlue: #7FA9FF;
    --peach: #FFAEA1;
    --yellow: #F2BD55;
    --orange: #FC7D69;
}

/* site */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    letter-spacing: 0;
    font-family: var(--fontPoppins);
}

body {
    background: var(--grey);
}

.container {
    max-width: 1320px;
    margin-inline: auto;
    width: 100%;
    padding-inline: 20px;
}

a {
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
}

ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--blue);
}

button {
    cursor: pointer;
}

p>strong {
    font-weight: 600;
}

body p:empty {
    display: none;
}

/* buttons */
.btnWithIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-inline: auto;
}

.btnWithIcon .btnText {
    background: var(--lightBlue);
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    color: var(--blue);
    text-align: center;
    -webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: var(--lightBlue);
    font-size: 15.103px;
    font-style: normal;
    font-weight: 600;
    line-height: 84%;
    letter-spacing: 0.453px;
    transition: var(--transition);
    text-transform: capitalize;
}

.btnWithIcon .btnIcon {
    background: var(--lightBlue);
    height: 45px;
    width: 45px;
    border-radius: 50px;
    display: flex;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btnWithIcon:hover .btnText,
.btnWithIcon:hover .btnIcon {
    background: var(--grey);
}

.btnWithIcon .btnIcon img {
    width: 100%;
    object-fit: contain;
    max-width: 30px;
}

.btn {
    border-radius: 50px;
    background: var(--blue);
    padding: 10px 16px;
    color: #FFF;
    text-align: center;
    font-family: var(--fontPoppins);
    font-size: 12.146px;
    font-style: normal;
    font-weight: 600;
    line-height: 84%;
    letter-spacing: 0.364px;
    display: inline-block;
    border: 0;
    text-transform: capitalize;
    transition: var(--transition);
}

.btn:hover {
    background: var(--lightBlue);
}

.btn svg,
.btn svg path {
    transition: var(--transition);
}

/* swiper slider css */
.swiper-wrapper .swiper-slide {
    height: auto;
}

.swiper-button-disabled {
    opacity: .25;
    cursor: not-allowed;
    pointer-events: none;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

/* scrollbar css */
body *::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

body *::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

body *::-webkit-scrollbar-thumb {
    background-color: var(--blue);
}

/* home hero section */
.hero {
    background: var(--blue);
    color: #fff;
    text-align: center;
    padding-block: 65px 280px;
}

.hero .hero__title {
    color: var(--grey);
    font-family: var(--fontDisplay);
    font-size: 71.696px;
    font-style: normal;
    font-weight: 100;
    line-height: 108%;
    letter-spacing: 0.717px;
}

.hero .hero__title strong {
    display: block;
    font-family: var(--fontFrank);
    letter-spacing: 0.717px;
}

.hero .hero__title span {
    background: var(--lightBlue);
    color: var(--blue);
    padding-inline: 10px;
    display: inline-block;
    font-family: var(--fontDisplay);
    letter-spacing: 0.717px;
}

.hero .hero__description {
    color: #F1EFE8;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 151%;
    max-width: 565px;
    margin-inline: auto;
    margin-block: 35px 0;
}

.hero .btnWithIcon {
    margin-block: 25px 0;
}

/* home services section */
.services {
    margin-top: -173px;
    padding-block: 0 80px;
}


.services .services__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    max-width: 993px;
    margin-inline: auto;
}

.services .service-card {
    border-radius: 23.358px 23.358px 23.358px 0;
    border: 2.336px solid #FFF;
    background: #FFF;
    padding: 20px;
    position: relative;
}

.services .service-card>a {
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
}

.service-card__title {
    display: flex;
    align-items: center;
    gap: 11px;
    max-width: 225px;
}

.service-card__icon{
    border-radius: 12.117px 12.117px 12.117px 0;
    background: var(--blue);
    color: #FFF;
    text-align: center;
    font-family: var(--fontAlex);
    font-size: 31.713px;
    font-style: normal;
    font-weight: 600;
    line-height: 109%;
    text-transform: uppercase;
    padding: 16.5px 8.5px 5px 8.5px;
    position: relative;
}
.service-card__icon a {
    color: #FFF;
    font-family: var(--fontAlex);
}

.service-card__icon::before {
    content: "";
    position: absolute;
    height: 8px;
    width: 8px;
    background: var(--lightBlue);
    border-radius: 50px;
    top: 10px;
    left: 13px;
}

.service-card__title h3,.service-card__title h3 a {
    font-family: var(--fontAlex);
    font-size: 23.158px;
    font-style: normal;
    font-weight: 600;
    line-height: 21.504px;
    letter-spacing: -0.463px;
}
.service-card__title h3 a{    
    color: var(--blue);
}
.services .service-card .btn {
    position: absolute;
    right: 20px;
    top: 19px;
    z-index: 1;
}

.services .service-card__content {
    margin-top: 123px;
}

.services .service-card__content p {
    color: var(--blue);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    max-width: 165px;
}

.services .service-card__image {
    position: absolute;
    right: 55px;
    bottom: -15px;
    pointer-events: none;
    max-width: 190px;
    z-index: 1;
}

.services .service-card__image img {
    object-fit: contain;
}

.serviceLightBlue .service-card__icon::before,
.serviceBlue .service-card__icon::before,
.serviceOrange .service-card__icon::before,
.servicePeach .service-card__icon::before,
.serviceYellow .service-card__icon::before {
    background: var(--blue);
}

.serviceLightBlue .service-card__icon,
.serviceBlue .service-card__icon,
.services article.serviceLightBlue .btn {
    background: var(--lightBlue);
}

.services article:hover .btn,
.services article.serviceLightBlue:hover .btn {
    background: var(--lightBlue);
}

.services article.serviceLightBlue:hover .btn,
.services article.serviceOrange:hover .btn,
.services article.servicePeach:hover .btn,
.services article.serviceYellow:hover .btn {
    background: var(--blue);
}

.services .serviceLightBlue .service-card__image {
    right: 35px;
    bottom: -20px;
    max-width: 221px;
}

.services .serviceLightBlue .service-card__content p,
.services .serviceYellow .service-card__content p {
    max-width: 150px;
}

.services .serviceBlue .service-card__image {
    bottom: 10px;
    right: 65px;
    max-width: 200px;
}

.serviceOrange .service-card__icon,
.services article.serviceOrange .btn {
    background: var(--orange);
}

.services .serviceOrange .service-card__image {
    right: 35px;
    bottom: -40px;
    max-width: 242px;
}

.servicePeach .service-card__icon,
.services article.servicePeach .btn {
    background: var(--peach);
}

.services .servicePeach .service-card__image {
    right: 120px;
    bottom: -20px;
    max-width: 154px;
}

.serviceYellow .service-card__icon,
.services article.serviceYellow .btn {
    background: var(--yellow);
}

.services .serviceYellow .service-card__image {
    right: 78px;
    max-width: 170px;
    bottom: -40px;
}

/* home stats section */
.stats {
    padding: 80px 0;
}

.stats .stats__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1000px;
    margin-inline: auto;
}

.stats .stats__item {
    text-align: center;
}

.stats .stats__number span {
    text-align: center;
    font-size: 76.435px;
    font-style: normal;
    font-weight: 500;
    line-height: 61.148px;
    font-family: var(--fontFrank);
}

.stats .stats__item:first-child .stats__number>span+span {
    text-align: center;
    font-size: 29.347px;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    vertical-align: top;
}

.stats .stats__number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stats .stats-counter {
    display: inline-block;
}

.stats .stats__text {
    color: var(--blue);
    text-align: center;
    font-size: 15.28px;
    font-style: normal;
    font-weight: 400;
    line-height: 105%;
    letter-spacing: 0.306px;
    margin-block: 20px 0;
}

.stats .stats__divider {
    width: 2px;
    height: 65px;
    background: var(--lightBlue);
}

.stats .statsCoffeesConsumed .stats-counter {
    width: 5ch;
}

/* home testimonial section */
.testimonial {
    padding-block: 20px 80px;
}

.testimonial .testimonial__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.testimonial .testimonial__quote {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 55px;
}

.testimonial .testimonial__content {
    max-width: 685px;
    text-align: center;
}

.testimonial .testimonial__text {
    color: var(--blue);
    text-align: center;
    font-family: var(--fontDisplay);
    font-size: 26.429px;
    font-style: normal;
    font-weight: 100;
    line-height: 155%;
    letter-spacing: 0.529px;
}

.testimonial .testimonial__text span {
    background: var(--lightBlue);
    padding: 0px 8px;
    font-family: var(--fontDisplay);
    letter-spacing: 0.529px;
}

.testimonial .testimonial__author {
    color: var(--lightBlue);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 136%;
    letter-spacing: 1.68px;
    text-transform: uppercase;
    margin-block: 35px 0;
}

/* home clients section */
.clients {
    background: var(--lightBlue);
    overflow: hidden;
    padding: 17px 0;
    min-height: 104px;
}

.clients .clients__marquee {
    width: 100%;
    overflow: hidden;
}

.clients .client {
    flex-shrink: 0;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients .clients__track {
    display: flex;
    align-items: center;
    width: fit-content;
    animation: marquee 25s linear infinite;
    gap: 50px;
}

.clients .client img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 70px;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

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

/* home top jobs section */
.top-jobs {
    padding-block: 85px;
}

.top-jobs .top-jobs__wrapper {
    display: grid;
    grid-template-columns: 240px calc(100% - 255px);
    gap: 15px;
    align-items: center;
}

.top-jobs .top-jobs__content {
    text-align: center;
}

.top-jobs .section-title {
    text-align: center;
    font-size: 36.933px;
    font-style: normal;
    font-weight: 500;
    line-height: 98%;
    letter-spacing: 0.369px;
    font-family: var(--fontFrank);
}

.top-jobs .top-jobs__content .btn {
    font-size: 11.066px;
    padding: 9px 27px;
    margin-block: 28px 0;
}

.top-jobs .jobs-slider {
    display: flex;
    align-items: center;
    gap: 18px;
}

.top-jobs .jobs-slider button {
    position: unset;
    background: transparent;
    border: 0;
    height: unset;
    margin: 0;
    min-width: 8px;
}

article.job-card {
    border-radius: 15.428px 15.428px 15.428px 0;
    border: 1.543px solid #FFF;
    background: #FFF;
    padding: 13px 15px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

article.job-card .job-card__top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    justify-content: space-between;
}

article.job-card .job-card__badges {
    line-height: 0;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

article.job-card .job-card__badges span {
    border-radius: 15.428px;
    background: #F1EFE8;
    color: var(--blue);
    font-size: 8.714px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.231px;
    padding: 5px 9px;
    display: inline-block;
}

article.job-card .job-card__date {
    color: var(--blue);
    text-align: center;
    font-size: 8.171px;
    font-style: normal;
    font-weight: 400;
    line-height: 84%;
    letter-spacing: 0.185px;
    min-width: fit-content;
    margin-block: 5px 0;
}

article.job-card .job-card__title {
    font-family: var(--fontDisplay);
    font-size: 24.685px;
    font-style: normal;
    font-weight: 100;
    line-height: 98%;
    margin-block: 45px 14px;
    letter-spacing: 0.247px;
}

article.job-card .job-card__description {
    color: var(--blue);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 152%;
    margin-block: 0 26px;
}

article.job-card .job-card__footer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
    margin-top: auto;
}

article.job-card .job-card__location {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--blue);
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    line-height: 84%;
    letter-spacing: 0.231px;
}

article.job-card .job-card__location svg {
    min-width: 5px;
}

article.job-card .job-card__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

article.job-card .btnReadMore {
    border-radius: 50px;
    border: 0.771px solid var(--blue);
    color: var(--blue);
    font-size: 9px;
    font-style: normal;
    font-weight: 600;
    line-height: 152%;
    padding: 4px 9px;
    transition: var(--transition);
}

article.job-card .btnReadMore:hover {
    background: var(--blue);
    color: #fff;
}

article.job-card .btnWithIcon .btnText {
    color: #FFF;
    font-size: 9px;
    letter-spacing: 0.22px;
    padding: 4px 14px;
    line-height: 152%;
    -webkit-text-stroke: #fff;
    background: var(--blue);
    border: 1px solid var(--blue);
}

article.job-card .job-card__location svg path {
    fill: var(--blue);
}

article.job-card .btnWithIcon:hover .btnText {
    border-color: var(--lightBlue);
    background: var(--lightBlue);
}

article.job-card .btnWithIcon .btnIcon {
    height: 24px;
    width: 24px;
    background: var(--blue);
    padding: 4px;
}

article.job-card .btnWithIcon:hover .btnIcon {
    border-color: var(--lightBlue);
    background: var(--lightBlue);
}

article.job-card .btnWithIcon {
    margin-inline: 0;
}

article.job-card .btnWithIcon .btnIcon img {
    max-width: 14px;
}

article.job-card.serviceOrange .job-card__location svg path {
    fill: var(--orange);
}

article.job-card.serviceOrange .btnWithIcon .btnText {
    background: var(--orange);
    border: 1px solid var(--orange);
}

article.job-card.serviceOrange .btnWithIcon .btnIcon {
    background: var(--orange);
}

article.job-card.serviceOrange .btnReadMore {
    color: var(--orange);
    border: 1px solid var(--orange);
}

article.job-card.serviceOrange .btnReadMore:hover {
    color: #fff;
    background: var(--orange);
}

article.job-card.servicePeach .job-card__location svg path {
    fill: var(--peach);
}

article.job-card.servicePeach .btnWithIcon .btnText {
    background: var(--peach);
    border: 1px solid var(--peach);
}

article.job-card.servicePeach .btnWithIcon .btnIcon {
    background: var(--peach);
}

article.job-card.servicePeach .btnReadMore {
    color: var(--peach);
    border: 1px solid var(--peach);
}

article.job-card.servicePeach .btnReadMore:hover {
    color: #fff;
    background: var(--peach);
}

article.job-card.serviceYellow .job-card__location svg path {
    fill: var(--yellow);
}

article.job-card.serviceYellow .btnWithIcon .btnText {
    background: var(--yellow);
    border: 1px solid var(--yellow);
}

article.job-card.serviceYellow .btnWithIcon .btnIcon {
    background: var(--yellow);
}

article.job-card.serviceYellow .btnReadMore {
    color: var(--yellow);
    border: 1px solid var(--yellow);
}

article.job-card.serviceYellow .btnReadMore:hover {
    color: #fff;
    background: var(--yellow);
}

article.job-card.serviceLightBlue .job-card__location svg path {
    fill: var(--lightBlue);
}

article.job-card.serviceLightBlue .btnWithIcon .btnText {
    background: var(--lightBlue);
    border: 1px solid var(--lightBlue);
}

article.job-card.serviceLightBlue .btnWithIcon .btnIcon {
    background: var(--lightBlue);
}

article.job-card.serviceLightBlue .btnReadMore {
    color: var(--lightBlue);
    border: 1px solid var(--lightBlue);
}

article.job-card.serviceLightBlue .btnReadMore:hover {
    color: #fff;
    background: var(--lightBlue);
}

article.job-card.serviceOrange .btnWithIcon:hover .btnText,
article.job-card.servicePeach .btnWithIcon:hover .btnText,
article.job-card.serviceYellow .btnWithIcon:hover .btnText,
article.job-card.serviceLightBlue .btnWithIcon:hover .btnText {
    background: var(--blue);
    border-color: var(--blue);
}

article.job-card.serviceOrange .btnWithIcon:hover .btnIcon,
article.job-card.servicePeach .btnWithIcon:hover .btnIcon,
article.job-card.serviceYellow .btnWithIcon:hover .btnIcon,
article.job-card.serviceLightBlue .btnWithIcon:hover .btnIcon {
    background: var(--blue);
}

/*breakpoints*/
@media (min-width:0px) and (max-width:749px) {

    .container {
        max-width: 750px;
    }
}

@media (min-width:750px) and (max-width:989px) {

    .container {
        max-width: 750px;
    }
}

@media (min-width:990px) and (max-width:1279px) {

    .container {
        max-width: 990px;
    }
}

/* responsive css start here */

@media(max-width:989px) {

    /* home hero section */
    .hero {
        padding-block: 40px 250px;
    }

    .hero .hero__title {
        font-size: 55px;
    }

    .hero .hero__description {
        margin-block: 30px 0;
    }

    /* home services section */
    .services {
        padding-block: 0 50px;
    }

    .services .services__grid {
        gap: 20px;
        max-width: 710px;
    }

    .services .service-card {
        padding: 15px;
    }

    .service-card__title h3,
    .service-card__title h3 a {
        font-size: 18px;
    }

    .service-card__title {
        max-width: 200px;
    }

    .service-card__icon {
        padding: 14px 7px 3px 7px;
        font-size: 25px;
    }

    .service-card__icon::before {
        top: 8px;
        height: 6px;
        width: 6px;
        left: 12px;
    }

    .services .service-card .btn {
        right: 15px;
        top: 15px;
        font-size: 10.146px;
    }

    .services .service-card__image {
        right: 15px;
        max-width: 170px;
        bottom: 10px;
    }

    .services .serviceLightBlue .service-card__image {
        right: 10px;
        max-width: 180px;
        bottom: 10px;
    }

    .services .serviceBlue .service-card__image {
        right: 10px;
        max-width: 175px;
    }

    .services .serviceOrange .service-card__image {
        right: 5px;
        bottom: 5px;
        max-width: 190px;
    }

    .services .servicePeach .service-card__image {
        right: 35px;
        bottom: -15px;
        max-width: 125px;
    }

    .services .serviceYellow .service-card__image {
        right: 35px;
        bottom: -15px;
        max-width: 140px;
    }

    /* home stats section */
    .stats {
        padding: 50px 0;
    }

    .stats .stats__number span {
        font-size: 55px;
    }

    .stats .stats__text {
        font-size: 14px;
        margin-block: 12px 0;
    }

    /* home testimonial section */
    .testimonial {
        padding-block: 20px 70px;
    }

    .testimonial .testimonial__text {
        font-size: 22px;
    }

    .testimonial .testimonial__author {
        margin-block: 30px 0;
    }

    /*home clients section*/
    .clients {
        min-height: unset;
        padding: 20px 0;
    }

    .clients .clients__track {
        gap: 35px;
    }

    .clients .client img {
        max-height: 50px;
    }

    /* home top jobs section */
    .top-jobs {
        padding-block: 65px;
    }

    .top-jobs .container {
        padding-right: 0;
        max-width: 100%;
    }

    .top-jobs .section-title {
        font-size: 35px;
    }

    .top-jobs .jobs-slider button.custom-next {
        display: none;
    }

    .top-jobs .top-jobs__wrapper {
        grid-template-columns: 200px calc(100% - 215px);
    }

    .top-jobs .top-jobs__content .btn {
        margin-block: 22px 0;
    }
}

@media(max-width:749px) {

    /* buttons */
    .btnWithIcon .btnText {
        font-size: 14px;
        letter-spacing: 0.39px;
        padding: 13px 20px;
    }

    .btnWithIcon .btnIcon {
        height: 38px;
        width: 38px;
        padding: 7px;
    }

    /* home hero section */
    .hero {
        padding-block: 30px 225px;
    }

    .hero .hero__title {
        font-size: 35px;
        letter-spacing: 0.35px;
    }

    .hero .hero__description {
        font-size: 14px;
    }

    /* hero services section */
    .services {
        padding-block: 0;
    }

    .services .service-card__content {
        display: none;
    }

    .services .services__grid {
        gap: 12px;
        max-width: 350px;
    }

    .services .service-card__image {
        position: static;
        margin-inline: auto;
        max-width: 100% !important;
        pointer-events: unset;
    }

    .services .service-card__image img {
        max-height: 105px;
        width: auto;
        margin-inline: auto;
    }

    .services .service-card .btn {
        bottom: 10px;
        top: unset;
        left: 0;
        right: 0;
        width: fit-content;
        margin-inline: auto;
        padding: 8px 14px;
    }

    .services .service-card {
        padding: 10px 12px;
        padding-bottom: 48px;
        border-radius: 20px 20px 20px 0;
    }

    .service-card__title {
        max-width: 100%;
        margin-bottom: 10px;
        gap: 8px;
    }

    .service-card__title h3,
    .service-card__title h3 a {
        font-size: 14.209px;
        line-height: 15.194px;
        letter-spacing: -0.284px;
    }

    .service-card__icon::before {
        top: 6px;
        height: 5px;
        width: 5px;
        left: 10px;
    }

    .service-card__icon {
        font-size: 19.458px;
        padding: 11px 6px 4px 6px;
        border-radius: 8px 8px 8px 0;
    }

    /* home stats section */
    .stats .stats__number span {
        font-size: 34.735px;
        line-height: 1;
    }

    .stats .stats__wrapper {
        gap: 20px;
    }

    .stats .stats__divider {
        display: none;
    }

    .stats .stats__item:first-child .stats__number>span+span {
        font-size: 20.347px;
        vertical-align: middle;
        margin-left: 2px;
        position: relative;
        top: -2px;
    }

    .stats .stats__text {
        font-size: 12px;
        letter-spacing: 0.232px;
        margin-block: 10px 0;
        line-height: 1.2;
    }

    /* home testimonial section */
    .testimonial {
        padding-block: 0 50px;
    }

    .testimonial .testimonial__text {
        font-size: 16px;
        letter-spacing: 0.9px;
    }

    .testimonial .testimonial__wrapper {
        gap: 15px;
    }

    .testimonial .testimonial__quote {
        height: auto;
        width: 50px;
    }

    .testimonial .testimonial__author {
        margin-block: 20px 0;
        font-size: 12px;
    }

    /* home clients section */
    .clients {
        padding: 16px 0;
    }

    .clients .client img {
        max-height: 26px;
    }

    .clients .clients__track {
        gap: 25px;
        animation: marquee 15s linear infinite;
    }

    /* home top jobs section */
    .top-jobs {
        padding-block: 50px 40px;
        overflow: hidden;
    }

    .top-jobs .top-jobs__wrapper {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 40px;
    }

    .top-jobs .top-jobs__content {
        width: 100%;
        padding-right: 20px;
    }

    .top-jobs .section-title {
        font-size: 28px;
        letter-spacing: 0.25px;
    }

    .top-jobs .section-title br {
        display: none;
    }

    .top-jobs .top-jobs__content .btn {
        margin-block: 16px 0;
    }

    .top-jobs .jobs-slider {
        width: 100%;
        gap: 15px;
    }
}

@media(max-width: 389px) {

    /* buttons */
    .btnWithIcon .btnText {
        font-size: 12px;
    }

    .btnWithIcon .btnIcon {
        height: 36px;
        width: 36px;
    }

    /* home hero section */
    .hero {
        padding-block: 20px 220px;
    }

    .hero .hero__title {
        font-size: 30px;
    }

    .hero .hero__description {
        font-size: 13px;
        margin-block: 23px 0;
    }

    /* home services section */
    .service-card__title h3,
    .service-card__title h3 a {
        font-size: 13px;
    }
}