@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
    --bs-white: #fff;
    --bs-body-font-family: var(--mw-font-family);
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 21px;
    --bs-border-color: #dfe5eb;
    --bs-body-color: #111111;
    --bs-border-radius: 10px;
    --bs-primary: #05a6f0;
    --tw-ring-color: #05a6f0;
    --bs-secondary: #4c5773;
    --bs-success: #13ce66;
    --bs-warning: #ff6600;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fb;
    --bs-purple: #714b67;
    --bs-border-radius: 10px;
    --node-js: linear-gradient(270deg, rgba(128, 188, 0, 0.3) 0%, rgba(0, 117, 201, 0.3) 100%), #fff;
    --django: linear-gradient(270deg, rgba(33, 74, 53, 0.3) 0%, rgba(101, 178, 141, 0.3) 100%), #fff;
    --laravel: linear-gradient(270deg, rgba(249, 50, 44, 0.3) 1.28%, rgba(253, 129, 125, 0.3) 100%), #ffffff;
    --flutter: linear-gradient(270deg, rgba(105, 51, 238, 0.3) 1.28%, rgba(142, 104, 241, 0.3) 100%), #ffffff;
    --aiml: radial-gradient(78.24% 78.24% at 51.15% 42.34%, rgba(0, 122, 255, 0) 51.04%, rgba(0, 122, 255, 0.22) 94.27%), #fff;
    --android: linear-gradient(0deg, rgba(164, 198, 57, 0.3), rgba(164, 198, 57, 0.3)), #ffffff;
    --ios: linear-gradient(
            286.03deg,
            rgba(95, 201, 248, 0.3) 2.48%,
            rgba(254, 203, 46, 0.3) 21.32%,
            rgba(253, 148, 38, 0.3) 40.16%,
            rgba(252, 49, 88, 0.3) 59.01%,
            rgba(20, 126, 251, 0.3) 77.85%,
            rgba(83, 215, 105, 0.3) 96.69%
        ),
        #ffffff;
    --reactjs: linear-gradient(0deg, rgba(20, 158, 202, 0.3), rgba(20, 158, 202, 0.3)), #ffffff;
    --vuejs: linear-gradient(270deg, rgba(66, 184, 134, 0.3) 0%, rgba(100, 126, 255, 0.3) 100%), #fff;
    --angularjS: linear-gradient(270deg, rgba(226, 50, 55, 0.3) 0%, rgba(181, 46, 49, 0.3) 100%), #fff;
    --uiux: linear-gradient(135deg, rgba(104, 77, 210, 0.1) 0%, rgba(188, 90, 161, 0.2) 100%), #ffffff;
    --shopify: linear-gradient(270deg, rgba(149, 191, 70, 0.3) 0%, rgba(94, 142, 62, 0.3) 100%), #fff;
    --magento: linear-gradient(270deg, rgba(31, 110, 12, 0.3) 0%, rgba(110, 173, 95, 0.3) 100%), #fff;
    --woocommerce: linear-gradient(270deg, rgba(46, 170, 250, 0.09) 0%, rgba(31, 47, 152, 0.09) 100%), #fff;
    --opencart: linear-gradient(270deg, rgba(54, 194, 237, 0.15) 0%, rgba(155, 224, 246, 0.3) 100%), #fff;
    --wordpress: linear-gradient(0deg, rgba(177, 190, 198, 0.3) 0%, rgba(177, 190, 198, 0.3) 100%), #fff;
    --fullstack: linear-gradient(270deg, rgba(249, 200, 89, 0.23) 0%, rgba(90, 185, 206, 0.23) 100%), #fff;
    --meanstack: linear-gradient(0deg, #f8d1d0 0%, #f8d1d0 100%), #fff;
    --simpro: linear-gradient(270deg, rgba(0, 120, 218, 0.3) 0%, rgba(0, 212, 255, 0.3) 100%), #fff;
    --mobileapp: linear-gradient(270deg, rgba(212, 252, 121, 0.3) 0%, rgba(150, 230, 161, 0.3) 100%), #fff;
    --ionicapp: linear-gradient(270deg, rgba(132, 250, 176, 0.3) 0%, rgba(143, 211, 244, 0.3) 100%), #fff;
    --webapp: linear-gradient(270deg, rgba(242, 153, 74, 0.3) 0%, rgba(242, 201, 76, 0.3) 100%), #fff;
    --php: linear-gradient(270deg, rgba(74, 194, 154, 0.3) 0%, rgba(178, 254, 250, 0.3) 0.01%, rgba(14, 210, 247, 0.3) 100%), #fff;
    --codeigniter: linear-gradient(270deg, rgba(97, 144, 232, 0.3) 0%, rgba(167, 191, 232, 0.3) 100%), #fff;
    --jqueryapp: linear-gradient(270deg, rgba(255, 175, 189, 0.3) 0%, rgba(255, 195, 160, 0.3) 100%), #fff;
    --devops: linear-gradient(270deg, rgba(52, 148, 230, 0.3) 0%, rgba(236, 110, 173, 0.3) 100%), #fff;
    --iphoneapp: linear-gradient(270deg, rgba(41, 128, 185, 0.3) 0%, rgba(109, 213, 250, 0.3) 100%), #fff;
    --ipadeapp: linear-gradient(270deg, rgba(44, 125, 103, 0.3) 0%, rgba(153, 242, 200, 0.3) 100%), #fff;
    --hybridapp: linear-gradient(270deg, rgba(131, 96, 195, 0.3) 0%, rgba(46, 191, 145, 0.3) 100%), #fff;
    --yii: linear-gradient(270deg, rgba(0, 180, 219, 0.3) 0%, rgba(0, 131, 176, 0.3) 100%), #fff;
    --cakephp: linear-gradient(270deg, rgba(168, 192, 255, 0.3) 0%, rgba(63, 43, 150, 0.3) 100%), #fff;
    --symfony: linear-gradient(270deg, rgba(132, 16, 132, 0.3) 0%, rgba(255, 192, 203, 0.3) 100%), #fff;
    --zend: linear-gradient(270deg, rgba(77, 160, 176, 0.3) 0%, rgba(211, 157, 56, 0.3) 100%), #fff;
    --wearable: linear-gradient(270deg, rgba(212, 57, 58, 0.3) 0%, rgba(240, 203, 53, 0.3) 100%), #fff;
    --enterprise: linear-gradient(271deg, rgba(66, 184, 134, 0.3) 0.45%, rgba(100, 126, 255, 0.3) 98.49%), #fff;
    --xxl: 48px;
    --xxl-lnh: 64px;
    --xl: 36px;
    --xl-lnh: 50px;
    --lgxl: 30px;
    --lgxl-lnh: 40px;
    --lg: 24px;
    --lg-lnh: 36px;
    --mdlg: 20px;
    --mdlg-lnh: 30px;
    --md: 17px;
    --md-lnh: 25px;
    --sm: 14px;
    --sm-lnh: 20px;
    --xs: 12px;
    --xs-lnh: 16px;
    --xxs: 10px;
    --xs-lnh: 14px;
    --bs-btn-font-size: 17px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 0, 0, 0;
        --background-end-rgb: 0, 0, 0;
    }
}

html,
body {
    margin: 0;
    padding: 0;
    outline: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--mw-font-family);
}
body {
    @apply text-body;
    line-height: var(--bs-body-line-height);
    font-weight: 400;
    overflow-x: hidden;
}
/*loader css start*/
#preloader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    overflow: hidden;
    background: white;
}
.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.lds-ripple:before,
.lds-ripple:after {
    content: '';
    position: absolute;
    border: 4px solid var(--bs-primary);
    opacity: 1;
    border-radius: 50%;
    -webkit-animation: lds-ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    animation: lds-ripple 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple:after {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
@-webkit-keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}
@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}
/*loader css end*/
.link-whatsapp {
    color: #25d366;
}
.link-whatsapp:hover {
    color: #075e54;
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
}
.link-footer:hover {
    color: rgb(5 166 240 / var(--tw-bg-opacity));
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
}
.stretched-link::after {
    @apply absolute inset-0 z-[1];
    content: '';
}
a,
a:hover {
    transition: all 0.3s ease;
}
ul,
li {
    list-style-type: none;
}
ul.list {
    @apply pl-5;
}
ul.list,
ul.list li {
    list-style-type: disc;
}
ul.list-decimal,
ul.list-decimal li {
    list-style-type: decimal;
}
.row {
    @apply gap-10;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
}
/* font size start */
h1,
.fs-xxl {
    font-size: var(--xxl);
    line-height: var(--xxl-lnh);
}
h2,
.fs-xl {
    font-size: var(--xl);
    line-height: var(--xl-lnh);
}
h3,
.fs-lg {
    font-size: var(--lg);
    line-height: var(--lg-lnh);
}
.fs-lgxl {
    font-size: var(--lgxl);
    line-height: var(--lgxl-lnh);
}
.fs-mdlg {
    font-size: var(--mdlg);
    line-height: var(--mdlg-lnh);
}
h4,
.fs-md {
    font-size: var(--md);
    line-height: var(--md-lnh);
}
h5,
.fs-sm {
    font-size: var(--sm);
    line-height: var(--sm-lnh);
}
h6,
.fs-xs {
    font-size: var(--xs);
    line-height: var(--xs-lnh);
}
.fs-xxs {
    font-size: var(--xxs);
    line-height: var(--xxs-lnh);
}
/* font size end */
/*font weight start*/
.font-regular,
.fw-400 {
    font-weight: 400 !important;
}
h1,
.font-bold,
.fw-700,
.fw-bold {
    font-weight: 700;
}
.font-semibold,
.fw-600 {
    font-weight: 600;
}
.fw-500,
.font-medium {
    font-weight: 500;
}
/*font weight end*/
/* background start */
.bg-purple {
    background-color: var(--bs-purple);
}
.bg-vuejs {
    background: var(--vuejs);
}
.bg-reactjs {
    background: var(--reactjs);
}
.bg-iosapp {
    background: var(--ios);
}
.bg-androidapp {
    background: var(--android);
}
.bg-flutterapp {
    background: var(--flutter);
}
.bg-aiml {
    background: var(--aiml);
}
.bg-laravel {
    background: var(--laravel);
}
.bg-nodejs {
    background: var(--node-js);
}
.bg-django {
    background: var(--django);
}
.bg-angular {
    background: var(--angularjS);
}
.bg-uiux {
    background: var(--uiux);
}
.bg-php {
    background: var(--php);
}
.bg-shopify {
    background: var(--shopify);
}
.bg-magento {
    background: var(--magento);
}
.bg-woo-commerce {
    background: var(--woocommerce);
}
.bg-opencart {
    background: var(--opencart);
}
.bg-wordpress {
    background: var(--wordpress);
}
.bg-fullstack {
    background: var(--fullstack);
}
.bg-meanstack {
    background: var(--meanstack);
}
.bg-simpro {
    background: var(--simpro);
}
.bg-mobileapp {
    background: var(--mobileapp);
}
.bg-ionicapp {
    background: var(--ionicapp);
}
.bg-webapp {
    background: var(--webapp);
}
.bg-codeigniter {
    background: var(--codeigniter);
}
.bg-jqueryapp {
    background: var(--jqueryapp);
}
.bg-devops {
    background: var(--devops);
}
.bg-yii {
    background: var(--yii);
}
.bg-cakephp {
    background: var(--cakephp);
}
.bg-grey {
    background-color: var(--bs-light);
}
.bg-enterprise {
    background-color: var(--bs-border-color);
}
.bg-symfony {
    background: var(--symfony);
}
.bg-zend {
    background: var(--zend);
}
.bg-wearable {
    background: var(--wearable);
}
.bg-iphoneapp {
    background: var(--iphoneapp);
}
.bg-ipadeapp {
    background: var(--ipadeapp);
}
.bg-hybridapp {
    background: var(--hybridapp);
}
.bg-enterprise-software {
    background: var(--enterprise);
}
.bg-hero {
    background: radial-gradient(78.23% 78.23% at 51.15% 42.34%, rgba(0, 122, 255, 0) 51.04%, rgba(0, 122, 255, 0.22) 94.27%),
        hsla(0, 0%, 100%, 0);
}
.bg-aiml-service {
    background-image: url(/img/ai-ml-background.webp);
}
/* background end */
p {
    @apply text-secondary dark:text-light;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 1rem;
}
hr {
    margin: 1rem 0;
    height: 1px;
    border-top: 0;
}
.text-purple {
    color: var(--bs-purple);
}
.ic {
    @apply h-6 w-6;
    min-width: 24px;
}
.ic-m {
    @apply h-6 w-6;
    fill: currentColor;
}

