.fs-12 {
    font-size: 12px;
}

.fs-13 {
    font-size: 13px;
}

.fs-14 {
    font-size: 14px;
}

.fs-15 {
    font-size: 15px;
}

.fs-16 {
    font-size: 16px;
}

.fs-17 {
    font-size: 16px;
}

.fs-18 {
    font-size: 18px;
}

.fs-19 {
    font-size: 19px;
}

.fs-20 {
    font-size: 20px;
}

.fs-22 {
    font-size: 22px;
}

.fs-24 {
    font-size: 24px;
}

.fs-26 {
    font-size: 26px;
}

.fs-28 {
    font-size: 28px;
}

.fs-30 {
    font-size: 30px;
}


.fs-32 {
    font-size: 32px;
}

.fs-34 {
    font-size: 34px;
}

.fs-40 {
    font-size: 40px;
}
.text-justify {
    text-align: justify;
}

.mh-450 {
    min-height: 450px;
}

.w-30 {
    width: 30px;
    height: 30px;
}

.w-60 {
    width: 60px;
}

.w-80 {
    width: 80px;
}

.w-110 {
    width: 110px;
}
.w-90 {
    width: 90px;
}
.w-92 {
    width: 92px;
}
.w-98 {
    width: 98px;
}

.nav-menu__item .nav-submenu.mega-nav {
    position: absolute;
    right: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    max-height: none !important;
    overflow: visible !important;
    margin-top: 0;
    padding: 0 !important;
    z-index: 999;
}

.nav-menu__item:hover > a {
    color: var(--main-600);
}

.nav-menu__item .nav-submenu.mega-nav .col-lg-3 ul li.activePage a {
    color: var(--main-600);
}

.single-service-area-wrapper {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

.single-service-area-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            120deg,
            #ffffff,
            #eaf2ff,
            rgb(43 111 255 / 0.62),
            #ffffff
    );
    background-size: 300% 300%;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: blueFlow 8s ease infinite;
    z-index: 0;
}

.single-service-area-wrapper:hover::before {
    opacity: 0.25;
}

.single-service-area-wrapper > * {
    position: relative;
    z-index: 1;
}

.single-service-area-wrapper.activePages {
    border: 1px solid #2b6fff;
    box-shadow: 0 6px 18px rgba(43, 111, 255, 0.12);
    color: #2b6fff;
    font-weight: 600;
    content: "";
    inset: 0;
    background: linear-gradient(
            120deg,
            #ffffff,
            #eaf2ff,
            rgb(43 111 255 / 0.2),
            #ffffff
    );
    background-size: 300% 300%;
    transition: opacity 0.3s ease;
    animation: blueFlow 8s ease infinite;
    z-index: 0;
}


.single-service-area-wrapper:hover {
    border: 1px solid #2b6fff;
    box-shadow: 0 6px 18px rgba(43, 111, 255, 0.12);
}

.single-service-area-wrapper:hover h6 {
    color: #2b6fff;
    font-weight: 600;
}

@keyframes blueFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-body-tertiary ul li a {
    display: flex;
    transition: transform 0.3s ease-in-out;
}

.bg-body-tertiary ul li a.activePages {
    color: #2b6fff !important;
}

.bg-body-tertiary ul li a:hover {
    transform: translateX(6px);
    color: #2b6fff !important;
}

.pure-highlight {
    position: relative;
    padding: 8px 8px 0;
    z-index: 1;
    color: #1a1a1a;
    background-image: linear-gradient(#97FEED, #97FEED);
    background-repeat: no-repeat;
    background-size: 0% 90%;
    background-position: left bottom;
    animation: fill-bg 1.5s ease-in-out forwards;
    animation-delay: 0.5s;
}

.pure-highlight.bg-publue {
    background-image: linear-gradient(#150e3e, #150e3e);
    color: white;
}

@keyframes fill-bg {
    from {
        background-size: 0% 90%;
    }
    to {
        background-size: 100% 90%;
    }
}


.custom-btn.bg-transparent {
    --bs-bg-opacity: 1;
    background-color: transparent !important;
    color: black !important;
    transition: all .4s ease-in-out;
}

.custom-btn:hover {
    background-color: #f5f5f5 !important;
    border: 1px solid #a3a3a3 !important;
    color: black !important;
}

.nav-submenu__item:hover a {
    color: #2b6fff !important;
}

.distraction-icon.seven {
    inset-block-start: 66%;
}

.distraction-icon.mw-15 {
    max-width: 15%;
}

.w-250 {
    width: 250px;
}

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

    .distraction-icon.mw-15 {
        max-width: 26%;
    }
    .webpsoft-logo {
        width: 200px;
    }
    .toggle-mobileMenu {
        font-size: 1.8rem;
    }
    .tw-py-80-px {
        padding-block: 40px;
    }
    .fs-40 {
        font-size: 24px;
    }
    .pure-highlight {
        padding: 8px 4px 6px;
    }
    .splitTextStyleOne {
        font-weight: 400 !important;
        line-height: 24px !important;
    }
    .btn-main {
        padding: 13px 20px !important;
    }
    .custom-btn.bg-transparent {
        padding: 12px 20px !important;
    }
    .splitTextStyleTwo {
        font-size: 19px!important;
    }


    .tw-text-lg {
        font-size: 0.95rem;
    }
    .img-responsive {
        width: 220px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .fs-sm-14 {
        font-size: 14px;
    }
    .text-justify {
        text-align: justify;
    }
    @keyframes animationUpDown {
        0% {
            transform: translateY(0px);
        }

        50% {
            transform: translateY(-20px);
        }

        100% {
            transform: translateY(0px);
        }
    }
    .distraction-icon.one {
        inset-inline-start: 0% !important;
        inset-block-start: 46% !important;
    }

    .distraction-icon.six {
        inset-block-end: -24px;
        inset-inline-start: 2%;
    }
    .distraction-icon.five {
        inset-inline-start: 8%;
        inset-block-end: 14%;
    }
    .distraction-icon.seven {
        inset-block-start: 76%;
    }
    .distraction-icon.four {
        inset-inline-end: 2% !important;
        inset-block-end: -8% !important;
    }
    .distraction-icon.three {
        inset-inline-end: 8%;
        inset-block-start: 68% !important;
    }
    .distraction-icon.two {
        inset-inline-end: 0%;
        inset-block-start: 42% !important;
    }
    .distraction-icon {
        max-width: 24%;
    }
    .content-img {
        height: 300px;
        object-fit: contain;
    }
    .tw-rounded-2xl.tw-py-8 {
        padding: 20px;
        gap: 20px;
    }
    .tw-mb-405.splitTextStyleOne {
        margin-bottom: 6px;
    }
    .tw-mb-405.splitTextStyleOne div {
        font-weight: 500;
    }
    .footer-four .tw-pt-90-px.tw-pb-80-px {
        padding-block-end: 10px;
        padding-block-start: 10px;
    }
    .footer-four .tw-pt-90-px.tw-pb-80-px:first-child {
        padding-block-start: 40px;
        width: 100%;
    }

    .footer-four .tw-pt-90-px.tw-pb-80-px:first-child p {
        max-width: 100%;
    }
    .footer-four .tw-pt-90-px.tw-pb-80-px h5 {
        margin-bottom: 6px;
        font-size: 16px;
    }
    .footer-four .tw-pt-90-px.tw-pb-80-px ul li a {
        font-size: 15px;
    }
    .footer-four .tw-pt-90-px.tw-pb-80-px ul {
        gap: 4px;
    }
    .footer-four .container div {
        gap: 6px;
    }
    .footer-four-bottom .container div p {
        font-size: 15px;
    }
    .text-neutral-500.tw-mt-8.fw-normal {
        font-size: 15px;
        margin-top: 14px;
        line-height: 20px !important;
    }
    .tw-mt-11.d-flex.flex-column.tw-gap-7 {
        gap: 16px;
        margin-block-start: 18px;
    }
    .blog .bg-white.common-shadow-five.py-120.px-lg-4 {
        padding-block-start: 10px;
    }
    .blog .bg-white.common-shadow-five.py-120.px-lg-4 .max-w-602-px {
        margin-block-end: 10px;
    }
    .blog .bg-white.common-shadow-five.py-120.px-lg-4 .max-w-602-px h3  {
        font-size: 24px;
    }
    .webpsoft-blog .blog-post h5 {
        font-size: 19px;
    }
    .webpsoft-blog .blog-post p {
        line-height: 1.3rem !important;
    }
    .tw-max-h-588-px {
        max-height: 312px;
    }
    .footer-info {
        font-size: 15px !important;
    }
    .accordion.style-two .accordion-button {
        font-size: 16px!important;
    }
   .blog .common-shadow-five .max-w-602-px {
       margin-bottom: 10px;
   }
    .offer .group-item.position-relative {
        padding-block-start: 30px;
    }
    .offer .group-item a {
        width: 2.75rem;
        height: 2.75rem;
    }
    .cta .splitTextStyleOne.fw-light {
        font-size: 22px;
    }
    .offer .group-item .splitTextStyleOne {
        font-size: 1.2rem!important;
    }
    .about-banner h3.tw-mt-405 {
        font-size: 20px;
        color: #150e3e!important;
        margin-top: 14px;
        margin-bottom: 14px;
    }
    .tw-mb-10.about-text {
        margin-block-end: 1.5rem;
    }
    .tw-mt-11.about-btn {
        margin-block-start: 2rem;
    }
    .content-head .tw-mt-11 {
        margin-block-start: 30px;
    }
    .career-jobs .container .text-center h4 {
        font-size: 20px;
        font-weight: 500!important;
    }
}

.nav-menu--mobile .nav-submenu__link {
    padding: 8px 8px 8px 0;
    font-size: 15px;
    font-weight: 400 !important;
    justify-content: space-between;
    align-items: center;
    display: flex !important;
    color: #777777;
    border-radius: 0;
    border-bottom: 1px solid #f0f0f0 !important;
}

.distraction-icon.one {
    inset-inline-start: 9%;
    inset-block-start: 40%;
}

.distraction-icon.three {
    inset-block-start: 56%;
}

.distraction-icon.four {
    inset-inline-end: 5%;
    inset-block-end: 3%;
}

.distraction-icon.two {
    inset-block-start: 29%;
}
.tw-wrap {
    white-space: normal;
    flex-wrap: wrap;
}

.mw-2 {
    min-width: 2rem;
}

.border-none {
    border-bottom: none!important;
}
.accordion.style-two-three .accordion-button::before {
    border: none;
}

.accordion.style-two-three .accordion-item:has(.accordion-collapse.show), .accordion.style-two-three .accordion-item:has(.accordion-button[aria-expanded=true]) {
    background-color: #fbfbfb !important;
    border-block-start: none!important;
    border-left: 1px solid var(--neutral-200) !important;
    border-radius: 14px !important;
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-btn-color);
}

.accordion.arrow-bg-orange .accordion-button[aria-expanded=true]::before {
    background-color: transparent !important;
    border-color: transparent !important;
}
.accordion.style-two .accordion-button[aria-expanded=true]::before {
    color: var(--neutral-500) !important;
}

.accordion.style-two-three .accordion-item {
    padding: 16px;
    border-radius: 8px !important;
    background-color: #fbfbfb !important;
    max-width: 570px;
    min-width: 570px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 16px !important;
}

.max-w-654-px {
    max-width: 536px;
    min-width: 536px;
}

@media (max-width: 991px) {
    .mobile-faq-hidden {
        display: none !important;
    }
}

.mobile-faq-reveal {
    display: block !important;
    animation: slideDownFaq 0.4s ease-in-out forwards;
}

@keyframes slideDownFaq {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.about-two .splitTextStyleTwo.text-heading {
    font-size: 2rem;;
}

.offer .group-item .splitTextStyleOne {
    font-size: 1.5rem;
    font-weight: 500;
}

.positioned-image.nine {
    width: 400px;
    height: 113px;
    border: 1px solid #777bb3;
    padding: 10px;
}

.about-banner h3.tw-mt-405 {
    color: white;
}

.bg-cust {
    background-color: #4F46E5;
}

.bg-corp {
    background-color: #334155;
}

.bg-ecom {
    background-color: #14B8A6;
}

.bg-api {
    background-color: #F43F5E;
}

.bg-stock {
    background-color: #0F766E;
}

.bg-seo {
    background-color: #F59E0B;
}

.bg-design {
    background-color: #2563EB;
}

.bg-press {
    background-color: #0891B2;
}

.bc-customer-1 {
    border: 3px solid #f43f5e;
}

.bc-customer-2 {
    border: 3px solid #f59e0b;
}

.bc-customer-3 {
    border: 3px solid #14b8a6;
}

.header-menu .nav-menu li.nav-menu__item.activePages > a {
    color: var(--main-600) !important;
}

.header-menu .nav-menu li.nav-menu__item ul.nav-submenu .nav-submenu__item.activePages .nav-submenu__link {
    color: var(--main-600) !important;
}


.career-card{
    transition: .3s ease;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.04);
}

.career-card:hover{
    transform: translateY(-6px);
    border-color: #2154ED !important;
    box-shadow: 0 20px 40px rgba(33, 84, 237, 0.12);
}

@media (max-width: 767px){

    .career-card{
        padding: 24px !important;
    }
    .career-card .btn{
        width: 100%;
    }
    .career-jobs .text-center.tw-mb-15 {
        margin-block-end: 2rem;
    }

    .accordion.style-two-three .accordion-item {
        max-width: 100%;
        min-width: 100%;
    }
    .accordion.style-two-three .accordion-item .accordion-body.max-w-654-px {
        max-width: 100%;
        min-width: 100%;
    }
    .about-four-two .about-text h4.text-heading {
        font-size: 20px;
    }
}


/* KDV Calculate */

.kdv-wrapper{
    border-radius:40px;
    position:relative;
}

.kdv-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 20px;
    border-radius:999px;
    background:rgba(33,84,237,.08);
    color:#2154ED;
    font-weight:600;
}

.kdv-title{
    font-size:58px;
    font-weight:800;
    margin:26px 0 18px;
}

.kdv-desc{
    max-width:720px;
    margin:auto;
    color:#667085;
    font-size:18px;
    line-height:1.8;
}

