/* NEW HOME */


:root {
    --primary: #F2A843;
    --dark: #0b101a;
    --text-light: #ffffff;
    --text-dark: #222;
    --muted: #666;
    --primary-light-color : #E1EEF9;
    --white-color-20: #FFFFFF33;
    --white-color-30: #FFFFFF4D;
    --theme-border-color : #E6F3FF;
    --blue-color : #25395C;
    --blue-border-color : #25395C1A;
    --color-black : #191919;
    --radius: 40px;
    --spacing: 1.2rem;
    --container-width: 1320px;
}

body { background: var(--color-white); color: var(--text-dark); line-height: 1.6; }
.header-main { position: absolute; top: 0; right: 0; left: 0; background: transparent; border-bottom: 1px solid #FFFFFF29; width: 100%; }
.header-main.sticky-header { background: var(--color-white); animation: slideDown 0.35s ease-out; position: fixed; box-shadow: 10px 9px 50px rgb(13 28 62 / 10%); }
.header-main .navbar-toggler .navbar-toggler-icon{ background-color: var(--color-white); }
.header-main.sticky-header .navbar-toggler .navbar-toggler-icon{ background-color: var(--color-black); }
body.home .header-main.sticky-header .nav-link{ color: var(--color-black) !important; }
body.home .header-main:not(.sticky-header) .nav-link::after { filter: invert(1); }
body.home .header-main .nav-link { color: var(--color-white) !important; }
.header-main .nav-item:not(:last-child)::after{ filter: invert(1); }
.header-main.sticky-header .nav-item:not(:last-child)::after{ filter: invert(0); }
body.home .header-logo .logo-1 { display: none; }
body.home .header-logo .logo-2 { display: block; }
body.home .header-main.sticky-header .header-logo .logo-1 { display: block; }
body.home .header-main.sticky-header .header-logo .logo-2 { display: none;  }

.tab_nav .nav-card {background-color: transparent;}


.btn {color: var(--color-black); box-shadow: 0px 4px 15px 0px #1D190E1A;}
.btn1  {font-size: var(--font-20); line-height: 24px;}

.section-spacing { padding: 100px 0;}
.section-inner-head h2, .bold-title{ color: var(--color-black);}
.section-inner-head h2{ font-weight: var(--fw-700); user-select: none; margin-bottom: 10px;}
.sub-heading {font-size: 20px; line-height: 28px; font-weight: 400; padding-bottom: 5px; margin-bottom: 10px; display: inline-flex; position: relative;}
.sub-heading::after {content: ''; height: 3px; width: 32px; border-radius: 2px; background-color: var(--primary); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
.sub-heading.start::after {left: 0%; transform: translateX(0%);}
h2, .bold-title{ line-height: 53px; font-weight: 700;}
.bold-title { font-size: var(--font-35); font-weight: 900;}
.mab-60 {margin-bottom: 60px;}
h4 {font-weight: 700;}
a:hover{color: var(--primary-color);}

h3 {
    color: var(--color-black);
    line-height: 40px;
}

p {
    font-size: 20px;
    line-height: 28px;
}

/* .right-header-block>li>a {
    background: transparent;
    width: 54px;
    height: 54px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    border: 1px solid var(--primary);
}
.header-main:not(.sticky-header) .right-header-block>li>a{
    box-shadow: none;
} */

.py-100 {
    padding: 100px 0;
}

.py-80 {
    padding: 80px 0;
}

/* Hero */
.hero__wrapper {min-height: 100vh;display: flex;padding: 305px 0 210px;background: linear-gradient(180deg, #071018, #1e252f);text-align: center;color: var(--text-light);position: relative;overflow: hidden;}
.hero__wrapper .btn {box-shadow: rgb(242 168 67 / 44%) 0px 7px 29px 0px;}
.hero__wrapper .container {position: relative;z-index: 9;}
.hero__subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px dashed #FFFFFF33;
    padding: 4px 8px;
    width: fit-content;
    margin: 0 auto 24px;
    list-style: none;
}
.hero__subtitle li:not(:last-child) {padding-right: 22px; position: relative;}
.hero__subtitle li:not(:last-child)::after {content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-white); position: absolute; top: 50%; transform: translateY(-50%); right: 8px;}

.hero__title {
    font-size: 55px;
    line-height: 100%;
    margin: 1.5rem 0;
}

.hero__description {
    margin-bottom: 0;
}

.stats {
    display: flex;
    justify-content: center;
}

.stats__item {
    text-align: center;
}

.stats .stats__item {
    display: flex;
    text-align: left;
    gap: 16px;
    align-items: center;
    padding: 20px 40px;
    border: 1px dashed #ffffff21;
}

.stats .stats__item:first-child {
    border-left: 0;
    border-right: 0;
}

.stats .stats__item:last-child {
    border-left: 0;
    border-right: 0;
}

.stats .stats__item .stats__content h2 {
    font-size: 35px;
}
.stats .stats__item .stats__content h2, .stats .stats__item .stats__content p{
    color: var(--color-white);
}

.hero__content {
    max-width: 700px;
    margin: 0 auto;
}

.hero__content .hero__btn {
    margin: 60px 0;
}
.hero__btn .btn--primary-outline {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: none;
}
.hero__content > *:not(.btn) {color: var(--color-white);}

.hero__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(2px);
    z-index: 1;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.8),
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.8));
    z-index: -2;
}

