* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #0C0E18;
}

.hidden-xs {
    display: block;
}

.visible-xs {
    display: none;
}

.with-icon i {
    font-size: 16px;
}

.with-icon {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.mt-20 {
    margin-top: 20px;
}

.mr-12 {
    margin-right: 12px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-26 {
    margin-top: 26px;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
    margin: 0;
    font-family: "Poppins", sans-serif;
}

p {
    font-family: "Inter", sans-serif;
    margin: 0;
}

.p-relative {
    position: relative;
}

.p-absolute {
    position: absolute;
}

.color-green {
    color: #2EE89E;
}

.mt-22 {
    margin-top: 22px;
}


/* ==== Button Dark Starter ==== */

.btn.btn-dark {
    font-weight: bold;
    color: #0C0E18;
    background-color: #2EE89E;
    width: 190px;
    height: 54px;
    align-content: center;
    text-align: center;
    border: none;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.btn.btn-dark span:not(:nth-child(6)) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 30px;
    width: 30px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: .6s ease;
}

.btn.btn-dark span:nth-child(6) {
    position: relative;
}

.btn.btn-dark span:nth-child(1) {
    transform: translate(-3.3em, -4em);
}

.btn.btn-dark span:nth-child(2) {
    transform: translate(-6em, 1.8em);
}

.btn.btn-dark span:nth-child(3) {
    transform: translate(-.2em, 1.8em);
}

.btn.btn-dark span:nth-child(4) {
    transform: translate(3.5em, 2.4em);
}

.btn.btn-dark span:nth-child(5) {
    transform: translate(3.5em, -3.8em);
}

.btn.btn-dark:hover span:not(:nth-child(6)) {
    transform: translate(-50%, -50%) scale(14);
    transition: 1.6s ease;
}


.btn.btn-dark em {
    font-style: normal;
}

.bg-nav {
    background-color: #0C0E18;
    height: 72px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 4px 0 #F2F5FA;
    position: sticky;
    top: 0;
    z-index: 999;
    transition: all 0.3s ease;
}


.bg-nav.scrolled {
    height: 60px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.bg-nav {
    transform: translateY(0);
}

.bg-nav.scrolled {
    transform: translateY(0);
    /* ya -5px for subtle move */
}

.navbar-expand-lg .navbar-collapse {
    justify-content: center;
}

.navbar-brand.logo {
    color: #2EE89E;
    font-weight: 700;
    font-family: "Poppins", sans-serif;
}

.navbar-expand-lg .navbar-collapse .nav-item a {
    color: #949EB8;
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    line-height: 20px;
    position: relative;
}

.navbar-expand-lg .navbar-collapse .nav-item a {
    position: relative;
    transition: all 0.3s ease;
}

.navbar-expand-lg .navbar-collapse .nav-item a.active {
    color: #2EE89E;
}

.navbar-expand-lg .navbar-collapse .nav-item a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 2px;
    background: #2EE89E;
    transition: 0.3s ease;
}

.navbar-expand-lg .navbar-collapse .nav-item a.active::after {
    width: 100%;
}

.navbar-expand-lg .navbar-collapse .navbar-nav {
    gap: 20px;
}

.banner-sec-wrapper {
    background: linear-gradient(to right,
            #0C0E18 0%,
            #0F1221 30%,
            #0b1335 50%,
            #0a154d 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-block: 100px;
    overflow-x: hidden;
}

.banner-sec-wrapper .content .description .main-text {
    max-width: 590px;
}


.banner-sec-wrapper .experience-and-work {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 60%;
}

.banner-sec-wrapper .experience-and-work .box {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.banner-sec-wrapper .experience-and-work .box h3 {
    color: #2EE89E;
    font-weight: 800;
    font-size: 34px;
    line-height: 36px;
}

.banner-sec-wrapper .experience-and-work .box p {
    font-size: 14px;
    font-weight: 400;
    color: #949EB8;
    line-height: 18px;
    margin-top: 14px;
}

.lazy-bg {
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease;
    opacity: 0;
}

.lazy-bg {
    filter: blur(10px);
}

.lazy-bg[style*="background-image"] {
    filter: blur(0);
    transition: all 0.6s ease;
}

.main-heading h1 {
    font-size: 74px;
    color: #ffffff;
    line-height: 82px;
    font-weight: 800;
}

.heading {
    font-size: 46px;
    color: #ffffff;
    line-height: 56px;
    font-weight: 800;
}

.heading span {
    color: #2EE89E;
}

.sec-title {
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: #2EE89E;
}

.main-text {
    font-size: 18px;
    line-height: 22px;
    color: #949EB8;
    font-weight: 400;
}

.banner-sec-wrapper .content .nav-tag-block {
    width: 215px;
    height: 36px;
    border-radius: 20px;
    border: 1px solid rgba(46, 232, 158, .5);
    background-color: rgba(46, 232, 158, 0.10);
    padding-inline: 16px;
    align-content: center;
}

.banner-sec-wrapper .content .nav-tag-block p {
    color: #2EE89E;
    font-size: 14px;
    line-height: 18px;
    text-align: left;
    padding-left: 15px;
}

.banner-sec-wrapper .content .nav-tag-block p::before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #2EE89E;
    left: 0;
    top: 3px;
    animation: bgFade 3s ease-in-out infinite;
}

@keyframes bgFade {
    0% {
        opacity: 0.3;
    }

    33% {
        opacity: 0.7;
    }

    66% {
        opacity: 1;
    }

    100% {
        opacity: 0.3;
    }
}

.banner-sec-wrapper .img-el-wrappers {
    width: 400px;
    height: 520px;
    overflow: visible;
    border: 1px solid #2ee89eb3;
    border-radius: 24px;
}

.banner-sec-wrapper .img-el-wrappers .img {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.banner-sec-wrapper .img img {
    border-radius: 24px;
}

.banner-sec-wrapper .img-el-wrappers .element {
    width: 120px;
    height: 36px;
    align-content: center;
    padding-inline: 14px;
    font-size: 12px;
    line-height: 14px;
    color: #2EE89E;
    border: 1px solid rgba(46, 232, 158, .5);
    background-color: #1B202E;
    border-radius: 18px;
    animation: floatRandom 3s ease-in-out infinite;
    text-align: center;
}

.banner-sec-wrapper .img-el-wrappers .element.el-1 {
    top: 12px;
    left: -60px;
    animation-delay: 0s;
}

.banner-sec-wrapper .img-el-wrappers .element.el-2 {
    top: 12px;
    right: -60px;
    animation-delay: 0.6s;
}

.banner-sec-wrapper .img-el-wrappers .element.el-3 {
    bottom: 12px;
    left: -60px;
    animation-delay: 1.2s;
}

.banner-sec-wrapper .img-el-wrappers .element.el-4 {
    bottom: 12px;
    right: -60px;
    animation-delay: 1.8s;
}

@keyframes floatRandom {
    0% {
        transform: translateX(-6px);
    }

    50% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(-6px);
    }
}



.logo img {
    width: 115px;
    transform: scale(1);
    transition: all 0.35s ease;
}

.bg-nav.scrolled .logo img {
    transform: scale(0.8);
}

.bg-nav {
    height: 80px;
}

.bg-nav.scrolled {
    height: 65px;
}

/* Hamburger Navbar Mobile  */

.custom-toggler {
    border: none;
    outline: none;
    box-shadow: none;
}

.custom-toggler {
    border: none;
    box-shadow: none;
}

.hamburger {
    width: 30px;
    height: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hamburger span {
    height: 2px;
    width: 100%;
    background: #2EE89E;
    display: block;
    transition: 0.3s ease;
    transform-origin: center;
}

/* OPEN STATE (Bootstrap adds aria-expanded=true) */
.custom-toggler[aria-expanded="true"] .hamburger span:nth-child(1) {
    transform: rotate(45deg) translateY(13px);
}

.custom-toggler[aria-expanded="true"] .hamburger span:nth-child(2) {
    opacity: 0;
}

.custom-toggler[aria-expanded="true"] .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translateY(-14px);
}

.about-us-sec-wrapper {
    border-top: 1px solid rgba(46, 232, 158, 0.4);
    padding-top: 78px;
}

.about-us-sec-wrapper .tags-container.desktop {
    display: flex;
}

.about-us-sec-wrapper .tags-container.mbl {
    display: none;
}

.about-us-sec-wrapper .tags-container {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.about-us-sec-wrapper .tags-container .tag {
    max-width: fit-content;
    padding: 9px 20px;
    position: relative;
    border: 1px solid rgba(46, 232, 158, .5);
    border-radius: 30px;
}

.about-us-sec-wrapper .tags-container .tag::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg,
            rgba(46, 232, 158, 0.30),
            rgba(46, 232, 158, 0.70),
            rgba(46, 232, 158, 0.30));
    background-size: 200% 100%;
    animation: borderSlide 3s linear infinite;
    z-index: -1;
}

@keyframes borderSlide {
    0% {
        background-position: 200% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.about-us-sec-wrapper .tags-container .tag p {
    font-size: 14px;
    color: #ffffff;
    margin: 0;
}

.about-us-sec-wrapper .about-experties {
    position: relative;
    overflow: hidden;
    min-height: 550px;
    background-color: #141825;
    border: 1px solid rgba(148, 158, 184, .5);
    border-top: 2px solid #2EE89E;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 26px 24px 26px 24px;
}

.about-us-sec-wrapper .about-experties::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    background: rgba(120, 84, 245, 0.26);
    border-radius: 50%;
    filter: blur(40px);
    top: 10%;
    left: 10%;
    animation: float1 8s ease-in-out infinite;
}

.about-us-sec-wrapper .about-experties::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(46, 232, 158, 0.15);
    border-radius: 50%;
    filter: blur(40px);
    bottom: 10%;
    right: 10%;
    animation: float2 5s ease-in-out infinite;
}

@keyframes float1 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-40px, -50px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes float2 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-40px, 50px);
    }

    100% {
        transform: translate(0, 0);
    }
}