.calc-box{
    border:1px solid #E4E7EC;
    border-radius: 28px;
    padding:40px;
    background:#fff;
    height:100%;
}

.result-box {
    border: 1px solid #E4E7EC;
    border-radius: 28px;
    padding: 40px;
    background: #fff;
    height: 100%;
 }

 /*
 .result-box::before{
     content:"";
     position:absolute;
     width:420px;
     height:420px;
     border-radius:50%;
     background:rgba(33,84,237,.28);
     filter:blur(50px);
     top:-180px;
     right:-120px;
 }

 */
.radio-wrapper{
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:20px;
}

.custom-radio{
    position:relative;
}

.custom-radio input{
    display:none;
}

.custom-radio label{
    width:100%;
    min-height:76px;
    border:1px solid #D0D5DD;
    border-radius:14px;
    padding:10px 14px;
    display:flex;
    align-items:center;
    gap:16px;
    cursor:pointer;
    transition:.3s;
    background:#fff;
}

.custom-radio label:hover{
    border-color:#2154ED;
    background:#F8FAFF;
}

.radio-circle{
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid #D0D5DD;
    position:relative;
    transition:.3s;
    flex-shrink:0;
}

.radio-circle::before{
    content:"";
    position:absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background:#2154ED;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    transition:.3s;
}

.radio-content{
    display:flex;
    flex-direction:column;
}

.radio-title{
    font-size:16px;
    font-weight:700;
    color:#101828;
}

.radio-desc{
    font-size:14px;
    color:#667085;
}

.custom-radio input:checked + label{
    border-color:#2154ED;
    background:#F5F8FF;
    box-shadow:0 0 0 4px rgba(33,84,237,.08);
}

.custom-radio input:checked + label .radio-circle{
    border-color:#2154ED;
}

.custom-radio input:checked + label .radio-circle::before{
    transform:translate(-50%,-50%) scale(1);
}

.form-label{
    font-weight:700;
    margin-bottom:8px;
    color:#101828;
}

.price-input{
    position:relative;
}

.price-input span{
    position:absolute;
    left:22px;
    top:50%;
    transform:translateY(-50%);
    color:#667085;
    font-size:16px;
    font-weight:500;
    z-index:2;
}

.kdv-wrapper .calc-box .form-control{
    height:52px;
    border-radius:12px;
    border:1px solid #D0D5DD;
    box-shadow:none !important;
    font-size:17px;
    padding:0 20px;
}

.kdv-wrapper .calc-box .price-input .form-control{
    padding-left:40px;
}

.kdv-wrapper .calc-box .form-control:focus{
    border-color:#2154ED;
}

.kdv-btn{
    width:100%;
    height:52px;
    border:1px solid #D0D5DD;
    background:#fff;
    font-weight:600;
    color:#667085;
    transition:.3s;
}

.kdv-btn.active{
    background:var(--main-600);
    border-color:var(--main-600);
    color:#fff;
}

.custom-rate-box{
    position:relative;
    height:52px;
    border:1px solid #D0D5DD;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#F9FAFB;
}

.custom-rate-box span{
    position:absolute;
    left:22px;
    color:#667085;
    font-weight:500;
    font-size:18px;
}

.custom-rate-box input{
    width:100%;
    height:100%;
    border:none;
    background:transparent;
    outline:none;
    text-align:center;
    font-size:16px;
    font-weight:600;
    color:#101828;
    padding:0 16px 0 36px;
}

.custom-rate-box input::-webkit-outer-spin-button,
.custom-rate-box input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.calculate-btn{
    width:100%;
    height:56px;
    border:none;
    border-radius:12px;
    color:#fff;
    background-color: var(--main-600);
    font-size:17px;
    font-weight:500;
    letter-spacing: 0.4px;
    transition: all .4s ease-in-out;
}

.calculate-btn:hover{
    background-color: #1047bc;
}


.result-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #d0d5dd;
    position: relative;
    z-index: 2;
    font-weight: 500;
}


.result-item strong{
    font-size:17px;
}

@media(max-width:991px){

    .kdv-wrapper{
        padding: 0;
    }

    .kdv-title{
        font-size:38px;
    }
    .calc-box {
        padding: 12px 10px;
        border-radius: 22px;
        border: 1px solid #6591fa;
    }
    .result-box {
        padding: 12px 10px;
        border-radius: 22px;
        border: 1px solid #6591fa;
    }

    .result-box h5 {
        font-size: 16px;
        font-weight: 500 !important;
        background-color: var(--main-600);
        padding: 8px 6px;
        color: white;
        border-radius: 10px;
    }
    .radio-wrapper  {
        gap: 10px;
        margin-bottom: 6px;
    }
    .kdv-wrapper .price-input input#amount {
        height: 40px;
        font-size: 16px;
        border-radius: 8px;
    }
    .kdv-btn {
        font-size: 15px;
        font-weight: 500;
        height: 40px;
    }
    .custom-rate-box {
        height: 40px;
    }
    .custom-radio label {
        min-height: 54px;
        padding: 2px 14px;
        border-radius: 10px;
        border: 1px solid #a5baff;
        gap: 10px;
    }
    .radio-title {
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 14px;
    }
    .about-banner.calc-tool h3.tw-mt-405 {
        margin-top: 14px;
        margin-bottom: 14px;
    }
    .kdv-wrapper .calc-box div .form-label {
        margin-bottom: 2px;
        font-size: 14.5px;
        font-weight: 500;
    }
    .price-input .form-control {
        border: 1px solid #456ffc;
        font-size: 16px;
    }
    .custom-rate-box span {
        font-size: 16px;
        left: 16px;
    }
    .custom-rate-box input {
        padding: 0 7px 0 36px;
        font-size: 15px;
        font-weight: 500;
    }
    .kdv-title{
        font-size:30px;
    }
    .kdv-wrapper .calc-box .col:first-child .kdv-btn{
        border-radius: 8px 0 0 8px;
    }
    .result-item {
        font-size: 15px;
        padding: 8px 0;
    }
    .result-item strong {
        font-size: 16px!important;
        font-weight: 500!important;
    }
    .result-item:last-child{
        padding-bottom:0 !important;
    }
    .kdv-wrapper .calc-box .form-control {
        height: 40px;
        font-size: 16px;
        border-radius: 8px;
    }

    .desi-svg-wrapper {
        max-width: 220px!important;
    }
}

.result-item:last-child{
    border-bottom: transparent;
    padding-bottom: 0;
}

.kdv-wrapper .calc-box .col:nth-child(2) .kdv-btn{
    border-right: none;
}
.kdv-wrapper .calc-box .col:nth-child(3) .kdv-btn{
    border-right: none;
}

.kdv-wrapper .calc-box .col:first-child .kdv-btn {
    border-radius: 12px 0 0 12px;
    border-right: none;
}
.kdv-wrapper .calc-box .col .custom-rate-box {
    border-radius: 0 8px 8px 0;
}
/* KDV Calculate */


.badge-title{
    display:inline-flex;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(33,84,237,.08);
    color:#2154ED;
    font-weight:600;
    font-size:14px;
    margin-bottom:18px;
}

.faq-main-title{
    font-size:52px;
    font-weight:800;
    color:#101828;
    margin-bottom:18px;
}

.faq-main-desc{
    font-size:18px;
    color:#667085;
    max-width:760px;
    margin:auto;
    line-height:1.8;
}

.seo-info-card{
    background:#fff;
    border:1px solid #E4E7EC;
    border-radius:28px;
    padding:35px;
    transition:.3s;
    position:relative;
    overflow:hidden;
}

.seo-info-card:hover{
    border-color:#2154ED;
    transform:translateY(-4px);
}

.info-number {
    width:54px;
    height:54px;
    border-radius:16px;
    background:rgba(33,84,237,.08);
    color:#2154ED;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:700;
    margin-bottom:14px;
}

.seo-info-card h5 {
    font-size: 22px;
    margin-bottom: 6px;
}

.seo-info-card p{
    color: #a0a1a3;
    line-height: 1.35rem;
    margin: 0;
    font-size: 17px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
}

.large-card{
    min-height:260px;
}

@media(max-width:991px){

    .faq-main-title{
        font-size:38px;
    }
    .seo-info-card{
        padding:28px;
    }
    .seo-info-card h5 {
        font-size: 19px;
        font-weight: 500;
    }
    .seo-info-card p {
        -webkit-line-clamp: 12;
    }
}

@media(max-width:575px){

    .faq-main-title{
        font-size:30px;
    }
    .faq-main-desc{
        font-size:16px;
    }
}

/* Desi Hesaplama */
.desi-svg-wrapper{
    position: relative;
    max-width: 300px;
    margin: 0 auto;
}

.kdv-wrapper.desi-wrap .calc-box .price-input .form-control {
    padding-left: 22px;
}

.svg-text{
    fill:#1B1B1B;
    font-size:42px;
    font-weight:700;
    transition:.2s ease;
}

.price-input input{
    height:64px;
}
/* Desi Hesaplama */

/* QR */
.tool-card,
.preview-card{
    background:#fff;
    border: 1px solid #E4E7EC;
    border-radius: 28px;
    padding: 40px;
    position:relative;
}

.tool-input{
    height: 52px;
    border-radius: 12px;
    border: 1px solid #D0D5DD;
    box-shadow: none !important;
    font-size: 16px;
    padding: 0 20px;
}

.color-box{
    height: 52px;
    border: 1px solid #D0D5DD;
    border-radius:12px;
    padding-inline:14px;
    display:flex;
    align-items:center;
    gap:12px;
}

.color-box input{
    width:28px;
    height:28px;
    border:none;
    background:none;
    padding:0;
}

.preview-card{
    overflow:hidden;
}

.preview-glow{
    position:absolute;
    top:-120px;
    right:-120px;
    width:280px;
    height:280px;
    background:#4B5DFF;
    opacity:.08;
    border-radius:50%;
    filter:blur(70px);
}

.qr-preview-wrapper{
    width:200px;
    height:200px;
    background:#fff;
    border-radius:20px;
    border:1px solid var(--main-600);
    display:flex;
    align-items:center;
    justify-content:center;
}

#qrPreview{
    width:150px;
    height:150px;
    min-width:150px;
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

#qrPreview canvas{
    width:150px!important;
    height:150px!important;
    display:block;
    flex-shrink:0;
}
.resolution-slider{
    margin-bottom:22px;
}

.resolution-slider input{
    width:100%;
    accent-color:var(--main-600);
}

.slider-labels{
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#7B849A;
    font-size:14px;
}

.format-buttons{
    display:flex;
    gap:20px;
}
.format-btn{
    flex:1;
    height:30px;
    width:130px;
    min-width:130px;
    max-width:130px;
    border-radius:10px;
    border:1px solid var(--main-600);
    background:#fff;
    font-weight:600;
    color:#1E2430;
    transition:
            background-color .35s ease,
            color .35s ease,
            border-color .35s ease,
            box-shadow .35s ease;
}

.format-btn.active,
.format-btn:hover{
    background:var(--main-600);
    border-color:var(--main-600);
    color:#fff;
    box-shadow:0 8px 18px rgba(19,81,216,.10);
}

.download-btn{
    width:100%;
    margin-top:24px;
    height:56px;
    border-radius:14px;
    border:1px solid transparent;
    background:var(--main-600);
    color:#fff;
    font-size:16px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    transition:
            background-color .35s ease,
            color .35s ease,
            border-color .35s ease,
            box-shadow .35s ease;
}

.download-btn:hover{
    background:#fff;
    border-color:var(--main-600);
    color:var(--main-600);
    box-shadow:0 10px 24px rgba(19,81,216,.12);
}


@media (max-width: 991px) {
    .tool-card, .preview-card {
        padding: 20px;
        border-radius: 22px;
        border: 1px solid #6591fa;
    }
    .tool-input {
        height: 40px;
        font-size: 16px;
        border-radius: 8px;
        padding: 0 12px;
    }
    .color-box {
        height: 42px;
        border-radius: 8px;
        padding-inline: 8px;
        gap: 8px;
    }
    .resolution-slider {
        margin-bottom: 12px;
    }
    .format-btn {
        width: 100px;
        min-width: 100px;
        max-width: 100px;
    }
    .qr-preview-wrapper {
        width: 180px;
        height: 180px;
        border-radius: 12px;
    }
    .download-btn {
        height: 50px;
        border-radius: 12px;
    }
}
/* QR */



/* Metin Analiz Aracı */
.text-analysis-tool{
    border: 1px solid #E4E7EC;
    border-radius: 28px;
    padding: 40px;
    background: #fff;
    height: 100%;
}

.analysis-title{
    font-size:20px;
    font-weight:600;
    color: #101828;
    margin-bottom: 8px;
}

.analysis-textarea{
    height:244px;
    resize:none;
    border:1px solid #E3E8F2;
    border-radius:20px;
    padding:20px;
    font-size:16px;
    box-shadow:none!important;
}


.analysis-textarea:hover {
    border:1px solid var(--main-600);
}

.top-words-box{
    margin-top:28px;
}

.top-words-title{
    font-size: 20px;
    font-weight: 600;
    color: #101828;
    margin-bottom: 8px;
}

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

.word-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:10px;
}

.word-name{
    font-size:17px;
    font-weight:600;
    color:#101828;
}

.word-count{
    font-size:15px;
    color:#6B7280;
}

.word-progress{
    width:100%;
    height:8px;
    border-radius:999px;
    background:#E9EDF5;
    overflow:hidden;
}

.word-progress span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(135deg,var(--main-600),#4B5DFF);
}

.empty-analysis{
    height:120px;
    border:1px solid #E6EAF2;
    border-radius:20px;
    padding: 16px;
    color:#6B7280;
    font-size:16px;
}

.analysis-right{
    padding-left:16px;
}

.stats-title{
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #101828;
}

.stat-card{
    border:1px solid #E6EAF2;
    border-radius:14px;
    padding:14px;
    height:100%;
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.stat-card:hover {
    border:1px solid var(--main-600);
}

.stat-card span{
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--main-600);
    margin-bottom: 8px;
}