.hero__wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at left center, rgb(1 37 55 / 88%), transparent 70%);
    filter: blur(50px);
    z-index: 1;
    pointer-events: none;
}

.hero__wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at right center, rgb(255 200 0 / 25%), transparent 70%);
    filter: blur(50px);
    z-index: 1;
    pointer-events: none;
}

.brands{text-align: center;padding: 3rem 0;background: #fafafa;}
.brands__grid{display: flex;gap: 2rem;justify-content: center;margin-top: 1.5rem;}
.hero__wrapper .btn--primary::before, .hero__wrapper .btn--primary::after {
    background: #FFFFFF1A;
}
.hero__wrapper .btn--primary-outline::before, .hero__wrapper .btn--primary-outline::after {
    background: #f3b056;
}
.hero__wrapper .btn--primary-outline:hover {
    border-color: #f3b056;
}
/* end */

/* What-We-Do Section */
.what-we-do .section-inner-head{max-width: 935px;}
.what-we-do .sub-heading::after{left: 0;transform: inherit;}
.what-we-group{display: grid;grid-template-columns: repeat(4, 1fr);gap: 30px;}
.what-we-box{border: 1px solid rgba(242, 168, 67, 0.2);border-radius: 18px;background: linear-gradient(170deg,rgba(255, 248, 238, 1) 0%, rgba(235, 243, 255, 1) 100%);padding: 20px;}
.what-we-box>span{width: 54px;height: 54px;display: flex;align-items: center;justify-content: center;border-radius: 8px;background-color: rgba(242, 168, 67, 0.2);font-size: var(--font-20);line-height: 28px;color: var(--color-black);transition: all 350ms ease-in-out;}
.what-we-box h3{font-size: var(--font-20);line-height: 28px;margin-top: 30px;margin-bottom: 6px;}
.what-we-box p{color: var(--secondary);}
.what-we-box:hover>span{box-shadow: 7px 9px 20px rgba(242, 168, 67, 0.4);background-color: var(--primary);color: var(--color-white);}

/* clients */
.clients-section {padding: 60px 0;background-image: url("../images/client-bg.png");}
.client-text {text-align: center;margin-bottom: 30px; font-size: 24px; line-height: 32px;}
.clients-section .clients-slider {position: relative;}
.clients-section .clients-slider::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 120px;
    /* adjust as needed */
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
}

.clients-section .clients-slider::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 120px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
}

/* end  */

/* service */

.service-card {
    border-radius: 16px;
    padding: 28px 26px 28px 32px;
    height: 100%;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 18px;
    bottom: 18px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(to bottom,
            rgba(148, 163, 184, 0), rgb(223 223 223 / 70%), rgba(148, 163, 184, 0));
}

.service-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: -18px;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(to right, rgba(148, 163, 184, 0), rgb(223 223 223 / 70%), rgba(148, 163, 184, 0));
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
}

.service-card:hover .service-dot {
    transform: scale(1.06);
}

.col-md-6.col-lg-4:nth-child(1) .service-card::after,
.col-md-6.col-lg-4:nth-child(2) .service-card::after,
.col-md-6.col-lg-4:nth-child(3) .service-card::after {
    opacity: 0;
}

.col-md-6.col-lg-4:nth-child(1) .service-card::before,
.col-md-6.col-lg-4:nth-child(4) .service-card::before {
    opacity: 0;
}

