/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */

/* ===========   video student showcase  =========== */
/* ----------------------- */
/*       home              */
/* ----------------------- */
.home-header-style{
	text-align: center;
    letter-spacing: 30px;
    text-transform: uppercase;
    font-size: 70px;
    padding: 0px 30px;
    font-weight: 800;
}
.hero-video .video-background iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -24%;
    left: 0;
}
.jumbo {
    position: relative;
    padding: 63px 20px;
    margin-top: 0;
    color: #fff;
    font-size: 150%;
}
/* ----------------------- */
/*  student showcase      */
/* ----------------------- */
.student-showcase {
	text-align: center;
	padding: 20px;
	background-color: #fff;
}

.student-grid {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 20px;
}

.student-card {

	display: block;
	text-decoration: none;
	color: inherit;
}

.student-card img {
	height: auto;
	display: block;
	border: 3px solid transparent;
	transition: border-color 0.3s ease;
}

.student-card.highlighted img {
	border-color: #78be20; 
}

.main-sub-text {
	margin-top: 8px;
    text-align: center;
    font-weight: 200;
    font-size: 25px;
}
.sub-text {
	margin-top: 8px;
    text-align: center;
    font-weight: 100;
    font-size: 15px;
}

.student-card:hover img {
	border-color: #78be20;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.student-grid {
		flex-direction: column;
	}
}

/*====section 3 credit hours ====*/
.degree-list {
    width: 100%;
    padding: 20px;
}

.degree-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed #000;
    padding: 10px 0;
}

.degree-name {
    font-weight: bold;
}

.credit-hours {
    margin-left: auto;
    margin-right: 20px;
}

.arrow {
    color: green;
}

/*====section 4 advising ====*/
.bg-degree-match {
    background-image: url(https://www.uvu.edu/engineering-technology/images/degreematch-background.png);
    background-size: cover;
    background-repeat: repeat-y;
}

.testimonial-container {
    background: #f9f9f9;
    border-radius: 6px;
    padding: 20px;
    max-width: 600px;
    margin: auto;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.testimonial {
    position: relative;
}

.testimonial-text {
    font-style: italic;
    color: #333;
    quotes: "“" "”" "‘" "’";
}

.testimonial-text:before {
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
    color: #ccc;
}

.testimonial-text:after {
    content: close-quote;
}

.professor-info {
    margin-top: 20px;
	display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
}

.professor-name {
    font-weight: bold;
    color: #333;
}

.professor-title {
    color: #666;
}

.image-container {
    margin-top: 20px;
    align-self: center;
}

.professor-image {
    width: 100px; /* Adjust as necessary */
    height: auto;
    border-radius: 6px;
}
.text-transform-none {
	text-transform: none;
}


.button-arrow::after {
	content: '\f061' !important;
	font-family: "Font Awesome 5 Solid", "Font Awesome 5 Pro";
	/* 	margin-inline-start: 25px; */
}
.advising-cta-icon-wrapper{
	display: flex;
	flex-direction: column;
    padding: 3px;
}
.advising-cta-icons{
	font-size: 14px; 
	color: #000000;
}
.advising-cta-icon-color{
	color: #78be20;
}


/*====section 8 deans message ====*/
.message-container {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: auto;
}

.image-container {
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20px;
}

.dean-photo {
    width: 100%;
    height: auto;
    display: block;
}

.text-container {
    flex: 1;
}

h1 {
    color: #333;
    margin-bottom: 0.5em;
}

.text-container p {
    color: #666;
    line-height: 1.6;
}

.mission-link {
    display: inline-block;
    margin-top: 1em;
    text-decoration: none;
    color: #006837; /* Adjust the color to match the image */
    font-weight: bold;
}

.mission-link:hover {
    text-decoration: underline;
}

/* .card-content-custom {
    background-color: white;
} */

.td-class-departments{
	padding: 20;
}


	
/*End mobile and up styles*/
/* ====================== Mobile Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 100px) and (max-width: 500px) {
/* ----------------------- */
/*       header            */
/* ----------------------- */
.home-header-style{
	text-align: center;
    letter-spacing: 15px;
    text-transform: uppercase;
    font-size: 40px;
    padding: 0px 10px;
    font-weight: 600;
}
}
/* ====================== Tablet  (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 600px) and (max-width: 1050px){
/* ----------------------- */
/*       header              */
/* ----------------------- */
/*--- video --*/	
.hero-video .video-img {
    width: 100%;
}

.hero-video .video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 119%;
    padding-top: 59.50%;
    opacity: 0;
}

.hero-video .video-background iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -20%;
    left: 0;
}
.jumbo {
    position: relative;
    padding: 1px 20px;
    margin-top: 0;
    color: #fff;
    font-size: 150%;
}
/*--- header --*/	
.home-header-style{
	text-align: center;
    letter-spacing: 30px;
    text-transform: uppercase;
    font-size: 70px;
    padding: 0px 30px;
    font-weight: 800;
}
	
}

/*end media query*/
/*End desktop only styles*/
/*END OF DOCUMENT*/