@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root{
    --font-family :"Manrope", sans-serif ;
    --font-family-heading: "Plus Jakarta Sans", sans-serif;

    --primary-color: #220633;
    --secondary-color: #F8990B;
    --theme-color:#E8006A;

    /* --primary-color: #001525;
    --secondary-color: #FF7700; */
    --text-primary-color: #333;
    --text-secondary-color: #e2e2e2;

    --bg-color:#F4F5F0;
    --bg-color-light:#F7F7F7;
    --bg-color-dark:#0f0f35;

    --Font-size-14: 14px;
    --Font-size-16: 16px;
    --Font-size-18: 18px;
    --Font-size-20: 20px;
    --Font-size-22: 22px;
    --Font-size-24: 24px;
    --Font-size-26: 26px;
    --Font-size-28: 28px;
    --Font-size-30: 30px;
    --Font-size-32: 32px;
    --Font-size-34: 34px;
    --Font-size-36: 36px;
    --Font-size-38: 38px;
    --Font-size-40: 40px;
    --Font-size-42: 42px;
    --Font-size-44: 44px;
    --Font-size-46: 46px;
    --Font-size-48: 48px;
    --Font-size-50: 50px;
    --Font-size-52: 52px;
    --Font-size-54: 54px;
    --Font-size-56: 56px;
    --Font-size-58: 58px;

    --white:#fff;
    --red:red;

}


/********* Reset CSS *********/
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary { display:block } audio, canvas, video { display:inline-block } audio:not([controls]) {display:none;height:0} html {-webkit-text-size-adjust: 100%;-ms-text-size-adjust:  100%;} h1,h2,h3,h4,h5,h6 {font-weight:normal;} b,strong,dt,th {font-weight: bold;} em, i { font-style:italic;} p,h1,h2,h3,h4,h5,h6, ul,ol,dd,table,fieldset,address {margin:0; padding:0;} img {-ms-interpolation-mode: bicubic;border: 0;vertical-align: middle; max-width:100%; height:auto;} figure {margin:0;}legend {white-space:normal;}q { quotes:"\201C" "\201D" "\2018" "\2019" } small { font-size:80% } sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline } sup { top:-0.5em } sub { bottom:-0.25em }
table{border-collapse: separate;border-spacing: 0;width: 100%; empty-cells:show; border:none;} table table { margin:0} th,td {border:none; padding:8px 10px} caption,th,td{font-weight: normal;} a {outline: 0; text-decoration:none;color:var(--primary-color); -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;} a:focus {outline: 0;}a:hover,a:active {outline: 0;} a:hover {text-decoration:none;color:var(--secondary-color);}

/********* Common Classes *********/
* { margin:0; padding:0;}
hr{display:block;height:1px;border:0; border-top:1px solid #ccc; margin:20px 0;padding:0}
body,button,input,select,textarea {font-family:var(--font-family); color:var(--text-primary-color);  font-size:var(--Font-size-18); line-height:28px; font-weight:500;}

h1 { font-family: var(--font-family-heading); font-size:52px; font-weight:700; color:var(--primary-color); margin:0 0 0 0; line-height:normal;}
h2 { font-family: var(--font-family-heading); font-size: var(--Font-size-42); font-weight: 800; margin: 0 0 20px 0; line-height: normal;}

h3 { font-family: var(--font-family-heading); font-size:var(--Font-size-26); font-weight:600; color:var(--primary-color); margin:0 0 15px 0; line-height:normal;}
h4 { font-family: var(--font-family-heading); font-size:20px; font-weight:400; color:var(--primary-color); margin:0 0 10px 0; line-height:normal;}
p { margin-bottom:25px;}

a, button { cursor: pointer;}

ul, li { list-style:none;}

/********** Form, Input & Button  **********/
::-webkit-input-placeholder { color:var(--primary-color); font-size: var(--Font-size-14);}
::-moz-placeholder { color:var(--primary-color); font-size: var(--Font-size-14);}
:-ms-input-placeholder { color:var(--primary-color); font-size:  var(--Font-size-14);}
::placeholder { color:var(--primary-color); font-size:  var(--Font-size-14);}

::-moz-selection { /* Code for Firefox */
  color: var(--white);
  background: var(--primary-color);
}

::selection {
  color: var(--white);
  background: var(--primary-color);
}

.cForm { width:100%; display: flex; flex-wrap: wrap;}
.cForm li { width:100%; display: flex; flex-wrap: wrap; padding: 0 8px; margin-bottom: 16px; align-items: flex-start;}
.cForm li.col2 { width: 50%;}

.cForm li label { font-size: var(--Font-size-16); font-weight: 500; color: var(--primary-color); display: block; margin-bottom: 5px; font-weight: 500;}
.cForm li label span { color: var(--red);}

.cForm li.btnCenter { text-align: center; justify-content: center; margin-bottom: 0;}

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="file"], select, textarea
{ width:100%; padding:10px 14px; background:#fff; border:1px solid #D9D9D9; border-radius:2px; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration: 0.5s; transition-duration:0.5s; font-size:var(--Font-size-16); outline:0 none;}
input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="number"]:hover, input[type="file"]:hover, select:hover, textarea:hover { background:rgba(255, 255, 255, 0.9);  color:var(--primaryColor); border-color: var(--primary-color);}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="file"]:focus, select:focus, textarea:focus {background:rgba(255, 255, 255, 0.8); color: var(--primary-color); }
/* input[type="submit"].btn, button.btn { background-color: var(--secondary-color); color: var(--white); padding: 12px 24px; border-radius: 6px; border: 0 none; font-size: var(--Font-size-18); font-weight: 500; transition:0.5s all ease; cursor: pointer;} 
input[type="submit"].btn:hover, button.btn:hover { background-color: var(--white); color: var(--primary-color);} */

