/*

TemplateMo 568 DigiMedia

https://templatemo.com/tm-568-digimedia

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 16px;
  line-height: 30px;
  font-weight: 300;
  color: #706e6e;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #4100d8;
  color: #fff !important;
}

::-moz-selection {
  background: #4100d8;
  color: #fff !important;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.page-section {
  margin-top: 120px;
}


.section-heading {
  position: relative;
  z-index: 2;
}


.section-heading h6 {
  font-size: 15px;
  font-weight: 700;
  color: #296dff;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.section-heading h4 {
  /* color: #2a2a2a;
  background: linear-gradient(to right, #00f2fe, #4facfe, #235aa6); */
  background: linear-gradient(to right, #ff0080, #7928ca, #2af598);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 25px;
}

.section-heading h4 em {
  font-style: normal;
  color: #fe664e;
}

.section-heading .line-dec {
  width: 50px;
  height: 2px;
  
  background-color: #fe664e;
}

/* 1) Apply the gradient to the text's own width */
.section-heading h4 {
  display: inline-block;          
  margin: 0 auto 25px;         
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  background: linear-gradient(90deg, #ff0080 0%, #7928ca 45%, #0a4bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}


/* .border-first-button a {
  display: inline-block !important;
  padding: 2px 20px !important;
  color: #fe664e !important;
  border: 1px solid #fe664e !important;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.border-first-button a:hover {
  background-color: #fe664e;
  color: #fff !important;
} */

.border-first-button a {
  display: inline-block;             /* keep inline-block */
  padding: 0px 25px !important;     /* adjust padding for vertical/horizontal centering */
  line-height: 2;                     /* ensures vertical centering */
  color: #f8f8f8 !important;
  border: 1px solid #f7e5e2 !important;
  border-radius: 20px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  text-align: center;                 /* center text horizontally */
  transition: all 0.5s;
  min-width: 120px;                   /* optional: fixed width for uniform buttons */
}

.border-first-button a:hover {
  background: #4c09b9;
  color: #fff !important;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.pre-header {
  background-color: #efefef;
  height: 60px;
  padding: 15px 0px;
}

.pre-header ul li {
  display: inline-block;
}

.pre-header ul.info li {
  margin-right: 45px;
}

.pre-header ul.info li a {
  color: #afafaf;
  font-size: 14px;
  transition: all .3s;
}

.pre-header ul.info li a:hover {
  color: #fe664e;
}

.pre-header ul.info li a i {
  font-size: 18px;
  margin-right: 8px;
}

.pre-header ul.social-media {
  text-align: right;
}

.pre-header ul.social-media li {
  margin-left: 5px;
}

.pre-header ul.social-media li a {
  background-color: #afafaf;
  color: #fff;
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  font-size: 14px;
  transition: all .3s;
}

.pre-header ul.social-media li a:hover {
  background-color: #6f00ff;
}

.background-header {
  background-color: #fff!important;
  height: 80px!important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

/* .background-header .main-nav .nav li:hover a {
  color: #fe664e;
} */

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fe664e;
  content: '';
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  /* background: linear-gradient(to right, #ffffff, #0f2027, #203a43, #2c5364);  */
  /* background: linear-gradient(to right, #ffffff, #6a11cb, #2575fc); */
 
  /* background: linear-gradient(to right, #ffffff, #8e2de2, #4a00e0, #00c6ff); */
  /* background: linear-gradient(to right, #ffffff, #f7ebfb, #6706de, #340cae); */
  /* background: linear-gradient(135deg,  #ffffff, #e4e0f3fa, #0c038a, #073479 ); */
  /* fallback */
  /* background-color: #FFFFFF; */
  /* gradient */
  background: linear-gradient(
    to right,
    #FFFFFF 0%,
    #FFFFFF 25%,   /* solid white through 40% */
    #029df7 55%,   /* start fading to blue */
    #0059ff 80%,
    #0331af 100%
  );


  /* background: linear-gradient(to right, #ffffff, #f7ebfb, #0072ff, #4a00e0); */
  
  

  box-shadow: 0px 5px 8px rgba(61, 145, 255, 0.566);
  position: fixed;
  left: 0px;
  right: 0px;
  z-index: 1000;
  height: 120px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}


.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo {
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 80px;
}


/*DEEEEEEEEEELETDED from here*/
.background-header .main-nav .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 20px;
  padding-right: 20px;
}



.header-area .main-nav .nav li a {
  display: block;
  font-weight: 600;
  font-size: 20px;
  color: #eff5f0;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}


/* Only top-level menu items */
.header-area .main-nav .nav > li:hover > a,
.header-area .main-nav .nav > li > a.active {
  color: #040200 !important;  /* main menu color */
}


.header-area .main-nav .nav li.submenu:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 5px;
  color: #2a2a2a;
  position: absolute;
  right: 18px;
  top: 12px;
}

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}


.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #2a2a2a;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #6f00ff;
}









@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}



/* @media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
} */



/* 
---------------------------------------------
New sub menu code START
--------------------------------------------- 
*/

/* Submenu container */
.nav li .submenu {
  display: none;
  position: absolute;
  /* background: linear-gradient(-90deg, #0003c2, #4970ff); */
  background: linear-gradient(
  to right,

  #029df7 15%,   /* start fading to blue */
  #0059ff 60%,
  #0331af 100%
  );


  list-style: none;
  /* box-shadow: 0 4px 15px rgba(0,0,0,0.2); */
  border-radius: 8px;         /* rounded rectangle */
  z-index: 999;
  min-width: auto;            /* adjust width */
}

/* Show submenu on hover */
.nav li:hover .submenu {
  display: block;
}

/* Submenu items */
.nav li .submenu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li .submenu li a {
  display: block;
  font-size: 2px;             /* uniform font size */
  text-decoration: none;
  text-align: left;            /* left-align text */
  transition: all 0.3s ease;   /* smooth hover */
  border-radius: 10px;           
}


.nav li .submenu li a:hover {
  background-color: #0236f3;
  color: #6f00ff;
  padding-left: 25px;         
} 

/* Submenu links - separate color */
.nav li .submenu li a {
  color: #333;                 /* normal submenu color */
}

.nav li .submenu li a:hover {
  color: #fff;                 /* submenu hover color */
  background: linear-gradient(90deg, #0003c2, #4970ff);
}

.header-area .main-nav .nav li ul.submenu li a {
  font-size: 17px ;
  /* readable */

}




/* 
---------------------------------------------
New sub menu code END
--------------------------------------------- 
*/

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #006eff;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #006eff;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 200px 0px 20px 0px;
  /* ensure the hero has height */
  min-height: 70vh; /* or 100vh */
}

#banner-animation {
  position: absolute;
  inset: 0;
  z-index: 1;          /* back */
}

.main-banner .container {
  position: relative;
  z-index: 3;          /* front (text) */
}

.main-banner::after {
  content: "";
  position: absolute;
  inset: 0;            /* <-- fills full area (top/right/bottom/left = 0) */
  background: url(../images/footer-bg-v17.webp) no-repeat center / cover;
  z-index: 0;          /* middle (above animation, below text) */
  pointer-events: none;
}








.main-banner:before {
  content: '';
  background-image: url(../images/slider-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 60px;
  width: 1159px;
  height: 750px;
  z-index: -1;
}

.main-banner .left-content {
  margin-right: 15px;
}

/* .main-banner .left-content h6 {
  text-transform: capitalize;
  font-size: 20px;
  font-weight: 700;
  color: #4e60fe;
  margin-bottom: 15px;
  text-transform: uppercase;
} */

.main-banner .left-content h6 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;

  /* Gradient text */
  /* background: linear-gradient(to right, #00c6ff, #0072ff, #4a00e0); */
  /* background: linear-gradient(to right, #00f2fe, #4facfe, #235aa6); */
  /* background: linear-gradient(to right, #ff0080, #7928ca, #2af598); */
  background: linear-gradient(90deg, #fff, #e6f7ff, #aeebff);
  background: linear-gradient(90deg, #1c03ad, #5309ff, #fa00a7);


  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}



/* Logo size */
.logo img {
  width: 200px;   /* adjust the size as needed */
  height: auto;   /* maintain aspect ratio */
  max-width: 100%; /* optional, for responsiveness */
}
.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  font-size: 50px;
  background: linear-gradient(90deg, #fff, #e6f7ff, #aeebff);



  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
}

.main-banner .left-content p {
  margin-bottom: 30px;
  margin-right: 45px;
  color: #0f172a;
}

.main-banner .right-image {
  text-align: right;
  position: relative;
  z-index: 20;
}

.main-banner .right-image img {
  max-width: 593px;
}



/* 
---------------------------------------------
About Style
--------------------------------------------- 
*/

#about {
  padding-top: 100px;
}

.about-left-image img {
  margin-right: 45px;
}

.about-right-content p {
  margin-top: 30px;
  margin-bottom: 45px;
}

.skills-content {
  position: relative;
  z-index: 1;
  margin-top: -50px;
  background-color: #f5f5f5;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
  padding: 110px 0px 50px 0px;
}

.skill-item {
  text-align: center;
}

.progress {
  width: 150px;
  height: 150px;
  line-height: 150px;
  background: none;
  margin: 0 auto;
  box-shadow: none;
  position: relative;
}
.progress:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
}
.progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.progress .progress-left {
  left: 0;
}
.progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 5px;
  border-style: solid;
  position: absolute;
  top: 0;
  border-color: #fd6a54;
}

.first-skill-item .progress .progress-bar {
  border-color: #fe664e;
}

.second-skill-item .progress .progress-bar {
  border-color: #726ae3;
}

.third-skill-item .progress .progress-bar {
  border-color: #f58b56;
}

.progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 75px;
  border-bottom-right-radius: 75px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right {
  right: 0;
}
.progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 75px;
  border-bottom-left-radius: 75px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.progress .progress-value {
  text-align: center;
  color: #2a2a2a;
  display: flex;
  width: 100%;
  border-radius: 50%;
  font-size: 35px;
  text-align: center;
  line-height: 25px;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-weight: 700;
}
.progress .progress-value div {
  margin-top: 10px;
}
.progress .progress-value span {
  font-size: 18px;
  text-transform: none;
  color: #afafaf;
  font-weight: 300;
}

/* This for loop creates the  necessary css animation names 
Due to the split circle of progress-left and progress right, we must use the animations on each side. 
*/
.progress[data-percentage="10"] .progress-right .progress-bar {
  animation: loading-1 1.5s linear forwards;
}
.progress[data-percentage="10"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="20"] .progress-right .progress-bar {
  animation: loading-2 1.5s linear forwards;
}
.progress[data-percentage="20"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="30"] .progress-right .progress-bar {
  animation: loading-3 1.5s linear forwards;
}
.progress[data-percentage="30"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="40"] .progress-right .progress-bar {
  animation: loading-4 1.5s linear forwards;
}
.progress[data-percentage="40"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="50"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="50"] .progress-left .progress-bar {
  animation: 0;
}

.progress[data-percentage="60"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="60"] .progress-left .progress-bar {
  animation: loading-1 1.5s linear forwards 1.5s;
}

.progress[data-percentage="70"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="70"] .progress-left .progress-bar {
  animation: loading-2 1.5s linear forwards 1.5s;
}

.progress[data-percentage="80"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="80"] .progress-left .progress-bar {
  animation: loading-3 1.5s linear forwards 1.5s;
}

.progress[data-percentage="90"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="90"] .progress-left .progress-bar {
  animation: loading-4 1.5s linear forwards 1.5s;
}

.progress[data-percentage="100"] .progress-right .progress-bar {
  animation: loading-5 1.5s linear forwards;
}
.progress[data-percentage="100"] .progress-left .progress-bar {
  animation: loading-5 1.5s linear forwards 1.5s;
}

