/* HORIZONTAL SCROLLING SECTION ON HOMEPAGE */

/* ====================== Mobile and Up ========================== */

/* horizontal scrolling process cards on homepage */
.card-content {
	overflow: unset;
}

.scroll-section, .testimonials {
	padding-top: 0;
}
  .card-list {
            list-style: none;
            padding: 0;
	  		display: flex;
	 		flex-direction: column;
        }

        .card-list .card {
            position: relative;
            max-width: 90%; /* Adjust as needed */
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px 20px 0;
			float:left;
			counter-increment: num;
			margin-inline-start: 40px;
			margin-block-end: 30px;
			background-color: #fff;
        }

       .card-list .card::before {
            content: counter(num);
            
            position: absolute;
            top: -10px; /* Adjust as needed */
            left: -10px; /* Adjust as needed */
            background-color: var(--color-uvu-primary);
            color: white;
            font-weight: bold;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

     
		
   			.card-content h2 {
          		margin-block-start:0;
				font-size: 1.25rem;
        	}
		.link {
			width: 100%;
			flex-grow: 2;
			text-wrap: balance;
			line-height: 1;
		}
        	.link p{
           	text-align: right;
        	}
			.link a {
				font-weight: 600;
				border-bottom: none;
			}
				

.card-list-label {	
	border-bottom: 3px solid var(--color-uvu-primary);
	margin: 20px;
	padding: 15px 0;
	height: 100%
}
	.card-list-label::after {
		content: '\f358' !important;
    	font-family: "Font Awesome 5 Solid", "Font Awesome 5 Pro";
		font-size: 2.5em;
		position: absolute;
		color: var(--color-uvu-primary);
		bottom: 0;
		right: 45%;
		z-index: 1;
		background-color: #fff;
	}
	.card-list-label h3 {
		font-size: 2em;
		color: #2D7A46;
		margin-top: 0;
	}
		.card-list-label h3 .sub {
			display: block;
			color: #000;
			font-weight: 300;
			font-size: .8em;
		}


/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {
	
	.card-list-label {
		
	justify-content: center;
	border-right: 3px solid var(--color-uvu-primary);
		border-bottom: none;
		margin: 0;
}
.card-list-label::after {
		content: '\f35a' !important;
		right: -20px;
		bottom: 95%;
	}
	
	.card-list-label h3 {
		margin-top: -40px;
	}
	
		.card-list-label-2 {		
	border-right: 3px solid var(--color-uvu-primary);
		margin: 0;
			height: 100%;
			padding: 10% 20px 20px;
}

	.card-list-label-2::after {
		font-family: "Font Awesome 5 Solid", "Font Awesome 5 Pro";
		font-size: 2.5em;
		position: absolute;
		color: var(--color-uvu-primary);
		content: '\f35a' !important;
		right: -20px;
		bottom: 95%;
		z-index: 1;
		background-color: #fff;
	}
	
}/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {
	
	.scroll-section, .testimonials {
		padding-top: 40px;
	}
	.card-list-label {
		display: grid;
		align-items: center;
	}
	.card-list-label::after {
		bottom: 55%;		
	}
	.card-list-label-2::after {
		bottom: 55%;		
	}
	
		 .card-list {
            list-style: none;
            padding: 0 40px 0 0;
	  		display: flex;
	 		flex-direction: row;
		 	flex-wrap: no-wrap;	
        }
	.card-list .card {
		 min-width: 400px; /* Adjust as needed */
	}
	.card-content {
			height: 225px;
		}
	.international .card-content {
		height: 400px;
	}
	.link a:after {
					content: ' \2192';
				font-weight: 900;
				}
	
		/* Phases Scrollbar */
	.scroll-container {
            overflow-x: scroll; /* Enable horizontal scrolling */
		
        }
	
	.card-list-holder {
		background-image: url(/admissions/images/adm_repeat.jpg);
	background-repeat: repeat-x;
	background-position: center;
		padding-left: 40px;
	}

	
	.scroll-container {
		overflow: auto;
/* 		margin-block-end: 40px; */
	}
		
	
	div.scroll-container::-webkit-scrollbar {
		width: 10px;
	}

	/* Track */
	div.scroll-container::-webkit-scrollbar-track {
		background: #f1f1f1; 
		border-radius: 10px;
	}


	/* Handle */
	div.scroll-container::-webkit-scrollbar-thumb {
		background: #275d38; 
		border-radius: 10px;
	}

	/* Handle on hover */
	div.scroll-container::-webkit-scrollbar-thumb:hover {
		background: #555; 
	}
	
	
}

/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {
	
	.card-list-label h3 {
		font-size: 2.5em;
	}
	.card-list-label h3 .sub {
			
			margin-left: 160px;
			
		}