.about-us-sec-wrapper .about-experties .about-experties-blocks-container .block-icon {
    width: 80px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(46, 232, 158, 0.8), rgba(120, 84, 245, 0.7));
    text-align: center;
    align-content: center;
}

.about-us-sec-wrapper .about-experties .about-experties-blocks-container .block-icon i {
    font-size: 32px;
    color: #ffffff;
    font-weight: 600;
}

.about-us-sec-wrapper .about-experties .about-experties-blocks-container .about-experties-block {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #F2F5FA;
    margin-top: 24px;
}

.about-us-sec-wrapper .about-experties .about-experties-blocks-container .about-experties-block .block-content h3 {
    font-size: 16px;
    color: #ffffff;
    line-height: 22px;
    font-weight: 700;
    margin: 0;
}

.about-us-sec-wrapper .about-experties .about-experties-blocks-container .about-experties-block .block-content p {
    font-size: 14px;
    color: #F2F5FA;
    line-height: 18px;
    margin-top: 4px;
    font-weight: 500;
}


.about-us-sec-wrapper .tags-container {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.about-us-sec-wrapper .tags-container.mbl .track {
    display: inline-flex;
    gap: 20px;
}

.about-us-sec-wrapper .tags-container.mbl.left-to-right .track {
    animation: marqueeLTR 20s linear infinite;
}

/* RIGHT → LEFT */
.about-us-sec-wrapper .tags-container.mbl.right-to-left .track {
    animation: marqueeRTL 20s linear infinite;
}

/* animations */
@keyframes marqueeRTL {
    0% {
        transform: translateX(0);
    }

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

@keyframes marqueeLTR {
    0% {
        transform: translateX(-50%);
    }

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


/* Projects Section  */

.work-sec-wrapper {
    padding-top: 100px;
}

.work-sec-wrapper .btn-project-tabs-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.work-sec-wrapper .btn-project-tabs-container button.project-tab {
    border-radius: 30px;
}

.work-sec-wrapper .content .main-text {
    max-width: 650px;
    margin-top: 8px;
}

.btn.btn-dark.active span:not(:nth-child(6)) {
    transform: translate(-50%, -50%) scale(14);
    transition: 1s ease;
}



/* Ai  */

.work-sec-wrapper .grid {
    max-width: 1320px;
    margin: 40px auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
}

.work-sec-wrapper .grid>li {
    width: calc(100% / 3 - 30px);
    margin: 0px 15px;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 15px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.work-sec-wrapper .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.work-sec-wrapper .filters .btn.btn-dark {
    border-radius: 30px;
}

.work-sec-wrapper .grid li {
    border: 1px solid #949EB8;
    border-top: 4px solid #2EE89E;
    background-color: transparent;
    min-height: 660px;
}

.work-sec-wrapper .grid li .search-bar {
    display: flex;
    padding-inline: 12px;
    padding-top: 18px;
    gap: 8px;
}

.work-sec-wrapper .grid li .search-bar .browser-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.work-sec-wrapper .grid li .search-bar .browser-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.work-sec-wrapper .grid li .search-bar .browser-dots .dot {
    opacity: 0.3;
    animation: blinkDots 3s infinite;
}

/* Dot 1 */
.work-sec-wrapper .grid li .search-bar .browser-dots .dot.dot-1 {
    background-color: #F2CC2E;
    animation-delay: 0s;
}

/* Dot 2 */
.work-sec-wrapper .grid li .search-bar .browser-dots .dot.dot-2 {
    background-color: #2EE89E;
    animation-delay: 0.5s;
}

/* Dot 3 */
.work-sec-wrapper .grid li .search-bar .browser-dots .dot.dot-3 {
    background-color: red;
    animation-delay: 1s;
}

/* Animation */
@keyframes blinkDots {

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

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.work-sec-wrapper .grid li .search-bar .input input {
    width: 100%;
    background-color: transparent;
    border: 1px solid #949EB8;
    border-radius: 30px;
    padding: 4px 6px;
}

.work-sec-wrapper .grid li .search-bar .input input::placeholder {
    font-size: 14px;
    color: #FFFFFF;
    font-weight: 400;
}

.work-sec-wrapper .grid li .img {
    text-align: center;
    height: auto;
    min-height: 145px;
    /* max-height: 150px; */
    overflow: hidden;
    align-content: center;
}

.work-sec-wrapper .grid li .img img {
    border-radius: 8px;
}

.work-sec-wrapper .grid li .content-project-block {
    padding-inline: 16px;
}

.work-sec-wrapper .grid li .content-project-block h3 {
    color: #2EE89E;
    font-weight: 800;
    font-size: 26px;
    line-height: 30px;
}

.work-sec-wrapper .grid li .content-project-block p {
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
    margin-top: 8px;
}

.work-sec-wrapper .filters button.is-checked {
    background-color: #ffffff;
}


.work-sec-wrapper .content-headings-container {
    max-width: 1320px;
    margin-inline: auto;
}

.work-sec-wrapper .content-headings-container ul {
    padding: 0;
}

.element-item {
    transition: 0.4s ease-in-out;
}

.element-item .img img {
    transition: 0.4s ease-in-out;
    overflow: hidden;
}

.work-sec-wrapper .grid li:hover .img img {
    transform: scale(1.03);
}

.work-sec-wrapper .grid li.card-1 {
    background-color: #141825;
}

.work-sec-wrapper .grid li.card-2 {
    background-color: rgba(97, 184, 255, .20);
    border-top: 4px solid #61B8FF;
}

.work-sec-wrapper .grid li.card-2 .content-project-block h3 {
    color: #61B8FF;
}

.work-sec-wrapper .grid li.card-2 .tags-container .tag::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg,
            rgba(97, 184, 255, .30),
            rgba(97, 184, 255, .70),
            rgba(97, 184, 255, .30));
    background-size: 200% 100%;
    animation: borderSlide 3s linear infinite;
    z-index: 1;
}

.work-sec-wrapper .grid li.card-2 .btn.btn-outline-custom {
    color: #61B8FF;
    background-color: transparent;
    border: 1px solid #61B8FF;
}

.work-sec-wrapper .grid li.card-2 .btn.btn-outline-custom span:not(:nth-child(6)) {
    background-color: #61B8FF;
}



/* Card 3  */

.work-sec-wrapper .grid li.card-3 {
    background-color: #c4a1954d;
    border-top: 4px solid #c4a195;
}

.work-sec-wrapper .grid li.card-3 .content-project-block h3 {
    color: #c4a195;
}

.work-sec-wrapper .grid li.card-3 .tags-container .tag::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, #f6d6cb8f, #c4a1956e, #f6d6cb8f);
    background-size: 200% 100%;
    animation: borderSlide 3s linear infinite;
    z-index: 1;
}

.work-sec-wrapper .grid li.card-3 .btn.btn-outline-custom {
    color: #c4a195;
    background-color: transparent;
    border: 1px solid #c4a195;
}

.work-sec-wrapper .grid li.card-3 .btn.btn-outline-custom span:not(:nth-child(6)) {
    background-color: #c4a195;
}



/* Card 5  */

.work-sec-wrapper .grid li.card-5 {
    background-color: rgba(255, 255, 255, .15);
    border-top: 4px solid #ffffff;
}

.work-sec-wrapper .grid li.card-5 .content-project-block h3 {
    color: #ffffff;
}

.work-sec-wrapper .grid li.card-5 .tags-container .tag::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg,
            rgba(217, 243, 227, .20),
            rgba(217, 243, 227, .30),
            rgba(217, 243, 227, .20));
    background-size: 200% 100%;
    animation: borderSlide 3s linear infinite;
    z-index: 1;
}

