/* ------------------------------------------------------------------ */
/* > New Styles for new Design                                        */
/* ------------------------------------------------------------------ */

:root {
    --text-bg: url("data:image/svg+xml,%3Csvg width='515' height='132' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='url(%23a)' d='M0 0h515v66H0z'/%3E%3Cpath fill='url(%23b)' d='M0 37h515v95H0z'/%3E%3Cpath fill='url(%23c)' d='M0 49h515v83H0z'/%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='33' x2='515' y2='33' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F857A6'/%3E%3Cstop offset='1' stop-color='%23FF5858'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' y1='84.5' x2='515' y2='84.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23F857A6'/%3E%3Cstop offset='1' stop-color='%23FF5858'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' x1='257.5' y1='49' x2='257.5' y2='132' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.485' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    --clr-bg-light-gray: #f5f5f5;
    --clr-bg-black: #111;
}

.bg-light-gray {
    background-color: var(--clr-bg-light-gray);
}
.bg-mi-black {
    background-color: var(--clr-bg-black);
}

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

.link-gradient span {
    background: var(--text-bg);
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    color: transparent;
    background-size: 100% 240%;
    transition: all 0.3s ease;
}

.link-gradient:hover span {
    /* background-position: 0 100%; */
}

.link-gradient .icon {
    transition: all 0.3s ease;
}

.link-gradient:hover .icon {
    transform: rotate(45deg);
}

.link-gradient.icon-white .icon::before {
    background-color: var(--clr-white);
}

.text-clr-gray {
    color: #797979;
}

.btn-small {
    padding: 12px 24px;
}

@media screen and (max-width: 991px) {
    .btn-small {
        padding: 10px 20px;
    }
}

.btn-ghost {
    background-color: transparent;
    color: var(--clr-white);
}

@media only screen and (max-width: 1199px){
    .btn-ghost:hover,.btn-ghost:focus {
        color: var(--clr-white) !important;
    }
}

@media (min-width: 1600px) {
    .n-container {
        max-width: 1464px;
    }
}

/* ################################################################## */
/* START : pink button Desing                                         */

.n-btn {
    text-align: center;
    display: inline-flex;
    align-items: center;
    padding: 16px 25px;
    position: relative;
    border-radius: 200px;
    font-weight: 500;
    overflow: hidden;
    gap: 10px;
    border: 1px solid transparent;
    color: var(--clr-white);
    background: linear-gradient(90deg, #f857a6, #ff5858);
    text-transform: uppercase;
    transition: all 0.3s ease;
}

@media screen and (max-width: 991px) {
    .n-btn {
        padding: 10px 20px;
    }
}
@media screen and (max-width: 1199px) {
    .n-btn .icon {
        transform: rotate(45deg);
        transition: none;
    }
}
@media screen and (max-width: 767px) {
    .n-btn .icon {
        font-size: 20px;
    }
}

.n-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 200px;
    background-color: var(--clr-white);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.n-btn span {
    display: block;
    position: relative;
    z-index: 1;
}

.n-btn .icon {
    transition: all 0.3s ease;
}

.n-btn .icon::before {
    background-color: var(--clr-white);
}

.n-btn:hover {
    color: var(--clr-black);
    /* box-shadow: inset 0 0 0 2px var(--clr-black); */
    border-color: var(--clr-black);
}


@media only screen and (max-width: 1199px){
    .n-btn:hover {
        color: var(--clr-white);
        /* box-shadow: inset 0 0 0 2px var(--clr-black); */
        border-color: transparent;
    }
}

.n-btn:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}
@media only screen and (max-width: 1199px){
    .n-btn:hover::before {
        display: none;
    }
}
.n-btn:hover .icon {
    transform: rotate(45deg);
}

.n-btn:hover .icon::before {
    background-color: var(--clr-black);
}
@media only screen and (max-width: 1199px){
    .n-btn:hover .icon::before {
        background-color: var(--clr-white);
    }
}
.n-btn.n-btn-white:hover {
    background-color: var(--clr-white);
    box-shadow: 0 0 0 0px var(--clr-black);
}

/* END : pink button Desing                                           */
/* ################################################################## */

/* ################################################################## */
/* START : n-hero */

.n-hero {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center -300px;
}

@media screen and (max-width: 2200px) {
    .n-hero {
        background-position: center -200px;
    }
}

@media screen and (max-width: 2000px) {
    .n-hero {
        background-position: center -130px;
    }
}

@media screen and (min-width: 2560px) {
    .n-hero {
        background-position: center -340px;
    }
}

@media screen and (max-width: 991px) {
    .n-hero {
        padding-bottom: 24px;
    }
}

.n-hero .n-hero-tech-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 32px;
}

@media screen and (max-width: 991px) {
    .n-hero .n-hero-tech-list {
        flex-wrap: wrap;
    }
}

@media screen and (max-width: 1439px) {
    .n-hero .n-hero-tech-list .n-hero-tech-item {
        max-width: 60px;
    }
}

.n-hero .n-hero-btns {
    margin-top: 32px;
    display: flex;
    justify-content: center;
    gap: 16px;
}
.n-hero .n-hero-grid {
    display: grid;
    grid-template-columns: 1fr 690px 1fr;
    grid-gap: 50px;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-grid {
        grid-template-columns: 1fr 500px 1fr;
        grid-gap: 40px;
    }
}
@media screen and (max-width: 1439px) {
    .n-hero .n-hero-grid {
        grid-template-columns: 1fr 450px 1fr;
        grid-gap: 20px;
    }
}

@media screen and (max-width: 1199px) {
    .n-hero .n-hero-grid {
        grid-template-columns: 1fr 370px 1fr;
    }
}

@media screen and (max-width: 991px) {
    .n-hero .n-hero-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 991px) {
    .n-hero .n-hero-grid {
        grid-template-columns: 1fr;
        grid-gap: 0;
    }
}

.n-hero .n-hero-block {
    position: absolute;
    padding: 24px;
    border-radius: 16px;
    background-color: var(--clr-white);
    box-shadow: 0 10px 20px 0 rgba(226, 102, 102, 0.2);
    transition: all 0.3s ease;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-block {
        padding: 20px;
    }
}

@media screen and (max-width: 767px) {
    .n-hero .n-hero-block {
        padding: 16px;
        border-radius: 14px;
        display: flex !important;
        align-items: center;
        gap: 10px;
    }
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-block .font-50 {
        font-size: 30px;
    }
    .n-hero .n-hero-block .font-22 {
        font-size: 18px;
        line-height: 1.4;
    }
}

@media screen and (max-width: 767px) {
    .n-hero .n-hero-block .font-22 {
        font-weight: 500;
    }
}

.n-hero .n-hero-block .icon{
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
}
@media screen and (max-width: 1599px) {
    .n-hero .n-hero-block .icon{
        width:30px;
        height: 30px;
        flex: 0 0 30px;
    }
}

.n-hero .n-hero-item.right,
.n-hero .n-hero-item.left {
    position: relative;
}