.stat-card strong{
    font-size: 24px;
    font-weight: 500;
    color: #101828;
    line-height: 1;
}

.copy-report-btn{
    height: 44px;
    font-size: 15px;
    border:1px solid transparent;
    border-radius: 8px;
    background: var(--main-600);
    color: #fff;
    padding-inline: 22px;
    font-weight: 500;
    transition:
            background-color .35s ease,
            color .35s ease,
            border-color .35s ease,
            box-shadow .35s ease;
}

.copy-report-btn:hover{
    background:#fff;
    border-color:var(--main-600);
    color:var(--main-600);
    box-shadow:0 10px 24px rgba(19,81,216,.12);
}

@media(max-width:991px){
    .analysis-right{
        border-left:none;
        padding-left:0;
    }

    .analysis-title{
        font-size:15px;
    }

    .stats-title,
    .top-words-title{
        font-size:14.4px;
        margin-top: 12px;
    }

    .analysis-textarea{
        height:160px;
        border: 1px solid #baceff;
        border-radius: 12px;
        margin-top: 12px;
        padding: 10px;
        font-size: 14px;
        background: #fcfcfc;
    }
    .top-words-box {
        margin-top: 4px;
    }

    .empty-analysis {
        height: 44px;
        border: 1px solid #baceff;
        border-radius: 8px;
        padding: 10px;
        font-size: 14px;
        background: #fcfcfc;
    }

    .text-analysis-tool {
        padding: 12px 10px;
        border-radius: 22px;
        border: 1px solid #6591fa;
    }
    .copy-report-btn {
        height: 34px;
        font-size: 14px;
        padding-inline: 8px;
    }

    .stat-card span {
        font-size: 14px;
    }

    .word-name {
        font-size: 16px;
    }
    .word-item {
        margin-bottom: 8px;
    }
}
/* Metin Analiz Aracı */


/* Blog Tabs */

#blogTab {
    border: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 10px;
}

#blogTab::-webkit-scrollbar {
    height: 4px;
}

#blogTab::-webkit-scrollbar-thumb {
    background-color: #e9ecef;
    border-radius: 4px;
}

#blogTab .nav-link {
    color: #1a1a1a;
    background-color: transparent;
    font-weight: 500;
    font-size: 15px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

#blogTab .nav-link.active {
    background-color: white;
    border: 1px solid var(--main-600);
    color: var(--main-600);
}

.blog-post .position-relative {
    position: relative;
}

.blog-category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    background: #cfe2ff;
    border: 1px solid var(--main-600);
    color: var(--main-600);
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    pointer-events: none;
}

.blog-reading-time {
    padding: 4px 12px;
}

.blog-title-link {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Pagination */
nav .pagination .page-item .page-link {
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border-radius: 6px;
    border: 1px solid var(--main-600);
    color: var(--main-600);
}

nav .pagination .page-item.active .page-link {
    background-color: var(--main-600);
    border-radius: 6px;
    border: 1px solid transparent;
    color: white;
}

.blog-dright {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    border: 1px solid;
}

@media (max-width: 768px) {
    #blogTab {
        gap: 2px;
        margin-bottom: 10px !important;
    }
    .blog-category-badge {
        padding: 2px 6px;
        top: 10px;
        left: 10px;
    }
    .blog-post a.tw-rounded-3xl {
        border-radius: 12px;
    }
    h2.fs-28 {
        font-size: 20px;
    }
}

/* Pagination */

/* /Blog Tabs */

/* Contact */

.contact-ui-card-wrapper {
    position: relative;
    z-index: 2;
    background: #ffffff;
    border: 1px solid #9bb3e6;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 12px 40px rgba(20, 39, 78, 0.03);
}

.form-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-input-wrapper label {
    font-weight: 500;
}

.form-input-wrapper input,
.form-input-wrapper textarea {
    padding: 14px 18px;
    font-size: 15px;
    border: 1px solid #9bb3e6;
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input-wrapper input:focus,
.form-input-wrapper textarea:focus {
    border-color: #9bb3e6;
    box-shadow: 0 0 0 4px rgba(51, 107, 135, 0.05);
}

.form-input-wrapper input::placeholder,
.form-input-wrapper textarea::placeholder {
    color: #cbd5e1;
}
.bar-cards-flex-group {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: start;
}
.bar-contact-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid #9bb3e6;
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(20, 39, 78, 0.01);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.bar-contact-card.location {
    max-width: 100%;
}

.card-icon-circle-box {
    width: 48px;
    height: 48px;
    background-color: white;
    border: 1px solid var(--main-600);
    color: var(--main-600);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease-in-out;
}

.bar-contact-card:hover .card-icon-circle-box {
    background-color: var(--main-600);
    color: white;
}

.card-text-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-label-text {
    font-size: 15px;
    font-weight: 700;
    color: #14274e;
}
.card-value-text {
    font-size: 14px;
    font-weight: 500;
    color: #4a5570;
}

@media (max-width: 991px) {
    .contact-ui-card-wrapper {
        padding: 22px;
    }
    .form-input-wrapper input, .form-input-wrapper textarea {
        padding: 12px 18px;
    }
    .bar-cards-flex-group {
        flex-direction: column;
        align-items: stretch;
    }
    .bar-contact-card {
        max-width: 100%;
        padding: 14px 16px;
    }
    .bar-cards-flex-group {
        gap: 10px;
    }
}


.form-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: system-ui, -apple-system, sans-serif;
}

.form-input-wrapper label {
    font-size: 14px;
    font-weight: 600;
    color: #14274e;
}

.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-container select {
    width: 100%;
    padding: 14px 40px 14px 18px;
    font-size: 15px;
    background-color: #ffffff;
    border: 1px solid #9bb3e6;
    border-radius: 10px;
    color: #14274e;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-select-container select:focus {
    border-color: var(--main-600);
    box-shadow: 0 0 0 4px rgba(51, 107, 135, 0.05);
}

.custom-select-container select:invalid,
.custom-select-container select option[value=""] {
    color: #cbd5e1;
}

.custom-select-container select option {
    color: #14274e;
    background-color: #ffffff;
    padding: 12px;
}

.custom-select-container::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2314274e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.custom-select-container:focus-within::after {
    transform: translateY(-50%) rotate(180deg);
}

/* /Contact */


/* Barcode Generate */
.tool-ui-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 35px rgba(20, 39, 78, 0.02);
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 2;
}

.form-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.form-input-wrapper label {
    font-size: 14px;
    font-weight: 700;
    color: #14274e;
}

.input-with-icon-box {
    display: flex;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
    transition: border-color 0.2s ease;
}

.input-with-icon-box:focus-within {
    border-color: var(--main-600);
}

.input-prepend-icon {
    background-color: #f8fafc;
    border-right: 1px solid #e2e8f0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    color: var(--vfx-text-muted);
}

.input-with-icon-box input {
    width: 100%;
    padding: 14px 18px;
    font-size: 15px;
    border: none;
    outline: none;
    color: #14274e;
}

.custom-select-container {
    position: relative;
}

.custom-select-container select {
    width: 100%;
    padding: 14px 40px 14px 18px;
    font-size: 15px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    color: #14274e;
    outline: none;
    cursor: pointer;
    appearance: none;
}

.custom-select-container::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2314274e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.tool-validation-warning {
    font-size: 13px;
    color: #dc2626;
    background-color: #fef2f2;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #fee2e2;
    margin-top: 10px;
    text-align: left;
}

.barcode-preview-viewport {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 30px 20px;
    min-height: 188px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.01);
}

#barcodeRenderOutput {
    max-width: 100%;
    height: auto;
}

.btn-tool-action-secondary:disabled {
    background-color: #d9e1ec !important;
    border-color: #a3a3a3;
    color: #14274e!important;
    cursor: not-allowed;
}

@media (max-width: 991px) {
    .tool-ui-card {
        padding: 24px;
    }
}

.tool-input-hint-text {
    font-size: 13px;
    color: var(--vfx-text-muted);
    margin-top: 4px;
    font-weight: 500;
    display: block;
    text-align: left;
}
/* /Barcode Generate */

/* Password Generate */
.wp-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
}

.wp-counter-badge {
    font-size: 16px;
    font-weight: 700;
    color: var(--main-600);
    background: #f0f5f8;
    border: 1px solid var(--main-600);
    padding: 4px 12px;
    border-radius: 8px;
}

.wp-slider-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wp-circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid var(--main-600);
    background: #ffffff;
    color: var(--main-600);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.2s ease-in-out;
}

.wp-circle-btn:hover {
    background: var(--main-600);
    color: white;
    border: 1px solid var(--main-600);
}

.wp-range-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.wp-range-input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #dee2e6;
    outline: none;
}

.wp-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--main-600);
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(51, 107, 135, 0.3);
    transition: transform 0.1s;
}

input[type="range"].wp-range-input {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #dee2e6;
    outline: none;
    accent-color: var(--main-600) !important;
}

input[type="range"].wp-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--main-600) !important;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(19, 81, 216, 0.3);
    transition: transform 0.1s;
}

input[type="range"].wp-range-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--main-600) !important;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(19, 81, 216, 0.3);
    transition: transform 0.1s;
}

.wp-range-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.wp-choice-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid #D0D5DD;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s;
}

.wp-choice-box:hover {
    background: #f1f3f5;
    border-color: #D0D5DD;
}

.wp-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--main-600);
    cursor: pointer;
    flex-shrink: 0;
}

.wp-choice-text {
    font-size: 14px;
    color: #495057;
    font-weight: 500;
}

.wp-alert {
    border-radius: 10px;
    font-size: 13.5px;
    padding: 12px;
}

.wp-output-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    background: #f8fafc;
    height: 54px;
    border-radius: 12px;
    border: 1px solid #D0D5DD;
}

.wp-password-text {
    font-size: 16px;
    font-weight: 600;
    color: #212529;
    word-break: break-all;
}

.wp-refresh-inline {
    background: none;
    border: none;
    padding: 0;
    color: #6c757d;
    transition: color 0.15s;
    flex-shrink: 0;
}

.wp-refresh-inline:hover {
    color: var(--main-600);
}

.wp-strength-badge {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 8px;
    border-radius: 10px;
    transition: all 0.2s;
}

.wp-btn-secondary {
    background: #f0f5f8;
    color: var(--main-600);
    height: 50px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main-600);
}

.wp-btn-secondary:hover {
    border: 1px solid var(--main-600);
    background: #e2ecf2;
    color: var(--main-600);
}

@media (max-width: 991px) {
    .py-60.password-contain {
        padding-block-start: 4px;
    }
    .password-contain .tool-card {
        padding: 12px 10px;
        border-radius: 16px;
    }
    .password-contain .preview-card {
        padding: 12px 10px;
    }
    .password-contain .col-lg-6:nth-child(2) {
        margin-top: 12px;
    }
    .wp-output-box {
        height: 46px;
        padding: 0 14px;
    }
    .wp-choice-box {
        padding: 10px 12px;
        border-radius: 8px;
    }
    .wp-btn-secondary {
        height: 46px;
        border-radius: 8px;
    }
    .wp-circle-btn {
        width: 30px;
        height: 30px;
    }
    .wp-counter-badge {
        font-size: 14px;
        padding: 2px 8px;
        border-radius: 6px;
    }
    .wp-password-text {
        font-size: 14px;
    }
}

/* /Password Generate */


/* SSS */

