/* ================================================
   Student Experience Page Styling
   ================================================ */
   
   
.block-system-main-block {
	background-color: #FFF;
}

.node--unpublished {
	background-color: #FFF;
}

/* ================================================
   Typography (font sizes, weight, line heights, colors)
   ================================================ */


h1 {
	color: var(--Primary-Beaver-Orange, #D73F09);
	font-size: 96px;
	font-weight: 900;
	line-height: 96%; /* 92.16px */
}

h2 {
	color: var(--Primary-Paddletail-Black, #000);
	font-size: 64px;
	font-weight: 900;
	line-height: 130%; /* 83.2px */
}

.yellow-heading h2 {
	color: var(--Secondary-Luminance, #FFB500);
}

.orange-heading h2 {
	color: var(--Primary-Beaver-Orange, #D73F09);
}

h3 {
	color: var(--Primary-Paddletail-Black, #000);
	font-size: 36px;
	font-weight: 900;
	line-height: 130%; /* 46.8px */
	font-family: "Stratum2Web", serif;
}


/* ================================================
   Quote block
   ================================================ */
   
   
.testimonal-quote {
  margin-left: 100px;
  position: relative;
  z-index: 1;
  margin-top: -100px;
  border: 3px solid #D73F09;
  background: #FFF;
  /*max-width: 480px; */
  width: calc(100% - 126px);
  padding: 50px 50px 30px;
}

.testimonal-quote img {
	display: block;
  margin-top: -70px;
}

.testimonal-image img {
	padding-right: 100px;
}

.quote-body {
	color: var(--Primary-Paddletail-Black, #000);
	font-size: 24px;
	font-style: italic;
	font-weight: 600;
	line-height: 130%; /* 31.2px */
}

.quote-by {
	color: var(--Primary-Paddletail-Black, #000);
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%;
	margin-top: 30px;
}

.author {
	color: var(--Primary-Beaver-Orange, #D73F09);
	font-weight: 700;
	letter-spacing: 0.9px;
	text-transform: uppercase;
}

/* ================================================
   Numbers block
   ================================================ */

.numbers-block {
	margin-top: 50px;
	display: flex;
	justify-content: center;
	gap: 130px;
}

.numbers-block h4{
	color: var(--Primary-Paddletail-Black, #000);
	font-family: Stratum2Web;
	font-size: 24px;
	font-weight: 900;
	line-height: 130%; /* 31.2px */
	letter-spacing: 1.2px;
	text-transform: uppercase;
	margin-top: 24px;
}

.numbers-block p{
	color: var(--Primary-Paddletail-Black, #000);
	font-size: 12px;
	font-style: italic;
	font-weight: 300;
	line-height: 130%; /* 15.6px */
}

.support-text {
	padding-left: 120px;
}



/* ================================================
   Mobile/Tablet
   ================================================ */
   
   
@media only screen and (max-width: 993px) and (min-width: 768px){
	.tpr-0 {
		padding-right: 0px !important;
	}
	
	.full-width {
		width: 100% !important;
	}
	
	h2 {
		font-size: 48px;
		line-height: 120%; /* 57.6px */
	}
	
	.numbers-block {
		gap: 50px;
	}
	
	.support-text {
		padding-left: 24px;
	}

	.hero {
		background-image: url('https://engineering.oregonstate.edu/sites/engineering.oregonstate.edu/files/2024-09/studentexperience-hero-pattern-tablet.svg') !important;
	}
	
	.osu-align-items-center {
		align-items: flex-start !important;
	}
	
	.student-experience-image img {
		float: none !important;
		width: 100% !important;
	}
	
	.button-container {
	  gap: 40px !important;
	}
}


@media only screen and (max-width: 768px) {
	.mpr-0 {
		padding-right: 0px !important;
	}
	
	.mmb-165 {
		padding-bottom: 165px !important;
	}
	
	.full-width {
		width: 100% !important;
	}
	
	h1 {
		font-size: 56px;
		line-height: 120%; /* 67.2px */
	}
	
	h2 {
		font-size: 44px;
		line-height: 120%; /* 52.8px */
	}
	
	.numbers-block {
		flex-direction: column;
		gap: 60px;
	}
	
	.support-text {
		padding-left: 12px;
	}
	
	.numbers-block h2 {
		font-size: 64px;
		line-height: 130%;
	}
	
	.testimonal-quote {
	  padding: 40px 40px 30px;
    width: calc(100% - 26px);
    margin-left: 13px;
    margin-top: -30px;
	}
	
	.next-steps {
    background-image: url('https://engineering.oregonstate.edu/sites/engineering.oregonstate.edu/files/2024-09/pattern.svg') !important;
    background-position: bottom !important;
	}
	
	.hero {
		background-image: url('https://engineering.oregonstate.edu/sites/engineering.oregonstate.edu/files/2024-09/studentexperience-hero-pattern-mobile.svg') !important;
	}
	
	.discover {
    background-image: url('https://engineering.oregonstate.edu/sites/engineering.oregonstate.edu/files/2024-09/discoverpath-bg-mobile%20%282%29.svg') !important;
	}
	.button-container {
	  gap: 40px !important;
	}
	
	.quote-body {
		font-size: 20px;
	}
	
	.testimonal-quote img {
		float: right;
	}
	
	.testimonal-image img {
		padding-right: 0px !important;
	}
	
	.community {
		background-image: url('https://engineering.oregonstate.edu/sites/engineering.oregonstate.edu/files/2024-09/bg_0.svg') !important;
	}
	
 .student-experience-image img {
		float: left !important;
	  width: calc(100% - 15px) !important;
	} 
	
	.engineering-image img {
		width: calc(100% - 15px) !important;
	}
	
	.support-image img {
		width: calc(100% - 15px);
		float: right;
		margin-bottom: 60px;
	}
}

/* ================================================
   Buttons/Links
   ================================================ */
   
   
.button-container {
	display: flex;
  gap: 20px;
  flex-wrap: wrap;
}   
   
/* Code for black/yellow outline button */

.osu-btn-black-yellow-2{
	background: #000;
  color: #FFB500;
  border: 3px solid #FFB500 !important;
  width: 100%;
  font-weight: 600 !important;
  letter-spacing: 1px;
  height: 60px;
  border-radius: 0;
  padding-top: 12px;
  text-transform: uppercase;
}

.osu-btn-black-yellow-2:hover{
	font-weight: 600 !important;
	background: #FFB500;
	border: 3px solid #FFB500 !important;
	color: #000;
	letter-spacing: 1px;
}

.osu-btn-orange-2{
	background: #D73F09;
  color: #FFF;
  border: 2px solid #D73F09 !important;
  width: 100%;
  font-weight: 600 !important;
  letter-spacing: 0.9px;
  height: 60px;
  border-radius: 0;
  padding-top: 12px;
  padding-left: 13px;
  padding-right: 13px;
  text-transform: uppercase;
}

.osu-btn-orange-2:hover{
	font-weight: 600 !important;
	background: #FFF;
	border: 2px solid #D73F09 !important;
	color: #D73F09;
	letter-spacing: 0.9px;
}

.osu-btn-white-2{
	background: white;
  color: #000;
  border: 2px solid #000 !important;
  width: 100%;
  font-weight: 600 !important;
  letter-spacing: 0.9px;
  height: 60px;
  border-radius: 0;
  padding-top: 12px;
  text-transform: uppercase;
}

.osu-btn-white-2:hover{
	font-weight: 600 !important;
	background: #000;
	border: 2px solid #000 !important;
	color: white;
	letter-spacing: 0.9px;
}

.osu-btn-yellow-2{
	background: #FFB500;
  color: #000;
  border: 2px solid #FFB500 !important;
  width: 100%;
  font-weight: 600 !important;
  letter-spacing: 0.9px;
  height: 60px;
  border-radius: 0;
  padding-top: 12px;
  text-transform: uppercase;
}

.osu-btn-yellow-2:hover{
	font-weight: 600 !important;
	background: #000;
	border: 2px solid #FFB500 !important;
	color: #FFB500;
	letter-spacing: 0.9px;
}

/* Default link (orange) */

.RSVP-Link{
	color: #D73F09;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
	letter-spacing: 1px;
	text-transform: uppercase;
	background-image: url(/modules/custom/osu_custom_blocks/dist/arrow-right-red.c4e9b645.svg);
	background-position: 100%;
	background-repeat: no-repeat;
	background-size: 17px;
	padding-right: 27px;
	font-family: Stratum2Web;
	text-decoration: none;  
	transition: 0.1s ease;
}

.RSVP-Link:hover{
	padding-right: 40px;  
	transition: 0.1s ease;
}

.RSVP-Link.yellow-link {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="41" height="33" viewBox="0 0 41 33" fill="none"><path d="M2 16.5H33.5" stroke="%23FFB500" stroke-width="4" stroke-linecap="square" stroke-linejoin="round"/><path d="M24.5 30L38 16.5L24.5 3" stroke="%23FFB500" stroke-width="4" stroke-linecap="square"/></svg>') !important;
	color: #FFB500 !important;
}

.next-steps {
	border-bottom: 10px solid var(--Secondary-Luminance, #FFB500);
}

 .student-experience-image img {
	float: right;
  width: 83%;
}