.work-sec-wrapper .grid li.card-5 .btn.btn-outline-custom {
    color: #ffffff;
    background-color: transparent;
    border: 1px solid #ffffff;
}

.work-sec-wrapper .grid li.card-5 .btn.btn-outline-custom span:not(:nth-child(6)) {
    background-color: #ffffff;
}


/* Card 6 */

.work-sec-wrapper .grid li.card-6 {
    background-color: rgba(217, 243, 227, .15);
    border-top: 4px solid #d9f3e3;
}

.work-sec-wrapper .grid li.card-6 .content-project-block h3 {
    color: #d9f3e3;
}

.work-sec-wrapper .grid li.card-6 .tags-container .tag::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(217, 243, 227, .20), rgba(217, 243, 227, .50), rgba(217, 243, 227, .20));
    background-size: 200% 100%;
    animation: borderSlide 3s linear infinite;
    z-index: 1;
}

.work-sec-wrapper .grid li.card-6 .btn.btn-outline-custom {
    color: #d9f3e3;
    background-color: transparent;
    border: 1px solid #d9f3e3;
}

.work-sec-wrapper .grid li.card-6 .btn.btn-outline-custom span:not(:nth-child(6)) {
    background-color: #d9f3e3;
}


/* Card 4  */
/* .work-sec-wrapper .grid li.card-5 {
    background-color: #141825;
} */

