@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
a { color: #1a3ad6; outline: none; }
a:focus, a:hover { color: #0d1e67; outline: none; }
ins { background: #fff9c0; text-decoration: none; }
img { max-width: 100%; height: auto; }
pre { background: #eeeeee; padding: 15px; border: 1px solid #eeeeee; }
hr { margin: 0; padding: 0px; border-bottom: 1px solid #e0e0e0; border-top: 0px; }
blockquote { padding: 15px 30px; border: 1px solid #f2f2f2; border-radius: 5px; border-left: 5px solid #0d1e67; margin-bottom: 30px; }
blockquote cite { font-family: 'Poppins', sans-serif; font-weight: bold; color: #0d1e67; }
blockquote ol:last-child, blockquote p:last-child, blockquote ul:last-child { margin-bottom: 0; }
blockquote .blockquote-footer { font-style: italic; color: #6c757d; font-size: 14px; margin-top: 10px; }
blockquote .blockquote-footer cite { color: #0d1e67; }
blockquote span.text-right { text-align: right; display: block; color: #0d1e67; }
p { margin-bottom: 20px; }

/* Lists (Nested) */
ol, ul { padding-left: 5px; margin-bottom: 1em; }
ol li { list-style: decimal; }
ol ol { padding-left: 25px; }
ul li { list-style: none; }
.flex-content ul li { list-style: inherit; line-height: 21pt; }
/* Definition Lists */
dl dd { margin-bottom: 15px; }
dl dd:last-child { margin-bottom: 0px; }
.m-2 { margin: 2px;}
.m-5 { margin: 5px;}
.m-10 { margin: 10px;}
.mb-5 { margin-bottom: 5px;}
.mb-10 { margin-bottom: 10px;}
.mb-20 { margin-bottom: 20px;}
.mb-30 { margin-bottom: 30px;}
.mb-50 { margin-bottom: 50px;}
.p-10 { padding: 10px; }
.p-20 { padding: 20px; }
.p-30 { padding: 30px; }
.p-50 { padding: 50px; }
.pt-60 { padding-top: 40px;} 
.ptb-40 { padding-top: 40px; padding-bottom: 40px;}
.ptb-60 { padding-top: 60px; padding-bottom: 60px;}
.ptb-100 { padding-top: 100px; padding-bottom: 100px;}
@media only screen and (max-width: 767px) {
 .ptb-100 {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
 }
 .mt-120 {
    margin-top: 30px !important;
 }
}
.pb-5x { padding-bottom: 5px;}
.pt-10 { padding-top: 10px;}
.pt-20 { padding-top: 20px;}
.pb-10 { padding-bottom: 10px;}
.pb-20 { padding-bottom: 20px;}
.pb-30 { padding-bottom: 30px;}
.pb-60 { padding-bottom: 60px;}
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-20 { padding-left: 20px;}
.pr-10 { padding-right: 10px;}
.pr-20 { padding-right: 20px;}
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px !important; }
.mt-30 { margin-top: 30px; }
.mt-50 { margin-top: 50px; }
.mb-20 { margin-top: 20px; }
.mtb-60 { margin-top: 60px !important; margin-bottom: 60px !important;}
.mt-80 { margin-top: 80px !important;}
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }
.mt-140 { margin-top: 140px !important; }
.h-space { padding-top: 20px;}
/* Table */
table { border: 1px solid #eaeaea; width: 100%; margin-bottom: 20px; }
table td, table th { border: 1px solid #eaeaea; padding: 5px 8px; text-align: center; }
/* Tablet */
@media (max-width: 991px) {
  .ptb-60 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .ptb-60 {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .footer-content .logo img {
    width: 100%;
    height: auto;
  }
}

/*---------------------------------------------------------------------
  Header
-----------------------------------------------------------------------*/

.header{

    display: block;
     width: 100%;
            position: relative;
            z-index: 99;
                height: 72px;
    display: flex;
    align-items: center;
            box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
            background: white;

}
.header-item .btn { 
    border: 1px solid #1a3ad6 !important;
    color: #fff !important; 
    transition: transform 0.3s ease;
    background: #0806AA; 
    border-radius: 8px;
}
.header-item .btn:hover { 
   cursor: pointer;
    transform: scale(1.05);
}
.header .item-left {
    width: 17%;
    text-align: left;
    align-items: center;
    display: flex
;
}

       header .item-center {
            width: 66%;
            /* text-align: center; */
        }

       header .item-right {
            width: 17%;
            text-align: right;
        }
.header .item-right a{ 
     text-decoration: none;
     font-size: 16px;
     color:#fff;
     display: inline-block;
     margin-left: 10px;
     transition: color 0.3s ease;
}
.header .menu > ul > li{
	display: inline-block;
	line-height: 50px;
	margin-left: 25px;
}
.header .menu > ul {
  padding-left: 5px !important;
  margin: 0;  
  /* display: flex;
  justify-content: space-between; */
}
.header .menu > ul > li > a{
	font-size: 15px;
	font-weight: 500;
	color:#000000;
	position: relative;
	text-transform: capitalize;
	transition: color 0.3s ease;
}
.header .menu > ul > li .sub-menu{
	position: absolute;
	z-index: 500;
	background-color:#ffffff;
	box-shadow: -2px 2px 70px -25px rgba(0,0,0,0.3); 
	padding: 10px 20px;
	transition: all 0.5s ease;
	margin-top:25px;
	opacity:0;
	visibility: hidden;
}
@media(min-width: 992px){
.header .menu > ul > li.menu-item-has-children:hover .sub-menu{
	margin-top: 0;
	visibility: visible;
	opacity: 1;
}
.header .menu > ul {
  display: flex;
  justify-content: end;
}
}
.header .menu > ul > li .sub-menu > ul > li{
	line-height: 1;
}
.header .menu > ul > li .sub-menu > ul > li > a{
	display: inline-block;
	padding: 10px 0;
	font-size: 15px;
	color: #1a1a1a;
	transition: color 0.3s ease;
	text-decoration: none;
	text-transform: capitalize;
  line-height: 1.3;
}
.header .menu > ul > li > a:hover {
    color: #1a3ad6;
}
.header .menu > ul > li .sub-menu > ul > li:hover > a { color: #1a3ad6; }
.header .menu > ul > li .single-column-menu{
	min-width: 175px;
	max-width: 240px;
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li{
   line-height: 1;
   display: block; 
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a {
	padding:10px 0;
	display: inline-block;
	font-size: 15px;
	color:#555555;
	transition: color 0.3s ease;
}
.header .menu > ul > li .sub-menu.mega-menu{ 
    left: 50%;
    transform: translateX(-50%);	
}

.header .menu > ul > li .sub-menu.mega-menu-column-4{
  max-width: 1100px;
  width: 100%; 	
  display: flex;
  flex-wrap: wrap;
  padding:20px 15px;
}
.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
  flex:0 0 25%;
  padding:0 15px;
}
.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item .title{
	font-size: 16px;
	color: #1a3ad6;
	font-weight: 500;
	line-height: 1;
	padding:10px 0;
}
.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center .title{
	text-align: center;
}
.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img{
	max-width: 100%;
	width: 100%;
	vertical-align: middle;
	margin-top: 10px;
	height: 300px;
	object-fit: cover;
}
.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a:hover,
.header .menu > ul > li .sub-menu > ul > li > a:hover,
.header .item-right a:hover,
.header .menu > ul > li:hover > a{
	color:#1a1a1a;
}

.menu-main .menu-item-has-children ul li a.active {
    color: #1a3ad6;                 /* highlight text */
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
    display: block;
    position: relative;
}
.mobile-menu-head,
.mobile-menu-trigger{
	display: none;
}

/*responsive*/
@media(max-width: 991px){

	.header .item-center{
		order:3;
		flex:0 0 100%;
	}
	.header .item-left {
    width: 50% !important;
    text-align: left;
    align-items: center;
    display: flex;
}
 .header .item-right {
    width: 50% !important;
    text-align: right;
    align-items: center;
}
	.v-center{
		justify-content: space-between;
	}
	    .header .mobile-menu-trigger {
        display: flex;
        height: 30px;
        margin: 0 auto;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        float: right;
        right: 20px;
        position: absolute;
        top: 20px;
    }
	.header .mobile-menu-trigger span{
		display: block;
		height: 2px;
		background-color: #333333;
		width: 24px;
		position: relative;
	}
	.header .mobile-menu-trigger span:before,
	.header .mobile-menu-trigger span:after{
		content: '';
		position: absolute;
		left:0;
		width: 100%;
		height: 100%;
		background-color: #333333;
	}
	.header .mobile-menu-trigger span:before{
		top:-6px;
	}
	.header .mobile-menu-trigger span:after{
		top:6px;
	}
	.header .item-right{
		align-items: center;
	}
	.header .menu{
		position: fixed;
		width: 320px;
		background-color:#ffffff;
		left:0;
		top:0;
		height: 100%;
		overflow: hidden;
		transform: translate(-100%);
		transition: all 0.5s ease;
		z-index: 9999 !important;
	}
	.header .menu.active{
	   transform: translate(0%);	
	}
	.header .menu > ul > li{
		line-height: 1;
		margin:0;
		display: block;
	}
	.header .menu > ul > li > a{
		line-height: 50px;
		height: 50px;
		padding:0 50px 0 15px;
		display: block;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.header .menu > ul > li > a i{
		position: absolute;
		height: 50px;
		width: 50px;
		top:0;
		right: 0;
		text-align: center;
		line-height: 50px;
		transform: rotate(-90deg);
	}
	.header .menu .mobile-menu-head{
		display: flex;
		height: 50px;
		border-bottom: 1px solid rgba(0,0,0,0.1);
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 501;
		position: sticky;
		background-color: #ffffff;
		top:0;
	}
	.header .menu .mobile-menu-head .go-back{
		height: 50px;
		width: 50px;
		border-right: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:#000000;
		font-size: 16px;
		display: none;
	}
	.header .menu .mobile-menu-head.active .go-back{
		display: block;
	}
	.header .menu .mobile-menu-head .current-menu-title{
		font-size: 15px;
		font-weight: 500;
		color:#000000;
	}
	.header .menu .mobile-menu-head .mobile-menu-close{
	    height: 50px;
		width: 50px;
		border-left: 1px solid rgba(0,0,0,0.1);
		cursor: pointer;
		line-height: 50px;
		text-align: center;
		color:#000000;	
		font-size: 25px;
	}
	.header .menu .menu-main{
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.header .menu > ul > li .sub-menu.mega-menu,
	.header .menu > ul > li .sub-menu{
		visibility: visible;
		opacity: 1;
		position: absolute;
		box-shadow: none;
		margin:0;
		padding:15px;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		padding-top: 65px;
		max-width: none;
		min-width: auto;
		display: none;
		transform: translateX(0%);
		overflow-y: auto;
	}
  .header-item .btn {
    display: none;
  }
  .header {
    box-shadow: none;
    background: none;
  }
  @media (min-width: 768px) and (max-width: 991px) {
    .header .item-left img {
        width: 60% !important; /* or your preferred tablet size */
        padding-left: 0px;
    }
  }
  @media (max-width: 767px) {
    .header .item-left img {
        width: 100% !important;
        padding-left: 10px;
    }
  }
.header .menu > ul > li .sub-menu.active{
	display: block;
}
@keyframes slideLeft{
	0%{
		opacity:0;
		transform: translateX(100%);
	}
	100%{
	    opacity:1;
		transform: translateX(0%);	
	}
}
@keyframes slideRight{
	0%{
		opacity:1;
		transform: translateX(0%);
	}
	100%{
	    opacity:0;
		transform: translateX(100%);	
	}
}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item img{
		margin-top:0;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center .title{
		margin-bottom: 20px;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item.text-center:last-child .title{
		margin-bottom:0px;
	}
	.header .menu > ul > li .sub-menu.mega-menu-column-4 > .list-item{
		flex: 0 0 100%;
        padding: 0px;
	}
	.header .menu > ul > li .sub-menu > ul > li > a,
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul > li > a{
		display: block;
	}
	.header .menu > ul > li .sub-menu.mega-menu > .list-item > ul {
		margin-bottom: 15px;
	}
	.menu-overlay{
		position: fixed;
		background-color: rgba(0,0,0,0.5);
		left:0;
		top:0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		visibility: hidden;
		opacity:0;
		transition: all 0.5s ease;
	}
	.menu-overlay.active{
	  visibility: visible;
	  opacity:1;	
	}
}

/* ===== Fixed Header ===== */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  z-index: 99999999; /* increased for all devices */
  background: #ffffff;
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s ease;
}

/* Shadow when scrolling */
.fixed-header.scrolled {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 10px;
}

body {
  padding-top: 72px;
}
/*--------------------------------------------------------------
Banner Service
--------------------------------------------------------------*/
.inner-section {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.help-chooser {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #f9f9ff;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.chooser-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

/* Title */
.chooser-item.title {
  background: transparent;
  color: #1a1a1a;
  font-weight: 400;
  font-size: 14px;
  padding: 0 6px;
}

/* Non-clickable items */
.chooser-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 9999px;
  background: #eef2ff;
  color: #1a3ad6;
  font-weight: 500;
  font-size: 12px;
  cursor: default;        /* no pointer */
  user-select: none;      /* optional */
}

/* Optional hover (visual only – no click) */
.chooser-item:not(.title):hover {
  background: #1a3ad6;
  color: #ffffff;
}

.chooser-icon {
  font-size: 16px;
  line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .chooser-container {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
Client Logo
--------------------------------------------------------------*/
.logo-section {
  padding: 10px 40px;
}

/* Grid layout */
.logos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  align-items: center;
  justify-items: center;
}

/* Logo container */
.logo-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  width: 75%;
  transition: all 0.3s ease;
}

/* Logo images */
.logo-item img {
  width: 100%;
  height: auto;
  transition: filter 0.4s ease, transform 0.3s ease;
}

/* --- Grey Filters --- */
.grey-1 img {
  filter: grayscale(100%) brightness(85%) contrast(95%);
}

.grey-2 img {
  filter: grayscale(100%) brightness(75%) contrast(90%);
}

/* --- Hover Effect (on entire section) --- */
.logo-section:hover .logo-item img {
  filter: none;
}

/* --- Responsive adjustments --- */
@media (max-width: 992px) {
  .logos-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
  }
}

@media (max-width: 768px) {
  .logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .logo-section {
    padding: 40px 30px;
  }
  .logo-item {
    height: 70px;
  }
}

@media (max-width: 480px) {
  .logos-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .logo-section {
    padding: 30px 20px;
  }
  .logo-item {
    height: 60px;
    max-width: 200px;
    margin: 0 auto;
  }
  
}

@media (max-width: 480px) {
  img {
    width: 100% !important;
    height: auto !important;
  }
}

@media screen and (max-width: 1024px) {
  .logo-section,
  .inner-section {
    display: none;
  }
}

/*--------------------------------------------------------------
Stats Container
--------------------------------------------------------------*/
.counter-section { display: flex; align-items: flex-start; gap: 20px; }
.icon-container { flex-shrink: 0; width: 80px; height: 80px; background: #1a3ad6; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: white; font-size: 2rem; }
.content-container { flex: 1; }
.content-container p {font-size: 1.1rem; color: #212121; line-height: 1.7; }
.counter-section .content-container h4 {
font-family: 'Roboto', sans-serif !important;
color: #142149 !important;
font-size: 1.7rem !important;
margin-top: 25px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .counter-section { flex-direction: column; text-align: center; padding: 30px; }
    .icon-container { width: 70px;  height: 70px; font-size: 1.7rem; align-self: center; }
}
@media (max-width: 576px) {
    .counter-section { padding: 25px 20px; }
    .content-container p { font-size: 1rem; text-align: center; }
    .content-container { text-align: center; justify-content: center; align-items: center;}
}

.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: right; }
.stat-item { position:relative; text-align: center; padding: 20px; }
.stat-item:last-child { border-right: none; }
.stat-item::after {
  content: "";
  position: absolute;
  top: 10%;          /* start 20% from top */
  bottom: 10%;       /* end 20% before bottom */
  right: 0;          /* stick to the right side */
  width: 1px;
  background-color: #2121211e;
}
.stat-item:last-child::after {
  display: none;
}
.stat-value { font-size: 2.5rem; font-weight: 800; color: #212121; margin-bottom: 15px; line-height: 1; }
.stats-grid .stat-label { font-size: 1.1rem; color: #666 !important; margin-bottom: 20px; font-weight: 500; }
/* Responsive adjustments */
@media (max-width: 992px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .stat-value { font-size: 2rem; }
}
@media (max-width: 576px) {
  .stats-grid { grid-template-columns: 1fr; }
  .stat-value { font-size: 1.5rem; }
  .stat-item::after { display: none; }
}
/*--------------------------------------------------------------
 Flagship Container
--------------------------------------------------------------*/
.flagship-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 40px; }
.flag-card-1 { background: linear-gradient(to bottom, #9ACFF5 0%, #DAF6FF 100%); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; }
.flag-card-2 { background: linear-gradient(to bottom, #A5EBCA 0%, #E3F6EA 100%); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; }
.flag-card-3 { background: linear-gradient(to bottom, #75AFD9 0%, #DAF6FF 100%); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 15px; transition: transform 0.3s ease, box-shadow 0.3s ease; text-align: center; }
.flag-card-header { display: flex; justify-content: center; align-items: center; margin-bottom: 20px; }
.flag-card-title { font-size: 0.8rem; font-weight: 400; color: #1a1a1a; text-transform: uppercase; letter-spacing: 1px; background-color: #f5f5f5; padding: 5px 10px; border-radius: 10px; }
.flagship-container .flag-service { font-size: 1.5rem !important; font-weight: 700 !important; margin-bottom: 10px; color: #1a1a1a; }
.flag-service-description { color: #1a1a1a; margin-bottom: 20px; font-size: 1rem; }
.flag-learn-more { display: inline-block; background-color: transparent; border: 1px solid #1a3ad6; color: #1a3ad6; padding: 12px 16px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; font-size: 1rem; }
.flag-service-description .flag-learn-more a { font-size: 1rem;}
.flag-learn-more:hover { cursor: pointer; transform: scale(1.03); }
.flag-image img { bottom: 0px; }
/* Responsive adjustments */
@media (max-width: 768px) {
  .flagship-container { grid-template-columns: 1fr; }      
  .flag-card { padding: 20px; }
}
@media (max-width: 480px) {
  .flag-service { font-size: 1.3rem; }
  .flagship-container .flag-service { font-size: 1.2rem !important; }
}

/*--------------------------------------------------------------
How it works - Process
--------------------------------------------------------------*/
.process-section { padding: 10px 10px; }
.steps-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.step-item { text-align: center; padding: 10px 0px; }
.step-number { display: inline-flex; justify-content: center; align-items: center; width: 35px; height: 35px; background: #1a3ad6; color: white; border-radius: 50%; font-size: 1rem; font-weight: 600; margin-bottom: 25px; }
.step-title { font-size: 1rem; font-weight: 600; color: #1a1a1a; margin-bottom: 15px; }
.step-desc { font-size: 1rem; color: #666; line-height: 1.6; }
/* Responsive adjustments */
@media (max-width: 992px) {
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .steps-grid { grid-template-columns: 1fr; gap: 30px; }
    .process-section { padding: 30px 20px; }    
    .step-title { font-size: 1.3rem; }
}


.compliance-badges {
  display: flex;
  flex-wrap: nowrap;        /* desktop: single row */
  overflow-x: auto;         /* desktop: horizontal scroll */
  gap: 30px;
  padding-bottom: 10px;
  scrollbar-width: thin;    /* Firefox */
  justify-content: center;
}

.compliance-badges::-webkit-scrollbar {
  height: 6px;
}

.badge {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.badge img {
  width: 150px;
  height: auto;
  object-fit: contain;
}

/* =========================
   TABLET (3 in a row)
   ========================= */
@media (max-width: 991px) {
  .compliance-badges {
    flex-wrap: wrap;       /* allow wrapping */
    overflow-x: hidden;    /* remove scroll */
    justify-content: center;
  }

  .badge {
    flex: 0 0 33.333%;     /* 3 per row */
  }

  .badge img {
    width: 140px;
  }
}

/* =========================
   MOBILE (2 in a row)
   ========================= */
@media (max-width: 600px) {
  .badge {
    flex: 0 0 50%;         /* 2 per row */
  }

  .badge img {
    width: 120px;
  }
}

/*--------------------------------------------------------------
dg-benefits
--------------------------------------------------------------*/
/* MAIN WRAPPER */
.dg_benefits {
    display: flex;
    align-items: center;          /* Vertically center both sides */
    gap: 40px;
}

/* 50% / 50% Layout */
.dg-image-side,
.dg-content-side {
    flex: 1;
    display: flex;
    align-items: center;          /* Center content vertically */
}

/* IMAGE WRAPPER */
.dg-image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;      /* Center image horizontally */
    align-items: center;          /* Center image vertically */
    padding: 20px;
}

/* IMAGE */
.dg-image-wrapper img {
    width: 100%;
    max-height: 500px;
    object-fit: contain;          /* Prevent stretching */
    border-radius: 12px;
}

/* BENEFITS LIST */
.dg_benefits-grid {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dg_benefits-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid #e8e8e8;
}

.dg_benefits-icon i {
    font-size: 28px;
    color: #1a3ad6;
}

.dg_benefits-title {
    margin: 0;
    font-size: 1.1rem !important;
    font-weight: 600;
}

.dg_benefits-text p {
    margin: 5px 0 0;
}

/* RESPONSIVE BREAKPOINTS */

/* Tablet */
@media (max-width: 991px) {
    .dg_benefits {
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .dg_benefits {
        flex-direction: column;
    }

    .dg-image-wrapper {
        height: auto;
    }

    .dg-image-wrapper img {
        height: auto;
        max-height: 300px;        /* Keep image clean on mobile */
    }

    .dg_benefits-title {
    margin: 0;
    font-size: 1rem !important;
    font-weight: 600;
}
}

.key-features .dg_benefits-item {
        border-bottom: 1px solid #e8e8e8;
}

.integrations .row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.int-text {
    flex: 1;
    max-width: 500px;
}

.int-img {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.int-img img {
    max-width: 70%;
    height: auto;
}


@media (max-width: 768px) {
    .integrations .row {
        flex-direction: column;
        text-align: center;
    }
    
    .int-text, .int-img {
        max-width: 100%;
    }
} 

    .h-feature-section {
      position: relative;
      min-height: 100vh;
      background: radial-gradient(circle at 20% 30%, #0a0a0f, #040407, #000);
      padding: 6rem 1.5rem;
      overflow: hidden;
    }

    /* ===== Floating Gradient Orbs ===== */
    .orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(120px);
      opacity: 0.5;
      animation: float 10s ease-in-out infinite;
    }

    .orb-blue {
      top: 25%;
      left: 25%;
      width: 400px;
      height: 400px;
      background: rgba(50, 100, 255, 0.25);
    }

    .orb-cyan {
      bottom: 25%;
      right: 25%;
      width: 400px;
      height: 400px;
      background: rgba(0, 255, 255, 0.25);
      animation-delay: 2s;
    }

    .orb-light {
      top: 50%;
      left: 50%;
      width: 400px;
      height: 400px;
      background: rgba(173, 216, 255, 0.1);
      animation: glow 6s ease-in-out infinite alternate;
    }

    /* ===== Grid Overlay ===== */
    .grid-lines {
      position: absolute;
      inset: 0;
      background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 64px 64px;
      z-index: 1;
    }

    /* ===== Content Wrapper ===== */
    .feature-container {
      position: relative;
      z-index: 2;
      max-width: 1100px;
      margin: 0 auto;
      text-align: center;
    }

    /* ===== Header ===== */
    .header .tag {
      display: inline-block;
      padding: 0.5rem 1rem;
      background: linear-gradient(90deg, #1a3ad6, #00ffff);
      border-radius: 9999px;
      font-weight: 600;
      font-size: 0.9rem;
      box-shadow: 0 0 15px rgba(26, 58, 214, 0.4);
    }

    .h-feature-section .header h2 {
      font-size: 3rem;
      margin: 1rem 0;
      line-height: 1.2;
    }

    .h-feature-section .title-main {
      color: white;
      background: linear-gradient(to right, #fff, #ddd);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .h-feature-section .title-gradient {
      background: linear-gradient(90deg, #3b82f6, #06b6d4, #2563eb);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .h-feature-section .header p {
      color: rgba(255, 255, 255, 0.6);
      font-size: 1.2rem;
      max-width: 600px;
      margin: 0 auto;
    }

    /* ===== Cards Grid ===== */
    .h-feature-section .cards {
      margin-top: 4rem;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
    }

    /* ===== Individual Card ===== */
    .h-feature-section .card {
      position: relative;
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 1.5rem;
      background: rgba(255, 255, 255, 0.04);
      backdrop-filter: blur(10px);
      padding: 2rem;
      transition: all 0.4s ease;
      overflow: hidden;
      text-align: center;
      align-items: center;
    }

    .h-feature-section .card:hover {
      transform: scale(1.05);
      border-color: rgba(26, 58, 214, 0.6);
      background: rgba(255, 255, 255, 0.08);
      box-shadow: 0 10px 40px rgba(26, 58, 214, 0.3);
    }

    /* ===== Icon ===== */
    .h-feature-section .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1a3ad6, #06b6d4);
      border-radius: 1rem;
      padding: 1rem;
      transition: transform 0.3s ease;
      margin-bottom: 1rem;
    }

    .h-feature-section .card:hover .icon {
      transform: scale(1.1) rotate(3deg);
      box-shadow: 0 0 25px rgba(26, 58, 214, 0.5);
    }

    .h-feature-section .icon svg {
      width: 48px;
      height: 48px;
      stroke: white;
      stroke-width: 2.5;
      fill: none;
    }

    /* ===== Card Title ===== */
    .h-feature-section .card h3 {
      font-size: 1.1rem !important;
      font-weight: 600;
      color: white !important;
      line-height: 1.4;
    }

    /* ===== Bottom Gradient Line ===== */
    .h-feature-section .bottom-line {
      margin-top: 4rem;
      height: 2px;
      width: 100%;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
      opacity: 0.6;
    }

    /* ===== Animations ===== */
    @keyframes float {
      0%,
      100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-30px);
      }
    }

    @keyframes glow {
      0% {
        opacity: 0.2;
        transform: scale(1);
      }
      100% {
        opacity: 0.5;
        transform: scale(1.1);
      }
    }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .h-feature-section .header h2 {
        font-size: 2.2rem;
      }
      .h-feature-section .card {
        padding: 1.5rem;
      }
    }


/*--------------------------------------------------------------
Work flow
--------------------------------------------------------------*/

.flow-wrap {
    max-width:1200px;
    margin:0 auto;
  }

  .flow-wrap h2 { line-height: 1.8; }
  .flow-steps {
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:28px 10px;
    min-height:160px;
  }

  .flow-steps::before{
    content:"";
    position:absolute;
    left:3%;
    right:3%;
    top:50%;
    height:6px;
    background:#dbeafe;
    border-radius:6px;
    transform:translateY(-50%);
    z-index:1;
  }

 
  .flow-step {
    position:relative;
    flex: 1 1 22%;            
    min-width:180px;           
    background: #fff;
    border-radius:12px;
    padding:28px 18px 24px;
    box-shadow: 0 6px 18px rgba(15,23,42,0.06);
    text-align:center;
    z-index:2;                 
    transition:transform .18s ease, box-shadow .18s ease;
  }

  .flow-step:hover{
    transform:translateY(-8px);
    box-shadow: 0 12px 30px rgba(2,6,23,0.12);
  }

  .flow-number {
    background: #1a3ad6;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

  /* .flow-step::before{
    content:"";
    position:absolute;
    left:50%;                  
    top: 0;                   
    transform:translate(-50%,-50%);
    width:44px;
    height:44px;
    background: #fff;
    border-radius:50%;
    border:4px solid #dbeafe;
    box-sizing:border-box;
    z-index:3;                 
  } */
 
  /* .flow-step::after{
    content: attr(data-flow-step);
    position:absolute;
    left:50%;
    top: 0;
    transform:translate(-50%,-50%);
    z-index:4;
    font-weight:700;
    color:#1a3ad6 !important;
    font-size:1rem;
    line-height:1;
    pointer-events:none;
  } */

  .flow-step .title{
    margin-top:8px;           
    font-size:1.05rem;
    font-weight:600;
    color:#0f172a;
  }

  .flow-step .desc{
    margin:12px 6px 0 6px;
    color:#1a1a1a;
    font-size:0.95rem;
    line-height:1.45;
  }

  /* .flow-step.active::before{
    border-color:#1a3ad6;
    box-shadow: 0 2px 10px rgba(37,99,235,0.12);
  } */

  .flow-step.active::after{
    color:#1a3ad6;
  }
  
  .flow-image-section{
    margin-top:28px;
    overflow:hidden;
    padding: 10px;
  }

  .flow-image-section img{
    display:block;
    width:100%;
    height:auto;
  }


  @media (max-width:860px){
    .flow-steps{
      flex-direction:column;
      align-items:center;
      gap:28px;
      padding:18px 8px;
      min-height:unset;
    }

   
    .flow-steps::before{
      left:50%;
      top:5%;
      bottom:5%;
      right:auto;
      width:6px;
      height:auto;
      transform:translateX(-50%);
      border-radius:6px;
    }

    
    .flow-step{
      width:100%;
      max-width:560px;
      padding:28px 20px 36px;
    }

    .flow-step::before{
      left:50%;   
      top:18%;
      transform:translate(-50%,-50%);
    }
  }

  @media (max-width:420px){
    body{ padding:20px 12px; }
    .flow-step { padding:20px 14px 26px; }
    .flow-step .title{ font-size:1rem; }
    .flow-step .desc{ font-size:0.92rem; }
    .flow-step::before{ width:38px; height:38px; border-width:3px; }
  }

.how-it-works {
  padding: 60px 00px;
  position: relative;
  background: linear-gradient(135deg, #dce9ff 0%, #b5cfff 100%);
    color: #1a1a1a;
}

.how-it-works .flowchart {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  position: relative;
}

.how-it-works .card {
  position: relative;
  width: 250px;
  background: #ffffff;
  border: 1px solid rgba(26, 58, 214, 0.2);
  border-radius: 20px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(26, 58, 214, 0.15);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards, floatUpDown 4s ease-in-out infinite;
  animation-delay: var(--delay);
  transition: all 0.4s ease;
}

.how-it-works .card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 20px 40px rgba(26, 58, 214, 0.3);
}

.how-it-works .icon {
  background: rgba(26, 58, 214, 0.1);
  border-radius: 14px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  transition: all 0.4s ease;
}

.how-it-works .icon .material-icons-outlined {
  font-size: 32px;
  color: #1a3ad6;
  transition: all 0.4s ease;
}

.how-it-works .card:hover .icon {
  background: #1a3ad6;
}

.how-it-works .card:hover .material-icons-outlined {
  color: #fff;
  transform: scale(1.1);
}

.how-it-works .stepss {
  position: absolute;
  top: -20px;
  right: -20px;
  background: #1a3ad6;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  width: 45px !important;
  height: 45px !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(26, 58, 214, 0.3);
}

.how-it-works .card h3 {
  font-size: 1.1rem !important;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1a1a1a;
}

.how-it-works .card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
}

.how-it-works .curve {
  width: 150px;
  height: 60px;
}

.how-it-works .curve path {
  fill: none;
  stroke: #1a3ad6;
  stroke-width: 2;
  stroke-dasharray: 6 6;
  animation: dashMove 4s linear infinite;
}

@keyframes dashMove {
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@media (max-width: 900px) {
  .how-it-works .flowchart {
    flex-direction: column;
  }

  .how-it-works .curve {
    display: none;
  }
}

/*---  IDA Features ---*/
/* Layout */
.ida_feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.ida_feature .ida-image-side {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ida_feature .ida-image-box {
  border-radius: 12px;
  min-height: 400px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  width: 100%;
}

.ida_feature .ida-content-side {
  width: 100%;
  display: flex;
  align-items: center;
}

/* Features grid */
.ida_feature .ida_feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  list-style: none;
  width: 100%;
}

.ida_feature .ida_feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f9fafb;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ida_feature .ida_feature-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.ida_feature .ida_feature-icon {
  font-size: 28px;
  color: #1a3ad6 !important;
  background: #eef2ff;
  border-radius: 10px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ida_feature .ida_feature-title {
  font-size: 0.85rem !important;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

/* Desktop (40% / 60% split) */
@media (min-width: 768px) {
  .ida_feature {
    flex-direction: row;
    align-items: center;
  }

  .ida_feature .ida-image-side {
    width: 40%; /* LEFT SIDE = 40% */
    padding-right: 40px;
  }

  .ida_feature .ida-content-side {
    width: 60%; /* RIGHT SIDE = 60% */
  }
}

/* Mobile */
@media (max-width: 640px) {
  .ida_feature .title {
    font-size: 26px;
  }

  .ida_feature .ida-image-box {
    min-height: 280px;
  }

  .ida_feature .ida_feature-grid {
    grid-template-columns: 1fr;
  }
}



/* ---------------- Wrapper ---------------- */
.kyc-wrap {
  max-width: 1200px;
  margin: 30px auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* ---------------- Cards ---------------- */
.kyc-wrap .card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  border: none;
  gap: 40px;
  transition: all 0.5s ease;
  opacity: 0;
  transform: translateY(40px);
}
.kyc-wrap .card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------- Text content ---------------- */
.kyc-wrap .content {
  flex: 1;
  padding: 30px;
  margin: 10px;
}
.kyc-wrap .eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: #1a3ad6;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kyc-wrap .title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 12px;
}
.kyc-wrap .desc {
  font-size: 15px;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 24px;
  max-width: 580px;
}

/* ---------------- Icon list ---------------- */
.kyc-wrap .icon-list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.kyc-wrap .iconss {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
}
.kyc-wrap .iconss .circlle {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e5f0ff 0%, #c9dcff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a3ad6;
  font-size: 20px;
  box-shadow: 0 6px 18px rgba(26, 58, 214, 0.1);
  margin-bottom: 8px;
  transition: all 0.3s ease;
}
.kyc-wrap .iconss small {
  font-size: 12px;
  color: #475569;
  line-height: 1.3;
}
.kyc-wrap .iconss:hover {
  transform: translateY(-5px);
}
.kyc-wrap .iconss:hover .circlle {
  box-shadow: 0 10px 25px rgba(26, 58, 214, 0.2);
  background: linear-gradient(180deg, #dce7ff 0%, #b9ceff 100%);
}

/* ---------------- CTA ---------------- */
.kyc-wrap .cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a3ad6;
  font-weight: 600;
  text-decoration: none;
  margin-top: 22px;
  position: relative;
}
.kyc-wrap .cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: rgba(37,99,235,0.3);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.kyc-wrap .cta:hover::after {
  transform: scaleX(1);
}

/* ---------------- Image ---------------- */
.kyc-wrap .media {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kyc-wrap .profile-box {
  overflow: hidden;
  position: relative;
}
.kyc-wrap .profile-box img {
  width: 100%;
  max-width: 360px;
  display: block;
}

/* ---------------- Zig-zag layout ---------------- */
.kyc-wrap .card:nth-child(even) {
  flex-direction: row-reverse;
}

/* ---------------- KPIs ---------------- */
.kyc-wrap .kpis {
  display: flex;
  gap: 24px;
  margin-top: 20px;
}
.kyc-wrap .kpi {
  font-weight: 700;
  color: #0f172a;
  font-size: 15px;
}
.kyc-wrap .kpi small {
  display: block;
  color: #64748b;
  font-weight: 400;
  font-size: 12px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 992px) {
  .kyc-wrap .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .kyc-wrap .card:nth-child(even) {
    flex-direction: column;
  }
  .kyc-wrap .media {
    width: 100%;
  }
  .kyc-wrap .profile-box img {
    max-width: 100%;
  }
}


/* cardzz Grid */
.cardzz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

/* Individual cardzz */
.cardzz {
  display: flex;
  align-items: center;
  background: #f7faff;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.05);
  padding: 18px 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(37, 99, 235, 0.08);
}

.cardzz:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.15);
}

/* iconz */
.cardzz .iconz {
  width: 50px;
  height: 50px;
  background: linear-gradient(180deg, #e5f0ff 0%, #c9dcff 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 14px;
  color: #1a3ad6;
  font-size: 22px;
  flex-shrink: 0;
}

/* Label */
.cardzz span {
  font-weight: 600;
  font-size: 16px;
  color: #0f172a;
  text-align: left;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .custon-off h2 {
    font-size: 24px;
  }
  .cardzz {
    padding: 16px;
  }
  .cardzz .iconz {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
}


/*--------------------------------------------------------------
Benefits & ROI
--------------------------------------------------------------*/

.product-roi-bg {
  background: radial-gradient(circle at 20% 30%, rgba(220, 230, 255, 1) 0%, rgba(240, 230, 250, 1) 40%, rgba(245, 245, 255, 1) 70%, rgba(230, 245, 255, 1) 100%);
}

.product-roi {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Flex Row */
.logo-scroller {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* Card Style */
.logo-scroller-item {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #D0DDFF;
  padding: 10px 15px;
  box-sizing: border-box;
  position: relative;
  min-width: 200px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-scroller-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

/* Inner Content */
.ticker-box {
  text-align: left;
  width: 100%;
  position: relative;
}

.ticker-box h5 {
  color: #1a1a1a;
  font-size: 1.5rem !important;
  line-height: 1.4;
  margin: 0 0 5px;
  font-weight: 600; 
}

.ticker-box p {
  color: #48505e;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  font-weight: 400;
  width: 80%;
}

.ticker-icon {
  width: 24px;
  position: absolute;
  right: 10px;
  top: 5px;
}

.ticker-icon img {
  width: 100%;
  height: auto;
}

/* Responsive Grid */
@media (max-width: 992px) {
  .logo-scroller-item {
    flex: 1 1 calc(50% - 20px);
  }
}

@media (max-width: 576px) {
  .logo-scroller-item {
    flex: 1 1 100%;
  }
}


/*--------------------------------------------------------------
 Testimonials
--------------------------------------------------------------*/

.testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; }
.testi-card { background: white; border-radius: 15px; overflow: hidden;  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); transition: all 0.4s ease; opacity: 0; transform: translateY(30px); animation: fadeInUp 0.6s forwards; }
.testi-card:nth-child(2) { animation-delay: 0.2s; }
.testi-card:nth-child(3) { animation-delay: 0.4s; }
 @keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}
.testi-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); }
.testi-card-header { display: flex; padding: 25px; }
.photo { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; border: 4px solid white; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); flex-shrink: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.testi-logo { margin-left: auto; width: 100px; height: 80px; display: flex; align-items: center; justify-content: flex-end; }
.testi-logo img { max-width: 100%; max-height: 60px; filter: grayscale(100%); transition: all 0.3s ease; }
.testi-card:hover .testi-logo img { filter: grayscale(0%); }
.testi-card-body { padding: 25px; }
.testi-name { font-size: 1.2rem; font-weight: 700; color: #212121; margin-bottom: 5px; }
.testi-position { font-size: 0.95rem; color: #5a7a9a; margin-bottom: 15px; font-style: italic; }
.testi-quote { font-size: 1.05rem; color: #4a5568; margin-bottom: 20px; position: relative; padding-left: 10px; }
.testi-quote:before { content: "";   position: absolute; left: 0; top: -10px; font-size: 3rem; color: #3498db; opacity: 0.3; }
@media (max-width: 768px) {
    .testimonials { grid-template-columns: 1fr; }
    .testi-card-header { padding: 20px; }
    .photo { width: 70px; height: 70px; }
    .testi-logo { width: 80px; height: 70px; }
}
@media (max-width: 480px) {
    .testi-card-header { flex-direction: column; align-items: center; text-align: center; }
    .testi-logo { margin: 15px 0 0 0; justify-content: center; }
}


/* Singl Testimonial Section */

/* Section Wrapper */
.testimonial-section {
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.testimonial-section .container {
  max-width: 1100px;
  width: 100%;
}

/* Title + Arrows */
.testimonial-section .title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.testimonial-section .title-row h2 {
  font-size: 1.8rem !important;
  font-weight: 700;
  color: #1a1a1a !important;
}

/* Cards Layout */
.testimonial-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px; /* 👈 adds space between left and right cards */
}

/* Left Card */
.testimonial-cards .left-card {
  flex: 1 1 35%;
  background: #ff225d;
  border-radius: 16px;
  padding: 42px 30px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-cards .left-card .logo {
  width: 90px;
  margin-bottom: 30px;
}

.testimonial-cards .left-card h3 {
  font-size: 1.1rem !important;
  font-weight: 600;
  line-height: 1.4;
  color: #fff !important;
}

/* Right Card */
.testimonial-cards .right-card {
  flex: 1 1 62%;
  background: #fff;
  border: 1px solid #f2cbd4;
  border-radius: 16px;
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

.testimonial-cards .testimonial-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #1a1a1a;
}

.author {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}

.author-name {
  font-weight: 700;
  color: #1a1a1a;
}

.author-title {
  font-size: 0.95rempx;
  color: #ccc;
}

.quote {
  font-size: 72px !important;
  color: #f8d7de;
  line-height: 1;
}

/* Responsive */
@media (max-width: 900px) {
  .testimonial-cards {
    flex-direction: column;
  }
  .testimonial-cards .left-card,
  .testimonial-cards .right-card {
    flex: 1 1 100%;
  }
  .testimonial-cards .right-card {
    padding: 30px;
  }
}

/*--------------------------------------------------------------
FAQ Section
--------------------------------------------------------------*/
/* 	
.faq-section {
  background: #fff;
  padding: 60px 0;
}

.faq-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 60px;
  align-items: flex-start;
  padding: 0 20px;
}


.faq-container .faq-left {
  flex: 1 1 32%;
}

.faq-container .faq-left h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 40px;
  line-height: 1.3;
}

.faq-container .faq-box {
  background: #fff;
  border-radius: 16px;
  text-align: center;
  padding: 40px 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.faq-container .faq-box img {
  width: 120px;
  margin-bottom: 20px;
}

.faq-container .faq-box p {
  color: #404055;
  font-size: 16px;
  margin-bottom: 20px;
}

.faq-container .faq-btn {
  display: inline-block;
  background: #0806AA;
  color: #fff;
  font-weight: 500;
  padding: 10px 25px;
  border-radius: 8px;
  text-decoration: none;
  transition: 0.3s;
}

.faq-container .faq-btn:hover {
  background: #0d0cc4;
}


.faq-container .faq-right {
  flex: 1 1 58%;
}


.faq-container .accordion {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-container .accordion-item {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.faq-container .accordion-header {
  background: #fff;
  border: none;
  outline: none;
  width: 100%;
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  color: #1a1a1a;
  padding: 20px 24px;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
}

.faq-container .accordion-header::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 20px;
  font-size: 1.1ren;
  color: #808080;
  transition: transform 0.3s ease;
}

.faq-container .accordion-item.active .accordion-header::after {
  transform: rotate(45deg);
}

.faq-container .accordion-header:hover {
  background: #f3f3f6;
}

.faq-container .accordion-content {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  font-size: 0.95rem;
  color: #1a1a1a;
  line-height: 1.6;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.faq-container .accordion-item.active .accordion-content {
  padding: 0 24px 20px;
}


@media (max-width: 900px) {
  .faq-container .faq-container {
    flex-direction: column;
  }

  .faq-container .faq-left, .faq-right {
    flex: 1 1 100%;
  }
} */


/* Solution FAQ Section */
#solutionFaqSection {
  padding: 60px 20px;
  background: #f8fafc;
}

.solution-faq-container {
  max-width: 1080px !important;
  margin: 0 auto;
}

.solution-faq-title {
  text-align: center;
  font-size: 1.8rem !important;
  font-weight: 700;
  margin-bottom: 30px;
  color: #1a1a1a;
}

.solution-faq-wrapper {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
}

.solution-faq-item {
  border-bottom: 1px solid #e2e8f0;
}

.solution-faq-item:last-child {
  border-bottom: none;
}

.solution-faq-question {
  width: 100%;
  background: #ffffff;
  border: none;
  padding: 18px 20px;
  font-size: 1.1rem !important;
  font-weight: 600;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: 0.3s ease;
  color: #0f172a;
}

.solution-faq-question:hover {
  color: #1a3ad6;
}

.solution-faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  font-size: 1rem !important;
  line-height: 1.6;
  color: #374151;
  transition: all 0.4s ease;
}

.solution-faq-item.active .solution-faq-answer {
  padding: 0 20px 18px;
  max-height: 300px;
}

.solution-faq-icon {
  font-size: 20px;
  font-weight: 700;
  color: #1a3ad6;
}

/* Responsive */
@media (max-width: 768px) {
  .solution-faq-title {
    font-size: 22px;
  }

  .solution-faq-question {
    font-size: 15px !important;
    padding: 16px;
  }

  .solution-faq-answer {
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
 Awards accordian banner
--------------------------------------------------------------*/
.award-sec .col-sm-12 {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.award-h {
    flex: 1;
    max-width: 500px;
}

.award-img {
    max-width: 400px;
    height: auto;
    margin-left: auto; 
}


.horizontal-accordion-section {
  padding: 20px;
}

/* Accordion Container */
.horizontal-accordion {
  display: flex;
  height: 500px;
  border-radius: 15px;
  overflow: hidden;
  gap: 15px;
  padding-bottom: 40px;
}

/* Panel base */
.horizontal-accordion .accordion-panel {
  position: relative;
  flex: 0 0 80px;
  transition: all 0.5s ease;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  background-color: #1e293b; /* Default dark background */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Expanded active panel */
.horizontal-accordion .accordion-panel.active {
  flex: 1 1 25%;
}

/* Background images — only visible when active */
.horizontal-accordion .panel-1.active {
  background: 
    linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.5)),
    url('../images/others/case-study-4.jpg') center/cover no-repeat;
}

.horizontal-accordion .panel-2.active {
  background: 
    linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.5)),
    url('../images/others/case-study-1.jpg') center/cover no-repeat;
}

.horizontal-accordion .panel-3.active {
  background: 
    linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.5)),
    url('../images/others/case-study-2.jpg') center/cover no-repeat;
}

.horizontal-accordion .panel-4.active {
  background: 
    linear-gradient(to right, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.5)),
    url('../images/others/case-study-3.jpg') center/cover no-repeat;
}

/* Overlay gradient for active panels */
.horizontal-accordion .panel-overlay {
  position: absolute;
  inset: 0;
 background: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 0) 40%
);
  opacity: 50;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.horizontal-accordion .accordion-panel.active .panel-overlay {
  opacity: 1;
}

/* Vertical label (center-aligned) */
.horizontal-accordion .vertical-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  writing-mode: vertical-rl;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  z-index: 2;
  transition: all 0.4s ease;
}

.horizontal-accordion .vertical-text i {
  font-size: 1.3rem;
  transform: rotate(90deg);
}

.horizontal-accordion .accordion-panel.active .vertical-text {
  opacity: 0;
}

/* Content bottom-left */
.horizontal-accordion .panel-content {
  position: absolute;
  bottom: 30px;
  left: 30px;
  max-width: 600px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  z-index: 2;
}

.horizontal-accordion .panel-content h3 {
  font-size: 1.5rem !important;
  font-weight: bold;
  color: #fff !important;
  position: absolute;
  bottom: 380px;
}

.horizontal-accordion .accordion-panel.active .panel-content {
  opacity: 1;
  transform: translateY(0);
}

.horizontal-accordion .quote {
  font-size: 1.1rem !important;
  font-style: italic;
  margin-bottom: 15px;
  line-height: 1.6;
}

.horizontal-accordion .read-story {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid #fff;
  border-radius: 6px;
  padding: 8px 14px;
  transition: 0.3s;
}

.about-image-container .read-story {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 6px;
    padding: 8px 14px;
    transition: 0.3s;
}
.about-image-container .read-story:hover {
  cursor: pointer;
  transform: scale(1.05); 
}

.vid-text {
  background: #1a3ad6;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  width: 28%;
}

.horizontal-accordion .read-story i {
  margin-left: 8px;
  transition: transform 0.3s;
}

.horizontal-accordion .read-story:hover i {
  transform: translateX(5px);
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .horizontal-accordion {
    height: 420px;
    gap: 10px;
  }

  .horizontal-accordion .quote {
    font-size: 1rem;
  }

  .horizontal-accordion .read-story {
    padding: 6px 12px;
  }
}

@media (max-width: 768px) {
  .horizontal-accordion {
    flex-direction: column;
    height: auto;
  }

  .horizontal-accordion .accordion-panel {
    flex: 1 1 auto;
    min-height: 90px;
  }

  .horizontal-accordion .accordion-panel.active {
    min-height: 350px;
  }

  .horizontal-accordion .panel-content {
    bottom: 20px;
    left: 20px;
    max-width: 90%;
  }

  .horizontal-accordion .vertical-text {
    transform: translate(-50%, -50%) rotate(0deg);
    writing-mode: horizontal-tb;
  }
}

@media (max-width: 480px) {
  .horizontal-accordion {
    padding: 5px;
  }

  .horizontal-accordion .panel-content {
    bottom: 15px;
    left: 15px;
  }

  .horizontal-accordion .quote {
    font-size: 0.95rem !important;
  }

  .horizontal-accordion .read-story {
    padding: 5px 10px;
    font-size: 0.85rem;
  }

  .horizontal-accordion .vertical-text span {
    font-size: 0.85rem;
  }
}

/*--------------------------------------------------------------
CTA Form
--------------------------------------------------------------*/
        /* .form-card { position:absolute; top: -100px; } */

		.form-card h1 {
            font-size: 2.8rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: #2c3e50;
            position: relative;
            display: inline-block;
			text-align: center;
			justify-content: center;
			align-items: center;
        }
    
        
        .form-card {
            background: white;
            border-radius: 15px;
            padding: 50px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .form-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
        }
        
        .form-card-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: start;
        }
        
        .form-card h2 {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 25px;
            color: #3498db;
            position: relative;
            padding-bottom: 12px;
        }
        
        .form-card h2:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: #3498db;
            border-radius: 2px;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-card label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        input, textarea {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background-color: #f8fafc;
        }
        
        input:focus, textarea:focus {
            outline: none;
            border-color: #3498db;
            background-color: white;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }
        
        .form-card .phone-input {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .form-card .country-code {
            flex: 0 0 70px;
            display: flex;
            align-items: center;
            padding: 14px 16px;
            background: #f1f8ff;
            border: 2px solid #e2e8f0;
            border-radius: 8px;
            font-weight: 600;
            color: #3498db;
        }
        
        .phone-number {
            flex: 1;
        }
        
        .form-card .submit-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: linear-gradient(to right, #3498db, #2c3e50);
            color: white;
            border: none;
            padding: 16px;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
        }
        
        .form-card .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
        }
        
        .form-card .submit-btn i {
            margin-left: 10px;
            transition: transform 0.3s ease;
        }
        
        .form-card .submit-btn:hover i {
            transform: translateX(5px);
        }
        
        .demo-content p {
            margin-bottom: 25px;
            color: #5a6c7d;
            font-size: 1.05rem;
        }
        
        .demo-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, #2c3e50, #3498db);
            color: white;
            border: none;
            padding: 16px 30px;
            border-radius: 8px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 4px 15px rgba(44, 62, 80, 0.3);
            width: 100%;
        }
        
        .demo-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(44, 62, 80, 0.4);
        }
        
        .demo-btn i {
            margin-left: 10px;
            transition: transform 0.3s ease;
        }
        
        .demo-btn:hover i {
            transform: translateX(5px);
        }
        
        .form-card .icon {
            font-size: 2.5rem;
            color: #3498db;
            margin-bottom: 20px;
        }
        
        .form-card .divider {
            height: 1px;
            background: linear-gradient(to right, transparent, #e2e8f0, transparent);
            margin: 30px 0;
            display: none;
        }
        
        /* Responsive Styles */
        @media (max-width: 768px) {
            .form-card-content {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .divider {
                display: block;
            }
            
            .form-card h1 {
                font-size: 2.2rem;
            }
            
            .form-card h2 {
                font-size: 1.6rem;
            }
            
            .form-card {
                padding: 35px;
            }
        }
        
        @media (max-width: 576px) {
            body {
                padding: 20px 15px;
            }
            
            .form-card h1 {
                font-size: 1.8rem;
            }
            
            .form-card h2 {
                font-size: 1.4rem;
            }
            
            .form-card {
                padding: 25px 20px;
            }
            
            input, textarea {
                padding: 12px 14px;
            }
        }
        
        .required:after {
            content: " *";
            color: #e74c3c;
        }



/*--------------------------------------------------------------
 Newsletter Subscribtion
--------------------------------------------------------------*/
/* Section */
.newsletter {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 60px 20px;
}

.newsletter::before,
.newsletter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 50%, rgba(139, 92, 246, 0.1), transparent 60%);
  z-index: 0;
}
.newsletter::after {
  background: radial-gradient(circle at 70% 50%, rgba(167, 139, 250, 0.1), transparent 60%);
}

.newsletter * {
  position: relative;
  z-index: 1;
}

/* Icon box */
.icon-box {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.2);
  background: linear-gradient(to bottom right, rgba(139, 92, 246, 0.1), rgba(167, 139, 250, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}
.icon-box svg {
  width: 32px;
  height: 32px;
  color: #8b5cf6;
}

/* Headline */
.newsletter h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #0a0a14;
}
.highlight {
  background: linear-gradient(to right, #ffffff, #e6f3ff) !important;
  -webkit-background-clip: text;
  color: #1a3ad6;
  padding: 10px 0 0 0;
}

/* Text */
.newsletter p {
  color: #6b7280;
  font-size: 0.9rem;
  max-width: 550px;
  margin: 0.5rem auto;
}

/* FORM ROW — INPUT + BUTTON */
.input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 2rem;
  width: 100%;
  max-width: 550px;
  margin-inline: auto;
}

/* Input Box */
.input-box {
  position: relative;
  flex: 1;
}

.input-box svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #9ca3af;
}

.input-box input {
  width: 100%;
  height: 52px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding-left: 42px;
  padding-right: 16px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.8);
  transition: 0.3s;
  color: #1a1a1a;
}
.input-box input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
  outline: none;
}

/* Button */
/* Base button */
.newsletter button {
  height: 52px;
  padding: 0 24px;
  border: 1px solid #1a3ad6 !important;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  color: #1a3ad6;
  white-space: nowrap;
  transition: 0.3s;

  /* 🔥 Kill native browser styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  outline: none !important;
  box-shadow: none !important;
}

/* Hover */
.newsletter button:hover {
  transform: scale(1.05);
  opacity: 0.9;
}

/* Focus + Active (mouse click) */
.newsletter button:focus,
.newsletter button:active {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #1a3ad6 !important;
}

/* 🔥 Firefox / Windows inner focus border killer */
.newsletter button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Keyboard focus only (accessible, optional) */
.newsletter button:focus-visible {
  outline: 2px solid rgba(26, 58, 214, 0.4);
  outline-offset: 2px;
}

/* Success / Error Message */
.form-message {
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.4s ease;
  text-align: left;
  padding-left: 15px;
}

/* Mobile */
@media (max-width: 600px) {
  .input-row {
    flex-direction: column;
    gap: 14px;
  }
  .newsletter button {
    width: 100%;
  }
}


/*--------------------------------------------------------------
 ROI Counter
--------------------------------------------------------------*/
.roi-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  max-width: 1200px;
  width: 100%;
}

.roi-container-ida {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
}

.roi-left {
  flex: 1;
  max-width: 420px;
}

.roi-subtitle {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.roi-heading {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  line-height: 1.3;
}

.roi-right {
  flex: 1.8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.roi-item {
  text-align: center;
  flex: 1;
}

.roi-value {
  font-size: 40px !important;
  font-weight: 700 !important;
  margin-bottom: 8px;
}

.roi-desc {
  font-size: 15px !important;
  color: #6b7280 !important;
  line-height: 1.5;
  max-width: 200px;
  margin: 0 auto;
}

.roi-divider {
  width: 1px;
  height: 60px;
  background-color: #e5e7eb;
}

@media (max-width: 900px) {
  .roi-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .roi-right {
    flex-direction: column;
    gap: 24px;
  }

  .roi-divider {
    display: none;
  }

  .roi-heading {
    font-size: 28px;
  }

  .roi-value {
    font-size: 32px;
  }
}



/*--------------------------------------------------------------
Industry
--------------------------------------------------------------*/

.industry-section {
  padding: 60px 0 100px;
  background: #fff;
}

.industry-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  /* margin-bottom: 80px; */
}

.industry-content {
  flex: 1;
  min-width: 300px;
  max-width: 550px;
}

.industry-text {
  color: #475467 !important;
  text-transform: uppercase;
  font-size: 13px !important;
  letter-spacing: 1.2px;
  margin-bottom: 10px;
}

.industry-heading {
  font-size: 20px !important;
  font-weight: bold;
  color: #212121 !important;
  line-height: 1.4;
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .industry-heading {
    font-size: 18px !important;
  }
}

.industry-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.industry-checklist li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 12px;
  font-size: 16px;
  color: #475467;
  line-height: 1.6;
}

.industry-checklist li::before {
  content: "✔";
  color: #1a3ad6;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

.industry-cta-button {
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid #1a3ad6;
  border-radius: 8px;
  color: #1a3ad6;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

a.industry-cta-button:hover {
    cursor: pointer;
    transform: scale(1.05);
    color: #1a3ad6 !important;
}

.industry-image-wrapper {
  flex: 1;
  min-width: 300px;
  text-align: center;
}

.industry-image-wrapper img {
  width: 100%;
  max-width: 550px;
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 900px) {
  .industry-grid {
    flex-direction: column;
    text-align: center;
  }
  .industry-content {
    max-width: 100%;
    text-align: left;
  }
  .industry-image-wrapper img {
    max-width: 100%;
  }
}



.industry-grid .highlight {
      display: inline-block;
      position: relative;
      color: #1a3ad6;
      font-weight: 700;
      overflow: hidden;
      min-width: 50px;
      text-align: left;
    }

    .industry-grid .highlight span {
      display: inline-block;
      animation: textIn 0.5s ease forwards;
    }

    @keyframes textIn {
      0% {
        opacity: 0;
        transform: translateY(0px) rotateX(90deg);
      }
      100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
      }
    }

    @keyframes textOut {
      0% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
      }
      100% {
        opacity: 0;
        transform: translateY(0px) rotateX(-90deg);
      }
    }

@media (max-width: 767px) {
  .industry-grid {
    /* border-bottom: 2px solid #dddddd;light divider */
    margin-bottom: 30px;             /* space before next div */
  }

  .mt-100 {
    margin-top: 30px !important
  }

 .industry-section {
   padding: 30px 0 0px;
   background: #fff;
  }

}

@media only screen and (max-width: 767px) {
 .data-sec .ptb-60 {
   padding-top: 0px !important;
   padding-bottom: 0px !important;
  }
}

/*--------------------------------------------------------------
 Back to top
--------------------------------------------------------------*/
  #toTopButton {
  display: inline-block;
  background-color: #0806AA;
  width: 48px;
  height: 48px;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  bottom: 120px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#toTopButton::after {
  content: "\f077";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 50px;
  color: #fff;
}
#toTopButton:hover {
  cursor: pointer;
  background-color: #1a3ad6;
}
#toTopButton:active {
  background-color: #1a3ad6;
}
#toTopButton.show {
  opacity: 1;
  visibility: visible;
}

/*--------------------------------------------------------------
Product page hero Banner
--------------------------------------------------------------*/

.hero {
  /* background: radial-gradient(circle at 20% 30%, 
  rgba(220, 230, 255, 1) 0%, 
  rgba(240, 230, 250, 1) 40%, 
  rgba(245, 245, 255, 1) 70%, 
  rgba(230, 245, 255, 1) 100%); */
  background: #fff;
  padding: 40px 8%;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}

/* LEFT CONTENT */

.hero-content .banner-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 12px;
    border: none;
    border-radius: 9999px;
    background: #eef2ff;
    color: #1a3ad6;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.hero-content h1 {
  font-size: 34px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #1a1a1a !important;
}

@media only screen and (max-width: 600px) {
  .hero-content h1 {
    margin-top: 35px !important;
  }
  .hero-image img {
    width: 100% !important;
    height: 350px;
    object-fit: cover;
  }
}

.hero-content p {
  font-size: 1rem;
  color: #48505e;
  margin-bottom: 30px;
  line-height: 1.6;
  max-width: 90%;
}

/* BUTTONS */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 8px;
  padding: 12px 24px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero .btn-primary,
.case-study-banner .btn-primary,
.bank-analysis-section .btn-primary,
.solution-box .hero-buttons .btn-primary,
.ida-process-section .hero-buttons .btn-primary {
  background: transparent !important;
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid #1a3ad6 !important;
  border-radius: 8px;
  color: #1a3ad6 !important;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero .btn-primary:hover,
.case-study-banner .btn-primary:hover,
.bank-analysis-section .btn-primary:hover,
.solution-box .hero-buttons .btn-primary  {
  cursor: pointer;
  transform: scale(1.05);  
}

.hero .btn-outline {
  background: transparent;
  color: #111827;
  border: 1px solid #d1d5db;
}

.hero .btn-outline:hover {
  background: #f3f4f6;
}

.hero .arrow {
  width: 20px;
  height: 20px;
  margin-left: 8px;
}

/* RIGHT IMAGE */
.hero-image {
  text-align: center;
}

.hero-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
}

.about_us .hero-image img {
    max-width: 100% !important;
    height: auto;
}
.roadmap-bg {
   background: #FFF;
}

.roadmap-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 20px;
}

.roadmap-text {
  max-width: 520px;
  margin-bottom: 24px;
}

.roadmap-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #1f2937;
}

.roadmap-image img {
  width: 100%;
  height: auto;
  display: block;
}
.split-banner {
  background: linear-gradient(
  to right,
  #172853 0%,
  #172853 40%, 
  #1999D6 100%
);
  padding: 24px 40px;
  text-align: center;
  border-radius: 8px;
}

.split-banner p {
  margin: 0;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  max-width: 1100px;
  margin-inline: auto;
}

.split-banner strong {
  font-weight: 600;
}

/* ✅ Tablet */
@media (max-width: 991px) {
  .split-banner {
    padding: 20px 24px;
  }

  .split-banner p {
    font-size: 15px;
  }
}

/* ✅ Mobile */
@media (max-width: 600px) {
  .split-banner {
    padding: 18px 16px;
  }

  .split-banner p {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .hero-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-content h1 {
    font-size: 1.3rem !important;
  }

  .hero-content p {
    margin: 0 auto 25px;
  }

  .hero-buttons {
    justify-content: center;
  }

  .hero-image img {
    max-width: 350px;
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
 .hero-content p {
    font-size: 0.8rem;
     margin: 0 auto 20px;
     max-width: 100%;
 }
}

/*--------------------------------------------------------------
Hero - 2
--------------------------------------------------------------*/

 .hero-2 {
            background: #fff;
            padding: 60px 8%;
        }

        .hero-2-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
            gap: 60px;
        }

        /* LEFT CONTENT */
        .hero-2-content {
            flex: 1;
            max-width: 600px;
        }

        .hero-2 .compliance-badges {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap;
            gap: 30px;
            margin-bottom: 30px;
        }

        .hero-2 .badge {
            flex: 0 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-2 .badge img {
            width: 150px;
            height: auto;
            display: block;
            object-fit: contain;
        }

        .hero-2 .hero-2-content h2 {
            font-size: 34px;
            font-weight: 600;
            line-height: 1.3;
            margin-bottom: 20px;
            color: #1a1a1a;
        }

        .hero-2 .text-blue {
            color: #1a3ad6;
        }

        .hero-2-content p {
            font-size: 1.1rem;
            color: #48505e;
            margin-bottom: 30px;
            line-height: 1.6;
            max-width: 90%;
        }

        /* BUTTONS */
        .hero-2-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .hero-2 .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 500;
            border-radius: 8px;
            padding: 12px 24px;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .hero-2 .btn-primary {
            background: transparent;
            padding: 12px 20px;
            border: 1px solid #1a3ad6;
            border-radius: 8px;
            color: #1a3ad6;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .hero-2 .btn-primary:hover {
            transform: translateY(-2px);
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            background-color: rgba(26, 58, 214, 0.05);
        }

        .hero-2 .arrow {
            width: 20px;
            height: 20px;
            margin-left: 8px;
        }

        /* RIGHT IMAGE */
        .hero-2-image {
            flex: 1;
            text-align: center;
            max-width: 500px;
        }

        .hero-2-image img {
            width: 100%;
            max-width: 450px;
            height: auto;
            border-radius: 8px;
            
        }

        /* RESPONSIVE */
        @media (max-width: 992px) {
            .hero-2-container {
                flex-direction: column;
                text-align: center;
                gap: 40px;
            }

            .hero-2-content {
                max-width: 100%;
            }

            .hero-2-content h2 {
                font-size: 2.3rem;
            }

            .hero-2-content p {
                margin: 0 auto 25px;
                max-width: 100%;
            }

            .hero-2-buttons {
                justify-content: center;
            }

            .hero-2-image img {
                max-width: 350px;
            }

            .hero-2 .compliance-badges {
                justify-content: center;
                gap: 20px;
            }
        }

        @media (max-width: 768px) {
            .hero-2 {
                padding: 40px 5%;
            }

            .hero-2 .compliance-badges {
                gap: 1.5rem;
                flex-wrap: wrap;
            }

            .hero-2 .badge img {
                max-width: 120px;
            }

            .hero-2-content h2 {
                font-size: 1.8rem;
            }
        }

/*--------------------------------------------------------------
Become a partner
--------------------------------------------------------------*/
 .digital-enablers {
      max-width: 1200px;
      margin: auto;
      padding: 40px 20px;
    }

    .digital-enablers .intro {
      text-align: left;
      margin-bottom: 40px;
    }

    .digital-enablers .intro h3 {
      color: #1a1a1a !important;
      font-weight: 600;
      font-size: 0.9rem !important;
      margin-bottom: 8px;
    }

    .digital-enablers .intro h1 {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #1a1a1a !important;
    }

    .digital-enablers .intro p {
      font-size: 16px;
      color: #1a1a1a;
    }

    /* ===== Image Card Section ===== */
    .digital-enablers .image-card-section {
      position: relative;
      margin-bottom: 40px;
      border-radius: 12px;
      overflow: hidden;
    }

    .digital-enablers .bg-image {
      width: 100%;
      height: 450px;
      object-fit: cover;
      filter: brightness(0.8);
      transition: transform 0.6s ease;
    }

    /* White Card Overlay */
    .digital-enablers .info-card {
      position: absolute;
      bottom: 30px;
      left: 40px;
      background: #fff;
      color: #1a1a1a;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      max-width: 650px;
    }

    .digital-enablers .info-card h3 {
      font-size: 22px;
      margin-bottom: 10px;
      color: #0d1b3e;
    }

    .digital-enablers .info-card p {
      color: #333;
      font-size: 16px;
      margin-bottom: 18px;
    }

    .digital-enablers .logos img {
      max-height: 40px;
      margin-right: 12px;
      margin-bottom: 10px;
      vertical-align: middle;
    }

    .digital-enablers .buttons {
      display: flex;
      gap: 16px;
      align-items: center;
      margin-top: 10px;
    }

    .digital-enablers .btn {
      background-color: #0070f3;
      color: #fff;
      padding: 10px 18px;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
    }

    .digital-enablers .btn:hover {
      background-color: #0056c9;
    }

    .digital-enablers .link {
      color: #0070f3;
      text-decoration: none;
      font-weight: 500;
      font-size: 16px;
    }

    .digital-enablers .link:hover {
      text-decoration: underline;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .digital-enablers .info-card {
        position: static;
        max-width: 100%;
        margin-top: -80px;
        border-radius: 0;
      }

      .digital-enablers .bg-image {
        height: 300px;
      }

      .digital-enablers .info-card {
        padding: 24px;
      }
    }

    /* Overlay Background */
     .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(18, 24, 33, 0.6);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
      z-index: 999;
    }

    /* Modal Box */
     .modal.partner-modal-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.95);
      width: 90%;
      max-width: 400px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 24px 48px -12px rgba(19, 38, 68, 0.18);
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 1000;
      color: #1a1a1a;
      /* overflow: hidden; */
      overflow: visible;
    }

    /* Show state */
     .modal.show.partner-modal-container {
      opacity: 1;
      visibility: visible;
      transform: translate(-50%, -50%) scale(1);
      display: block;
    }

     .modal-overlay.show {
      opacity: 1;
      visibility: visible;
    }

    /* Header */
     .partner-modal-container .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 16px 20px;
    }

     .partner-modal-container .modal-header h4 {
      margin: 0;
      font-size: 18px;
      color: #1a1a1a;
    }

     .partner-modal-container .partner-subtitle {
      color: #707b8c;
      font-size: 13px;
      margin: 2px 0 0 0;
    }

     .partner-modal-container .partner-close-btn {
      background: none;
      border: none;
      font-size: 24px;
      color: #333;
      cursor: pointer;
      line-height: 1;
    }

     .partner-modal-container .partner-close-btn:hover {
      color: #0070f3;
    }

     .partner-modal-container .divider {
      height: 1px;
      background: #e5e9f0;
      margin: 0;
    }

     .partner-modal-container .modal-body {
      padding: 16px 20px 20px 20px;
      text-align: left;
      max-height: 70vh;
      overflow-y: auto;
      background: white;
      border-radius: 8px;
    }

     .partner-modal-container .benefit {
      margin-bottom: 16px;
    }

    .partner-modal-container .benefit h5 {
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 4px;
      color: #1a1a1a;
    }

    .partner-modal-container .benefit p {
      margin: 0;
      color: #1a1a1a;
      font-size: 14px;
      line-height: 1.4;
    }

    .partner-modal-container .modal-body::-webkit-scrollbar {
      width: 6px;
    }
   .partner-modal-container .modal-body::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 4px;
    }

/*--------------------------------------------------------------
BSA, KYC & IDP - How it works section
--------------------------------------------------------------*/

.how-it-works-box {
  max-width: 520px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
}

.how-it-works-box h3 {
  font-size: 24px !important;
  font-weight: 700;
  color: #1a1a1a !important;
  margin-bottom: 12px;
}

.how-it-works-box hr {
  border: none;
  height: 1px;
  background-color: #e6e6e6;
  margin-bottom: 20px;
}

.how-it-works-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.how-it-works-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.how-it-works-item p {
  font-size: 16px;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0;
}

.how-it-works-item .check-icon {
  color: #fff;
  background: #1a3ad6;
  font-weight: bold;
  font-size: 14px;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ===============================
   HOW IT WORKS – RESPONSIVE ONLY
   (Text alignment fix only)
================================ */

/* TABLET */
@media (max-width: 991px) {
  .how-it-works-box,
  .how-it-works-box h3,
  .how-it-works-item p {
    text-align: left;
  }
}

/* MOBILE */
@media (max-width: 767px) {
  .how-it-works-box,
  .how-it-works-box h3,
  .how-it-works-item p {
    text-align: left;
  }
  .how-it-works-box {
    padding: 0px;
  }
  .how-it-works-box h3 {
    font-size: 18px !important;
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {
  .how-it-works-box,
  .how-it-works-box h3 {
    text-align: left;
    padding-top: 20px;
  }
}

@media (max-width: 767px) {
.how-it-works-item p {
  padding-top: 0px;
}
}


/*--------------------------------------------------------------
Why trust DocuGenie.AI
--------------------------------------------------------------*/

/* --- Stats --- */
.why-trust .txt {
  font-size: 0.75rem !important;
  margin: 20px 0px;
}

.statz-sec {
  display: flex;
  justify-content: left;
  align-items: left;
  gap: 3rem;
  flex-wrap: wrap;
  text-align: left;
  margin: 20px 0px;
}

.statzx h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #4338ca; /* purple-blue */
  margin-bottom: 4px;
}

.statzx p {
  font-size: 0.95rem;
  color: #444;
  margin: 0;
}

/* Right aligned badge */
.stat-badge {
  position: absolute;
  right: -90px;              
  top: 30%;
  transform: translateY(-50%);
  width: 600px;           
  background: linear-gradient(90deg, #1a3ad6 0%, #5b6ef5 60%, #ffffff 100%);
  color: #fff;
  padding: 16px 32px;
  border-radius: 6px 0 0 6px; 
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(91,59,224,0.15);
  white-space: nowrap;
}

.stat-badge p, .stat-badge2 p {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

/* number styling */
.stat-badge .count-num {
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-block;
  min-width: 48px;
  text-align: left;
}

/* smaller label */
.stat-badge .label {
  font-size: 0.95rem;
  opacity: 0.95;
}

.stat-badge2 {
  position: absolute;
  right: -90px;              
  top: 30%;
  transform: translateY(-50%);
  width: 600px;           
  background: linear-gradient(90deg, #1a3ad6 0%, #5b6ef5 60%, #ffffff 100%);
  color: #fff;
  padding: 16px 32px;
  border-radius: 6px 0 0 6px; 
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(91,59,224,0.15);
  white-space: nowrap;
}

/* number styling */
.stat-badge2 .count-num {
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-block;
  min-width: 48px;
  text-align: left;
}

/* smaller label */
.stat-badge2 .label {
  font-size: 0.95rem;
  opacity: 0.95;
}

/* Right aligned badge */
.badge-2 {
  position: absolute;
  right: -90px;              
  top: 60%;
  transform: translateY(-50%);
  width: 450px;           
  background: linear-gradient(90deg, #6e6e6e 0%, #b5b5b5 60%, #f5f5f5 100%);
  color: #fff;
  padding: 16px 32px;
  border-radius: 6px 0 0 6px; 
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(91,59,224,0.15);
  white-space: nowrap;
}

/* number styling */
.badge-2 .count-num {
  font-size: 1.5rem;
  font-weight: 700;
  display: inline-block;
  min-width: 48px;
  text-align: left;
}

/* smaller label */
.badge-2 .label {
  font-size: 0.95rem;
  opacity: 0.95;
}

@media (max-width: 600px) {
.stat-badge {
    position: absolute;
    right: -290px;
    margin-top: 40px;
}

.badge-2 {
    position: absolute;
    right: -220px;
    /* top: 85%; */
    margin-top: 120px !important;
}
.why-trust .mt-120 {
    margin-top: 180px !important;
}
}
@media (max-width: 767px) {
  .stat-badge .count-num,
  .badge-2 .count-num {
      font-size: 1.2rem;
  }
}
/* --- product benefits --- */
.core-features-section {
  padding: 60px 20px;
  background: linear-gradient(#ffffff, #f3f6ff);
}

/* 3 Column Layout */
.core-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 1300px;
  margin: auto;
  align-items: center;
}

/* Feature Lists (ul) */
.core-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Feature Item (li) */
.core-feature-item {
  background: white;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #333;
  transition: 0.25s ease;
}

/* Hover Effect */
.core-feature-item:hover {
  box-shadow: 0 6px 18px rgba(63, 124, 255, 0.15);
  color: #1a3ad6;
}

/* Tick Icon */
.core-check-icon {
  width: 26px;
  height: 26px;
  background: #2d6bff;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  flex-shrink: 0;
}

/* Middle Image */
.core-center-image {
  display: flex;
  justify-content: center;
}

.core-center-image img {
  width: 325px;
  height: auto;
}

/* Responsive */
@media (max-width: 992px) {
  .core-features-grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .core-center-image img {
    width: 260px;
  }
}

/* --- Cards --- */

.ida-benefits .trust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 50px;
}

.trust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin-top: 50px;
}

.trust-card {
  background: #fbfbfb;
  color: #1a1a1a;
  padding: 16px 20px;
  border-radius: 16px;
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.trust-card:hover {
  transform: translateY(-6px);
  box-shadow: 0px 10px 25px rgba(26, 58, 214, 0.25);
}

.trust-card .icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.trust-card h4 {
  font-size: 1.1rem !important;
  font-weight: 700;
  margin: 10px 0px 10px 0px;
  color: #1a1a1a !important;
}

.trust-card p {
  font-size: 1rem;
  opacity: 0.9;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-20px);
	}
	100% {
		transform: translatey(0px);
	}
}

.avatar {
	overflow: hidden;
	transform: translatey(0px);
	animation: float 6s ease-in-out infinite;
  position: absolute;
  top: -25px;
  right: 30px;
	img { width: 150px; height: 150px; }
}

/* Hide avatar on tablet + mobile */
@media (max-width: 991px) {
  .avatar {
    display: none !important;
  }
}


/*--------------------------------------------------------------
Target Industry

--------------------------------------------------------------*/

.industries-section {
  padding: 60px 0;
  text-align: center;
}

.industries-section .section-title {
  font-size: 1.8rem !important;
  font-weight: 600;
  color: #000;
  margin-bottom: 20px;
}

/* Grid Layout */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.bsa-industri .material-symbols-outlined { font-size: 36px; }
/* For POD page (unchanged) */
.pod .bsa-industri .industries-grid {
  grid-template-columns: repeat(2, 1fr);
}

.kyc-qc .bsa-industri .industries-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 600px) { 
  .kyc-qc .bsa-industri .industries-grid,
  .pod .bsa-industri .industries-grid {
    grid-template-columns: 1fr;
  }
}

/* Card Styling */
.industry-card {
  background: #fbfbff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 40px 30px;
  text-align: left;
  
  /* ✔ FIX — MAKE CARD A FLEX CONTAINER */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 12px;

  transition: all 0.3s ease;
}

.industry-card img {
  width: 48px;
  height: 48px;
  margin-bottom: 24px;
}

.industry-card h3 {
  font-size: 1.1rem !important;
  font-weight: 700;
  color: #1a1a1a !important;
}

/* ✔ NEW CLASS TO JUSTIFY PARAGRAPH TEXT */
.justify-text {
  text-align: left;

  /* ✔ FIX — ENABLE justify-content BY MAKING <p> A FLEX CONTAINER */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.industry-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0;
}

/* Hover Effect */
.industry-card:hover {
  background: #1a3ad6 !important;
  color: #fff !important;
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(8,6,170,0.25);
}

.bsa-industri .industry-card .material-symbols-outlined,
.bsa-industri .industry-card h3 {
  color: #1a3ad6 !important;
}

.bsa-industri .industry-card:hover .material-symbols-outlined,
.bsa-industri .industry-card:hover h3 {
  color: #fff !important;
}

.bsa-industri .industry-card:hover {
  transform: none !important;
  transition: 1s ease;
}

/* Hover text color fix */
.industry-card:hover h3,
.industry-card:hover p {
  color: #fff !important;
}

/* Responsive Layout */
@media (max-width: 991px) {
  .industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Grid Layout */
.why-choose-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .why-choose-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .why-choose-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Card Style */
.why-choose-card {
    display: flex;
    gap: 16px;
    background: #ffffff;
    border: 1px solid rgba(226, 226, 226, 0.6);
    border-radius: 16px;
    padding: 16px 16px 4px 16px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    transition: 0.3s ease;
    align-items: flex-start;
}

/* Hover Effect */
.why-choose-card:hover .why-choose-card-icon {
    background: #1a3ad6;
}

.why-choose-card:hover .why-choose-card-icon svg {
    color: #ffffff !important;
}

/* Icon Box */
.why-choose-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(54, 130, 244, 0.12);
    color: #1a3ad6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.3s ease;
}

/* Default SVG Color */
.why-choose-card-icon svg {
    color: #1a3ad6;
    transition: 0.3s ease;
}

/* Title */
.why-choose-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f1f1f;
}

/* Description */
.why-choose-desc {
    margin-top: 10px;
    color: #666;
    font-size: 15.5px;
    line-height: 24px;
}

@media (max-width: 767px) {
  .why-choose-title {
    font-size: 16px !important;
    font-weight: 600;
  }
}

/*--------------------------------------------------------------
Download Case Study Banner
--------------------------------------------------------------*/

.case-study-banner {
  width: 100%;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

/* Container */
.case-study-container {
  max-width: 1100px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 40px;

  background: radial-gradient(
    circle at 20% 30%,
    rgba(220, 230, 255, 1) 0%,
    rgba(240, 230, 250, 1) 40%,
    rgba(245, 245, 255, 1) 70%,
    rgba(230, 245, 255, 1) 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 16px;
  padding: 50px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Grid overlay */
.case-study-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
}

/* Left Content (60%) */
.case-study-content {
  flex: 0 0 60%;
  z-index: 1;
}

.case-study-content h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.case-study-content p {
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 90%;
}

@media only screen and (max-width: 767px) {
  .case-study-content p {
    font-size: 1rem;
  }
}

.hero-buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #000;
  color: #fff;
  border-radius: 8px;
  font-weight: 500;
  transition: 0.3s ease;
}

.hero-buttons .btn:hover {
  cursor: pointer;
  transform: scale(1.05);
}

/* Right Image (40%) */
.case-study-image {
  flex: 0 0 40%;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.case-study-image img {
  width: 100%;
  max-width: 235px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Responsive */
@media (max-width: 900px) {
  .case-study-container {
    flex-direction: column;
    text-align: center;
    padding: 40px 30px;
  }

  .case-study-content,
  .case-study-image {
    flex: 100%;
  }

  .case-study-content p {
    margin: 0 auto 25px;
  }

  .case-study-image img {
    max-width: 90%;
  }
}



.bank-analysis-section {
  text-align: center;
  padding: 60px 20px;
}

.bank-analysis-section .features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  justify-content: center;
  margin-bottom: 60px;
}

.bank-analysis-section .feature-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 25px 20px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.bank-analysis-section .feature-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}

.bank-analysis-section .feature-card .icon {
  font-size: 28px;
  color: #1a3a66;
  margin-bottom: 10px;
}

.bank-analysis-section .feature-card h3 {
  font-size: 1.1rem !important;
  font-weight: 600;
  color: #1a1a1a !important;
  margin-bottom: 10px;
}

.bank-analysis-section .feature-card p {
  font-size: 0.95rem;
  color: #1a1a1a;
  line-height: 1.5;
}

.bank-analysis-section .solution-box {
  padding: 20px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.bank-analysis-section .solution-box h3 {
  font-size: 1.8em !important;
  font-weight: 700;
  color: #1a1a1a !important;
  margin-bottom: 10px;
}

.bank-analysis-section .solution-box p {
  color: #1a1a1a;
  margin-bottom: 20px;
} 


.bsa-benefit-section {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
}

.bsa-benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 40px;
  justify-items: center;
  margin: 0 auto;
}

.bsa-benefit-card {
  background: #fff;
  border-radius: 20px;
  padding: 20px 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  width: 160px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;      
  text-align: center;
}

.bsa-benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 26px rgba(26, 58, 214, 0.12);
}

.bsa-benefit-card .icon img {
  width: 80px;
  height: 80px;
  padding: 4px;
  text-align: center !important;
  filter: invert(17%) sepia(85%) saturate(2036%) hue-rotate(222deg) brightness(92%) contrast(98%);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.bsa-benefit-card:hover .icon img {
   width: 100px;
  height: 100px;
  transform: scale(1.15);
  filter: invert(15%) sepia(90%) saturate(2200%) hue-rotate(225deg) brightness(100%) contrast(95%);
}

.bsa-benefit-card p {
  font-size: 1rem;
  color: #1a1a1a;
  font-weight: 600;
  margin-top: 15px;
}

.ida-features {
      max-width: 1200px;
      margin: 0 auto;
      padding: 60px 20px;
    }

    .ida-features-title {
      text-align: center;
      font-size: 2.2rem;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 50px;
    }

    /* ---------- Grid Layout ---------- */
    .ida-features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
    }

    /* ---------- Card Styles ---------- */
    .ida-feature-card {
      background: #fff;
      border-radius: 16px;
      padding: 30px 25px;
      text-align: left;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateY(30px);
    }

    /* ---------- Icon Styles ---------- */
    .ida-feature-icon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #dbeafe, #bfdbfe);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2563eb;
      font-size: 32px;
      margin-bottom: 20px;
      transition: transform 0.3s ease;
    }

    .material-icons-outlined {
      font-size: 32px;
    }

    .ida-feature-card h3 {
      font-size: 1.1rem !important;
      font-weight: 600;
      color: #1a1a1a !important;
      margin-bottom: 10px;
    }

    .ida-feature-card p {
      font-size: 0.95rem;
      color: #555;
    }

    /* ---------- Hover Effects ---------- */
    .ida-feature-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 10px 20px rgba(37, 99, 235, 0.15);
    }

    .ida-feature-card:hover .ida-feature-icon {
      transform: scale(1.1);
    }

    /* ---------- Scroll Animation ---------- */
    .fade-in {
      opacity: 1;
      transform: translateY(0);
      transition: all 0.8s ease;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 768px) {
      .ida-features-title {
        font-size: 1.8rem;
      }
    }

    @media (max-width: 480px) {
      .ida-feature-card {
        text-align: center;
      }

      .ida-feature-icon {
        margin: 0 auto 15px;
      }
    }

.ida-process-section {
  text-align: center;
  margin: 60px 0;
}

.ida-process-title {
  font-size: 1.8rem !important;
  font-weight: 600;
  color: #1a1a1a !important;
  margin: 40px;
}

.ida-process-grid {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* ensure equal height */
  flex-wrap: wrap;
  gap: 30px;
  position: relative;
  padding: 40px 0;
}

/* ✨ Animated connecting line — passes through card middle */
.ida-process-grid::before {
  content: "";
  position: absolute;
  top: 45%; /* center line vertically */
  left: 8%;
  width: 76%;
  height: 3px;
  background: linear-gradient(90deg, #d6d6d6, #bfbfbf); /* light grey line */
  border-radius: 4px;
  z-index: 0;
  transform: translateY(-50%);
  animation: drawLine 2.5s ease-in-out forwards;
}

@keyframes drawLine {
  0% { width: 0; opacity: 0; }
  100% { width: 76%; opacity: 1; }
}

.ida-process-card {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 30px 25px;
  width: 23%;
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  z-index: 1;
  min-width: 250px;
  min-height: 260px; /* ensures equal height */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.ida-process-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.ida-icon-wrap {
  width: 70px;
  height: 70px;
  background: #1a3ad6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #fff;
  font-size: 36px;
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.ida-process-card:hover .ida-icon-wrap {
  transform: scale(1.1) rotate(8deg);
  filter: drop-shadow(0 3px 6px rgba(0, 119, 255, 0.4));
}

.ida-process-head {
  font-size: 1.1rem !important;
  font-weight: 600;
  color: #1a1a1a !important;
  margin-bottom: 10px;
}

.ida-process-text {
  font-size: 0.95rem;
  color: #1a1a1a !important;
  line-height: 1.6;
}

/* 💡 Responsive Design */
@media (max-width: 991px) {
  .ida-process-grid {
    flex-wrap: wrap;
    justify-content: center;
  }
  .ida-process-card {
    width: 45%;
    min-height: 240px;
  }
  .ida-process-grid::before {
    display: none;
  }
}

@media (max-width: 600px) {
  .ida-process-card {
    width: 100%;
    min-height: 220px;
  }
  .ida-process-grid::before {
    display: none;
  }
}

.usecase-section {
  text-align: center;
  display: flex;
  justify-content: center;
  padding-bottom: 60px;
}

.usecase-title {
  font-size: 1.8rem !important;
  font-weight: 600;
  margin-bottom: 50px;
  color: #1a1a1a;
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.usecase-card {
  background: #fff;
  border-radius: 16px;
  padding: 10px 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  text-align: left;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards;
}

.usecase-card:nth-child(1) { animation-delay: 0.1s; }
.usecase-card:nth-child(2) { animation-delay: 0.3s; }
.usecase-card:nth-child(3) { animation-delay: 0.5s; }
.usecase-card:nth-child(4) { animation-delay: 0.7s; }
.usecase-card:nth-child(5) { animation-delay: 0.9s; }
.usecase-card:nth-child(6) { animation-delay: 1.1s; }

.usecase-card:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

.usecase-card-icon {
  width: 56px;
  height: 56px;
  background: #1a3ad6;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 28px;
  margin-bottom: 20px;
}

.usecase-card-title {
  font-size: 1.1rem !important;
  font-weight: 600;
  color: #1a1a1a !important;
  margin-bottom: 10px;
}

.usecase-card-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1a1a1a;
}

.usecase-card-text a {
  color: #1a3ad6;
  text-decoration: none;
  font-weight: 500;
}

.usecase-card-text a:hover {
  text-decoration: underline;
}

/* Animation */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 991px) {
  .usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .usecase-grid {
    grid-template-columns: 1fr;
  }
  .usecase-card {
    text-align: center;
  }
  .usecase-card-icon {
    margin: 0 auto 20px;
  }
}



.usecase_section {
  padding: 60px 20px;
  background-color: #fff;
}

.usecase_section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.usecase_section .usecase-header {
  text-align: center;
  margin-bottom: 60px;
}

.usecase_section .usecase-subheading {
  color: #1a1a1a;
  font-size: 0.95rem;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.usecase_section .usecase-header h2 {
  font-weight: 700;
  font-size: 1.8rem !important;
  color: #1a1a1a !important;
}

.usecase-header p {
  margin-top: 30px;
}

.usecase_section .usecase-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  flex-wrap: wrap;
  margin-bottom: 80px;
}

.usecase_section .usecase-text {
  flex: 1;
  min-width: 300px;
}

.usecase_section .usecase-text h3 {
  font-size: 1.5rem !important;
  color: #1a1a1a !important;
  margin-bottom: 20px;
}

.usecase_section .usecase-text ul {
  padding-left: 20px;
  margin-bottom: 24px;
  color: #1a1a1a;
  line-height: 1.6;
}

.usecase_section .usecase-text ul li {
  padding-bottom: 10px;
  color: #1a1a1a;
  list-style-type: disc !important;
  font-size: 16px;
  line-height: 1.2;
}

.usecase_section .usecase-link {
  display: inline-flex;
  align-items: center;
  color: #1a3ad6;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}

.usecase_section .usecase-link:hover {
  color: #0806AA;
}

.usecase_section .usecase-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.usecase_section .usecase-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Responsive */
@media (max-width: 900px) {
  .usecase_section .usecase-content {
    flex-direction: column;
    text-align: center;
  }

  .usecase_section .usecase-text {
    order: 2;
  }

  .usecase_section .usecase-image {
    order: 1;
  }
}

.main-stat {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 60px 8%;
      gap: 60px;
      overflow: hidden;
    }

    /* Left Column */
    .statt-content {
      flex: 1 1 45%;
      opacity: 0;
      transform: translateY(40px);
      animation: fadeInUp 1s forwards;
    }

    .statt-content h2 {
      font-size: 1.8rem;
      font-weight: 600;
      margin-bottom: 40px;
      line-height: 1.3;
    }

    .stattz {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 40px 60px;
    }

    .statt {
      display: flex;
      flex-direction: column;
    }

    .statt h3 {
      font-size: 1.1rem;
      color: #1a1a1a !important;
      font-weight: 600;
      margin: 0;
    }

    .statt p {
      color: #1a1a1a;
      margin-top: 8px;
      font-size: 1rem;
    }

    /* Right Column (Image) */
    .image-container {
      flex: 1 1 45%;
      display: flex;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transform: translateY(40px);
      animation: fadeInUp 1s forwards 0.3s;
    }

    .image-wrapper {
      width: 400px;
      height: 400px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
      position: relative;
    }

    .image-wrapper::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top right, rgba(0, 119, 255, 0.2), transparent);
    }

    .image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .image-wrapper:hover img {
      transform: scale(1.05);
    }

    /* Animations */
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Responsive */
    @media (max-width: 992px) {
      section {
        flex-direction: column;
        text-align: left;
        padding: 30px 5%;
      }

      .image-wrapper {
        width: 320px;
        height: 320px;
      }

      .stattz {
        grid-template-columns: 1fr;
        gap: 30px;
      }
    }


  .automation-title {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 600;
  margin-top: 60px;
  margin-bottom: 40px;
  color: #111;
}

.automation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto 80px;
  padding: 0 20px;
}

.automation-column-title {
  font-size: 1.3rem !important;
  font-weight: 600;
  margin-bottom: 1rem;
}

.automation-column-title.orange { color: #ff6600; }
.automation-column-title.blue { color: #1a3ad6; }

.automation-grid .card {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-left: 6px solid;
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.4s ease;
}

.automation-grid .card.orange {
  border-color: #ff6600;
  background: linear-gradient(135deg, #fff5ed, #ffe6d1);
}

.automation-grid .card.blue {
  border-color: #0077ff;
  background: linear-gradient(135deg, #eaf3ff, #d9e8ff);
}

.automation-grid .card.visible {
  transform: translateY(0);
  opacity: 1;
}

.automation-grid .card:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.automation-grid .card h4 {
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.1rem !important;
}

.automation-grid .card p {
  color: #1a1a1a;
  font-size: 0.95rem;
  line-height: 1.5;
}

.material-icons-outlined {
  font-size: 28px;
  vertical-align: middle;
  margin-right: 8px;
  color: inherit;
}

/* Responsive */
@media (max-width: 900px) {
  .automation-grid {
    grid-template-columns: 1fr;
  }

  .automation-column-title {
    text-align: center;
  }
}


    .bfsi-features {
      padding: 60px 0px;
      text-align: center;
      background: #0806AA;
    }

    .bfsi-features h2 {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 16px;
      color: #fff !important;
    }

    p.subheading {
      font-size: 1rem;
      color: #fff;
      max-width: 700px;
      margin: 0 auto 60px;
      line-height: 1.6;
    }

    .bfsi-feature {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
    }

    .bfsi-card {
      background: #fff;
      color: #1a1a1a;
      border-radius: 20px;
      padding: 40px 30px;
      width: 320px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-align: left;
    }

    .bfsi-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    }

    .bfsi-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 4px;
      background: #1a3ad6;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
    }

    .bfsi-card .icon {
      font-size: 32px;
      color: #1a3ad6;
      margin-bottom: 20px;
    }

    .bfsi-card h3 {
      font-size: 1.1rem !important;
      font-weight: 600;
      margin-bottom: 8px;
      color: #1a1a1a;
    }

    .bfsi-card p {
      font-size: 0.9rem;
      color: #1a1a1a;
      margin-bottom: 12px;
    }

    .bfsi-counter {
      font-size: 3rem;
      font-weight: 700;
      color: #1a1a1a;
      line-height: 1;
    }

    .bfsi-counter span {
      font-size: 1.5rem;
      font-weight: 500;
    }

    @media (max-width: 900px) {
      .bfsi-card {
        width: 90%;
        text-align: center;
      }
      .bfsi-card::before {
        display: none;
      }
    }

    /* Fade-up Animation */
    .fade-up {
      opacity: 0;
      transform: translateY(40px);
      transition: all 0.8s ease;
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }


    
    .challenges {
      display: grid;
      grid-template-columns: 1fr 2fr;
      min-height: 100vh;
      background: #f7f7f7;
      align-items: stretch;
      overflow: hidden;
    }

    /* Left Panel */
    .left-panel {
      background: #1a3ad6;
      color: #ffffff;
      padding: 80px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
      position: relative;
      animation: fadeInLeft 1.2s ease;
    }

    .left-panel h2 {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: #ffffff !important;
    }

    .left-panel p {
      font-size: 1.1rem;
      margin-bottom: 40px;
      opacity: 0.9;
    }

    .left-panel .cta-btn {
      background: #ffffff;
      color: #1a3ad6;
      border: none;
      padding: 14px 28px;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
    }

    .left-panel .cta-btn:hover {
      background: #fff5f5;
      transform: translateY(-3px);
    }

    /* Right Panel */
    .right-panel {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      padding: 80px 60px;
      background: #ffffff;
      animation: fadeInRight 1.2s ease;
    }

    .right-panel .column {
      display: flex;
      flex-direction: column;
      gap: 25px;
    }

    .right-panel.column h3 {
      text-align: center;
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid;
    }

    .right-panel h3 {
      color: #1a3ad6;
      border-bottom: 1px solid #1a3ad6;
    }

    .solutions h3 {
      color: #1a3ad6;
      border-bottom: 1px solid #1a3ad6;
    }

    .right-panel ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .right-panel ul li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 0.95rem;
      line-height: 1.5;
      background: #fafafa;
      padding: 14px 18px;
      border-radius: 14px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      opacity: 0;
      transform: translateY(30px);
      animation: fadeUp 0.8s ease forwards;
      margin-bottom: 10px;
    }

    .right-panel ul li:nth-child(1) { animation-delay: 0.2s; }
    .right-panel ul li:nth-child(2) { animation-delay: 0.4s; }
    .right-panel ul li:nth-child(3) { animation-delay: 0.6s; }
    .right-panel ul li:nth-child(4) { animation-delay: 0.8s; }

    .right-panel ul li:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    .right-panel ul li img {
      width: 22px;
      height: 22px;
      margin-top: 2px;
    }

    /* Animations */
    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInLeft {
      from {
        opacity: 0;
        transform: translateX(-50px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(50px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    /* Responsive */
    @media (max-width: 1024px) {
      section {
        grid-template-columns: 1fr;
      }
      .left-panel {
        text-align: center;
        align-items: center;
        padding: 60px 20px;
      }
      .right-panel {
        grid-template-columns: 1fr;
        padding: 60px 20px;
      }
      .right-panel .column h3 {
        text-align: center;
      }
    }

    @media (max-width: 600px) {
      .left-panel h2 {
        font-size: 1.6rem;
      }
      .left-panel p {
        font-size: 1rem;
      }
      .cta-btn {
        font-size: 0.9rem;
        padding: 12px 24px;
      }
      .right-panel ul li {
        font-size: 0.9rem;
      }
    }


    
  .bfsi-usecase {
    padding: 80px 20px;
    text-align: center;
  }

  .bfsi-usecase  h2 {
    font-size: 1.8rem !important;
    font-weight: 700;
    margin-bottom: 60px;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .bfsi_card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 14px;
    padding: 28px 24px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.35s ease;
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.8s forwards;
  }

  .bfsi_card:nth-child(1) { animation-delay: 0.2s; }
  .bfsi_card:nth-child(2) { animation-delay: 0.4s; }
  .bfsi_card:nth-child(3) { animation-delay: 0.6s; }
  .bfsi_card:nth-child(4) { animation-delay: 0.8s; }
  .bfsi_card:nth-child(5) { animation-delay: 1s; }
  .bfsi_card:nth-child(6) { animation-delay: 1.2s; }

  .bfsi_card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  }

  .bfsi-icon {
    width: 48px;
    height: 48px;
    background: #1a3ad6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
  }

  .bfsi_card:hover .bfsi-icon {
    background: #005fd1;
    transform: scale(1.1);
  }

  .bfsi_card h3 {
    font-size: 1.1rem !important;
    font-weight: 600;
    margin: 0;
    color: #1a1a1a !important;
  }

  .bfsi_card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #1a1a1a;
    margin: 0;
  }

  .bfsi-cta-btn {
    background: transparent;
    color: #1a3ad6;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #1a3ad6;
    align-self: flex-start;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .bfsi-cta-btn:hover {
    background: #ffffff;
    color: #1a3ad6;
    border: 1px solid #1a3ad6;
    transform: translateY(-2px);
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsive Design */
  @media (max-width: 1024px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 700px) {
    .grid {
      grid-template-columns: 1fr;
    }
    .bfsi-usecase h2 {
      font-size: 1.7rem;
      margin-bottom: 40px;
    }
  }

  .infographic {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 700px;
  margin: 0 auto;
}

.infographic .center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a90e2, #357ae8);
  color: white;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.infographic .center-circle h2 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #fff !important;
}

.infographic .center-circle p {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* ---------- Step Cards ---------- */

.infographic .card {
  position: absolute;
  width: 180px;
  background: #fff;
  border-radius: 16px;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.infographic .card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.infographic .step-badge {
  background: #4a90e2;
  color: #fff;
  font-weight: 600;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  margin: 0 auto 0.5rem;
  font-size: 1.1rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: -35px;
}

.infographic .card h3 {
  font-size: 1rem !important;
  color: #1a1a1a !important;
  margin-bottom: 0.4rem;
}

.infographic .card p {
  font-size: 0.85rem;
  color: #666;
}

/* ---------- Card Positions (Clockwise) ---------- */

.infographic .step1 { top: 5%; left: 50%; transform: translate(-50%, 0); }
.infographic .step2 { top: 25%; right: 5%; }
.infographic .step3 { bottom: 25%; right: 5%; }
.infographic .step4 { bottom: 5%; left: 50%; transform: translate(-50%, 0); }
.infographic .step5 { bottom: 25%; left: 5%; }
.infographic .step6 { top: 25%; left: 5%; }

/* ---------- Responsive Design ---------- */
@media (max-width: 768px) {
  .infographic {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
  }

  .infographic .center-circle {
    position: relative;
    transform: none;
    width: 180px;
    height: 180px;
    margin-bottom: 1.5rem;
  }

  .infographic .card {
    position: relative;
    width: 90%;
    max-width: 350px;
  }

  .infographic .step1, .infographic .step2, 
  .infographic .step3, .infographic .step4, 
  .infographic .step5, .infographic .step6 {
    top: auto; bottom: auto; left: auto; right: auto; transform: none;
  }
}


/* ======= Layout ======= */
.onboarding-section {
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.onboarding-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

/* ======= Left Content ======= */
.onboarding-section .left-content h2 {
  font-size: 1.8rem !important;
  font-weight: 700;
  margin-bottom: 30px;
  color: #1a1a1a;
}

.onboarding-section .left-content h2 span {
  color: #1a3ad6;
}

.onboarding-section .feature {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 20px;
}

.onboarding-section .icon {
  background-color: #1a3ad6;
  color: #fff;
  font-size: 1.2rem;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.onboarding-section .text h4 {
  font-size: 1rem !important;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.onboarding-section .text p {
  font-size: 0.9rem;
  color: #1a1a1a;
  line-height: 1.6;
}

/* ======= Button ======= */
.onboarding-section .cta-btn {
  background-color: transparent;
  color: 1a3ad6;
  font-size: 1rem;
  border: 1px solid #1a3ad6;
  border-radius: 6px;
  padding: 12px 28px;
  margin-top: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.onboarding-section .cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(255, 77, 0, 0.3);
}

/* ======= Right Image ======= */
.onboarding-section .right-image img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* ======= Responsive ======= */
@media (max-width: 900px) {
  .onboarding-section .container {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .onboarding-section .right-image {
    order: 2;
  }

  .onboarding-section .left-content {
    order: 1;
  }

  .onboarding-section .left-content h2 {
    font-size: 1.7rem;
  }

  .onboarding-section .cta-btn {
    margin: 20px 0;
  }
}

/*--------------------------------------------------------------
 Contact page form
--------------------------------------------------------------*/

.contact-page-section {
  display: flex;
  justify-content: center;
  padding: 60px 20px;
}

.contact-container {
  display: flex;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  max-width: 1100px;
  width: 100%;
  flex-wrap: wrap;
}

/* Left Side */
.contact-page-section .contact-form {
  flex: 1 1 480px;
  padding: 40px;
  background: #fff;
}

.contact-page-section .contact-subtitle {
  color: #1a3ad6;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.contact-page-section .contact-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.contact-page-section .contact-text {
  color: #1a1a1a;
  font-size: 1rem;
  margin-bottom: 25px;
}

.contact-page-section .input-row {
  display: flex;
  gap: 15px;
}

.contact-page-section .input-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 15px;
}

.contact-container label {
  font-size: 0.85rem;
  color: #1a1a1a;
  margin-bottom: 5px;
}

.contact-container input,
.contact-container textarea {
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.contact-container input:focus,
.contact-container textarea:focus {
  border-color: #6366f1;
  outline: none;
}

/* ✅ FIXED CHECKBOX ALIGNMENT */
.contact-page-section .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0 25px;
  font-size: 0.9rem;
  color: #1a1a1a;
  flex-wrap: wrap;
}

.contact-page-section .checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #6366f1;
  cursor: pointer;
  margin-top: 2px;
}

.contact-page-section .checkbox label {
  margin-bottom: 0;
  line-height: 1.4;
}

.contact-page-section .submit-btn {
  background: #6366f1;
  color: #fff;
  padding: 12px 22px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-page-section .submit-btn:hover {
  cursor: pointer;
    transform: scale(1.03);
    color: #1a3ad6 !important;
}

/* Right Side */
.contact-page-section .contact-info {
  flex: 1 1 480px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}

.contact-page-section .contact-image img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  max-width: 400px;
}

.contact-page-section .info-cards {
  width: 100%;
  margin-top: 25px;
}

.contact-page-section .info-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  margin-bottom: 15px;
}

.contact-page-section .info-card i {
  font-size: 1.2rem;
  color: #6366f1;
  background: #eef2ff;
  padding: 10px;
  border-radius: 50%;
}

.contact-page-section .info-card h1 {
  font-size: 1.1rem !important;
  margin-bottom: 4px;
}

.contact-page-section .info-card p {
  font-size: 0.9rem;
  color: #666;
}

/* Responsive */
@media (max-width: 992px) {
  .contact-container {
    flex-direction: column;
  }

  .contact-page-section .contact-info {
    align-items: flex-start;
  }

  .contact-page-section .contact-image img {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .contact-page-section .input-row {
    flex-direction: column;
  }

  .contact-page-section .contact-form {
    padding: 25px;
  }

  .contact-page-section .contact-info {
    padding: 20px;
  }

  .contact-page-section .info-card {
    flex-direction: row;
    align-items: flex-start;
  }

  .contact-page-section .checkbox {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
}

.contact-page-section .submit-btn {
  background: #fff;
  color: #1a3ad6;
  padding: 12px 22px;
  border: 1px solid #123ad6;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.contact-page-section .submit-btn:hover {
  background: white;
  color: #1a3ad6;
}

/* Right Side */
.contact-page-section .contact-info {
  flex: 1 1 480px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}

.contact-page-section .contact-image img {
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
  max-width: 600px;
}

.contact-page-section .info-cards {
  width: 100%;
  margin-top: 25px;
}

.contact-page-section .info-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  border-radius: 12px;
  padding: 15px 20px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  margin-bottom: 15px;
}

.contact-page-section .info-card i {
  font-size: 1.2rem;
  color: #6366f1;
  background: #eef2ff;
  padding: 10px;
  border-radius: 50%;
  /* margin-top: -30px; */
}

.contact-page-section .info-card h1 {
  font-size: 1.1rem !important;
  margin-bottom: 4px;
}

.contact-page-section .info-card h2 {
  font-size: 1.1rem !important;
  margin-bottom: 4px;
}

.contact-page-section .info-card p {
  font-size: 0.9rem;
  color: #666;
}

/* Responsive */
@media (max-width: 992px) {
  .contact-page-section .contact-container {
    flex-direction: column;
  }

  .contact-page-section .contact-info {
    align-items: flex-start;
  }

  .contact-page-section .contact-image img {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .contact-page-section .input-row {
    flex-direction: column;
  }

  .contact-page-section .contact-form {
    padding: 25px;
  }

  .contact-page-section .contact-info {
    padding: 20px;
  }

  .contact-page-section .info-card {
    flex-direction: row;
    align-items: flex-start;
  }
}

/*--------------------------------------------------------------
 Contact Page -  Map Section
--------------------------------------------------------------*/

.contact-map-section {
  text-align: center;
  padding: 60px 20px;
}

.contact-map-section .contact-header h2 {
  font-size: 1.8rem !important;
  font-weight: 700;
  margin: 10px 0;
  color: #1a1a1a !important
}

/* Map container */
.contact-map-section .world-map {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  padding: 20px;
}

.contact-map-section .world-map img {
  width: 100%;
  display: block;
  opacity: 0.9;
}

/* Location dots */
.contact-map-section .map-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: #2563eb;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: blink 1.5s infinite ease-in-out;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

@keyframes blink {
  0%, 100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3);
  }
}

/* Tooltip */
.contact-map-section .tooltip {
  position: absolute;
  background: #111827;
  color: #fff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.3;
  white-space: nowrap;
  display: none;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -140%) scale(0.95);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.contact-map-section .tooltip.active {
  display: block;
  opacity: 1;
  transform: translate(-50%, -160%) scale(1);
}

.contact-map-section .tooltip::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #111827 transparent transparent transparent;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-map-section .contact-header h2 {
    font-size: 1.2rem !important;
    color: #1a1a1a !important;
  }

  .contact-map-section .world-map {
    max-width: 95%;
  }

  .contact-map-section .map-dot {
    width: 10px;
    height: 10px;
  }

  .contact-map-section .tooltip {
    font-size: 0.8rem;
  }
}

.contactus-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;

}

.contactus-cards .card {
    background: #ffffffd9;
    border: 1px solid #e5e7eb;
    border-radius: 75px;
    padding: 24px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    text-align: center;
}

.contactus-cards .card:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.1);
  transform: translateY(-4px);
}

.contactus-cards .flag img {
  width: 36px;
  height: 24px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

.contactus-cards h3 {
  margin: 0 0 8px;
  font-size: 1.1rem !important;
  color: #1a1a1a !important;
  font-weight: 600;
}

.contactus-cards p {
  margin: 0 0 12px;
  font-size: 0.95rem;
  color: #1a1a1a;
  line-height: 1.5;
}

.contactus-cards .phone {
  display: inline-block;
  font-weight: 500;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 8px 12px;
  color: #111827;
  text-decoration: none;
  transition: background 0.3s ease;
}

.contactus-cards .phone:hover {
  background: #e0e7ff;
  color: #1d4ed8;
}


/*--------------------------------------------------------------
 About us page
--------------------------------------------------------------*/

/* ===== Combined Section ===== */
.vision-mission-about {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}

.vision-mission-about .container {
  max-width: 1200px;
  width: 90%;
}

/* ===== Vision & Mission ===== */
.vision-mission-about .vision-mission {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  padding-bottom: 50px;
  flex-wrap: wrap;
  text-align: left;
}

.vision-mission-about .vision-box {
  flex: 1 1 350px;
  max-width: 480px;
  background: transparent;
}

.vision-mission-about .icon {
  font-size: 1.8rem;
  color: #1a3ad6;
  background: rgba(91, 110, 255, 0.1);
  padding: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.vision-mission-about .vision-box h2 {
  font-size: 1.2rem !important;
  font-weight: 700;
  margin: 0 0 12px;
  color: #1a1a1a !important;
}

.vision-mission-about .vision-box p {
  font-size: 16px;
  color: #1a1a1a;
  line-height: 1.6;
  max-width: 90%;
}

/* ===== About Image Overlay ===== */
.vision-mission-about .about-image-container {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  margin: 0 auto;
  min-height: 650px;
}
@media (max-width: 600px) {
  .vision-mission-about .about-image-container {
    min-height: 1180px !important;
  }
}

/* 50% black overlay (RIGHT to LEFT) */
.vision-mission-about .about-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;                 /* overlay covers 50% */
  height: 100%;
  background: linear-gradient(to left, rgba(0,0,0,0.95), rgba(0,0,0,0));
  pointer-events: none;
}

.vision-mission-about .about-image-container img {
  width: 100%;
  height: 650px !important;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

/* Dark gradient overlay (from left) */
.vision-mission-about .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 40%,
    rgba(26, 58, 214, 0.1) 75%
);
  border-radius: 12px;
}

/* Text overlay (left aligned) */
.vision-mission-about .about-text h2 {
    font-size: 1.5em;
    color: #fff !important;
    padding-bottom: 10px;
}
.vision-mission-about .about-text {
  position: absolute;
  top: 50%;
  left: 60px;
  transform: translateY(-50%);
  color: #fff;
  width: 50%;
  z-index: 2;
}

.vision-mission-about .about-text p {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 16px;
  color: #e5e5e5;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .vision-mission-about .vision-mission {
    gap: 60px;
    padding-bottom: 40px;
  }

  .vision-mission-about .overlay {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
  }

  .vision-mission-about .about-text {
    top: 10%;
    left: 40px;
    transform: none;
    width: 80%;
  }
}

@media (max-width: 768px) {
  .vision-mission-about .vision-mission {
    flex-direction: column;
    align-items: flex-start;
  }

  .vision-mission-about .vision-box {
    max-width: 100%;
  }

  .vision-mission-about .vision-box p {
    max-width: 100%;
  }

  .vision-mission-about .about-text {
    left: 20px;
    width: 90%;
    font-size: 14px;
  }

  .vision-mission-about .about-text p {
    line-height: 1.6;
  }
}

.about-text a { 
  color: #fff !important;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #fff;
}

.dg-section {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 20px;
}

.dg-section .container {
  max-width: 1200px;
  width: 100%;
}

.dg-section .content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 50px;
  padding: 20px;
  border-radius: 15px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* ---------- LEFT TEXT SECTION ---------- */
.dg-section .text-section {
  flex: 1 1 45%;
  color: #000;
}

.dg-section .text-section .tag {
  display: inline-block;
  background: #1a3ad6;
  color: #fff;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 600;
  border: 1px solid #d1d9e6;
  font-size: 0.9rem;
}

.dg-section .text-section h2 {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 18px 0;
  line-height: 1.2;
}

.dg-section .text-section .highlight {
  color: #4b68ff;
  font-weight: 700;
}

/* ---------- RIGHT VIDEO SECTION ---------- */
.dg-section .video-section {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Increased height + improved proportions */
.dg-section .video-card {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  width: 100%;
  height: 340px; /* Increased height */
  position: relative;
}

.dg-section .video-left,
.dg-section .video-right {
  flex: 1;
  position: relative;
}

.dg-section .video-left img,
.dg-section .video-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dg-section .video-center {
  align-items: center;
  justify-content: center;

}

.dg-section .play-button {
  width: 80px;
  height: 80px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.3s;
  position: absolute;
  top: 40%;
  left: 43%;
}

.dg-section .play-button:hover {
  transform: scale(1.1);
}

.dg-section .video-right .logo {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.8rem;
  color: #fff;
  text-align: right;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.dg-section .video-right .qr {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 45px;
  height: 45px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/8/8a/Qr-2.png') no-repeat center/cover;
  border-radius: 4px;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .dg-section .content {
    flex-direction: column;
    align-items: center;
  }

  .dg-section .text-section,
  .dg-section .video-section {
    flex: 1 1 100%;
    text-align: center;
  }

  .dg-section .text-section h2 {
    font-size: 2.2rem;
  }

  .dg-section .video-card {
    max-width: 100%;
    height: 300px;
  }
}

@media (max-width: 600px) {
  .dg-section .text-section h2 {
    font-size: 1.8rem;
  }

  .dg-section .video-card {
    height: 260px;
  }

  .dg-section .play-button {
    width: 60px;
    height: 60px;
  }
}

.promise-cardzs .text-center h2 {
  color: #1a1a1a !important; 
}
.promise-cardzs .promise-cardzs-row h2 {
  color: #1a2ad6 !important; 
}
.promise-cardzs-row {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.promise-cardz {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    flex: 1 1 calc(50% - 15px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    position: relative;
    transition: box-shadow 0.3s ease;
}

/* Left border */
/* .promise-cardz::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: #1a3ad6;
    border-radius: 16px 0 0 16px;
} */

/* Card header */
.promise-cardz-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* Card icon box */
.promise-cardz-icon {
    font-size: 28px;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #e0f2ff;
    display: flex;
    align-items: center;      /* vertical center */
    justify-content: center;  /* horizontal center */
    margin-right: 15px;
    color: #1a3ad6;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    line-height: 50px;        /* ensures material icon is vertically centered */
    text-align: center;
    display: inline-flex;     /* fix inline issues */
}

.promise-cardz:hover .promise-cardz-icon {
    transform: rotate(10deg) scale(1.1);
    background-color: #1a3ad6;
    color: #fff;
}

/* Card title */
.promise-cardz-title {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

@

/* Card content */
.promise-cardz-content {
    font-size: 1rem;
    color: #475569;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 900px) {
    .promise-cardz {
        flex: 1 1 100%;
    }
}
@media only screen and (max-width: 767px) {
  .promise-cardz-title {
    font-size: 1.1rem !important;
  }
}

/* Section wrapper */
.team-section {
  text-align: center;
  padding: 60px 20px;
}

.team-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Heading & subtext */
.team-section h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px;
}

.team-section p {
  color: #1a1a1a;
  max-width: 700px;
  margin: 0 auto 50px;
  line-height: 1.6;
}

/* Grid */
.team-section .team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* Card */
.team-section .team-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  text-align: left;
  transition: transform 0.28s cubic-bezier(.2,.9,.2,1), box-shadow 0.28s;
}

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

/* Team image */
.team-section .team-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* Info area (reduced gap) */
.team-section .team-info {
  padding: 16px 20px 22px; /* reduced top padding for tighter gap */
}

.team-section .team-info h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 4px; /* smaller gap between name and title */
  color: #1a1a1a;
}

.team-section .team-info p {
  color: #48505e;
  font-size: 0.9rem;
  margin: 0 0 10px;
}

/* Connect link with LinkedIn icon */
.team-section .team-info a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #1a3ad6;
  font-weight: 500;
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.18s ease;
}

.team-section .team-info a i {
  font-size: 1rem;
  line-height: 1;
}

/* Hover effect on link */
.team-section .team-info a:hover {
  color: #0806AA;
  text-decoration: underline;
}

/* Responsive tweaks */
@media (max-width: 992px) {
  .team-section .team-section {
    padding: 60px 18px;
  }

  .team-section .team-section p {
    margin-bottom: 40px;
  }
}

@media (max-width: 600px) {
  .team-section .team-section {
    padding: 50px 14px;
  }

  .team-section .team-card img {
    height: 260px;
  }

  .team-section .team-info {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Base Section */
.hztl-container {
    padding: 60px 20px;
    max-width: 1300px;
    margin: auto;
    text-align: center;
    overflow: visible !important;
    height: 650px;
}

.hztl-title {
    font-size: 32px;
    margin-bottom: 8px;
}

/* Horizontal Line */
.hztl-line {
    height: 6px;
    background: #1a3ad6;
    position: relative;
     margin-top: 280px; 
}

/* Items container */
.hztl-items {
    display: flex;
    justify-content: space-between;
    position: relative;
}

/* Timeline Item */
.hztl-item {
    width: 20%;
    position: relative;
}

/* Month Label */
.hztl-month {
    font-weight: 600;
    color: #1a3ad6;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Top Items */
 .hztl-item.top .hztl-month {
    bottom: -40px;
} 

/* Bottom Items */
 .hztl-item.bottom .hztl-month {
    top: -40px;
} 

.hztl-item.top .h-card-3 {
    top: -200px !important;
}

/* Dot */
.hztl-dot {
    width: 18px;
    height: 18px;
    border: 4px solid #1a3ad6;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Card */
.hztl-card {
    width: 250px;
    background: #fff;
    padding: 14px;
    border: 1px solid #1a3ad6;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Card position */
.hztl-item.top .hztl-card {
    top: -220px;
}

.hztl-item.bottom .hztl-card {
    top: 20px;
}

/* Arrow Pointer */
.hztl-card::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
}

.hztl-item.top .hztl-card::before {
    bottom: -20px;
    border-top-color: #1a3ad6;
}

.hztl-item.bottom .hztl-card::before {
    top: -20px;
    border-bottom-color: #1a3ad6;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    animation: fadeUp 0.8s ease-out forwards;
}

.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.5s; }
.delay-3 { animation-delay: 0.7s; }
.delay-4 { animation-delay: 0.9s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile & Tablet Responsive Timeline */
@media (max-width: 900px) {

  .hztl-container {
    height: auto;
    padding: 30px 15px;
  }

  .hztl-line {
    display: none;
  }

  .hztl-items {
    flex-direction: column;
    align-items: center;
    gap: 60px;
    margin-top: 30px;
  }

  .hztl-item {
    width: 100%;
    max-width: 360px;
    text-align: center;
  }

  .hztl-dot {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
    margin: 10px auto;
  }

  .hztl-month {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    transform: none;
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
  }

  .hztl-card {
    position: relative;
    top: 0 !important;
    left: 0;
    transform: none;
    width: 100%;
    margin: auto;
  }

  .hztl-card::before {
    display: none;
  }

  /* Animation fix for mobile */
  .fade-in {
    transform: translateY(20px);
  }
}




        .timeline-container {
            background: #fff;
            width: 100%;
            overflow: hidden;
            padding: 40px;
        }

        .timeline-container .timeline-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .timeline-container .timeline-header h2 {
            font-size: 1.8rem;
            color: #1a1a1a;
            margin-bottom: 15px;
            font-weight: 700;
        }

        .timeline-container .timeline-header p {
            font-size: 1.1rem;
            color: #1a1a1a;
            max-width: 1000px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .timeline-container .timeline-slider {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 40px;
            height: 400px;
        }

        .timeline-container .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.6s ease;
            display: flex;
            align-items: center;
        }

        .timeline-container .slide.active {
            opacity: 1;
            transform: translateX(0);
        }

        .timeline-container .slide-content {
            display: flex;
            width: 100%;
            height: 100%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            border-radius: 12px;
            overflow: hidden;
        }

        .timeline-container .image-container {
            flex: 1;
            overflow: hidden;
        }

        .timeline-container .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .timeline-container .slide.active .image-container img {
            transform: scale(1.05);
        }

        .timeline-container .text-content {
            flex: 1;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: white;
        }

        .timeline-container .text-content h3 {
            font-size: 1.8rem;
            color: #1a1a1a;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .timeline-container .text-content p {
            margin-bottom: 15px;
            color: #1a1a1a;
            line-height: 1.6;
        }

        .timeline-container .timeline-tabs {
            display: flex;
            justify-content: center;
            position: relative;
        }

        .timeline-container .timeline-tabs::before {
            content: '';
            position: absolute;
            top: -33%;
            left: 0;
            right: 0;
            height: 2px;
            background: #e0e0e0;
            transform: translateY(-50%);
            z-index: 1;
        }

        .timeline-container .tab {
            padding: 12px 24px;
            margin: 0 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.4s ease;
            color: #1a1a1a;
            position: relative;
            z-index: 2;
        }

        .timeline-container .tab:hover {
            color: #0806AA;
            border-color: #3498db;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
        }

        .timeline-container .tab.active {
            color: #fff;
            background-color: #1a3ad6;
            border-color: #3498db;
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3);
        }

        /* Responsive styles */
        @media (max-width: 768px) {
            .timeline-container .timeline-container {
                padding: 20px;
            }
            
            .timeline-container .timeline-header h2 {
                font-size: 2rem;
            }
            
            .timeline-container .timeline-slider {
                height: auto;
                min-height: 500px;
            }
            
            .timeline-container .slide-content {
                flex-direction: column;
            }
            
            .timeline-container .image-container {
                min-height: 200px;
            }
            
            .timeline-container .text-content {
                padding: 25px 20px;
            }
            
            .timeline-container .text-content h3 {
                font-size: 1.5rem;
            }
            
            .timeline-container .timeline-tabs {
                flex-wrap: wrap;
                gap: 10px;
            }
            
            .timeline-container .timeline-tabs::before {
                display: none;
            }
        }

        .join-btn {
          padding-top: 60px !important;
        }

/*--------------------------------------------------------------
 Footer
--------------------------------------------------------------*/
.contact-form-container {
  display: flex;
  justify-content: center;
  padding: 60px 20px;
}

.contact-form-card {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  max-width: 1000px;
  width: 100%;
}

/* ===== Left Section ===== */
.contact-form-left {
  flex: 1;
  min-width: 320px;
  padding: 40px;
  background: #fff;
  border-right: 1px solid #eee;
}

.contact-form-container .contact-form-left h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.contact-form-container .contact-form-left p {
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.contact-form-container .btn-primary {
  background: #1a3ad6;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s;
}

.contact-form-container .btn-primary:hover {
  background: #0f2ab8;
}

/* ===== Contact Info ===== */
.contact-form-container .contact-form-info {
  margin-top: 40px;
}

.contact-form-container .contact-form-info h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.contact-form-container .info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

.contact-form-container .icon-box {
  width: 40px;
  height: 40px;
  background: #1a3ad6;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 16px;
}

.contact-form-container .info-item p {
  font-size: 0.9rem;
  color: #555;
  margin: 0;
}

.contact-form-container .info-item a {
  color: #6d28d9;
  text-decoration: none;
  transition: color 0.3s;
}

.contact-form-container .info-item a:hover {
  color: #5b21b6;
}

/* ===== Right Section (Form) ===== */
.contact-form-container .contact-form-right {
  flex: 1;
  min-width: 320px;
  padding: 40px;
  background: #fafafa;
}

.contact-form-container .contact-form-right h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.contact-form-container form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-form-container input,
.contact-form-container textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  font-size: 0.95rem;
  outline: none;
  transition: border 0.3s ease;
}

.contact-form-container input:focus,
.contact-form-container textarea:focus {
  border-color: #1a3ad6;
}

.contact-form-container textarea {
  resize: none;
}

/* Buttons */
.contact-form-container .btn-outline {
  background: transparent;
  color: #1a3ad6;
  border: 1.5px solid #1a3ad6;
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.contact-form-container .btn-outline:hover {
  background: #1a3ad6;
  color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .contact-form-container .contact-form-card {
    flex-direction: column;
  }

  .contact-form-container .contact-form-left,
  .contact-form-container .contact-form-right {
    border-right: none;
    padding: 30px 25px;
  }

  .contact-form-container .contact-form-left h3,
  .contact-form-container .contact-form-right h3 {
    text-align: center;
  }

  .contact-form-container .btn-primary,
  .contact-form-container .btn-outline {
    width: 100%;
  }

  .contact-form-container .contact-form-info {
    text-align: left;
  }

  .contact-form-container .contact-form-right {
    background: #fff;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
  }
}

@media (max-width: 480px) {
  .contact-form-container .contact-form-container {
    padding: 40px 15px;
  }

  .contact-form-container .contact-form-left,
  .contact-form-container .contact-form-right {
    padding: 25px 20px;
  }

  .contact-form-container input,
  .contact-form-container textarea {
    font-size: 0.9rem;
  }

  .contact-form-container .icon-box {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
}


/*--------------------------------------------------------------
 Enquiry Form
--------------------------------------------------------------*/
/* MAIN SECTION */
.enquiry-section {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
    background: #f5f5f7;
}

.enquiry-card {
    display: flex;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    overflow: hidden;
    max-width: 1100px;
    width: 100%;
    flex-wrap: wrap;
}

/* LEFT PANEL */
.enquiry-left {
    flex: 1;
    padding: 40px;
    min-width: 300px;
    border-right: 1px solid #eee;
}

.enquiry-left h2 {
    font-size: 1.7rem;
    margin-bottom: 14px;
    font-weight: 700 !important;
}

.enquiry-left p {
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

.enquiry-left .cta-btn {
    display: inline-block;
    background: transparent;
    color: #1a3ad6;
    padding: 10px 22px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s;
    border: 1px solid #1a3ad6
}

.cta-btn:hover {
    background: #fff;
    transform: scale(1.5);
}

/* CONTACT INFO LIST */
.enquiry-info {
    margin-top: 35px;
}

.enquiry-info h4 {
    margin-bottom: 18px;
    font-weight: 700;
}

.enquiry-info-item {
    display: flex;
     align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.enquiry-icon-box {
    width: 42px;
    height: 42px;
    background: #fff;
    color: #1a3ad6;
    border-radius: 10px;
    border: 1px solid #1a3ad6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.enquiry-icon-box1 {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: none;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


.enquiry-info-item p {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: #444;
}

.enquiry-info-item a {
    color: #1a1a1a;
    text-decoration: none !important;
    font-weight: 500;
}

/* RIGHT FORM PANEL */
.enquiry-right {
    flex: 1;
    padding: 40px;
    min-width: 300px;
    background: #fbfbfb !important;
}

.enquiry-right h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 20px;
}

/* FORM FIELDS */
.enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.enquiry-form input,
.enquiry-form textarea,
.enquiry-form select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 15px;
    background: #fff;
    color: #757575 !important;
    transition: 0.3s ease;
    box-sizing: border-box;
}

/* SELECT BOX */
.enquiry-form .select-box {
    position: relative;
}

.enquiry-form .select-box select {
    appearance: none;
    padding-right: 45px;
}


.enquiry-form .select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #757575;
    font-size: 14px;
}

/* FOCUS EFFECT */
.enquiry-form input:focus,
.enquiry-form textarea:focus,
.select-box select:focus {
    border-color: #1a3ad6;
    box-shadow: 0 0 8px rgba(26,58,214,0.25);
    outline: none;
}

/* BUTTON */
.enquiry-form .submit-btn {
    padding: 14px;
    background: transparent;
    border: 1px solid #1a3ad6;
    color: #1a3ad6;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

.enquiry-form .submit-btn:hover {
    background: #ffffff;
    color: #1a3ad6;
    cursor: pointer;
    transform: scale(1.05);
}

.hs-form-7ce74e17-e173-40e0-92a1-bf8f0d824fb4_b25a1f3e-69af-4582-bf0f-47107689c9ab .hs-button {
    background: transparent !important;
    border-color: #1a3ad6 !important;
    border-radius: 6px;
    color: #1a3ad6 !important;
    font-size: 1rem !important;
    line-height: 19px;
    font-family: Roboto !important;
    width: 100% !important;
    padding: 12px 24px !important;
}
.contact-page-section .contact-form .enquiry-form .submit-btn {
    padding: 14px !important;
    background: transparent !important;
    border: 1px solid #1a3ad6 !important;
    color: #1a3ad6 !important;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

.contact-page-section .contact-form .enquiry-form .submit-btn:hover {
    background: #ffffff !important;
    color: #1a3ad6 !important;
    cursor: pointer;
    transform: scale(1.05) !important;
}

/* RESPONSIVE (Mobile) */
@media (max-width: 768px) {
    .enquiry-card {
        flex-direction: column;
    }

    .enquiry-left {
        border-right: none;
        border-bottom: 1px solid #eee;
    }
}

@media (max-width: 480px) {
    .enquiry-left, .enquiry-right {
        padding: 25px;
    }
}

.contact-page-section .contact-container .enquiry-form .submit-btn {
    padding: 14px;
    background: transparent;
    border: 1px solid #1a3ad6;
    color: #1a3ad6;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

.contact-page-section .contact-container .enquiry-form .submit-btn:hover {
    background: #ffffff !important;
    color: #1a3ad6 !important;
    cursor: pointer;
    transform: scale(1.05) !important;
}

/* Section Container */
.client-benefit-section {
  padding: 60px 20px;
  /* background: #fff; */
  max-width: 1224px;
  margin: 0 auto;
  box-sizing: border-box;
}

.client-benefit-container .subtitle {
  color: #1a1a1a;
  font-size: 0.9rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.client-benefit-container .title {
  font-size: 1.8rem !important;
  color: #1a1a1a !important;
  font-weight: 600;
  margin-bottom: 12px;
}

.client-benefit-container .description {
  font-size: 1.05rem;
  color: #4b5563;
  margin-bottom: 60px;
  max-width: 650px;
}

/* Grid Layout */
.client-benefit-container .client-benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}

/* Cards */
.client-benefit-container .client-benefit-card {
  background: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-benefit-container .client-benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.client-benefit-container .client-benefit-image {
  width: 100%;
  height: 180px;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.client-benefit-container .client-benefit-image img {
  width: 80%;
  height: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.client-benefit-card:hover .client-benefit-image img {
  transform: scale(1.05);
}

.client-benefit-container .card-content {
  padding: 24px 20px 30px;
  text-align: left;
}

.client-benefit-container .card-content h3 {
  font-size: 1.2rem;
  color: #1a1a1a;
  margin: 0 0 10px;
  font-weight: 700;
}

.client-benefit-container .card-content p {
  font-size: 0.95rem;
  color: #1a1a1a;
  line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .client-benefit-container .title {
    font-size: 1.8rem;
  }

  .client-benefit-container .client-benefit-grid {
    grid-template-columns: 1fr;
  }
}


.partner-benefits {
  padding: 60px 20px;
  background: radial-gradient(circle at top right, #eef3ff, #f9fbff 70%);
  backdrop-filter: blur(8px);
}

.partner-benefits-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.partner-benefits-subpartner-benefits-title {
  color: #1a1a1a;
  font-size: 0.9rem !important;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.partner-benefits-title {
  font-size: 1.8rem;
  color: #1a1a1a;
  font-weight: 600;
  margin-bottom: 12px;
}

.partner-benefits-desc {
  font-size: 0.95rem;
  color: #1a1a1a;
  margin-bottom: 60px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* 🔹 Grid Layout - 3 columns */
.partner-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Cards */
.partner-benefits-card {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.05);
  padding: 30px 24px 34px;
  text-align: center;
  transition: all 0.4s ease;
  border: 1px solid rgba(0, 102, 255, 0.08);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.partner-benefits-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 35px rgba(0, 102, 255, 0.15);
  border-color: rgba(0, 102, 255, 0.25);
}

/* Icon Style */
.partner-benefits-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e0ecff, #f3f8ff);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease;
}

.partner-benefits-card:hover .partner-benefits-icon-wrapper {
  transform: scale(1.1);
}

.partner-benefits-icon-wrapper img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* Text */
.partner-benefits-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 12px 0 8px;
}

.partner-benefits-card p {
  font-size: 0.95rem;
  color: #1a1a1a;
  line-height: 1.6;
  margin: 0;
}

/* 🔸 Responsive */
@media (max-width: 992px) {
  .partner-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .partner-benefits-grid {
    grid-template-columns: 1fr;
  }

  .partner-benefits-title {
    font-size: 1.8rem;
  }

  .partner-benefits-card {
    padding: 24px 20px;
  }
}

.border-box {
  border: 1px solid #ccc;
  padding: 20px;
}


/* SECTION */
.partner-contact-section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* ensures vertical centering */
  padding: 60px 20px;
  background: #fff;
}

/* CONTAINER */
.partner-contact-container {
  display: flex;
  align-items: center; /* vertically align both sides */
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  gap: 60px;
  flex-wrap: wrap;
}

/* LEFT SIDE CONTENT */
.partner-contact-content {
  flex: 1;
  min-width: 300px;
}

.partner-contact-content h4 {
  text-transform: uppercase;
  font-size: 0.9rem;
  color: #1a1a1a;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.partner-contact-content h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.3;
  margin-bottom: 15px;
}

.partner-contact-content h1 span {
  color: #0b1320;
}

.partner-contact-content p {
  font-size: 1rem;
  color: #1a1a1a;
  max-width: 400px;
  line-height: 1.6;
}

/* RIGHT FORM */
.partner-form {
  flex: 1;
  background: #f9fbff;
  padding: 40px 36px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  min-width: 360px;
}

.partner-form form {
  width: 100%;
}

/* FORM GRID */
.partner-form-row {
  display: flex;
  gap: 20px;
}

.partner-form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.partner-form-group.full-width {
  width: 100%;
}

/* LABELS */
.partner-form label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1e293b;
  margin-bottom: 6px;
}

.partner-form label span {
  color: #ff4d4f;
}

/* INPUTS */
.partner-form input,
.partner-form select,
.partner-form textarea {
  padding: 10px 14px;
  border: 1px solid #d0d7e2;
  border-radius: 4px;
  font-size: 0.95rem;
  background: #f5f8fc;
  transition: border 0.3s ease, background 0.3s ease;
}

.partner-form input:focus,
.partner-form select:focus,
.partner-form textarea:focus {
  outline: none;
  border-color: #1a3ad6;
  background: #fff;
}

/* TEXTAREA */
.partner-form textarea {
  resize: none;
}

/* BUTTON */
.partner-form .submit-btn {
  background: #fff;
  color: #1a3ad6;
  padding: 12px 22px;
  border: 1px solid #123ad6;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.partner-form .submit-btn:hover {
  background: white;
  cursor: pointer;
  transform: scale(1.03);
  color: #1a3ad6;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .partner-contact-container {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .partner-contact-content p {
    margin: 0 auto 30px;
  }

  .partner-form {
    width: 100%;
    max-width: 500px;
  }

  .partner-form-row {
    flex-direction: column;
    gap: 0;
  }
}


/*--------------------------------------------------------------
Privacy Policy page
--------------------------------------------------------------*/

/* Banner */
.page-banner {
  position: relative;
  width: 100%;
  min-height: 220px;
  background: url("../images/banner/privacy-banner.jpg") center / cover no-repeat;
  display: flex;
  align-items: center;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(5, 15, 60, 0.9),
    rgba(5, 15, 60, 0.6)
  );
}

.banner-content {
  position: relative;
  width: 100%;
  padding: 0 6%;
}

.banner-content h1 {
  color: #ffffff;
  font-size: 46px;
  font-weight: 600;
}

/* Policy Content */
.policy-wrapper {
  padding: 20px 20px;
}

.policy-container {
  max-width: 1000px;
  margin: auto;
  background: #ffffff;
  padding: 50px;
  border-radius: 6px;
}

/* Headings */
.policy-container h2 {
  margin-top: 40px;
  font-size: 22px;
  color: #0f172a;
}

.policy-container h3 {
  margin-top: 25px;
  font-size: 18px;
  color: #1e40af;
}

/* Text */
.policy-container p {
  margin-top: 15px;
}

/* Tick list */
.tick-list {
  list-style: none;
  margin-top: 15px;
  padding-left: 0;
}

.tick-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
}

.tick-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #1e40af;
  font-weight: bold;
  font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
  .page-banner {
    min-height: 200px;
  }

  .banner-content h1 {
    font-size: 32px;
  }

  .policy-container {
    padding: 30px;
  }
}

@media (max-width: 480px) {
  .banner-content h1 {
    font-size: 26px;
    margin-top: 30%;
  }

  .policy-wrapper {
    padding: 10px 15px;
  }
}

sup {
    font-size: 0.6em;   /* relative to parent text */
}


/* DG for Health */

/* Section */
.dg-health-section {
  padding: 60px 0;
  background: #f8fafc;
}

/* Header */
.dg-section-header {
  text-align: center;
  margin-bottom: 50px;
}

.dg-section-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #0f172a;
}

.dg-section-subtitle {
  font-size: 16px;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
}

/* Grid */
.dg-health-grid {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: 1 column */
  gap: 30px;
}

/* Tablet */
@media (min-width: 600px) {
  .dg-health-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop */
@media (min-width: 992px) {
  .dg-health-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Card */
.dg-health-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  display: flex;
  align-items: center;
  gap: 18px;
  transition: all 0.3s ease;
}

.dg-health-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* Icon Wrapper */
.dg-health-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: #e0f2ff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a3ad6;
  transition: all 0.3s ease;
}

/* Material Icon */
.dg-health-icon .material-icons-outlined {
  font-size: 26px;
  line-height: 1;
}

/* Hover Icon */
.dg-health-card:hover .dg-health-icon {
  background: #1a3ad6;
  color: #ffffff;
}

/* Text */
.dg-health-text {
  margin: 0;
  font-size: 1rem;
  color: #475569;
  line-height: 1.6;
}

        /* Footer Styles */
        .footer {
            /* background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); */
            background: #021B33;
            color: #e2e8f0;
            padding: 60px 0 20px;
            /* margin-top: 80px; */
        }

        .footer-content {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1fr 1.5fr;
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-section h3 {
            color: #f8fafc !important;
            font-size: 1.2rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        .footer-section h3::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 2px;
            background: #3b82f6;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section ul li {
            margin-bottom: 12px;
        }

        .footer-section ul li a {
            color: #cbd5e1;
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }

        .footer-section ul li a:hover {
            color: #3b82f6;
            transform: translateX(5px);
        }

        .footer-section ul li a i {
            margin-right: 8px;
            font-size: 0.9rem;
        }

        .footer-content .contact-info {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .footer-content .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
        }

        .footer-content .contact-item i {
            color: #3b82f6;
            margin-top: 3px;
        }

        .footer-content .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }

        .footer-content .social-links a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            color: #e2e8f0;
            transition: all 0.3s ease;
        }

        .footer-content .social-links a:hover {
            background: #1a3ad6;
            transform: translateY(-3px);
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 15px;
        }

        .footer-bottom .copyright {
            font-size: 0.9rem;
            color: #94a3b8;
        }

        .footer-bottom .footer-links {
            display: flex;
            gap: 20px;
        }

        .footer-bottom .footer-links a {
            color: #94a3b8;
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }

        .footer-bottom .footer-links a:hover {
            color: #3b82f6;
        }

        /* Logo Section Styles */
        .footer-content .logo-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .footer-content .logo-container {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .footer-content .logo {
            width: 256px;
            height: auto;
        }

        .footer-content .logo img {
            width: 100%;
            height: auto;
        }

        .footer-content .company-tagline {
            font-size: 1rem;
            color: #94a3b8;
            margin-top: 5px;
            font-weight: 500;
        }

        .footer-content .company-description {
            color: #cbd5e1;
            font-size: 0.85rem;
            line-height: 1.6;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .footer-content {
                grid-template-columns: 1fr 1fr 1fr;
            }
            
            .footer-content .logo-section {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 768px) {
            .footer-content {
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }
            
            .footer-bottom {
                flex-direction: column;
                text-align: center;
            }
            
            .footer-content .logo {
                width: 150px;
            }
        }

        @media (max-width: 480px) {
            .footer-content {
                grid-template-columns: 1fr;
            }
            
            .footer-content .logo {
                width: 130px;
            }
        }

/*--------------------------------------------------------------
 Live Chat Widget Customization CSS
--------------------------------------------------------------*/
/* REMOVE all tawk.to avatars, grabbers & bubbles */
/* .tawk-attention-grabber,
.tawk-attention-grabber-text,
.tawk-attention-grabber-icon,
.tawk-avatar,
.tawk-img,
.tawk-header-avatar,
.tawk-header-avatar-wrapper {
    display: none !important;
} */

.chat-header.tidio-1s9enfi {
  height: 200px !important
}

/*--------------------------------------------------------------
404 page CSS
--------------------------------------------------------------*/
.error-wrapper {
      text-align: center;
      width: 100%;
      position: relative;
    }

    .error-number {
      font-size: 280px;
      font-weight: 700;
      color: rgba(220, 225, 235, 0.8);
      line-height: 1;
      position: relative;
      z-index: 0;
      letter-spacing: 30px;
      user-select: none;
      pointer-events: none;
    }

    .error-title {
      font-size: 45px;
      font-weight: 700;
      color: #444;
      margin-top: 10px;
      position: relative;
      z-index: 2;
    }

    .error-message {
      font-size: 20px;
      font-weight: 600;
      color: #666;
      margin-top: 15px;
      position: relative;
      z-index: 2;
    }

    /* RESPONSIVE */

    @media (max-width: 992px) {
      .error-number {
        font-size: 220px;
        letter-spacing: 20px;
      }

      .error-title {
        font-size: 38px;
      }

      .error-message {
        font-size: 18px;
      }
    }

    @media (max-width: 768px) {
      .error-number {
        font-size: 180px;
        letter-spacing: 12px;
      }

      .error-title {
        font-size: 32px;
      }

      .error-message {
        font-size: 17px;
      }

      .error-wrapper {
        margin-top: 30px;
      }

    }

    @media (max-width: 480px) {
      .error-number {
        font-size: 140px;
        letter-spacing: 8px;
      }

      .error-title {
        font-size: 26px;
      }

      .error-message {
        font-size: 16px;
      }

    }

/*--------------------------------------------------------------
DG GCP Page CSS
--------------------------------------------------------------*/
/* Cloud Feature List */
.cloud-feature-list {
  display: grid;
  gap: 12px;
}

/* Feature Card */
.cloud-feature-item {
  display: flex;
  align-items: center; /* ✅ Center align icon + text */
  gap: 12px;
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.cloud-feature-item:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Icon */
.cloud-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #2563eb;
  color: #ffffff;
  font-size: 12px;
  flex-shrink: 0;
}

/* Text */
.cloud-feature-item p {
  margin: 0;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
  display: flex;
  align-items: center; /* ✅ ensures perfect vertical centering */
}

/* CTA */
.cloud-cta-text {
  margin-top: 25px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

/* 📱 Mobile (Small devices <576px) */
@media (max-width: 575px) {
  .cloud-section {
    padding: 40px 12px;
  }
}

/* 📲 Tablet (576px - 768px) */
@media (min-width: 576px) {
  .cloud-feature-item p {
    font-size: 16px;
  }
}

/* 💻 Tablet Landscape / Small Laptop (768px - 992px) */
@media (min-width: 768px) {
  .cloud-feature-list {
    gap: 15px;
  }

  .cloud-feature-item {
    padding: 18px;
  }

  .cloud-icon {
    min-width: 28px;
    height: 28px;
    font-size: 13px;
  }
}

/* 🖥️ Laptop (992px - 1200px) */
@media (min-width: 992px) {
  .cloud-feature-list {
    max-width: 750px;
    margin: 0 auto;
  }

  .cloud-cta-text {
    font-size: 17px;
  }
}

/* 🖥️ Desktop (1200px and above) */
@media (min-width: 1200px) {
  .cloud-feature-item {
    padding: 20px;
  }

  .cloud-icon {
    min-width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .cloud-cta-text {
    margin-top: 40px;
    font-size: 18px;
  }
}

/* Grid */
.what-get-feature-grid {
  display: grid;
  gap: 15px;
}

/* Card */
.what-get-feature-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #fff;
  padding: 16px;
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.what-get-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* Icon Box */
.what-get-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  height: 45px;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #9333ea);
  color: #fff;
}

.what-get-icon-box .material-icons {
  font-size: 22px;
}

/* Text */
.what-get-feature-card p {
  margin: 0;
  font-size: 14px;
  color: #333;
  line-height: 1.5;
}

/* Footer */
.what-get-footer-txt {
  margin-top: 30px;
  text-align: center;
  font-size: 14px;
  color: #666;
  font-style: italic;
}


/* 📲 Tablet (≥576px) */
@media (min-width: 576px) {
  .what-get-feature-card p {
    font-size: 15px;
  }
}

/* 💻 Tablet Landscape (≥768px) */
@media (min-width: 768px) {
  .what-get-feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .what-get-feature-card {
    padding: 18px;
  }
}

/* 💻 Laptop (≥992px) */
@media (min-width: 992px) {
  .what-get-feature-card p {
    font-size: 16px;
  }
  .what-get-footer-txt {
    font-size: 15px;
  }
}

/* 🖥️ Desktop (≥1200px) */
@media (min-width: 1200px) {
  .what-get-feature-grid {
    max-width: 900px;
    margin: 0 auto;
  }
  .what-get-footer-txt {
    margin-top: 40px;
    font-size: 16px;
  }
}


/* Grid */
.business-impact-grid {
  display: grid;
  gap: 20px;
}

/* Card */
.business-impact-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 25px 15px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  transition: 0.3s;
}

.business-impact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* business-impact-icon */
.business-impact-icon {
  width: 55px;
  height: 55px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.business-impact-icon .material-icons {
  font-size: 26px;
}

/* business-impact-icon Colors */
.business-impact-icon.blue { background: #2563eb; }
.business-impact-icon.green { background: #16a34a; }
.business-impact-icon.violet { background: #7c3aed; }
.business-impact-icon.orange { background: #f59e0b; }
.business-impact-icon.cyan { background: #06b6d4; }
.business-impact-icon.red { background: #ef4444; }

/* Text */
.business-impact-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

/* 📱 Mobile (<576px) */
@media (max-width: 575px) {
  .business-impact-grid {
    grid-template-columns: 1fr;
  }
}
/* 📲 Tablet (≥576px) */
@media (min-width: 576px) {
  .business-impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 💻 Tablet Landscape (≥768px) */
@media (min-width: 768px) {
  .business-impact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}
/* 💻 Laptop (≥992px) */
@media (min-width: 992px) {
  .business-impact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 🖥️ Desktop (≥1200px) */
@media (min-width: 1200px) {
  .business-section {
    padding: 60px 20px;
  }
  .business-impact-card {
    padding: 30px 20px;
  }
  .business-impact-card p {
    font-size: 16px;
  }
}


/* Tags */
.sec-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 20px;
}

.sec-tag-list span {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}



/* Grid */
.usecases-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 20px 0px;
}
/* Card */
.usecases-card {
  background: #fff;
  padding: 20px 25px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: 0.3s ease;
}
.usecases-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  background: #1a3ad6;
  color: #fff !important
}

.usecases-card:hover h3, .usecases-card:hover p {
  color: #fff !important;
}

/* Icon */
.usecases-icon-box {
  width: 50px;
  height: 50px;
  background: #e0edff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 15px;
  font-size: 20px;
}
/* Text */
.usecases-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #1a3ad6 !important;
  margin-bottom: 8px;
}
.usecases-card p {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
}
/* ========================= */
/* 📱 Tablet (≥ 600px) */
/* ========================= */
@media (min-width: 600px) {
  .usecases-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ========================= */
/* 💻 Laptop (≥ 992px) */
/* ========================= */
@media (min-width: 992px) {
  .usecases-grid {
    gap: 25px;
  }
}


/* Grid */
.proven-impact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
/* Card */
.proven-impact-card {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: 0.3s ease;
}
.proven-impact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}
/* Icon Circle */
.impact-icon-circle {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  font-size: 22px;
}
/* Text */
.proven-impact-card p {
  font-size: 16px;
  color: #1a1a1a;
  line-height: 1.6;
}
/* =========================
 📱 Tablet (≥ 600px) 
========================= */
@media (min-width: 600px) {
  .proven-impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================= */
/* 💻 Laptop (≥ 992px) */
/* ========================= */
@media (min-width: 992px) {
  .proven-impact-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ========================= */
/* 🖥 Desktop (≥ 1200px) */
/* ========================= */
@media (min-width: 1200px) {
  .proven-impact-section {
    padding: 80px 20px;
  }
}



/* gcp-cta Box */
.gcp-cta-box {
  background: #1a3ad6;
  border-radius: 24px;
  padding: 40px 20px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Optional subtle pattern */
.gcp-cta-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 20px 20px;
  opacity: 0.15;
}

/* Content */
.gcp-cta-content {
  position: relative;
  z-index: 1;
}

/* Icon */
.gcp-cta-icon {
  font-size: 40px;
  margin-bottom: 15px;
  opacity: 0.9;
}

/* Heading */
.gcp-cta-content h2 {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 15px;
}

/* Paragraph */
.gcp-cta-content p {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.9;
  max-width: 700px;
  margin: 0 auto 25px;
}

/* Buttons */
.gcp-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: left;
}

.gcp-cta-buttons .btn {
  background: #1a3ad6;
  color: #fff;
  padding: 10px 20px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.gcp-cta-buttons .btn:hover {
 transform: scale(1.05);
 cursor: pointer;
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.gcp-cta-buttons .btn.secondary {
  background: transparent;
  color: #1a3ad6;
  border: 2px solid #1a3ad6;
  padding: 10px 20px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.gcp-cta-box .btn {
  display: inline-flex;
  align-items: left;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s ease;
}

/* Primary Button */
.gcp-cta-box .btn.primary {
  background: #1a3ad6 !important;
  color: #fff !important;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.gcp-cta-box .btn.primary:hover {
  transform: scale(1.05) !important;
}

/* Secondary Button */
.gcp-cta-box .btn.secondary {
  border: 2px solid rgba(255,255,255,0.6);
  color: #fff;
}

.gcp-cta-box .btn.secondary:hover {
  background: rgba(255,255,255,0.1);
  transform: scale(1.05) !important;
}

/* ========================= */
/* 📱 Tablet (≥ 600px) */
/* ========================= */
@media (min-width: 600px) {
  .gcp-cta-buttons {
    flex-direction: row;
    justify-content: left;
  }
  .gcp-cta-content h2 {
    font-size: 30px;
  }
}

/* ========================= */
/* 💻 Laptop (≥ 992px) */
/* ========================= */
@media (min-width: 992px) {
  .gcp-cta-box {
    padding: 60px 40px;
  }
  .gcp-cta-content h2 {
    font-size: 36px;
  }
  .gcp-cta-content p {
    font-size: 16px;
  }
}

/* ========================= */
/* 🖥 Desktop (≥ 1200px) */
/* ========================= */
@media (min-width: 1200px) {
  .gcp-cta-box {
    padding: 70px 60px;
  }
  .gcp-cta-content h2 {
    font-size: 40px;
  }
}

/*--------------------------------------------------------------
Customization CSS
--------------------------------------------------------------*/
button:focus {
 outline: none !important
}