svg {
    @apply inline;
    color: inherit;
}
svg.ic {
    fill: currentColor;
}
.ic-45 {
    height: 45px;
    width: 45px;
}
img,
svg {
    @apply inline align-middle;
}
.top-border-edge {
    margin-bottom: -1px;
    line-height: 0;
}
.top-border-edge svg,
.bottom-border-edge svg {
    @apply w-full h-auto;
    fill: inherit;
}
.bottom-border-edge {
    margin-top: -1px;
    line-height: 0;
}
.process-section {
    margin-bottom: -40px;
}
img {
    @apply max-w-none;
}
.img-fluid {
    @apply max-w-full h-auto;
}
.section-py {
    @apply py-[70px] lg:py-[100px];
}
.section-pt {
    @apply pt-[200px];
}
.section-pb {
    @apply pb-[100px];
}
.section-ptt {
    @apply pt-[100px];
}
.i {
    @apply h-6 w-6;
    fill: currentColor;
}
.btn:after {
    content: '';
    background: rgba(255, 255, 255, 0.5);
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
    width: 5px;
    height: 5px;
    @apply absolute top-1/2 left-1/2 opacity-0; /* position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; */
}
.btn:hover:not(:active)::after {
    animation: ripple 1s ease-out;
}
@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 1;
    }
    20% {
        transform: scale(25, 25);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}
.bs-border {
    border-color: var(--bs-border-color);
}
/*css for scrollbar Start*/
/* Styles for WebKit browsers (Chrome, Safari) */
@supports (-webkit-appearance: none) {
    *::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    *::-webkit-scrollbar-track {
        background-color: #f2f2f2;
    }

    *::-webkit-scrollbar-thumb {
        background-color: #d0d0d0;
        border-radius: 4px;
    }
}

/* Optionally, you can include specific Firefox styles if you need */
@supports (-moz-appearance: none) {
    * {
        scrollbar-width: thin;
        scrollbar-color: #d0d0d0 #f2f2f2;
    }
}

/*css for scrollbar End*/
/* -----------animation css start--------------- */
.mw_move_y {
    -webkit-animation: mw_move_y 1s infinite alternate;
    animation: mw_move_y 1s infinite alternate;
}
/* mw move */
@keyframes mw_move_y {
    0% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
    }
    to {
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
    }
}
@-webkit-keyframes mw_move_y {
    0% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
    }
    to {
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
    }
}
@-moz-keyframes mw_move_y {
    0% {
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
    }
    to {
        transform: translateY(10px);
        -webkit-transform: translateY(10px);
    }
}
/* -----------animation css end--------------- */

/* nav tabs Technology Stack case study css start */

.tab-items button {
    @apply focus:outline-none focus:shadow-none focus:ring-0 bg-transparent;
    font-size: var(--md);
    line-height: var(--md-lnh);
    font-weight: 700;
    color: var(--bs-body-color);
    padding: 10px 15px;
    border-bottom: 4px solid transparent;
}
.tab-items button.active {
    border-color: var(--bs-primary);
    box-shadow: none !important;
}
.tech-box {
    @apply flex flex-col rounded-10 bg-white justify-center items-center w-[178px] h-[120px] mt-[18px];
    border: 1px solid var(--bs-border-color);
}
.tech-box p {
    color: var(--bs-body-color);
}
.tech-box:hover {
    border-color: var(--bs-primary);
    box-shadow: 0px 0px 0px 1px var(--bs-primary);
    transition: all ease-in-out 0.2s !important;
}
.bg-casestudy {
    @apply bg-transparent;
}
.stack-border {
    @apply mt-0 mb-3;
    color: var(--bs-secondary);
    background-color: currentColor;
}

/* case study */

.case-study-slider {
    background-color: #f5f6f9;
    border: 1px solid #d7dee5;
}

.case-study-slider .card-description {
    padding: 40px 20px 40px 40px;
}

.slick-prev,
.slick-next {
    font-size: 17px;
    color: black;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
    color: black;
}

.case-study-slider-img .slick-arrow {
    cursor: pointer !important;
}

.case-study-slider-img .slick-prev {
    cursor: pointer !important;
}

.case-study-slider-img .slick-arrow.slick-prev {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMTJIMTlNNSAxMkw5IDE2TTUgMTJMOSA4IiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPgo=) !important;
    background-repeat: no-repeat !important; /* Prevents repeating the image */
    background-position: center !important;
    background-size: 24px 24px !important;
    text-indent: -9999px; /* Hides the "Next" text */
    border: 2px solid #111111 !important;
    border-radius: 50%;
    width: 50px !important; /* Adjust the width to fit your arrow image */
    height: 50px; /* Adjust the height to fit your arrow image */
    display: inline-block;
}

.case-study-slider-img .slick-arrow.slick-prev {
    text-indent: -9999px; /* Hide the "Next" text */
    background: none;
    border: none;
}

.case-study-slider-img .slick-arrow.slick-next {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMTIuNUgxOU0xOSAxMi41TDE1IDE2LjVNMTkgMTIuNUwxNSA4LjUiIHN0cm9rZT0iIzExMTExMSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==) !important;
    background-repeat: no-repeat !important; /* Prevents repeating the image */
    background-position: center !important;
    background-size: 24px 24px !important;
    text-indent: -9999px; /* Hides the "Next" text */
    border: 2px solid #111111 !important;
    border-radius: 50%;
    width: 50px !important; /* Adjust the width to fit your arrow image */
    height: 50px; /* Adjust the height to fit your arrow image */
    display: inline-block;
}

.case-study-slider-img .slick-arrow.slick-next {
    text-indent: -9999px; /* Hide the "Next" text */
    background: none;
    border: none;
}

.case-study-slider-img .slick-arrow {
    top: 105%;
    z-index: 10;
}

.case-study-slider-img .slick-prev {
    left: auto !important;
    right: 70px;
}

   .case-study-slider-img .slick-dots li button {
        width: 100%;
    border: 1px solid #D7DEE5;
    border-radius: 0;
    background-color: #d7dee5;
    padding: 0;
    border-radius: 0;
    height: 6px;
}
.case-study-slider-img .slick-dots li.slick-active button {
    border-color: transparent;
    opacity: 1;
    text-indent: -100000px;
    background: #111111;
}
.case-study-slider-img .slick-dots li {
  width: 25%;
    height: 8px;
    margin: 0;
}

.case-study-img {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.case-study-slider-img .slick-dots li:last-child button {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.case-study-slider-img .slick-dots li:first-child button {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.case-study-slider-img .slick-track {
    margin-bottom: 30px;
}

.case-study-slider-img .slick-dots {
    width: calc(100% - 154px) !important;
    top: 105%;
    bottom: 0;
    margin-top: 9px;
}


.case-study-slider-img .slick-dots li button:before {
    border: none;
}

.slick-dots li.slick-active button:before {
    background: none !important;
}

.testimonail-slider-card {
    padding: 20px;
    background-color: #ffffff;
}

.case-study-slider.testimonail-slider-card .card-description {
    padding: 0;
}

.testimonail-slider-text {
    border-bottom: 2px solid #d7dee5;
    font-size: 22px;
}

.testimonial-slider-img.case-study-slider-img .slick-dots li button {
    border: 1px solid #111111;
    background-color: #111111;
    opacity: 0.2;
}

.testimonial-slider-img.case-study-slider-img .slick-dots li.slick-active button {
    border-color: transparent;
    opacity: 1;
    text-indent: -100000px;
    background: #111111;
}

.testimonial-client-img {
    border-radius: 10px;
}

/* nav tabs Technology Stack case study css end */
.card {
    border: 1px solid var(--bs-border-color);
}
.card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0px 0px 0px 1px var(--bs-primary);
    -webkit-box-shadow: 0px 0px 0px 1px var(--bs-primary);
    -moz-box-shadow: 0px 0px 0px 1px var(--bs-primary);
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
}
.nav-item {
    padding: 20px 15px;
}
.work-nav .dropdown-item {
    font-weight: 500;
}
.dropdown-item {
    padding: 0.65rem 1.25rem;
    transition: all 0.3s ease;
}
.dropdown-item:hover {
    color: var(--bs-primary);
}
/* header */
header {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(7.5px);
    box-sizing: border-box;
}
.shine {
    @apply relative overflow-hidden cursor-pointer;
}
.shine::before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    content: '';
    display: block;
    height: 100%;
    left: -75%;
    position: absolute;
    top: 0;
    transform: skewX(-25deg);
    width: 50%;
    z-index: 2;
}
@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}
@keyframes shine {
    100% {
        left: 125%;
    }
}
.shine:hover::before {
    -webkit-animation: shine 0.85s;
    animation: shine 0.85s;
}
.menu-button {
    @apply text-body leading-25 font-bold border-b border-light pb-4 pt-30;
}
.menu-body a {
    @apply text-body leading-25 font-medium;
}
.sub-menu {
    @apply lg:px-3;
}
@media screen and (min-width: 992px) {
    .has-menu {
        position: relative;
    }
    .sub-menu {
        @apply flex fixed bg-white left-0 right-0 overflow-auto rounded-10 lg:px-0 h-0 m-auto translate-x-[-30px] skew-x-2;
    }
    .sub-menu {
        max-height: 100vh;
        transition: 0.4s ease all;
        opacity: 0;
        max-width: 1440px;
        transform: translateX(-30px) skewX(2deg);
        filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1));
    }
    .has-menu.open-megamenu .sub-menu {
        @apply h-auto min-h-[465px] opacity-100 p-0;
    }
    .has-menu.open-megamenu .sub-menu.service-menu {
        @apply h-auto min-h-[415px] opacity-100 p-0 top-20;
    }
    .has-menu.open-megamenu .sub-menu {
        @apply top-20;
        z-index: 100;
        transform: translateX(0) skew(0deg);
        transition: 0.4s ease all;
    }
    .sub-menu ul,
    .sub-menu li:not(.social-mail) {
        list-style-type: none;
        padding: 0;
        text-align: left;
    }
    .sub-menu > li:not(.social-mail) {
        padding-right: 40px;
        flex: 1;
    }
    .sub-menu > li.social-mail {
        width: calc(100% - 290px);
    }
    .sub-menu > li.owner-box {
        flex-grow: initial;
        flex-basis: 330px;
    }
}
/* header end */
/* hero section css start */
.custom-hero-height {
    min-height: 705px !important;
}

.hero {
    @apply relative overflow-hidden min-h-[660px] max-h-[700px] flex flex-col;
    height: calc(calc(var(--vh, 1vh) * 100) - 80px);
    height: calc(100vh - 80px);
}
.hero .top-hero {
    flex: 1;
}

.home-hero::after {
    content: none;
}
.hero-row {
    grid-template-columns: repeat(2, 1fr);
}
.hero-content {
    @apply relative py-20 px-0 z-20;
}
.home-hero {
    font-size: 15px;
}
.slide-title {
    line-height: 50px;
}
.hero-dashboard-img {
    @apply grid gap-4 w-[670px] absolute h-full top-2.5;
}
.hero-dashboard-img img.dashboard-img {
    @apply w-auto;
    height: 700px;
    aspect-ratio: 1686 / 960;
    transform: translate(53px, -4px);
}
picture.pic-bg img {
    @apply absolute top-0 w-auto;
    z-index: -1;
    height: 950px;
    aspect-ratio: 1032 / 1021;
    transform: translate(-40px, -22%);
}
picture.pic-bg.red img {
    aspect-ratio: 1021 / 983;
    transform: translate(-25px, -22%);
}
picture.pic-bg.green img {
    aspect-ratio: 1021 / 933;
}
picture.pic-bg.orange img {
    aspect-ratio: 1021 / 915;
}
picture.pic-bg.yellow img {
    aspect-ratio: 1021 / 847;
}
.hero-vue-img {
    @apply h-full w-auto;
}
.hero-tech-img {
    @apply absolute h-[550px] top-5;
}
.odoo-baneer-img-height .hero-vue-img {
    @apply h-[500px];
}
.hero-app-img {
    @apply absolute top-0 lg:top-2/4 right-0;
    transform: translateY(-50%);
}
@media only screen and (min-width: 1024px) and (orientation: portrait) {
    .hero {
        height: auto;
    }
    .hero-dashboard-img img.dashboard-img {
        height: 55vh;
    }
}
/* hero section css end */
/* Vue-js-application */
.video-main {
    @apply text-center;
    margin-left: -40px;
}
.application-video-one video {
    @apply rounded-10;
    width: 34rem;
    max-width: calc(100% - 55px);
    filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.2));
}
.application-video-two {
    @apply static;
    transform: translateX(40px);
    margin-top: calc(-69% + 100px);
}
/* Vue-js-application */
/* client logo css start */
.project-logo img {
    filter: grayscale(100%);
    cursor: pointer;
    transition: filter 500ms linear;
}