@keyframes loading-1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(36);
    transform: rotate(36deg);
  }
}
@keyframes loading-2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(72);
    transform: rotate(72deg);
  }
}
@keyframes loading-3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(108);
    transform: rotate(108deg);
  }
}
@keyframes loading-4 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(144);
    transform: rotate(144deg);
  }
}
@keyframes loading-5 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180);
    transform: rotate(180deg);
  }
}
.progress {
  margin-bottom: 1em;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services {
  padding-top: 100px;
  position: relative;
}

.services:after {
  content: '';
  background-image: url(../images/services-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 786px;
  height: 1217px;
  z-index: 0;
}

.services:before {
  content: '';
  background-image: url(../images/services-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 400px;
  width: 161px;
  height: 413px;
  z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 30px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

.services .naccs {
  position: relative;
  z-index: 1;
}

.services .icon {
  display: block;
  text-align: center;
  margin: 0 auto;
}

.services .naccs .menu div h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  width: 100%;
}

.services .icon img {
  margin-bottom: 10px;
  max-width: 60px;
  min-width: 60px;
}

/* .services .naccs .menu {
  text-align: center;
  margin-bottom: 30px;
}

.services .naccs .menu div {
  color: #2a2a2a;
  margin: 0px;
  width: 15%;
  font-size: 20px;
  font-weight: 700;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 15px;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services .naccs .menu div .thumb {
  display: inline-block;
  width: 100%;
  padding: 30px 0px;
  background-color: #fff;
} */

/* Active menu item */
.services .naccs .menu div.active .thumb {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  background-color: #f0f0f0; /* optional highlight for active */
}

/* Make menu vertical */
.services .naccs .menu {
  display: flex;
  flex-direction: column; /* stack items vertically */
  gap: 15px; /* spacing between menu items */
  text-align: left;
  margin-bottom: 0;
}

/* Menu item container */
.services .naccs .menu div {
  width: 100%;
  display: block;
  cursor: pointer;
}

/* Menu item box */
.services .naccs .menu div .thumb {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 12px;
  min-height: 80px; /* ensures consistent height */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-size: 18px;       /* control text size */
  font-size: 16px;
  font-weight: 600;    /* optional: boldness */
}

/* Hover effect */
.services .naccs .menu div .thumb:hover {
  background-color: #e9f7e7;
  /* background: linear-gradient(to right, #00f2fe, #4facfe, #235aa6); */
  /* background: linear-gradient(to right, #f5d9e7, #7928ca, #2a60f5); */
  transform: translateY(-3px);
}

/* Icon inside menu item */
.services .naccs .menu div .thumb img {
  margin-right: 15px; /* space between icon and text */
  width: 40px;        /* icon width */
  height: auto;       /* keep aspect ratio */
}






.services ul.nacc {
  height: 100% !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* .services ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.services ul.nacc li.active {
  transition-delay: 0.3s;
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 15px;
  padding: 80px 120px 50px 120px;
}

.services ul.nacc li {
  width: 100%;
} */


.services ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  width: 100%;
}

.services ul.nacc li.active {
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 15px;
  padding: 50px 30px; /* <- reduced */
}

.services ul.nacc li .row {
  margin: 0; /* make the row full width */
}








.services ul.nacc li .right-image img {
  max-width: 1420px;
  float: right;
}

.services .nacc .thumb h4 {
  color: #2a2a2a;
  font-size: 20px;
  font-weight: 700;
  line-height: 35px;
  margin-bottom: 25px;
}

.services .nacc .thumb .main-white-button {
  text-align: right;
  margin-top: 40px;
}

.services .nacc .thumb .main-white-button a {
  background-color: #8d99af;
  color: #fff;
}

.services .nacc .thumb .main-white-button a i {
  background-color: #fff;
  color: #8d99af;
}

.services .left-text h4 {
  font-size: 20px;
  font-weight: 700;
  color: #fe664e !important;
}

.services .left-text p {
  margin-bottom: 30px;
}

.nacc .ticks-list span {
  display: inline-block;
  opacity: 1;
  margin-right: 45px;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 400;
}



/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.our-client {
  /* background-image: url(../images/footer-bg-v15.jpg); */
  /* background:
    radial-gradient(1900px 500px at -10% 1%, rgba(0, 60, 255, 0.144), transparent 55%),
    radial-gradient(1800px 450px at 90% 0%, rgba(170, 242, 252, 0.623), transparent 55%),
    radial-gradient(600px 300px at 50% 130%, rgba(5, 30, 248, 0.349), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f5ffff 70%); */

  background:
  radial-gradient(800px 500px at -10% 10%, rgba(121, 203, 250, 0.6), transparent 60%),
  radial-gradient(700px 400px at 100% 0%, rgba(135, 245, 221, 0.5), transparent 60%),
  radial-gradient(600px 300px at 50% 120%, rgba(248, 234, 245, 0.4), transparent 70%),
  linear-gradient(180deg, #fafbfc 0%, #d0eaffaf 100%);

  /* background-repeat: no-repeat;
  background-position: center center; */
  background-size: cover;
  padding: 120px 0 50px 0;  /* top:120px, bottom:60px */
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 100px;
  margin-bottom: -50px;
  
}

.our-client .section-heading {
  margin-bottom: 60px;
  margin-top: -90px;
}

.our-client .section-heading h6,
.our-client .section-heading h4 {
  color: #0051ff;
}

.our-client .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fe664e;
}



.our-client form {
  background-color: #fff;
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.our-client form input {
  width: 100%;
  margin-top: 20px;
  margin-left: 30px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
  height: 40px;
  background-color: transparent;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  z-index: 2;
  outline: none;
}

.our-client form button {
  width: 100%;
  height: 80px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  outline: none;
  border: none;
  margin-left: 30px;
  background-color: #fe664e;
  font-size: 15px;
  color: #fff;
}


/* 
---------------------------------------------
Portfolio
--------------------------------------------- 
*/

.our-portfolio {
  padding-top: 100px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  /* margin-bottom: 60px; */
}


.portfolio-filters {
  position: relative;
  z-index: 10;   
  margin-bottom:40px; 
  margin-top: -60px;        /* ensure they always stay above backgrounds */
}
.portfolio-card,
.portfolio-card .overlay{
  position: relative;
  z-index: 10;   
  margin-bottom:60px;         /* ensure they always stay above backgrounds */
}

.our-portfolio:before {
  content: '';
  background-image: url(../images/portfolio-right-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0px;
  width: 414px;
  height: 861px;
  z-index: 0;
}

.our-portfolio:after {
  content: '';
  background-image: url(../images/portfolio-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 677px;
  height: 759px;
  z-index: -1;
}

.our-portfolio .section-heading {
  margin-bottom: 80px;
}

.our-portfolio .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  position: relative;
  z-index: 2;
}

.our-portfolio .item {
  position: relative;
  z-index: 222;
}

.portfolio-item {
  border-radius: 25px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  margin: 15px;
}

.portfolio-item .thumb {
  position: relative;
  border-radius: 50px;
}

.portfolio-item:hover .down-content h4,
.portfolio-item:hover .down-content span {
  color: #fe664e;
}

.portfolio-item .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
  overflow: hidden;
}

.portfolio-item .down-content {
  background-color: #fff;
  text-align: center;
  padding: 18px 0px;
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
}

.portfolio-item .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-bottom: 8px;
  transition: all .3s;
}

.portfolio-item .down-content span {
  font-size: 15px;
  color: #afafaf;
  transition: all .3s;
}

.our-portfolio .owl-nav {
  display: inline-block!important;
  position: absolute;
  top: -125px;
  right: 15%;
  max-width: 1320px;
}

.our-portfolio .owl-nav .owl-next {
  margin-left: 10px;
}

.our-portfolio .owl-nav span {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  font-size: 30px;
  background-color: #eee;
  border-radius: 50%;
  color: #fff;
  transition: all 0.5s;
}

.our-portfolio .owl-nav span:hover {
  color: #fff;
  background-color: #fe664e;
}


/* 
---------------------------------------------
Blog
--------------------------------------------- 
*/

.blog:before {
  content: '';
  background-image: url(../images/blog-left-dec.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0px;
  width: 961px;
  height: 1020px;
  z-index: 0;
}

.blog {
  position: relative;
  padding-top: 85px;
}

.blog .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.blog .section-heading .line-dec {
  margin: 0 auto;
}

.blog-post {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 25px;
}

.show-up {
  position: relative;
  z-index: 200;
}

.blog-post .thumb {
  height: 320px;           /* adjust to taste */
  overflow: hidden;
  border-radius: 12px;     /* matches your style */
}

.blog-post .thumb img {
  border-top-right-radius: 23px;
  border-top-left-radius: 23px;
}


#blog .blog-posts .post-item .thumb {
  height: 120px;  
  width:  250px;         /* pick a height you like */
  overflow: hidden;
  border-radius: 12px;
  background: #f5f6fb;
}
#blog .blog-posts .post-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}



.blog-post .down-content {
  border-bottom-right-radius: 23px;
  border-bottom-left-radius: 23px;
  background-color: #fff;
  padding: 30px;
}

.blog-post .down-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #006eff;
  border-radius: 18px;
  display: inline-block;
}

.blog-post .down-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.blog-post .down-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}

.blog-post .down-content p {
  margin-bottom: 30px;
}

.blog-post .down-content span.author {
  font-size: 15px;
  color: #2a2a2a;
}

.blog-post .down-content span.author img {
  max-width: 46px;
  border-radius: 50%;
  margin-right: 15px;
  
}

.blog-post .down-content .border-first-button {
  display: inline-block;
  float: right;
  
}


.blog-posts {
  margin-left: 30px;
}

.post-item {
  margin-bottom: 10px;
}

.last-post-item {
  margin-bottom: 0px;
}

.post-item .thumb {
  display: inline-block;
  float: left;
  margin-right: 30px;
}

.post-item .thumb img {
  border-radius: 23px;
  display: inline-block;
}

.post-item .right-content {
  padding-top: 0px;
}

.post-item .right-content span.category {
  font-size: 15px;
  color: #fff;
  padding: 8px 12px;
  background-color: #006eff;
  border-radius: 18px;
  display: inline-block;
}

.post-item .right-content span.date {
  font-size: 15px;
  color: #afafaf;
  text-align: right;
  float: right;
  margin-top: 4px;
}

.post-item .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  color: #2a2a2a;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 30px;
}

/* === Blog Section Overrides === */
#featured-post .border-first-button a,
#blog-list .border-first-button a {
  background-color: #007bff;   /* Blue background */
  border-color: #007bff;       /* Match border if any */
  color: #fff;                 /* White text */
}

#featured-post .border-first-button a:hover,
#blog-list .border-first-button a:hover {
  background-color: #6f00ff;   /* Darker blue on hover */
  border-color: #0056b3;
}


/* === Make left and right columns the same height on desktop === */
@media (min-width: 992px) {
  /* let the columns stretch to equal height */
  #blog .row > [class*="col-lg-6"] { display: flex; }

  /* make the inner wrappers fill their column */
  #blog #featured-post,
  #blog .blog-posts {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* featured card fills the column height */
  #blog #featured-post .blog-post,
  #blog #featured-post { height: 100%; }

  /* right column: stack items without extra whitespace eating height */
  #blog .blog-posts .row#blog-list {
    display: flex;
    flex-direction: column;
    gap: 16px;                 /* control the vertical gap between items */
    margin: 0;                 /* remove bootstrap row negative margins impact */
  }

  /* remove any theme margins that add extra space */
  #blog .blog-posts .post-item { margin: 0; }
  #blog .blog-posts .post-item.last-post-item { margin-bottom: 0; }

  /* optional: keep list compact by limiting excerpt lines */
  #blog .blog-posts .post-item p {
    display: -webkit-box;
    -webkit-line-clamp: 2;     /* show 2 lines max */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
  }
}

