.services-v23 .service-collapse-wrapper .nav-tabs > li > a:hover,
.services-v23 .service-collapse-wrapper .nav-tabs > li > a:focus,
.services-v23 .service-collapse-wrapper .nav-tabs > li > a[aria-expanded="true"] {
	color: #fff;
	background: #2C51AC;
}
.services-v23 .features ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.services-v23 .features ul li{
	position: relative;
	padding-left: 25px;
	padding-bottom: 8px;
}
.services-v23 .features ul li:before{
	content: '';
	position: absolute;
	left: 0;
	width: 12px;
	height: 3px;
	background: #2C51AC;
	top: 12px;
	display: inline-block;
}
.services-v23 .tab-content-holder {
	position: relative;
  	animation: slideup 0.2s;
  	overflow: hidden;
}
/* @keyframes slideup {
  from {top: 50px;}
  to {top: 0;}
} */

.services-v23 .service-collapse-wrapper .panel-default {
	box-shadow: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}
.services-v23 .service-collapse-wrapper .panel-default > .panel-heading {
	color: #333;
	background-color: #ebf2f3;
	border: 0;
	border-radius: 0;
	text-align: center;
	padding: 14px 20px;
	margin: 0;
	line-height: 1;
	cursor: pointer;
}
.services-v23 .service-collapse-wrapper .panel-title {
	font-size: 18px;
}
.services-v23 .service-collapse-wrapper .panel-group .panel + .panel {
  margin-top: 2px;
}
.services-v23 .service-collapse-wrapper .tab-img img{
	margin-left: auto;
	margin-right: auto;
}
.services-v23 .service-collapse-wrapper .panel-default > .panel-heading[aria-expanded="true"]{
	color: #fff;
	background: #2C51AC;
}
.services-v23 .service-collapse-wrapper .panel-group .panel-heading + .panel-collapse > .panel-body {
  border-top: 0;
}

.services-v23 .p-mobile{
	display: block;
}
.services-v23 .p-desktop{
	display: none;
}
.services-v23 .service-collapse-wrapper .nav{
	display: none;
}

@media screen and (min-width: 576px) {
	.services-v23 .service-collapse-wrapper .nav{
		display: block;
	}
	.services-v23 .service-collapse-wrapper .panel-default > .panel-heading {
		display: none;
	}
	.services-v23 .p-mobile{
		display: none;
	}
	.services-v23 .p-desktop{
		display: block;
	}
}


/* Target the active state of the tab */
.services-v23 .nav-tabs > li.active > a,
.services-v23 .nav-tabs > li.active > a:hover,
.services-v23 .nav-tabs > li.active > a:focus {
    background-color: #006da7; /* Set your desired background color for the active tab */
    color: #fff; /* Optional: Change the text color if needed */
    /* Add other styling as needed */
}

/* Ensure that the container of the tabs is a flexbox */
.services-v23 .nav-tabs {
    display: flex;
    justify-content: center; /* This will center the tabs */
    align-items: center; /* This will vertically align the tabs if necessary */
    flex-wrap: wrap; /* This allows tabs to wrap in case of many tabs or small screen */
    padding-left: 0; /* Reset padding to ensure proper alignment */
    margin: 0; /* Reset margin to ensure proper alignment */
}

/* Remove list styling and set flex item properties for each tab */
.services-v23 .nav-tabs > li {
    list-style: none; /* Remove default list styling */
    display: flex; /* Make each list item a flex container to center align the content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex: 1 0 auto; /* Allow each tab to grow and shrink as needed, but not to exceed its content size */
}

/* Make sure the anchor tags within the list items take up the full space for better clickability */
.services-v23 .nav-tabs > li > a {
    display: block; /* Expand the link to fill the list item */
    width: 100%; /* Ensure it takes up all available horizontal space */
    text-align: center; /* Center text for good measure, even though flexbox should handle it */
	font-size: 30px;
	font-family:'Spectral', serif;
}

/* Optional: Add some padding to the links for better touch targets on mobile devices */
.services-v23 .nav-tabs > li > a {
    padding: 10px; /* Adjust the padding as necessary */
}


.services-v23 .well.well-white{
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	min-height: 400px;
}

/* Media query for XS screens */
@media (max-width: 767px) {
    .services-v23 .well.well-white {
        min-height: 300px;
    }
}

.services-v23 .well.well-white:hover {
    background-color: #006da7; /* Change to your desired hover background color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* This adds a subtle shadow effect */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */	
}

.services-v23 .well.well-white:hover,
.services-v23 .well.well-white:hover h4,
.services-v23 .well.well-white:hover h4 .over, /* Target .over specifically */
.services-v23 .well.well-white:hover p,
.services-v23 .well.well-white:hover a { /* Add other tags as necessary */
    color: #fff !important; /* This sets the text color to white */
}

.zoom-img {
	overflow: hidden !important;
}

.zoom-img img {
	transition: transform .7s;
}

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

@media (max-width: 576px) {
	h4.text-black {
	  font-size: 1.7em; /* Adjust the font size for XS screens */
	}
  }