@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Space+Grotesk:wght@300..700&display=swap');

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

:root{
    --font-family :"Inter", sans-serif ;
    --font-family-heading: "Space Grotesk", sans-serif;

    --primary-color: #001525;
    --secondary-color: #FF7700;
    --text-primary-color: #707070;
    --text-secondary-color: #e2e2e2;

    --bg-color:#F4F5F0;
    --bg-color-light:#F7F7F7;
    --bg-color-dark:#001525;

    --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:26px; font-weight:400;}

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-44); font-weight:600; color:var(--primary-color); 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(--textColorLight); font-size: var(--Fonts-size-16);}
::-moz-placeholder { color:var(--textColorLight); font-size: var(--Fonts-size-16);}
:-ms-input-placeholder { color:var(--textColorLight); font-size:  var(--Fonts-size-16);}
::placeholder { color:var(--textColorLight); font-size:  var(--Font-size-16);}

::-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;}
.cForm li p { width:100%; margin-bottom: 0px;}
.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-20); 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(--secondary-color); padding: 12px 26px; border-radius: 50px; 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(--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;}

/*================================================ 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:1440px; 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(--bg-color-dark);}


@-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;}


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

.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:15px; text-transform: uppercase; color: var(--primary-color); font-weight: 600; letter-spacing: 2px; 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: 50px; 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); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;}
.nav-links a:hover::before {transform: scaleX(1);}

.submenu { width: 100%; display: none; position: absolute; left: 0; top: 0; background: var(--white); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 20px; min-width: 220px; z-index: 100; padding-top: 75px;}

/* .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: 500; letter-spacing: 2px; position: relative; padding-left: 16px; }
.header .submenu label::before { content: ""; width: 8px; height: 8px; border-radius: 100%; background-color: var(--secondary-color); position: absolute; left: 0; top: 9px;}

/* Services Menu */
.header .servicesMenu .submenu { padding:75px 0 0 0;}
.header .servicesMenu .submenu .solutionsBox { width: 25%; padding: 30px 50px; background-color: #f5f5f5;}
.header .servicesMenu .submenu .servicesBox { width: 100%; padding:10px 50px 30px 50px; display: flex; }
.header .servicesMenu .submenu .zohoBox { width: 25%; padding: 30px 50px; background-color: var(--primary-color); position: relative;}

.header .servicesMenu .submenu .solutionsBox ul li { padding: 4px 0;}

.header .servicesMenu .submenu .servicesBox ul { width: 100%; display: flex; flex-wrap: wrap;}
.header .servicesMenu .submenu .servicesBox ul li { width: calc(100% / 3); display: flex; padding: 8px 40px 8px 0;}
.header .servicesMenu .submenu .servicesBox ul li a { width: 100%; display: flex; flex-direction: column;}
.header .servicesMenu .submenu .servicesBox ul:last-child { float: right;}
.header .servicesMenu .submenu .servicesBox span { display: inline-block; font-size: var(--Font-size-16); line-height: 22px; color: var(--text-primary-color); margin-top: 5px; font-weight: 400;}

.header .servicesMenu .submenu .zohoBox label { color: var(--text-secondary-color);}
.header .servicesMenu .submenu .zohoBox ul li { padding: 10px 0;}
.header .servicesMenu .submenu .zohoBox ul li img { width: 112px;}
.header .servicesMenu .submenu .zohoBox ul li a { color: var(--text-secondary-color);}
.header .servicesMenu .submenu .zohoBox ul li a:hover { color: var(--secondary-color);}
.header .servicesMenu .submenu .zohoBox ul li a span { display: block; font-size: var(--Font-size-14); margin-top: 5px; line-height: normal;}
.header .servicesMenu .submenu .zohoBox ul li a:hover span { color: var(--text-secondary-color);} 
.header .servicesMenu .submenu .zohoBox ul.logoBox { background: var(--white); width: calc(100% - 20px); margin-left: -40px; bottom: 10px; position: absolute; display: flex;}
.header .servicesMenu .submenu .zohoBox ul.logoBox li { width: 33.33%; display: flex; justify-content: center; align-items: center;}
/* Services Menu */

/* Technologies Menu */
.header .technologiesMenu .submenu {padding: 75px 0 0 0; width: 100%; }
.header .technologiesMenu .submenu .imagesBox { width: 40%; /* margin-top: -75px;  */ max-height: 100%; min-height: 100%; background-image: url(../images/menu/technologies.webp); background-size: cover; background-repeat: no-repeat; background-position: center;} 
.header .technologiesMenu .submenu .menuBox { width: 15%; padding: 30px 50px;}
/* Technologies Menu */

/* Industries Menu */
.header .industriesMenu .submenu { padding: 75px 0 0 0; width: 100%; justify-content: space-between; }
.header .industriesMenu .submenu .menuBox { width: 100%; max-width: 1024px; padding: 30px 50px; }
.header .industriesMenu .submenu .menuBox ul { width: 100%; display: flex; flex-wrap: wrap;}
.header .industriesMenu .submenu .menuBox ul li { width: 33.33%;}

.header .industriesMenu .submenu .imagesBox { width: calc(100% - 1080px); /* margin-top: -75px;  */ max-height: 100%; min-height: 100%; background-image: url(../images/menu/technologies.webp); background-size: cover; background-repeat: no-repeat; background-position: center;}

.industriesMenu .submenu:has(.healthcare:hover) .imagesBox { background-image: url("../images/menu/healthcare.webp"); }
.industriesMenu .submenu:has(.finance:hover) .imagesBox { background-image: url("../images/menu/finance.webp"); }
.industriesMenu .submenu:has(.manufacturing:hover) .imagesBox { background-image: url("../images/menu/manufacturing.webp"); }
.industriesMenu .submenu:has(.retail:hover) .imagesBox { background-image: url("../images/menu/retail.webp"); }
.industriesMenu .submenu:has(.insurance:hover) .imagesBox { background-image: url("../images/menu/insurance.webp"); }
.industriesMenu .submenu:has(.software-hi-tech:hover) .imagesBox { background-image: url("../images/menu/software-hi-tech.webp"); }
.industriesMenu .submenu:has(.fintech:hover) .imagesBox { background-image: url("../images/menu/fintech.webp"); }
.industriesMenu .submenu:has(.energy:hover) .imagesBox { background-image: url("../images/menu/energy.webp"); }
.industriesMenu .submenu:has(.government:hover) .imagesBox { background-image: url("../images/menu/government.webp"); }
.industriesMenu .submenu:has(.hospitality:hover) .imagesBox { background-image: url("../images/menu/hospitality.webp"); }
.industriesMenu .submenu:has(.logistics:hover) .imagesBox { background-image: url("../images/menu/logistics.webp"); }
.industriesMenu .submenu:has(.automotive:hover) .imagesBox { background-image: url("../images/menu/automotive.webp"); }
.industriesMenu .submenu:has(.media-entertainment:hover) .imagesBox { background-image: url("../images/menu/media-entertainment.webp"); }
.industriesMenu .submenu:has(.banking-financial:hover) .imagesBox { background-image: url("../images/menu/banking-financial.webp"); }
/* Industries Menu */

/* Solutions Menu */
.header .solutionsMenu .submenu .imagesBox { width: calc(100% - 1080px);  background-image: url(../images/menu/solutions.webp);}
.header .solutionsMenu .submenu .menuBox {max-width: 1170px; }
.header .solutionsMenu .submenu .menuBox ul li { margin-bottom: 5px;}
/* Solutions Menu */

/* Zoho Menu */
.header .zohoMenu .submenu .imagesBox { width: calc(100% - 1080px);  background-image: none; background-color: #f5f5f5; font-family: var(--font-family-heading); font-size: var(--Font-size-26); font-weight: 600; padding: 36px 62px; display: flex; align-items: center; justify-content: center; line-height: normal; color: var(--primary-color);}
.header .zohoMenu .submenu .menuBox {max-width: 1170px; }
.header .zohoMenu .submenu .menuBox ul li { margin-bottom: 5px; padding: 0 20px;}
.header .zohoMenu .submenu .menuBox ul li a { display: flex; flex-direction: column;}
.header .zohoMenu span { display: inline-block; font-size: var(--Font-size-16); line-height: 22px; color: var(--text-primary-color); margin-top: 8px; font-weight: 400;}
/* .zohoMenu .submenu:has(ul li:nth-child(1):hover) .imagesBox { background-image: url("../images/zoho/creator.svg");}
.zohoMenu .submenu:has(ul li:nth-child(2):hover) .imagesBox { background-image: url("../images/zoho/crm.svg");}
.zohoMenu .submenu:has(ul li:nth-child(3):hover) .imagesBox { background-image: url("../images/zoho/one.svg");} */
/* Zoho Menu */

/* Product Menu */
.header .productsMenu .submenu { padding: 75px 0 0 0; width: 100%; }
.header .productsMenu .submenu .menuBox { width: 33.33%; padding: 30px 50px;}
.header .productsMenu .submenu .menuBox.productsLink { display: none;}

.header .productsMenu .submenu .menuBox.LogiTrac360Box { background-color:var(--primary-color); color: var(--text-secondary-color);} 
.header .productsMenu .submenu .menuBox.RaycatcherBox { background-color: var(--bg-color-light);}

.header .productsMenu .submenu .menuBox a { font-size: var(--Font-size-20); font-family: var(--font-family-heading); font-weight: 600; display: inline-block; margin-bottom: 10px; color: var(--secondary-color);}
.header .productsMenu .submenu .menuBox div { font-size: var(--Font-size-26);  font-weight: 600; display: inline-block; margin-bottom: 20px; line-height: normal;}
.header .productsMenu .submenu .menuBox a.explore { font-size: var(--Font-size-16); margin-bottom: 0px; color: var(--primary-color); }

.header .productsMenu .submenu .menuBox.LogiTrac360Box a.explore { color: var(--text-secondary-color);}
.header .productsMenu .submenu .menuBox.LogiTrac360Box div { color: var(--white);}
.header .productsMenu .submenu .menuBox.RaycatcherBox div { color: var(--primary-color);}
.header .productsMenu .submenu .menuBox.cDetailBox div { color: var(--primary-color);}
/* Product Menu */

/* Company Menu */
.header .companyMenu .submenu { padding: 75px 0 0 0; width: 100%; }
.header .companyMenu .submenu .menuBox { width: 30%; padding: 30px 50px;}

.header .companyMenu .submenu .menuBox.certifiedBox { background-image: url(../images/about.webp); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; overflow: hidden;}
.header .companyMenu .submenu .menuBox.certifiedBox::before { content: ""; width: 100%; max-width: 100%; min-height: 100%; position: absolute; left: 0; top: 0; opacity: 0.9; background: linear-gradient(45deg,#001525, #012d51, #001525, #1d1701, #001525); background-size: 300% 300%; -webkit-animation: AnimationName 20s ease infinite; -moz-animation: AnimationName 20s ease infinite; animation: AnimationName 20s ease infinite; z-index: 0;}
.header .companyMenu .submenu .menuBox.certifiedBox label { position: relative; z-index: 1; color: var(--white);}
.header .companyMenu .submenu .menuBox.certifiedBox ul { width: 100%; display: flex; flex-wrap: wrap; gap: 20px; position: relative; z-index: 1; margin-top: 25px;}
.header .companyMenu .submenu .menuBox.certifiedBox ul li { width: 120px;}

.header .companyMenu .submenu .succeedBox { width: 40%; border-right: 1px solid #ddd; border-top: 1px solid #ddd;}
.header .companyMenu .submenu .succeedBox div { font-family: var(--font-family-heading); color: var(--primary-color); font-size: var(--Font-size-26);  font-weight: 600; display: inline-block; margin-bottom: 10px; line-height: normal;}
.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(--primary-color); font-size: var(--Font-size-16); font-weight: 600; background-color: #f5f5f5; 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 { border-top: 1px solid #ddd;}
/* 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); padding: 40px; border-radius: 5px 5px 0 0;}
.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 #0F2F47;}
.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; align-items: flex-start; gap: 60px; }
.twoColBox .colTwo { width: calc(50% - 30px); position: sticky; top: 25px;}
.twoColBox .imgBox img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px;} 
.twoColBox:has(.imgBox) .cntBox { padding: 30px 0;}
.twoColBox .imgBox img.fixed { height: calc(100vh - 50px);} 


/* Accordion */
.accordion { width: 100%; display: flex; flex-wrap: wrap;}
.accordion li { width: 100%; margin: 1px 0; border-top: 1px solid transparent; background-color: #fff; -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-top-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-42); margin-bottom: 15px;}
.contactBox p { color: var(--secondary-color); font-family: var(--font-family-heading); font-size: var(--Font-size-24); margin-bottom: 0; line-height: normal;}
.contactBox .btn:hover { background-color: var(--white);}
.contactBox h2.small { font-size: var(--Font-size-36);}
.contactBox .cnt { width:100%; max-width:1150px;}

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

/* Banner */
.bannerImages { background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover; 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: 100%; max-width: 768px; margin-bottom: 0;}
.titleBox p { width: 100%; max-width: 1024px; margin-bottom: 0; font-weight: 500;}
.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: 100%;}
.titleBox:has(p) h2 { margin-bottom: 15px;}



/* Home Banner */
.homeBanner.bannerImages { background-position: center center; background-size: cover; background-color: #001525;}
.homeBanner::before {  background: linear-gradient(120deg,#001525 35%, #ed860070 55%, #00152505); opacity:.85;}
.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: calc(100% - 540px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 20px;}
.homeCounter ul li { width: calc(33.33% - 22.22px); display: flex; flex-wrap: wrap; background-color: #EBEDE7; padding: 40px 25px 25px; }
.homeCounter ul li .count { width: 100%; font-family: var(--font-family-heading); font-size: var(--Font-size-38); font-weight: 800; line-height: normal; color: var(--secondary-color);}
.homeCounter ul li label { font-family: var(--font-family-heading); color: var(--primary-color); font-weight: 600; display: block; margin-top: 5px;}


.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 img { display: none;}
.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: 50px; min-height: 500px; display: flex; align-items: center; position: relative; overflow: hidden;}
.industries h3 { margin-bottom: 20px; padding-bottom: 20px; position: relative;}
.industries p { font-weight: 500; margin-bottom: 0;}
.industries h3::before { content: ""; width: 150px; height: 2px; background-color: var(--primary-color); position: absolute; left: 0; bottom: 2px;}
.industries .cnt { position: relative; z-index: 1;}
.industries .moreArrow { position: fixed; right: 30px; bottom: 30px; opacity: 0;}
.industries:hover .moreArrow { opacity: 1;}

.owl-carousel .owl-item.active-center .industries h3 a { color: var(--white);}
.owl-carousel .owl-item.active-center .industries h3 a:hover { color: var(--secondary-color);}
.owl-carousel .owl-item.active-center .industries .moreArrow { opacity: 1;}
.owl-carousel .owl-item.active-center .industries .moreArrow:hover { color: var(--white);}
.owl-carousel .owl-item.active-center .industries h3::before { background-color: var(--white); left: -50px;}
.owl-carousel .owl-item.active-center .industries p { color: var(--text-secondary-color);}

.homeIndustries { position: relative;}
.homeIndustries .owl-carousel .owl-nav { position: absolute; width: auto; top: -80px; right: 0;}


.homeTestimonials ul { display: flex; flex-wrap: wrap; gap: 30px;}
.homeTestimonials ul li { width: calc(33.33% - 20px); padding: 50px; background-color: #EBEDE7;  -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.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; min-height:105px;}
.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;}


.accordionSolutions { width: 100%; display: flex; flex-wrap: wrap;}
.accordionSolutions li { width: 100%; border-top: 1px solid #EBEDE7; border-bottom: 1px solid transparent; background-color: #fff; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.accordionSolutions li:last-child { width: 100%; border-bottom: 1px solid #EBEDE7;}
.accordionSolutions li .acclink { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding:25px 50px; cursor: pointer;}
.accordionSolutions li .acclink h3 { width: 375px; 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;}
.accordionSolutions li:hover .acclink h3 { color: var(--secondary-color);}
.accordionSolutions li .acclink div { width: calc(100% - 410px); font-size: var(--Font-size-20); color: #525252; font-weight: 500;}
.accordionSolutions li .accord-detail { width: 100%; padding: 0 75px 25px 435px;}
.accordionSolutions li .accord-detail a { display: inline-block; margin-top: 5px;}
.accordionSolutions li .accord-detail p { margin-bottom: 0;}
.accordionSolutions li:has(.active) { border-top-color: var(--secondary-color);}


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

.bolgList .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: 5px;}
.bolgList .blog:hover .imgBox { clip-path: inset(0 0 0 0);}
.bolgList .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;}

.bolgList .blog .imgBox .cat { position: absolute; z-index: 1; top: 20px; right: 20px; background-color: var(--white); line-height: normal; font-family: var(--white); font-size: var(--Font-size-14); text-transform: uppercase; font-weight: 600; padding: 8px 16px; border-radius: 100px;}

.bolgList .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);}
.bolgList .blog:hover .blogMask {opacity: 1;}
.bolgList .blog .blogInfo { padding: 20px; position: absolute; bottom: 0; left: 0; right: 0; transition: color .2s cubic-bezier(.4, .2, .4, 1);}
.bolgList .blog:hover .blogInfo a { color: #fff;}
.bolgList .moreArrow { font-size: var(--Font-size-16); color: var(--primary-color);}
.bolgList .moreArrow i { font-size: var(--Font-size-22); color: var(--secondary-color);}


/* Inner Banner */
.innerBanner::before { background: linear-gradient(90deg,#001525 25%, #ed860040 50%, #00152525); opacity:.8;}
.innerBanner .cntBox { width: 100%; max-width: 750px;}
.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: 0; display: block; }

.innerBanner.solutionsBanner,
.innerBanner.servicesBanner {background-position: top right; background-size: auto; background-color:#001525;}
.innerBanner.technologyBanner {background-position: center right; background-size: auto; background-attachment: inherit;  background-color:#040e31;}

.technologyBanner.innerBanner::before { background: linear-gradient(90deg,#001525 25%, #ed860005 50%, #00152525); opacity:.8;}

.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: space-around; position: relative; }
.fullwidthProcess .processBox { width: calc(100% / 6); padding:0 25px 0 25px; display: flex; flex-direction: column;}
.fullwidthProcess .processBox span { font-family: var(--font-family-heading); font-size: var(--Font-size-42); font-weight: 700; color: #D9D9D9; 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-family: var(--font-family-heading); font-size: var(--Font-size-20); font-weight: 500; color: var(--primary-color); display: block; line-height: normal; margin-bottom: 12px;}
.fullwidthProcess .processBox p { margin-bottom: 0;}
.fullwidthProcess::before { content: ""; width: 100%; height: 2px;position: absolute; left: 0; top: 62px; background-color: #001525; 
  background: linear-gradient(90deg,#001525, #FF7700); background-size: 300% 300%; -webkit-animation: AnimationName 20s ease infinite; -moz-animation: AnimationName 20s ease infinite; animation: AnimationName 20s ease infinite;}


.industrySolutions .imgBox img { display: none;}
.industrySolutions:has(.img1) .imgBox img.img1,
.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;}


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

.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 #EAEAEA; padding: 45px;  transition: all 0.5s ease-in-out;}
.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);}
.featuresIconBox h3::before { content: ""; width: 150px; height: 2px; position: absolute; left: 0; bottom: 0; background: linear-gradient(90deg,#001525 0%, #FF7700 100%);  transition: all 0.5s ease-in-out;}
/* .featuresIconBox li:hover { border-color: var(--primary-color);} */
.featuresIconBox li:hover  h3::before { left: -45px; background: linear-gradient(90deg,#FF7700 0%, #001525 100%);}


.featuresIconBox li img {
  /* filter: brightness(85%) saturate(100%) invert(50%) sepia(32%) saturate(100%) hue-rotate(195deg) contrast(110%); */
  filter: brightness(95%) saturate(120%) invert(45%) sepia(10%) saturate(300%) hue-rotate(190deg) contrast(95%);

  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%);
}


.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: 3px;}
a.caseStudiesItem {width: calc(33.33% - 2px); background-color: #f8f8f8; display: flex; flex-direction: column-reverse; position: relative; transition: none 0s ease 0s; overflow: hidden; justify-content: space-between;}
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; 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);}


.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);}



.ourOffices { width: 100%; display: flex; flex-wrap: wrap; gap: 30px;}
.ourOffices li { width: calc(25% - 30px); flex-wrap: wrap; gap: 20px; border: 1px solid #EAEAEA; padding: 45px;  transition: all 0.5s ease-in-out;}
.ourOffices li span { display: block; margin-bottom: 20px;}
.ourOffices li p { margin-bottom: 0;}
.ourOffices h3 { position: relative; padding-bottom: 20px; margin-bottom: 20px; font-size: var(--Font-size-24); color: var(--white);}
.ourOffices h4 { font-weight: 600; font-size: var(--Font-size-22);}
.ourOffices h3::before { content: ""; width: 150px; height: 2px; position: absolute; left: 0; bottom: 0; background: linear-gradient(90deg,#001525 0%, #FF7700 100%);  transition: all 0.5s ease-in-out;}
.ourOffices li:hover  h3::before { left: -45px; background: linear-gradient(90deg,#FF7700 0%, #001525 100%);}

.ourOffices li .imgBox { width: calc(100% + 88px); margin: -44px -44px -50px -44px; height: 220px;}
.ourOffices li .imgBox img { width: 100%; height: 100%; object-fit: cover;}

.featuresIconBox.contact p { margin-bottom: 30px; min-height: 80px;}
.featuresIconBox.contact i { font-size: 32px; color: var(--secondary-color);}

.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.6); display: none; justify-content: center; align-items: center; z-index: 9999; }
.popupContent { background: #fff; padding: 25px; width: 400px; max-height: 90%; border-radius: 10px; overflow-y: scroll; position: relative; }
.closePopup { position: absolute; top: 8px; right: 10px; font-size: 22px; cursor: pointer;}
.popupContent .headerPop { width: 100%; display: flex;}
.popupContent .headerPop h4 { width: calc(100% + 100px); text-align: center; font-size: var(--Font-size-24); font-weight: 600; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-top: -10px; margin-bottom: 25px; margin-left: -25px; margin-right: -25px;}

.popupContent::-webkit-scrollbar {
  display: none;
}


.popupContent.letsTalkPopup { background: none;  max-width: 960px; width: 100%; display: flex; flex-wrap: wrap; padding: 0;}
.letsTalkPopup .letsTalkImg { width:560px; background-color: var(--bg-color-light); display: flex; align-items: center; padding: 20px;}
.letsTalkPopup .letsTalkForm { width:400px; background-color:#fff; padding: 30px 25px;}

/* Blog */
.blgoBanner { padding: 80px 0 100px 0; position: relative; background-size: cover; background-position: center center; background-image: url(../images/banner/blogs.jpg);}

.blgoBanner .titleBox { margin-bottom: 0; text-align: center; color: var(--white);}
.blgoBanner .titleBox p { width: 100%; max-width: 100%; margin-bottom: 0;  text-align: center;}
.blgoBanner .titleBox h1 { color: var(--white);}
.blgoBanner .titleBox h1:has(span) { font-size: 18px; color: var(--secondary-color);}
.blgoBanner .titleBox h1:has(span) span { width: 100%; display: block; font-size: 52px; color: var(--white);}

/********** Post List  **********/
ul.postList { width: calc(100% + 30px); float: left; margin: 0 0 0 -15px; display: flex; flex-wrap: wrap;}
ul.postList li { width: calc(100% / 3); float: left; padding: 15px; }
ul.postList li .post-block { width: 100%; height: 100%; float: left; background: #f5f5f5; border-radius: 10px;}
ul.postList li .post-block .post-thumbnail { width: 100%; float: left; position: relative;  margin-bottom: 20px;}
ul.postList li .post-block .post-thumbnail a {position:relative; transition:.3s ease-in; display:block; overflow:hidden; border-radius: 10px;}
ul.postList li .post-block .post-thumbnail a img {width:100%; transition:.35s ease-in; display:block; overflow:hidden; object-fit:cover; border-radius: 10px;}
ul.postList li .post-block:hover .post-thumbnail a img {transform: scale(1.05);}
ul.postList li .post-block .post-thumbnail img { height: 300px;}
ul.postList li .post-block .post-content { width: 100%; float: left; padding: 0 25px;}
ul.postList li .post-block .post-category { display: block; font-size: 15px; color:#ff9c00; font-weight: 500; margin-bottom: 5px;}
ul.postList li .post-block .post-category a {color: #ff9c00;}
ul.postList li .post-block .post-category a:hover {color: #0f4bb9;}
ul.postList li .post-block .post-title { display: block; font-size: 28px; font-weight: 500;}
ul.postList li .post-block .post-title a { color: #222; padding-bottom: 4px;
  background: linear-gradient(to right,currentColor 0,currentColor 100%); background-position-x: 0%; background-position-y: 0%; background-repeat: repeat; background-size: auto; background-size: 0 1px; background-repeat: no-repeat; background-position: left 87%; display: inline;}
ul.postList li .post-block .post-title a:hover { background-size: 100% 1px; display: inline;}
ul.postList li .post-block .post-excerpt { display: block;}
ul.postList li .post-block .post-date { display: block;}
ul.postList li .post-block .post-excerpt a.more-link { display: none;}


/* Post Details */
.postDetails { padding: 50px 0 0 0;
  background: rgb(255,255,255);
  background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 75%, rgba(240, 244, 249,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,1) 75%, rgba(240, 244, 249,1) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,1) 75%, rgba(240, 244, 249,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#f0f4f9",GradientType=1);   
}

.postDetails .post-featured-image { width: 100%; float: left; position: relative; transition:.3s ease-in; display:block; overflow:hidden;}
.postDetails .post-featured-image img {width:100%; height: 520px; transition:.35s ease-in; display:block; overflow:hidden; object-fit:cover;}
.postDetails .post-featured-image:hover img {transform: scale(1.05);}
.postDetails .post-title { width: 100%; display: block; padding:0 30px 30px 30px;}
.postDetails .post-title .entry-title { font-size: var(--Font-size-46); color: var(--primary-color);}
.postDetails .post-category { display: block;  color: var(--secondary-color); font-weight: 500; margin-bottom: 5px;}
.postDetails .post-category a { display: inline-block; color: var(--secondary-color); font-weight: 500; margin-left: 12px;}
.postDetails .post-category a:hover { color: var(--primary-color);}
.postDetails .post-category a:first-child { margin-left: 0px;}
.postDetails .post-category ul { display: flex;}
.postDetails .post-category ul li { margin-right: 10px;}
.postDetails .post-category ul li a { display: block;  color: var(--mColor); font-weight: 500;}
.postDetails .post-content { width: 100%; float: left; padding: 30px 30px 0 30px;}
.postDetails .post-date { width: 100%; float: left; color: #222; font-weight: 500; margin-bottom: 20px;}
.postDetails .post-text { width: 100%; float: left;}
.postDetails .post-text h2 { font-size: 34px; display: block;}
.postDetails .post-text h3 { font-size: 26px; display: block; margin-bottom: 15px; font-weight: 500;}
.postDetails .post-text h4 { font-size: 24px; display: block; margin-bottom: 15px;}
.postDetails .post-text b { color: #222;}
.postDetails .post-text p span { color: #222;}
.postDetails .post-text a { color: #222; text-decoration: underline;}
.postDetails .post-text a:hover { color: #ff9c00;}
.postDetails .post-text ul.list { margin-bottom: 20px; display: block;}
.postDetails .post-text .imagesBox { margin-bottom: 25px;}
.postDetails .post-text .imagesBox img { width: 100%; border-radius: 5px;}
.postDetails .post-text .full-img { display: block;}
.postDetails .post-text .left-img { display: flex; flex-wrap: wrap; align-items: center;}
.postDetails .post-text .left-img .images { width: 50%;}
.postDetails .post-text .left-img .cnt { width: 50%; padding-left: 40px; }
.postDetails .post-text .right-img { display: flex; flex-wrap: wrap; align-items: center; flex-direction: row-reverse;}
.postDetails .post-text .right-img .images { width: 50%;}
.postDetails .post-text .right-img .cnt { width: 50%; padding-right: 40px; }

.categoryBoxBlog { padding: 30px 0;}
.categoryBoxBlog .categoryList { width: 100%; display: flex; flex-wrap: wrap; justify-content: center;}
.categoryBoxBlog .categoryList li { padding: 5px;}
.categoryBoxBlog .categoryList .cat-box { display: block;}
.categoryBoxBlog .categoryList .cat-box a { display: block; background: #f0f4f9; padding: 8px 20px; border-radius: 50px; font-weight: 500;}

.postDetails .post-tags { width: 100%; display: flex; gap: 10px; align-items: center; padding:0 30px;}
.postDetails .navigation { width: 100%; display: flex; gap: 20px; align-items: center; justify-content: space-between; padding:15px 30px 0 30px;}

@media only screen and (max-width: 1279px) {
  ul.postList li { width: calc(100% / 2); }
}
@media only screen and (max-width: 768px) {
  .postDetails .post-title .entry-title { font-size: 42px;}
  .postDetails .post-text h2 { font-size: 26px;}
  .postDetails .post-text h3 { font-size: 22px;}
  .postDetails .post-text h4 { font-size: 20px;}
}
@media only screen and (max-width: 767px) {
  ul.postList li { width: 100%; }

  .postDetails .post-text .left-img .images,
  .postDetails .post-text .right-img .images { width: 100%;}
  .postDetails .post-text .left-img .cnt,  
  .postDetails .post-text .right-img .cnt { width:100%; padding-right: 0px; padding-left: 0px; padding-top: 30px;}
}
@media only screen and (max-width: 480px) {
  .postDetails .post-title .entry-title { font-size: 32px;}
  .postDetails .post-content { padding: 30px 10px;}
}


.thankYou { display:flex; flex-wrap: wrap; justify-content: center; flex-direction: column; text-align: center; gap: 10px;width: 100%;}
.thankYou .icoBox {font-size: 42px; color: #ff8100;}