/* keep the right-list images uniform (so item heights are consistent) */
#blog .blog-posts .post-item .thumb {
  width: 260px;
  height: 150px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f6fb;
}
#blog .blog-posts .post-item .thumb img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; object-position: center;
  display: block;
}

/* mobile tweaks: reduce gaps a bit as well */
@media (max-width: 991.98px) {
  #blog .blog-posts .row#blog-list { gap: 2px; }
}




/* 
---------------------------------------------
contact
--------------------------------------------- 
*/

.contact-us {
  padding-top: 100px;
}

.contact-us .section-heading .line-dec {
  margin: 0 auto;
}

.contact-us .section-heading {
  text-align: center;
  margin-bottom: 20px;
}



form#contact:before {
  background-image: url(../images/contact-top-right-v2.png);
  position: absolute;
  right: 0;
  top: 0;
  width: 726px;
  height: 78px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

.contact-dec img {
  max-width: 224px;
  position: absolute;
  right: 25px;
  top: -242px;
}

form#contact:after {
  background-image: url(../images/contact-bottom-right-v2.png);
  position: absolute;
  right: 0;
  bottom: 0;
  width: 532px;
  height: 106px;
  background-repeat: no-repeat;
  content: '';
  z-index: 1;
}

form#contact {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  position: relative;
  background-color: #fff;
  border-radius: 23px;
  text-align: center;
}

form#contact #map iframe {
  border-top-left-radius: 23px;
  border-bottom-left-radius: 23px;
  margin-bottom: -7px;
  position: relative;
  z-index: 2;
}

.fill-form {
  padding: 80px 60px 80px 30px;
}

.fill-form .info-post {
  margin-bottom: 20px;
}

.fill-form .icon {
  text-align: center;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  border-radius: 23px;
  padding: 25px 15px;
}

.fill-form .icon img {
  max-width: 60px;
  display: block;
  margin: 0 auto;
}

.fill-form .icon a {
  margin-top: 15px;
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: #2a2a2a;
  transition: all .3s;
}

.fill-form .icon:hover a {
  color: #fe664e;
}

form#contact input {
  width: 100%;
  height: 46px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 0px 20px;
  border-radius: 23px;
  margin-top: 30px;
}

form#contact input::placeholder {
  color: #aaa;
}

form#contact textarea {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  max-height: 200px;
  min-height: 200px;
  height: 200px;
  border-radius: 23px;
  background-color: transparent;
  border: 1px solid #eee;
  outline: none;
  font-size: 15px;
  font-weight: 300;
  color: #2a2a2a;
  padding: 15px 20px;
  margin-top: 30px;
}

form#contact textarea::placeholder {
  color: #aaa;
}

form#contact button {
  display: inline-block;
  background-color: #fff;
  font-size: 15px;
  font-weight: 400;
  color: #fe664e;
  margin-top: 10px;
  width: 100%;
  text-transform: capitalize;
  padding: 12px 25px;
  border-radius: 23px;
  letter-spacing: 0.25px;
  border: 1px solid #fe664e;
  transition: all .3s;
  outline: none;
}

form#contact button:hover {
  background-color: #fe664e!important;
  color: #fff!important;
}











/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-image: url(../images/footer-bg-v17.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 50px;
  padding-top: 0px;
}

footer p {
  text-align: center;
  margin: 20px 0px;
  color: #fff;
}

footer p a {
  color: #fff;
  transition: all .5s;
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 992px) {
  form#contact {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
    padding: 200px 0px 40px 0px;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;;
  }
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
  }
  .service-item .icon {
    margin-top: 0px;
    margin-bottom: 30px;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 70px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin: 0px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div  {
    font-size: 0px;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .our-client form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .our-client form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 30px;
  }
  .post-item .thumb img {
    max-width: 140px;
  }
  .post-item .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
}
@media (max-width: 767px) {
  #blog .blog-posts .featured-post .thumb img,
  #blog .blog-posts .post-item .thumb img {
    object-fit: contain;
  }
}

/* --- Uncrop blog images in this section only --- */

/* 3) Beat the mobile rules that cap width or re-crop */
@media (max-width: 767px) {
  #blog .blog-posts .featured-post .thumb img,
  #blog-list .post-item .thumb img {
    max-width: none !important;   /* override the theme’s 140px cap */
  }
}
/* ==== Mobile banner text adjustments ==== */
@media (max-width: 767px) {
  /* target the banner heading */
  .main-banner h2 {
    font-size: 32px !important;     /* smaller font on mobile */
    line-height: 1.4;
    text-align: center;             /* center the text */
    margin: 0 auto 12px;            /* add slight spacing below */
  }

  /* target the paragraph under it */
  .main-banner p {
    font-size: 15px !important;     /* smaller body text */
    line-height: 1.6;
    text-align: center !important;             /* center align with heading */
    margin: 0 auto 0px !important; 
    max-width: 90%;                 /* optional: limit line length for better readability */
    padding-bottom: 20px;
  }

  /* center the buttons under it, if desired */
  .main-banner .border-first-button {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}



/* Main menu only (not submenu) */
.header-area .main-nav .nav > li > a:hover,
.header-area .main-nav .nav > li > a.active {
  color: #011b13 !important; /* main menu color */
}

/* Scrolled state */
.background-header .main-nav .nav > li > a:hover,
.background-header .main-nav .nav > li > a.active {
  color: #000503 !important;
}

/* Submenu links have their own color */
.nav li .submenu li a {
  color: #333; /* normal */
}

.nav li .submenu li a:hover {
  color: #fff; /* on hover */
  /* background: linear-gradient(90deg, #7410aa, #0f267b); */
  background: linear-gradient(90deg, #0003c2, #4970ff);
}



/* Common Service Banner Style */

/* .service-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 120px 0; 
  max-height: 500px;
  color: #fff;
  transition: background 0.5s ease-in-out;
} */


:root { --header-h: 80px; } 

.service-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  color: #fff;

  /* fluid vertical spacing */
  padding-block: clamp(100px, 10vh, 110px) clamp(40px, 8vh, 18px);

  /* let the banner be tall enough for its content, but not huge */
  min-height: clamp(380px, 55vh, 520px);

  /* keep the lottie fully inside the banner */
  overflow: hidden;

  /* ensure its own stacking context (helps with any pseudo glows, etc.) */
  isolation: isolate;
}

/* Gradient text for service titles */
.service-banner .left-content h6 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;

  background: linear-gradient(to right, #ff0080, #7928ca, #2af598);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtitle */
.service-banner .left-text h4 {
  font-size: 24px;
  color: #ffffff;
  margin-bottom: 15px;
}

/* Description */
.service-banner .left-text p {
  font-size: 18px;
  color: rgb(248, 246, 248);
  line-height: 1.5;
}

/* Right Animation Container */
.service-banner .right-animation {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* Ensure Lottie fills container */
#service-lottie {
  width: 100%;
  height: 100%;
  max-width: 400px; /* optional */
  max-height: 400px; /* optional */
}


/* Individual Service Banner Images */
.it-automation-banner {
  background-image: url("../images/iot_solution_5.jpg");
}

.data-security-banner {
  background-image: url("../images/footer-bg-v11.jpg");
}


.iot-device-banner {
  background-image: url("../images/iot_solution_2.jpg");
}


.it-solution-banner {
  background-image: url("../images/iot_solution_3.jpg");
}


.automation-banner {
  background-image: url("../images/iot_solution_5.jpg");
}

.coming-soon-banner {
  background-image: url("../images/coming_soon.jpg");
}



/* Center columns vertically on desktop */
.service-banner .row { align-items: center; }

/* Gradient text (make it fluid) */
.service-banner .left-content h6 {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;

  background: linear-gradient(to right, #ff0080, #7928ca, #2af598);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Keep the Lottie *inside* the banner */
.service-banner .right-animation {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.service-banner .right-animation lottie-player {
  width: min(420px, 90%);
  height: auto;           /* let width control size */
  max-height: 70%;        /* never exceed the banner */
}


@media (max-width: 992px) {
  .service-banner {
    /* extra top padding so the title doesn’t sit under the fixed header */
    padding-top: calc(50px + var(--header-h));
    padding-bottom: 0px;
    max-height: min(1800px, calc(10svh - …))
  }
  .service-banner .left-content h6 { font-size: 60px; }
  .service-banner .left-text h4 { font-size: 20px; }
  .service-banner .left-text p  { font-size: 16px; }
  .service-banner .right-animation { margin-top: 16px; }
}




.company_profile-banner .left-content h6 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;

  /* Gradient text */
  /* background: linear-gradient(to right, #00c6ff, #0072ff, #4a00e0); */
  /* background: linear-gradient(to right, #00f2fe, #4facfe, #235aa6); */
  background: linear-gradient(to right, #ff0080, #7928ca, #2af598);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.company_profile-banner {
  position: relative;
  background: url("../images/company_profile.jpg") no-repeat right top;
  background-size: cover;
  padding: 120px 0; /* controls spacing top/bottom */
  min-height: 400px; /* adjust height */
  color: #fff; /* default text color */
}

.mission_vission {
  padding-top: 80px;
  overflow: hidden;
  position: relative;
}

.mission_vission .left-content h6 {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 15px;
  text-transform: uppercase;

  /* Gradient text */
  /* background: linear-gradient(to right, #00c6ff, #0072ff, #4a00e0); */
  /* background: linear-gradient(to right, #00f2fe, #4facfe, #235aa6); */
  background: linear-gradient(to right, #ff0080, #7928ca, #2af598);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}



.menu-vertical-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 500px;
  overflow-y: auto;
  background: #fff;                /* white background */
  border-radius: 12px;             /* rounded corners */
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* subtle shadow */
  padding: 10px 0;    
  
  border: 1px solid #ddd;
  padding: 5px 0;
  position: sticky;
  top: 100px;
  z-index: 10;
}

.menu-vertical {
  display: flex;
  flex-direction: column;
}

.menu-item {
  padding: 10px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #eee;
  transition: background 0.3s, color 0.3s;
}

.menu-item.active {
  /* background: linear-gradient(90deg, #7410aa, #0f267b); */
  background: linear-gradient(90deg, #0003c2, #4970ff);
  color: #fff;
}










.menu-icon img {
  width: 24px;
  height: 24px;
}


.menu-arrow {
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 0;
}

#services {
  position: relative;
  overflow: visible; /* important so menu is not clipped */
}

.service-content {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 2;
  background-color: #fff;  /* interior stays white */
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: visible; /* allow halo to show outside */
}

/* Gradient halo behind the box */
.service-content::before {
  content: "";
  position: absolute;
  inset: -3px; /* how far the halo spreads */
  border-radius: 14px; /* slightly larger than the box */
  z-index: 0; /* behind card */
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 210, 255, 0.7) 0%,
    rgba(0, 123, 255, 0.55) 20%,
    rgba(117, 43, 255, 0.5) 40%,
    rgba(164, 130, 255, 0.45) 55%,
    rgba(0, 255, 183, 0.35) 70%,
    rgba(0, 183, 255, 0.25) 85%,
    rgba(0, 208, 255, 0.575) 100%
  );
  filter: blur(8px);
  transition: opacity .25s ease;
}

/* White mask to protect card interior */
.service-content::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background-color: #fff; /* same as card */
  z-index: 1; /* above halo but below content */
  pointer-events: none;
}

/* Reveal halo on hover */
.service-content:hover::before,
.service-content:focus-within::before {
  opacity: 1;
}

/* Optional: subtle lift on hover */
.service-content:hover,
.service-content:focus-within {
  transform: translateY(-2px);
}



.service-text {
  padding-right: 15px;
  z-index: 9;
  
}

.ticks-list {
  margin-top: 10px;
}

.ticks-list span {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.ticks-list i {
  color: green;
  margin-right: 5px;
}


#services .service-text h4 {
  font-size: 28px;         
  color: #7410aa;          
  font-weight: 700;        
  margin-bottom: 15px;     
  line-height: 1.3;        
}


.about-box {
  background: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  border-radius: 12px;
}





.about-video iframe {
  border-radius: 10px;
}



.social-links a img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;   /* keeps aspect ratio */
  margin-right: 10px;
  transition: transform 0.3s ease;
}

.social-links a img:hover {
  transform: scale(1.1);
}



/* Logo grid */
.client-logos {
  margin-top: 40px;
  display: flex;              /* use flexbox */
  flex-wrap: wrap;            /* allow wrapping to next line */
  justify-content: center;    /* center horizontally */
  gap: 20px;                  /* space between logos */
}

/* Logo box with white background */
.logo-box {
  background: #fff;  
  width: 150px;  
  height: 60px;               /* adjust height if needed */
  display: flex;              /* center image inside box */
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;   
  border-radius: 10px;      
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
  padding: 10px;              /* smaller padding so image fits */
  box-sizing: border-box;
}

.logo-box img {
  max-width: 100%;            /* ensures it fits box width */
  max-height: 100%;           /* ensures it fits box height */
  height: auto;
  width: auto;
  display: block;
  /* filter: grayscale(100%);    */
  transition: filter 0.3s ease;
}

.logo-box:hover {
  transform: translateY(-5px);
}

.logo-box:hover img {
  filter: grayscale(0%);     
}


/* Portfolio card styling */
.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.portfolio-card:hover img {
  transform: scale(1.1);
}

.portfolio-card .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  text-align: center;
  transition: opacity 0.3s ease;
}

.portfolio-card:hover .overlay {
  opacity: 1;
}

.portfolio-card .overlay h4 {
  font-size: 20px;
  margin-bottom: 5px;
}

.portfolio-card .overlay span {
  font-size: 14px;
  margin-bottom: 10px;
}

.portfolio-card .overlay a.view-project {
  background: #fe664e;
  color: #fff;
  padding: 6px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.3s ease;
}

.portfolio-card .overlay a.view-project:hover {
  background: #ff8364;
}

/* Filter buttons */
/* Filter buttons */
.portfolio-filters button {
  margin: 0px 5px 5px 5px; /* top right bottom left */
  padding: 8px 16px;
  border: none;
  background: #eee;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Active and hover state */
.portfolio-filters .active,
.portfolio-filters button:hover {
  background: #333;
  color: #fff;
}





/* container layout */
.portfolio-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;                 /* nice row/col spacing */
  justify-content:center;   /* optional */
}

/* buttons */
.portfolio-filters button{
  position: relative;      
  z-index: 0;               
  margin: 0;               
  padding: 8px 16px;
  border: none;
  background: #fff;         
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s ease, color .2s ease, background .2s ease;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* gradient halo BEHIND each button */
.portfolio-filters button::before{
  content:"";
  position:absolute;
  inset:-5px;               /* halo spread */
  border-radius: inherit;
  background: radial-gradient(
    circle at 80% 20%,
    rgba(0, 208, 255, 0.432) 0%,
    rgba(0, 123, 255, 0.349) 20%,
    rgba(43, 206, 255, 0.5) 40%,
    rgba(164, 130, 255, 0.45) 55%,
    rgba(0, 255, 183, 0.35) 70%,
    rgba(0, 183, 255, 0.25) 85%,
    rgba(0, 208, 255, 0.575) 100%
  );
  filter: blur(5px);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;              /* sits behind button content */
}

/* hover / active */
.portfolio-filters button:hover::before,
.portfolio-filters button:focus-visible::before{
  opacity: 1;
}

.portfolio-filters .active,
.portfolio-filters button:hover{
  background:#333;
  color:#fff;
  transform: translateY(-1px);
}







/* Swiper grid tweaks */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide.swiper-slide-hidden {
  display: none !important;
}
.portfolio-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  
}

#portfolio-section .portfolio-swiper { margin-top: -40px !important; }



.white-box {
  background: rgba(253, 253, 253, 0.041); /* 0.8 = 80% opacity */
  min-height: 150px;
  border-radius: 19px;   /* keep smooth edges */
  padding: 0px;
  margin-top: -50px;
}


.partner-swiper .swiper-slide,
.client-swiper .swiper-slide {
  width: 100px;   /* fixed width logos */
  display: flex;
  justify-content: center;
  align-items: center;
}
.partner-swiper img,
.client-swiper img {
  max-height: 60px;
  object-fit: contain;
}


.partner-swiper img:hover,
.client-swiper img:hover {
  filter: grayscale(0%);
}



/* Project Details Section */

.project-details {
  padding-top: 140px; /* a bit extra for spacing */
}

.project-details .section-heading {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    margin-bottom: 30px;
}

.project-details h4, .project-details h5 {
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 10px;
}

.project-details .feature-box, 
.project-details .technology-box, 
.project-details .result-box {
    background-color: #fff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Gallery & Text layout */
.project-details .gallery-text-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.project-details .gallery-text-wrapper .text-content {
    flex: 1 1 45%;
}

.project-details .gallery-text-wrapper .gallery-content {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.project-details .gallery-content img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

/* Related projects */
/* Related projects */
#project-related .card {
    cursor: pointer;
    transition: transform 0.3s;
    width: 20px; /* reduce width */
     
    font-size: 0.85rem; /* slightly smaller text */
}

#project-related .card img {
    height: 50px; /* reduce image height */
    object-fit: cover;
    border-radius: 5px;
}

#project-related .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.project-card {
  background-color: #fff;
  border: 1px solid #eaeaea;
  padding: 30px;
  margin-bottom: 50px; /* <-- increase this value as needed */
}


