@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita-Bold.eot');
    src: url('../fonts/Gordita-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gordita-Bold.woff2') format('woff2'),
        url('../fonts/Gordita-Bold.woff') format('woff'),
        url('../fonts/Gordita-Bold.ttf') format('truetype'),
        url('../fonts/Gordita-Bold.svg#Gordita-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita-Black.eot');
    src: url('../fonts/Gordita-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gordita-Black.woff2') format('woff2'),
        url('../fonts/Gordita-Black.woff') format('woff'),
        url('../fonts/Gordita-Black.ttf') format('truetype'),
        url('../fonts/Gordita-Black.svg#Gordita-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita-BlackItalic.eot');
    src: url('../fonts/Gordita-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gordita-BlackItalic.woff2') format('woff2'),
        url('../fonts/Gordita-BlackItalic.woff') format('woff'),
        url('../fonts/Gordita-BlackItalic.ttf') format('truetype'),
        url('../fonts/Gordita-BlackItalic.svg#Gordita-BlackItalic') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita-Medium.eot');
    src: url('../fonts/Gordita-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gordita-Medium.woff2') format('woff2'),
        url('../fonts/Gordita-Medium.woff') format('woff'),
        url('../fonts/Gordita-Medium.ttf') format('truetype'),
        url('../fonts/Gordita-Medium.svg#Gordita-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita-Light.eot');
    src: url('../fonts/Gordita-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gordita-Light.woff2') format('woff2'),
        url('../fonts/Gordita-Light.woff') format('woff'),
        url('../fonts/Gordita-Light.ttf') format('truetype'),
        url('../fonts/Gordita-Light.svg#Gordita-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita-Regular.eot');
    src: url('../fonts/Gordita-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gordita-Regular.woff2') format('woff2'),
        url('../fonts/Gordita-Regular.woff') format('woff'),
        url('../fonts/Gordita-Regular.ttf') format('truetype'),
        url('../fonts/Gordita-Regular.svg#Gordita-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gordita';
    src: url('../fonts/Gordita-Italic.eot');
    src: url('../fonts/Gordita-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Gordita-Italic.woff2') format('woff2'),
        url('../fonts/Gordita-Italic.woff') format('woff'),
        url('../fonts/Gordita-Italic.ttf') format('truetype'),
        url('../fonts/Gordita-Italic.svg#Gordita-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
:root {
 --brand-yellow: #FFC800;
 --brand-teal: #4DD0E1;
 --brand-black: #000000;
 --text-gray: #4a4a4a;
}

body {
	font-family: 'Gordita';
	font-style: normal;
	overflow-x: hidden;
	
}
.sticky-top {background:#ffffff;}
.mega-menu a:hover{color:#c32427;}

/*Menu hove*/

/* --- Navbar Styling --- */
        .navbar {
	background: white;
}
.navbar-nav {
	border:1px solid #f6f6f6;
	border-radius:35px;
	padding:4px 16px;
}
.navbar-brand span {
	font-size: 1.5rem;
}
.nav-link {
	color: var(--brand-black) !important;
	font-weight: 500;
	padding: 0.5rem 1rem !important;
	transition: color 0.3s;
}
.nav-link:hover, .nav-link.active {
	color: var(--brand-yellow) !important;
}

.ico-dropdown a:after{display:none!important;}
.mega-drop-down a{position:relative;}
/* --- Rest of Page Styling (From previous request) --- */
        .hero-section {
	background-color:#fece09;
	border-radius: 20px;
	padding: 3rem 2rem;

	position: relative;
}
.hero-img {
	max-width: 100%;
	height: auto;
	border-radius: 0 0 20px 20px;
}
.section-title {
	font-weight: 700;
	margin-bottom: 3rem;
	text-align: center;
	text-transform: uppercase;
}
.icon-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	margin-bottom: 1rem;
	flex-shrink: 0;
}
.bg-icon-yellow {
	background-color: #FFE082;
	color: black;

}
.bg-icon-teal {
	background-color: #B2EBF2;
	color: black;
	
}
.why-us-card {
	background-color: #f5f5f5;
	border-radius: 15px;
	padding: 2rem;
	height: 100%;
	transition: transform 0.3s ease;
}
.why-us-card:hover {
	transform: translateY(-5px);

}
.why-us-icon {
	width: 50px;
	height: 50px;
	background-color: black;
	border-radius: 50%;
	color: var(--brand-yellow);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}
footer {
	background-color: #f4f4f4;
	padding:2rem 0;
	text-align: center;
}
footer a {
	text-decoration: none;
	color: #333;
	margin: 0 10px;
}
.about-right-banner-img {
	background-image:url(../images/about-banner-img.jpg);
	background-position:right bottom;
	background-repeat:no-repeat;
	min-height:419px;
	background-size:contain;
}
.f27{ font-size:27px; line-height:43px;}
.navbar-brand svg a:focus{outline:0;}
p{font-size:16px; color:#000;}
.text-secondary{color:#000!important;}
.text-muted{color:#000!important;}
.footer-social-list{ list-style:none; margin-bottom:0;}
.footer-social-list li{ float:left;} 
.footer-social-list li a{ width:30px; height:30px; background:#000; display:flex; justify-content:center; align-items: center; border-radius:6px;}
footer a:hover{ color:#c32427;}
.footer-social-list li a:hover{ background:#c32427;}
.dropdown-menu span{font-size:12px;}
.navbar-nav .dropdown-menu {border-top: 3px solid var(--brand-yellow);}
.dropdown-menu li{min-width:270px;}
.dropdown-menu li a{font-size:0.9rem; transition: color 0.2s, padding-left 0.2s;}
.dropdown-menu li a:hover{padding-left:20px;}
.dropdown-menu li {position: relative; margin-bottom: 7px; margin-top: 7px;}
.hero-text{ font-size:20px;}
.ol-list{ padding-left:12px;}
.ol-list li{ margin-top:15px;}
/*menu test*/
.exo-menu{
    margin-bottom:0;
	float: left;
	list-style: none;
	border:1px solid #f6f6f6;
    border-radius: 35px;
    padding-left:0;
    border: 1px solid #f6f6f6
}
.exo-menu > li {	display: inline-block;float:left;}
.exo-menu > li > a{
    color:#000;
	text-decoration: none;
    font-size:16px;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
.exo-menu > li > a.active,
.exo-menu > li > a:hover,
li.drop-down ul > li > a:hover{
	
	color:#c32427;
}

.exo-menu i {

  font-size: 18px;
  margin-right: 6px;
  line-height: 20px !important;
}
li.drop-down,
.flyout-right,
.flyout-left{position:relative;}
li.drop-down:before {

  font-style: normal;
  display: inline;
  position: absolute;
  right: 6px;
  top: 20px;
  font-size: 14px;
}
li.drop-down>ul{
	left: 0px;
	min-width:262px;
border-radius: 10px;
    background: #fff; padding-left:0; border:1px solid #f6f6f6;
}
.drop-down-ul{display:none;}
.flyout-right>ul,
.flyout-left>ul{
  top: 0;
  min-width:258px;
  display: none;
  border-left: 1px solid #365670;
  }

li.drop-down>ul>li>a,
.flyout-right ul>li>a ,
.flyout-left ul>li>a {
	color: #000;
	display: block;
	padding:11px 17px;
	text-decoration: none;
	font-size:14px;
	-webkit-transition: color 0.2s linear, background 0.2s linear;
	-moz-transition: color 0.2s linear, background 0.2s linear;
	-o-transition: color 0.2s linear, background 0.2s linear;
	transition: color 0.2s linear, background 0.2s linear;
}
.flyout-right ul>li>a ,
.flyout-left ul>li>{
	border-bottom: 1px solid #f6f6f6;
}


/*Flyout Mega*/
.flyout-mega-wrap {
	top: 0;
	right: 0;
	left: 100%;
	width: 100%;
	display:none;
	height: 100%;
	padding: 15px;
	min-width: 742px;

}
h4.row.mega-title {
  color:#eee;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
  border-bottom: 1px solid #ccc;
 }
.flyout-mega ul > li > a {
  font-size: 90%;
  line-height: 25px;
  color: #fff;
  font-family: inherit;
}
.flyout-mega ul > li > a:hover,
.flyout-mega ul > li > a:active,
.flyout-mega ul > li > a:focus{
  text-decoration: none;
  background-color: transparent !important;
  color: #ccc !important
}
/*mega menu*/
.mega-menu ul{ list-style:none; padding-left:0;}
.mega-menu {
  left: 0;
  right: 0;
  padding: 15px;
  display:none;
  padding-top: 0;
  min-height: 100%;

}
h4.row.mega-title {
  color: #eee;
  margin-top: 0px;
  font-size: 14px;
  padding-left: 15px;
  padding-bottom: 13px;
  text-transform: uppercase;
 
  padding-top: 15px;

  }
 .mega-menu ul li a {
  line-height: 20px; font-size:14px;

  display: block;
}
ul.stander li a {
    padding: 3px 0px;
}

ul.description li {
    padding-bottom: 12px;
    line-height: 8px;
}

ul.description li span {
    color: #ccc;
    font-size: 85%;
}
a.view-more{
  border-radius: 1px;
  margin-top:15px;
  background-color: #009FE1;
  padding: 2px 10px !important;
  line-height: 21px !important;
  display: inline-block !important;
}
a.view-more:hover{
	color:#fff;
	background:#0DADEF;
}
ul.icon-des li a i {
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    background-color: #009FE1;
    line-height: 35px !important;
}

ul.icon-des li {
    width: 100%;
    display: table;
    margin-bottom: 11px;
}
/*Blog DropDown*/
.Blog{
	left:0;
	display:none;
	color:#fefefe;
	padding-top:15px;
	background:#547787;
	padding-bottom:15px;
}
.Blog .blog-title{
	color:#fff;
	font-size:15px;
	text-transform:uppercase;

}
.Blog .blog-des{
	color:#ccc;
	font-size:90%;
	margin-top:15px;
}
.Blog a.view-more{
	margin-top:0px;
}
/*Images*/
.Images{
	left:0;
   width:100%;
	 display:none;
	color:#fefefe;
	padding-top:15px;
	background:#547787;
	padding-bottom:15px;
}
.Images h4 {
  font-size: 15px;
  margin-top: 0px;
  text-transform: uppercase;
}
/*common*/

.mega-menu{
	background-color: #ffffff; border:1px solid #f6f6f6; border-radius:25px; padding:30px;
}
.mega-menu a{ color:#000; text-decoration:none;}
.mega-menu span{ font-size:12px;}
/*hover*/
.Blog:hover,
.Images:hover,
.mega-menu:hover,
.drop-down-ul:hover,
li.flyout-left>ul:hover,
li.flyout-right>ul:hover,
.flyout-mega-wrap:hover,
li.flyout-left a:hover +ul,
li.flyout-right a:hover +ul,
.blog-drop-down >a:hover+.Blog,
li.drop-down>a:hover +.drop-down-ul,
.images-drop-down>a:hover +.Images,
.mega-drop-down a:hover+.mega-menu,
li.flyout-mega>a:hover +.flyout-mega-wrap{
	display:block;
}
/*responsive*/
 @media (min-width:767px){
	.exo-menu > li > a{
	display:block;
	padding: 9px 18px;
 }
.mega-menu, .flyout-mega-wrap, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
		position:absolute;
}
 .flyout-right>ul{
	left: 100%;
	}
	.flyout-left>ul{
	right: 100%;
}
 }
@media (max-width:767px){

	.exo-menu {
		min-height: 58px;
		background-color: #23364B;
		width: 100%;
	}
	
	.exo-menu > li > a{
		width:100% ;
	    display:none ;
	
	}
	.exo-menu > li{
		width:100%;
	}
	.display.exo-menu > li > a{
	  display:block ;
	  	padding: 20px 22px;
	}
	
.mega-menu, .Images, .Blog,.flyout-right>ul,
.flyout-left>ul, li.drop-down>ul{
		position:relative;
}

}
a.toggle-menu{
    position: absolute;
    right: 0px;
    padding: 20px;
    font-size: 27px;
    background-color: #ccc;
    color: #23364B;
    top: 0px;
}
.blink-soft {
  animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}
.visit-my-blog {
    background: #379fe1;
}
   

.drop-down-ul{ list-style:none;}
.flyout-right>ul{padding-left:0; list-style:none; border-left: 0; background: #fff; border-radius: 15px;}
.flyout-right > a {
    display: flex;
    justify-content: space-between; /* Pushes the icon to the end */
    align-items: center;
}
.flyout-right > a i {
   
   
}
/* 1. Default State: Setup the transition */
.flyout-right > a .bi-chevron-right {
    display: inline-block; /* Essential for rotation */
    transition: transform 0.3s ease; /* Smooth animation over 0.3 seconds */
}

/* 2. Hover State: Apply the rotation */
.flyout-right:hover > a .bi-chevron-right {
    /* Rotates the right-facing chevron 90 degrees to point down (or up, depending on your preferred orientation) */
    transform: rotate(90deg); 
}
/* --- Founder Section Custom Styles --- */

.founders-title {
    font-size: 2.2rem;
    color: #333;
    letter-spacing: 1px;
}

.founder-card {
    /* Removes Bootstrap's default background and border */
    border: 1px solid transparent; 
}

/* Custom styles for Navin's card (Light Green/Cyan) */
.founder-card.navin {
    background-color: #e3fcf9; /* Light cyan background */
    border-color: #8cfff2;      /* Matching light blue/green border */
}

/* Custom styles for Kumud's card (Light Beige/Gray) */
.founder-card.kumud {
    background-color: #fcf9f7; /* Very light beige/off-white background */
    border-color: #f7e4d8;      /* Matching light gray/tan border */
}

.founder-card .card-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.founder-card .card-text {
    line-height: 1.6;
}

/* Image Container Sizing and Positioning */
.founder-image-container {
    flex-shrink: 0;
    max-width: 150px; /* Limits the size of the image container */
    width: 100%;
    /* On mobile, center the image */
    display: flex; 
    justify-content: center;
}

/* Ensure the image takes up the space without distortion */
.founder-image {
    width: 100%;
    height: auto;
    object-fit: contain; /* Ensures the illustration is fully visible */
}

/* Responsive adjustment for mobile stacking */
@media (max-width: 767.98px) {
    .founder-image-container {
        /* On small screens, allow the image container to span the width, 
           and ensure the image is centered */
        max-width: 100%; 
    }
    .founder-details {
        text-align: center;
    }
}
.mega-menu ul li{margin-top:15px; margin-bottom:15px;}
/**********************************Team Animation*****************************************************/
.main {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding: 0 30px 50px 30px;
    margin-top: 3%;
}
.st-wrapper {
	width: 100%;
	height:360px;
	position: relative;
	margin: 0 auto;
	-webkit-perspective: 1200px;
	-webkit-perspective-origin : 50% 100%;
	-moz-perspective: 1200px;
	-moz-perspective-origin : 50% 100%;
	-o-perspective: 1200px;
	-o-perspective-origin : 50% 100%;
	-ms-perspective: 1200px;
	-ms-perspective-origin : 50% 100%;
	perspective: 1200px;
	perspective-origin : 50% 100%;
	margin-top:161px;
}

.st-stack {
	position: absolute;
	height: 10px;
	bottom: 0px;
	background-image: url(../images/gradient.png);
	background-image: -webkit-linear-gradient(top, #fff 50%, #e7ae38 50%);
	background-image: -moz-linear-gradient(top, #fff 50%, #e7ae38 50%);
	background-image: -o-linear-gradient(top, #fff 50%, #e7ae38 50%);
	background-image: -ms-linear-gradient(top, #fff 50%, #e7ae38 50%);
	background-image: linear-gradient(to bottom, #fff 50%, #e7ae38 50%);
	-webkit-background-size: 5px 5px;
	-moz-background-size: 5px 5px;
	background-size: 5px 5px;
	background-position: bottom center;
}

.st-stack:before {
	content: '';
	position: absolute;
	width: 140%;
	left: -20%;
	bottom: -10px;
	height: 20px;
	z-index: -1;
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%);
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%);
	background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%);
	background: radial-gradient(center, ellipse cover, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 60%);
}

.st-stack-left {
	left: 0px;
}

.st-stack-right {
	right: 0px;
}

.st-wrapper .st-title,
.st-wrapper nav {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.st-wrapper .st-title {
	padding: 0 10% 60px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.st-wrapper .st-title h2 {
	padding: 0 20px;
	font-size: 28px;
	color: #dc4e2a;
	font-weight: 400;
	letter-spacing: 3px;
	font-family: 'Englebert', Arial, sans-serif;
	line-height: 38px;
	text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

.st-wrapper .st-title h3 {
	font-size: 16px;

	color: #000;

}

.st-wrapper nav span {
	color: transparent;
	position: absolute;
	width: 40px;
	height: 40px;
	left: 50%;
	bottom: 0;
	cursor: pointer;
}

.st-wrapper nav span:first-child {
	margin-left: -45px;
}

.st-wrapper nav span:last-child {
	margin-left: 5px;
}

.st-wrapper nav span:before {
	font-family: 'icomoon';
	font-style: normal;
	speak: none;
	font-weight: normal;
	line-height: 1;
	font-size: 30px;
	line-height: 40px;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	color: #fff;
	background: #dc4e2a;
	border-radius: 50%;
	cursor: pointer;
	text-shadow: 0 1px 1px rgba(255,255,255,0.5);
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.st-wrapper nav span:first-child:before {
	font-family:'FontAwesome';
	content: "\f104";
}

.st-wrapper nav span:last-child:before {
	font-family:'FontAwesome';
	content: "\f105";
}

.st-wrapper nav span:hover:before {
	color: #333;
}

.st-wrapper .st-item {
	position: absolute;
	-webkit-transform-style : preserve-3d;
	-moz-transform-style : preserve-3d;
	-o-transform-style : preserve-3d;
	-ms-transform-style : preserve-3d;
	transform-style : preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.st-wrapper .st-item.st-center {
	-webkit-transform: rotateZ(0deg) rotateY(0deg);
	-moz-transform: rotateZ(0deg) rotateY(0deg);
	-o-transform: rotateZ(0deg) rotateY(0deg);
	-ms-transform: rotateZ(0deg) rotateY(0deg);
	transform: rotateZ(0deg) rotateY(0deg);
}

.st-wrapper .st-item.st-right,
.st-wrapper .st-item.st-rightflow {
	opacity: 0;
	-webkit-transform: rotateZ(90deg) rotateY(-90deg);
	-moz-transform: rotateZ(90deg) rotateY(-91deg);
	-o-transform: rotateZ(90deg) rotateY(-90deg);
	-ms-transform: rotateZ(90deg) rotateY(-90deg);
	transform: rotateZ(90deg) rotateY(-91deg);
	pointer-events: none;
}

.st-wrapper .st-item.st-left,
.st-wrapper .st-item.st-leftflow {
	opacity: 0;
	-webkit-transform: rotateZ(-90deg) rotateY(90deg);
	-moz-transform: rotateZ(-90deg) rotateY(91deg);
	-o-transform: rotateZ(-90deg) rotateY(90deg);
	-ms-transform: rotateZ(-90deg) rotateY(90deg);
	transform: rotateZ(-90deg) rotateY(91deg);
	pointer-events: none;
}
.st-wrapper .st-item.st-rightflow,
.st-wrapper .st-item.st-leftflow,
.st-wrapper .st-item.st-center {
	opacity: 1;
}

.st-wrapper .st-item a,
.st-wrapper .st-item img {
	border: none;
	max-width: 100%;
	display: block;
}

.st-wrapper .st-item a {
	background: #fff;
	box-shadow: 0 0 0 9px #fff, 0 1px 3px 9px rgba(0,0,0,0.3);
}
/*Web Application*/
.yellow-1{ background:#fff9d1;}
 .feature-icon{background: #ffe319;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 32px;
    display: flex;
    justify-content: center;
    vertical-align: middle;
    align-items: center;}
        .bg-teal {
            background-color: #48d6d2;
        }
        .text-yellow-dark {
            color: #d8c300; 
        }
        .bg-yellow-light {
            background-color: #fffac2; 
        }
       .content-border{ border:1px solid #f5f5f5!important;}
        .custom-card {
            min-height: 200px; 
        }
        .custom-padding {
            padding:2rem 0;
        }
        .feature-icon {
           
            margin-bottom: 0.5rem;
        }
        .custom-image-wrapper {
            /* Positioning for the image/tablet within the banner */
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 40%; /* Adjust size as needed */
        }
        .custom-image {
            max-width: 100%;
            height: auto;
        }

        /* Adjusting banner text width to accommodate the image */
        .banner-text-area {
            max-width: 55%; 
        }

        @media (max-width: 991.98px) {
            .custom-image-wrapper {
                position: relative;
                width: 100%;
                margin-top: 1rem;
                transform: none;
                top: auto;
            }
            .banner-text-area {
                max-width: 100%; 
            }
            .custom-padding {
                padding: 3rem 0;
            }
        }
.black{color:#000;}

/*End*/	
.mobile-app-development{background-color:#b2ebf2; background-repeat:no-repeat; background-position:right top; background-size: contain; min-height:400px; padding:3rem 2rem; border-radius:15px; background-image:url(../images/mobile-app-development.jpg); display: flex;
    justify-content: center;
    vertical-align: middle;
    flex-direction: row;
    align-items: center;}
.cta-section .container{ border-radius:15px; background-image:url(../images/streamline--business-banner.jpg); background-repeat:no-repeat; background-position:left top; background-position:left top; background-attachment:fixed; color:#fff; display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 4px; height:400px; text-align:center;}
.btn-yellow{ background:#ffce08; font-size:18px; font-weight:bold; padding: 10px 24px; border-radius:25px;}	
.btn-yellow:hover{ background:#cf2729;}	

@media screen and (max-width: 1310px){
	.st-wrapper .st-item {
		width: 300px;
	}
	.st-wrapper {
		height: 460px;
	}
}

@media screen and (max-width: 1050px){
	.st-wrapper .st-item {
		width: 260px;
	}
	.st-wrapper {
		height: 380px;
	}
}

@media screen and (max-width: 935px){
	.st-wrapper .st-item {
		width: 240px;
	}
	.st-wrapper {
		height: 380px;
	}
}

@media screen and (max-width: 880px){
	.st-wrapper .st-item {
		width: 220px;
	}
	.st-wrapper .st-title {
		bottom: 280px;
	}
	.st-wrapper {
		height: 420px;
	}
}

@media screen and (max-width: 740px){
	.st-wrapper .st-item {
		width: 200px;
	}
	.st-wrapper .st-title {
		bottom: 240px;
	}
	.st-wrapper {
		height: 370px;
	}
}

@media screen and (max-width: 650px){
	.st-stack {
		display: none;
	}
	.st-wrapper nav {
		bottom: 220px;
	}
}

@media screen and (max-width: 450px){
	.st-wrapper .st-item {
		width: 200px;
	}
	.st-wrapper .st-title {
		bottom: 150px;
		padding-left: 0px;
		padding-right: 0px;
	}
	.st-wrapper .st-title h2 {
		font-size: 22px;
		line-height: 32px;
	}
	.st-wrapper nav {
		bottom: 140px;
	}
	.st-wrapper {
		height: 300px;
	}
}	
/* Ensure the original dropdowns are hidden on mobile first */
@media (max-width: 991px) {
    .exo-menu .drop-down-ul,
    .exo-menu .flyout-right ul {
        display: none;
    }
}

/* --- Mobile/Touch Fix: FORCED OPEN STATE --- */
/* (Adjust 991px if your menu collapses at a different width) */
@media (max-width: 991px) { 
    
    /* 1. First-Level Dropdowns (shows the .drop-down-ul) */
    .exo-menu .drop-down.tap-to-open.open > .drop-down-ul {
        display: block !important;
        /* Re-apply the animation if the original CSS removed it */
        animation-name: fadeIn;
        animation-duration: 0.5s; 
    }
    
    /* 2. Second-Level Flyout Menus (shows the nested UL inside .flyout-right) */
    .exo-menu .flyout-right.tap-to-open.open > ul {
        display: block !important;
        /* Re-apply the animation */
        animation-name: fadeIn;
        animation-duration: 0.5s;
    }
	/* 1. Ensure the Mega Menu content is hidden by default on mobile */
    .exo-menu .mega-drop-down .mega-menu {
        display: none !important; 
    }
    
    /* 2. FORCE the Mega Menu DIV to show when the 'open' class is tapped/added */
    .exo-menu .mega-drop-down.tap-to-open.open > .mega-menu {
        display: block !important;
        /* Re-apply the animation */
        animation-name: fadeIn;
        animation-duration: 0.5s;
        
        /* Optional: Add basic mobile styling to make the mega menu look like a standard dropdown */
        position: static !important;
        width: 100% !important;
        border: none !important;
        padding: 10px 0;
    }
}
@media only screen and (min-width:320px) and (max-width: 640px) {
	.tap-to-open ul{display:none!important;}
	.sticky-top{ position:static;}
	body{overflow:scroll;}
	.m-show-dropdown ul{display:block!important; margin-bottom:15px; background:#f7f4f0; border-radius:15px; padding:15px;}
	.drop-down-ul{background:#f7f4f0!important; border-radius:15px; padding:15px;}
	.exo-menu .drop-down.tap-to-open.open > .drop-down-ul{ padding: 2px;
        margin: 10px;}
	.navbar-nav li{width:100%;}
	.navbar-nav { padding: 19px 16px; border-radius: 8px;}
	.dropdown-menu .dropdown-menu{margin-left:0;}
	.exo-menu{display:none;}
	.display{display:block!important;}
	.exo-menu{background:#fff; border-radius:13px; }

	li.drop-down:before{right:34px;}
	li.mega-drop-down a:after{right:34px;}
	li.drop-down>ul{padding-left:0;}

	.drop-down li a{font-weight:normal;}
	
	}