.wp-faq-category-heading {
    font-size: 18px;
    font-weight: 700;
    color: var(--main-600);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wp-faq-wrapper {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.wp-faq-item {
    background: #ffffff;
    border: 1px solid #b5c8f3;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.wp-faq-item:hover {
    border-color: var(--main-600);
    box-shadow: 0 4px 15px rgba(51, 107, 135, 0.08);
}

.wp-faq-question {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #334155;
    user-select: none;
    transition: all 0.2s ease;
}

.wp-faq-item:hover .wp-faq-question {
    color: var(--main-600);
}

.wp-faq-icon {
    color: #94a3b8;
    transition: transform 0.3s ease, color 0.2s ease;
    flex-shrink: 0;
    margin-left: 16px;
}

.wp-faq-item:hover .wp-faq-icon {
    color: var(--main-600);
}

.wp-faq-question[aria-expanded="true"] {
    color: var(--main-600);
    background-color: #fcfdfe;
}

.wp-faq-question[aria-expanded="true"] .wp-faq-icon {
    transform: rotate(180deg);
    color: var(--main-600);
}

.wp-faq-item:has(.wp-faq-question[aria-expanded="true"]) {
    border-color: var(--main-600);
    box-shadow: 0 4px 20px rgba(51, 107, 135, 0.12);
}

.wp-faq-answer {
    display: block;
    padding: 0 24px 22px 24px;
    color: #475569;
    font-size: 15px;
    line-height: 1.7;
    background-color: #fcfdfe;
}

.wp-faq-answer p {
    line-height: 1.5rem;
}

@media (max-width: 991px) {
    .py-120.wp-faq-section {
        padding-block-start: 20px;
    }
    .wp-faq-category-heading {
        text-align: center;
        font-size: 16px;
    }
    .wp-faq-question {
        padding: 10px 14px;
    }
    .wp-faq-answer {
        padding: 0 14px 12px 14px;
    }
    .wp-faq-answer p {
        line-height: 1.4rem;
    }
    .seamless-integration .container .text-heading.fs-34 {
        font-size: 20px;
        margin-top: 20px;
    }
    .seamless-integration .container p {

    }
    .faq-two .accordion-item .accordion-header .accordion-button {
        line-height: 20px !important;
    }
}
/* /SSS */


/* Integration */
.wp-integration-content {
    font-family: 'Inter', sans-serif;
    padding-bottom: 80px;
}

.wp-filter-wrapper {
    user-select: none;
}

.wp-filter-btn {
    background: #ffffff;
    border: 1px solid #bac9e6;
    color: #475569;
    font-weight: 500;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

.wp-filter-btn:hover, .wp-filter-btn.active {
    background-color: var(--main-600);
    border-color: var(--main-600);
    color: #ffffff;
}

.wp-integration-grid {
    perspective: 1000px;
}

.wp-int-card {
    background: #ffffff;
    border: 1px solid #bac9e6;
    border-radius: 24px;
    padding: 32px 24px 24px 24px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-int-card:hover {
    transform: translateY(-5px);
    border-color: var(--main-600);
    box-shadow: 0 12px 24px rgba(51, 107, 135, 0.08);
}

.wp-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 30px;
}

.badge-free {
    background-color: #ecfdf5;
    color: #005b3d;
    border: 1px solid #10b981;
}

.badge-premium {
    background-color: #f0f5f8;
    border: 1px solid var(--main-600);
    color: var(--main-600);
}

.wp-int-logo {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    margin-top: 8px;
}

.wp-int-logo img {
    max-height: 100%;
    width: 116px;
    object-fit: contain;
    transition: all 0.2s ease-in-out;
}

.wp-int-card:hover .wp-int-logo img {
    filter: grayscale(0%);
    opacity: 1;
}

.wp-int-name {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.wp-int-desc {
    font-size: 13.5px;
    color: var(--vfx-text-muted);
    line-height: 1.5;
    margin: 0;
}

.w-140 {
    width: 140px!important;
}
/* /Integration */

/* Services */

.tv-feature-section .tv-feature-item {
    background: #e9eefb;
    padding: 40px;
    border-radius: 24px;
    position: relative;
}
.tv-feature-section .tv-feature-item .client-social-proof {
    all: unset;
}
.tv-feature-section .tv-feature-item .client-social-proof .social {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}
.tv-feature-section .tv-feature-item .client-social-proof .social img {
    display: flex;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin-left: -25px;
    background-color: #18225f;
    border: 3px solid #ffffff;
}
.tv-feature-section .tv-feature-item .client-social-proof .social img:first-child {
    margin-left: 0;
}
.tv-feature-section .tv-feature-item .client-social-proof .social h4 {
    background: var(--main-600);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: #ffffff;
    margin: 0;
    font-size: 14px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    border: 2px solid white;
    margin-left: -25px;
}

.theme-btn.style2::before {
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    transform: skewx(-20deg);
    background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
    z-index: 0;
}
.link-effect {
    position: relative;
    overflow: hidden;
    display: block;
    height: 26px;
}
.link-effect .effect-1 {
    display: block;
    height: 100%;
    position: relative;
    top: 0%;
    transition: 0.3s;
}
.theme-btn.style2 .arrow-all-2 {
    width: 30px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    right: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.4s ease;
}
.theme-btn.style2 .arrow-all-2 i {
    position: relative;
    overflow: hidden;
    width: 14px;
    height: 14px;
    display: inline-flex;
}
.theme-btn.style2 .arrow-all-2 i svg {
    transform: translateY(-1px);
    position: absolute;
    bottom: -1px;
    left: 1px;
    transition: all 0.2s ease-out;
}
.theme-btn.style2 .arrow-all-2 i svg:last-child {
    left: -12px;
    bottom: -12px;
    transform: translate(0, 0);
    opacity: 0;
}
.tv-feature-section .tv-feature-item .client-social-proof .scribble-shape1 {
    position: absolute;
    top: 66%;
    left: 52%;
    animation: emgSwing 1s ease-in-out 1s forwards infinite alternate;
    transform-origin: top right;
}
.scribble-shape1 {
    position: absolute;
    top: 32%;
    left: 46%;
    -webkit-animation: emgSwing 1s ease-in-out 1s forwards infinite alternate;
    animation: emgSwing 1s ease-in-out 1s forwards infinite alternate;
    -webkit-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;
}
.tv-feature-section .tv-feature-box {
    background: var(--main-600);
    border-radius: 24px;
    padding: 40px 40px;
    position: relative;
}
.tv-feature-section .tv-feature-box .icon-top {
    position: absolute;
    top: 0;
    right: 0;
    background: #f4f7ff;
    border-bottom: 20px solid #f4f7ff;
    border-left: 20px solid #f4f7ff;
    border-radius: 0 0 0 40%;
}
.tv-feature-section .tv-feature-box .icon-top::before {
    position: absolute;
    left: -44px;
    top: 0px;
    content: "";
    height: 24px;
    width: 24px;
   /* background: url(data:image/svg+xml,<svg viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-11 h-11"><path d="M11 1.54972e-06L0 0L2.38419e-07 11C1.65973e-07 4.92487 4.92487 1.62217e-06 11 1.54972e-06Z" fill="%23f6f5fc"></path></svg>);*/
    transform: rotate(90deg);
}
.tv-feature-section .tv-feature-box .icon-top .icon {
    background: var(--main-600);
    color: #ffffff;
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 22%;
    transition: all 0.4s ease;
}
.tv-feature-section .tv-feature-box .icon-top .icon i {
    position: relative;
    overflow: hidden;
    width: 14px;
    height: 14px;
    display: inline-flex;
}
.tv-feature-section .tv-feature-box .icon-top .icon i svg {
    transform: translateY(-1px);
    position: absolute;
    bottom: -1px;
    left: 1px;
    transition: all 0.2s ease-out;
}
.tv-feature-section .tv-feature-box .icon-top .icon i svg:last-child {
    left: -12px;
    bottom: -12px;
    transform: translate(0, 0);
    opacity: 0;
}
.tv-feature-section .tv-feature-box .icon-top::after {
    position: absolute;
    right: 0px;
    bottom: -44px;
    content: "";
    height: 24px;
    width: 24px;
    transform: rotate(90deg);
}
.tv-feature-section .tv-feature-box h2 {
    font-size: 26px;
    margin: 0 0 15px 0;
    line-height: 34px;
    color: #ffffff;
    font-weight: 600;
}
.tv-feature-section .tv-feature-box p {
    color: #ffffff99;
    line-height: 1.4;
}
.tv-feature-section .tv-feature-box {
    background:  var(--main-600);
    border-radius: 23px;
    padding: 40px 40px;
    position: relative;
}
.bg-theme3 {
    background-color: #061153 !important;
}

.bg-dark {
    background-color: #061153 !important;
}

.moving {
    animation: moving 8s linear infinite;
}

@keyframes moving {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-50px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes emgSwing {
    0% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}


.theme-btn.style2 .arrow-all-2 {
    width: 30px;
    height: 26px;
    overflow: hidden;
    right: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.4s ease;
}
.theme-btn.style2 .arrow-all-2 i {
    position: relative;
    overflow: hidden;
    width: 14px;
    height: 14px;
    display: inline-flex;
}
.theme-btn.style2 .arrow-all-2 i svg {
    transform: translateY(-1px);
    position: absolute;
    bottom: -1px;
    left: 1px;
    transition: all 0.2s ease-out;
}
.theme-btn.style2 .arrow-all-2 i svg:last-child {
    left: -12px;
    bottom: -12px;
    transform: translate(0, 0);
    opacity: 0;
}
.theme-btn.style2:hover .arrow-all-2 i svg:first-child {
    transform: translate(16px, -16px);
}
.theme-btn.style2:hover .arrow-all-2 i svg:last-child {
    opacity: 1;
    visibility: visible;
    transform: translate(13px, -12px);
}
.theme-btn.style2:hover::before {
    animation: pxl_btn_shine 1.4s ease;
    animation-delay: 0.1s;
}


/* Service buton */

.service-card:hover .theme-btn.style2 .arrow-all-2 i svg:first-child {
    transform: translate(16px, -16px);
}
.service-card:hover .theme-btn.style2 .arrow-all-2 i svg:last-child {
    opacity: 1;
    visibility: visible;
    transform: translate(13px, -12px);
}
.service-card:hover .theme-btn.style2::before {
    animation: pxl_btn_shine 1.4s ease;
    animation-delay: 0.1s;
}
/* /Service buton */


@-webkit-keyframes pxl_btn_shine {
    100% {
        left: 200%;
    }
}

@keyframes pxl_btn_shine {
    100% {
        left: 200%;
    }
}

/* /Services */

.theme-btn {
    font-size: 16px;
    font-weight: 500;
    position: relative;
    padding: 15px 60px 15px 40px;
    margin-bottom: 0px;
    color: #ffffff;
    background-color: var(--main-600);
    display: inline-flex;
    overflow: hidden;
    justify-content: center;
    text-decoration: none;
    border-radius: 30px;
    /* Small devices */
}
.theme-btn.style-2 {
    border: 1px solid #ffffff;
    background: transparent;
}
.theme-btn.error {
    padding: 15px 40px 15px 40px;
    gap: 10px;
}
.theme-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    transform: skewx(-20deg);
    background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
    z-index: 0;
}
@media (max-width: 767px) {
    .theme-btn {
        padding: 15px 50px 15px 30px;
    }
}
.theme-btn.bg-white {
    background-color: #ffffff;
}
.theme-btn.bg-dark {
    background-color: var(--main-600);
    color: #ffffff;
}
.theme-btn.bg-dark:hover {
    color: #ffffff;
    background-color: var(--main-600);
}
.theme-btn.bg-dark3 {
    background-color: #18225f;
    color: #ffffff;
}
.theme-btn.bg-dark3:hover {
    color: #ffffff;
}
.theme-btn.bg-theme {
    background-color: var(--main-600);
    color: #ffffff;
}
.theme-btn.bg-theme:hover {
    color: #ffffff;
}
.theme-btn.bg-border {
    background-color: var(--bs-border-color);
    color: #ffffff;
}
.theme-btn.bg-border:hover {
    color: #ffffff;
}
.theme-btn.bg-transparent {
    background-color: transparent;
    border: 1px solid var(--main-600);
}
.theme-btn i {
    font-size: 16px;
    height: 26px;
    line-height: 1.66;
}
.theme-btn:hover {
    color: #ffffff;
}
.theme-btn:hover .effect-1 {
    top: -100%;
}
.theme-btn.text-theme:before, .theme-btn.text-theme:after {
    background: var(--main-600);
}
.theme-btn.text-theme img {
    filter: brightness(99);
}
.theme-btn .arrow-all {
    width: 30px;
    height: 30px;
    background: #ffffff;
    color: var(--main-600);
    border-radius: 50%;
    margin-left: 20px;
    position: absolute;
    overflow: hidden;
    right: 10px;
    top: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 0.4s ease;
}
.theme-btn .arrow-all i {
    position: relative;
    overflow: hidden;
    width: 14px;
    height: 14px;
    display: inline-flex;
}
.theme-btn .arrow-all i svg {
    transform: translateY(-1px);
    position: absolute;
    bottom: -3px;
    left: -1px;
    transition: all 0.2s ease-out;
}
.theme-btn .arrow-all i svg:last-child {
    left: -13px;
    bottom: -3px;
    transform: translate(0, 0);
    opacity: 0;
}
.theme-btn:hover .arrow-all i svg:first-child {
    transform: translate(16px, 0);
}
.theme-btn:hover .arrow-all i svg:last-child {
    opacity: 1;
    visibility: visible;
    transform: translate(13px, 0);
}
.theme-btn:hover::before {
    animation: pxl_btn_shine 1.4s ease;
    animation-delay: 0.1s;
}

.theme-btn.style2 {
    font-size: 16px;
    font-weight: 400;
    position: relative;
    padding: 10px 30px 10px 30px;
    margin-bottom: 0;
    color: #ffffff;
    background-color: var(--main-600);
    display: inline-flex;
    overflow: hidden;
    justify-content: center;
    text-decoration: none;
    border-radius: 26px;
    margin-top: 26px;
}
.theme-btn.style2::before {
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 200%;
    height: 100%;
    transform: skewx(-20deg);
    background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.35), transparent);
    z-index: 0;
}
@media (max-width: 767px) {
    .theme-btn.style2 {
        padding: 10px 35px;
    }
    .tv-feature-section .tv-feature-item {
        padding: 20px;
        border: 1px solid var(--main-600);
        margin-bottom: 20px;
    }
    .tv-feature-section .tv-feature-item .client-social-proof h2.fs-26 {
        font-size: 20px;
    }
    .tv-feature-section .tv-feature-item .client-social-proof .social {
        margin-bottom: 20px;
    }
    .tv-feature-section .tv-feature-item .client-social-proof .scribble-shape1 {
        top: 54%;
        left: 70%;
    }
    .tv-feature-section .tv-feature-box {
        padding: 30px;
        margin-bottom: 20px;
    }
    .tv-feature-section .tv-feature-box h2 {
        font-size: 18px;
        line-height: 28px;
        margin: 0 0 6px 0;
    }
    .tv-feature-section .tv-feature-box .logo {
        margin-bottom: 20px!important;
        width: 50px;
    }
    .services-box .text-center.tw-mb-15 p {
        line-height: 20px;
        margin-top: 10px;
    }
    .services-box h4 {
        font-size: 22px;
    }
    .services-box .text-center.max-w-760-px.mx-auto.tw-mb-15 {
        margin-block-end: 2rem;
    }
    .service-card {
        padding: 30px!important;
    }
    .features-three.service-detail .max-w-620-px .splitTextStyleOne.fs-40 {
        font-size: 24px;
        font-weight: 500 !important;
        line-height: 30px!important;
    }
    .features-three.service-detail .skew {
        gap: 14px;
    }
    .features-three.service-detail .skew .transform-rotate--14-deg {
        transform: rotate(354deg);
    }
    .features-three.service-detail .skew .transform-rotate-350-deg {
        transform: rotate(357deg);
    }
    .features-three.service-detail .group-item {
        padding: 24px 30px;
    }
    .features-three.service-detail .group-item h5 {
        font-size: 20px;
        font-weight: 500;
    }
    .features-three.service-detail .group-item img {
        height: 70px;
        width: 100%;
    }
}
.tv-feature-section .tv-feature-box .logo {
    margin-bottom: 40px;
}

.service-card {
    background: #ffffff;
    border: 1px solid var(--main-600);
    border-radius: 24px;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.006);
}

.service-card .icon-box {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.service-card:hover .icon-box {
    background-color: #fff;
}

.service-card .service-title {
    font-size: 20px;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 15px;
    line-height: 1.4;
}

.service-card .service-text {
    color: #718096;
    line-height: 1.4;
    margin-bottom: 10px;
    flex-grow: 1;
}

.service-card .service-link {
    font-size: 14px;
    font-weight: 600;
    color: #4a5568;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.service-card .service-link svg {
    transition: transform 0.3s ease;
}

.service-card:hover .service-link {
    color: var(--main-600);
}

.service-card:hover .service-link svg {
    transform: translateX(4px);
}

/* Service Detail */
.common-check-two .form-check-input {
    border-color: var(--main-600) !important;
}
.common-check-two .form-check-input:checked {
    background: linear-gradient(270deg, var(--main-600) 0%, var(--main-600) 100%) !important;
}

.bg-main-light {
    background-color: #f6fbff;
}

.transform-rotate-350-deg {
    transform: rotate(350deg);
}

.gradient-bg-main {
    background: linear-gradient(270deg, var(--main-600) 0%, #75a4f3fa 100%);
}

.faq-two .accordion.style-two {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.faq-two .accordion.style-two .accordion-button[aria-expanded=true]::before {
    color: #ffffff !important;
    border-color: var(--main-600) !important;
}
.faq-two .accordion-item .accordion-header .accordion-button {
    font-size: 18px;
    font-weight: 600;
}
.faq-two .accordion.style-two .accordion-button::before {
    border: 1px solid var(--main-600);
    color: var(--main-700);
}
.faq-two .accordion.style-two .accordion-item:has(.accordion-collapse.show), .accordion.style-two .accordion-item:has(.accordion-button[aria-expanded=true]) {
    border-radius: 20px !important;
    border: 1px solid var(--main-600) !important;
}
.faq-two .accordion.style-two .accordion-item {
    border: 1px solid var(--main-600) !important;
    border-radius: 20px !important;
}

/* /Service Detail */

/* API */

@keyframes ambientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bento-header-text {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--wp-text-main);
}

.bento-box {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.03);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
}

.bento-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% -20%, rgba(51, 107, 135, 0.4) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: -1;
}

.bento-box:hover {
    box-shadow: 0 30px 60px -15px rgba(51, 107, 135, 0.25);
}

.bento-box:hover::before {
    opacity: 0.15;
}

.bento-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--main-600);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.5rem 1rem;
    border-radius: 50rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(51, 107, 135, 0.05);
    transition: transform 0.3s ease;
}