.project-card h4 {
  font-weight: 700;
}

.project-card h5 {
  margin-top: 20px;
  font-weight: 600;
}

#project-gallery {
  display: flex;
  flex-direction: column; /* stack images vertically */
  align-items: center;    /* center images horizontally */
  gap: 15px;              /* space between images */
}

#project-gallery img {
  width: 100%;           /* full width of container */
  max-width: 100%;       /* prevent overflow */
  height: auto;          /* keep aspect ratio */
  border-radius: 8px;
  object-fit: cover;
}


#project-related .card {
  cursor: pointer;
  transition: transform 0.3s ease;
}

#project-related .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}


/* Section spacing */
.contact-us .section-heading { margin-bottom: 30px; }
.contact-us iframe { border: 0; height: 300px; border-radius: 8px; }

/* Contact info below map */
.contact-info { margin-top: 20px; }
.contact-info .info-icon { width: 50px; height: 50px; margin-bottom: 5px; }
.contact-info p { font-size: 14px; margin: 0; }

/* Form inputs */
.fill-form input, .fill-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}
.fill-form textarea { height: 150px; }

/* Button */
.main-button { padding: 10px 20px; border-radius: 6px; }




/*---------------------------------------
  CONTACT               
-----------------------------------------*/
.google-map {
  border-radius: var(--border-radius-medium);
}

.contact-form .form-floating>textarea {
  border-radius: var(--border-radius-medium);
  height: 150px;
}

.site-footer.section-padding {
  padding-bottom: 0;
  padding-top: 60px;
}


.social-links a img {
    width: 42px;       /* same width for all */
    height: 42px;      /* same height for all */
    object-fit: contain; /* ensures the image scales proportionally */
    margin-right: 0px;  /* spacing between icons */
    vertical-align: middle;
    transition: transform .18s ease;
}

.social-links a img:hover {
    transform: scale(1.12);
}


/* —— Footer look & feel —— */
#contact-us-2.site-footer {
  --footer-card: #fdfcff;
  --footer-text: #c1e5fc;
  --footer-heading: #ffffff;
  --footer-accent: #60b7fd;
  --footer-border: rgba(255,255,255,.08);

  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.15), transparent 60%),
    radial-gradient(800px 400px at 90% -20%, rgba(99,102,241,.12), transparent 50%),
    url("../images/footer-bg-v17.webp") center/cover no-repeat;
  color: var(--footer-text);
  position: relative; 
  z-index: 10;         
}


#contact-us-2 .section-heading h4 {
  color: var(--footer-heading);
  letter-spacing: .25px;
  margin-bottom: -25px;
}

/* spacing helpers */
#contact-us-2 .section-padding { padding: 0; }
#contact-us-2 .container { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* logo */
/* #contact-us-2 .footer-logo { height: auto; width: auto;  } */

/* social icons */
#contact-us-2 .social-links { display:flex; flex-wrap: wrap; gap: .5rem; }
#contact-us-2 .social-links a {
  display:inline-flex; align-items:center; justify-content:center;
  width: 40px; height: 40px; border-radius: .75rem;
  background: var(--footer-card); border: 1px solid var(--footer-border);
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  padding: 2px;              /* remove extra padding */
  margin: 0;               /* prevent vertical gaps */
}
#contact-us-2 .social-links a:hover { transform: translateY(-2px); border-color: rgba(59,130,246,.45); box-shadow: 0 6px 20px rgba(2,6,23,.45); }
#contact-us-2 .social-links img { width: 38px; height: 38px; object-fit: contain; }

/* map */
#contact-us-2 .footer-map .ratio { border-radius: .75rem; overflow: hidden; border: 1px solid var(--footer-border); background: #f1f1f1; }
#contact-us-2 .google-map-iframe { border: 0; }

/* lists */
#contact-us-2 .site-footer-title { color: var(--footer-heading); font-weight: 600; letter-spacing: .2px; }
#contact-us-2 .site-footer-links { list-style: none; padding-left: 0; margin: 0; }
#contact-us-2 .site-footer-links li { margin: .35rem 0; }
#contact-us-2 .site-footer-links a { color: var(--footer-text); text-decoration: none; }
#contact-us-2 .site-footer-links a:hover { color: #ffcf4b; text-decoration: underline; text-underline-offset: 3px; }

/* address card */
#contact-us-2 .address-card { background: linear-gradient(180deg, rgba(241, 242, 245, 0.315), rgba(202, 202, 230, 0.301));
                                border: 1px solid var(--footer-border); border-radius: .75rem;
                                padding: 1rem; }
#contact-us-2 a.link-inverse { color: #f8dd46; text-decoration: none; }
#contact-us-2 a.link-inverse:hover { color: var(--footer-accent); text-decoration: underline; text-underline-offset: 3px; }

/* form */
#contact-us-2 .form-control { background: var(--footer-card); border: 1px solid var(--footer-border); color: #000102; }
#contact-us-2 .form-control::placeholder { color: #9ca3af; }
#contact-us-2 .form-control:focus { border-color: rgba(59,130,246,.6); box-shadow: 0 0 0 .2rem rgba(59,130,246,.15); }
#contact-us-2 .btn-primary { background: var(--footer-accent); border-color: var(--footer-accent); font-weight: 600; }
#contact-us-2 .btn-primary:hover { filter: brightness(1.05); }

/* bottom bar */
#contact-us-2 .footer-bottom { border-top: 1px solid var(--footer-border); }

/* utility */
#contact-us-2 .h-300 { min-height: 300px; }
@media (max-width: 575.98px) {
  #contact-us-2 .h-300 { min-height: 180px; }
}

/* Ensure the left column uses left text alignment */
#contact-us-2 .col-lg-3,
#contact-us-2 .col-md-6 {
  text-align: left !important;
}