.lightBgForm input[type="text"], .lightBgForm input[type="password"], .lightBgForm input[type="email"], .lightBgForm input[type="tel"], .lightBgForm input[type="number"], .lightBgForm input[type="file"], .lightBgForm select, .lightBgForm textarea
{ background:#f1f1f1; border:1px solid #eee;}

.btn { font-family: var(--font-family-heading); font-size: var(--Font-size-18); text-align: center; color: var(--white); font-weight: 500; background-color: var(--theme-color); padding: 12px 28px; border-radius: 6px; text-align: center; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; outline: none; border: 0 none;}
.btn.btn-light { background-color: var(--white); color: var(--primary-color);}
.btn:hover { background-color: var(--primary-color);}
.btn.btn-light:hover { color: var(--secondary-color);}
.centerBtn{display: flex; justify-content: center; width: 100%; margin-top: 20px;}
.btn.btn-line { background-color: var(--white); color: var(--theme-color); border: 1px solid var(--theme-color);}
.btn.btn-line:hover { background-color: var(--theme-color); color: var(--white);}

.mb-0 { margin-bottom: 0 !important;}
.mb-10 { margin-bottom: 10px !important;}
.mb-20 { margin-bottom: 20px !important;}
.mb-30 { margin-bottom: 30px !important;}
.mb-40 { margin-bottom: 40px !important;}
.mb-50 { margin-bottom: 50px !important;}
.mb-60 { margin-bottom: 60px !important;}
.mb-70 { margin-bottom: 70px !important;}
.mb-80 { margin-bottom: 80px !important;}
.mb-90 { margin-bottom: 90px !important;}

.mt-0 { margin-top: 0 !important;}
.mt-10 { margin-top: 10px !important;}
.mt-20 { margin-top: 20px !important;}
.mt-30 { margin-top: 30px !important;}
.mt-40 { margin-top: 40px !important;}
.mt-50 { margin-top: 50px !important;}
.mt-60 { margin-top: 60px !important;}
.mt-70 { margin-top: 70px !important;}
.mt-80 { margin-top: 80px !important;}
.mt-90 { margin-top: 90px !important;}

/*================================================ Main CSS Theme Start ====================================================*/
html { scroll-behavior: smooth;}
input { -webkit-appearance: none; -moz-appearance: none; appearance: none;}

/********** Layout **********/
.fullwidth { width:100%; display: flex; flex-wrap: wrap; justify-content: center; background-color: var(--white);}
.wrap-inner { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; max-width:1570px; padding:0 15px;}
.wrap-inner-full { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; padding:0 15px;}
.wrap-inner-mid { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; max-width:1260px; padding:0 15px;}
.wrap-inner-small { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; max-width:640px; padding:0 15px;}
.wrap-inner-from { display: flex; flex-wrap: wrap; margin:0 auto; width:100%; max-width:840px; padding:0 15px;}

.boxSpace { padding: 90px 0;}
.boxSpaceT { padding: 90px 0 0 0;}
.boxSpaceB { padding:0 0 90px 0;}

.textCenter { text-align: center;}

.lightBgY { background-color: var(--bg-color);}
.lightBg { background-color: var(--bg-color-light);}
.darkBg { background-color: var(--primary-color);}


@-webkit-keyframes AnimationName {
    0%{background-position:95% 0%}
    50%{background-position:5% 100%}
    100%{background-position:95% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:95% 0%}
    50%{background-position:5% 100%}
    100%{background-position:96% 0%}
}
@keyframes AnimationName {
    0%{background-position:95% 0%}
    50%{background-position:5% 100%}
    100%{background-position:95% 0%}
}

.moreArrow { color: var(--secondary-color);}
.moreArrow:hover { color: var(--primary-color);}
.moreArrow .bi::before {font-weight: 700 !important;}


.titleBox h2,
.learnMore,
.text-gradient {background: linear-gradient(90deg, #6546B2, #E8006A, #F26B1D); -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}

.learnMore { display: flex; align-items: center; gap: 6px; color: var(--secondary-color); font-weight: 700;}
.learnMore:hover { background: linear-gradient(90deg, #F26B1D, #E8006A, #6546B2); -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}


/* Header */
.header { background-color: var(--white); padding: 10px 0; position: relative;}
.header .wrap-inner {  padding: 0 25px; justify-content: space-between; align-items: center;}
.header .menu-toggle { cursor: pointer; display: none;}

.header.sticky { position: fixed; top: 0; z-index: 999;}
.header {
  transition: top 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s cubic-bezier(0.4,0,0.2,1);
}
.header.sticky {
  top: 0;
  box-shadow: 0 8px 32px 0 rgba(34,6,51,0.19);
}


.header .logo {position: relative; z-index: 999;}
.header .nav { display: flex;}
.header .nav .nav-links { display: flex; gap: 30px;}

.header .nav .nav-links .menu-item .mainManu { font-family: var(--font-family-heading); font-size:var(--Font-size-16); text-transform: uppercase; color: var(--primary-color); font-weight: 700; letter-spacing: 1px; position: relative; z-index: 999;}
.header .nav .nav-links .menu-item .mainManu:hover { color: var(--secondary-color);}

.header .nav .nav-links .mainManuBtn { font-family: var(--font-family-heading); font-size: var(--Font-size-18); text-align: center; color: var(--white); font-weight: 500; background-color: var(--secondary-color); padding: 10px 24px; border-radius: 6px; position: relative; z-index: 999; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.header .nav .nav-links .mainManuBtn:hover { background-color: var(--primary-color);}
.header .nav .nav-links .mainManuBtn::before { display: none;}


.nav { display: flex; }
.nav-links { display: flex; align-items: center; gap: 25px; list-style: none; margin: 0; padding: 0;}
.nav-links a { text-decoration: none; font-weight: 500; position: relative; padding: 6px 0; display: inline-block; transition: color 0.3s ease; color: var(--primary-color);}
.nav-links a:hover { color: var(--secondary-color);}
.nav-links a::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--secondary-color);  background: linear-gradient(90deg, #6546B2, #E8006A, #F26B1D); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;}
.nav-links a:hover::before {transform: scaleX(1);}

.submenu { width: 100%; max-width: 1570px; margin: 0 auto; display: none; position: absolute; left: 0; top: 0;  min-width: 220px; z-index: 100; padding-top: 68px !important; border-bottom: 2px solid #E8006A;}

.header .submenu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
/* .submenu div { background-color: var(--white);} */

/* .menu-item:hover > .submenu { display: flex;} */

@media only screen and (min-width: 1280px) {
    .menu-item:hover > .submenu { display: flex; }
}

  
.menu-toggle { display: none; font-size: 28px; cursor: pointer; user-select: none; z-index: 2001; }

.header .submenu label { width: 100%; display: flex; margin-bottom: 10px; font-family: var(--font-family-heading); font-size: var(--Font-size-14); color: var(--primary-color); text-transform: uppercase; font-weight: 700; letter-spacing: 2px; position: relative; padding-left: 16px; background: linear-gradient(90deg, #6546B2, #E8006A, #F26B1D); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.header .submenu label::before { content: ""; width: 8px; height: 8px; border-radius: 100%; background-color: var(--secondary-color); position: absolute; left: 0; top: 10px;}

/* Services Menu */
.header .servicesMenu .submenu { width: 100%;}
.header .servicesMenu .submenu .servicesBox{ width: 100%; padding: 35px; background-color: #fff;}
.header .servicesMenu .submenu .servicesBox ul { width: 100%; display: flex; flex-wrap: wrap; gap: 30px;}
.header .servicesMenu .submenu .servicesBox ul li { width: calc(100% / 3 - 20px); display: flex; flex-wrap: wrap; gap: 20px;}
.header .submenu .menuBox a { display: flex; flex-direction: column; gap: 5px; font-weight: 700;}
/* .header .servicesMenu .submenu .servicesBox ul li a span { font-weight: 600; font-size: var(--Font-size-16); color: var(--text-primary-color);} */
.header .servicesMenu .submenu .servicesBox ul li a span { font-weight: 600; font-size: var(--Font-size-16); color: rgb(91, 91, 91);}

.header .servicesMenu .submenu .servicesBox ul li a:hover span { color: var(--text-primary-color);}

.header .servicesMenu.solutionsMenu .submenu .servicesBox ul { gap: 20px;}
.header .servicesMenu.solutionsMenu .submenu .servicesBox ul li { width: calc(100% / 3 - 20px);}

/* Technologies Menu */
.header .technologiesMenu .submenu {padding: 74px 0 0 0; width: 100%;}
.header .technologiesMenu .submenu .menuBox { width: 25%; background-color: var(--white); padding: 30px 50px;}
/* Technologies Menu */


/* Company Menu */
.header .companyMenu .submenu { width: 100%; padding: 74px 0 0 0; width: 100%; }
.header .companyMenu .submenu .menuBox {  padding: 35px;  background-color: #fff;}

.header .companyMenu .submenu .succeedBox { width: 70%; background-color: var(--primary-color);}
.header .companyMenu .submenu .succeedBox div { font-family: var(--font-family-heading); color: var(--secondary-color); font-size: var(--Font-size-26);  font-weight: 600; display: inline-block; margin-bottom: 10px; line-height: normal;}
.header .companyMenu .submenu .succeedBox p { color: var(--white);}
.header .companyMenu .submenu .succeedBox ul { display: flex; gap: 15px;}
.header .companyMenu .submenu .succeedBox ul li { width: calc(33.33% - 5px); font-family: var(--font-family-heading); color: var(--white); font-size: var(--Font-size-16); font-weight: 600; background-color: #00000040; padding: 20px 25px; border-radius: 5px;}
.header .companyMenu .submenu .succeedBox ul li span { display: block; font-size: var(--Font-size-36); font-weight: 700; color: var(--secondary-color); margin-bottom: 10px;}

.header .companyMenu .submenu .companyLink { width: 30%;}

.header .submenu .succeedBox label { color: var(--secondary-color);}
/* Company Menu */

/* Header End */

/* Footer */
.getInTouchBox { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 80px;}
.getInTouchBox .contactUs,
.getInTouchBox .formBox { width: calc(50% - 40px);}

.getInTouchBox .formBox { background-color:var(--bg-color-light); padding: 40px; border-radius:10px;}
.getInTouchBox .contactUs p { max-width: 480px;}
.getInTouchBox .contactUs ul { width: 100%; display: flex; flex-wrap: wrap; gap: 20px;}
.getInTouchBox .contactUs ul li { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;}
.getInTouchBox .contactUs ul li i { color: var(--secondary-color); font-size: var(--Font-size-22);}
.getInTouchBox .contactUs ul li a { font-family: var(--font-family-heading); font-size: var(--Font-size-18); font-weight: 600;}


.footer { padding: 40px 0; color: var(--white); border-bottom:1px solid #434343;}
.footer label, .footer h3,
.footer a { color: var(--white);}
.footer p,
.footer address { color: #A5AFB8;}

.footer .companyInfo { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.footer .companyInfo .name { max-width: 450px;}
.footer .companyInfo .name h3 { font-size: var(--Font-size-24); color: var(--secondary-color);}
.footer .companyInfo .name p { margin-bottom: 0;}
.footer .companyInfo .social { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;}
.footer .companyInfo .social a { width: 42px; height: 42px; background-color: #002440; display: flex; justify-content: center; align-items: center; color: var(--secondary-color); border-radius: 50px;}
.footer .companyInfo .social a:hover { background-color: var(--white);}

.footer .footerLink { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px;}
.footer .certified label,
.footer .footerLink label { font-family: var(--font-family-heading); font-size: var(--Font-size-22); font-weight: 500; display: block; margin-bottom: 25px; }
.footer .footerLink ul { display: flex; flex-wrap: wrap; flex-direction: column; gap: 12px;}
.footer .footerLink a { font-size: var(--Font-size-16);}
.footer .footerLink a:hover { color: var(--secondary-color);}

.footer .certified { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;}
.footer .certified ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;}
.footer .certified ul img { width: auto; height: 42px;}

.footer address { width: 100%; text-align: center; font-size: var(--Font-size-16); }
.footer:has(address) { border-bottom: 0 none;}
/* Footer End */


/* List */
ul.list { width: 100%; display: flex; flex-wrap: wrap; margin: 0 !important;}
ul.list li { width: 100% !important; display: block !important; position: relative; padding: 0 0 0 28px !important; margin-bottom: 16px !important;}
ul.list li::before { content: ""; width: 12px; height: 12px; background-color: var(--white); border-radius: 20px; position: absolute; left: 0; top: 8px; border: 2px solid var(--secondary-color);}
ul.list li label { width: 100%; display: block; margin-bottom: 5px; color: var(--primary-color); font-weight: 600; font-family: var(--font-family-heading);}

/* Two Col Box */
.twoColBox { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 60px;}
.twoColBox .colTwo { width: calc(50% - 30px);}
.twoColBox .imgBox img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;} 
.twoColBox:has(.imgBox) .cntBox { padding: 30px 0;}

/* Accordion */
.accordion { width: 100%; display: flex; flex-wrap: wrap; gap: 10px;}
.accordion li { width: 100%; border-bottom: 8px solid transparent; background-color: var(--white); border-radius: 10px;  -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.accordion.accordionBg li { background-color: var(--bg-color-light);}
.accordion li .acclink { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding:25px 50px; cursor: pointer;}
.accordion li .acclink h3 { width: calc(100% - 35px) ; margin-bottom: 0; padding-right: 15px; font-size: var(--Font-size-22); font-weight: 700; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.accordion li:hover .acclink h3 { color: var(--secondary-color);}
.accordion li .acclink span i::before { font-weight: 700 !important;}
.accordion li .acclink span { width: 26px; display: flex; justify-content: center; align-items: center; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.accordion li .acclink:hover span { color: var(--secondary-color);}

.accordion li .accord-detail { width: 100%; padding: 0 50px 25px 50px;}
.accordion li:has(.active) { border-bottom-color: var(--secondary-color);}
.accordion.accordionBg li:has(.active) { background-color: var(--white);}
.accordion li .acclink span i { -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.accordion li:has(.active) .acclink span { color: var(--secondary-color);}
.accordion li:has(.active) .acclink span i { rotate: -45deg;}

/* Contact Box */
.contactBox { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 50px; background-color: var(--primary-color); border-radius: 10px;}
.contactBox h2 { color: var(--white); font-size: var(--Font-size-38); margin-bottom: 15px;}
.contactBox p { color: var(--secondary-color); font-family: var(--font-family-heading); font-size: var(--Font-size-22); margin-bottom: 0; line-height: normal;}

.contactBox h2.small { font-size: var(--Font-size-36);}

.contactBox.hireDev { flex-wrap: wrap; gap: 30px;}

.contactBoxMain {background: linear-gradient(90deg,#6546B2 0%, #E8006A 50%, #F26B1D 100%); }
.contactBoxMain .contactBox { background-color: transparent; padding-left: 0; padding-right: 0;}
.contactBoxMain .contactBox p { color: var(--white);}
.contactBoxMain .contactBox .cnt {width: calc(100% - 180px);}

/* Banner */
/* .bannerImages {background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; padding: 90px 0;} */
.bannerImages {background-position: center right; background-repeat: no-repeat; background-size: auto; background-color: #040E32; position: relative; overflow: hidden; padding: 90px 0;}

.bannerImages .banner { display: none;}
.bannerImages::before { content:""; width: 100%; max-height: 100%; min-height: 100%; position: absolute; left:0; top: 0; z-index: 0; }
.bannerImages .wrap-inner { position: relative; z-index: 1;}
@supports (-webkit-touch-callout: none) {
  .bannerImages {
    background-attachment: scroll;
  }
}

/* Title */
.titleBox { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; margin-bottom: 40px;}
.titleBox label { font-family: var(--font-family-heading); font-size: var(--Font-size-16); color: var(--secondary-color); text-transform: uppercase; font-weight: 700; letter-spacing: 2px; display: block; margin-bottom: 6px;}
.titleBox h2 { width: auto; max-width: fit-content; margin-bottom: 0;}
.titleBox p { font-size: var(--Font-size-20); width: 100%; max-width: 1024px; margin-bottom: 0; font-weight: 500; line-height: 32px;}
.titleBox.centerTitle { justify-content: center; align-items: center; text-align: center;}
.titleBox.centerTitle p { max-width: 960px;}
.titleBox.removeMax h2,
.titleBox.removeMax p { max-width: fit-content;}
.titleBox:has(p) h2 { margin-bottom: 15px;}
.darkBg .titleBox p { color: var(--white);}

/* Home Banner */
.homeBanner { height: calc(100vh - 74px); align-items: center; /*background-attachment: fixed; background-position: center right; background-size: cover; */}
.homeBanner::before { background: linear-gradient(120deg,#010c3d 25%, #ed00c520 50%, #1901293d); opacity:.8;}
.homeBanner .cntBox { width: 100%; max-width: 768px;}
.homeBanner .cntBox label { font-family: var(--font-family-heading); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--secondary-color); display: block; margin-bottom: 10px;}
.homeBanner .cntBox h1 { font-size: var(--Font-size-54); font-weight: 600; color: var(--white); margin-bottom: 20px;}
.homeBanner .cntBox p { font-weight: 500; font-size: var(--Font-size-20); color: var(--white); margin-bottom: 50px; display: block; }

.smallService { width: 100%; display: flex; flex-wrap: wrap; gap: 30px;}
.smallService li { width: calc(25% - 22.5px); display: flex;}
.smallService li .services { width: 100%; background-color: #fff; border: 1px solid #D9D9D9; padding: 25px; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.smallService li .services h3 { font-size: var(--Font-size-24); margin-bottom: 14px;}
.smallService li .services p { margin-bottom: 0px;}
.smallService li .services .moreArrow { float: right; margin: 0 -10px -15px 0;}
.smallService li:hover .services {box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;}
.smallService li:hover h3 a { color: var(--secondary-color);}
/* .smallService li:hover .services  { transition: 0.5s ease-in-out; position: relative; overflow: hidden; z-index: 1;}
.smallService li .services::after { content: ''; display: block; position: absolute; top: 0; left: 0; bottom: 0; width: 0; height: 106%; background: #f5f5f5; transition: 0.4s ease-in-out; z-index: -1;}
.smallService li:hover .services::after {width: 106%;} */
.smallService li .services.servicesImg { padding: 0; border: 0 none; overflow: hidden;}
.smallService li .services.servicesImg img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); }
.smallService li:hover .services.servicesImg img {transform: scale(1.1);}

.homeCounter .wrap-inner { justify-content: space-between;}
/* .homeCounter .titleBox { width: 460px; margin-bottom: 0;} */
.homeCounter ul { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 20px;}
.homeCounter ul li { width: calc(25% - 20px); display: flex; flex-wrap: wrap; padding: 40px 25px 25px; }
.homeCounter ul li .count { width: 100%; font-family: var(--font-family-heading); font-size: var(--Font-size-54); font-weight: 800; line-height: normal; color: var(--white);}
.homeCounter ul li label { width: 100%; font-family: var(--font-family-heading); color: var(--white); font-size: var(--Font-size-20); font-weight: 400; display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ffffff40; letter-spacing: 0.8px;}


.owl-carousel .owl-nav { width: 100%; display: flex; justify-content: center; gap: 10px;}
.owl-carousel .owl-nav button { display: flex; justify-content: center; align-items: center; cursor: pointer; width: 32px; height: 32px; border: 1px solid #707070 !important; border-radius: 100px;}

.owl-carousel .owl-item .industries::before { opacity: 0; transition: opacity 0.4s ease;}
.owl-carousel .owl-item.active-center .industries::before { content: ""; width: 100%; min-height: 100%; max-height: 100%;  background-color: var(--primary-color); opacity: 0.7; position: absolute; left: 0; top: 0; z-index: 0;}

.industries { padding: 0 0 20px 0; border-radius: 10px; background-color: var(--white); display: flex; align-items: center; position: relative; overflow: hidden; flex-wrap: wrap;}
.industries h3 { font-size: var(--Font-size-22); margin-bottom: 0;}
.industries .cnt h3 { position: absolute; left: 25px; bottom: 25px; z-index: 5;}
.industries h3 a { color: var(--white);}
.industries p { font-weight: 600; margin-bottom: 0;font-size: 20px;}
.industries .cnt { width: 100%; height: 300px; display: block; position: relative; z-index: 1; border-radius: 10px; margin-bottom: 20px; overflow: hidden; }
.industries .cnt img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
.industries .cnt img { transition: .35s  ease-in;}
.industries:hover .cnt img {transform: scale(1.05);}
.industries .cnt::before { content: ""; width: 100%; min-height: 100%; max-height: 100%;  background-color: var(--primary-color); position: absolute; left: 0; top: 0; z-index: 1; border-radius: 10px; opacity: 0.5; transition: all 0.5s ease-in-out;}
.industries:hover .cnt::before { opacity: 0.8;}
.industries .learnMore { width: 100%; justify-content: space-between;}
.caseSlid .industries { background-color: var(--bg-color-light);}
.caseSlid .industries .description { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 0 35px;}

.caseList { display: flex; flex-wrap: wrap; gap: 20px;width: 100%;}
.caseList .industries { width: calc(33.33% - 15px); background-color: var(--bg-color-light);}
.caseList .industries a.link { display: flex; width: 100%; height: 100%; position: absolute; z-index: 2;}
.caseList .industries .description { width: 100%; display: flex; flex-direction: column; gap: 10px; padding: 0 35px;}
.caseList .industries .cat { width: 100%; display: flex; gap: 10px; position: absolute; left: 0; top: 0; padding: 18px; z-index: 2;}
.caseList .industries .cat span {background-color: var(--white); line-height: normal; font-family: var(--font-family-heading); font-size: var(--Font-size-14); text-transform: uppercase; font-weight: 700; padding: 8px 16px; border-radius: 100px; background: linear-gradient(90deg,#6546B2 0%, #E8006A 50%, #F26B1D 100%); color: var(--white); display: inline-block;}
.caseList .industries .cnt::before { opacity: 0;}
.caseList .industries:hover .cnt::before { opacity: 0.4;}

/* .caseSlidHome { display: flex; flex-wrap: wrap; gap: 20px;width: 100%;}
.caseSlidHome .industries { background-color: var(--bg-color-light);}
.caseSlidHome .description { width: 100%; padding: 0 20px;} */

.homeIndustries { position: relative;}
.homeIndustries .owl-carousel .owl-nav { width: 100%; display: flex; margin-top: 20px;}


.homeTestimonials ul { display: flex; flex-wrap: wrap; gap: 30px;}
.homeTestimonials ul li { width: calc(33.33% - 20px); padding: 50px; background-color: var(--white);  -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; border-radius: 10px;}
.homeTestimonials ul .owl-item li { width: 100%;} 
.homeTestimonials ul li:hover { background-color: var(--white);}
.homeTestimonials ul li p { font-family: var(--font-family-heading); color: var(--primary-color); font-size: var(--Font-size-20); font-weight: 400; margin-bottom: 30px;}
.homeTestimonials ul li label { font-family: var(--font-family-heading); color: var(--secondary-color); font-size: var(--Font-size-22); font-weight: 600; margin-bottom: 8px; display: block;}
.homeTestimonials ul li span { font-family: var(--font-family-heading); color: var(--primary-color); display: block;}


.homeSolutions .solutionsBox { width: 100%; display: flex; flex-wrap: wrap; gap: 15px;}
.homeSolutions .solutionsBox li { width: 100%; display: flex; gap: 20px; background-color: var(--bg-color-light); padding: 20px; border-radius: 10px; position: relative;}
.homeSolutions .solutionsBox li .solutionCnt { width: 100%; display: flex; justify-content: space-between; gap: 20px; align-items: center;}
.homeSolutions .solutionsBox li .solutionCnt .icon { width: 80px; padding-left: 15px;}
.homeSolutions .solutionsBox li .solutionCnt .icon img {}
.homeSolutions .solutionsBox li .solutionCnt .moreArrow { width: 50px; display: flex; justify-content: end;}
.homeSolutions .solutionsBox li .solutionCnt .moreArrow i::before { font-weight: 400 !important;}
.homeSolutions .solutionsBox li .solutionCnt .cnt { width: calc(100% - 110px); display: flex; justify-content: space-between; align-items: center;}
.homeSolutions .solutionsBox li .solutionCnt .cnt div { max-width: 980px; width: 100%; }
.homeSolutions .solutionsBox li .solutionCnt .cnt h3 { font-size: var(--Font-size-22); margin-bottom: 0; font-weight: 700;}
.homeSolutions.lightBg .solutionsBox li { background-color: var(--white);}
.homeSolutions .solutionsBox li::before { content: ""; width: 100%; height: 0px; position: absolute; left: 0; bottom: 0; background-color: var(--white); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;  -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.homeSolutions .solutionsBox li:hover::before { height: 6px; background-color: var(--primary-color);}

/* 1 — #6546b2 */
.homeSolutions .solutionsBox li:nth-child(1) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(28%) saturate(2476%) hue-rotate(237deg) brightness(92%) contrast(96%);
}

/* 2 — #7b3aa6 */
.homeSolutions .solutionsBox li:nth-child(2) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(21%) sepia(58%) saturate(2292%) hue-rotate(267deg) brightness(88%) contrast(94%);
}

/* 3 — #aa218c */
.homeSolutions .solutionsBox li:nth-child(3) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(18%) sepia(75%) saturate(4321%) hue-rotate(289deg) brightness(89%) contrast(98%);
}

/* 4 — #e0046e */
.homeSolutions .solutionsBox li:nth-child(4) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(97%) saturate(5777%) hue-rotate(312deg) brightness(93%) contrast(103%);
}

/* 5 — #fa4661 */
.homeSolutions .solutionsBox li:nth-child(5) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(56%) sepia(63%) saturate(3664%) hue-rotate(329deg) brightness(104%) contrast(101%);
}

/* 6 — #f2691e */
.homeSolutions .solutionsBox li:nth-child(6) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(63%) sepia(72%) saturate(4869%) hue-rotate(11deg) brightness(101%) contrast(102%);
}

/* 7 — #d5c423 */
.homeSolutions .solutionsBox li:nth-child(7) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(79%) sepia(56%) saturate(1670%) hue-rotate(10deg) brightness(100%) contrast(98%);
}

/* 8 — #249f2e */
.homeSolutions .solutionsBox li:nth-child(8) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(49%) sepia(86%) saturate(932%) hue-rotate(83deg) brightness(93%) contrast(92%);
}

/* 9 — #1dbd9d */
.homeSolutions .solutionsBox li:nth-child(9) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(62%) sepia(29%) saturate(1976%) hue-rotate(128deg) brightness(90%) contrast(95%);
}

/* 10 — #1e3dc5 */
.homeSolutions .solutionsBox li:nth-child(10) .solutionCnt .icon img {
  filter: brightness(0) saturate(100%) invert(27%) sepia(80%) saturate(2272%) hue-rotate(213deg) brightness(88%) contrast(95%);
}





.blogList { width: 100%; display: flex; flex-wrap: wrap; gap: 30px;}
.blogList .blog { width: calc(33.33% - 20px) !important; height: 448px; position: relative;}

.blogList .blog .imgBox { clip-path: inset(0 0 144px 0); height: 100%; overflow: hidden; position: relative; transition: clip-path .2s cubic-bezier(.4, .2, .4, 1); border-radius: 10px;}
.blogList .blog:hover .imgBox { clip-path: inset(0 0 0 0);}
.blogList .blog .imgBox img { background-color: #f8f8f9; left: 50%; min-height: 100%; max-width: 100%; object-fit: cover; position: absolute; top: 50%; transform: translate(-50%,-50%); vertical-align: top; width: 100%; height: auto; aspect-ratio: auto 1024 / 623;}

.blogList .blog .imgBox .cat { position: absolute; z-index: 1; top: 20px; right: 20px; background-color: var(--white); line-height: normal; font-family: var(--font-family-heading); font-size: var(--Font-size-14); text-transform: uppercase; font-weight: 700; padding: 8px 16px; border-radius: 100px; background: linear-gradient(90deg,#6546B2 0%, #E8006A 50%, #F26B1D 100%); color: var(--white);}

.blogList .blog .blogMask { background-color: rgba(0,0,0,.64); bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; transition: opacity .2s cubic-bezier(.4, .2, .4, 1);}
.blogList .blog:hover .blogMask {opacity: 1;}
.blogList .blog .blogInfo { padding: 20px; position: absolute; bottom: 0; left: 0; right: 0; transition: color .2s cubic-bezier(.4, .2, .4, 1);}
.blogList .blog:hover .blogInfo a { color: #fff;}
.blogList .moreArrow { font-size: var(--Font-size-16); color: var(--primary-color);}
.blogList .moreArrow i { font-size: var(--Font-size-22); color: var(--secondary-color);}

.blogMainListPage .blogList .blog:nth-child(1) { width: calc(66.66% - 10px) !important;}
.blogMainListPage .blogList .blog { background-color: var(--bg-color-light); border-radius: 10px;}

/* Inner Banner */
/* .innerBanner {background-attachment: fixed; background-position: center right; background-size: cover; } */
.innerBanner::before {  background: linear-gradient(120deg,#220633 30%, #ed00c520 60%, #010c3d4a); opacity:.8;}
.innerBanner .cntBox { width: 100%; max-width: 768px;}
.innerBanner .cntBox label { font-family: var(--font-family-heading); font-size: var(--Font-size-16); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; color: var(--secondary-color); display: block; margin-bottom: 10px;}
.innerBanner .cntBox h1 { font-size: var(--Font-size-46); font-weight: 600; color: var(--white); margin-bottom: 20px;}
.innerBanner .cntBox p { font-weight: 500; font-size: var(--Font-size-20); color: var(--white); margin-bottom: 50px; display: block; }


.devService.no-carousel { display: flex; flex-wrap: wrap; gap: 20px;}
.devService.no-carousel .item { flex: 1 1 calc(33.33% - 20px);}
.devService.no-carousel .item { background-color: #fff; transition: background-color 1s ease-in-out; animation-duration: 15s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
.devService.no-carousel .item:first-child { animation-name: highlightFirst;}
.devService.no-carousel .item:nth-child(2) { animation-name: highlightSecond;}
.devService.no-carousel .item:last-child { animation-name: highlightLast;}

/* Keyframes */
@keyframes highlightFirst {
  0%, 33.333% { background-color: #F9F9F9; }
  33.334%, 100% { background-color: #fff; }
}

@keyframes highlightSecond {
  0%, 33.333% { background-color: #fff; }
  33.334%, 66.666% { background-color: #F9F9F9; }
  66.667%, 100% { background-color: #fff; }
}

@keyframes highlightLast {
  0%, 66.666% { background-color: #fff; }
  66.667%, 100% { background-color: #F9F9F9; }
}


.devService .item { padding: 100px 50px 50px 50px; min-height: 440px;}
.devService .item h3 { position: relative; padding-bottom: 20px; margin-bottom: 20px;}
.devService .item h3 span { display: block;}
.devService .item h3::before { content: ""; width: 150px; height: 2px; position: absolute; left: 0; bottom: 0; background: linear-gradient(90deg,#001525 0%, #FF7700 100%);}
/* Base reset for all items */
.devService .owl-item .item { background-color: transparent; transition: background-color 0.3s ease;}
.devService .owl-item.active > .item { background-color: #F9F9F9; border: 2px solid transparent;}
.devService .owl-item.active + .active > .item { background-color: transparent; border: none;}

.technologiesIcon { display: flex; flex-wrap: wrap; gap: 60px; justify-content: center;}
.technologiesIcon li { width: 62px;}



.caseStudyBox { display: flex; flex-wrap: wrap; gap: 20px;}

.caseStudy {flex: 1 1 calc(33.33% - 20px); padding: 50px; min-height: 500px; display: flex; align-items: center; position: relative; overflow: hidden; }
.caseStudy h3 { margin-bottom: 20px; padding-bottom: 20px; position: relative;}
.caseStudy p { font-weight: 500; margin-bottom: 0; transition: all 0.9s ease-in-out;}
.caseStudy h3::before { content: ""; width: 150px; height: 2px; background-color: var(--primary-color); position: absolute; left: 0; bottom: 2px; transition: all 0.5s ease-in-out;}
.caseStudy .cnt { position: relative; z-index: 2;}
.caseStudy .moreArrow { position: absolute; right: 30px; bottom: 30px; opacity: 0; z-index: 3;}
.caseStudy:hover .moreArrow { opacity: 1;}
.caseStudy img { display: none;}
.caseStudy .img { width: 100%; max-width: 100%; max-height: 100%; height: 100%; max-height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity .9s; opacity: 0;}
.caseStudy::before { content:""; width: 100%; max-width: 100%; max-height: 100%; height: 100%; max-height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: var(--primary-color); transition: opacity .9s; opacity: 0;}

.caseStudy.active::before,
.caseStudy:hover::before {opacity: 0.75;}
.caseStudy.active .img,
.caseStudy:hover .img {opacity: 1;}

.caseStudy.active a,
.caseStudy:hover a { color: var(--white);}
.caseStudy.active p,
.caseStudy:hover p { color: var(--white);}

.caseStudy.active h3::before,
.caseStudy:hover h3::before {background-color: var(--white); left: -50px;}

.fullwidthProcess { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; position: relative; gap: 12px; padding: 0 15px;}
.fullwidthProcess .processBox { width: calc(100% / 6 - 15px); flex: 1 auto; padding:25px; display: flex; flex-direction: column; background-color: var(--primary-color); border-radius: 10px; color: var(--text-secondary-color);}
.fullwidthProcess .processBox span { font-family: var(--font-family-heading); font-size: var(--Font-size-58); font-weight: 800; color:#43324d; display: block; line-height: normal; margin-bottom: 30px; transition: all 0.5s ease-in-out;}
.fullwidthProcess .processBox:hover span { color: var(--secondary-color);}
.fullwidthProcess .processBox label {  font-size: var(--Font-size-20); font-weight: 700; color: var(--secondary-color); display: block; line-height: normal; margin-bottom: 12px;}
.fullwidthProcess .processBox p { color: var(--text-secondary-color); margin-bottom: 0;}


.industrySolutions .imgBox img { display: none;}
.industrySolutions:has(.img1.active) .imgBox img.img1,
.industrySolutions:has(.img2.active) .imgBox img.img2,
.industrySolutions:has(.img3.active) .imgBox img.img3,
.industrySolutions:has(.img4.active) .imgBox img.img4,
.industrySolutions:has(.img5.active) .imgBox img.img5,
.industrySolutions:has(.img6.active) .imgBox img.img6,
.industrySolutions:has(.img7.active) .imgBox img.img7,
.industrySolutions:has(.img8.active) .imgBox img.img8,
.industrySolutions:has(.img9.active) .imgBox img.img9 { display: block;}


.featuresIconBox { display: flex; flex-wrap: wrap; gap: 30px;}
.featuresIconBox li { flex: 1 1 calc(33.33% - 20px); flex-wrap: wrap; gap: 20px; border: 1px solid #e3e3e3; background: #f5f5f5; border-radius: 10px; padding: 45px 35px 25px 35px;  transition: all 0.5s ease-in-out;}
.featuresIconBox li:hover { background-color: var(--white); border: 1px solid #d5d5d5; }
.featuresIconBox li span { display: block; margin-bottom: 20px;}
.featuresIconBox li p { margin-bottom: 0;}
.featuresIconBox h3 { position: relative; padding-bottom: 20px; margin-bottom: 20px; font-size: var(--Font-size-24); font-weight: 700;}
.featuresIconBox h3::before { content: ""; width: 150px; height: 2px; position: absolute; left: 0; bottom: 0; background: linear-gradient(90deg,#6546B2 0%, #E8006A 50%, #F26B1D 100%);  transition: all 0.5s ease-in-out;}
/* .featuresIconBox li:hover { border-color: var(--primary-color);} */
.featuresIconBox li:hover  h3::before { width: 70%; }
.featuresIconBox li .learnMore { margin-top: 20px;}

.featuresIconBox li img {
  filter: brightness(1) saturate(100%);
  transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.featuresIconBox li:hover img {
  filter: brightness(0) saturate(100%) invert(48%) sepia(92%) saturate(2846%) hue-rotate(1deg) brightness(101%) contrast(101%);
}
.featuresIconBox.col1 li { flex: 1 1 100%;}
.featuresIconBox.col2 li { flex: 1 1 calc(50% - 15px);}
.solutionServices h3 { padding: 0;}
.solutionServices h3::before { display: none;}
.solutionServices li { border-width: 1px 1px 6px 1px; background-color: var(--white); border-color: var(--white); padding: 45px 45px 35px 45px;}
.solutionServices li:nth-child(1) { border-color: #6546b2;}
.solutionServices li:nth-child(2) { border-color: #7b3aa6;}
.solutionServices li:nth-child(3) { border-color: #aa218c;}
.solutionServices li:nth-child(4) { border-color: #e0046e;}
.solutionServices li:nth-child(5) { border-color: #fa4661;}
.solutionServices li:nth-child(6) { border-color: #f2691e;}
.solutionServices li:nth-child(7) { border-color: #d5c423;}    /* cyan */
.solutionServices li:nth-child(8) { border-color: #249f2e;}    /* yellow */
.solutionServices li:nth-child(9) { border-color: #1dbd9d;}    /* green */
.solutionServices li:nth-child(10) { border-color: #1e3dc5;}   /* coral red */
.solutionServices li:hover { background-color: var(--white); border-width: 1px 1px 6px 1px; border-color: #d5d5d5;}

.industriesSlid .learnMore { padding: 0 20px;}


.industryBanner { height: calc(100vh - 100px); position: relative; overflow: hidden; background-color: transparent;}
.industryBanner .wrap-inner { position: relative; z-index: 2; align-items: center;}
.industryBanner::before { content: ""; width: 100%; height: 100%; min-height: 100%; max-height: 100%; position: absolute; left: 0; top: 0; z-index: 0; background: linear-gradient(125deg,#001525 35%, #00152500); opacity:.9;}
.industryBanner .bg-video { position: fixed; top:0%; left: 0%; z-index: -1; object-fit: cover; min-width: 100%; min-height: 100%; width: 100%; height: auto; /* transform: translate(0%, -40%); */}


.whatWeDoInd .imgBox {max-height: 95vh; position: sticky; top: 25px;}
.whatWeDoInd .smallService li { width: 100% !important;}


.ourStoryBox { display: flex; flex-wrap: wrap; gap: 20px;}
.ourStoryBox .cntBox ul  { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; position: relative; z-index: 1; margin-top: 25px;}
.ourStoryBox .cntBox ul li { width: 120px; border:1px solid #EAEAEA; border-radius: 10px;}



.decodeVideoKJ { margin: 0 auto; display:flex; gap: 40px; align-items: center; justify-content: center; flex-direction: column-reverse; }
.decodeVideoKJ .leftBox { width: 100%; max-width:1024px; background: #f6f9fd; padding: 12px; line-height: 0; border-radius: 5px; box-shadow: rgb(9, 80, 144, 0.15) 0px 25px 20px -20px; position: relative; z-index: 0;}
.decodeVideoKJ .leftBox:before {content:""; width:100px; height:100px; position:absolute; top:0; left:0; z-index: -1; /*-webkit-animation: 3s gear-rotate-left linear infinite; animation: 3s gear-rotate-left linear infinite;*/ 
 animation-name: vidBox; animation-duration: 10s; animation-iteration-count: infinite;}
.decodeVideoKJ .leftBox iframe { width: 100%; height:540px; border-radius: 2px;}
.decodeVideoKJ .rightBox { width: 100%; max-width:1024px; text-align: center;}
.decodeVideoKJ .rightBox h3 { margin-bottom:0;}

@keyframes vidBox {
  0%   {background-color:#ff2223; left:0px; top:0px; border-top-left-radius: 10px; }
  25%  {background-color:#009941; left:calc(100% - 100px); top:0px; border-top-right-radius: 10px; border-top-left-radius: 0px; border-bottom-right-radius: 0px;}
  50%  {background-color:#006db8; left:calc(100% - 100px); top:calc(100% - 100px); border-bottom-right-radius: 10px; border-top-right-radius: 0px; border-bottom-left-radius: 0px;}
  75%  {background-color:#feb100; left:0px; top:calc(100% - 100px); border-bottom-left-radius: 10px; border-bottom-right-radius: 0px; border-top-left-radius: 0px;}
  100% {background-color:#ff2223; left:0px; top:0px; border-top-left-radius: 10px;}
}
@media only screen and (max-width: 959px) {
    .decodeVideoKJ .leftBox iframe { height:460px;}
}
@media only screen and (max-width: 809px) {
    .decodeVideoKJ .leftBox iframe { height:440px;}
}
@media only screen and (max-width: 640px) {
    .decodeVideoKJ .leftBox iframe { height:280px;}
}
@media only screen and (max-width: 440px) {
    .decodeVideoKJ .leftBox {padding: 10px;}
    .decodeVideoKJ .leftBox iframe { height:220px;}
}


ul.ourTeam { width: 100%; float: left; list-style: none; padding: 0;}
ul.ourTeam li { width: calc(100% / 6); float: left; display: flex; padding: 5px;}
ul.ourTeam li .teamDtl { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 4px;}
ul.ourTeam li .teamDtl img { border-radius: 4px; transition: all ease 0.4s; transform: scale(1);}
ul.ourTeam li .teamDtl:hover img { transform: scale(1.05);}
ul.ourTeam li .teamDtl label { position: absolute; left: 15px; bottom: -30px; margin: 0; padding: 0; z-index: 2; transition: all ease 0.4s; color: white; font-size: 15px; font-weight: 400; letter-spacing: 1px; background: #1a1a1a; width: calc(100% - 30px); text-align: center; text-transform: uppercase; padding: 2px; border-top-right-radius: 4px; border-top-left-radius: 4px;}
ul.ourTeam li .teamDtl:hover label { bottom: 0px;}
ul.ourTeam li .teamDtl::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: #1a1a1a; border-radius: 4px; opacity: 0; z-index: 1; -webkit-transition-duration:0.5s; -moz-transition-duration:0.5s; -o-transition-duration: 0.5s; transition-duration:0.5s;}


.bannerCareers::before { background: linear-gradient(90deg,#001525 60%, #ed860040 50%, #00152525); opacity:.9;}
.bannerCareers.bannerImages { background-position: top right; background-size: auto; background-color: var(--primary-color);}

.jobBox { display: flex; flex-wrap: wrap; gap: 30px;}
.jobBox li { flex: 1 1 calc(25% - 30px); display: flex; flex-wrap: wrap; gap: 20px;  padding: 0;  transition: all 0.5s ease-in-out;}
.jobBox li a { flex: 1; flex-wrap: wrap; gap: 20px; border: 1px solid #dedede; padding: 45px 45px 65px 45px;  transition: all 0.5s ease-in-out; position: relative;}
.jobBox li span.position { position: absolute; top: 12px; right: 12px; background-color: var(--bg-color-light); font-size: var(--Font-size-14); line-height: normal; padding: 6px 16px; border-radius: 50px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;}
.jobBox li p { margin-bottom: 20px; color: var(--primary-color);}
.jobBox h3 { position: relative; margin-bottom: 15px; font-size: var(--Font-size-24); transition: all 0.5s ease-in-out; }
.jobBox li span.location { width: 100%; display: flex; align-items: center; gap: 10px; padding-top: 15px; border-top: 1px solid #dedede; color: var(--text-primary-color); position: absolute; bottom: 0; left: 0; padding: 15px 20px;}
.jobBox li span.location i { color: var(--primary-color); transition: all 0.5s ease-in-out; }

.jobBox li:hover a { border-color: #ddd; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;}
.jobBox li:hover h3 { color: var(--secondary-color);}
.jobBox li:hover span.location i { color: var(--secondary-color);}

.bannerCareers ul { list-style: none; margin: 0; padding: 0;}
.bannerCareers ul li { display: flex; list-style: none; margin: 10px 0;}
.bannerCareers ul li label { width: 134px; color: #999 !important; border-right: 1px solid #323232; text-transform: uppercase; letter-spacing: 1px; margin: 0 !important;}
.bannerCareers ul li span { color: var(--secondary-color); text-transform: uppercase; letter-spacing: 1px; padding-left: 15px; font-weight: 600; font-family: var(--font-family-heading);}


.caseStudiesMani { display: flex; flex-wrap: wrap; gap: 22px;}
a.caseStudiesItem {width: calc(33.33% - 15px); background-color: #f8f8f8; display: flex; flex-direction: column-reverse; position: relative; transition: none 0s ease 0s; overflow: hidden; justify-content: space-between; border-radius: 10px;}
a.caseStudiesItem .images {flex: 1 1 auto; min-height: 280px; max-height: 280px; overflow: hidden;}
a.caseStudiesItem .images img {max-width: 100%; min-height: 100%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 1s ease 0s !important;}
a.caseStudiesItem:hover .images img {transform: scale(1.1);}
a.caseStudiesItem .description {padding: 36px;}
a.caseStudiesItem .description p { color: var(--primary-color);}

a.caseStudiesItem:hover h3 { text-decoration: underline;}

a.caseStudiesItem:nth-child(4n+1) { width: 100%;}
a.caseStudiesItem:nth-child(4n+1) > * { width: 50%;}
a.caseStudiesItem:nth-child(8n+1) { background-color: var(--primary-color); flex-direction: row !important;}
a.caseStudiesItem:nth-child(4n+1) { background-color: var(--primary-color); flex-direction: row-reverse;}
a.caseStudiesItem:nth-child(4n+1) .description,
a.caseStudiesItem:nth-child(8n+1) .description { min-height: 380px; justify-content: center; display: flex; flex-direction: column;}
a.caseStudiesItem:nth-child(4n+1) .images,
a.caseStudiesItem:nth-child(8n+1) .images { min-height: 380px;}
a.caseStudiesItem:nth-child(4n+1) h3,
a.caseStudiesItem:nth-child(8n+1) h3 { color: var(--white);}
a.caseStudiesItem:nth-child(4n+1) p,
a.caseStudiesItem:nth-child(8n+1) p { color: var(--text-secondary-color);}

a.caseStudiesItem:nth-child(8n+3) { background-color: #fff; flex-direction: column; justify-content: flex-start;}

a.caseStudiesItem:nth-child(8n+7) { background-color: rgba(0,0,0,.8); flex-direction: column-reverse; overflow: hidden;}
a.caseStudiesItem:nth-child(8n+7) .images { filter: grayscale(100%); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; min-height: 100%; max-height: 100%;}
a.caseStudiesItem:nth-child(8n+7) .images img { will-change: unset !important; opacity: 0.3;}
a.caseStudiesItem:nth-child(8n+7) .description { position: relative; z-index: 1;}
a.caseStudiesItem:nth-child(8n+7) .description > * { color: var(--white);}


/* .caseStudiesItem {
  display: none !important;
  opacity: 0;
  transform: translateY(10px);
  transition: .4s ease-in-out;
}
.caseStudiesItem.show {
  display: flex !important;
  opacity: 1;
  transform: translateY(0);
} */


.caseStudiesFilters { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 15px; padding: 30px 0;}
.caseStudiesFilters button { border: 1px solid var(--text-primary-color); background-color: var(--white); padding: 8px 24px; margin: 0; outline: 0; color: var(--text-primary-color); line-height: normal; font-size: var(--Font-size-16); font-weight: 600; border-radius: 100px; transition: all 0.5s ease-in-out;}
.caseStudiesFilters button:hover,
.caseStudiesFilters button.active { border-color: var(--secondary-color); color: var(--secondary-color);}
.caseStudiesFilters select { outline: 0; width: 240px; background-color: var(--bg-color-light);}
.caseStudiesFilters select option { outline: 0; border: 0 none;}

.caseDtlBox { position: sticky; top: 0; z-index: 9; justify-content: normal; background-color: #efefef99; padding: 10px 0;
  backdrop-filter: blur(4px);         /* the blur effect */
  -webkit-backdrop-filter: blur(4px); /* Safari */}
.caseDtlBox .caseMenu { width: 100%; display: flex; justify-content: center; gap: 30px;}
.caseDtlBox .caseMenu a {color: var(--primary-color); text-transform: uppercase; font-size: var(--Font-size-16); font-weight: 600; letter-spacing: 1px; font-family: var(--font-family-heading);}
.caseDtlBox .caseMenu a:hover, .caseDtlBox .caseMenu a.active { color: var(--secondary-color);}


.blogTitBox .wrap-inner { background: linear-gradient(0deg, #fff, #f5f5f5); border-radius: 50px;}
.blogTitBox h1 { margin-bottom: 0;}
.blogTitBox .titleBox { padding: 50px 0 0px 0;}

.blogImgBox .wrap-inner-mid { position: relative;}
.blogImgBox img { width: 100%; height: 560px; object-fit: cover; border-radius: 30px;}
.blogImgBox .date { position: absolute; right: 30px; top: 20px; background-color: var(--white); border-radius: 50px; padding: 8px 22px; display: flex; align-items: center; gap: 10px; font-weight: 600;}
.blogImgBox .date i { color: var(--secondary-color);}
.blogImgBox .blogCategory { position: absolute; left: 30px; top: 20px;line-height: normal;
    font-family: var(--font-family-heading);
    font-size: var(--Font-size-14);
    text-transform: uppercase;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 100px;
    background: linear-gradient(90deg, #6546B2 0%, #E8006A 50%, #F26B1D 100%);
    color: var(--white);
    display: inline-block;}
.blogImgBox .blogCategory i { color: var(--secondary-color);}

.blogCntBox {padding-top: 50px; padding-bottom: 50px;}
.blogCntBox .date { padding: 0px 0px 12px 0px; display: flex; align-items: center; gap: 10px; font-weight: 600;}
.blogCntBox .date i { color: var(--secondary-color);}


.techWeUse .featuresIconBox {gap: 12PX;}
.techWeUse .featuresIconBox li { width: calc(100% / 6 - 15px); flex: 1 auto;}

.contactUsPage .wrap-inner { 
    /* max-width: calc(1570px + (100% - 1570px)/2); */
    max-width: 100%;
    padding-left: calc((100% - 1520px)/2);
}
/* .contactUsPage .leftCol { width: 100%; padding: 0 50px 0 0;}
.contactUsPage .rightCol { width: 100%; padding: 50PX; background-color: var(--bg-color-light); border-top-left-radius: 100px;}
.contactUsPage .contactDtl { width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; gap: 30px;}
.contactUsPage .contactDtl li { width: 100%; border: 1px solid var(--theme-color); padding: 40px; border-radius: 10px;} */

.contactUsPage .leftCol { width: 100%; padding: 0 0 0 0;}
.contactUsPage .rightCol { width: 100%; padding: 50PX; background-color: var(--bg-color-light); border-radius: 10px; margin-bottom: 30px;}
.contactUsPage .contactDtl { width: 100%; display: flex; flex-wrap: wrap; gap: 30px;}
.contactUsPage .contactDtl li { width: calc(50% - 15px); border: 1px solid var(--theme-color); padding: 40px; border-radius: 10px;}




/* .caseDetails .caseContact { width: 320px; height: 480px; display: flex; justify-content: center; align-items: center; background-color: #006db8; color: var(--white); position: sticky; top: 0; margin-left: calc((100%)/2); margin-bottom: -480PX;}

.caseDetails .wrap-inner { padding-right:360px;} */

.caseDetails { width: 100%;display: flex; flex-wrap: wrap; align-items: flex-start; gap: 60px;}
.caseDetails .caseLeft { width: calc(100% - 420px);}
.caseDetails .caseLeft .fullwidth {justify-content: flex-start; width: 100%; margin-bottom: 20px;}
.caseDetails .caseLeft h2 {font-size: var(--Font-size-28); background: linear-gradient(90deg, #6546B2, #E8006A, #F26B1D); -webkit-background-clip: text;  -webkit-text-fill-color: transparent;}
.caseDetails .caseLeft p {margin-bottom: 16px;}
.caseDetails .caseCta { width: 360px; height: auto; position: sticky; top: 80px; margin-bottom: 80px; background:var(--primary-color); padding: 40px; border-radius: 10px; color: var(--white);}
.caseDetails .caseCta h2 { font-size: var(--Font-size-28); font-weight: 600; color: var(--secondary-color); margin-bottom: 25px;}
.caseDetails .caseCta p { font-size: var(--Font-size-18); font-weight: 400; color: var(--white); margin-bottom: 35px; display: block;}
.caseBanner {background-color: var(--primary-color); padding: 60px 0;}
.caseBanner .caseBannerContnet{width: 100%; display: flex; align-items: center; gap: 60px;}
.caseBanner .caseBannerContnet .cntBox{width: calc(50% - 30px);}
.caseBanner .caseBannerContnet img{width: calc(50% - 30px); border-radius: 20px; object-fit: cover; height: 400px;}

 :root {
  --c1: #220633;
  --c2: #12236d;
  --c3: #010c3d;
  --c4: #193b51;
}

.caseBanner {
    animation: bannerColors 20s infinite; /* 5 colors × 5s each */
}

@keyframes bannerColors {
    0%   { background-color: var(--c1); }
    25%  { background-color: var(--c2); }
    50%  { background-color: var(--c3); }
    75%  { background-color: var(--c4); }
    100% { background-color: var(--c1); }
}


.pagination {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 100%;
}
.page-btn {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 4px;
    cursor: pointer;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.page-btn.active {
    background: #000;
    color: #fff;
}


.error-text {
    color: #ff4d4d;
    font-size: 14px;
    margin-top: 4px;
    display: block;
    padding-left: 12px;
}

.input-error {
    border-color: #ff4d4d !important;
}
.emailAddress {color: var(--secondary-color); font-weight: 600;}