.sp-container {
  display: flex;
  flex-direction: column;
}

.sp-jumbotron {
            background-color: #e7e7e7;
            padding: 20px;
            padding-bottom: 5px;
            margin-bottom: 20px !important;
            font-size: 18px;
            font-weight: bold;
            margin: 0;
}

.sp-jumbotron txt1 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

  
/* Style for the card container */
.sp-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
   flex-direction: column; /* Stack cards vertically on smaller screens */
}
.sp-card-container2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Style for each card */
.sp-card {
  width: 40%; /* Adjust the width as needed */
  margin: 10px;
  padding: 40px;
  background-color: #333333;
  color: white;
  text-align: center;
  border-radius: 5px;
}
.sp-card2 {
	width: 30%; /* Adjust the width as needed */
	margin: 10px;
	padding: 20px;
	background-color:#333333;
	color: #ffffff;
	text-align: center;
	border-radius: 5px;
text-decoration: none; /* Remove underlines from links */
}

.sp-card3 {
	width: 90%; /* Adjust the width as needed */
	margin: 10px;
	padding: 20px;
	background-color:#333333;
	color: #ffffff;
	text-align: center;
	border-radius: 5px;
text-decoration: none; /* Remove underlines from links */
}

.sp-card-img-sizer {
  width: 77px;
}

.sp-card-img-top {
  width: auto;
}

.sp-card-img-top:hover {
  background-color: #890a1d;
}

.sp-card-img-trend { 
  width: 25%;
}

@media (max-width: 768px) {
  .sp-card-container {
    flex-direction: column; /* Stack cards vertically on smaller screens */
  }
  
  .sp-card {
    width: 100%; /* Make cards take up full width on smaller screens */
  }
}

@media (min-width: 576px)
.sp-jumbotron {
  padding: unset;
  padding-bottom: 5px;

}

.sp-lineSpacer {
    margin-left: 7px;
    margin-right: 7px;
    color: lightblue;
}

.sp-navbar-nav {
    display: -webkit-inline-box;
    flex-wrap: wrap;
}


.sp-jccalColor {
  color: #890a1d;
}

.sp-nav-item {
  min-width: unset !important;
 }

.sp-jumboText {
  text-align: justify;
  text-justify: inter-word;
}
.sp-cardImageTop {
  background: #e7e7e7;
  padding: 10px;
}
.sp-roundedImage {
  border-radius: 15px 50px 30px;
  background: #73AD21;
padding: 7px;
    border-top-left-radius: 50% 50%;

    border-bottom-right-radius: 50% 50%;
    border-bottom-left-radius: 50% 50%;
  width: 84px;
  height: 84px;
}
.sp-imglist ul{
	margin:0px;
}
.sp-imglist li{
	font-size:18px;
	margin-left:25px;
	padding:0px;
	list-style:url(Images/Roads/arrow.sp-png);
	line-height:45px;
}
.sp-imglist li a:link, .sp-imglist li a:visited{
	color:#1e598e;
	text-decoration:none;

}
.sp-imglist li a:hover{
	color:#0A7CAF;
	padding:2px;
    -moz-box-shadow: 0px 0px 12px #9e9ea3;
    -webkit-box-shadow: 0px 0px 12px #9e9ea3;
    box-shadow: 0px 0px 12px #9e9ea3;
    border:none 0px #000000;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
.sp-divider {
  margin-left: 8px;
  margin-right: 8px;
}
    /* Style for the card container */
.sp-jumbocontainer {
        display: flex;
        flex-direction: column;
        background-color: #e7e7e7;
        padding: 20px;
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: bold;
    }

.sp-iframe-container {
    display: flex;
    align-items: center; /* Vertical alignment */
}

.sp-text-container {
    flex: 1; /* Takes up remaining space */
    padding: 20px; /* Adjust as needed */
}
 /* Style for visited links */
 .sp-card2:visited {
    color: #ffffff; /* Color for visited links */
  }