.service-dot {
    width: 60px;
    height: 60px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: transform 0.25s ease;
}

.section-title {
    font-weight: 700;
    font-size: 35px;
    line-height: 53px;
    color: var(--color-black);
}

.service-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 8px;
    position: relative;
}

.service-title::before {
    content: '';
    width: 2px;
    height: 100%;
    position: absolute;
    left: -45px;
    background-color: var(--blue-color);
}

.col-md-6.col-lg-4:nth-child(1) .service-title::before,
.col-md-6.col-lg-4:nth-child(4) .service-title::before {
    opacity: 0;
}

.service-text {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-black);
    margin: 0;
}

/* end */

/* metrics */

.metrics-section {
    padding: 0 0 100px;
}

.metrics-card {
    border-radius: 18px;
    border: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #fdf6ed 0%, #eaf3ff 100%);
    border: 1px solid rgb(242 168 67 / 18%);
}

.metrics-card-inner {
    padding: 40px;
}

.metrics-tagline {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7280;
}

.metrics-heading {
    font-weight: 700;
    font-size: 35px;
    line-height: 53px;
}

.metrics-subheading {
    font-size: 20px;
    line-height: 28px;
    color: var(--color-black);
    margin-top: 12px;
}

.metrics-card-group {
    margin-top: 50px;
    padding-top: 50px;
    border-top: 1px solid var(--blue-border-color);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 100px;
}

.metric-value {
    font-size: 50px;
    font-weight: 700;
    line-height: 65px;
    margin-bottom: 24px;
    position: relative;
}

.metric-value::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 5px;
    background-color: var(--color-black);
}

.metric-title {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    color: var(--color-black);
}

.metric-text {
    font-size: 20px;
    line-height: 28px;
    color: var(--secondary);
    margin: 0;
}

.metrics-badge-area {
    font-size: 40px;
    font-weight: 700;
    color: #1f2937;
}

.metrics-footer {
    padding: 60px 0 0;
}
.metrics-footer img {object-fit: contain;}
.metrics-footer .swiper-wrapper {align-items: center;}
.metrics-footer .swiper-slide {display: flex; align-items: center; justify-content: center; padding: 20px;}

.metrics-logo {
    height: 60px;
    object-fit: contain;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.metrics-logo:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 6px 12px rgba(15, 23, 42, 0.18));
}

/* end */

/* developement  */