.btn.btn-outline-custom {
    font-weight: bold;
    color: #2EE89E;
    background-color: transparent;
    border: 1px solid #2EE89E;
    width: 190px;
    height: 54px;
    align-content: center;
    text-align: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.work-sec-wrapper .button .btn {
    width: 100%;
}

.btn.btn-outline-custom span:not(:nth-child(6)) {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 30px;
    width: 30px;
    background-color: #2EE89E;
    border-radius: 50%;
    transition: .6s ease;
}

.btn.btn-outline-custom span:nth-child(6) {
    position: relative;
}

.btn.btn-outline-custom span:nth-child(1) {
    transform: translate(-3.3em, -4em);
}

.btn.btn-outline-custom span:nth-child(2) {
    transform: translate(-6em, 1.8em);
}

.btn.btn-outline-custom span:nth-child(3) {
    transform: translate(-.2em, 1.8em);
}

.btn.btn-outline-custom span:nth-child(4) {
    transform: translate(3.5em, 2.4em);
}

.btn.btn-outline-custom span:nth-child(5) {
    transform: translate(3.5em, -3.8em);
}

.btn.btn-outline-custom:hover span:not(:nth-child(6)) {
    transform: translate(-50%, -50%) scale(14);
    transition: 1.6s ease;
}

.btn.btn-outline-custom:hover span:nth-child(6) {
    color: #0a154d;
}


.btn.btn-outline-custom em {
    font-style: normal;
}

.work-sec-wrapper .grid li .button .btn span i {
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.4s ease-in-out;
    position: absolute;
    top: 0;
    font-size: 16px;
}

.work-sec-wrapper .grid li .button .btn:hover span i {
    opacity: 1;
    transform: translateX(10px);
    transition-delay: 0.1s;
}

.work-sec-wrapper .tags-container.desktop {
    display: flex;
}

.work-sec-wrapper .tags-container.mbl {
    display: none;
}

.work-sec-wrapper .tags-container {
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.work-sec-wrapper .tags-container .tag {
    max-width: fit-content;
    padding: 6px 14px;
    position: relative;
    border: 1px solid rgba(46, 232, 158, .5);
    border-radius: 30px;
}

.work-sec-wrapper .tags-container .tag::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg,
            rgba(46, 232, 158, 0.30),
            rgba(46, 232, 158, 0.70),
            rgba(46, 232, 158, 0.30));
    background-size: 200% 100%;
    animation: borderSlide 3s linear infinite;
    z-index: 1;
}