@keyframes pulseDotLive {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulseDotLive 1.5s infinite;
}

.bento-box:hover .pulsing-dot {
    animation: pulseDotLive 0.8s infinite;
}

.ui-network-graph {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 1rem;
    position: relative;
}

@keyframes nodeBreathe {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 25px rgb(51 107 135 / 0); }
    50% { transform: scale(1.03); box-shadow: 0 15px 35px rgb(51 107 135 / 0); }
}

.ui-node-core {
    z-index: 3;
    background-color: #fff;
    border: 1px solid #f4301b;
    border-radius: 6px;
    padding: 10px 18px;
    animation: nodeBreathe 3s ease-in-out infinite;
}

.ui-node-target {
    background: #ffffff;
    border: 1px solid var(--main-600);
    padding: 0.65rem 1.25rem;
    border-radius: 0.5rem;
    margin: 0.2rem 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 48px;
    height: 48px;
    width: 120px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


.bento-box:hover .ui-node-target {
    box-shadow: 0 5px 15px rgba(51, 107, 135, 0.1);
}

.ui-node-target.trend-color {
    border-color: #ed601f;
}

.ui-node-target.hb-color {
    border-color: #7722db;
}

.ui-node-target.n11-color {
    border-color: #ff44ee;
}

.ui-node-target.pa-color {
    border-color: #0234f9;
}


.ui-connection-lines {
    position: absolute;
    left: 20%;
    right: 20%;
    top: -25%;
    bottom: -25%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    z-index: 1;
    pointer-events: none;
}

.ui-connection-lines .ui-line:nth-child(1) {
    transform: rotate(12deg);
    left: 0;
    right: 20%;
    top: 18%;
    bottom: 6%;
}

.ui-connection-lines .ui-line:nth-child(2) {
    transform: rotate(-12deg);
    left: 0;
    right: 0;
    top: -18%;
    bottom: 30%;
}

@keyframes continuousFlow {
    0% { left: -50%; opacity: 0; }
    50% { opacity: 1; }
    100% { left: 150%; opacity: 0; }
}

.ui-line {
    height: 2px;
    background: rgba(51, 107, 135, 0.1);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ui-line::after {
    content: '';
    position: absolute;
    top: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--main-600), transparent);

    animation: continuousFlow 3.5s infinite linear;
}

.bento-box:hover .ui-line::after {
    animation-duration: 0.9s;
    background: linear-gradient(90deg, transparent, rgb(19 81 216 / 0.65), transparent);
}

.ui-line:nth-child(2)::after {
    animation-delay: 0.7s;
}
.ui-line:nth-child(3)::after {
    animation-delay: 1.4s;
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(-2deg);
    }
}

.ui-credit-card {
    background: linear-gradient(135deg, var(--main-600) 0%, var(--wp-text-main) 100%);
    border-radius: 1rem;
    padding: 1.6rem 0.9rem;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
    box-shadow: 0 15px 30px rgba(15, 23, 42, 0.2);
    animation: cardFloat 4s ease-in-out infinite;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 264px;
}

.ui-credit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
}

.bento-box:hover .ui-credit-card {
    box-shadow: 0 25px 50px rgb(15 23 42 / 0.18);
}

.bento-box:hover .ui-credit-card::before {
    left: 200%;
}

.ui-card-chip {
    width: 35px;
    height: 25px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    border-radius: 0.25rem;
    margin-bottom: 1.5rem;
}

.ui-card-number {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

.ui-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.ui-mac-terminal {
    background: var(--wp-text-main);
    border-radius: 0.75rem;
    margin-top: 2rem;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transition: box-shadow 0.4s ease;
}

.bento-box:hover .ui-mac-terminal {
    box-shadow: 0 0 30px rgba(56, 189, 248, 0.3);
}

.ui-mac-header {
    background: #1e293b;
    padding: 0.75rem 1rem;
    display: flex;
    gap: 0.4rem;
}

.ui-mac-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.ui-mac-dot.red { background: #ef4444; }
.ui-mac-dot.yellow { background: #eab308; }
.ui-mac-dot.green { background: #22c55e; }

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.ui-mac-body {
    padding: 1.25rem;
    font-family: 'Fira Code', Consolas, monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    color: #cbd5e1;
}

.syntax-purple { color: #c084fc; }
.syntax-blue { color: #38bdf8; }
.syntax-green { color: #4ade80; }
.syntax-yellow { color: #fde047; }

.type-l1, .type-l2, .type-l3, .type-l4, .type-l5 {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    vertical-align: bottom;
}

.type-l1 { animation: type1 7s steps(40, end) infinite; }
.type-l2 { animation: type2 7s steps(20, end) infinite; }
.type-l3 { animation: type3 7s steps(20, end) infinite; }
.type-l4 { animation: type4 7s steps(10, end) infinite; }
.type-l5 { animation: type5 7s steps(30, end) infinite; }

@keyframes type1 {
    0% { width: 0; }
    15%, 85% { width: 100%; }
    92%, 100% { width: 0; }
}
@keyframes type2 {
    0%, 15% { width: 0; }
    30%, 85% { width: 100%; }
    92%, 100% { width: 0; }
}
@keyframes type3 {
    0%, 30% { width: 0; }
    45%, 85% { width: 100%; }
    92%, 100% { width: 0; }
}
@keyframes type4 {
    0%, 45% { width: 0; }
    55%, 85% { width: 100%; }
    92%, 100% { width: 0; }
}
@keyframes type5 {
    0%, 55% { width: 0; }
    75%, 85% { width: 100%; }
    92%, 100% { width: 0; }
}

.cursor-blink::after {
    content: '_';
    animation: blinkCursor 1s step-end infinite;
}

.bento-box:hover .cursor-blink::after {
    animation-duration: 0.3s;
    color: #38bdf8;
}

.ui-tracker {
    border: 1px solid var(--main-200);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-top: 2rem;
}

.ui-track-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}

.ui-track-step:last-child {
    padding-bottom: 0;
}

.ui-track-step::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: #e2e8f0;
}

.ui-track-step:last-child::before {
    display: none;
}

.ui-track-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

.ui-track-step.done .ui-track-icon {
    background: var(--main-600);
    border-color: var(--main-600);
}

.ui-track-step.done .ui-track-icon::after {
    content: '✓';
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

@keyframes pulseActiveStep {
    0%, 100% { box-shadow: 0 0 0 0 rgba(51, 107, 135, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(51, 107, 135, 0); }
}

.ui-track-step.active .ui-track-icon {
    border-color: var(--main-600);
    animation: pulseActiveStep 2s infinite;
}

.bento-box:hover .ui-track-step.active .ui-track-icon {
    animation-duration: 0.8s;
    background: var(--main-600);
}

.ui-track-step.active .ui-track-icon::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--main-600);
    border-radius: 50%;
    transition: background 0.3s ease;
}

.bento-box:hover .ui-track-step.active .ui-track-icon::after {
    background: #ffffff;
}

.ui-track-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wp-text-main);
    padding-top: 2px;
}

.ui-track-subtext {
    font-size: 0.80rem;
    color: var(--vfx-text-muted);
}

.ui-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border: 1px solid var(--main-300);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-top: 2rem;
    flex-direction: row;
    gap: 0.5rem;
    position: relative;
    width: 100% !important;
    height: 140px !important;
    flex-shrink: 0;
}

.ui-chart .ui-bar-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    height: 100%;
    width: 18%;
    position: relative;
}

@keyframes eqBar1 { 0%, 100% { height: 20%; } 50% { height: 35%; } }
@keyframes eqBar2 { 0%, 100% { height: 40%; } 50% { height: 25%; } }
@keyframes eqBar3 { 0%, 100% { height: 30%; } 50% { height: 45%; } }
@keyframes eqBar4 { 0%, 100% { height: 50%; } 50% { height: 30%; } }

.ui-bar {
    width: 100%;
    background: #cbd5e1;
    border-radius: 0.25rem;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-bar-group:nth-child(1) .ui-bar {
    animation: eqBar1 2s ease-in-out infinite;
}
.ui-bar-group:nth-child(2) .ui-bar {
    animation: eqBar2 2.5s ease-in-out infinite;
}
.ui-bar-group:nth-child(3) .ui-bar {
    animation: eqBar3 1.8s ease-in-out infinite;
}
.ui-bar-group:nth-child(4) .ui-bar {
    animation: eqBar4 2.2s ease-in-out infinite;
    background: var(--main-600);
}

.bento-box:hover .ui-bar-group:nth-child(1) .ui-bar {
    animation: none;
    height: 40%;
    background: #94a3b8;
}
.bento-box:hover .ui-bar-group:nth-child(2) .ui-bar {
    animation: none;
    height: 65%;
    background: var(--vfx-text-muted);
}
.bento-box:hover .ui-bar-group:nth-child(3) .ui-bar {
    animation: none;
    height: 50%;
    background: #94a3b8;
}
.bento-box:hover .ui-bar-group:nth-child(4) .ui-bar {
    animation: none;
    height: 100%;
    background: var(--main-600);
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.4);
}

.ui-tooltip {
    background: var(--wp-text-main);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    position: absolute;
    top: -30px;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 0.1s;
    white-space: nowrap;
    pointer-events: none;
}

.ui-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: var(--wp-text-main) transparent transparent transparent;
}

.bento-box:hover .ui-bar-group:nth-child(4) .ui-tooltip {
    opacity: 1;
    transform: translateY(0) scale(1);
}

@media screen and (max-width: 768px) {
    .ui-node-target {
        max-height: 38px;
        height: 38px;
        width: 88px;
        padding: 0.65rem;
    }
    .bento-box .ui-network-graph .d-flex .ui-node-target img {
        width: 64px;
    }
    .ui-node-core {
        padding: 0 8px 8px;
    }
    .ui-node-core img {
        width: 70px;
    }
    .bento-box div h3.fs-24 {
        font-size: 20px;
    }
}
/* /API */

/* CRM */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(170px, auto);
    gap: 1.5rem;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1rem;
}

.bento-card {
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(20px);
}

.bento-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 12px 30px rgba(51, 107, 135, 0.12);
    border-color: rgba(51, 107, 135, 0.2);
}

.span-2x2 { grid-column: span 2; grid-row: span 2; }
.span-1x2 { grid-column: span 1; grid-row: span 2; }
.span-2x1 { grid-column: span 2; grid-row: span 1; }
.span-1x1 { grid-column: span 1; grid-row: span 1; }

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1d1d1f;
}

.card-subtitle {
    font-size: 0.9rem;
    color: #86868b;
    margin: 0;
}

.icon-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.stat-value {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #1d1d1f;
    margin-top: auto;
    margin-bottom: 0.2rem;
}
.stat-trend {
    font-size: 0.85rem;
    font-weight: 500;
}

.task-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.task-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0.8rem;
    border-radius: 12px;
    background: rgba(0,0,0,0.01);
    transition: background 0.2s;
    border: 1px solid var(--main-200);
}
.task-item:hover {
    background: var(--main-50);
    border: 1px solid var(--main-500);
    cursor: pointer;
}
.task-info h6 { margin: 0 0 3px 0; font-size: 0.9rem; font-weight: 600; }
.task-info p { margin: 0; font-size: 0.75rem; color: #86868b; }
.form-check-input:checked { background-color: var(--main-600); border-color: var(--main-600); }

.red-badge {
    background-color: #ff3b30;
    color: white;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: bold;
    vertical-align: middle;
}

.bento-table {
    margin: 0;
    width: 100%;
}
.bento-table td {
    vertical-align: middle;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
    font-size: 0.9rem;
    color: #1d1d1f;
}
.bento-table tr:last-child td { border-bottom: none; }
.status-badge {
    padding: 0.3rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.chart-container {
    flex-grow: 1;
    position: relative;
    width: 100%;
    min-height: 180px;
}

@media (max-width: 1200px) {
    .bento-grid {
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
    }
    .span-2x2, .span-2x1 {
        grid-column: span 2;
    }
}
@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0;
    }
    .span-1x2 {
        grid-column: span 1; grid-row: span 1;
    }
}
@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .span-2x2, .span-2x1, .span-1x2, .span-1x1 {
        grid-column: span 1;
        grid-row: auto;
    }
    .bento-table td {
        text-align: center;
        font-size: 0.8rem;
    }
    .stat-value {
        font-size: 1.6rem;
    }
}
/* /CRM */