/* Industries Section  */
.industries-section{background-color: #F8F7F3;}
.industries-group{display: flex;align-items: flex-start;flex-wrap: wrap;}
.industries-group .sub-heading::after{left: 0;transform: inherit;}

.machine-learning-img img{width: 100%;height: 100%;object-fit: cover;}

.left-side{flex: 0 0 44%;max-width: 44%;height: 100vh;position: sticky;top: 98px;}
.right-side{flex: 0 0 56%;max-width: 56%;padding-top: 80px; padding-left: 60px;padding-bottom: 80px;padding-right: calc((100% - 1356px) / 2);}
/* .industries-head-sticky{padding-top: 80px;position: sticky;top: 60px;z-index: 1;background-color: #F8F7F3;} */
.expertise-card{border-top: 1px solid #e5e6e6;padding: 20px;transition: all ease-in-out 0.3s;position: relative;}
.expertise-card:first-child{border-top: transparent;}
.expertise-card:hover{background-color: var(--color-white);border-top: transparent;border-radius: 20px;}
.expertise-card:hover + .expertise-card{border-top: transparent;}
.expertise-card::before{content: '';width: 3px;height: 38px;position: absolute;top: 15px;left: 0;background-color: var(--primary);border-radius: 0 4px 4px 0;opacity: 0;visibility: hidden;transition: all ease-in-out 0.3s;}
.expertise-card:hover::before{visibility: visible;opacity: 1;}
.expertise-card .title{font-size: var(--font-20);line-height: 28px;margin-bottom: 4px;margin-top: 10px;}

/* end */

/* cta-ai-section */

.cta-ai-section {
    /* padding-left: calc((100% - 1380px)/2); */
    padding-block: 90px;
    background-image: url("../images/home/future-proof-bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
    background-color: var(--primary);
}
.cta-ai-section .section-inner-head {max-width: 650px;}

.cat-subtitle {
    color: var(--color-black);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px dashed #fad7a2;
    padding: 4px 8px;
    width: fit-content;
    margin-bottom: 40px;
}

.cta-ai-section .cta-title {
    font-size: 35px;
    line-height: 53px;
    color: var(--color-black);
    margin-bottom: 12px;
}

.cta-subtext {
    font-size: 20px;
    line-height: 28px;
    color: var(--secondary);
}

.cta-ai-section .btn-dark-outline {
    margin-top: 40px;
}
.cta-ai-section .btn-dark-outline::before, .cta-ai-section .btn-dark-outline::after{
    background: #FFFFFF1A;
}

.btn-dark-outline {
    background-color: transparent;
    border-color: var(--color-black);
}
/* end */

/* Featured Section */
.featured-section{background-color: #F8F7F3;padding-top: 50px;padding-bottom: 50px;padding-left: calc((100% - 1356px) / 2);}
.featured-area{display: flex;align-items: center;gap: 60px;}
.featured-area h2{color: var(--color-black);}
.featured-slider{flex: 1;}
.featured-slider .swiper-slide{background-color: var(--color-white);min-height: 152px;border-radius: 18px;display: flex;align-items: center;justify-content: center;padding: 10px;}

.related-project-wrapper.design-secondary{
    overflow: hidden;
}

.related-project-wrapper.design-secondary .related-project-slider{
    overflow: hidden;
}

.related-project-wrapper.design-secondary .slider-wrapper{
    will-change: transform;
}

@media screen and (max-width: 1441px) {
    .btn1, .btn{font-size: 18px; line-height: 20px;}
    /* Hero */
    .hero__wrapper {padding: 200px 0 100px;}
    .client-text {font-size: 22px; line-height: 30px;}
    
    .section-spacing{
        padding: 80px 0;
    }

    .metrics-section{
        padding-bottom: 80px;
    }
    .metrics-card-group {gap: 40px;}

    .py-80 {
        padding: 60px 0;
    }

    .list li::before{
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 4px;
        background-size: 20px;
    }

    .list li{
        padding-left: 30px;
    }

    .stats-card p {
        font-size: 16px;
        line-height: 27px;
    }

    p {
        font-size: 18px;
        line-height: 27px;
    }



    .arrow-btn {
        width: 50px;
        height: 50px;
    }

    .mab-60 {
        margin-bottom: 40px;
    }
    .cta-ai-section {
        background-position: 65% 100%;
        padding-block: 70px;
    }
    .cat-subtitle {margin-bottom: 20px;}
    .cta-ai-section .btn-dark-outline {margin-top: 20px;}

    /* Featured Section  */
    .featured-section{padding-left: calc((100% - 1150px) / 2);}

    /* Industries Section  */
    .left-side{top: 75px;}
    .right-side{padding-right: calc((100% - 1150px) / 2);}

}

@media screen and (max-width:1199px) {
    /* .header-main .navbar-collapse {
        padding: 84px 30px 30px;
        background-color: rgb(0 0 0 / 50%);
        backdrop-filter: blur(15px);
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        overflow: hidden auto;
        transition: none;
    }
    .header-main .navbar-collapse.show {
        transform: translateX(0);
    }
    
    .header-main {padding: 0px;}
    .header-main>div{padding: 0px;}
    .header-logo-group { display: flex; align-items: center; justify-content: space-between; flex: 1; position: relative; z-index: 100; padding: 15px 25px}
    .header-logo-group{background-color: transparent; backdrop-filter: blur(15px);}
    body.overflow-hidden .header-main.sticky-header .logo-1 {display: none !important;}
    body.overflow-hidden .header-main.sticky-header .logo-2 {display: block !important;}
    
    .menu-card-inner .menu-card-left ul li a {color: var(--color-white);}
    .menu-card-inner .menu-card-left ul li a:hover {color: var(--primary) !important;}
    p , .btn, .btn1{
        font-size: 16px;
        line-height: 26px;
    }
    
    .header-main .nav-item:not(:last-child)::after{ filter: invert(1) brightness(100) !important; }
    .header-main .navbar-toggler {z-index: 100;}
    body.overflow-hidden .header-main .navbar-toggler .navbar-toggler-icon {background-color: var(--color-white) !important;} */
    body.home .header-main.sticky-header .nav-link {color: var(--color-white) !important;}

    .client-text {font-size: 20px; line-height: 28px;}

    .section__title,
    .metrics-heading,
    .section-title,
    .cta-ai-section .cta-title{
        font-size: 26px;
        line-height: 40px;
    }
    .cta-ai-section {background-position: 80% 100%;}
    .cta-ai-section .section-inner-head {max-width: 500px;}

    .metrics-card-group {margin-top: 40px; padding-top: 40px; gap: 30px;}

    .metric-title{
        font-size: 18px;
        line-height: 27px;
    }

    .metric-text{
        font-size: 16px;
        line-height: 26px;
    }

    .metric-value{
        font-size: 45px;
        line-height: 55px;
        margin-bottom: 15px;
    }

    .stats-box h2{
        font-size: 45px;
    }
    
    .stats-box span,
    .list li{
        font-size: 16px;
        line-height: 26px;
    }

    .list{
        gap: 15px;
        row-gap: 10px;
        margin: 1rem 0 30px;
    }


    h2, .bold-title {
        line-height: 40px;
    }

    
    .resources-link {font-size: var(--font-16); line-height: 27px;}

    .arrow-btn {
        width: 45px;
        height: 45px;
    }

    .cta-ai-section .btn-dark-outline{
        margin-top: 20px;
    }

    /* Featured Section */
    .featured-section{padding-left: 25px;}
    .featured-area{gap: 30px;}

    /* Industries Section */
    .right-side{padding:0  25px 40px;}
    .industries-head-sticky{
        padding-top: 40px;
        top: 60px;
    }

}

@media screen and (max-width:1024px) {

    /* Stats Section */
    .stats-card{
        flex-wrap: wrap;
    }

    .py-100{
        padding: 60px 0;
    }

    .cta-ai-section {
        padding: 60px 0;
    }
}

@media screen and (max-width: 991px) {
    .col-md-6.col-lg-4:nth-child(3) .service-card::after, .col-md-6.col-lg-4:nth-child(4) .service-card::before, .col-md-6.col-lg-4:nth-child(4) .service-title::before{
        opacity: 1;
    }
    .col-md-6.col-lg-4:nth-child(3) .service-card::before, .col-md-6.col-lg-4:nth-child(3) .service-title::before,
    .col-md-6.col-lg-4:nth-child(5) .service-card::before, .col-md-6.col-lg-4:nth-child(5) .service-title::before{
        opacity: 0;
    }

    .metrics-card-group {grid-template-columns: 1fr 1fr;}
    .cta-ai-section {background-image: none;}
    .cta-ai-section .section-inner-head {max-width: 100%;}

    /* What We Do Section */
    .what-we-group{grid-template-columns: repeat(2, 1fr);}

    /* Industries Section  */
    .left-side{flex: 0 0 100%;max-width: 100%;height: auto;position: relative;top: inherit;}
    .right-side{flex: 0 0 100%;max-width: 100%;padding-bottom: 80px;padding-top: 40px;}
    .industries-head-sticky{
        padding-top: 0;
        position: inherit;
    }
}

@media(max-width: 768px){
    /* What We Do Section */
    .what-we-group{grid-template-columns: repeat(1, 1fr);}

    .metric-value,
    .stats-box h2{
        font-size: 35px;
        line-height: 50px;
    }

    .hero__title{
        font-size: 36px;
        line-height: normal;
    }

    .list li{
        font-size: 16px;
        line-height: 27px;
    }

    .cta-ai-section {text-align: center;}
    .cat-subtitle {margin-inline: auto;}
    /* Featured Section */
    .featured-area{flex-wrap: wrap;}
    .featured-slider{flex: 0 0 100%;max-width: 100%;}


}

@media (max-width: 767.98px) {
    .stats {
        flex-wrap: wrap;
    }

    .stats .stats__item{
        border-left: none;
        border-right: none;
    }
    .service-card{
        padding: 25px 15px;
    }

    /* .service-card::before,
    .service-card::after,
    .service-title::before{
        display: none;
    } */
     .service-card::after {opacity: 1 !important; top: -0.75rem;}
    .service-card::before, .service-title::before, .col-md-6.col-lg-4:nth-child(1) .service-card::after{
        display: none;
    }
    .clients-section .clients-slider::before, .clients-section .clients-slider::after{width: 50px;}

}

@media screen and (max-width:576px) {
.clients-section .clients-slider::before, .clients-section .clients-slider::after {display: none;}
    .metrics-card-inner {padding: 30px;}
    .metrics-card-group {grid-template-columns: 1fr; text-align: center;}
    .metric-value::before {left: calc(50% - 30px);}
}