/* Logo image: never auto-center via global img rules */
#contact-us-2 .footer-logo {
  display: inline-block;      /* not block with auto margins */
  margin: 0 !important;       /* beat img { margin: 0 auto } globals */
  max-height: 1656px;           /* adjust to taste */
  width: 1650px;
  height: auto;
}


/* Text color inside the address cards */
#contact-us-2 .address-card {
  color: #eae8eb;                 /* body text in the card */
}

/* Links inside the address cards */
#contact-us-2 .address-card a.link-inverse {
  color: #ece7ff;                 /* link color */
  text-decoration: none;
}
#contact-us-2 .address-card a.link-inverse:hover {
  color: #fcdb48;                 /* hover color */
  text-decoration: underline;
}

/* Headings above the cards */
#contact-us-2 .site-footer-title {
  color: var(--footer-heading);
  margin-top: 15px;
}

/* 1) Make the left column stretch so the map can fill width */
#contact-us-2 .col-lg-3.d-flex,
#contact-us-2 .col-md-6.d-flex {
  align-items: stretch !important;  /* default is stretch; force it */
}

/* 2) Logo at the top-left, not centered, not full-width */
/* #contact-us-2 .logo {
  align-self: flex-start;     
  display: inline-block;      
  margin: 0 0 .5rem 0 !important;
}
#contact-us-2 .footer-logo {
  display: inline-block !important;
  margin: 0 !important;       
  max-height: 506px;          
  height: auto; width: auto;
} */

/* 3) Vertically CENTER the social block between logo and map  */
#contact-us-2 .social-links {
   /*align-self: flex-start;     /* keep left-aligned */
  margin-top: auto;           /* push down from the logo */
  margin-bottom: auto;        /* and up from the map => centered vertically */
}

/* If you ALSO want the icons centered horizontally within the column, use this instead: */
/* #contact-us-2 .social-links { align-self: center; margin-top:auto; margin-bottom:auto; } */





/* === Make left column predictable === */
#contact-us-2 .footer-left {
  /* keep column full-height so map has room */
  align-items: stretch !important;
}

/* === Exact left-edge alignment for logo + social === */
/* #contact-us-2 .footer-left .logo,
#contact-us-2 .footer-left .social-links {
 
  align-self: flex-start !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left !important;
} */

/* prevent any global centering rules on <img> */
/* #contact-us-2 .footer-left .footer-logo {
  display: inline-block !important;
  margin: 0 !important;
  height: auto; width: 2000px;
   */

/* social icons container never indents */
#contact-us-2 .footer-left .social-links {
  display: flex;
  gap: .5rem;
  margin-top: .10rem !important;
}

/* === Vertically center the social icons between logo and map === */
/* (Keep this block if you want that center-between look) */
#contact-us-2 .footer-left .social-links {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* === Keep the map from squishing === */
#contact-us-2 .footer-left .footer-map {
  flex: 1 1 280px;    /* grows, but won’t go below ~280px tall */
  min-height: 180px;
  align-self: stretch;
}
#contact-us-2 .footer-left .footer-map .ratio { min-height: 280px; }
#contact-us-2 .footer-left .google-map-iframe { width: 100%; height: 100%; }

/* Safety: some themes add margins/padding to <nav> */
#contact-us-2 .footer-left nav.social-links { margin-left: 0 !important; padding-left: 0 !important; }



#contact-us-2 .custom-heading-2 {
  /* color: #2a2a2a;
  background: linear-gradient(to right, #00f2fe, #4facfe, #235aa6); */
  background: linear-gradient(to right, #595bd3, #071a88, #be08f5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 35px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 25px;
}

#contact-us-2 .custom-heading-1 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 15px;
}

#contact-us-2 .footer-logo {
  width: 100%;
  max-width: 450px;
  height: auto;
  margin: 0 auto;  /* centers it */
  padding: 20px;   /* adds padding all around */
}

#contact-us-2 .social-links {
  margin-top: 0; /* ensure no extra gap */
}


#contact-us-2 .social-links img {
  max-width: 40px;  /* consistent icon size */
  height: auto;
}

#contact-us-2 .social-links a {
  flex: 1 1 auto;           
  display: flex;
  justify-content: center;  
}



/* === Blog Details Style === */

.post-hero {
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 12px;
}
.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.post-meta { color: #6c757d; }
.article-content .block { margin-bottom: 1.25rem; }
.article-content .block img { max-width: 100%; height: 450px; border-radius: 12px; object-fit: cover; display: block; }
.article-content .block.text p { margin: 0 0 1rem 0; }
.related a { text-decoration: none; color: inherit; }
.related img { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; }
.author-chip img { width: 36px; height: 36px; border-radius: 0%; object-fit: contain;padding: 1px;    }





main#blogs-list {
  margin-bottom: -100px;   /* remove bottom margin if any */
  padding-bottom: 80px;  /* remove bottom padding */
}
/* main#blogs-list > .container {
  padding-bottom: -110px !important; 
} */
main#blog-detail {
  margin-bottom: -100px;   /* remove bottom margin if any */
  padding-bottom: 80px;  /* remove bottom padding */
}




/* === Override to make images fully visible inside boxes (no crop) === */

/* === Keep same layout but prevent stretching/cropping (responsive) === */

/* Desktop / default */
.post-hero {
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: #f5f6fb;
}
.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  object-position: center; 
  display: block;
}

.article-content .block img {
  width: 100%;
  height: 450px;                 /* same box, image contained */
  object-fit: contain; 
  object-position: center;
  border-radius: 12px; 
  display: block; 
  background: #f5f6fb;
}

.related img {
  width: 96px; height: 64px;     /* same box, image contained */
  object-fit: contain; object-position: center;
  border-radius: 8px; background: #f5f6fb;
}

/* Tablet */
@media (max-width: 991px) {
  .post-hero { height: 320px; }
  .article-content .block img { height: 360px; }
  .related img { width: 104px; height: 70px; } /* slightly larger for readability */
}

/* Mobile */
@media (max-width: 767px) {
  .post-hero { height: 240px; }
  .article-content .block img { height: 220px; }
  .related a { gap: 0.5rem; }
  .related img { width: 88px; height: 58px; }
}

/* Very small phones */
@media (max-width: 400px) {
  .post-hero { height: 200px; }
  .article-content .block img { height: 200px; }
  .related img { width: 80px; height: 54px; }
}

/* ========= Blog mobile fix: keep meta row inside, no overflow ========= */
/* ===== Blog mobile polish (≤ 390–414px wide iPhones) ===== */
@media (max-width: 767px) {
  /* 1) Featured card: tighten spacing + sensible image height */
  #blog .blog-post .thumb {
    height: 220px;                 /* was 320px — reduce the big gap */
  }
  #blog .blog-post .down-content {
    padding: 14px 16px 18px;       /* was 30px — tighter top space */
  }

}

@media (max-width: 767px) {
  /* Stack each list item: image on top, text below */
  #blog .blog-posts .post-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 12px;
  }

  /* Full-width, uniform image box */
  #blog .blog-posts .post-item .thumb {
    width: 100%;
    height: 180px;
    margin-right: 0;
    overflow: hidden;
    border-radius: 12px;
  }
  #blog .blog-posts .post-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;   /* no crop on mobile */
  }

  /* Right content fills the card width and controls layout */
  #blog .blog-posts .post-item .right-content {
    width: 100%;
    padding: 0 6px;        /* keep text off the edges */
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;       /* we’ll arrange children with order */
    align-items: center;
    gap: 8px;
  }

  /* Meta row: pill (left) + date (right) on the SAME line */
  #blog .blog-posts .post-item .right-content > span.category {
    order: 1;
    display: inline-block;
    white-space: nowrap;   /* keep pill compact */
  }
  #blog .blog-posts .post-item .right-content > span.date {
    order: 2;
    margin-left: auto;     /* push date to the right */
    float: none;           /* cancel desktop float */
    margin-top: 0;
  }

  /* Title and excerpt start on a new line, full width */
  #blog .blog-posts .post-item .right-content > a { 
    order: 3;
    width: 100%; 
  }
  #blog .blog-posts .post-item .right-content > p {
    order: 4;
    width: 100%;
    margin-bottom: 0;
  }
}


/* === Blog Details Style === */




/* Container */
.quick-links {
  border-radius: 20px;
  padding: 18px 18px 10px;
  background: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);
}

/* wrapper that hosts the halo */
.ql-card-wrap {
  position: relative;
  display: flex;             /* flex container to center card vertically */
  justify-content: center;   /* horizontal centering */
  align-items: stretch;      /* stretch cards to same height */
  overflow: visible;         /* allow halo to show */
  z-index: 0;
  height: 100%;              /* important: let wrapper take full column height */
}




/* card itself */
.ql-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  height: 100%;   
  width: 100%;            /* makes all cards same height */
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 20px 18px;
  box-shadow: 0 2px 14px rgba(0,0,0,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* halo on wrapper */
.ql-card-wrap::before {
  content: "";
  position: absolute;
  inset: -4px;             
  border-radius: 20px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 45% 30%,
    rgba(0, 210, 255, 0.7) 0%,     /* cyan center */
    rgba(0, 123, 255, 0.55) 20%,   /* deep blue */
    rgba(138, 43, 255, 0.5) 40%,   /* violet */
    rgba(164, 130, 255, 0.45) 55%, /* light violet */
    rgba(0, 255, 183, 0.35) 70%,   /* mint green */
    rgba(0, 247, 255, 0.25) 85%,   /* soft magenta */
    rgba(0, 210, 255, 0.15) 100%   /* fade to cyan edges */
  );


  filter: blur(5px);
  transition: opacity .25s ease;
}

/* hover effect */
.ql-card-wrap:hover::before,
.ql-card-wrap:focus-within::before {
  opacity: 100;
}

.ql-card-wrap:hover .ql-card,
.ql-card-wrap:focus-within .ql-card {
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.12);
}



/* Icon */
.ql-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #f1f5ff;
  margin: 0 auto 10px;           /* ⬅ centered */
  font-size: 18px;
}

/* Title & description */
.ql-title {
  display: block;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 4px;
}
.ql-desc {
  display: block;
  font-size: 13px;
  color: #6c757d;
  line-height: 1.3;
  min-height: 1.3em;
}