@media screen and (max-width: 991px) {
    .n-hero .n-hero-item.right,
    .n-hero .n-hero-item.left {
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 991px) {
    .n-hero .n-hero-item.right,
    .n-hero .n-hero-item.left {
        margin-bottom: 10px;
        grid-gap: 10px;
    }
}

@media screen and (max-width: 991px) {
    .n-hero .n-hero-item.middle {
        display: none;
    }

    .n-hero .n-hero-item {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 24px;
    }
}

@media screen and (max-width: 767px) {
    .n-hero .n-hero-item {
        grid-template-columns: 1fr;
        grid-gap: 0;
    }
}

/* right side blocks */

.n-hero .n-hero-item.right .n-hero-block:nth-child(1) {
    top: 80px;
    left: -20px;
    max-width: 240px;
    width: 100%;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.right .n-hero-block:nth-child(1) {
        top: 40px;
        left: 0;
        max-width: 200px;
    }
}

.n-hero .n-hero-item.right .n-hero-block:nth-child(2) {
    top: 320px;
    left: 100px;
    max-width: 214px;
    width: 100%;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.right .n-hero-block:nth-child(2) {
        top: 220px;
        left: initial;
        right: 40px;
        max-width: 184px;
    }
}

@media screen and (max-width: 1439px) {
    .n-hero .n-hero-item.right .n-hero-block:nth-child(2) {
        top: 200px;
        right: 0;
    }
}

.n-hero .n-hero-item.right .n-hero-block:nth-child(3) {
    top: 530px;
    left: 120px;
    max-width: 190px;
    width: 100%;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.right .n-hero-block:nth-child(3) {
        top: 380px;
        left: initial;
        right: 40px;
    }
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.right .n-hero-block:nth-child(3) {
        top: 340px;
        right: 0;
    }
}

.n-hero .n-hero-item.right .n-hero-block:nth-child(4) {
    top: 770px;
    left: -20px;
    width: 270px;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.right .n-hero-block:nth-child(4) {
        top: 580px;
        left: 0;
        width: 200px;
    }
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.right .n-hero-block:nth-child(4) {
        top: 500px;
    }
}

/* left side blocks */

.n-hero .n-hero-item.left .n-hero-block:nth-child(1) {
    top: 80px;
    left: 40px;
    max-width: 240px;
    width: 100%;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(1) {
        top: 40px;
        left: initial;
        right: 0;
        max-width: 224px;
    }
}

.n-hero .n-hero-item.left .n-hero-block:nth-child(2) {
    top: 320px;
    left: -100px;
    max-width: 250px;
    width: 100%;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(2) {
        top: 220px;
        left: 0;
        max-width: 210px;
    }
}
@media screen and (max-width: 1439px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(2) {
        top: 200px;
    }
}

.n-hero .n-hero-item.left .n-hero-block:nth-child(3) {
    top: 530px;
    left: -100px;
    max-width: 212px;
    width: 100%;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(3) {
        top: 380px;
        left: 0;
        max-width: 180px;
    }
}

@media screen and (max-width: 1439px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(3) {
        top: 340px;
    }
}

.n-hero .n-hero-item.left .n-hero-block:nth-child(4) {
    top: 770px;
    left: 8px;
    width: 270px;
}

@media screen and (max-width: 1599px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(4) {
        top: 570px;
        left: initial;
        right: 0;
        max-width: 230px;
    }
}

@media screen and (max-width: 1439px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(4) {
        top: 500px;
    }
}

@media screen and (max-width: 1199px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(1),
    .n-hero .n-hero-item.left .n-hero-block:nth-child(2),
    .n-hero .n-hero-item.left .n-hero-block:nth-child(3),
    .n-hero .n-hero-item.left .n-hero-block:nth-child(4),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(1),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(2),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(3),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(4) {
        position: initial;
        display: block;
        top: initial;
        left: initial;
        right: initial;
        max-width: 100%;
        width: 100%;
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 991px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(1),
    .n-hero .n-hero-item.left .n-hero-block:nth-child(2),
    .n-hero .n-hero-item.left .n-hero-block:nth-child(3),
    .n-hero .n-hero-item.left .n-hero-block:nth-child(4),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(1),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(2),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(3),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(4) {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    .n-hero .n-hero-item.left .n-hero-block:nth-child(1),
    .n-hero .n-hero-item.left .n-hero-block:nth-child(2),
    .n-hero .n-hero-item.left .n-hero-block:nth-child(3),
    .n-hero .n-hero-item.left .n-hero-block:nth-child(4),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(1),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(2),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(3),
    .n-hero .n-hero-item.right .n-hero-block:nth-child(4) {
        border-radius: 10px;
    }
}

.n-hero .n-hero-block .material-symbols-rounded {
    margin-bottom: 12px;
}

@media screen and (max-width: 767px) {
    .n-hero .n-hero-block .material-symbols-rounded {
        margin-bottom: 0;
    }
}

.n-hero .n-hero-block:hover {
    box-shadow:
        0 10px 20px 0 rgba(226, 102, 102, 0.2),
        inset 0 0 0 2px rgba(226, 102, 102, 0.5);
}

/* START : Three Child  */

.n-hero.has-three-items .n-hero-item.left .n-hero-block:nth-child(3) {
    top: 542px;
    left: 30px;
    max-width: 245px;
}

@media screen and (max-width: 1599px) {
    .n-hero.has-three-items .n-hero-item.left .n-hero-block:nth-child(3) {
        top: 420px;
        left: initial;
        max-width: 245px;
        right: 0;
    }
}

@media screen and (max-width: 1199px) {
    .n-hero.has-three-items .n-hero-item.left .n-hero-block:nth-child(3) {
        max-width: 100%;
    }
}

@media screen and (max-width: 1699px) {
    .n-hero.has-three-items .n-hero-item.left .n-hero-block:nth-child(2) {
        top: 310px;
        left: -40px;
    }
}

@media screen and (max-width: 1599px) {
    .n-hero.has-three-items .n-hero-item.left .n-hero-block:nth-child(2) {
        top: 230px;
        left: initial;
        right: 110px;
    }
}

.n-hero.has-three-items .n-hero-item.right .n-hero-block:nth-child(1) {
    left: 40px;
}
@media screen and (max-width: 1599px) {
    .n-hero.has-three-items .n-hero-item.right .n-hero-block:nth-child(1) {
        left: 0;
    }
}

.n-hero.has-three-items .n-hero-item.right .n-hero-block:nth-child(2) {
    left: 150px;
}
@media screen and (max-width: 1599px) {
    .n-hero.has-three-items .n-hero-item.right .n-hero-block:nth-child(2) {
        left: 110px;
    }
}
@media screen and (max-width: 1439px) {
    .n-hero.has-three-items .n-hero-item.right .n-hero-block:nth-child(2) {
        top: 230px;
    }
}

.n-hero.has-three-items .n-hero-item.right .n-hero-block:nth-child(3) {
    top: 560px;
    left: 40px;
    max-width: 220px;
}

@media screen and (max-width: 1599px) {
    .n-hero.has-three-items .n-hero-item.right .n-hero-block:nth-child(3) {
        top: 420px;
        left: 0;
    }
}
@media screen and (max-width: 1199px) {
    .n-hero.has-three-items .n-hero-item.right .n-hero-block:nth-child(3) {
        max-width: 100%;
    }
}

.n-hero.has-three-items .n-hero-item.right,
.n-hero.has-three-items .n-hero-item.left {
    margin-top: 150px;
}
@media screen and (max-width: 1599px) {
    .n-hero.has-three-items .n-hero-item.right,
    .n-hero.has-three-items .n-hero-item.left {
        margin-top: 0;
    }
}

@media screen and (max-width: 1199px) {
    .n-hero.has-three-items .n-hero-item.right,
    .n-hero.has-three-items .n-hero-item.left {
        /* display: flex; */
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

/* END : Three Child  */

/* END : n-hero */
/* ################################################################## */

/* ################################################################## */
/* START : Tech List */

.tech-list {
    background-image: url(../img/tech-list/bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: var(--clr-white);
}

.tech-list .tech-list-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-gap: 24px;
}

@media screen and (max-width: 1439px) {
    .tech-list .tech-list-grid {
        grid-gap: 20px;
    }
}

@media screen and (max-width: 991px) {
    .tech-list .tech-list-grid {
        grid-template-columns: 1fr;
        grid-gap: 10px;
    }
}
@media screen and (max-width: 767px) {
    .tech-list .tech-list-grid {
        grid-gap: 0;
    }
}

.tech-list .tech-list-grid .nav-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    color: var(--clr-black);
}

@media screen and (max-width: 1439px) {
    .tech-list .tech-list-grid .nav-tabs {
        grid-gap: 20px;
    }
}

@media screen and (max-width: 991px) {
    .tech-list .tech-list-grid .nav-tabs {
        display: flex;
        gap: 20px;
        flex-wrap: nowrap;
        overflow: auto;
        padding-bottom: 10px;
    }
}
@media screen and (max-width: 767px) {
    .tech-list .tech-list-grid .nav-tabs {
        gap: 10px;
    }
}

@media only screen and (max-width: 991px){
    .tech-list .tech-list-grid .nav-tabs::-webkit-scrollbar{
        width: 0;
        display: none;
    }
}

.tech-list .tech-list-grid .tech-list-nav-link {
    background-color: var(--clr-white);
    padding: 16px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

@media screen and (max-width: 991px) {
    .tech-list .tech-list-grid .tech-list-nav-link {
        width: 300px;
        display: flex;
        gap: 20px;
        align-items: center;
        height: 100%;
    }
}
@media screen and (max-width: 767px) {
    .tech-list .tech-list-grid .tech-list-nav-link {
        border-radius: 10px;
        padding: 10px;
        gap: 10px;
    }
}

.tech-list .tech-list-grid .tech-list-nav-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffe8e8, #fff);
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.tech-list .tech-list-grid .tech-list-nav-link:hover {
    border-color: #ff5858;
}
.tech-list .tech-list-grid .tech-list-nav-link.active {
    border-color: #ff5858;
}
.tech-list .tech-list-grid .tech-list-nav-link.active::after {
    opacity: 1;
}

.tech-list .tech-list-grid .tech-list-nav-link img,
.tech-list .tech-list-grid .tech-list-nav-link .poppins-medium {
    position: relative;
    z-index: 1;
}

.tech-list .tech-list-card {
    background-color: var(--clr-white);
    padding: 24px;
    border-radius: 16px;
    color: var(--clr-black);
    display: flex;
    height: 100%;
    flex-direction: column;
}

@media screen and (max-width: 1439px) {
    .tech-list .tech-list-card {
        padding: 20px;
    }
}

@media screen and (max-width: 767px) {
    .tech-list .tech-list-card {
        border-radius: 10px;
        padding: 20px 15px;
    }
}

.tech-list .tech-list-card .tech-list-card-text {
    line-height: 32px;
    margin-bottom: auto;
}
@media screen and (max-width: 1199px) {
    .tech-list .tech-list-card .tech-list-card-text {
        line-height: 1.5;
    }
}

.tech-list .tech-list-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 991px) {
    .tech-list .tech-list-card-top {
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 20px;
    }
}

.tech-list .tech-list-card-top .font-24.poppins-medium {
    text-decoration: underline;
    transition: all 0.3s ease;
}
.tech-list .tech-list-card-top .font-24.poppins-medium:hover {
    text-decoration-color: #ed254f;
}

/* END : Tech List   */
/* ################################################################## */

/* ################################################################## */
/* START : New Case Study */

.n-case-study {
    padding: 200px 160px;
    background-image: url(../img/n-case-study/bg.webp);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

@media screen and (max-width: 1799px) {
    .n-case-study {
        padding: 150px 80px;
    }
}

@media screen and (max-width: 1439px) {
    .n-case-study {
        padding: 80px 40px;
    }
}

@media screen and (max-width: 767px) {
    .n-case-study {
        padding: 35px 10px;
    }
}

.n-case-study::after {
    content: "";
    background: url(../img/n-case-study/bg-circle.webp);
    height: calc(100% - 80px);
    width: 100%;
    max-width: 1054px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    z-index: 1;
}

@media screen and (max-width: 991px) {
    .n-case-study::after {
        display: none;
    }
}

.n-case-study .n-case-study-slide {
    background-color: var(--clr-white);
    display: grid;
    grid-template-columns: 1fr 480px;
    grid-gap: 40px;
    border-radius: 40px;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 1599px) {
    .n-case-study .n-case-study-slide {
        border-radius: 30px;
        grid-template-columns: 1fr 380px;
    }
}
@media screen and (max-width: 1199px) {
    .n-case-study .n-case-study-slide {
        grid-gap: 20px;
        grid-template-columns: 1fr 300px;
    }
}

@media screen and (max-width: 991px) {
    .n-case-study .n-case-study-slide {
        grid-template-columns: 1fr;
        grid-gap: 0;
        border-radius: 20px;
    }
}
@media screen and (max-width: 767px) {
    .n-case-study .n-case-study-slide {
        border-radius: 10px;
    }
}

.n-case-study .n-case-study-slide-text p {
    line-height: 1.5;
}

@media screen and (max-width: 767px) {
    .n-case-study .n-case-study-slide-text p {
        font-size: 16px;
    }
}

.n-case-study .n-case-study-slide-text {
    display: grid;
    grid-template-columns: 1fr 290px;
    grid-gap: 80px;
}
@media screen and (max-width: 1799px) {
    .n-case-study .n-case-study-slide-text {
        grid-gap: 10px;
        align-items: flex-start;
    }
}

@media screen and (max-width: 1599px) {
    .n-case-study .n-case-study-slide-text {
        grid-template-columns: 1fr;
    }
}

.n-case-study .n-case-study-slide-text ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media screen and (max-width: 1439px) {
    .n-case-study .n-case-study-slide-text ul {
        gap: 4px;
    }
}
@media screen and (max-width: 1199px) {
    .n-case-study .n-case-study-slide-text ul {
        display: none;
    }
}

.n-case-study .n-case-study-slide-text ul li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.n-case-study .n-case-study-score {
    display: flex;
    gap: 60px;
    margin-bottom: auto;
}

@media screen and (max-width: 1199px) {
    .n-case-study .n-case-study-score {
        gap: 30px;
    }
}

@media screen and (max-width: 991px) {
    .n-case-study .n-case-study-score {
        margin-bottom: 24px;
    }
}

@media screen and (max-width: 767px) {
    .n-case-study .n-case-study-score {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(2, 1fr);
    }
}

.n-case-study .n-case-study-score-item {
    max-width: 170px;
}

.n-case-study .n-case-study-score-item .poppins-bold {
    position: relative;
}

.n-case-study .n-case-study-score-item .poppins-bold::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(0deg, #ec008c, #fc6767);
}

@media screen and (max-width: 1599px) {
    .n-case-study .n-case-study-score-item .font-62 {
        font-size: 34px;
    }
}

@media screen and (max-width: 1199px) {
    .n-case-study .n-case-study-score-item .font-62 {
        font-size: 30px;
    }
}

@media screen and (max-width: 991px) {
    .n-case-study .n-case-study-score-item .font-62 {
        font-size: 26px;
    }
}

.n-case-study .n-case-study-slide-content .icon-check::before {
    background-color: #797979;
}

@media screen and (max-width: 991px) {
    .n-case-study .n-case-study-slide-img {
        order: -1;
    }
}

.n-case-study .n-case-study-slide-img img {
    object-fit: cover;
    height: 680px;
}

@media screen and (max-width: 1599px) {
    .n-case-study .n-case-study-slide-img img {
        height: 100%;
    }
}

@media screen and (max-width: 1199px) {
    .n-case-study .n-case-study-slide-img img {
        height: 580px;
    }
}

@media screen and (max-width: 991px) {
    .n-case-study .n-case-study-slide-img img {
        max-height: 350px;
        height: auto;
        width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .n-case-study .n-case-study-slide-img img {
        max-height: 270px;
    }
}

.n-case-study .n-case-study-slide-content {
    padding: 60px;
    padding-right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

@media screen and (max-width: 1599px) {
    .n-case-study .n-case-study-slide-content {
        padding: 40px 0 40px 40px;
    }
}
@media screen and (max-width: 991px) {
    .n-case-study .n-case-study-slide-content {
        padding: 24px;
    }
}

@media screen and (max-width: 767px) {
    .n-case-study .n-case-study-slide-content {
        padding: 24px 15px 15px;
    }
}

@media screen and (max-width: 767px) {
    .n-case-study .n-case-study-slide-content .n-btn {
        align-self: center;
    }
}

@media screen and (max-width: 1599px) {
    .n-case-study .n-case-study-slide-content .font-64 {
        font-size: 50px;
    }
}

@media screen and (max-width: 1199px) {
    .n-case-study .n-case-study-slide-content .font-64 {
        font-size: 40px;
    }
}

@media screen and (max-width: 991px) {
    .n-case-study .n-case-study-slide-content .font-64 {
        font-size: 34px;
    }
}

.n-case-study .n-case-study-slider-controls {
    position: absolute;
    top: 64px;
    right: 520px;
    display: flex;
    z-index: 9;
    gap: 12px;
}

@media screen and (max-width: 1599px) {
    .n-case-study .n-case-study-slider-controls {
        top: 36px;
        right: 420px;
    }
}

@media screen and (max-width: 1199px) {
    .n-case-study .n-case-study-slider-controls {
        right: 320px;
    }
}

@media screen and (max-width: 991px) {
    .n-case-study .n-case-study-slider-controls {
        right: 24px;
        top: 368px;
    }
}

@media screen and (max-width: 767px) {
    .n-case-study .n-case-study-slider-controls {
        right: initial;
        top: 250px;
        width: 112px;
        justify-content: space-between;
        height: 44px;
        padding-inline: 7px;
        left: 50%;
        transform: translateX(-50%);
        gap: 6px;
        align-items: center;
        background: url("data:image/svg+xml,%3Csvg width='109' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.349.5h68.078a5.5 5.5 0 0 1 4.18 1.926l13.679 16a5.499 5.499 0 0 1 0 7.148l-13.679 16a5.5 5.5 0 0 1-4.18 1.926H20.349a5.5 5.5 0 0 1-4.101-1.835l-14.301-16a5.5 5.5 0 0 1 0-7.33l14.3-16A5.5 5.5 0 0 1 20.35.5Z' stroke='%23878787'/%3E%3C/svg%3E"),
            var(--clr-white);
        background-repeat: no-repeat;
        background-size: 112px 44px;

        clip-path: polygon(
            15.182% 3.736%,
            15.182% 3.736%,
            15.451% 3.047%,
            15.735% 2.424%,
            16.031% 1.869%,
            16.34% 1.383%,
            16.659% 0.967%,
            16.988% 0.623%,
            17.324% 0.353%,
            17.667% 0.158%,
            18.016% 0.04%,
            18.368% 0%,
            82.359% 0%,
            82.359% 0%,
            82.722% 0.042%,
            83.081% 0.167%,
            83.433% 0.374%,
            83.779% 0.661%,
            84.116% 1.025%,
            84.443% 1.465%,
            84.759% 1.98%,
            85.061% 2.567%,
            85.349% 3.225%,
            85.621% 3.952%,
            97.994% 39.666%,
            97.994% 39.666%,
            98.521% 41.461%,
            98.93% 43.437%,
            99.223% 45.549%,
            99.398% 47.752%,
            99.457% 50%,
            99.398% 52.248%,
            99.223% 54.451%,
            98.93% 56.563%,
            98.521% 58.539%,
            97.994% 60.334%,
            85.621% 96.048%,
            85.621% 96.048%,
            85.349% 96.775%,
            85.061% 97.433%,
            84.759% 98.02%,
            84.443% 98.535%,
            84.116% 98.975%,
            83.779% 99.339%,
            83.433% 99.626%,
            83.081% 99.832%,
            82.722% 99.958%,
            82.359% 100%,
            18.368% 100%,
            18.368% 100%,
            18.016% 99.96%,
            17.667% 99.842%,
            17.324% 99.647%,
            16.988% 99.377%,
            16.659% 99.033%,
            16.34% 98.617%,
            16.031% 98.131%,
            15.735% 97.575%,
            15.451% 96.953%,
            15.182% 96.264%,
            2.246% 60.55%,
            2.246% 60.55%,
            1.692% 58.735%,
            1.261% 56.724%,
            0.954% 54.565%,
            0.769% 52.307%,
            0.707% 50%,
            0.769% 47.693%,
            0.954% 45.435%,
            1.261% 43.276%,
            1.692% 41.265%,
            2.246% 39.45%,
            15.182% 3.736%
        );
    }
}

@media screen and (max-width: 350px) {
    .n-case-study .n-case-study-slider-controls {
        top: 206px;
    }
}

.n-case-study .n-case-study-slider {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.n-case-study .n-case-study-slider-btn {
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #999999;
    border-radius: 100px;
    background-color: var(--clr-white);
    transition: all 0.3s ease;
}

@media only screen and (max-width: 1199px){
    .n-case-study .n-case-study-slider-btn {
        transition: none;
    }
}

.n-case-study .n-case-study-slider-btn .icon::before {
    background-color: #999;
}

@media only screen and (max-width: 1199px){
    .n-case-study .n-case-study-slider-btn .icon::before {
        transition: none;
    }
}

.n-case-study .n-case-study-slider-btn:hover {
    background-color: #fc6767;
    border-color: transparent;
}

.n-case-study .n-case-study-slider-btn:hover .icon::before {
    background-color: var(--clr-white);
}

@media screen and (max-width: 767px) {
    .n-case-study .n-case-study-slider-btn {
        border: 0;
        background-color: transparent;
    }
    .n-case-study .n-case-study-slider-btn:hover {
        background-color: transparent;
    }
    .n-case-study .n-case-study-slider-btn:hover .icon::before {
        background-color: #192020;
    }
}

.n-case-study.bottom-space {
    padding: 200px 160px 480px;
}

@media screen and (max-width: 1799px) {
    .n-case-study.bottom-space {
        padding: 150px 80px 420px;
    }
}

@media screen and (max-width: 1439px) {
    .n-case-study.bottom-space {
        padding: 80px 40px 280px;
    }
}

@media screen and (max-width: 991px) {
    .n-case-study.bottom-space {
        padding: 80px 12px 260px;
    }
}

@media screen and (max-width: 767px) {
    .n-case-study.bottom-space {
        padding: 35px 10px 210px;
    }
}

.n-case-study.bottom-space::after {
    top: 40px;
    height: calc(100% - 350px);
    transform: translate(-50%, 0);
}

@media screen and (max-width: 1439px) {
    .n-case-study.bottom-space::after {
        height: calc(100% - 280px);
    }
}

/* END : New Case Study */
/* ################################################################## */

/* ################################################################## */
/* START : New CTA */

.n-cta {
    padding: 0 152px;
}

@media screen and (max-width: 1439px) {
    .n-cta {
        padding: 0 40px;
    }
}

@media screen and (max-width: 991px) {
    .n-cta {
        padding: 0 12px;
    }
}
@media screen and (max-width: 767px) {
    .n-cta {
        padding: 0 10px;
    }
}

.n-cta .n-cta-inner {
    max-width: 1600px;
    margin: 0 auto;
    margin-top: -210px;
    color: var(--clr-white);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 80px;
    position: relative;
    border-radius: 30px;
}

@media screen and (max-width: 1699px) {
    .n-cta .n-cta-inner {
        padding: 60px;
        margin-top: -180px;
    }
}
@media screen and (max-width: 1599px) {
    .n-cta .n-cta-inner {
        padding: 40px;
    }
}

@media screen and (max-width: 1199px) {
    .n-cta .n-cta-inner {
        padding: 32px;
        border-radius: 20px;
    }
}

@media screen and (max-width: 991px) {
    .n-cta .n-cta-inner {
        padding: 24px;
    }
}

@media screen and (max-width: 767px) {
    .n-cta .n-cta-inner {
        border-radius: 10px;
        padding: 16px 16px 22px;
    }
}

.n-cta.n-cta-no-bg .n-cta-inner {
    background-color: #313636;
}

.n-cta.n-cta-secondary .n-cta-inner {
    margin-top: -160px;
}

@media screen and (max-width: 991px) {
    .n-cta.n-cta-secondary .n-cta-inner {
        margin-top: -110px;
    }
}

.n-cta .n-cta-content {
    max-width: 840px;
}

@media screen and (max-width: 1799px) {
    .n-cta .n-cta-content {
        max-width: 750px;
    }
}

@media screen and (max-width: 1365px) {
    .n-cta .n-cta-content {
        max-width: 750px;
    }
}

@media screen and (max-width: 1199px) {
    .n-cta .n-cta-content {
        max-width: 570px;
    }
}

@media screen and (max-width: 991px) {
    .n-cta .n-cta-content {
        max-width: 100%;
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    .n-cta .n-cta-content .font-32 {
        font-size: 22px;
        line-height: 1.4;
    }
}

.n-cta .n-cta-img {
    position: absolute;
    bottom: 0;
    right: 80px;
}

@media screen and (max-width: 1699px) {
    .n-cta .n-cta-img {
        max-width: 350px;
        right: 60px;
    }
}

@media screen and (max-width: 1599px) {
    .n-cta .n-cta-img {
        max-width: 310px;
        right: 40px;
    }
}
@media screen and (max-width: 991px) {
    .n-cta .n-cta-img {
        display: none;
    }
}

/* END : New CTA */
/* ################################################################## */

/* ################################################################## */
/* START : New detail */

.n-detail {
    background-color: #f5f5f5;
}
.n-detail .n-detail-inner {
    max-width: 1140px;
    margin: 0 auto;
}
.n-detail .n-detail-top {
    margin-bottom: 40px;
}

@media screen and (max-width: 991px) {
    .n-detail .n-detail-top {
        margin-bottom: 30px;
    }
}

.n-detail .poppins-normal {
    position: relative;
    z-index: 1;
}

.n-detail .n-detail-title {
    display: flex;
    gap: 20px;
    align-items: center;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 991px) {
    .n-detail .n-detail-title {
        grid-gap: 10px;
    }
}

.n-detail .n-detail-grid {
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 40px;
}

@media screen and (max-width: 991px) {
    .n-detail .n-detail-grid {
        grid-gap: 20px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 767px) {
    .n-detail .n-detail-grid {
        grid-gap: 16px;
        grid-template-columns: 1fr;
        margin-bottom: 20px;
    }
}

.n-detail .n-detail-item {
    padding: 30px;
    background-color: var(--clr-white);
    border: 1px solid #e6e6e6;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

@media screen and (max-width: 991px) {
    .n-detail .n-detail-item {
        padding: 20px;
        border-radius: 20px;
    }
}

@media screen and (max-width: 767px) {
    .n-detail .n-detail-item {
        border-radius: 10px;
    }
}

.n-detail .n-detail-item::after {
    content: "";
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffe8e8, #fff);
    opacity: 0;
    transition: all 0.3s ease;
}

.n-detail .n-detail-item:hover::after {
    opacity: 1;
}

.n-detail .n-detail-item:hover {
    border-color: #ffd7e1;
}

@media screen and (max-width: 991px) {
    .n-detail .n-detail-title img {
        width: 40px;
        height: 40px;
    }
}

.n-detail .n-detail-title .link-black {
    gap: 20px;
}

@media screen and (max-width: 991px) {
    .n-detail .n-detail-title .link-black {
        grid-gap: 10px;
    }
}
.n-detail .n-detail-title .link-black .icon-arrow::before {
    opacity: 1;
}

/* END : New detail */
/* ################################################################## */

/* ################################################################## */
/* START : slide flow */

.slide-flow.has-bg {
    background-image: url("../img/slideflow/bg.webp");
    color: var(--clr-white);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slide-flow .slide-flow-init .swiper-slide {
    width: 500px;
    height: auto;
}

@media screen and (max-width: 991px) {
    .slide-flow .slide-flow-init .swiper-slide {
        width: 400px;
    }
}

@media screen and (max-width: 767px) {
    .slide-flow .slide-flow-init .swiper-slide {
        width: 95%;
    }
}

.slide-flow .slide-flow-card {
    background-color: var(--clr-white);
    border-radius: 24px;
    padding: 30px;
    height: 100%;
    user-select: none;
    color: var(--clr-black);
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 1199px) {
    .slide-flow .slide-flow-card {
        padding: 24px;
        border-radius: 20px;
    }
}

@media screen and (max-width: 991px) {
    .slide-flow .slide-flow-card {
        padding: 20px;
    }
}

@media screen and (max-width: 767px) {
    .slide-flow .slide-flow-card {
        padding: 14px;
        border-radius: 10px;
    }
}

.slide-flow .slide-flow-icon {
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
}

@media screen and (max-width: 991px) {
    .slide-flow .slide-flow-icon {
        height: 46px;
        width: 46px;
    }
}

.slide-flow .slide-flow-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

@media screen and (max-width: 1199px) {
    .slide-flow .slide-flow-card-top {
        margin-bottom: 14px;
    }
}

.slide-flow .slide-flow-pill {
    padding: 11px 14px;
    border-radius: 40px;
    color: #ed184f;
    border: 1px solid #fbc3d2;
}

@media screen and (max-width: 1199px) {
    .slide-flow .slide-flow-pill {
        padding: 6px 12px;
    }
}

.slide-flow .slide-flow-init {
    overflow: visible;
}

.slide-flow ul {
    margin-top: auto;
    display: flex;
    padding-top: 30px;
    gap: 10px;
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
    .slide-flow ul {
        /* padding: 14px; */
    }
}

.slide-flow ul li {
    padding: 11px 14px;
    border-radius: 50px;
    border: 1px solid #fbc3d2;
    background: linear-gradient(135deg, #ffe8e8, #fff);
}

@media screen and (max-width: 1199px) {
    .slide-flow ul li {
        padding: 6px 12px;
    }
}

@media screen and (max-width: 767px) {
    .slide-flow ul li {
        padding: 4px 12px;
    }
}

.slide-flow .slide-flow-bottom {
    margin-top: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width: 991px) {
    .slide-flow .slide-flow-bottom {
        margin-top: 30px;
    }
}

@media screen and (max-width: 370px) {
    .slide-flow .slide-flow-bottom.responsive {
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 10px;
    }

    .slide-flow .slide-flow-bottom.responsive .n-btn {
        align-self: center;
    }
}

.slide-flow .slide-flow-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.slide-flow .slide-flow-nav-btn span {
    transition: all 0.3s ease;
}

@media only screen and (max-width: 1199px){
    .slide-flow .slide-flow-nav-btn span {
        transition: none;
    }
}

.slide-flow .slide-flow-nav-btn {
    height: 56px;
    width: 56px;
    border: 1px solid #fff;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1199px) {
    .slide-flow .slide-flow-nav-btn {
        height: 50px;
        width: 50px;
        transition: none;
    }
}

@media screen and (max-width: 991px) {
    .slide-flow .slide-flow-nav-btn {
        height: 44px;
        width: 44px;
    }
}

.slide-flow .slide-flow-nav-btn span {
    position: relative;
    z-index: 3;
}
@media screen and (max-width: 991px) {
    .slide-flow .slide-flow-nav-btn span {
        font-size: 18px;
    }
}

.slide-flow .slide-flow-nav-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #f857a6, #ff5858);
    opacity: 0;
    z-index: 0;
    transition: all 0.3s ease;
}

@media only screen and (max-width: 1199px){
    .slide-flow .slide-flow-nav-btn::after {
        transition: none;
    }
}

.slide-flow .slide-flow-nav-btn:hover {
    border-color: transparent;
}

.slide-flow .slide-flow-nav-btn:hover,.slide-flow .slide-flow-nav-btn:focus{
    outline: none;
}

.slide-flow .slide-flow-nav-btn:hover::after {
    opacity: 1;
}

.slide-flow .dark .slide-flow-nav-btn {
    border-color: var(--clr-black);
}

.slide-flow .dark .slide-flow-nav-btn:hover {
    border-color: transparent;
}

.slide-flow .dark .slide-flow-nav-btn:hover span {
    color: var(--clr-white);
}
/* END : slide flow */
/* ################################################################## */

/* ################################################################## */
/* START : key insight */

.key-insight .key-insight-grid-wrapper {
    overflow: auto;
}

@media screen and (max-width: 1199px) {
    .key-insight .key-insight-grid-wrapper {
        padding-bottom: 10px;
    }
}

.key-insight .key-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 45px;
}

@media screen and (max-width: 1199px) {
    .key-insight .key-insight-grid {
        grid-gap: 20px;
    }
}

@media screen and (max-width: 991px) {
    .key-insight .key-insight-grid {
        display: flex;
    }
}

.key-insight .key-insight-card {
    display: flex;
    flex-direction: column;
    position: relative;
}

@media screen and (max-width: 991px) {
    .key-insight .key-insight-card {
        width: 45%;
        flex: 0 0 45%;
    }
}

@media screen and (max-width: 767px) {
    .key-insight .key-insight-card {
        width: 90%;
        flex: 0 0 90%;
    }
}

.key-insight .key-insight-card-img {
    position: relative;
}

.key-insight .key-insight-card-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    opacity: 0;
    background: linear-gradient(0deg, #ff5858, transparent);
    transition: all 0.3s ease;
}

.key-insight .key-insight-card:hover .key-insight-card-img::after {
    opacity: 0.5;
}
.key-insight .key-insight-card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.key-insight .key-insight-card-body .btn-black {
    margin-top: auto;
}

.key-insight .key-insight-card-img img {
    border-radius: 24px;
}
@media screen and (max-width: 1199px) {
    .key-insight .key-insight-card-img img {
        border-radius: 20px;
    }
}
@media screen and (max-width: 767px) {
    .key-insight .key-insight-card-img img {
        border-radius: 10px;
    }
}

/* END : key insight */
/* ################################################################## */

/* ################################################################## */
/* START : New Hire Steps */

.n-hire-steps .n-hire-steps-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
@media screen and (max-width: 767px) {
    .n-hire-steps .n-hire-steps-list ul {
        flex-wrap: nowrap;
        overflow: auto;
        white-space: nowrap;
        padding-bottom: 10px;
    }
}

.n-hire-steps .n-hire-steps-list li {
    display: inline-flex;
    align-items: center;
    padding: 11px 14px;
    border: 1px solid #fbc3d2;
    border-radius: 30px;
    gap: 10px;
    background: linear-gradient(90deg, #ffe8e8cd, #ffffff);
}

@media screen and (max-width: 1199px) {
    .n-hire-steps .n-hire-steps-list li {
        padding: 6px 10px;
        gap: 6px;
    }
}
@media screen and (max-width: 991px) {
    .n-hire-steps .n-hire-steps-list li {
        padding: 4px 12px 4px 8px;
        gap: 6px;
    }
}

.n-hire-steps .n-hire-steps-list li .icon::before {
    background-color: #ed184f;
}

.n-hire-steps .n-hire-steps-card-list {
    display: grid;
    grid-gap: 10px;
}

.n-hire-steps .n-hire-steps-card {
    padding: 30px;
    border-radius: 24px;
    background-color: var(--clr-white);
    display: flex;
    gap: 30px;
    border: 1px solid #e6e6e6;
    position: relative;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1439px) {
    .n-hire-steps .n-hire-steps-card {
        padding: 20px;
    }
}

@media screen and (max-width: 991px) {
    .n-hire-steps .n-hire-steps-card {
        border-radius: 20px;
        gap: 20px;
    }
}

@media screen and (max-width: 767px) {
    .n-hire-steps .n-hire-steps-card {
        border-radius: 10px;
        padding: 14px;
        flex-direction: column;
        gap: 10px;
    }
}

.n-hire-steps .n-hire-steps-card:not(:first-child):before {
    content: "";
    position: absolute;
    top: -114px;
    left: 58px;
    height: 100%;
    width: 1px;
    background-color: #fbc3d2;
    z-index: 0;
}

@media screen and (max-width: 1439px) {
    .n-hire-steps .n-hire-steps-card:not(:first-child):before {
        left: 48px;
        top: -94px;
    }
}

@media screen and (max-width: 1199px) {
    .n-hire-steps .n-hire-steps-card:not(:first-child):before {
        top: -114px;
    }
}

@media screen and (max-width: 991px) {
    .n-hire-steps .n-hire-steps-card:not(:first-child):before {
        top: -94px;
        left: 48px;
    }
}

@media screen and (max-width: 767px) {
    .n-hire-steps .n-hire-steps-card:not(:first-child):before {
        display: none;
    }
}

.n-hire-steps .n-hire-steps-card.is-active {
    border-color: #fbc3d2;
    box-shadow: 0px 25px 25px 0 #ee174c05;
}

.n-hire-steps .n-hire-steps-card-icon {
    position: relative;
    height: 56px;
    width: 56px;
    flex: 0 0 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    border: 1px solid #fbc3d2;
    color: #ed184f;
    overflow: hidden;
    background: var(--clr-white);
    transition: all 0.3s ease;
    z-index: 3;
}

@media screen and (max-width: 767px) {
    .n-hire-steps .n-hire-steps-card-icon {
        height: 40px;
        width: 40px;
        flex: 0 0 40px;
    }
}

.n-hire-steps .n-hire-steps-card-icon::before {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #f857a6, #ff5858);
    opacity: 0;
    transition: all 0.3s ease;
}

.n-hire-steps .n-hire-steps-card .n-hire-steps-card-icon i:before{
    background-color: #ed184f;
}
.n-hire-steps .n-hire-steps-card.is-active .n-hire-steps-card-icon i:before{
    background-color: #ffffff;
}

.n-hire-steps .n-hire-steps-card-icon span {
    position: relative;
    z-index: 2;
}

@media screen and (max-width: 767px) {
    .n-hire-steps .n-hire-steps-card-icon span {
        font-size: 18px;
    }
}

.n-hire-steps .n-hire-steps-card.is-active .n-hire-steps-card-icon {
    color: #fff;
}

.n-hire-steps .n-hire-steps-card.is-active .n-hire-steps-card-icon::before {
    opacity: 1;
}

.n-hire-steps .n-hire-steps-card .poppins-normal {
    color: #192020;
}

/* END : New Hire Steps */
/* ################################################################## */

/* ################################################################## */
/* START : Tech Stack */

.tech-stack .tech-stack-grid {
    display: grid;
    grid-gap: 10px;
}

.tech-stack .tech-stack-item ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media screen and (max-width: 1365px) {
    .tech-stack .tech-stack-item ul {
        gap: 8px;
    }
}

@media screen and (max-width: 767px) {
    .tech-stack .tech-stack-item ul {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: auto;
        padding-bottom: 10px;
    }
}

.tech-stack .tech-stack-item ul li {
    display: flex;
    justify-content: center;
    gap: 10px;
    background-color: var(--clr-white);
    border-radius: 100px;
    border: 1px solid #fbc3d2;
    padding: 11px 14px;
    background: linear-gradient(90deg, #fff7f7, #ffffff);
}

@media screen and (max-width: 1365px) {
    .tech-stack .tech-stack-item ul li {
        padding: 6px 12px;
    }
}
@media screen and (max-width: 767px) {
    .tech-stack .tech-stack-item ul li {
        padding: 4px 12px 4px 8px;
        gap: 6px;
    }
}

.tech-stack .tech-stack-item ul li .icon::before {
    background-color: #ed184f;
}

.tech-stack .tech-stack-item {
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #fbc3d2;
    background: linear-gradient(90deg, #ffe8e8, #ffffff);
    display: grid;
    grid-template-columns: 410px 1fr;
    grid-gap: 10px;
    align-items: center;
}

@media screen and (max-width: 1439px) {
    .tech-stack .tech-stack-item {
        grid-template-columns: 320px 1fr;
    }
}

@media screen and (max-width: 1365px) {
    .tech-stack .tech-stack-item {
        grid-template-columns: 1fr;
        grid-gap: 20px;
    }
}
@media screen and (max-width: 1199px) {
    .tech-stack .tech-stack-item {
        padding: 20px;
    }
}
@media screen and (max-width: 767px) {
    .tech-stack .tech-stack-item {
        padding: 12px 10px;
        border-radius: 12px;
    }
}

.tech-stack .tech-stack-title {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tech-stack .tech-stack-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
    width: 56px;
    border-radius: 56px;
}

@media screen and (max-width: 767px) {
    .tech-stack .tech-stack-icon {
        width: 40px;
        height: 40px;
    }

    .tech-stack .tech-stack-icon span {
        font-size: 20px;
    }
}

.tech-stack .tech-stack-icon .icon{
    width: 24px;
    height: 24px;
}

/* END : Tech Stack */
/* ################################################################## */

/* ################################################################## */
/* START : key skills */

.n-key-skills {
    background: url("../img/n-key-skills/bg.webp");
    color: var(--clr-white);
}
.n-key-skills .n-key-skills-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.n-key-skills .icon-check-dark::before {
    background-color: var(--clr-white);
}

.n-key-skills .n-key-skills-card {
    padding: 15px;
    display: flex;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(25px);
    border-radius: 15px;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .n-key-skills .n-key-skills-card {
        border-radius: 10px;
        margin-bottom: 10px;
    }
}

@media screen and (max-width: 320px) {
    .n-key-skills .n-key-skills-card {
        flex-direction: column;
    }
}

/* END : key skills */
/* ################################################################## */

/* ################################################################## */
/* START : industries insights */

.industries-insights .industries-insights-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.industries-insights .nav {
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    margin-bottom: 38px;
    padding-bottom: 2px;
}

@media screen and (max-width: 1439px) {
    .industries-insights .nav {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 991px) {
    .industries-insights .nav {
        overflow-x: auto;
        overflow-y: hidden;
    }
}

.industries-insights .industries-insights-nav-link {
    color: #bec0c0;
    padding: 16px;
    width: 100%;
    background-color: transparent;
    position: relative;
    transition: all 0.3s ease;
}

@media screen and (max-width: 767px) {
    .industries-insights .industries-insights-nav-link {
        padding: 12px 20px;
    }
}

.industries-insights .industries-insights-nav-link::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #ed254f;
    top: 100%;
    left: 0;
    border-radius: 30px;
    pointer-events: none;
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.industries-insights .industries-insights-nav-link.active {
    color: #ed184f;
    background-color: transparent;
    font-weight: 500;
}
.industries-insights .industries-insights-nav-link.active::after {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.industries-insights .industries-insights-nav-link:hover:not(.active) {
    color: #000;
}

.industries-insights .industries-insights-content {
    display: flex;
    gap: 45px;
}

@media screen and (max-width: 1439px) {
    .industries-insights .industries-insights-content {
        gap: 20px;
    }
}

@media screen and (max-width: 991px) {
    .industries-insights .industries-insights-content {
        overflow: auto;
        padding-bottom: 10px;
    }
}

.industries-insights .industries-insights-content-item {
    width: calc(33% - 26px);
    flex: 0 0 calc(33% - 26px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
@media screen and (max-width: 1439px) {
    .industries-insights .industries-insights-content-item {
        width: calc(33% - 10px);
        flex: 0 0 calc(33% - 10px);
    }
}
@media screen and (max-width: 991px) {
    .industries-insights .industries-insights-content-item {
        width: calc(46.5% - 10px);
        flex: 0 0 calc(46.5% - 10px);
    }
}
@media screen and (max-width: 767px) {
    .industries-insights .industries-insights-content-item {
        width: calc(90% - 10px);
        flex: 0 0 calc(90% - 10px);
    }
}

.industries-insights .industries-insights-content-item .btn-white {
    background-color: transparent;
    margin-top: auto;
}

.industries-insights .industries-insights-content-item-img {
    border-radius: 24px;
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .industries-insights .industries-insights-content-item-img {
        border-radius: 10px;
    }
}

.industries-insights.industries-insights-has-spacing {
    padding-bottom: 240px;
}

@media screen and (max-width: 991px) {
    .industries-insights.industries-insights-has-spacing {
        padding-bottom: 160px;
    }
}

@media screen and (max-width: 767px) {
    .industries-insights.industries-insights-has-spacing {
        padding-bottom: 140px;
    }
}

.industries-insights .industries-insights-content-item-img {
    position: relative;
}

.industries-insights .industries-insights-content-item-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: linear-gradient(0deg, #ff5858, transparent);
    /* border-radius: 24px; */
    transition: all 0.3s ease;
}

.industries-insights .industries-insights-content-item:hover .industries-insights-content-item-img::after {
    opacity: 0.5;
}

/* END : industries insights */
/* ################################################################## */

/* ################################################################## */
/* START : New About us */

.n-about-us .n-about-us-content {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

@media screen and (max-width: 1439px) {
    .n-about-us .n-about-us-content {
        gap: 24px;
    }
}

.n-about-us .n-about-us-item {
    max-width: 370px;
}

@media screen and (max-width: 1599px) {
    .n-about-us .n-about-us-item {
        max-width: 27.007%;
    }
}

@media screen and (max-width: 1199px) {
    .n-about-us .n-about-us-item {
        max-width: calc(50% - 12px);
    }
}

@media screen and (max-width: 767px) {
    .n-about-us .n-about-us-item {
        max-width: 100%;
    }
}

.n-about-us .n-about-us-item.n-about-us-item--card {
    padding: 30px;
    display: flex;
    border-radius: 24px;
    max-width: 495px;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-end;
}

@media screen and (max-width: 1599px) {
    .n-about-us .n-about-us-item.n-about-us-item--card {
        max-width: 33.4%;
        padding: 20px;
        border-radius: 20px;
    }
}

@media screen and (max-width: 1199px) {
    .n-about-us .n-about-us-item.n-about-us-item--card {
        max-width: calc(50% - 12px);
    }
}

@media screen and (max-width: 767px) {
    .n-about-us .n-about-us-item.n-about-us-item--card {
        max-width: 100%;
        width: 100%;
        flex: 0 0 calc(100vw - 50px);
        border-radius: 10px;
        padding: 16px;
    }
}

@media (max-width: 1439px) and (min-width: 1366px) {
    .n-about-us .n-about-us-item.n-about-us-item--card .font-60 {
        font-size: 40px;
    }
}

.n-about-us .n-about-us-item.n-about-us-item--card img {
    border-radius: 16px;
}
@media screen and (max-width: 1599px) {
    .n-about-us .n-about-us-item.n-about-us-item--card img {
        max-width: 150px;
    }
}
@media screen and (max-width: 767px) {
    .n-about-us .n-about-us-item.n-about-us-item--card img {
        max-width: 120px;
        border-radius: 10px;
    }
}

.n-about-us .n-about-us-item.n-about-us-item--card .font-60 {
    line-height: 1;
}

.n-about-us .n-about-us-slider-nav {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.n-about-us .swiper-slide {
    height: auto;
}

.n-about-us .n-about-us-slider-card {
    border: 1px solid #fbc3d2;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    background: linear-gradient(135deg, #ffe8e8, #fff);
}

@media screen and (max-width: 767px) {
    .n-about-us .n-about-us-slider-card {
        border-radius: 10px;
        padding: 16px;
    }
}

/* END : New About us */
/* ################################################################## */

/* ################################################################## */
/* START : New Testimonial */

.n-testimonials {
    background: linear-gradient(135deg, #ffe8e8, #fff);
}
.n-testimonials .n-testimonials-card {
    position: relative;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
}

@media screen and (max-width: 991px) {
    .n-testimonials .n-testimonials-card {
        grid-template-columns: 1fr;
    }
}

.n-testimonials .n-testimonials-bottom > img {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    object-fit: cover;
}

.n-testimonials .n-testimonials-bottom {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

@media screen and (max-width: 991px) {
    .n-testimonials .n-testimonials-bottom {
        border-radius: 20px;
    }
}

@media screen and (max-width: 767px) {
    .n-testimonials .n-testimonials-bottom {
        border-radius: 10px;
    }
}

.n-testimonials .n-testimonials-wrapper {
    backdrop-filter: blur(20px);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--clr-white);
    background-color: rgba(25, 32, 32, 0.2);
}

@media screen and (max-width: 1199px) {
    .n-testimonials .n-testimonials-wrapper {
        position: static;
        background-color: var(--clr-black);
    }
}

@media screen and (max-width: 991px) {
    .n-testimonials .n-testimonials-wrapper {
        position: absolute;
        background-color: rgba(25, 32, 32, 0.2);
        padding: 16px;
    }
}

@media screen and (max-width: 767px) {
    .n-testimonials .n-testimonials-wrapper {
        position: static;
        background-color: var(--clr-black);
        padding: 12px;
    }
}

.n-testimonials .n-testimonials-play {
    position: relative;
    height: 56px;
    width: 56px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--clr-white);
    overflow: hidden;
    transition: all 0.3s ease;
}

.n-testimonials .n-testimonials-play span {
    position: relative;
    z-index: 1;
}

.n-testimonials .n-testimonials-play::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(135deg, #ed184f, #fbc3d2);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.n-testimonials .n-testimonials-play:hover {
    border-color: transparent;
}

.n-testimonials .n-testimonials-play:hover::after {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.n-testimonials .swiper {
    position: relative;
}

.n-testimonials .n-testimonials-nav {
    position: absolute;
    bottom: 20px;
    left: 0;
    display: flex;
    z-index: 10;
    gap: 10px;
}

@media screen and (max-width: 991px) {
    .n-testimonials .n-testimonials-nav {
        position: static;
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
    }
}

.n-testimonials .n-testimonials-nav .n-testimonials-button {
    position: relative;
    height: 56px;
    width: 56px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--clr-black);
    overflow: hidden;
    transition: all 0.3s ease;
}

@media only screen and (max-width: 1199px){
    .n-testimonials .n-testimonials-nav .n-testimonials-button {
        transition: none;
    }
}


@media screen and (max-width: 991px) {
    .n-testimonials .n-testimonials-play,
    .n-testimonials .n-testimonials-nav .n-testimonials-button {
        width: 46px;
        height: 46px;
    }
}

.n-testimonials .n-testimonials-nav .n-testimonials-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(135deg, #ed184f, #fbc3d2);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

@media only screen and (max-width: 1199px){
    .n-testimonials .n-testimonials-nav .n-testimonials-button::after {
        transition: none;
    }
}

.n-testimonials .n-testimonials-nav .n-testimonials-button span {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

@media only screen and (max-width: 1199px){
    .n-testimonials .n-testimonials-nav .n-testimonials-button span {
        transition: none;
    }
}

.n-testimonials .n-testimonials-nav .n-testimonials-button:hover span {
    color: var(--clr-white);
}

.n-testimonials .n-testimonials-nav .n-testimonials-button:hover {
    border-color: transparent;
}

.n-testimonials .n-testimonials-nav .n-testimonials-button:hover,.n-testimonials .n-testimonials-nav .n-testimonials-button:focus {
    outline: none;
}

.n-testimonials .n-testimonials-nav .n-testimonials-button:hover::after {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

/* END : New Testimonial */
/* ################################################################## */

/* ################################################################## */
/* START : New Service */

.n-services {
    color: var(--clr-white);
}

.n-services .n-services-slide {
    position: relative;
    display: block;
    border-radius: 24px;
    overflow: hidden;
}

@media screen and (max-width: 991px) {
    .n-services .n-services-slide {
        border-radius: 20px;
    }
}

@media screen and (max-width: 767px) {
    .n-services .n-services-slide {
        border-radius: 10px;
    }
}

.n-services .n-services-slide img {
    transition: all 0.3s ease;
}
.n-services .n-services-slide:hover img {
    transform: scale(1.04);
}

.n-services .n-services-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 14px 20px;
    background-color: rgba(25, 32, 32, 0.5);
    backdrop-filter: blur(20px);
}

@media screen and (max-width: 991px) {
    .n-services .n-services-text {
        padding: 10px 16px;
    }
}

@media screen and (max-width: 767px) {
    .n-services .n-services-text {
        padding: 8px 12px;
    }
}

.n-services .swiper-slide {
    width: 454px;
}

@media screen and (max-width: 767px) {
    .n-services .swiper-slide {
        width: 95%;
    }
}

.n-services .n-services-slider {
    overflow: visible;
}

.n-services .n-services-slider-nav {
    display: flex;
    gap: 10px;
}
.n-services .n-services-slider-button {
    position: relative;
    height: 56px;
    width: 56px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--clr-white);
    overflow: hidden;
    transition: all 0.3s ease;
}

@media only screen and (max-width: 1199px){
    .n-services .n-services-slider-button {
        transition: none;
    }
}


@media screen and (max-width: 991px) {
    .n-services .n-services-slider-button {
        width: 46px;
        height: 46px;
    }
}

.n-services .n-services-slider-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(135deg, #ed184f, #fbc3d2);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

@media only screen and (max-width: 1199px){
    .n-services .n-services-slider-button::after {
        transition: none;
    }
}

.n-services .n-services-slider-button .icon {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

@media only screen and (max-width: 1199px){
    .n-services .n-services-slider-button .icon {
        transition: none;
    }
}

.n-services .n-services-slider-button .icon:before {
    background-color: var(--clr-white);
}

.n-services .n-services-slider-button:hover {
    border-color: transparent;
}

.n-services .n-services-slider-button:hover,.n-services .n-services-slider-button:focus {
    outline: none;
}

.n-services .n-services-slider-button:hover::after {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

/* END : New Service */
/* ################################################################## */

/* ################################################################## */
/* START : New Faq */

.n-faq .accordion {
    display: grid;
    grid-gap: 10px;
}

.n-faq .accordion-body {
    padding-top: 0;
    /*background-color: #f7f7f7;*/
    background-color: var(--clr-off-white);
}

@media screen and (max-width: 767px) {
    .n-faq .accordion-body {
        padding: 0 10px 10px;
    }
}

.n-faq .accordion-item {
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}
@media screen and (max-width: 1199px) {
    .n-faq .accordion-item {
        transition: none;
    }
}
@media screen and (max-width: 767px) {
    .n-faq .accordion-item {
        border-radius: 10px;
    }
}

.n-faq .accordion-item:hover {
    /*background-color: #f7f7f7 !important;*/
    background-color: var(--clr-off-white) !important;
}

.n-faq .accordion-button::after {
    top: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cmask id='a' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3E%3Cpath fill='%23D9D9D9' d='M0 0h24v24H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath d='M11.25 12.75h-5a.726.726 0 0 1-.534-.216A.726.726 0 0 1 5.5 12c0-.213.072-.391.216-.535a.726.726 0 0 1 .534-.215h5v-5c0-.213.072-.39.216-.534A.726.726 0 0 1 12 5.5c.213 0 .391.072.535.216a.726.726 0 0 1 .215.534v5h5c.212 0 .39.072.534.216A.726.726 0 0 1 18.5 12c0 .213-.072.391-.216.535a.726.726 0 0 1-.534.215h-5v5c0 .212-.072.39-.216.534A.726.726 0 0 1 12 18.5a.725.725 0 0 1-.535-.216.726.726 0 0 1-.215-.534v-5Z' fill='%23192020'/%3E%3C/g%3E%3C/svg%3E");
}

@media only screen and (max-width: 1199px){
    .n-faq .accordion-button::after {
        transition: none;
    }
}

.n-faq .accordion-button:not(.collapsed) {
    /*background-color: #f7f7f7;*/
    background-color: var(--clr-off-white);
    color: #192020;
    box-shadow: none;
}

.n-faq .accordion-button {
    align-items: flex-start;
    gap: 10px;
}
@media screen and (max-width: 1199px) {
    .n-faq .accordion-button {
        transition: none;
    }
}
@media screen and (max-width: 767px) {
    .n-faq .accordion-button {
        padding: 10px;
    }
}

.n-faq .accordion-button:not(.collapsed)::after {
    transform: rotate(calc(-45deg + -90deg)) scale(1.2);
}

.n-faq .accordion-button:focus {
    box-shadow: none;
}

.n-faq .accordion-body p {
    margin: 0;
    font-weight: 400;
}
.n-faq .accordion-body p + p {
    margin-top: 16px;
}
.n-faq .accordion-body p a {
    text-decoration: underline;
    color: #ed184f;
    transition: all 0.3s ease;
}
.n-faq .accordion-body p a:hover {
    opacity: 0.9;
    text-decoration-color: transparent;
}
.n-faq .accordion-body ul {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 20px 0 0;
    gap: 5px;
    padding: 0;
    list-style-type: none;
}
.n-faq .accordion-body ul li {
    position: relative;
    border-radius: 16px;
    padding: 5px 18px 5px 40px;
}
@media screen and (max-width: 1023px) {
    .n-faq .accordion-body ul li {
        padding: 5px 16px 5px 40px;
    }
}
@media screen and (max-width: 767px) {
    .n-faq .accordion-body ul li {
        padding: 5px 10px 5px 30px;
    }
}
.n-faq .accordion-body ul li::before {
    content: "";
    height: 20px;
    width: 20px;
    left: 12px;
    top: 9px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cmask id='a' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='20' height='20'%3E%3Cpath fill='%23D9D9D9' d='M0 0h20v20H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath d='M8.816 11.79 6.88 9.852a.604.604 0 0 0-.435-.177.589.589 0 0 0-.443.177.598.598 0 0 0-.181.44c0 .171.06.318.18.438l2.288 2.287c.15.15.326.226.527.226.2 0 .377-.075.527-.226l4.636-4.636a.604.604 0 0 0 .178-.435.589.589 0 0 0-.178-.443.598.598 0 0 0-.439-.181.598.598 0 0 0-.439.18L8.816 11.79ZM10 17.916a7.711 7.711 0 0 1-3.088-.623 7.997 7.997 0 0 1-2.514-1.692 7.994 7.994 0 0 1-1.692-2.513 7.704 7.704 0 0 1-.624-3.087c0-1.095.208-2.124.623-3.088A7.997 7.997 0 0 1 4.397 4.4 7.993 7.993 0 0 1 6.91 2.708a7.704 7.704 0 0 1 3.087-.624c1.095 0 2.124.208 3.088.623.963.416 1.801.98 2.514 1.692a7.992 7.992 0 0 1 1.693 2.513c.415.963.623 1.992.623 3.087a7.713 7.713 0 0 1-.623 3.088A7.997 7.997 0 0 1 15.6 15.6a7.995 7.995 0 0 1-2.513 1.693 7.705 7.705 0 0 1-3.087.623ZM10 16.667c1.86 0 3.437-.646 4.729-1.937 1.292-1.292 1.937-2.868 1.937-4.73 0-1.86-.645-3.437-1.937-4.729-1.292-1.291-2.868-1.937-4.73-1.937-1.86 0-3.437.646-4.728 1.937-1.292 1.292-1.938 2.869-1.938 4.73 0 1.86.646 3.437 1.938 4.729 1.291 1.291 2.868 1.937 4.729 1.937Z' fill='%23192020'/%3E%3C/g%3E%3C/svg%3E");
}
@media screen and (max-width: 1200px) {
    .n-faq .accordion-body ul li::before {
        top: 8px;
    }
}

@media screen and (max-width: 767px) {
    .n-faq .accordion-body ul li::before {
        left: 5px;
    }
}

/* END : New Faq */
/* ################################################################## */

/* ################################################################## */
/* START : Tech Experiences */

.tech-experiences {
    color: var(--clr-white);
}

.tech-experiences .nav-link {
    text-align: center;
    display: inline-flex;
    align-items: center;
    padding: 10px 25px;
    position: relative;
    border-radius: 200px;
    font-weight: 500;
    overflow: hidden;
    gap: 10px;
    border: 0;
    color: var(--clr-white);
    background-color: transparent;
    transition: all 0.3s ease;
}

.tech-experiences .nav-link span {
    display: block;
    position: relative;
    z-index: 1;
}

.tech-experiences .nav-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 200px;
    background: linear-gradient(90deg, #f857a6, #ff5858);
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.tech-experiences nav {
    display: flex;
    justify-content: center;
    overflow: auto;
}

@media screen and (max-width: 767px) {
    .tech-experiences nav {
        justify-content: flex-start;
        padding-bottom: 10px;
    }
}

.tech-experiences .nav-tabs {
    background-color: #222222;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 10px;
    justify-content: center;
    padding: 4px;
    border-radius: 100px;
    border: 1px solid #333333;
}

.tech-experiences .nav-tabs .nav-link:hover {
    background-color: transparent;
    color: var(--clr-white);
}

.tech-experiences .nav-tabs .nav-link.active {
    border-color: transparent;
    background-color: transparent;
    color: var(--clr-white);
}

.tech-experiences .nav-tabs .nav-link.active::before,
.tech-experiences .nav-link:hover::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.tech-experiences .tech-experiences-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 30px 40px;
}

@media screen and (max-width: 991px) {
    .tech-experiences .tech-experiences-list {
        grid-gap: 20px;
    }
}

@media screen and (max-width: 767px) {
    .tech-experiences .tech-experiences-list {
        grid-template-columns: 1fr;
    }
}

.tech-experiences .tech-experiences-card {
    padding: 20px;
    border-bottom: 1px solid #ffffff4d;
    position: relative;
    transition: all 0.3s ease;
}

@media screen and (max-width: 767px) {
    .tech-experiences .tech-experiences-card p {
        font-size: 14px;
        line-height: 1.5;
    }
}

.tech-experiences .tech-experiences-card:hover {
    background-color: #292929;
}
.tech-experiences .tech-experiences-card::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #ffffff;
    bottom: 0;
    left: 0;
    border-radius: 30px;
    pointer-events: none;
    transform-origin: 100% 50%;
    transform: scale3d(0, 1, 1);
    transition: transform 0.3s;
}

.tech-experiences .tech-experiences-card:hover::after {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.tech-experiences .tech-experiences-card .icon {
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: 0;
    transition: all 0.3s ease;
}

.tech-experiences .tech-experiences-card:hover .icon {
    opacity: 1;
}

.tech-experiences .tech-experiences-card-title {
    background: var(--text-bg);
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
    color: transparent;
    background-size: 100% 240%;
    background-position: 0 100%;
    transition: all 0.3s ease;
}

.tech-experiences .tech-experiences-card:hover .tech-experiences-card-title {
    background-position: 0 0;
}

.tech-experiences .tech-experiences-card .icon::before {
    background-color: #fff;
}

/* END : Tech Experiences */
/* ################################################################## */