@keyframes borderSlide {
    0% {
        background-position: 200% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.work-sec-wrapper .tags-container .tag p {
    font-size: 14px;
    color: #ffffff;
    margin: 0 !important;
}

.work-sec-wrapper .tags-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 10px;
    margin-top: 20px;
}


/* Contact US Sec  */

.contact-us-form {
    background-color: #141825;
    padding-block: 60px;
}

.contact-us-form .content .heading {
    max-width: 410px;
}

.contact-us-form .contact-info ul {
    padding: 0;
    list-style: none;
}

.contact-us-form .contact-info ul li {
    list-style: none;
}

.contact-us-form .contact-info ul li i {
    color: #ffffff;
}

.contact-us-form .contact-tags ul {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
}

.contact-us-form .contact-tags ul li {
    list-style: none;
    background-color: #1B202E;
    border: 1px solid #949EB8;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    width: 140px;
    color: #949EB8;
    transition: 0.3s ease-in-out;
}

.contact-us-form .contact-tags ul li a {
    text-decoration: none;
    color: #949EB8;
}

.contact-us-form .contact-tags ul li:hover {
    background-color: #2EE89E;
}

.contact-us-form .contact-tags ul li:hover p {
    color: #0C0E18;
}

.contact-us-form .contact-tags ul li:hover svg path {
    fill: #0C0E18 !important;
}




/* Image Animation  */

.banner-sec-wrapper .card {
    border: 4px solid transparent;
    transform: skewX(-8deg);
    height: 500px;
    width: 400px;
}

.banner-sec-wrapper .img-wrapper {
    position: relative;
    transform: translate(15px, -20px);
}

.banner-sec-wrapper .img {
    height: inherit;
    width: 100%;
    object-fit: cover;
    opacity: 0;
}


/* Testimonials Section  */

.testimonials-sec {
    padding-block: 48px;
}

.testimonials-sec .testimonial-card-container {
    height: 370px;
    max-height: 370px;
    padding: 22px 24px;
    border-radius: 18px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #141825;
    align-content: center;
}

.testimonials-sec .testimonial-card-container .rating-stars {
    margin-top: 10px;
}

.testimonials-sec .testimonial-card-container .rating-stars i {
    color: #F2CC2E;
}

.testimonials-sec .testimonial-card-container .rating-stars span {
    color: #ffffff;
    font-size: 14px;
    margin-left: 8px;
}

.testimonials-sec .testimonial-card-container .user-info {
    display: flex;
    align-items: center;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid #f2f5fa4a;
    gap: 12px;
}

.testimonials-sec .testimonial-card-container .user-info .icon {
    width: 50px;
    height: 50px;
    background-color: #2ee89e47;
    border: 1px solid #2EE89E;
    text-align: center;
    align-content: center;
    border-radius: 50%;
}

.testimonials-sec .testimonial-card-container .user-info .icon h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.testimonials-sec .testimonial-card-container .user-info .name h5 {
    color: #ffffff;
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin: 0;
}

.testimonials-sec .testimonial-card-container .user-info .name p {
    color: #ffffff;
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    margin-top: 2px;
}

.testimonials-sec .testimonial-card-container .quote-icon i {
    font-size: 32px;
    line-height: 32px;
    margin: 0;
}

.testimonials-sec .testimonial-card-container.card-1 .user-info .icon h4 {
    color: #2EE89E;
}

.testimonials-sec .testimonial-card-container.card-1 {
    border: 1px solid #2ee89e47;
    border-top: 4px solid #2EE89E;
}

.testimonials-sec .testimonial-card-container.card-1 .user-info .icon {
    background-color: #2ee89e47;
    border: 1px solid #2EE89E;
}

.testimonials-sec .testimonial-card-container.card-2 .user-info .icon h4 {
    color: #61B8FF;
}

.testimonials-sec .testimonial-card-container.card-2 {
    border: 1px solid #61b8ff54;
    border-top: 4px solid #61B8FF;
}

.testimonials-sec .testimonial-card-container.card-2 .user-info .icon {
    background-color: #61b8ff54;
    border: 1px solid #61B8FF;
}

.testimonials-sec .testimonial-card-container.card-3 .user-info .icon h4 {
    color: #FFA640;
}

.testimonials-sec .testimonial-card-container.card-3 {
    border: 1px solid #ffa6404d;
    border-top: 4px solid #FFA640;
}

.testimonials-sec .testimonial-card-container.card-3 .user-info .icon {
    background-color: #ffa6404d;
    border: 1px solid #FFA640;
}

.testimonials-sec .testimonial-card-container.card-1 .quote-icon i {
    color: #2EE89E;
}

.testimonials-sec .testimonial-card-container.card-2 .quote-icon i {
    color: #61B8FF;
}

.testimonials-sec .testimonial-card-container.card-3 .quote-icon i {
    color: #FFA640;
}


/* Slider  */

.testimonials-swiper {
    padding-bottom: 48px !important;
}

.testimonials-swiper .swiper-slide {
    height: auto;
}

.testimonials-swiper .testimonial-card-container {
    height: 100%;
}

.testimonials-swiper .swiper-pagination-bullet {
    background: #888;
    opacity: 1;
}

.testimonials-swiper .swiper-pagination-bullet-active {
    background: #2EE89E;
    transform: scale(1.3);
}




/* Skills Sec  */


.sk-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.sk-card {
    background: rgba(15, 25, 50, 0.7);
    border: 0.5px solid rgba(0, 232, 122, 0.15);
    border-radius: 16px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, transform 0.3s;
    cursor: default;
}

.sk-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 232, 122, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.sk-card:hover {
    border-color: rgba(0, 232, 122, 0.35);
    transform: translateY(-3px);
}

.sk-card:hover::before {
    opacity: 1;
}

.sk-cat-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #00E87A;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sk-cat-label::after {
    content: '';
    flex: 1;
    height: 0.5px;
    background: rgba(0, 232, 122, 0.2);
}