/* Arrow (centered under text) */
.ql-arrow {
  position: static;              /* ⬅ no absolute bottom-right */
  margin-top: 8px;
  font-size: 13px;
  color: #6c757d;
  opacity: .8;
  transition: transform .18s ease, opacity .18s ease;
}
.ql-card:hover .ql-arrow {
  transform: translateY(-2px);   /* subtle lift */
  opacity: 1;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .quick-links { background: linear-gradient(180deg, #121418 0%, #0e1114 100%); }
  .ql-card { background: #151a20; border-color: rgba(255,255,255,.06); color: #e6e8ea; }
  .ql-desc, .ql-arrow { color: #aab2bb; }
  .ql-icon { background: #1f2833; }
}

/* Heading style to match Mission/Vision & CEO Message */
.section-quicklinks .ql-heading h6 {
  font-size: 32px;
  margin-top: 0;
  font-weight: 600;
  background: linear-gradient(to right, #ff0080, #7928ca, #2af598);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}
.section-quicklinks .ql-heading h4 {
  font-size: 24px;
  margin-top: 8px;
  font-weight: 500;
  color: #000;
  line-height: 1.3;
}
.section-quicklinks .ql-heading .mb-1 { margin-bottom: .25rem !important; }
.section-quicklinks .ql-heading .mb-0 { margin-bottom: 0 !important; }

/* 3-column grid: left = prev, center = view all, right = next */
.post-pager {
  grid-template-columns: 1fr auto 1fr;
}

/* Align edges */
.post-pager a:first-child { justify-self: start; }
.post-pager a:last-child  { justify-self: end;  }

/* Responsive: stack nicely on small screens */
@media (max-width: 576px) {
  .post-pager {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .post-pager a {
    justify-self: center;
    width: 100%;
    max-width: 280px; /* optional */
  }
}

.footer-left { position: relative; }
.footer-left > .logo,
.footer-left > .social-links { position: relative; z-index: 1; }

.footer-left::before {
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: 0;
  /* height covers logo + socials; adjust as needed */
  height: 190px; 
  
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 20px;
}

.header-area{
  --white-stop: 30%;                 /* desktop default */
  background: linear-gradient(
    to right,
    #fffefe 0%,
    #f5f4f4 var(--white-stop),       /* white area width */
    #029df7 calc(var(--white-stop) + 20%),
    #0059ff 80%,
    #0331af 100%
  );
}

/* Tablet */
@media (max-width: 992px){
  .header-area{ --white-stop: 30%; }
}

/* Mobile */
@media (max-width: 768px){
  .header-area{ --white-stop: 45%; } /* widen white so logo stays on white */
}

/* Small mobile */
@media (max-width: 576px){
  .header-area{ --white-stop: 50%; }
}


/* === DESKTOP RESET (avoid overlap at 767px) === */
@media (min-width: 768px){
  .header-area .main-nav .nav{
    display: flex !important;
    position: static !important;
  }
}

@media (max-width: 767px) {
  /* Left-align main menu */
  .header-area .main-nav .nav {
    flex-direction: column;
    padding-left: 0;
  }

  .header-area .main-nav .nav > li {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left align text */
  }

  .header-area .main-nav .nav > li > a {
    width: 100%;
    padding-left: 16px;
    text-align: left;
    background: #f7f7f7;
  }

  /* Submenu styling */
  .header-area .main-nav .nav li .submenu {
    width: 100%;
    padding-left: 16px;
    background: #fff;
    border-left: 3px solid #0d6efd;
    border-radius: 0;
    margin-top: 4px;
  }

  .header-area .main-nav .nav li .submenu a {
    display: block;
    padding: 8px 12px;
    color: #191a20;
  }

  .header-area .main-nav .nav li .submenu a:hover {
    background: #e0e0e0;
  }

  /* Allow scrolling if submenu too tall */
  .header-area .main-nav .nav li .submenu.open {
    max-height: 80vh;
    overflow-y: auto;
  }

  /* Arrow toggle */
  .submenu-toggle {
    align-self: flex-end;
    padding-right: 16px;
  }
}

.service-text,
#service-lottie-container {
  position: relative; /* needed for z-index to work */
  z-index: 9;         /* above mask */
}




.cs-item { padding: 16px 0; border-bottom: 1px solid #eee; cursor: pointer; }
.cs-head { display: flex; align-items: baseline; gap: 12px; }
.cs-num  { font-size: 32px; font-weight: 700; color: #ff7a00; line-height: 1; }
.cs-title{ font-size: 20px; font-weight: 600; color: #2d2d2d; }
.cs-body { margin: 8px 0 0 44px; color: #666; display: none; }
.cs-item.active .cs-body { display: block; }
.line-dec-center {
  width: 0;                /* start collapsed */
  height: 3px;
  background: #ff7a00;     /* brand color */
  margin: 20px auto 0;
  border-radius: 2px;
  animation: expandLine 1s ease forwards; /* trigger animation */
}

@keyframes expandLine {
  from { width: 0; opacity: 0; }
  to   { width: 80px; opacity: 1; }  /* final width */
}


.cs-box-wrap {
  position: relative;
  background: #fff;                /* white inside */
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  z-index: 14;
  transition: box-shadow 0.3s ease;
  overflow: hidden;                /* keep halo aligned */
}

/* Gradient border halo (hidden by default) */
.cs-box-wrap::before {
  content: "";
  position: absolute;
  inset: 0;                        /* cover the box */
  border-radius: 20px;
  padding: 6px;                    /* thickness of the halo */
  background: radial-gradient(
    circle at 45% 30%,
    rgba(0, 210, 255, 0.7) 0%,
    rgba(0, 123, 255, 0.55) 20%,
    rgba(138, 43, 255, 0.5) 40%,
    rgba(164, 130, 255, 0.45) 55%,
    rgba(0, 255, 183, 0.35) 70%,
    rgba(0, 247, 255, 0.25) 85%,
    rgba(0, 210, 255, 0.15) 100%
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);     /* keep middle transparent */
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;                      /* start hidden */
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(13px);
 
}

/* Show halo on hover */
.cs-box-wrap:hover::before {
  opacity: 1;
}

/* Animate.css v4 uses this custom property for duration */
.solution-item { --animate-duration: .35s; }

/* Fallback for older Animate.css v3 (scoped so it doesn't affect the whole site) */
.solution-item .animated { animation-duration: .35s; }




/* =========================
   Process (pf-*) — FULL CSS
   Chevron connectors (no line)
   ========================= */




/* GRID */
.pf-grid {
  /* tuneables */
  --pf-gap: 50px;              /* space between cards (must match 'gap') */
  --pf-rail-y: 50%;           /* vertical position of the chevron */
  --pf-chevron-size: 32px;     /* chevron size in px */
  --pf-chevron-stroke: #a39f9f;/* chevron outline color */

  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 4 cols on desktop */
  gap: var(--pf-gap);
  position: relative;
}

/* Kill any previous straight line connector if it exists */
.pf-grid::after { display: none !important; }

/* STEP CARD */
.pf-step {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
  z-index: 1; /* above connectors */
}
.pf-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
}

/* NUMBER / ICON / TEXT */
.pf-num   { font-weight: 800; font-size: 28px; color: #ff7a00; line-height: 1; margin-bottom: 8px; }
.pf-icon  { width: 36px; height: 36px; margin-bottom: 8px; }
.pf-title { font-size: 18px; font-weight: 700; color: #1f2937; }
.pf-body  { margin-top: 8px; color: #6b7280; }
.pf-link  { display:inline-block; margin-top: 10px; }

/* =========================
   DESKTOP: chevron between siblings
   ========================= */
@media (min-width: 1201px) {
  /* add a chevron between cards in the same row
     NOTE: if you use 3 columns on desktop, change 4n -> 3n */
  .pf-step:not(:nth-child(4n))::before {
    content: "";
    position: absolute;
    top: var(--pf-rail-y);
    right: calc(var(--pf-gap) * -0.5 - var(--pf-chevron-size) / 2);
    width: var(--pf-chevron-size);
    height: var(--pf-chevron-size);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;

    /* outlined chevron (triangle) without a line segment */
    background: center / contain no-repeat;
    /* inline SVG so no file needed; %23 = # in URL encoding */

  }

  /* Fallback for browsers that ignore CSS vars inside data URLs:
     we overlay the same SVG shape using filter to approximate color */
  .pf-step:not(:nth-child(4n))::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2 L20 12 L4 22 Z'/%3E%3C/svg%3E");
    /* If you want to tint, you can add: filter: hue-rotate(...); */
  }
}

/* =========================
   RESPONSIVE LAYOUT
   ========================= */

/* Tablet: 2 columns, no connectors */
@media (max-width: 1200px) {
  .pf-grid { grid-template-columns: repeat(2, 1fr); }
  .pf-step::before { display: none !important; }
}

/* Phone: single column */
@media (max-width: 576px) {
  .pf-grid { grid-template-columns: 1fr; }
}









/* Testimonials */
.t-card {
  background:#fff; border-radius:16px; padding:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.06); height:100%;
}
.t-title { font-size:18px; font-weight:700; color:#1f2937; }
.t-quote { margin-top:8px; color:#4b5563; font-style:italic; }
.t-client { margin-top:10px; color:#6b7280; font-weight:600; }
.t-media { display:flex; align-items:center; gap:12px; margin-top:12px; }
.t-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.t-logo { max-height:50px; width: auto; opacity:.9; }

/* Logos strip */
.logo-item { display:flex; align-items:center; justify-content:center; padding:14px; }
.logo-item img { height: 60px; width: auto; }         /* default (md) */
.logo-item.logo-sm img { height: 40px; }
.logo-item.logo-lg img { height: 90px; }

.logo-item img:hover { opacity:1; }

/* FAQ */
.faq-item { border-bottom:1px solid #eee; padding:16px 0; cursor:pointer; }
.faq-q { display:flex; justify-content:space-between; gap:16px; font-weight:700; color:#1f2937; }
.faq-a { display:none; color:#4b5563; margin-top:8px; }
.faq-item.active .faq-a { display:block; }

/* Benefits */
/* .benefit-card {
  background:#fff;
  border-radius:16px;
  padding:24px;
  height:100%;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition:transform .2s, box-shadow .2s;
}
.benefit-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08); } */
.benefit-icon { width:36px; height:36px; margin-bottom:8px; }
.benefit-title { font-weight:800; color:#111827; }
.benefit-body { color:#6b7280; margin-top:6px; }


.benefit-card {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: visible; /* allow halo to show outside */
}

.benefit-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 210, 255, 0.7) 0%,
    rgba(0, 123, 255, 0.55) 20%,
    rgba(117, 43, 255, 0.5) 40%,
    rgba(164, 130, 255, 0.45) 55%,
    rgba(0, 255, 183, 0.35) 70%,
    rgba(0, 183, 255, 0.25) 85%,
    rgba(0, 208, 255, 0.575) 100%
  );
  filter: blur(8px);
  transition: opacity .25s ease;
}

.benefit-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background-color: #fff;
  z-index: 1; /* behind content */
  pointer-events: none;
}

/* Reveal halo on hover */
.benefit-card:hover::before,
.benefit-card:focus-within::before {
  opacity: 1;
}

/* Subtle lift on hover */
.benefit-card:hover,
.benefit-card:focus-within {
  transform: translateY(-2px);
}

/* Keep content above white mask */
.benefit-card > * {
  position: relative;
  z-index: 2;
}











/* Uniform branded logo boxes without changing JS */
.brand-strip {
  display: flex;           /* make sure it's flex even with Bootstrap row */
  flex-wrap: wrap;
  gap: 20px;
}

/* Treat each JS-injected .logo-item as a fixed-size box */
.brand-strip .logo-item {
  flex: 0 0 auto;          /* don't stretch */
  width: 180px;            /* box width */
  height: 80px;            /* box height */
  padding: 1px;           /* inner breathing room */
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;               /* Bootstrap cols sometimes add margins */
  transition: transform .15s ease, box-shadow .15s ease;
}

.brand-strip .logo-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

/* Make link fill the box nicely (if present) */
.brand-strip .logo-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}

/* Ensure logos scale to fit the box, keep aspect ratio */
.brand-strip .logo-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: .9;
  transition: opacity .15s ease;
}
.brand-strip .logo-item img:hover { opacity: 1; }

/* Optional: quick size presets by changing the container class only */
.brand-strip.sm  .logo-item { width: 140px; height: 64px; }
.brand-strip.lg  .logo-item { width: 220px; height: 100px; }






/* Toggle */
.billing-toggle { display:flex; align-items:center; gap:12px; font-weight:600; }
.billing-toggle .label { color:#374151; }
.billing-toggle .save { color:#10b981; font-weight:700; }

/* iOS-style switch */
.switch { position:relative; display:inline-block; width:56px; height:30px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
  background:#e5e7eb; transition:.2s; border-radius:30px; }
.slider:before { position:absolute; content:""; height:22px; width:22px; left:4px; top:4px; 
  background:white; transition:.2s; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.2); }
input:checked + .slider { background:#10b981; }
input:checked + .slider:before { transform:translateX(26px); }





/* Pricing cards */
.price-card {
  position:relative; background:#fff; border-radius:16px; padding:24px; height:100%;
  box-shadow:0 8px 24px rgba(0,0,0,.06); transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column; gap:12px;
}
.price-card:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.08); }

.price-badge {
  position:absolute; top:16px; right:16px; padding:6px 10px; border-radius:999px;
  background:#fee2e2; color:#b91c1c; font-size:12px; font-weight:700;
}
.price-card.recommended { outline:2px solid #10b98133; box-shadow:0 12px 30px rgba(16,185,129,.25); }

.price-name { font-size:18px; font-weight:800; color:#111827; }
.price-sub { color:#6b7280; }
.price-number { font-size:36px; font-weight:800; color:#111827; line-height:1; }
.price-currency { font-size:18px; color:#6b7280; margin-right:6px; }
.price-billing { color:#6b7280; }

.price-features { margin-top:8px; }
.price-features li { display:flex; align-items:flex-start; gap:8px; margin:6px 0; color:#374151; }
.price-features li::before {
  content:"✓"; color:#10b981; font-weight:900; line-height:1.4;
}

.price-cta { margin-top:auto; }


/* let glow extend outside the Bootstrap col */
#pricing .row > [class*="col-"] {
  overflow: visible;
}

/* base card: create an isolated stacking context */
.price-card {
  position: relative;
  border-radius: 16px;
  isolation: isolate;          /* important so ::before (z:-1) stays visible */
}

/* BORDER GLOW (only on the edge) */
.price-card::before {
  content: "";
  position: absolute;
  inset: -10px;                /* extend just outside the border */
  border-radius: 24px;         /* radius + inset */
  padding: 8px;                /* ring thickness */
  background: radial-gradient(
    40% 60% at 30% 20%,
    rgba(124, 58, 237, .28),
    rgba(59, 130, 246, .22),
    rgba(16, 185, 129, .18)
  );
  /* mask out the center so only the border glows */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  filter: blur(14px);
  opacity: 0;                  /* hidden until hover */
  transition: opacity .25s ease, filter .25s ease;
  pointer-events: none;
  z-index: -1;                 /* sits behind the card (works thanks to isolation) */
}

.price-card:hover::before {
  opacity: 1;
  filter: blur(18px);
}

/* optional: a crisp inner gradient ring on hover */
.price-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(
    90deg,
    rgba(124,58,237,.35),
    rgba(59,130,246,.28),
    rgba(16,185,129,.30)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.price-card:hover::after { opacity: .9; }

.save-line {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #013f01;
  color: #00ff0d;
  font-weight: 600;
  border-radius: 9999px;
  font-size: 0.85rem;
  padding: 6px 12px;
  margin-top: 10px;
  gap: 6px;
}

.save-line .sep {
  opacity: 0.6;
}
.price-number {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 2.15rem;
}
.price-number .currency-code {
  font-size: 1.1rem;
  font-weight: 600;
  opacity: .85;
}
.price-number .amount {
  font-weight: 800;      /* bold number only */
  font-size: 2.15rem;    /* a touch larger */
}

/* Ensure emoji flags render nicely in the native select */
#currency-select {
  font-family: inherit, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  min-width: 140px;           /* optional: keep it roomy */
  font-weight: 500;           /* optional: match your UI weight */
}
/* ensure emoji font fallback works inside the native select */
#currency-select,
#currency-select option {
  font-family: inherit, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol";
  text-transform: none;     /* avoid any forced uppercase that can affect rendering */
  letter-spacing: normal;   /* some themes add tracking that makes flags look odd */
}
/* Make sure the native select and its options use an emoji-capable font */
#currency-select,
#currency-select option,
.form-select#currency-select {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* optional: keep sizing tidy */
#currency-select {
  min-width: 140px;
  font-weight: 500;
}
/* === Fix emoji flag visibility in the currency dropdown === */
#currency-select,
#currency-select option,
.form-select#currency-select {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Optional: widen slightly for emoji space */
#currency-select {
  min-width: 140px;
  padding-left: 0.5rem;
}
/* ===== Currency custom dropdown ===== */
.currency-dd {
  position: relative;
  user-select: none;
  min-width: 160px;
  font-weight: 500;
}
.currency-dd-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .375rem;
  background: #fff;
  cursor: pointer;
}
.currency-dd-btn:focus { outline: 2px solid #2684ff55; }
.currency-flag { width: 1.1rem; text-align: center; }
.currency-code { opacity: .9; }
.currency-dd-list {
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  inset-block-start: calc(100% + 6px);
  min-width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .375rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  display: none;
}
.currency-dd.open .currency-dd-list { display: block; }
.currency-dd-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .6rem;
  cursor: pointer;
}
.currency-dd-item:hover,
.currency-dd-item[aria-selected="true"] {
  background: #f2f5ff;
}

/* keep a subtle*










/* Only add top offset when the header is fixed/overlay */
.job-hero-wrap { margin-top: 0; }
body.has-fixed-header .job-hero-wrap { margin-top: var(--header-h, 80px); }

/* Smooth, responsive hero padding instead of hard 156px */
.job-hero{
  /* was: padding: 156px 30px 50px 30px; */
  padding: clamp(160px, 9vh, 110px) 30px 50px 30px;
}


header {
  display: flex;
  align-items: center; /* keeps logo/menu vertically centered */
  transition: all 0.3s ease;
  padding: 20px 0; /* default padding */
}

header.shrink {
  height: 70px;
  padding: 10px 0; /* reduced padding so content stays centered */
}

/* .contact-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  transition: transform .2s, box-shadow .2s;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
} */

.social-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.contact-card {
  margin-bottom: 0;
}
#service-footer {
  margin-top: 10px;
}




.contact-card {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow: visible; /* allow halo to show outside */
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 18px;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 210, 255, 0.7) 0%,
    rgba(0, 123, 255, 0.55) 20%,
    rgba(117, 43, 255, 0.5) 40%,
    rgba(164, 130, 255, 0.45) 55%,
    rgba(0, 255, 183, 0.35) 70%,
    rgba(0, 183, 255, 0.25) 85%,
    rgba(0, 208, 255, 0.575) 100%
  );
  filter: blur(8px);
  transition: opacity .25s ease;
}

.contact-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  background-color: #fff;
  z-index: 1; /* behind content */
  pointer-events: none;
}

/* Reveal halo on hover */
.contact-card:hover::before,
.contact-card:focus-within::before {
  opacity: 1;
}

/* Subtle lift on hover */
.contact-card:hover,
.contact-card:focus-within {
  transform: translateY(-2px);
}

/* Keep content above white mask */
.contact-card > * {
  position: relative;
  z-index: 2;
}





/* Services: mobile layout */
@media (max-width: 767px) {
  /* stack everything vertically in the order we want */
  #service-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px !important;
  }

  /* title first */
  #service-title {
    order: 1;
    margin: 0;                 /* keep it tight */
    font-size: 1.25rem;        /* optional: bump readability */
  }

  /* lottie second, constrained height but responsive */
  #service-lottie-container {
    order: 2;
    width: 100% !important;
    height: 220px;             /* adjust to taste (200–260) */
  }
  #service-lottie-container lottie-player {
    width: 100% !important;
    height: 100% !important;
  }

  /* text block third, full width */
  .service-text {
    order: 3;
    width: 100% !important;
    padding: 0 !important;
  }
  #service-description {
    margin-bottom: 10px;
    text-align: left;
  }
  .ticks-list {
    display: grid;
    grid-template-columns: 1fr;  /* full-width bullets */
    gap: 6px;
  }

}


/* Kill any hide/slide-up behavior from other scripts */
#header-placeholder header.always-visible {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* If some theme adds 'header-hidden' or similar, neutralize it */
#header-placeholder header.always-visible.header-hidden {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* SERVICE_OFFERINGS*/
/* parent card */
.offerings-wrap {
  border-radius: 18px;
  background:
    radial-gradient(900px 600px at -10% 20%, rgba(120, 200, 255, 0.45), transparent 70%),
    radial-gradient(800px 500px at 110% -10%, rgba(0, 174, 255, 0.411), transparent 70%),
    radial-gradient(600px 400px at 50% 120%, rgba(3, 28, 255, 0.35), transparent 80%),
    linear-gradient(180deg, rgba(161, 103, 255, 0.185) 0%,rgba(136, 178, 233, 0.349) 60%, rgba(240, 248, 255, 0.9) 100%);

  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
/* Force equal-height columns inside the card */
.offerings-wrap > .row.g-0{
  display: flex;
  align-items: stretch;
}

.offerings-hero{min-height:420px;background:#f7f7f9;display:flex;align-items:center;justify-content:center;;}
.offerings-hero img{width:100%;height:100%;object-fit:cover}
.offerings-body{padding:26px}

/* mini cards on the right */
.off-mini{border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:16px 18px;margin-bottom:18px;background:#fff}
.off-mini h5{font-size:18px;margin:0 0 6px;font-weight:700}
.off-mini p{margin:0 0 8px;color:#4c4f5a}
.off-mini ul{margin:0;padding-left:18px}
.off-mini li{margin:3px 0}
/* Ensure bullet symbols appear */
.off-mini ul {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
}
.off-mini ul li {
  list-style-type: disc;
  color: #333;
}

.offerings-wrap { position: relative; }  /* enable absolute positioning inside */
/* Partner logos main style (desktop) */
.partner-logos {
  position: relative;       /* remove absolute positioning */
  right: auto;
  bottom: auto;
  margin: 20px 0 0 auto;    /* move it below and align right */
  display: flex;
  flex-wrap: wrap;          /* allow multiple lines */
  gap: 10px;
  align-items: center;
  justify-content: flex-end; /* align logos to the right */
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  width: fit-content;       /* shrink-wrap content */
}


.partner-label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  opacity: 0.8;
  margin-right: 6px;
}


.partner-logos img {
  height: 26px;
  width: auto;
  object-fit: contain;
  display: block;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.partner-logos img:hover {
  transform: scale(1.08);
  opacity: 1;
}


@media (max-width: 991px) {
  .partner-logos {
    position: relative;
    margin: 16px auto 6px auto;
    justify-content: center;       
    width: fit-content;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: none;
    border-radius: 10px;
    padding: 6px 10px;
  }
  .partner-label {
    margin-right: 4px;
    font-size: 13px;
  }
  .partner-logos img {
    height: 22px;
  }
  .offerings-hero{
    min-height:20px;
    background:#f7f7f9;
    display:flex;
    align-items:center;
    justify-content:center;;}
  }

/* SERVICE_OFFERINGS*/


/* ##########################Banner partner logos strip ###########################*/
.partner-logos-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  background: rgb(255, 255, 255);
  padding: 10px 16px;
  border-radius: 10px;
  backdrop-filter: blur(6px);
  width: fit-content;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.partner-logos-banner .partner-label {
  font-size: 16px;
  font-weight: 600;
  color: #002fff;
  margin-right: 8px;
  white-space: nowrap;
}

.partner-logos-banner img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
  opacity: 0.95;
  transition: transform .2s ease, opacity .2s ease;
}

.partner-logos-banner img:hover {
  transform: scale(1.08);
  opacity: 1;
}

/* For mobile responsiveness */
@media (max-width: 768px) {
  .partner-logos-banner {
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
  }
  .partner-logos-banner .partner-label {
    font-size: 14px;
  }
  .partner-logos-banner img {
    height: 24px;
  }
}
/* ##########################Banner partner logos strip ###########################*/



/* ########################## Domain search ###########################*/
/* Gradient Glass Container */
.domain-search-wrap {
  border-radius: 20px;
  background:
    radial-gradient(900px 600px at -10% 20%, rgba(233, 246, 255, 0.45), transparent 70%),
    radial-gradient(800px 500px at 110% -10%, rgba(151, 221, 253, 0.411), transparent 70%),
    radial-gradient(600px 400px at 50% 120%, rgba(163, 172, 255, 0.35), transparent 80%),
    linear-gradient(180deg, rgba(221, 200, 255, 0.185) 0%, rgba(204, 226, 255, 0.349) 60%, rgba(240, 248, 255, 0.9) 100%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

/* Search Card */
#domain-search .card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#domain-search .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

/* Gradient Button */
.btn-gradient {
  background: linear-gradient(135deg, #007bff 0%, #00c2ff 100%);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  background: linear-gradient(135deg, #005ce6 0%, #00a6e0 100%);
  box-shadow: 0 4px 12px rgba(0, 136, 255, 0.3);
}

/* Input focus */
#domain-search input:focus, 
#domain-search select:focus {
  border-color: #00aaff;
  box-shadow: 0 0 0 0.15rem rgba(0, 174, 255, 0.25);
}

/* Result styling */
#result .alert-success {
  background: rgba(0, 255, 0, 0.08);
  border-left: 4px solid #28a745;
  border-radius: 10px;
}

#result .alert-danger {
  background: rgba(255, 0, 0, 0.08);
  border-left: 4px solid #dc3545;
  border-radius: 10px;
}


/*Header menu area design style */


/* ==================================
   MOBILE / TABLET (≤767px) — Modernized
   (Desktop untouched below)
================================== */
@media (max-width: 767px){

  /* Burger trigger (shown on mobile) */
  .header-area .menu-trigger{ display:block !important; cursor:pointer; }

  /* Main nav container */
  .header-area .main-nav{
    position:relative;
    display:flex;align-items:center;justify-content:space-between;
    height:100%;
    overflow:visible !important; z-index:1000;
    
  }

  /* Drawer panel */
  .header-area .main-nav .nav{
    display:none;                      /* becomes block with .active */
    position:absolute !important;
    top:100%; left:8px; right:8px;
    margin:0; padding:5px;
    background: linear-gradient(to right, #029df7 15%, #0059ff 60%, #0331af 100%);
    border-radius:14px;
    box-shadow:0 18px 40px rgba(0,0,0,.18);
    max-height:calc(100vh - 88px);
    overflow-y:auto;
    z-index:1100;
  }
  .header-area .main-nav .nav.active{ display:block !important; }

  .header-area .main-nav .nav li > a {
    background: linear-gradient(to right, #fffeff 15%, #ebf2ff 60%, #1e5aff 100%);
    color: white !important;
    border-radius: 10px;
    padding: 10px 15px;
    display: block;
    font-weight: 600;
  }

  /* Optional: remove the white border or shadow if any */
  .header-area .main-nav .nav li {
    background: none !important;
    border: none !important;
  }

  /* Adjust arrow color and distance */
  .header-area .main-nav .nav li .arrow {
    color: white !important;   /* make arrow white */
    margin-top: 2px;           /* reduce distance from menu text */
    font-size: 16px;
  }

  /* Submenu styling (keep consistent) */
  .header-area .main-nav .nav li ul {
    background: linear-gradient(to right, #029df7 15%, #0059ff 60%, #0331af 100%);
    border-radius: 10px;
  }


  /* Top-level rows */
  .header-area .main-nav .nav > li{
    width:100%;
    list-style:none;
    margin:6px 0;
    border:1px solid #0212ff;
    /* background:#f7f8fb; */
     background: linear-gradient(to right, #029df7 15%, #0059ff 60%, #0331af 100%);
    border-radius:12px;
    overflow:hidden;
  }
  .header-area .main-nav .nav > li > a{
    display:flex; align-items:center; gap:10px;
    padding:14px 16px !important;
    line-height:1.3;
    color:#191a20 !important;
  }
  /* .header-area .main-nav .nav > li > a:hover{
    background:#eef5ff !important;   
    color:#0d6efd !important;
  } */

  /* Optional chevron for parents (all top-level get it for consistency) */
  .header-area .main-nav .nav > li > a::after{
    content:"›";
    margin-left:auto; font-size:18px; line-height:1;
    transform:rotate(90deg);
    color:#6b7280;
    transition:transform .2s ease,color .2s ease;
  }
  .header-area .main-nav .nav > li.open > a::after{
    transform:rotate(-90deg); color:#0d6efd;
  }

  /* Submenus (accordion) */
  .header-area .main-nav .nav > li > .submenu{
    position:static !important;
    display:block;            /* keep in flow, animate via max-height */
    max-height:0;
    overflow:hidden;
    /* background:#fff; */
     background: linear-gradient(to right, #029df7 15%, #0059ff 60%, #0331af 100%);
    border-top:1px solid #0355fa;
    transition:max-height .25s ease;
    padding:0 8px;
    margin:0;
    border-radius:0;
  }
  .header-area .main-nav .nav > li.open > .submenu,
  .header-area .main-nav .nav > li > .submenu.open{
    max-height:1000px;        /* large enough to reveal all items */
  }

  /* Normalize submenu items (fix left indent/marker) */
  .header-area .main-nav .nav .submenu li{
    display:block !important;
    list-style:none !important;
    margin:0; padding:0;
  }

  /* Submenu links (soft “pill” look) */
  .header-area .main-nav .nav > li > .submenu a{
    display:block;
    margin:8px 6px;
    padding:12px 14px 12px 18px !important;
    /* background:#f3f5f9 !important; */
     background: linear-gradient(to right, #022ff7 15%, #0059ff 60%, #91aefd 100%);
    border-radius:10px;
    color:#ffffff !important;
    transition:background .15s ease, transform .05s ease, color .15s ease;
  }
  .header-area .main-nav .nav > li > .submenu a:hover{
    background:#e9f0ff !important;
    color:#0d6efd !important;
  }
  .header-area .main-nav .nav > li > .submenu a:active{
    transform:translateY(1px);
  }

  /* Disable desktop hover-open logic on mobile */
  .nav li:hover .submenu:not(.open){ display:block; }
}

/* ==================================
   DESKTOP (≥768px) — UNTOUCHED
   (your original rules kept as-is)
================================== */
@media (min-width: 768px){
  .header-area .main-nav .nav{
    display:flex !important;
    position:static !important;
    box-shadow:none;
  }

  .header-area .main-nav .nav > li.services-menu{ position:relative; }

  .header-area .main-nav .nav > li.services-menu > .submenu{
    left:50%; transform:translateX(-50%);
    top:100%;
    position:absolute;
    z-index:999;
    display:none; /* hidden by default */
  }

  .header-area .main-nav .nav > li.services-menu:hover > .submenu{
    display:grid !important;
    grid-auto-flow:column;
    grid-template-rows:repeat(5,auto); /* adjust as needed */
    grid-auto-columns:auto;
    white-space:nowrap;
    border-radius:6px;
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
  }
}
/* ===== MOBILE (≤767px): make "Request Demo" text black ===== */
@media (max-width: 767px){
  .header-area .border-first-button a {
    color: #000 !important;          /* text color black */
    border-color: #000 !important;   /* optional: match border */
    /*background: #fff !important;      ensure background is white */
    background: linear-gradient(to right, #fbfcff 15%, #ffffff 60%, #91aefd 100%);

  }

  /* optional: hover effect for consistency */
  .header-area .border-first-button a:hover {
    color: #0d6efd !important;       /* your brand blue on hover */
    border-color: #0d6efd !important;
  }
}

/* Perfect vertical centering inside mobile pills */
@media (max-width: 767px){
  .header-area .main-nav .nav > li > .submenu a{
    display: flex !important;
    align-items: center;              /* vertical centering */
    justify-content: flex-start;      /* keep text left-aligned */
    min-height: 38px;                 /* consistent pill height */
    padding: 12px 16px !important;    /* balanced padding */
    line-height: 1.0;                 /* avoid tall baseline */
  }


  .header-area .main-nav .nav > li > .submenu,
  .header-area .main-nav .nav > li > .submenu ul{
    padding-inline-start: 0 !important;
  }
  .header-area .main-nav .nav .submenu li{
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ===== DESKTOP: show a white down-arrow under items that have a submenu ===== */
/* ===== DESKTOP arrow + dropdown alignment ===== */

#currency-select, 
#currency-select option {
  font-family: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", 
                "Noto Color Emoji", system-ui, sans-serif !important;
  font-size: 1rem;
  line-height: 1.2em;
}





/* ===== Portfolio Card with Glow Effect (fixed) ===== */
.portfolio-card {
  position: relative; /* required for ::before pseudo-element */
  display: flex;
  flex-direction: column;

  background: #fff;
  border-radius: 14px;
  /* IMPORTANT: allow halo to render outside the card */
  overflow: visible;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 310px; /* slightly taller for better image balance */
  /* keep the glow (z-index:-1) contained to this element’s stacking context */
  isolation: isolate;
}

/* Multicolor glow (same palette as .service-content::before) */
.portfolio-card::before {
  content: "";
  position: absolute;
  inset: -3px; /* how far the halo spreads */
  border-radius: 16px; /* tiny bump for smoother edge outside */
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 210, 255, 0.7) 0%,
    rgba(0, 123, 255, 0.55) 20%,
    rgba(117, 43, 255, 0.5) 40%,
    rgba(164, 130, 255, 0.45) 55%,
    rgba(0, 140, 255, 0.733) 70%,
    rgba(0, 183, 255, 0.25) 85%,
    rgba(0, 208, 255, 0.575) 100%
  );
  filter: blur(8px);
  transition: opacity .25s ease, transform .25s ease;
  z-index: -1; /* sit behind the white card */
  transform: scale(0.995); /* keeps glow tight until hover */
}

.portfolio-card:hover::before {
  opacity: 1;        /* show glow on hover */
  transform: scale(1);
}

.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

/* IMAGE AREA */
.card-image {
  flex: 1;
  overflow: hidden; /* move clipping here so image corners stay rounded */
  background-color: #f4f6fa;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* fills card evenly */
  transition: transform 0.4s ease;
}

.portfolio-card:hover .card-image img {
  transform: scale(1.05);  /* subtle zoom */
}

/* CONTENT AREA */
.card-content {
  background-color: #f9fafc;
  padding: 18px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-shrink: 0;
  /* match bottom rounding since outer overflow is visible now */
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  position: relative;
  z-index: 1; /* keep content above glow */
}

.card-text h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 5px;
  line-height: 1.3;
  min-height: 2.6em;  /* ensures space for 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-text span {
  color: #6c757d;
  font-size: 0.9rem;
}

/* BUTTON */
.view-btn {
  margin-top: 12px;
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: #fff !important;
  border: none;
  align-self: center;
  padding: 8px 20px;
  border-radius: 25px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.view-btn:hover {
  background: linear-gradient(135deg, #0056b3, #004099);
  transform: scale(1.05);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .portfolio-card {
    height: 390px;
  }
  .card-text h4 {
    font-size: 0.95rem;
  }
  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* fills card evenly */
    transition: transform 0.4s ease;
  }
}
/* ===== New portfolio style END ===== */

/* ===== New portfolio style, new project style END===== */




/* Logo strip */

/* Logo strip */
.brand-strip .swiper { width: 100%; }
.brand-strip .swiper-slide { display:flex; align-items:center; justify-content:center; }
.brand-strip img { max-height: 48px; width:auto; object-fit:contain; filter: grayscale(100%); opacity:.8; }

/* Testimonial cards */
.testimonial-card { 
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; 
  padding:14px; height:100%; box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.t-header { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.t-avatar { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.t-logo { max-height:40px; width:auto; object-fit:contain; margin-left:auto; }
.t-title { font-size:1.05rem;   line-height: 1.3; min-height: 2.6em;  margin:8px 0 6px; }
.t-quote { font-style:italic; line-height: 1.3; min-height: 6.0em; margin:6px 0 12px; }
.t-client { font-weight:600; color:#444; }