/* SEO */
.seo-bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 1.5rem;
}

.seo-card {
    background: #ffffff;
    padding: 1.8rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
}

.seo-span-2x2 {
    grid-column: span 2;
    grid-row: span 2;
}
.seo-span-1x2 {
    grid-column: span 1;
    grid-row: span 2;
}
.seo-span-1x1 {
    grid-column: span 1;
    grid-row: span 1;
}
.seo-span-2x1 {
    grid-column: span 2;
    grid-row: span 1;
}
.seo-card-title {
    font-size: 1.15rem;
}
.seo-card-subtitle {
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

.seo-big-data {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #1d1d1f;
    margin-top: auto;
    letter-spacing: -1.5px;
}

.geo-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.geo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid var(--main-600);
    font-size: 0.9rem;
    font-weight: 500;
}
.geo-item svg {
    margin-bottom: 2px;
    color: var(--main-600);
}

.seo-chart-container {
    position: relative;
    flex-grow: 1;
    width: 100%;
    min-height: 180px;
}

@media (max-width: 992px) {
    .seo-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .seo-span-1x2 {
        grid-column: span 2; grid-row: span 1;
    }
}
@media (max-width: 768px) {
    .seo-bento-grid {
        grid-template-columns: 1fr;
    }
    .seo-span-2x2, .seo-span-1x1, .seo-span-1x2 {
        grid-column: span 1;
    }
    .seo-span-2x1 {
        grid-column: span 1;
    }
}

.marquee-container {
    overflow: hidden;
    width: 100%;
    display: flex;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.marquee-track {
    display: flex;
    gap: 1rem;
    min-width: 200%;
    animation: marqueeScroll 12s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

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

.scanner-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--main-600);
    box-shadow: 0 0 15px var(--main-600), 0 0 30px var(--main-600);
    animation: scan 3s ease-in-out infinite;
    z-index: 2;
}

@keyframes scan {
    0% { top: -10%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}

.aurora-card {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.aurora-card::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, #1351d891 0%, rgba(51, 107, 135, 0.05) 50%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    top: -40px;
    right: -40px;
    z-index: -1;
    filter: blur(25px);
    animation: auroraFloat 5s ease-in-out infinite alternate;
}

@keyframes auroraFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-40px, 40px) scale(1.4); }
}
/* /SEO */