.sk-item {
    margin-bottom: 18px;
}

.sk-item:last-child {
    margin-bottom: 0;
}

.sk-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sk-name {
    font-size: 14px;
    font-weight: 500;
    color: #CBD8EE;
}

.sk-pct {
    font-size: 12px;
    font-weight: 500;
    color: #00E87A;
    font-family: 'Poppins', sans-serif;
}

.sk-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 99px;
    overflow: hidden;
}

.sk-bar {
    height: 100%;
    border-radius: 99px;
    width: 0%;
    position: relative;
}

.sk-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: inherit;
    filter: brightness(1.4);
    box-shadow: 0 0 8px currentColor;
}

.bar-emerald {
    background: linear-gradient(90deg, #005C30, #00E87A);
}

.bar-purple {
    background: linear-gradient(90deg, #2A1860, #8B5CF6);
}

.bar-blue {
    background: linear-gradient(90deg, #0C2A5C, #3B82F6);
}

.bar-gold {
    background: linear-gradient(90deg, #5C3800, #F59E0B);
}

.sk-tags {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.sk-tag {
    font-size: 11.5px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 99px;
    border: 0.5px solid rgba(0, 232, 122, 0.2);
    color: #7A9BB5;
    letter-spacing: 0.5px;
    transition: all 0.2s;
    cursor: default;
}

.sk-tag:hover {
    border-color: #00E87A;
    color: #00E87A;
    background: rgba(0, 232, 122, 0.06);
}

.sk-tools {
    margin-top: 32px;
    background: rgba(15, 25, 50, 0.5);
    border: 0.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px;
}

.sk-tools-title {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #7A9BB5;
    margin-bottom: 18px;
    text-align: center;
}

.sk-tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.sk-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: 12px;
    border: 0.5px solid rgba(255, 255, 255, 0.06);
    transition: all 0.25s;
    cursor: default;
}

.sk-tool:hover {
    background: rgba(0, 232, 122, 0.06);
    border-color: rgba(0, 232, 122, 0.2);
    transform: translateY(-2px);
}

.sk-tool-icon {
    font-size: 22px;
    line-height: 1;
}

.sk-tool-name {
    font-size: 11px;
    color: #ffffff;
    text-align: center;
    font-weight: 500;
}

.sk-tool:hover .sk-tool-name {
    color: #ffffff;
}


.sk-track {
    height: 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 99px;
    overflow: hidden;
}

.sk-bar {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: 99px;
    position: relative;
}

.skills-sec-wrapper {
    padding-block: 60px;
    background-color: #141825;
}

/* Footer Sec Styling Starts */

.footer-sec {
    background-color: #0C0E18;
    padding-block: 32px;
}

.footer-sec .content .footer-logo img {
    width: 100px;
}

.footer-sec .content .main-text {
    text-align: left;
    margin-top: 6px;
    font-size: 14px;
}

.footer-sec .content .main-text span {
    color: #2EE89E;
    font-weight: 700;
}

.footer-sec .content .copyright-text {
    color: rgba(148, 158, 184, 0.5);
    font-size: 14px;
    text-align: left;
    margin: 0;
    margin-top: 8px;
    font-weight: 400;
}

.footer-sec .available-text {
    color: #2EE89E;
}

.contact-info .main-text a {
    font-size: 18px;
    line-height: 22px;
    color: #949EB8;
    font-weight: 400;
    transition: 0.3s ease-in-out;
    text-decoration: none;
    cursor: pointer;
}

.contact-info .main-text a:hover {
    color: #00E87A;
}