.project-logo {
    padding: 5px 40px;
    height: auto;
    transition: opacity 500ms linear; /* Apply transitions to opacity */
}

/* Adjust opacity instead of scale */
.client-logo-listing:hover .project-logo {
    opacity: 0.8; /* Slightly reduce opacity for hover effect */
}

.client-logo-listing .project-logo:hover {
    opacity: 1; /* Reset opacity on hover */
}

/* Use opacity for image filter effects */
.client-logo-listing .project-logo:hover img {
    filter: grayscale(0);
    transition: filter 500ms linear;
}

.client-carousel:after,
.client-carousel:before {
    @apply absolute right-0 top-0 bottom-0;
    content: '';
    width: 170px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 42%, rgb(255 255 255) 100%);
    z-index: 1;
}
.client-carousel:before {
    @apply right-auto	left-0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(2, 0, 36, 0) 100%);
}
.dark .client-carousel:after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 42%, rgb(31 41 55) 100%);
}
.dark .client-carousel:before {
    background: linear-gradient(90deg, rgb(31 41 55) 0%, rgba(2, 0, 36, 0) 100%);
}
.splide__list {
    @apply items-center;
}
.splide__slide {
    @apply text-center;
}
/* client logo css end */
.cs-card > div {
    @apply overflow-hidden relative;
}
.cs-video {
    -o-object-fit: cover;
    @apply object-cover bg-transparent w-full;
}
/* service list css start */
.services-listing {
    @apply relative mt-50 z-10;
}
.services-listing:before {
    content: '';
    @apply absolute w-full left-1 right-0 top-[87px];
    border-bottom: 2px dashed #6b7c93;
}
.service-card .service-title {
    @apply relative inline-block ml-2 align-middle mb-50;
    background: var(--bs-body-color);
    color: var(--bs-white);
    padding: 10px 15px;
    border-radius: 10px 10px 10px 0px;
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -ms-transition: all ease-in-out 0.2s;
}
.service-card .service-title > * {
    @apply m-0;
    color: var(--bs-heading-color);
    font-weight: 700;
    font-size: var(--md);
    line-height: var(--md-lnh);
}
.service-card .service-title:before,
.service-card .star-stat:after {
    content: '';
    @apply absolute inline-block;
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -ms-transition: all ease-in-out 0.2s;
}
.service-card .service-title:before {
    @apply left-0 bottom-[-14px];
    border-bottom: 15px solid transparent;
    border-left: 15px solid var(--bs-body-color);
}
.service-card .star-stat:after {
    @apply w-4 h-4 rounded-full left-[-7px] bottom-[-50px];
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    background: #1a192c;
}
.service-card .service-list {
    @apply p-0 mt-5;
}
.service-card .service-list li {
    @apply cursor-pointer list-none;
    line-height: var(--md-lnh);
    font-size: var(--md);
    font-weight: 600;
    text-decoration: none;
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
    -moz-transition: all ease-in-out 0.2s;
    -ms-transition: all ease-in-out 0.2s;
}
.service-card .service-list li:hover {
    color: var(--bs-success);
}
.service-card:hover .service-title {
    background-color: var(--bs-success);
}
.service-card:hover .service-title:after {
    background-color: var(--bs-success);
}
.service-card:hover .service-title:before {
    border-left-color: var(--bs-success);
}
/* service list css end */
/* serving css start */
.serving-bg {
    border-width: 1px 0px;
    border-style: solid;
    border-color: var(--bs-border-color);
    background: linear-gradient(
        180deg,
        rgba(223, 229, 235, 0) 0%,
        rgba(223, 229, 235, 0.5) 39.58%,
        rgba(223, 229, 235, 0.5) 64.06%,
        rgba(223, 229, 235, 0) 100%
    );
}
.img-serving-bg {
    @apply absolute top-1/2 left-1/2 w-full h-auto;
    transform: translate(-50%, -50%);
}
.serving-content {
    padding: 173px 0;
}
.serving__logo {
    @apply w-[85px] h-[85px] absolute bg-white dark:bg-gray-800 p-2.5;
    border-radius: 50%;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.serving__logo img {
    @apply block w-9 h-9;
}
.serving__logo1 {
    top: 8%;
    left: 9%;
    animation-delay: 1s;
}
.serving__logo2 {
    top: 31%;
    left: 16%;
    animation-delay: 1.2s;
}
.serving__logo3 {
    top: 57%;
    left: 4%;
    animation-delay: 1.8s;
}
.serving__logo4 {
    top: 75%;
    left: 15%;
    animation-delay: 1.6s;
}
.serving__logo5 {
    top: 18%;
    right: 15%;
    animation-delay: 1.8s;
}
.serving__logo6 {
    top: 38%;
    right: 5%;
    animation-delay: 2s;
}
.serving__logo7 {
    top: 53%;
    right: 17%;
    animation-delay: 1.5s;
}
.serving__logo8 {
    top: 72%;
    right: 9%;
    animation-delay: 1.9s;
}
/* client testimonial css start */
.client-testimonial .card {
    break-inside: avoid-column;
    display: inline-block;
}
.project-testimonial .card-description {
    @apply max-h-[227px] min-h-[227px];
}
.slick-slide {
    @apply py-px;
}
.slick-dots {
    @apply top-auto !bottom-[-73px];
}
.slick-dots li {
    @apply w-5 h-5 m-0 text-center ml-[5px];
}
.slick-dots li button {
    @apply w-5 h-5 p-0 m-auto;
}
.slick-dots li button:before {
    content: '' !important;
    @apply !opacity-100 bg-transparent !w-3 !h-3 rounded-full;
    border: 2px solid var(--bs-secondary);
    left: 5px;
}
.slick-dots li.slick-active button:before {
    @apply !opacity-100;
    background: var(--bs-secondary);
}
.client-testimonial-slider .slick-slider:before,
.client-testimonial-slider .slick-slider:after {
    @apply absolute top-0 w-[100px] h-full z-10 max-w-[10%];
    content: '';
}
.client-testimonial-slider .slick-slider:before {
    @apply left-0;
    background-image: linear-gradient(-90deg, rgba(248, 249, 251, 0) 0%, #f8f9fb 100%);
    -webkit-background-image: linear-gradient(-90deg, rgba(248, 249, 251, 0) 0%, #f8f9fb 100%);
    -moz-background-image: linear-gradient(-90deg, rgba(248, 249, 251, 0) 0%, #f8f9fb 100%);
    -ms-background-image: linear-gradient(-90deg, rgba(248, 249, 251, 0) 0%, #f8f9fb 100%);
}
.client-testimonial-slider .slick-slider:after {
    @apply right-0;
    background-image: linear-gradient(90deg, rgba(248, 249, 251, 0) 0%, #f8f9fb 100%);
    -moz-background-image: linear-gradient(90deg, rgba(248, 249, 251, 0) 0%, #f8f9fb 100%);
    -webkit-background-image: linear-gradient(90deg, rgba(248, 249, 251, 0) 0%, #f8f9fb 100%);
    -ms-background-image: linear-gradient(90deg, rgba(248, 249, 251, 0) 0%, #f8f9fb 100%);
}
.client-testimonial-slider.yellow-overlay .slick-slider:before {
    @apply left-0;
    background-image: linear-gradient(-90deg, rgba(248, 249, 251, 0) 0%, #ffd828 100%);
    -webkit-background-image: linear-gradient(-90deg, rgba(248, 249, 251, 0) 0%, #ffd828 100%);
    -moz-background-image: linear-gradient(-90deg, rgba(248, 249, 251, 0) 0%, #ffd828 100%);
    -ms-background-image: linear-gradient(-90deg, rgba(248, 249, 251, 0) 0%, #ffd828 100%);
}
.client-testimonial-slider.yellow-overlay .slick-slider:after {
    @apply right-0;
    background-image: linear-gradient(90deg, rgba(248, 249, 251, 0) 0%, #ffd828 100%);
    -moz-background-image: linear-gradient(90deg, rgba(248, 249, 251, 0) 0%, #ffd828 100%);
    -webkit-background-image: linear-gradient(90deg, rgba(248, 249, 251, 0) 0%, #ffd828 100%);
    -ms-background-image: linear-gradient(90deg, rgba(248, 249, 251, 0) 0%, #ffd828 100%);
}
.slick-arrow {
    @apply h-auto max-h-full top-0 bottom-0 !w-[100px] z-[99];
    transform: none;
    cursor:
        url("data:image/svg+xml,%3Csvg width='42' height='24' viewBox='0 0 42 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5 12L5 12M36.5 12L27.5 3M36.5 12L27.5 21' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
            21 12,
        e-resize !important;
    cursor: url("data:image/svg+xml,%3Csvg width='42' height='24' viewBox='0 0 42 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M36.5 12L5 12M36.5 12L27.5 3M36.5 12L27.5 21' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"),
        e-resize !important;
}
.slick-prev {
    @apply !left-0 right-auto;
    font-size: 0;
    cursor:
        url("data:image/svg+xml,%3Csvg width='42' height='24' viewBox='0 0 42 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H36.5M5 12L14 21M5 12L14 3' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
            21 12,
        e-resize;
    cursor: url("data:image/svg+xml,%3Csvg width='42' height='24' viewBox='0 0 42 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H36.5M5 12L14 21M5 12L14 3' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"),
        e-resize !important;
}

.slick-next {
    @apply left-auto right-0;
    font-size: 0;
}
.slick-next:before {
    @apply !content-none;
}
.slick-prev:before {
    @apply !content-none;
}

/* client testimonial css end */
.color-transparent {
    color: transparent;
}
/* aiml start */
.service-offered-tabs {
    padding: 0;
}
.service-offered-tabs li {
    justify-content: start;
    border-bottom: 1px solid #d7dee5;
    background-color: #f5f6f9;
    padding: 15px 20px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 600;
    color: #3c4561;
}
.service-tabs-header {
    border-radius: 10px;
}
.service-offered-listing li::before {
    content: '';
    background-image: url(/img/icons/ic-square-rounded-check.svg);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
}
.service-active-li .bg-white {
    background-color: #05a6f0;
    border-radius: 0;
}

.service-active-li {
    color: #ffffff !important;
}
.technologies-tools-tab .tech-box {
    width: 140px;
}
.technologies-tools-tab .tab-items button {
    font-weight: 600;
}
.industry-wise-call {
    background: #ffd10033;
    border: 1px solid #ffd100;
    border-radius: 10px;
}
.industrywise-cases {
    border: 1px solid #d7dee5;
    background-color: #fff;
    min-height: 505px;
}
.industrywise-case-heading {
    background-image: url(/img/ai-ml-background.webp);
    padding: 25px 30px;
    background-repeat: no-repeat;
    background-position: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.text-grey {
    color: #d7dee5;
}
.aimlvideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 100%;
    object-fit: cover;
}

/* Work css start */
.reset a {
    color: var(--bs-secondary);
    font-weight: 500;
    font-size: var(--md);
    line-height: var(--md-lnh);
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
}
.reset a:hover {
    color: var(--bs-primary);
}
.work-height {
    height: 374px;
    min-height: 374px;
}
.top-work {
    height: calc(100% - 65px);
    min-height: 374px;
}
.hero-Work-img {
    @apply absolute;
    width: 555px;
    transform: translateY(-50%);
    margin-left: -7rem;
}
.filters-open {
    @apply absolute m-0;
    width: 93%;
    transform: translate3d(0px, 11px, 0px);
    font-size: var(--md);
    line-height: var(--md-lnh);
    background-color: var(--bs-white);
    border-radius: 10px;
}
.filters-open .accordion-button {
    font-weight: 500;
}
.filters-open .accordion-button:not(.collapsed) {
    color: var(--theme-clr);
    background-color: #d7e8ff;
}
.filters-open .accordion-button:focus {
    box-shadow: none;
}
.blog-card {
    @apply gap-2.5;
    --bs-card-border-width: 0;
    --bs-card-spacer-x: 0;
    --bs-card-spacer-y: 0;
}
.blog-card .card-img-top {
    border-radius: var(--bs-border-radius);
}
.blog-card:hover {
    --bs-card-border-width: 0;
    box-shadow: none;
}
.card.blog-card:hover .card-img-top {
    filter: brightness(75%);
}
.blog-card .card-title {
    font-size: var(--lg);
    line-height: var(--lg-lnh);
}
.chip {
    padding: 4px 15px;
    font-size: var(--md);
    line-height: var(--md-lnh);
    color: var(--bs-body-color);
    font-weight: 600;
    border: 1px solid var(--bs-secondary);
    min-height: 35px;
}
/* Work css end */
/* dedicated */
.model-working-in .card-text {
    @apply relative pl-30;
}
.model-working-in .card-text .ic {
    @apply absolute left-0;
}
.dedicated-content li {
    @apply pl-30;
}
.dedicated-content li svg {
    @apply absolute left-0;
}
/* dedicated */
/* hire vue js start */
.custom-min-height {
    min-height: 60px;
}
.process-list {
    /* display: grid; grid-template-columns:repeat(5, 1fr); */
    display: flex;
    justify-content: center;
    position: relative;
    margin-inline: auto;
    --item-w: 212px;
    max-width: calc(var(--item-w) * 5);
}
.process-item {
    position: relative;
    margin-top: 50px;
    flex: 1;
    width: var(--item-w);
    max-width: 222px;
}
.process-icon {
    height: 120px; /* border: 2px dashed var(--bs-body-color); */
    place-items: center;
    aspect-ratio: 1 /1;
    position: relative;
}
.process-icon:before {
    content: '';
    height: calc(100% - 0px);
    width: calc(100% - 0px);
    position: absolute;
    border: 2px dashed var(--bs-body-color);
    border-radius: 50%;
    animation: spin 10s linear infinite;
}
.circle {
    --left: 145px;
    --circle-w: 8.4rem;
    --top: auto;
    position: relative;
    border-radius: 50%;
    width: var(--circle-w);
    height: 1.2rem;
    border-radius: calc(var(--circle-w) + 2px) calc(var(--circle-w) + 2px) 0 0;
    overflow: hidden;
    margin-top: 80px;
    position: absolute;
    left: var(--left);
    top: var(--top);
    flex: 1;
}
.circle:before {
    @apply absolute top-0 left-0;
    content: '';
    height: calc(var(--circle-w) - 1px);
    width: calc(var(--circle-w) - 1px);
    border: 2px dashed var(--bs-body-color);
    border-radius: 50%;
    animation: spin 10s linear infinite;
}
.circle-white:before {
    border: 2px dashed var(--bs-white);
}
.circle-reverse {
    transform: rotate(180deg);
    transform-origin: center bottom;
}
.circle-reverse:before {
    animation: spin-reverse 10s linear infinite;
}
.circle-2 {
    left: calc(var(--left) + var(--item-w));
}
.circle-3 {
    left: calc(var(--left) + var(--item-w) * 2);
}
.circle-4 {
    left: calc(var(--left) + var(--item-w) * 3);
}
.circle-5 {
    left: calc(var(--left) + var(--item-w) * 4);
}
.process-list-about {
    max-width: calc(var(--item-w) * 6);
}
.process-list-digital {
    max-width: calc(var(--item-w) * 3);
}
.process-list-aiml {
    max-width: calc(var(--item-w) * 4);
}
.hovertext:hover {
    color: var(--bs-secondary);
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
}
@keyframes spin {
    100% {
        transform: rotateZ(360deg);
    }
}
@keyframes spin-reverse {
    100% {
        transform: rotateZ(-360deg);
    }
}
.process-icon-white svg {
    color: var(--bs-white);
}
.process-icon.process-icon-white:before {
    border: 2px dashed var(--bs-white);
}
.process-icon svg {
    height: 56px;
    aspect-ratio: 1/1;
}
/* hire vue js end */
.hire-section {
    @apply sticky top-20;
}
.hire-team {
    grid-row: 2;
    grid-column: 3;
    background:
        radial-gradient(78.23% 78.23% at 51.15% 42.34%, rgba(0, 122, 255, 0) 51.04%, rgba(0, 122, 255, 0.22) 94.27%)
            /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */,
        #ffffff;
}
.hire-box {
    @apply h-full text-center place-content-center place-items-center;
    padding: 30px 20px;
}
.symbol-group {
    @apply flex items-center flex-wrap ml-5;
}
.symbol-group .symbol {
    @apply relative;
    margin-left: -20px;
    transition: all 0.3s ease;
    z-index: 0;
}
.symbol.symbol-80px > img {
    @apply h-20 w-20;
}
.symbol-group .symbol:hover {
    transition: all 0.3s ease;
    z-index: 1;
}
.symbol-group.symbol-hover .symbol {
    cursor: pointer;
}
.dedicated-dev {
    grid-row: 4;
    grid-column: 1;
}
.dedicated-box {
    padding: 30px 20px;
}
.dedicated-points {
    line-height: 36px;
}
/* outsource start */
.sticky-list {
    top: 100px;
}
.sticky-list .active {
    color: var(--bs-primary);
}
.sticky-content li.active .card {
    border-width: 2px;
    border-color: var(--bs-primary);
}
/* outsource end */
/* Projectdetail css start */
.product-min-height {
    min-height: 339px;
}
.technology-stack {
    filter: grayscale(100%);
    cursor: pointer;
}
.technology-stack:hover {
    filter: grayscale(0);
    cursor: pointer;
}
.product-min-height {
    min-height: 339px;
}
.project-detail {
    @apply absolute;
    width: 963px;
    transform: translateY(-50%);
}
.project-detail-img img {
    padding: 7px;
    border-radius: calc(var(--bs-border-radius) + 7px);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}
/* Projectdetail css end */
/* Life at Moweb Technology */
.moweb-life-main {
    margin: 0 auto;
}
.moweb-life-box {
    @apply relative w-full;
    padding-bottom: 60%;
}
.moweb-life-items .moweb-life-items_item div {
    @apply absolute w-full h-full block left-0 top-0;
}
.moweb-life-items .moweb-life-items_item img {
    @apply object-cover w-full h-full;
    border: 20px solid var(--bs-white);
}
.moweb-life-items .moweb-life-items_item:nth-child(1) {
    @apply absolute;
    padding-bottom: 30.95%;
    padding-left: 22.7%;
    top: -2.104235%;
    left: 8.957654723127036%;
}
.moweb-life-items .moweb-life-items_item:nth-child(2) {
    @apply absolute;
    padding-left: 19.6%;
    padding-bottom: 19.22%;
    top: 46%;
    left: 8.81%;
}
.moweb-life-items .moweb-life-items_item:nth-child(3) {
    @apply absolute;
    padding-left: 31.3%;
    padding-bottom: 21.6%;
    left: 30.2%;
    top: 6.7%;
}
.moweb-life-items .moweb-life-items_item:nth-child(4) {
    @apply absolute;
    padding-left: 43.2%;
    padding-bottom: 25.5%;
    top: 40.7%;
    left: 26.71%;
    z-index: 9;
}
.moweb-life-items .moweb-life-items_item:nth-child(5) {
    @apply absolute;
    padding-left: 31.3%;
    padding-bottom: 22.66%;
    top: 10.6%;
    left: 59.95%;
}
.moweb-life-items .moweb-life-items_item:nth-child(6) {
    @apply absolute;
    padding-left: 32.6%;
    padding-bottom: 23.9%;
    top: 45.42%;
    left: 68.3%;
}
.line-wrap .line-1 {
    @apply absolute;
    top: 83.2%;
    left: 12%;
}
.line-wrap .line-2 {
    @apply absolute;
    top: 1.3%;
    left: 32.2%;
}
.moweb-life-titles_title {
    @apply absolute;
}
.moweb-life-titles_title:nth-child(1) {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(-180deg);
    top: 29.459283%;
    left: 4%;
}
.moweb-life-titles_title:nth-child(2) {
    left: 78.5%;
    top: 2%;
}
/* Life at Moweb Technology */
.our-team-success {
    @apply w-full;
    padding-bottom: 100%;
}
.our-team-success_item a {
    @apply absolute w-full h-full block left-0 top-0;
}
.our-team-success_item img {
    @apply w-full h-full object-cover;
    border: 5px solid var(--bs-white);
}
.our-team-success_item:nth-child(1) {
    @apply absolute;
    top: 8%;
    left: 13%;
    padding-left: 30%;
    padding-bottom: 30%;
}
.our-team-success_item_in {
    @apply absolute w-full h-full block left-0 top-0;
}
.our-team-success_item:nth-child(2) {
    @apply absolute;
    top: 27.5%;
    left: 0%;
    padding-left: 47.1%;
    padding-bottom: 36.5%;
}
.our-team-success_item:nth-child(3) {
    @apply absolute;
    top: 15.6%;
    left: 47.1%;
    z-index: 9;
    padding-left: 50.5%;
    padding-bottom: 51.6%;
    border: 4px solid var(--bs-white);
}
.our-team-success_item:nth-child(4) {
    @apply absolute;
    top: 64.2%;
    left: 11%;
    padding-left: 55.5%;
    padding-bottom: 30.8%;
}
.year-success {
    background-color: var(--bs-primary);
    padding: 15px 10px 90px 15px;
}
.year-success::before {
    @apply absolute w-full	h-full;
    content: '';
    border: 1px solid var(--bs-secondary);
    left: -10px;
    top: -10px;
}
.fifteen-sec span {
    @apply h-0.5 block;
    background-color: var(--bs-white);
    max-width: 30px;
}
.success-main {
    margin-bottom: -38px;
    margin-left: -5px;
}
.success-main p {
    color: var(--bs-body-color);
}
/* using row */
.session-time {
    @apply relative;
}
.session-time img.img-fluid {
    @apply absolute;
    bottom: -22px;
    left: -5px;
}
/*  privacy start */
.policy-height {
    height: 294px !important;
    min-height: 294px;
}
/* privacy end */
/* odoo page start */
.odoo-develop-video {
    border: 10px solid var(--bs-border-color);
    border-radius: 10px;
}

.odoo-imp-table tr th {
    padding: 15px;
    background-color: var(--bs-primary);
    border-right: 1px solid var(--bs-border-color);
    color: #fff;
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
}
.odoo-imp-table tr td {
    padding: 15px;
    border: 1px solid var(--bs-border-color);
}
.odoo-imp-table tr td.py-10 {
    @apply !py-10;
}
.odoo-imp-table table {
    width: 100%;
}
.empty-text {
    @apply !bg-transparent !border-0;
}
.rounded-top {
    border-top-left-radius: 10px;
}
.rounded-end {
    border-top-right-radius: 10px;
}
.border-r-end {
    border-right: 0 !important;
}
.returning-border {
    border-left: 0 !important;
    border-bottom: 0 !important;
}
.new-customers-border {
    border-top: 0 !important;
    border-left: 0 !important;
    border-bottom: 0 !important;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.odoo-img-fluid {
    max-width: 100%;
    height: auto;
}
.odoo-service .img-thumbnail {
    padding: 0.75rem;
    background-color: #ffffff;
    border: 0 solid #dee2e6;
    border-radius: 0.25rem;
    max-width: 100%;
    height: auto;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.odoo-service figure img {
    transition: 0.1s ease;
}
.odoo-service figcaption {
    font-size: 14px;
    line-height: 21px;
}
.odoo-service figure img:hover {
    transform: translateY(-3px);
}
.odd-with-position {
    position: relative;
}
.odd-without-position img {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 60%;
    pointer-events: none;
    z-index: 2;
}
.corner-heighlight {
    position: relative;
}
.corner-heighlight::after {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    bottom: auto;
    right: auto;
    background-image: url(/img/odoo/corner.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    height: 60px;
    width: 60px;
}
.corner-heighlight .peer:checked ~ .peer-checked\:after\:border-white::after {
    left: 9px;
}
.corner-heighlight .peer:checked ~ .peer-checked\:bg-blue-600 {
    background-color: var(--bs-purple);
}
.corner-heighlight .after\:w-5::after {
    content: var(--tw-content);
    width: 1.1rem;
}
.corner-heighlight .after\:h-5::after {
    content: var(--tw-content);
    height: 1.1rem;
}

/* new odoo */

#main {
    width: 100vw;
    min-height: 100vh;
    background-color: #ffffff;
}

.content h1 {
    text-align: center;
}

.img-div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.img {
    width: 7%;
    height: 5%;
    transform: skew(0deg, 0deg);
}
.horizontal-main {
    position: relative;
}
.text {
    position: absolute;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.5s;
}
.text p {
    color: black;
    font-weight: 600;
    font-size: 70px;
}
.hidden_header p {
    color: black;
    font-weight: 600;
    font-size: 45px;
    line-height: normal;
    display: none;
    padding-inline: 20px;
}
.from-left {
    left: -100%;
    top: 50%;
}
.from-right {
    right: -100%;
    top: 50%;
}
.from-top {
    top: -100%;
    left: 50%;
}
.img-hidden {
    display: none;
    width: 100%;
}
.vid-text p {
    text-align: center;
    margin-bottom: 0;
}
.vid-text {
    padding-inline: 290px;
    margin-top: -115px;
}
.from-bottom {
    bottom: -100%;
    left: 50%;
}
.ii a[href] {
    color: #fff !important;
}
/* cursor hover */
.cursor {
    position: fixed;
    pointer-events: none;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s; /* Handle opacity transition */
    z-index: 1000;
    opacity: 0; /* Start with the cursor hidden */
}

/* Cursor text */
.cursor-text {
    position: absolute;
    color: black;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* Enlarged cursor effect */

/* cursor hover end */

/* video for popup */
.video-modal {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(256, 256, 256, 0.8);
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
    z-index: 1032;
}
.video-modal-content {
    width: 65%; /* Adjust as needed */
    position: absolute; /* Absolute positioning */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center and scale */
    background: rgba(256, 256, 256, 0.8);
    border-radius: 10px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease; /* Transition for scaling */
}

.video-modal.show .video-modal-content {
    transform: translate(-50%, -50%); /* Scale to normal size */
    opacity: 1; /* Fully opaque */
}
.video-modal video {
    width: 100%;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.close-modal {
    position: absolute;
    top: 0px; /* Adjust the value as needed */
    right: 0px; /* Adjust the value as needed */
    transform: translate(90%, -90%); /* Reset any translation */
    background-color: black;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding-block: 10px;
    padding-inline: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-modal-icon {
    width: 24px; /* Adjust as needed */
    height: 24px; /* Adjust as needed */
}

@media (max-width: 766px) {
    .video-modal-content {
        width: 90%;
    }
    .close-modal {
        position: absolute;
        top: 0px;
        right: 0px;
        transform: translate(20%, -199%);
    }
}

@media (min-width: 768px) and (max-width: 1025px) {
    .video-modal-content {
        width: 80%;
    }
}

@media (min-width: 1266px) {
    .close-modal {
        position: absolute;
        top: 0px;
        right: 0px;
        transform: translate(124%, -13%);
    }
}

/* end of video for popup */
/* ribbon  */
/* styles.css */

.horizontal-main {
    position: relative;
    height: 360px;
    overflow: hidden;
}
.for_ribbon {
    margin-top: -285px;
}
.ribbon {
    position: absolute;
    left: 0;
    width: 111%;
    padding-block: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    white-space: nowrap;
}

.yellow-ribbon {
    top: 175px;
    background-color: gold;
    color: black;
    transform: rotate(7deg);
    margin-left: -12px;
}
.yellow-item {
    font-size: 36px;
    background-color: gold;
    color: black;
}
.blue-ribbon {
    margin-left: -12px;
    top: 160px;
    background-color: #05a6f0;
    color: white;
    transform: rotate(-7deg);
}
.yellow-list {
    display: flex;
    gap: 40px;
}
.blue-list {
    display: flex;
    gap: 40px;
}

.blue-item {
    font-size: 36px;
    background-color: #05a6f0;
    color: white;
}

/* ribbon end */
@media (min-width: 1440px) {
    .horizontal-main {
        height: 550px;
    }
}
@media (max-width: 1200px) {
    .from-left {
        padding-right: 150px;
    }
    .from-right {
        padding-left: 20px;
    }
    .vid-text {
        padding-inline: 100px;
    }
    .for_ribbon {
        margin-top: -200px;
    }
}
@media (max-width: 900px) {
    .text,
    .from-left,
    .from-right,
    .from-top,
    .from-bottom {
        display: none;
    }
    .img-hidden {
        display: block;
    }
    .hidden_header p {
        display: block;
        padding-top: 20px;
    }
    .img-div {
        display: block;
        height: 100%;
    }
    .img {
        display: none;
    }
    #main {
        min-height: 100%;
    }
    .vid-text p {
        text-align: left;
    }
    .vid-text {
        padding-inline: 20px;
        margin-top: 0px;
    }
    .yellow-item {
        font-size: 24px;
    }
    .blue-item {
        font-size: 24px;
    }
    .yellow-list {
        gap: 30px;
    }
    .blue-list {
        gap: 30px;
    }
    .ribbon {
        padding-block: 30px;
    }
}
@media (max-width: 500px) {
    .hidden_header p {
        font-size: 30px;
    }
    .yellow-item {
        font-size: 20px;
    }
    .blue-item {
        font-size: 20px;
    }
    .yellow-list {
        gap: 20px;
    }
    .blue-list {
        gap: 20px;
    }
    .ribbon {
        padding-block: 20px;
    }
    .horizontal-main {
        height: 300px;
    }
    .for_ribbon {
        margin-top: -210px;
    }
    .blue-ribbon {
        top: 84px;
    }
    .yellow-ribbon {
        top: 86px;
    }
}
/* new odoo */
/* odoo page end */
/* cookie css start*/
.toast-container {
    @apply absolute max-w-full;
    --bs-toast-zindex: 1090;
    z-index: var(--bs-toast-zindex);
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    pointer-events: none;
}
.cookie {
    max-width: 21.9rem;
    background: linear-gradient(180deg, var(--bs-white) 76.56%, var(--bs-border-color) 100%);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 20px;
}
.cookie-img {
    @apply absolute;
    bottom: -20px;
    right: -40px;
    z-index: 1;
}
.cookie-toast {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* cookie css end */
.grecaptcha-badge {
    z-index: 22;
}
/*  404 error start */
.errorpage-height {
    height: 648px !important;
    min-height: 648px;
}
/* 404 error end */
/* apply career popup start */
.apply-box {
    background: var(--bs-white);
}
.address-box {
    background: var(--bs-light);
}
.address-box-spacing {
    padding: 50px 40px;
}
.address-box-spacing a:hover {
    color: var(--bs-primary);
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
}
.project-testimonial {
    margin-left: 1.25rem !important;
    margin-right: 1.25rem !important;
}
/* apply career popup end */

/* usa landing ppage */
.bg-usa-cta {
    background-image: url(/img/img-usa-cta.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.divider-section {
    border-bottom: 1px solid #d7dee5;
}

.bg-sessions-usa {
    background-image: url(/img/img-usa-hero.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.sessions-border-b {
    border-bottom: 1px solid #3c4561;
    border-bottom: 1px solid #3c4561;
}

.usa-contact-border {
    border: 1px solid #d7dee5;
    border: 1px solid #d7dee5;
}

.datepicker-img {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzUwOV8zNjQpIj4KPHBhdGggZD0iTTAuOTcwMjE1IDAuNUgyMy45NzAyVjIzLjVIMC45NzAyMTVWMC41WiIgc3Ryb2tlPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNC40NzAyMSA3QzQuNDcwMjEgNi40Njk1NyA0LjY4MDkzIDUuOTYwODYgNS4wNTYgNS41ODU3OUM1LjQzMTA3IDUuMjEwNzEgNS45Mzk3OCA1IDYuNDcwMjEgNUgxOC40NzAyQzE5LjAwMDYgNSAxOS41MDk0IDUuMjEwNzEgMTkuODg0NCA1LjU4NTc5QzIwLjI1OTUgNS45NjA4NiAyMC40NzAyIDYuNDY5NTcgMjAuNDcwMiA3VjE5QzIwLjQ3MDIgMTkuNTMwNCAyMC4yNTk1IDIwLjAzOTEgMTkuODg0NCAyMC40MTQyQzE5LjUwOTQgMjAuNzg5MyAxOS4wMDA2IDIxIDE4LjQ3MDIgMjFINi40NzAyMUM1LjkzOTc4IDIxIDUuNDMxMDcgMjAuNzg5MyA1LjA1NiAyMC40MTQyQzQuNjgwOTMgMjAuMDM5MSA0LjQ3MDIxIDE5LjUzMDQgNC40NzAyMSAxOVY3WiIgc3Ryb2tlPSIjM0M0NTYxIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMTYuNDcwMiAzVjciIHN0cm9rZT0iIzNDNDU2MSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTguNDcwMjEgM1Y3IiBzdHJva2U9IiMzQzQ1NjEiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik00LjQ3MDIxIDExSDIwLjQ3MDIiIHN0cm9rZT0iIzNDNDU2MSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTguNDcwMjEgMTVIMTAuNDcwMlYxN0g4LjQ3MDIxVjE1WiIgc3Ryb2tlPSIjM0M0NTYxIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+CjxkZWZzPgo8Y2xpcFBhdGggaWQ9ImNsaXAwXzUwOV8zNjQiPgo8cmVjdCB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IndoaXRlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjQ3MDIxNSkiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

/* iPadPRO landscape style here */
@media only screen and (min-device-width: 1000px) and (max-device-width: 1100px) {
    .odd-without-position {
        display: none;
    }
    .corner-heighlight {
        display: none;
    }
    .btn {
        padding: 10px 25px;
    }
    .project-testimonial .card-description {
        max-height: 265px;
        min-height: 265px;
    }

    .tech-box {
        width: 150px;
    }
}
@media (max-width: 1300px) {
    .process-list-about.process-list {
        --item-w: 180px;
    }
    .process-list-about .process-item {
        max-width: 180px;
    }
    .process-list-about .process-icon {
        height: 100px;
    }
    .process-list-about .process-icon svg {
        height: 45px;
    }
    .process-list-about .circle {
        --left: 132px;
        --circle-w: 6rem;
        height: 1.2rem;
    }
}
@media (max-width: 1099.98px) {
    .process-list {
        --item-w: 178px;
    }
    .process-item {
        max-width: var(--item-w);
    }
    .process-icon {
        height: 100px;
    }
    .process-icon svg {
        height: 46px;
    }
    .circle {
        --left: 126px;
        --circle-w: 6.4rem;
        margin-top: 75px;
    }
    .process-item p {
        font-size: 18px;
    }
    /* about */
    .process-list-about.process-list {
        --item-w: 154px;
    }
    .process-list-about .process-item {
        max-width: 160px;
    }
    .process-list-about .process-icon {
        height: 80px;
    }
    .process-list-about .process-icon svg {
        height: 36px;
    }
    .process-list-about .circle {
        --left: 117px;
        --circle-w: 4.5rem;
    }
    .video-main {
        @apply ml-0;
    }
}

@media (max-width: 991.98px) {
    .odd-without-position {
        display: none;
    }
    .corner-heighlight {
        display: none;
    }
    .odoo-service-row.row {
        row-gap: 0;
    }
    .odoo-imp-table table {
        width: auto;
    }
    header {
        backdrop-filter: none;
        background-color: var(--bs-white);
    }
    .service-menu .menu-body {
        @apply !mb-0;
    }
    .hero {
        @apply h-auto max-h-none;
    }
    .hero-dashboard-img {
        @apply block max-w-full text-center relative h-[310px];
        top: initial;
    }
    picture.pic-bg img {
        transform: translate(-41px, -8%) rotate(90deg);
        left: 0;
        height: 800px;
    }
    .hero-dashboard-img img.dashboard-img {
        @apply absolute;
        left: 30%;
        height: 450px;
        transform: translateX(-24%);
        top: -9%;
        margin: 0 auto;
    }
    .hero-content {
        @apply py-30 px-0;
    }
    .hero-tech-img {
        @apply block max-w-full text-center relative h-[310px];
        top: initial;
    }
    .hero-tech-app-img {
        @apply h-[400px];
        top: initial;
    }
    picture.pic-bg.red img {
        transform: translate(-25px, -8%);
    }
    .hero-vue-img {
        @apply absolute;
        left: 30%;
        height: 450px;
        transform: translateX(-24%);
        top: -9%;
        margin: 0 auto;
    }
    .odoo-baneer-img-height .hero-vue-img {
        left: 20%;
    }
    .odoo-baneer-img-height .hero-vue-img {
        height: 330px;
    }
    .comp-start:after {
        @apply hidden;
    }
    .img-serving-bg {
        @apply h-full w-auto;
    }
    .serving {
        padding: 0 50px;
    }
    .serving-bg {
        padding: 70px 50px;
    }
    .serving__logo {
        width: 76px;
        height: 76px;
    }
    .process-list {
        --item-w: 170px;
    }
    .process-icon {
        height: 90px;
    }
    .process-icon svg {
        @apply h-9;
    }
    .circle {
        --left: 118px;
        margin-top: 70px;
    }
    .video-main {
        @apply text-center;
        margin-left: -40px;
    }
    .application-video-one video {
        max-width: calc(100% - 55px - 80px);
        margin-inline: auto;
    }
    .application-video-two {
        transform: translateX(40px);
        margin-top: calc(-69% + 100px);
        position: static;
    }
    .line-wrap {
        @apply hidden;
    }

    .moweb-life-items .moweb-life-items_item img {
        border: 4px solid #fff;
    }
    .moweb-life-titles li.moweb-life-titles_title {
        font-size: 25px;
    }
    .project-detail {
        max-width: 662px;
        transform: none;
        position: static;
    }
    .product-min-height {
        min-height: auto;
    }
    .hero-Work-img {
        transform: none;
        position: relative;
        z-index: 9;
        width: 100%;
        margin-left: 0;
    }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
    /* about */
    /* .process-list-about .process-item{  --item-w: 135px;max-width: 135px;} */
    .process-list-about.process-list {
        --item-w: auto;
        display: inline-block;
        --item-h: 100px;
    }
    .process-list-about .process-item {
        --item-w: 100%;
        max-width: 570px;
        display: flex;
        align-items: center;
        --top: 70px;
        margin-bottom: var(--top);
        margin-top: 0;
    }
    .process-list-about .process-icon {
        height: 100px;
        margin-bottom: 0;
    }
    .process-list-about .process-item p:first-of-type {
        flex: 1 1 auto;
        text-align: left;
        margin-bottom: 0;
        min-height: auto;
        min-width: 180px;
    }
    .process-list-about .process-item p + p {
        flex: 1 1 auto;
        text-align: left;
        margin-bottom: 0;
    }
    .process-list-about .process-icon svg {
        height: 36px;
    }
    .process-list-about .circle {
        --left: 30px;
        --top: 70px;
        --circle-w: 1.2rem;
        --circle-h: 4.5rem;
        height: var(--circle-h);
        margin-top: 0;
        top: calc(var(--item-h) - var(--circle-h));
    }
    .process-list-about .circle:before {
        height: calc(var(--circle-h) - 1px);
        width: calc(var(--circle-h) - 1px);
        left: -51px;
    }
    .process-list-about .circle-2 {
        top: calc(var(--top) + var(--item-h) * 2);
        left: 42px;
    }
    .process-list-about .circle-3 {
        top: calc(var(--top) + var(--item-h) * 3);
        left: 42px;
    }
    .process-list-about .circle-4 {
        top: calc(var(--top) * 3 + var(--item-h) * 4);
        left: 42px;
    }
    .process-list-about .circle-5 {
        top: calc(var(--top) * 3 + var(--item-h) * 5);
        left: 42px;
    }
    .process-list-aiml .process-item {
        max-width: 675px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .project-testimonial .card-description {
        max-height: 227px;
        min-height: 255px;
    }
    .post-description {
        @apply h-50;
    }
    .pe-responsive {
        @apply pl-0;
    }
    .serving-content {
        padding: 315px 0;
    }
    .serving__logo1 {
        top: 3%;
        left: 36%;
    }
    .serving__logo2 {
        @apply left-auto;
        top: 7%;
        right: 16%;
    }
    .serving__logo3 {
        top: 16%;
        left: 23%;
    }
    .serving__logo4 {
        @apply left-auto;
        top: 16%;
        right: 38%;
    }
    .serving__logo5 {
        @apply top-auto right-auto;
        left: 22%;
        bottom: 3%;
    }
    .serving__logo6 {
        @apply top-auto right-auto;
        bottom: 15%;
        left: 36%;
    }
    .serving__logo7 {
        @apply top-auto left-auto;
        right: 34%;
        bottom: 3%;
    }
    .serving__logo8 {
        top: 76%;
        right: 21%;
    }
}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait) {
    .hero .top-hero {
        @apply flex items-center;
    }
}

/* form css start */
.form-control {
    @apply bg-transparent mt-1 block w-full min-h-[2.8125rem] ring-0 focus:ring-0 border dark:border-gray-600 dark:focus:border-blue focus:border-blue rounded-[10px];
    border-color: var(--bs-border-color);
}
.form-select {
    @apply bg-transparent mt-1 block w-full min-h-[2.8125rem] ring-0 focus:ring-0 border dark:border-gray-600 dark:focus:border-blue focus:border-blue rounded-[10px];
    border-color: var(--bs-border-color);
}
.react-tel-input .form-control {
    border-color: rgb(223 229 235);
}
.react-tel-input {
    font-family: inherit;
    font-size: 17px;
}
.react-tel-input .form-control:focus {
    box-shadow: none;
    border-color: var(--bs-primary);
}
.react-tel-input .selected-flag:focus:before,
.react-tel-input .selected-flag.open:before {
    box-shadow: none;
    border-color: var(--bs-primary);
}
.react-tel-input .selected-flag:before {
    @apply top-0 bottom-0;
    border-radius: 10px 0px 0px 10px;
    box-shadow: none;
}
label span {
    font-size: 17px;
    line-height: 25px;
}

/* upload img css start */
.upldimg input[type='file'] {
    @apply hidden;
}
.upldimg .custom-file-upload {
    @apply inline-block	text-center cursor-pointer;
    font-weight: 400;
    font-size: 17px;
    line-height: 25px;
    color: var(--bs-secondary);
}
.upldimg {
    @apply flex flex-col items-center justify-center opacity-50;
    background: var(--bs-light);
    border: 1px dashed var(--bs-secondary);
    border-radius: 10px;
    padding: 6px 7px;
}
/* upload img css end */
/* form css end */
/* accordion css start */
.accordion-border {
    @apply border-0;
}
.accordion-title {
    box-shadow: none !important;
    background-color: var(grey) !important;
}
/*  accordion css end */
.breadcumb-pages ol {
    @apply flex-wrap py-6;
}
.breadcumb-pages ol li {
    @apply py-0;
}
.hover-effect {
    @apply inline-block bg-transparent bg-no-repeat;
    background-image: linear-gradient(180deg, transparent, transparent),
        linear-gradient(180deg, var(--bs-primary), var(--bs-primary));
    background-origin: content-box;
    background-position:
        100% 100%,
        100% 100%;
    background-size:
        100% 1px,
        0 1px;
    transition:
        background-size 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
        color 0.3s ease;
}
.hover-effect:hover {
    color: var(--bs-primary);
    background-position:
        100% 100%,
        0 100%;
    background-size:
        100% 1px,
        100% 1px;
}

/* footer css start */
.footer-nav .nav-link {
    @apply inline-block bg-transparent bg-no-repeat;
    font-weight: 500;
    font-size: var(--md);
    line-height: var(--md-lnh);
    background-image: linear-gradient(180deg, transparent, transparent),
        linear-gradient(180deg, var(--bs-primary), var(--bs-primary));
    background-origin: content-box;
    background-position:
        100% 100%,
        100% 100%;
    background-size:
        100% 1px,
        0 1px;
    transition:
        background-size 0.6s cubic-bezier(0.165, 0.84, 0.44, 1),
        color 0.3s ease;
}
.footer-nav .nav-link:hover {
    color: var(--bs-primary);
    background-position:
        100% 100%,
        0 100%;
    background-size:
        100% 1px,
        100% 1px;
}
.footer-nav {
    @apply mb-0 pl-0 flex flex-col gap-2.5;
}
.footer-title {
    @apply mb-0;
    font-weight: 700;
    font-size: 17px;
    line-height: 25px;
}
.footer-hr {
    @apply mt-2.5 mb-2.5;
}
.footer-hr-spacing {
    @apply mt-9;
    margin-bottom: 46px;
}
.socialclr a {
    @apply inline-flex items-center justify-center;
    color: var(--bs-body-color);
    border-radius: 50%;
    border: 1px solid var(--bs-body-color);
    padding: 5px;
    height: 32px;
    width: 32px;
}
.socialclr ul {
    @apply flex pl-0 mb-0;
    list-style-type: none;
}
.socialclr ul li:hover {
    transform: translate(0, -3px);
    transition: 0.3s ease-in-out;
}
.socialclr ul li {
    transition: 0.3s ease-in-out;
}
.socialfb:hover {
    border: 1px solid #3874cb;
    color: #3874cb;
}
.socialtw:hover {
    border: 1px solid #03a9f4;
    color: #03a9f4;
}
.socialln:hover {
    border: 1px solid #0077b5;
    color: #0077b5;
}
.socialinsta:hover {
    border: 1px solid #f14c5d;
    color: #f14c5d;
}
.error .cookie-toast {
    @apply !hidden;
}
/* react select css start */
.react-select-container .react-select__control {
    @apply bg-transparent rounded-10;
    border-color: var(--bs-light);
    min-height: 36px;
    box-shadow: none;
}
.react-select-container .react-select__control:hover {
    border-color: var(--bs-light);
    cursor: pointer;
}
.react-select-container .react-select__control:hover {
    border-color: var(--bs-light);
}
.react-select-container .react-select__control .react-select__input-container {
    color: var(--bs-body-color);
}
.react-select-container .react-select__control.react-select__control--is-focused {
    border-color: var(--bs-light);
}
.react-select-container .react-select__control .react-select__value-container {
    @apply pl-2.5 pr-1 pt-[11px] pb-[10px];
}
.work-nav .react-select-container .react-select__control .react-select__value-container {
    @apply pl-2.5 pr-1 pt-3 pb-3;
}
.work-nav .react-select-container .react-select__control .react-select__value-container {
    padding-top: 17px;
    padding-bottom: 17px;
}
.work-nav .react-select-container .react-select__control .react-select__value-container .react-select__placeholder {
    color: var(--bs-body-color);
}
.work-nav
    .react-select-container
    .react-select__control.react-select__control--is-focused
    .react-select__value-container
    .react-select__placeholder {
    color: var(--bs-primary);
}
.work-nav
    .react-select-container
    .react-select__control.react-select__control--is-focused
    .react-select__value-container
    .react-select__single-value {
    color: var(--bs-primary);
}
.react-select-container .react-select__indicator {
    padding: 7px 6px 5px 0 !important;
    color: var(--bs-secondary);
    transition: none !important;
}
.react-select-container .react-select__control.react-select__control--is-focused .react-select__indicator {
    color: var(--bs-secondary);
}
.react-select-container .react-select__indicator:hover {
    color: var(--bs-secondary);
}
.react-select-container .react-select__indicator-separator {
    @apply hidden;
}
.react-select-container .react-select__loading-indicator {
    @apply !hidden;
}
.react-select-container .react-select__multi-value {
    border-radius: 0.42rem;
    flex-direction: row-reverse;
    background-color: var(--bs-light);
}
.react-select-container .react-select__multi-value .react-select__multi-value__label {
    @apply pl-0 pr-2.5;
}
.react-select-container .react-select__multi-value .react-select__multi-value__remove:hover {
    @apply bg-transparent;
    color: inherit;
}
.react-select-container .react-select__menu {
    box-shadow: 0px 0px 50px 0px rgb(82 63 105 / 15%);
    margin-top: 5px;
    font-size: 1.0625rem;
    z-index: 999;
    line-height: 1.5625rem;
}
.react-select-container .react-select__menu .react-select__menu-list {
    @apply p-0;
    font-size: 1.0625rem;
    line-height: 1.5625rem;
}
.react-select-container .react-select__menu .react-select__menu-list .react-select__option {
    cursor: pointer;
    padding: 0.65rem 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.5625rem;
}
.react-select-container .react-select__menu .react-select__menu-list .react-select__option:first-child {
    border-top-left-radius: 0.625rem;
    border-top-right-radius: 0.625rem;
}
.react-select-container .react-select__menu .react-select__menu-list .react-select__option:last-child {
    border-bottom-left-radius: 0.625rem;
    border-bottom-right-radius: 0.625rem;
}
.react-select-container .react-select__menu .react-select__menu-list .react-select__option.react-select__option--is-selected {
    @apply bg-transparent;
    color: var(--bs-primary);
}
.react-select-container .react-select__menu .react-select__menu-list .react-select__option.react-select__option--is-focused,
.react-select-container .react-select__menu .react-select__menu-list .react-select__option:hover {
    @apply bg-transparent;
}
.react-select-container
    .react-select__menu
    .react-select__menu-list
    .react-select__option.react-select__option--is-focused:active,
.react-select-container .react-select__menu .react-select__menu-list .react-select__option:active {
    color: var(--bs-primary);
}
.react-select-container
    .react-select__menu
    .react-select__menu-list
    .react-select__option.react-select__option--is-selected:active {
    color: var(--bs-white);
}
.react-select__input:focus {
    outline: none;
}
[type='text']:focus {
    box-shadow: none;
}
/* react select end */
/* footer css end */
/* get in touch start */
.get-touch-section a:hover {
    color: var(--bs-primary);
    transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
}
.get-touch-section p {
    font-size: var(--md);
    line-height: var(--md-lnh);
}
.get-touch-background {
    background-repeat: no-repeat;
    background-position: right top;
}
/* get in touch end */
.comp-start:after {
    @apply absolute m-auto top-0 bottom-0 uppercase;
    content: 'comparision';
    font-size: 100px;
    line-height: 0;
    transform: rotate(-90deg);
    left: 130px;
    font-weight: bold;
    color: var(--bs-border-color);
}
.comparision th {
    border-left: 1px solid var(--bs-border-color);
    padding: 15px 15px 15px 30px;
}
.comparision th h3 {
    @apply m-0;
}
.comparision h3 img {
    @apply mr-15;
}
.comparision td {
    border-top: 1px solid var(--bs-border-color);
    border-left: 1px solid var(--bs-border-color);
    padding: 23px 20px 23px 30px;
    background-repeat: no-repeat;
    padding-left: 85px;
    background-position: 20px center;
    line-height: 27px;
}

.navbar-toggler {
    padding: 0;
    font-size: 20px;
    position: relative;
    height: 16px;
    width: 18px;
    margin-left: auto;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    margin: 0px;
}
.navbar-toggler span.icon-bar {
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    background: var(--bs-body-color);
    width: 18px;
    height: 2px;
    display: block;
    text-align: right;
    margin-left: auto;
    opacity: 0.8;
}
.navbar-toggler span.icon-bar.bottom-bar {
    @apply mb-0;
}
.navbar-toggler.cross .icon-bar {
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
}
.navbar-toggler.cross .top-bar {
    @apply absolute top-2;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.navbar-toggler.cross .middle-bar {
    @apply opacity-0;
}
.navbar-toggler.cross .bottom-bar {
    @apply absolute;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 18px !important;
    top: 8px;
}
.back-icon {
    @apply uppercase flex items-center top-0 z-[1] !sticky;
    color: var(--bs-secondary);
    background: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
    padding: 13px 20px;
    font-weight: 600;
    font-size: var(--sm);
    line-height: var(--sm-lnh);
}
/* range slider */
.horizontal-slider {
    height: 50px;
    margin-top: 5px;
}
.range-thumb {
    font-size: 0.9em;
    text-align: center;
    background-color: var(--bs-black);
    color: var(--bs-white);
    cursor: pointer;
    box-sizing: border-box;
}
.range-thumb.active {
    background-color: var(--bs-primary);
}
.thumb-label {
    transform: translateX(-10%);
}
.thumb-label:focus,
.range-thumb:focus {
    outline: none;
}
.range-track {
    @apply relative;
    background: var(--bs-primary);
}
.horizontal-slider .range-track.range-track-1 {
    background: #ddd;
    top: 30px;
    height: 3px;
    border-radius: 2px;
    box-shadow: none;
}
.horizontal-slider .range-track {
    top: 30px;
    height: 3px;
    border-radius: 2px;
    box-shadow: none;
}
.horizontal-slider .range-thumb {
    top: 1px;
    width: 50px;
    height: 48px;
    line-height: 46px;
    background-color: var(--bs-primary) !important;
    border: 2px solid var(--bs-border-color);
    background-image: none !important;
    width: 17px;
    height: 17px;
    top: 22px;
    border-radius: 50%;
}

@media (max-width: 992px) {
    .menu-button {
        @apply py-3 px-5 leading-[26px] mb-0;
    }
    #navbarNav {
        @apply bg-grey dark:bg-gray-800 fixed block w-full left-0 bottom-0 justify-center overflow-y-auto z-[11] top-[130px];
        overflow: hidden;
        height: calc(100vh - 60px);
        transform: translateX(-100%);
        transition: 0.3s;
    }
    #navbarNav.navShow {
        transform: translateX(0);
        transition: 0.3s;
    }

    body:has(.navShow) {
        overflow: hidden;
    }
    .sub-menu {
        @apply fixed left-0 bottom-0 top-0 right-0 flex flex-col max-w-full z-[1045] transition-all;
        height: calc(100vh - 60px);
        overflow-y: auto;
        transition-duration: 0.3s;
        transform: translateX(100%);
        background-clip: padding-box;
    }
    .sub-menu.open {
        @apply w-full;
        transform: none;
    }
    .hero-app-img {
        transform: translateY(0) translateX(-50%);
        left: 50%;
    }
}
@media (max-width: 900px) {
    .process-list {
        --item-w: calc(calc(100vw - 42px) / 5);
    }
    .circle {
        --circle-w: 9vw;
        --left: 14.5vw;
    }
}
@media (max-width: 767.98px) {
    .font-size-res {
        font-size: 15px;
    }
    .font-size-res {
        font-size: 15px;
    }
    .breadcumb-pages ol li {
        @apply mb-2;
    }
    :root {
        --lg: 20px;
        --lg-lnh: 30px;
        --xxl: 36px;
        --xxl-lnh: 42px;
        --xl: 26px;
        --xl-lnh: 34px;
    }
    p {
        font-size: 16px;
        line-height: 24px;
    }
    .slide-title {
        line-height: 34px;
    }
    .logo {
        @apply w-auto h-30;
    }
    .hero-dashboard-img img.dashboard-img {
        height: 440px;
        transform: translateX(-18%);
    }
    .hero-tech-img .hero-vue-img {
        height: 340px;
        transform: translateX(-18%);
    }
    .odoo-baneer-img-height .hero-vue-img {
        height: 332px;
    }
    /* .hero-tech-img .hero-vue-img{ height: 440px;transform: translateX(-18%);} */
    .client-carousel:after,
    .client-carousel:before {
        @apply w-100;
    }
    .client-testimonial-slider .slick-slider:after {
        @apply bg-none;
    }
    .client-testimonial-slider .slick-slider:before {
        @apply bg-none;
    }
    .pe-responsive {
        @apply pl-0;
    }
    .project-testimonial .card-description {
        @apply max-h-none mb-5;
        min-height: auto;
    }
    .variable-width .slick-track {
        @apply !flex;
    }
    .variable-width .slick-track .slick-slide {
        height: inherit !important;
    }
    .variable-width .slick-track .slick-slide > div {
        @apply !h-full;
    }
    .variable-width .slick-track .slick-slide > div > div {
        @apply !h-full;
    }
    .post-description {
        @apply h-50;
    }
    .moweb-life-titles li.moweb-life-titles_title {
        font-size: 14px;
    }
    .moweb-life-titles_title:nth-child(1) {
        left: -15px;
    }
    .moweb-life-titles_title:nth-child(2) {
        top: -25px;
    }
    .our-team-success_item:nth-child(1) {
        padding-left: 35%;
        top: 0%;
        left: 8%;
    }
    .project-detail {
        @apply max-w-full;
    }
    /* service list start */
    .services-listing:before {
        @apply border-b-0 right-0 left-2 top-[32px];
        border-left: 2px dashed #6b7c93;
        height: calc(100% - 40px);
    }
    .services-listing {
        @apply mt-0;
    }
    .service-card .service-title {
        @apply mt-0 md:mt-10 ml-10 mb-0 rounded-10;
    }
    .service-card .star-stat:after {
        @apply bottom-3.5 left-[-40px];
    }
    .service-card .service-list {
        margin: 20px 0 0 40px;
    }
    .service-card .service-title:before {
        @apply border-b-0 left-[-14px] bottom-[17px];
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid var(--bs-body-color);
        rotate: 90deg;
    }
    .service-card:hover .service-title:before {
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid var(--bs-success);
    }
    /* service list end */

    /* serving css start */
    .serving-bg {
        padding: 70px 30px;
    }
    .serving {
        padding: 0;
    }
    .serving__logo {
        height: 56px;
        width: 56px;
    }
    .serving__logo img {
        height: 26px;
        width: 26px;
    }
    .serving__logo1 {
        top: 3%;
        left: 36%;
    }
    .serving__logo2 {
        @apply left-auto;
        top: 7%;
        right: 16%;
    }
    .serving__logo3 {
        top: 16%;
        left: 23%;
    }
    .serving__logo4 {
        @apply left-auto;
        top: 16%;
        right: 38%;
    }
    .serving__logo5 {
        @apply top-auto right-auto;
        left: 22%;
        bottom: 3%;
    }
    .serving__logo6 {
        @apply top-auto right-auto;
        bottom: 15%;
        left: 36%;
    }
    .serving__logo7 {
        @apply top-auto left-auto;
        right: 34%;
        bottom: 3%;
    }
    .serving__logo8 {
        top: 76%;
        right: 21%;
    }
    /* serving css end */

    .process-list,
    .process-list-about.process-list {
        @apply flex-col justify-center items-center mt-50;
        --item-w: calc(calc(100vw - 42px));
        --item-h: 400px;
    }
    .process-list-about.process-list {
        @apply flex-col justify-center items-center mt-50;
        --item-w: calc(calc(100vw - 42px));
        --item-h: 400px;
    }
    .process-item,
    .process-list-about .process-item {
        @apply max-w-full mt-0;
        min-height: var(--item-h);
    }
    .process-item:last-child,
    .process-list-about .process-item:last-child {
        @apply mb-5;
        min-height: auto;
    }
    .process-icon,
    .process-list-about .process-icon {
        height: 110px;
    }
    .process-icon svg,
    .process-list-about .process-icon svg {
        height: 46px;
        width: 46px;
    }
    .circle,
    .process-list-about .circle {
        --left: auto;
        --circle-w: 8.4rem;
        --circle-h: 8.4rem;
        --top: 150px;
        width: 1.2rem;
        height: var(--circle-h);
        margin-top: 0;
        transform: rotate(180deg) translateX(-9px);
    }
    .process-list-about .circle {
        --top: 245px;
    }
    .process-list-aiml .circle {
        --top: 260px;
    }
    .process-list-digital .circle {
        --top: 245px;
    }
    .circle-reverse,
    .process-list-about .circle-reverse {
        transform: rotate(360deg) translateX(9px);
    }
    .circle-2,
    .circle-3,
    .circle-4,
    .process-list-about .circle-2,
    .process-list-about .circle-3,
    .process-list-about .circle-4,
    .process-list-about .circle-5 {
        left: auto;
    }
    .circle-2,
    .process-list-about .circle-2 {
        top: calc(var(--top) + var(--item-h));
    }
    .circle-3,
    .process-list-about .circle-3 {
        top: calc(var(--top) + var(--item-h) * 2);
    }
    .circle-4,
    .process-list-about .circle-4 {
        top: calc(var(--top) + var(--item-h) * 3);
    }
    .process-list-about .circle-5 {
        top: calc(var(--top) + var(--item-h) * 4);
    }

    /* about us page css start */
    .about-us-animation .custom-min-height {
        min-height: auto;
    }
    /* about us page css end */
    .application-video-one video,
    .application-video-two video {
        max-width: 80%;
    }
    .nav.work-nav {
        @apply absolute hidden top-full	z-[1];
    }
    .nav.work-nav.show {
        @apply block;
    }
    .work-nav button {
        @apply w-full;
    }
    /* footer css */
    .row.get-touch-section {
        @apply gap-30;
    }
    .project-logo {
        padding: 5px 30px;
    }
    picture.pic-bg img {
        @apply left-0;
        transform: translate(-41px, -8%) rotate(90deg);
        height: 600px;
    }
    .app-img-wrapper {
        height: 370px;
    }
    .top-border-edge,
    .bottom-border-edge {
        overflow: hidden;
        max-width: 100%;
    }
    .top-border-edge svg,
    .bottom-border-edge svg {
        height: 40px;
        width: auto;
        object-fit: cover;
    }
}

@media (max-width: 575.98px) {
    /* serving css start */
    .serving-content {
        padding: 220px 0;
    }
    .serving-bg {
        padding: 70px 0;
    }
    .serving__logo1 {
        top: 3%;
        left: 22%;
    }
    .serving__logo2 {
        @apply left-auto;
        top: 4%;
        right: 16%;
    }
    .serving__logo3 {
        top: 16%;
        left: 12%;
    }
    .serving__logo4 {
        @apply left-auto;
        top: 14%;
        right: 29%;
    }
    .serving__logo5 {
        @apply top-auto right-auto;
        left: 11%;
        bottom: 4%;
    }
    .serving__logo6 {
        @apply top-auto right-auto;
        bottom: 14%;
        left: 26%;
    }
    .serving__logo7 {
        @apply top-auto left-auto;
        right: 34%;
        bottom: 3%;
    }
    .serving__logo8 {
        top: 79%;
        right: 12%;
    }
    /* serving css end */
}
.mobile-carousel {
    -webkit-overflow-scrolling: touch;
}
/* project slider css */
/* .video-frame .slick-slide {transition:.3s ease filter;cursor: pointer;}
.video-frame .slick-slide:hover {transition:.3s ease filter, .3s ease opacity;filter: blur(1px);opacity:.85} */
.app-item img {
    border-radius: 14px;
}
.app-img-wrapper {
    height: 460px;
}
.app-img-wrapper img {
    max-height: 100%;
    height: 100%;
    width: auto;
    max-width: none;
}
.video-frame .slick-slide {
    cursor: pointer;
}
/* .video-frame .slick-slide:hover {transition:.3s ease filter, .3s ease opacity;filter: blur(1px);opacity:.85} */

.carousel.slick-slider ul.slick-dots {
    @apply mt-6 !flex;
}
@media only screen and (min-width: 576px) {
    .carousel.slick-slider ul.slick-dots {
        @apply mt-8;
    }
}
@media only screen and (min-width: 1200px) {
    .carousel.slick-slider ul.slick-dots {
        @apply mt-12;
    }
}
.carousel.slick-slider ul.slick-dots li {
    @apply mr-8;
}
.carousel.slick-slider ul.slick-dots li:last-child {
    @apply mr-0;
}
.carousel.slick-slider ul.slick-dots li button {
    @apply block;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0;
    background: none;
    border-radius: 100%;
    border: 1px solid var(--grey70);
}
.carousel.slick-slider ul.slick-dots li button:before {
    top: -4px;
    left: -4px;
    content: '' !important;
}
.carousel.slick-slider ul.slick-dots li.slick-active button {
    border: 1px solid var(--primary);
    background: var(--primary);
}
.section-slider-screens {
    @apply overflow-hidden z-[1] w-full;
}
.section-slider-screens .slick-prev {
    @apply !hidden;
}
.section-slider-screens .slick-next {
    @apply !hidden;
}
@media only screen and (min-width: 576px) and (max-width: 640px) {
    .section-slider-screens {
        @apply pt-0 mb-2.5;
    }
}
@media only screen and (min-width: 601px) and (max-width: 767px) {
    .section-slider-screens {
        @apply pt-0 mb-30;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-slider-screens {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}
.section-slider-screens .ipad-frame-box {
    @apply relative flex flex-row items-center z-[2];
    width: 62.75vw;
    height: 39.56vw;
    margin: 0 auto;
}
.section-slider-screens .ipad-frame-box .ipad-frame-main {
    @apply absolute top-0 rounded-[40px];
    background-color: var(--bs-border-color);
    border: solid 1px var(--bs-border-color);
    -webkit-transition: ease-in-out all 0.3s;
    transition: ease-in-out all 0.3s;
    width: 60.8vw;
    height: 39.67vw;
}
.section-slider-screens .ipad-frame-box .ipad-frame-main img {
    @apply relative rounded-[40px] p-[1px] z-[2];
    width: 60.677vw;
    height: 39.667vw; /*height: 41.667vw; */
}
.section-slider-screens .ipad-frame-box .video-frame {
    @apply absolute top-3 items-center;
    width: 60.677vw;
    height: 38.67vw; /*height: 41.667vw; */
}
.section-slider-screens .slide-one {
    @apply text-center	relative mt-4;
    transform: scale(0.8);
    transition: all 0.5s ease-in;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .section-slider-screens .slide-one {
        @apply rounded-[10px];
    }
}
.section-slider-screens .slide-one img {
    @apply h-auto max-w-full rounded-[18px];
    width: 1067px;
    aspect-ratio: auto 1067/669;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .jobapplyimgres {
        @apply absolute bottom-[-2%];
    }
    .address-box {
        @apply !h-full;
    }
    .btn {
        padding: 0.625rem 1rem;
    }
    .cs-card img {
        @apply !h-full;
    }
    .section-slider-screens .slide-one img {
        @apply rounded-[10px];
    }
}
.section-slider-screens .slick-list {
    overflow: inherit;
}
.section-slider-screens .slick-list .slick-current .slide-one {
    transform: scale(1);
    transition: all 0.9s ease-in;
}
.section-slider-screens .slick-next,
.section-slider-screens .slick-prev {
    @apply hidden z-[5];
}
.section-slider-screens .slick-next:before,
.section-slider-screens .slick-prev:before {
    @apply bg-transparent;
    color: var(--bs-black);
    font-size: 0;
}

@media only screen and (min-device-width: 1000px) and (max-device-width: 1100px) and (orientation: portrait) {
    .testimonial-client-img {
        object-fit: cover;
    }
}

@media only screen and (min-width: 811px) and (max-width: 991px) {
    .case-study-slider-img .slick-dots {
        bottom: -71px !important;
    }

    .testimonial-slider-img.case-study-slider-img .slick-dots {
        bottom: -90px !important;
    }
    .case-study-img {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    #navbarNav {
        top: 105px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 810px) {
    .case-study-slider-img .slick-dots {
        bottom: -71px !important;
    }

    .testimonial-slider-img.case-study-slider-img .slick-dots {
        bottom: -90px !important;
    }

    .case-study-img {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
}

@media only screen and (min-device-width: 1000px) and (max-device-width: 1100px) and (orientation: portrait) {
    .testimonail-slider-card .card-text-description {
        min-height: 175px;
    }
    .testimonail-slider-text {
        min-height: 85px;
    }
    .testimonial-client-img {
        object-fit: cover;
    }
}

@media only screen and (min-width: 811px) and (max-width: 991px) {
    .case-study-img {
        border-top-right-radius: 0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        width: 100%;
    }

    .case-study-slider .card-description {
        padding: 20px;
    }

    .card-text-des {
        min-height: 75px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 810px) {
    .aiml-hero-section .hero-row {
        grid-template-columns: repeat(1, 1fr);
    }
    .service-offered-tabs {
        width: 15rem;
    }
    .card-text-des {
        min-height: 75px;
    }

    .case-study-img {
        border-top-right-radius: 0;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        width: 100%;
    }

    .case-study-slider .card-description {
        padding: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .service-tabs-header {
        flex-wrap: wrap;
    }
    .service-offered-tabs {
        width: 22rem;
    }
    .service-offered-tabs li {
        padding: 10px;
    }
    .aiml-hero-section .hero-row {
        grid-template-columns: repeat(1, 1fr);
    }
    .case-study-img {
        border-bottom-left-radius: 10px;
        border-bottom-left-radius: 10px;
        border-top-right-radius: 0;
    }

    .case-study-slider-img .slick-dots {
        bottom: -68px !important;
    }

    .case-study-slider .card-description {
        padding: 15px;
    }

    .case-study-slider .card-body {
        min-height: 540px;
    }

    .testimonail-slider-card {
        padding: 15px;
    }

    .testimonail-slider-card .card-body {
        min-height: 645px;
    }

    .testimonial-client-img {
        object-fit: cover;
    }
    .case-study-img {
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
    }

    .ic-45 {
        height: 24px;
        width: 24px;
    }
    .sticky-content .card-body {
        @apply p-5;
    }
    .mb-res2 {
        @apply mb-0;
    }
    .mb-res5 {
        @apply mb-[5rem];
    }
    .section-slider-screens .ipad-frame-box .video-frame {
        @apply top-0;
    }
    .section-slider-screens .ipad-frame-box .ipad-frame-main img,
    .section-slider-screens .ipad-frame-box .ipad-frame-main {
        @apply rounded-[20px];
    }
    .section-slider-screens .ipad-frame-box .ipad-frame-main {
        @apply top-1.5;
    }
}
@media only screen and (min-width: 1920px) {
    .section-slider-screens .ipad-frame-box .ipad-frame-main {
        width: 58.8vw;
        height: 38vw;
    }
    .section-slider-screens .ipad-frame-box .ipad-frame-main img {
        width: 60.677vw;
        height: 38vw;
    }
}
@media only screen and (min-width: 2200px) {
    .section-slider-screens .ipad-frame-box .ipad-frame-main img {
        width: 57.677vw;
        height: 28.5vw;
    }
    .section-slider-screens .ipad-frame-box .ipad-frame-main {
        width: 43.8vw;
        height: 28.5vw;
    }
    .section-slider-screens .ipad-frame-box {
        width: 47.75vw;
        height: 31.56vw;
    }
    .section-slider-screens .ipad-frame-box .video-frame {
        width: 43.677vw;
        height: 27.67vw;
    }
}

.invalid,
.invalid:focus {
    border: 1px solid var(--bs-danger);
}

/* pashwa */
.sec-pashwa .hero-tech-img {
    @apply right-[-8rem] sm:right-0 lg:right-[-21rem] top-0 sm:h-[370px] md:h-[480px] lg:top-8;
}
.sec-pashwa h1 {
    @apply sm:text-[28px] md:text-[48px] sm:leading-[40px] md:leading-[64px];
}
.sec-pashwa {
    background: radial-gradient(
        50% 50% at 50% 50%,
        rgba(113, 75, 103, 0.02) 0%,
        rgba(113, 75, 103, 0.08) 46.5%,
        rgba(113, 75, 103, 0.12) 100%
    );
}
.custom-list li::marker {
    font-size: 0.8rem; /* Adjust this value to change the bullet size */
}
.custom-image {
    @apply bg-purperl_new rounded-[50%] p-[10px] inline-block;
}
.custom-chevron .text-primary {
    color: #714b67 !important; /* Removes the color */
}
/* video popup */
.cookie-toast-two {
    box-shadow: 0px 4px 14px 0px #00000040;
    z-index: 100;
}
.cookie-toast-border {
    border: 1.8px solid white;
}
.video-container {
    position: relative; /* Needed for positioning the overlay */
    width: 100%; /* Ensure the container takes full width */
    height: 100%; /* Ensure the container takes full height */
    overflow: hidden; /* Prevent overflow of the video */
}

.overlay {
    position: absolute; /* Position it absolutely within the container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Cover the entire area */
    background: rgba(0, 0, 0, 0.3); /* Semi-transparent black overlay */
    z-index: 1; /* Ensure the overlay is above the video */
}

.proximanovacond {
    font-family: '__proximanovacond_19ffc0';

    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

/* for home page three */
.navigate-section-spacing {
        margin-top: -30px;
        padding-top: 120px;
        padding-bottom: 100px;
}
.flex1 {flex: 1;}
.agile-border {
    @apply relative top-2;
}
.agile-border-bottom {
    @apply relative bottom-2;
}
/* Add this to your CSS file */

@media only screen and (max-width: 767px) {
.navigate-section-spacing {
    margin-top: -16px;}
}