/* Graphic Design */
.eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:#e8efff;color:var(--main-600);
    border: 1px solid var(--main-600);
    font-weight:800;font-size:.68rem;letter-spacing:.07em;
    padding:8px 16px;border-radius:999px;
    opacity:0;animation:fadeUp .6s ease forwards;
}
h1.hero-title{
    font-weight:600;font-size:clamp(1rem,1.4vw,1.6rem);
    line-height:1.14;margin:20px 0 18px;letter-spacing:-.01em;
    opacity:0;animation:fadeUp .7s ease .1s forwards;
}
.grad-text{
    background:linear-gradient(90deg,var(--main-600),var(--main-400) 55%, var(--main-900));
    -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{
    color:#78748a;font-size:1.06rem;max-width:480px;line-height:1.4;
    margin-bottom:34px;opacity:0;animation:fadeUp .7s ease .2s forwards;
}
.chip{
    background:#fff;
    border-radius:14px;
    padding:16px 16px;display:flex;align-items:center;gap:13px;height:100%;
    opacity:0;animation:fadeUp .6s ease forwards;
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
    border: 1px solid var(--main-200);
}

.chip:hover{transform:translateY(-5px);box-shadow:0 14px 26px rgba(139,92,246,.14);border-color:#ded2fb;}
.chip-icon{
    width:38px;height:38px;border-radius:10px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;font-size:1rem;
    transition:transform .35s ease;
    background: var(--main-50);color:var(--main-600); border: 1px solid var(--main-600);

}
.chip:hover .chip-icon{transform:rotate(-10deg) scale(1.1);}

.chip .title{font-weight:600;font-size:.96rem;margin:0;line-height:1.3;}
.chip .desc{color:#78748a;font-size:.9rem;margin:0;}

.hero-panel{
    border-radius:22px;
    border: 1px solid var(--main-200);
    box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
    padding:38px;height:100%;min-height:340px;
    position:relative;overflow:hidden;
    opacity:0;animation:fadeIn .8s ease .25s forwards;
}
.spark-badge{
    width:46px;height:46px;border-radius:13px;background:#fff; border: 1px solid var(--main-600);
    display:flex;align-items:center;justify-content:center;color:var(--main-600);
    box-shadow:0 8px 18px #d8e2f7;margin-bottom:22px;
    animation:pulseSlow 3s ease-in-out infinite;
}
.hero-panel h2{font-weight:600;font-size:1.3rem;line-height:1.32;margin-bottom:14px;max-width:300px;}
.hero-panel p{color:#645d78;max-width:290px;margin-bottom:24px;font-size:1rem;line-height:1.3;}
.btn-primary-grad{
    color:var(--main-600);
    font-weight:600;
    padding:14px 24px;
    border-radius:10px;
    font-size:.92rem;
    border: 1px solid var(--main-600);
    transition:transform .25s ease,box-shadow .25s ease;
}
.btn-primary-grad:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgb(92 146 246 / 0.4);
    color:var(--main-600);
    border: 1px solid var(--main-600);
}
.btn-primary-grad i {
    transition:transform .25s ease;
    margin-left:6px;
}
.btn-primary-grad:hover i{transform:translateX(4px);}

.hero-graphic{
    position:absolute;right:0;top:0;width:100%;height:100%;
    pointer-events:none;
}
.hero-graphic img {
    right: 26px;
    top: 50%;
    transform: translateY(-50%) translateX(0px);
    max-width: 330px;
}

.services-card{
    background:#fff;border:1px solid var(--main-200);border-radius:22px;
    height:100%;min-height:200px;position:relative;overflow:hidden;
    display:flex;flex-direction:row;align-items:stretch;
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
    opacity:0;transform:translateY(24px);
}
.services-card.reveal{animation:cardIn .6s ease forwards;}
.services-card:hover{transform:translateY(-8px);box-shadow:0 24px 44px rgba(70,50,130,.14);border:1px solid var(--main-500);}

.card-left{
    flex:1 1 56%;min-width:0;padding:28px 26px;display:flex;flex-direction:column;justify-content:center;
}
.card-right{
    flex:0 0 42%;position:relative;;
}

.graphic .card-right img  {     padding: 16px 0;   max-width: 240px; width:100%;height:100%;object-fit:contain;display:block;transition:transform .5s ease;}
.services-card:hover .card-right img{transform:scale(1.06);}

.icon-box{
    width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;
    font-size:1.25rem;margin-bottom:16px;transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.services-card:hover .icon-box{transform:scale(1.13) rotate(-7deg);}
.icon-box.violet{background:#efe6ff;color:#8b5cf6; border: 1px solid #8b5cf6}
.icon-box.blue{background:#e2edff;color:#3b82f6; border: 1px solid #3b82f6}
.icon-box.orange{background:#ffe9d6;color:#f97316;border: 1px solid #f97316}
.icon-box.teal{background:#d9f7ea;color:#10b981;border: 1px solid #10b981}
.icon-box.amber{background:#fff2cf;color:#eab308;border: 1px solid #eab308}
.icon-box.rose{background:#ffe1ec;color:#ec4899;border: 1px solid #ec4899}

.services-card h3{font-size:1.12rem;font-weight:700;margin-bottom:9px;}
.services-card p.desc{color:#78748a;font-size:1rem;line-height:1.4;margin-bottom:16px;}

.btn-detail{
    align-self:flex-start;
    background:white;
    border:1px solid var(--main-600);
    color:var(--main-600);
    font-weight:600;
    font-size:.82rem;
    padding:14px 24px;
    border-radius:10px;
    transition:all .3s ease;
}
.btn-detail i {
    transition:transform .3s ease;
    margin-left:6px;
}
.services-card:hover .btn-detail {
    background: linear-gradient(90deg, #f4f4f4, #f3f3f3);
}
.services-card:hover .btn-detail i {
    transform:translateX(4px);
}

@media (max-width:575px){
    .services-card{flex-direction:column;}
    .card-right{flex:0 0 180px;}
}

@keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes cardIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulseSlow{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

@media (max-width:767px) {
    .services-card p.desc {
        min-height:auto;
    }
    .hero-panel {
        min-height:250px;
        padding: 20px;
    }
    .hero-panel h2 {
        font-size: 1.14rem;
    }
    .services-card .icon-box {
        margin-bottom: 14px;
        width: 50px;
        height: 50px;
    }
    .graphic .card-right img {
        margin-top: 0;
        max-width: 200px;
        padding: 16px 0 4px 0;
    }
    .card-left {
        padding: 0;
    }
    .hero-sub {
        margin-bottom: 10px;
        font-size: 1rem;
    }
    h1.hero-title {
        margin: 16px 0 6px;
    }
    .chip {
        padding: 14px;
    }
    .graphic .services-card {
        padding: 20px;
    }
    .hero-panel p {
        margin-bottom: 0;
    }
    .cta .ps-lg-4.max-w-532-px h3.splitTextStyleOne .split-line span.fs-32 {
        font-size: 22px;
    }
    .faq-two h3.splitTextStyleOne {
        font-size: 24px;
    }
}


/* /Graphic Design */

/* Kurumsal Kimlik */

.portfolio-grid {
    display: grid;
    grid-template-columns: 0.9fr .92fr .34fr;
    grid-template-rows: 285px 250px 250px 225px 100px;
    gap: 14px;
}

.card-box {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(197, 209, 230, .85);
    border-radius: 26px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 8px 30px rgba(9, 24, 64, .045);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, border-color .45s ease;
    isolation: isolate;
}

.card-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
            radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0, 71, 255, .16), transparent 34%),
            linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(246, 249, 255, .76));
    opacity: 0;
    transition: opacity .45s ease;
}

.card-box:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 71, 255, .35);
    box-shadow: 0 28px 80px rgba(0, 71, 255, .18);
}

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

.hero-card {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    padding: 38px 34px;
    min-height: 550px;
}

.logo-card {
    grid-column: 2 / 4;
    grid-row: 1 / 2;
    padding: 32px 30px;
    color: #fff;
    background:
            linear-gradient(135deg, rgba(0, 72, 255, .96), rgba(0, 49, 194, .98)),
            radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .28), transparent 32%);
    border-color: rgba(16, 84, 255, .9);
}

.logo-card:hover .content-narrow .card-title-corp {
    color: var(--main-800);
}

.logo-card:hover .content-narrow .card-text {
    color: var(--main-800);
}

.logo-card:hover .logo-w {
    color: var(--main-800);
}

.logo-card:hover .ring {
    border: 1px solid #0639cd;
}

.logo-card:hover .logo-blueprint {
    background: linear-gradient(rgb(16 84 255 / 0.9) 1px, transparent 1px), linear-gradient(90deg, #1054FFE6 1px, transparent 1px);
    background-size: 42px 42px;
}
.identity-card {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    padding: 32px;
}

.catalog-card {
    grid-column: 3 / 4;
    grid-row: 2 / 4;
    padding: 32px 28px;
}

.package-card {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    padding: 32px;
    color: #fff;
    background:
            radial-gradient(circle at 72% 42%, rgba(0, 71, 255, .55), transparent 26%),
            linear-gradient(135deg, #020817, #071633 54%, #020817);
    border-color: #081632F2;
}

.package-card:hover {
    border-color: rgba(0, 71, 255, .35) !important;
}

.package-card:hover .content-narrow .num {
    border-color: #081632F2;
    color: white;
    background-color: #081632F2;
}

.package-card:hover .content-narrow h2 {
    color: #081632F2;
}

.package-card:hover .content-narrow .card-text {
    color: #081632F2;
}
.brochure-card {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    padding: 32px;
}

.web-card {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    padding: 20px;
    color: #fff;
    background: linear-gradient(135deg, #0047ff, #0033d6);
    border-color: rgba(0, 71, 255, .9);
}

.web-card:hover .content-narrow .num {
    border-color: rgba(0, 71, 255, .9);
}

.web-card:hover .content-narrow .card-title-corp {
    color: #0047FFFF;
}

.web-card:hover .content-narrow .card-text {
    color: #0047FFFF;
}

.outdoor-card {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
    padding: 28px 30px;
}

.social-card {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    padding: 28px 30px;
}

.brand-mini {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--main-800);
    text-transform: uppercase;
}

.brand-icon {
    width: 25px;
    height: 25px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    background: var(--main-600);
    border-radius: 8px;
    box-shadow: 0 8px 18px rgba(0, 71, 255, .25);
}

.hero-title {
    margin: 36px 0 18px;
    max-width: 560px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -.05em;
    color: var(--main-800);
}

.hero-title span {
    color: var(--main-600);
}

.hero-text,
.card-text {
    color: #645d78;
    line-height: 1.4;
    font-size: 15px;
}

.hero-text {
    max-width: 450px;
    color: #645d78;
    font-size: 17px;
}

.btn-mainto {
    height: 44px;
    padding: 0 22px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--main-600), var(--main-600));
    box-shadow: 0 14px 28px rgba(0, 71, 255, .24);
    transition: transform .35s ease, box-shadow .35s ease;
}

.btn-mainto:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 20px 36px rgba(0, 71, 255, .34);
}

.stats {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(210, 219, 235, .9);
    border-radius: 10px;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(10px);
}

.stat-item {
    padding: 16px 18px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-right: 1px solid rgba(210, 219, 235, .9);
}

.stat-item:last-child {
    border-right: 0;
}

.stat-item i {
    color: var(--main-600);
    font-size: 22px;
    line-height: 1;
}

.stat-item strong {
    display: block;
    font-size: 19px;
    color: var(--main-800);
}

.stat-item span {
    display: block;
    color: #58637a;
    font-size: 11px;
}

.dot-pattern {
    position: absolute;
    left: 70%;
    top: 250px;
    width: 120px;
    height: 120px;
    opacity: .42;
    background-image: radial-gradient(#0047ff 1.2px, transparent 1.2px);
    background-size: 18px 18px;
}

.circle-line {
    position: absolute;
    left: 49%;
    bottom: 126px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(0, 71, 255, .12);
    border-radius: 50%;
}

.num {
    width: 46px;
    height: 46px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(198, 210, 232, .95);
    border-radius: 9px;
    background: rgba(255, 255, 255, .78);
    color: var(--main-800);
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(10, 31, 80, .06);
}

.dark .num,
.package-card .num {
    color: #fff;
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .25);
}

.logo-card .num,
.web-card .num {
    color: var(--main-600);
    background: #fff;
    border-color: rgba(255, 255, 255, .2);
}

.card-title-corp {
    margin: 24px 0 14px;
    font-size: 18px;
    line-height: 1.16;
    letter-spacing: -.035em;
    font-weight: 600;
    color: var(--main-800);
}

.logo-card .card-title-corp,
.web-card .card-title-corp,
.package-card .card-title-corp {
    color: #fff;
}

.logo-card .card-text,
.web-card .card-text,
.package-card .card-text {
    color: rgba(255, 255, 255, .86);
}

.logo-blueprint {
    position: absolute;
    right: 38px;
    top: 34px;
    width: 54%;
    height: 78%;
    opacity: .9;
    background:
            linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle, #000 62%, transparent 88%);
}

.logo-w {
    position: absolute;
    right: 150px;
    bottom: 116px;
}

.logo-w .colored-logo {
    width: 160px;
    height: 100%;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.ring {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
}

.ring-1 {
    right: 80px;
    top: 32px;
    width: 190px;
    height: 170px;
}

.ring-2 {
    right: 205px;
    top: 42px;
    width: 190px;
    height: 170px;
}

.image-holder {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 48%;
    height: 76%;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 28px rgba(13, 31, 78, .14));
    transform-origin: center;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}

.card-box:hover .placeholder-img {
    transform: translateY(-7px) scale(1.035) rotate(-1deg);
}

.catalog-card .image-holder {
    width: 100%;
    height: 48%;
    right: -5px;
    bottom: -20px;
}

.package-card .image-holder {
    width: 42%;
    height: 80%;
    right: 18px;
    bottom: 8px;
}

.brochure-card .image-holder {
    width: 54%;
    height: 80%;
    right: 10px;
    bottom: 30px;
}

.outdoor-card .image-holder {
    width: 44%;
    height: 92%;
    right: 0;
    bottom: -20px;
}

.social-card .image-holder {
    width: 42%;
    height: 90%;
    right: 4px;
    bottom: 10px;
}

.web-card .image-holder {
    width: 80%;
    height: 52%;
    right: 26px;
    bottom: -12px;
}

.content-narrow {
    position: relative;
    z-index: 2;
    max-width: 285px;
}

.catalog-card .content-narrow,
.web-card .content-narrow {
    max-width: 235px;
}

.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.2, .8, .2, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes floatY {
    0%, 100% {
        transform: translateY(0) rotate(var(--r, 0deg));
    }

    50% {
        transform: translateY(-12px) rotate(var(--r, 0deg));
    }
}

.float-anim {
    animation: floatY 5.5s ease-in-out infinite;
}

@media (max-width: 1399px) {
    .page-wrap {
        width: min(1240px, calc(100% - 32px));
    }

    .portfolio-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .hero-card,
    .logo-card,
    .identity-card,
    .catalog-card,
    .package-card,
    .brochure-card,
    .web-card,
    .outdoor-card,
    .social-card {
        grid-column: auto;
        grid-row: auto;
        min-height: 285px;
    }

    .hero-card,
    .logo-card {
        grid-column: 1 / -1;
    }

    .hero-card {
        min-height: 530px;
    }

    .catalog-card {
        min-height: 320px;
    }

    .web-card {
        min-height: 220px;
    }
}

@media (max-width: 991px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .hero-card,
    .logo-card {
        grid-column: auto;
    }

    .hero-card {
        min-height: auto;
        padding-bottom: 250px;
    }

    .stats {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        margin-top: 28px;
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-item:nth-child(2) {
        border-right: 0;
    }

    .stat-item:nth-child(1),
    .stat-item:nth-child(2) {
        border-bottom: 1px solid rgba(210, 219, 235, .9);
    }

    .logo-w {
        right: 42px;
        top: 80px;
        font-size: 140px;
    }

    .logo-blueprint {
        right: 0;
        width: 70%;
    }

    .ring {
        display: none;
    }
}

@media (max-width: 575px) {
    .page-wrap {
        width: calc(100% - 20px);
        margin: 10px auto;
    }

    .card-box {
        border-radius: 18px;
    }

    .hero-card,
    .logo-card,
    .identity-card,
    .catalog-card,
    .package-card,
    .brochure-card,
    .web-card,
    .outdoor-card,
    .social-card {
        padding: 24px 22px;
    }

    .hero-title {
        margin-top: 28px;
        font-size: 38px;
    }

    .hero-text,
    .card-text {
        font-size: 14px;
    }

    .hero-card {
        padding-bottom: 24px;
    }

    .stats {
        grid-template-columns: 1fr;
        display: none;
    }

    .stat-item {
        border-right: 0;
        border-bottom: 1px solid rgba(210, 219, 235, .9);
        display: none;
    }

    .dot-pattern {
        display: none;
    }
    .stat-item:last-child {
        border-bottom: 0;
    }

    .image-holder {
        opacity: .23;
        right: -60px !important;
        width: 80% !important;
    }

    .content-narrow {
        max-width: 100%;
    }

    .logo-card {
        min-height: 330px;
    }

    .logo-w {
        right: 18px;
        top: 145px;
        font-size: 110px;
        opacity: .45;
    }

    .logo-blueprint {
        width: 100%;
        opacity: .35;
    }
}
/* /Kurumsal Kimlik */

/* Print */
.wp-print-section {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wp-bento-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.wp-box-hero {
    grid-column: span 2;
}
.wp-box-tall {
    grid-column: span 1;
    grid-row: span 2;
}
.wp-box-wide {
    grid-column: span 2;
}

.wp-bento-box {
    background-color: #ffffff;
    border: 1px solid var(--main-600);
    border-radius: 24px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.4s ease, border-width 0.2s ease;
}

.wp-bento-box:hover {
    box-shadow: 0 20px 40px rgba(19, 81, 216, 0.08);
}

.wp-box-content {
    position: relative;
    z-index: 2;
    max-width: 55%;
}

.wp-box-tall .wp-box-content,
.wp-bento-box:not(.wp-box-hero):not(.wp-box-wide) .wp-box-content {
    max-width: 100%;
}

.wp-box-badge {
    color: var(--main-600);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 1.25rem;
}

.wp-box-title-serif {
    font-family: "Playfair Display", Georgia, serif;
    color: #111111;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

.wp-box-hero .wp-box-title-serif {
    font-size: 26px;
    letter-spacing: -1px;
}
.wp-box-tall .wp-box-title-serif {
    font-size: 26px;
    letter-spacing: -1px;
}
.wp-box-wide .wp-box-title-serif {
    font-size: 26px;
}
.wp-bento-box:not(.wp-box-hero):not(.wp-box-tall):not(.wp-box-wide) .wp-box-title-serif {
    font-size: 26px;
}

.wp-box-desc {
    color: #212529bf;
    font-size: 0.96rem;
    line-height: 1.4;
    margin-bottom: 2rem;
}

.wp-box-img {
    position: absolute;
    z-index: 1;
    object-fit: contain;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.wp-bento-box:hover .wp-box-img {
    transform: scale(1.03);
}

.wp-img-hero {
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(5deg);
    max-width: 350px;
}
.wp-bento-box:hover .wp-img-hero {
    transform: translateY(-50%) rotate(5deg) scale(1.03);
}

.wp-img-tall {
    bottom: 40px;
    right: 26px;
    width: 170px;
    max-height: 100%;
    object-fit: cover;
}

.wp-bento-box.wp-box-tall img {
    align-content: center;
    justify-content: center;
}

.wp-bento-box:hover .wp-img-tall {
    transform: scale(1.02);
    transform-origin: bottom center;
}

.wp-img-wide {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 45%;
}
.wp-bento-box:hover .wp-img-wide {
    transform: translateY(-50%) scale(1.03);
}

.wp-img-small-right {
    left: 10%;
    bottom: 4%;
    max-width: 70%;
}

.wp-img-small-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 80%;
}
.wp-bento-box:hover .wp-img-small-bottom {
    transform: translateX(-50%) scale(1.03);
}

.wp-img-small-bottom-right {
    top: 0;
    right: 0;
    max-width: 58%;
}

@media (max-width: 1199.98px) {
    .wp-bento-layout {
        grid-template-columns: repeat(2, 1fr);
    }
    .wp-box-hero {
        grid-column: span 2;
    }
    .wp-box-tall {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 450px;
    }
    .wp-box-wide {
        grid-column: span 2;
    }
}

@media (max-width: 767.98px) {
    .wp-bento-layout {
        grid-template-columns: 1fr;
    }
    .wp-box-hero, .wp-box-tall, .wp-box-wide {
        grid-column: span 1;
    }
    .wp-bento-box {
        padding: 24px 22px;
        min-height: auto;
    }
    .wp-box-hero .wp-box-title-serif {
        font-size: 1.4rem;
    }
    .wp-box-content {
        max-width: 100%;
        margin-bottom: 0;
    }
    .wp-box-img {
        position: relative;
        max-width: 100%;
        right: auto; top: auto; bottom: auto; left: auto;
        transform: none !important;
        margin: 0 auto;
        display: block;
    }

    .wp-img-tall {
        display: none;
    }

    .wp-box-title-serif {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    .wp-box-badge {
        margin-bottom: 0.25rem;
    }
    .wp-box-wide .wp-box-title-serif {
        font-size: 1.4rem;
    }
    .wp-box-tall .wp-box-title-serif {
        font-size: 1.4rem;
    }
    .wp-bento-box:not(.wp-box-hero):not(.wp-box-tall):not(.wp-box-wide) .wp-box-title-serif {
        font-size: 1.4rem;
    }
    .wp-box-desc {
        margin-bottom: 1rem;
    }

}

/* /Print */

/* Veifx Ecommerce */
:root {
    --vfx-text-dark: var(--wp-text-main);
    --vfx-text-muted: #64748b;
}

.vfx-card {
    background: white;
    border: 1.5px solid var(--main-600);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.vfx-card .title-box {
    width: 30px;
    height: 30px;
    background: var(--main-600);
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vfx-title-main {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.24;
    margin-bottom: 1rem;
    color: var(--wp-text-main);
}
.vfx-title-sm {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wp-text-main);
    letter-spacing: -0.2px;
    line-height: 20px;
}

.vfx-title-xsm {
    font-size: 0.8rem;
    color: var(--vfx-text-muted);
    font-weight: 500;
}

.vfx-text-desc {
    font-size: 16px;
    color: var(--vfx-text-muted);
    line-height: 1.34;
}
.vfx-val-lg {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wp-text-main);
    letter-spacing: -0.5px;
}
.vfx-brand img {
    width: 140px;
    margin: 36px 0;
}
.vfx-btn-primary {
    background: var(--main-600);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vfx-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(19, 81, 216, 0.2);
    color: #fff;
}

.vfx-badge-trend {
    background: #ecfdf5;
    color: #10b981;
    border: 1px solid #10b981;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.box-img-area {
    right: 0px;
    bottom: 16px;
    width: 170px;
}

.vfx-chart-wrap {
    flex-grow: 1;
    position: relative;
    min-height: 100px;
    width: 100%;
}
.vfx-chart-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.max-index {
    max-width: 260px;
    z-index: 2;
}
.mh-0 {
    min-height: 0;
}
.stop-cop {
    stop-color:var(--main-600);
    stop-opacity:0.15;
}
.fs-0 {
    flex-shrink: 0;
}
.stop-0 {
    stop-color:var(--main-600);
    stop-opacity:0;
}

.vfx-chart-tooltip {
    position: absolute;
    transform: translateX(-50%);
    background: #111827;
    color: #fff;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    left: 77%;
    top: 38%;
}
.vfx-chart-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #111827 transparent transparent transparent;
}

.vfx-chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--vfx-text-muted);
    font-weight: 500;
    margin-top: 10px;
    z-index: 2;
    position: relative;
    align-items: center;
}

.vfx-chart-labels span {
    border: 1px solid var(--main-600);
    padding: 6px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vfx-chart-labels span:hover {
    background: var(--main-600);
    color: #fff;
}

.vfx-chart-labels span.active {
    background: var(--main-600);
    color: #fff;
}

.vfx-slider-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}
.vfx-marquee-box {
    width: calc(100% - 0px);
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.vfx-marquee-track {
    display: inline-flex;
    gap: 30px;
    animation: vfxScrollMarquee 15s linear infinite;
    margin-top: 24px;
}
.vfx-marquee-track:hover {
    animation-play-state: paused;
}
@keyframes vfxScrollMarquee {
    0% {
        transform: translateX(0); }
    100% {
      transform: translateX(-50%);
    }
}
.vfx-logo-item {
    display: flex;
    align-items: center;
}

.vfx-logo-item img {
    width: 70px;
    max-width: 70px;
    height: 100%;
    max-height: 20px;
    object-fit: contain;

}

.vfx-donut-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.vfx-donut-chart {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: conic-gradient(var(--main-600) 0% 65%, #93c5fd 65% 85%, #e2e8f0 85% 95%, #fecdd3 95% 100%);
    display: flex; align-items: center; justify-content: center;
}
.vfx-donut-inner{
    width: 85px;
    height: 85px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vfx-donut-inner span{
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--wp-text-main);
    line-height: 1;
}

.vfx-donut-inner small{
    font-size: .75rem;
    color: var(--vfx-text-muted);
}

.vfx-legend-list{
    width: 160px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vfx-legend-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .85rem;
    color: var(--wp-text-main);
}

.vfx-legend-dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
}

.vfx-prod-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
    flex-grow: 1;
    justify-content: center;
}
.vfx-prod-item {
    display: flex;
    align-items: center;
}

.vfx-prod-num {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.vfx-prod-num img {
    width: 42px;
    height: 42px;
    border-radius: 8px;
}

.vfx-btn-pill {
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    padding: 4px 14px;
    font-size: 0.8rem;
    color: var(--main-600);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}
.vfx-btn-pill:hover {
    background-color: var(--main-600);
    color: white;
    border: 1.5px solid #e2e8f0;
}

.vfx-prod-info{
    flex: 1;
}

.vfx-prod-info strong{
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wp-text-main);
}

.vfx-prod-info span{
    display: block;
    font-size: 0.8rem;
    color: var(--vfx-text-muted);
    margin-top: 2px;
}

.vfx-sparkline{
    width: 65px;
    height: 24px;
    overflow: visible;
}

.vfx-tools-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.vfx-tool-box{
    text-align: center;
    border: 1px solid var(--main-300);
    background-color: white;
    padding: 10px 8px;
    border-radius: 6px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.vfx-tool-box:hover {
    border: 1px solid var(--main-600);
}

.vfx-tool-box i{
    font-size: 1.5rem;
    color: var(--main-600);
    display: inline-block;
}

.vfx-tool-box span{
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--vfx-text-dark);
    line-height: 10px;
    margin-top: 4px;
}

.vfx-funnel-wrap{
    display: flex;
    width: 100%;
    height: 150px;
    margin-top: 15px;
}

.vfx-funnel-shapes{
    width: 45%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
}

.vfx-f-layer{
    flex: 1;
    background: var(--main-600);
}

.vfx-f-layer:nth-child(2){
    opacity: 0.85;
}

.vfx-f-layer:nth-child(3){
    opacity: 0.7;
}

.vfx-f-layer:nth-child(4){
    opacity: 0.5;
}

.vfx-funnel-lines{
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vfx-f-line{
    flex: 1;
    display: flex;
    align-items: center;
}

.vfx-f-line-inner{
    width: 100%;
    height: 1.5px;
    background: #e2e8f0;
}

.vfx-funnel-texts{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.vfx-f-text{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.75rem;
    color: var(--vfx-text-muted);
    margin-bottom: 8px;
    line-height: 1.2;
}

.vfx-f-text strong{
    color: var(--vfx-text-dark);
    font-size: 0.95rem;
    margin-top: 2px;
}

.vfx-globe-wrap{
    position: relative;
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.vfx-globe-img{
    height: 150px;
    object-fit: contain;
    z-index: 1;
}

.f-11 {
    flex: 1.1;
}

.flex-1 {
    flex: 1;
}
.vfx-stat-bar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.vfx-stat-item{
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.vfx-stat-icon{
    width: 50px;
    height: 50px;
    border-radius: 12px;
    border: 1.5px solid var(--main-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--main-600);
}

.vfx-divider{
    width: 1.5px;
    height: 50px;
    background: #e2e8f0;
    margin: 0 20px;
}

.vfx-hero-img{
    position: absolute;
    bottom: -20px;
    right: -10px;
    width: 424px;
    z-index: 1;
}

.vfx-quote-mark {
    font-size: 2.5rem;
    color: var(--main-600);
    line-height: 1;
    font-family: serif;
    margin-right: 12px;
}

@media (max-width: 991.98px) {
    .vfx-stat-bar{
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .vfx-divider{
        width: 100%;
        height: 1.5px;
        margin: 0;
    }

    .vfx-h-100-lg{
        height: auto !important;
    }
}
@media (min-width: 992px) {
    .vfx-h-100-lg {
        height: 100% !important;
    }
}

/* /Ecommerce */

/* btn model meet */
.wp-cal-modal {
    --wp-bg-main: #ffffff;
    --wp-bg-sec: #f8fafc;
    --wp-border: #e2e8f0;
    --wp-text-main: var(--wp-text-main);
    --wp-text-sec: #64748b;
    --wp-brand-hover: #0f3a9c;
    --wp-brand-light: #eff6ff;
}

.wp-cal-content {
    background-color: var(--wp-bg-main);
    border: none;
    border-radius: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    min-height: 550px;
}

.wp-cal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    background: var(--wp-bg-sec);
    border: 1px solid var(--main-600);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wp-cal-close-btn:hover {
    background: var(--main-600);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.wp-cal-slider-container {
    width: 100%;
    overflow: hidden;
}

.wp-cal-slider-track {
    display: flex;
    width: 200%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.wp-cal-step {
    width: 50%;
    flex-shrink: 0;
}

.wp-cal-sidebar {
    background-color: var(--wp-bg-sec);
    padding: 60px 40px;
    border-right: 1px solid var(--wp-border);
    height: 100%;
}

.wp-cal-brand {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--main-600);
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.wp-cal-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--wp-text-main);
    line-height: 1.3;
    margin-bottom: 10px;
}

.wp-cal-desc {
    font-size: 0.95rem;
    color: var(--wp-text-sec);
    line-height: 1.4;
}

.wp-cal-body {
    padding: 60px 40px;
}

.wp-cal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.wp-cal-month-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wp-text-main);
    margin: 0;
}

.wp-cal-nav {
    display: flex;
    gap: 8px;
}

.wp-cal-nav-btn {
    background: var(--wp-bg-main);
    border: 1px solid var(--wp-border);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp-text-main);
    cursor: pointer;
    transition: all 0.2s;
}

.wp-cal-nav-btn:hover {
    background: var(--wp-bg-sec);
    border-color: var(--wp-text-sec);
}

.wp-cal-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--wp-text-sec);
    margin-bottom: 15px;
}

.wp-cal-grid-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.wp-cal-day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wp-text-main);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.wp-cal-day:not(.disabled):hover {
    background: var(--wp-brand-light);
    color: var(--main-600);
}

.wp-cal-day.active {
    background: var(--main-600);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(19, 81, 216, 0.3);
}

.wp-cal-day.disabled {
    color: #cbd5e1;
    cursor: not-allowed;
    text-decoration: line-through;
}

.wp-cal-day.empty {
    cursor: default;
}

.wp-cal-times {
    border-left: 1px solid var(--wp-border);
    padding: 60px 30px;
    background: var(--wp-bg-main);
    display: flex;
    flex-direction: column;
}

.wp-cal-time-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wp-text-main);
    margin-bottom: 20px;
}

.wp-cal-time-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 380px;
    padding-right: 5px;
}

.wp-cal-empty-state {
    font-size: 0.9rem;
    color: var(--wp-text-sec);
    text-align: center;
    margin-top: 20px;
    padding: 20px;
    background: var(--wp-bg-sec);
    border-radius: 12px;
}

.wp-cal-time-btn {
    background: #ffffff;
    border: 1px solid var(--main-600);
    color: var(--main-600);
    padding: 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.wp-cal-time-btn:hover {
    background: var(--main-600);
    color: #ffffff;
}

.wp-cal-back-btn {
    border: 1px solid var(--main-600);
    background-color: var(--main-50);
    padding: 10px 20px;
    color: var(--main-600);
    font-weight: 600;
    display: flex;
    align-items: center;
    border-radius: 10px;
    gap: 8px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s;
}

.wp-cal-back-btn:hover {
    background-color: var(--main-600);
    color: white;
}

.wp-cal-confirm-box {
    background: var(--wp-bg-main);
    border: 1px solid var(--wp-border);
    padding: 20px;
    border-radius: 16px;
    margin-top: 20px;
}

.wp-cal-confirm-icon {
    font-size: 2rem;
    color: var(--main-600);
    display: block;
    margin-bottom: 10px;
}

.wp-cal-confirm-text {
    font-size: 1.1rem;
    color: var(--wp-text-main);
    line-height: 14px;
}

.wp-cal-form-area {
    padding: 40px;
}

.wp-cal-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wp-text-main);
    margin-bottom: 8px;
    display: block;
}

.wp-cal-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wp-border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--wp-text-main);
    background: var(--wp-bg-sec);
    transition: border-color 0.2s, background 0.2s;
}

.wp-cal-input:focus {
    outline: none;
    border-color: var(--main-600);
    background: #ffffff;
}

.wp-cal-phone-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.wp-cal-phone-prefix {
    position: absolute;
    left: 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #475569;
    pointer-events: none;
}

.wp-cal-phone-group .wp-cal-input {
    padding-left: 54px !important;
}

.wp-cal-textarea {
    resize: none;
}

.wp-cal-submit-btn {
    background: var(--main-600);
    color: #ffffff;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.wp-cal-submit-btn:hover {
    background: var(--wp-brand-hover);
    transform: translateY(-2px);
}

.wp-cal-content.wp-slide-next .wp-cal-slider-track {
    transform: translateX(-50%);
}

.wp-btn-processing {
    opacity: 0.7;
    pointer-events: none;
}

.wp-btn-success {
    background-color: #10b981 !important;
    opacity: 1 !important;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .wp-cal-slider-track { flex-direction: row; }
    .wp-cal-step .row {
        flex-direction: column;
        height: auto!important;
    }
    .wp-cal-back-btn {
        padding: 6px 12px;
        margin-bottom: 0;
        border-radius: 8px;
        font-size: 0.9rem;
    }
    .wp-cal-time-btn {
        padding: 6px 12px;
        border-radius: 8px;
    }
    .wp-cal-time-title {
        margin-bottom: 10px;
    }
    .wp-cal-empty-state {
        text-align: start;
        margin-top: 0px;
        padding: 0;
    }
    .wp-cal-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--wp-border);
        padding: 14px 24px;
        height: auto;
    }
    .wp-cal-brand {
        margin-bottom: 10px;
    }
    .wp-cal-title {
        font-size: 1.04rem;
        margin-bottom: 10px;
        font-weight: 600;
    }
    .wp-cal-confirm-box {
        margin-top: 10px;
        border-radius: 10px;
        padding: 12px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .wp-cal-confirm-text {
        font-size: 0.94rem;
    }
    .wp-cal-month-title {
        font-size: 1.1rem;
    }
    .wp-cal-header {
        margin-bottom: 10px;
    }
    .wp-cal-grid-header {
        margin-bottom: 2px;
    }
    .wp-cal-time-list {
        flex-direction: row;
    }
    .wp-cal-body, .wp-cal-times, .wp-cal-form-area {
        padding: 14px 24px;
    }
    .wp-cal-form-area h5 {
        font-size: 1.04rem;
        font-weight: 600!important;
    }
    .wp-cal-label {
        margin-bottom: 4px;
    }
    .wp-cal-times {
        border-left: none;
        border-top: 1px solid var(--wp-border);
    }
    .wp-cal-step .row.h100 {
        height: auto;
    }
    .wp-cal-input {
        border-radius: 8px;
        padding: 8px 10px;
        border: 1px solid var(--main-200);
    }
    #wpMeetingForm .row > .col-md-6:not(:first-of-type) {
        margin-top: 6px;
    }
    #wpMeetingForm .row > .col-12 {
        margin-top: 6px;
    }
    #wpMeetingForm .row > .col-12 .wp-cal-input {
        max-height: 70px;
    }
}
/* /btn model meet */

/* btn model call */
.wp-call-content {
    background-color: #ffffff;
    border: none;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
    padding: 10px;
}

.wp-call-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    border-bottom: 1px solid #f1f5f9;
}

.wp-call-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wp-text-main);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.wp-call-title i {
    color: var(--main-600);
    font-size: 1.4rem;
}

.wp-call-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    background: var(--wp-bg-sec);
    border: 1px solid var(--main-600);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.wp-call-close:hover {
    background: var(--main-600);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.wp-call-body {
    padding: 30px;
}

.wp-call-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wp-text-main);
    margin-bottom: 8px;
}

.wp-call-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    font-size: 0.95rem;
    color: var(--wp-text-main);
    transition: border-color 0.2s, background 0.2s;
    outline: none;
}

.wp-call-input:focus {
    border-color: var(--main-600);
    background: #ffffff;
}

.wp-call-input::placeholder {
    color: #94a3b8;
}

.wp-call-phone-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.wp-call-phone-prefix {
    position: absolute;
    left: 16px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #475569;
    pointer-events: none;
}

.wp-call-phone-input {
    padding-left: 54px !important;
}

.wp-call-radio-grid {
    display: grid;
    gap: 12px;
}

.wp-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.wp-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.wp-call-radio-native {
    display: none;
}

.wp-call-radio-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    height: 100%;
    text-align: center;
}

.wp-call-radio-card i {
    font-size: 1.3rem;
    color: #94a3b8;
    transition: color 0.2s;
}

.wp-call-radio-native:checked + .wp-call-radio-card {
    border-color: var(--main-600);
    background: #eff6ff;
    color: var(--main-600);
}

.wp-call-radio-native:checked + .wp-call-radio-card i {
    color: var(--main-600);
}

.wp-call-submit-btn {
    width: 100%;
    background: var(--main-600);
    color: #ffffff;
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.wp-call-submit-btn:hover {
    background: #0f3a9c;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(19, 81, 216, 0.2);
}

.wp-call-btn-success {
    background-color: #10b981 !important;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.wp-call-btn-processing {
    opacity: 0.8;
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .wp-call-header {
        padding: 20px;
    }
    .wp-call-body {
        padding: 20px;
    }
    .wp-grid-3, .wp-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .wp-call-input {
        border-radius: 8px;
        padding: 9px;
        border: 1px solid var(--main-200);
    }
    .vfx-hero-img {
        width: 216px;
        bottom: 0;
    }
    .vfx-brand img {
        width: 110px;
        margin: 8px 0 16px 0;
    }
    .vfx-title-main {
        font-size: 24px;
    }
    .vfx-card {
        padding: 20px;
    }
    .vfx-donut-chart {
        width: 120px;
        height: 120px;
    }
    .box-img-area img {
        display: none;
    }
    .vfx-tool-box {
        padding: 10px 4px;
    }
    .vfx-tool-box span {
        font-size: 0.76rem;
    }
    .vfx-tool-box i {
        font-size: 1.4rem;
    }
}

/* /btn model call */