/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

body{
  font-size:clamp(14px, 1vw, 16px);
  line-height:1.5;
  font-family: "Work Sans", sans-serif;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
  font-family: "Oswald", sans-serif;
  text-transform:uppercase;
  font-weight:500!important;
}

h1, .h1 {
  font-size: clamp(3rem, 5vw, 5rem)!important;
  line-height: 1.2!important;
}

h2, .h2 {
  font-size: clamp(2.75rem, 4.5vw, 4.5rem)!important;
  line-height: 1.2!important;
}

h3, .h3 {
  font-size: clamp(1.75rem, 2.25vw, 2.25rem)!important;
  line-height: 1.2!important;
}

.subtitle{
  display:inline-block;
  font-family: "Roboto Mono", monospace;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:2px;
  color:#57150B;
}

.badge{
  font-family: "Roboto Mono", monospace;
  text-transform:uppercase;
  letter-spacing:1px;
}

.bg-yellow{
  background-color:#FFF200; 
}

.bg-brown{
  background-color:#57150B;
}

.bg-gray{
  background-color:#F6F4F2;
}

.bg-light-gray{
  background-color:#FAFAFA;
}

.text-yellow, .text-yellow *{
  color:#FFF200;
}

.text-brown, .text-brown *{
  color:#57150B;
}

.btn{
  font-family: "Roboto Mono", monospace;
  font-size:.9rem;
  letter-spacing:1px;
  padding:1rem 2rem;
  text-transform:uppercase;
  border-radius:0;
}

.btn-yellow{
  background:#FFF200;
  border:1px solid #FFF200;
  color:#57150B;
}

.btn-yellow:hover{
  border:1px solid #FFF200;
  background:transparent;
  color:#FFF200;
}

.btn-brown{
  background:#57150B;
  border:1px solid #57150B;
  color:#FFF200;
}

.btn-brown:hover{
  border:1px solid #57150B;
  background:transparent;
  color:#57150B;
}

.btn-brown-text{
  background:transparent;
  border:0;
  color:#57150B;
}

.btn-brown-text:hover{
  color:#F24F14;
}

.btn-brown-outline{
  background:transparent;
  border:2px solid #57150B;
  color:#57150B;
}

.btn-brown-outline:hover{
  border:2px solid #57150B;
  background:#57150B;
  color:#FFF200;
}

.filter-btn{
  border:1px solid #57150B;
  background:transparent;
  color:#57150B;
  padding:.5rem 1rem;
}

.filter-btn:hover,
.filter-btn.active{
  border:1px solid #57150B;
  background:#57150B;
  color:#FFF200;
}

iframe{
  width:100%!important;
}

.hero{
  max-height:740px;
  min-height:50vh;
  padding-top:50px;
  padding-bottom:50px;
  position:relative;
}

.hero .content-text{
  position:relative;
  z-index:10;
}

.hero:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  background:url(https://explore.rowan.edu/hubfs/raw_assets/public/Rowan/assets/hero-brown-bg.svg);
  background-size:cover;
  background-position:center right;
  background-repeat: no-repeat;
  z-index: 0;
  height:100%;
  width:51vw;
  display:block;
}

.card.feature-card {}
.feature-card .card-image{
  height:50%;
  max-height:275px;
  overflow:hidden;
}

.feature-card .card-image img{
  object-fit:cover;
}

.features i.fa{
  font-size:clamp(36px, 3vw, 52px);
}

h3.program-title {
  font-size:20px;
  font-weight:700;
}

.terms-block{}

.terms-heading{
  font-weight:300;
  font-family: "Roboto Mono", monospace;
  font-size:.8rem;
  letter-spacing:1px;
}
.term-name{
  font-weight:700;
}
.term-deadline{

  font-weight:300;
}

.testimonial-section{
  background-image:url(https://explore.rowan.edu/hubfs/raw_assets/public/Rowan/assets/yellow-texture-bg.jpg);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.testimonial-quote{
  font-size:clamp(24px, 3vw, 32px);
  line-height:1.4;
}

.cta-section{
  background-image:url(https://explore.rowan.edu/hubfs/raw_assets/public/Rowan/assets/brown-yellow-accent-bg.jpg);
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}


/*ONLINE PROGRAMS */
.application_deadline{}
.application_deadline_dates{}
.application_deadline_dates .month{
  font-size:clamp(20px, 1.2vw, 24px);
  font-family:'Oswald';
  text-transform:uppercase;
  font-weight:600;
}
.application_deadline_dates .day{
  font-size:clamp(40px, 1.2vw, 56px);
  font-family:'Oswald';
  font-weight:600;
}
.application_deadline_dates .year{
  font-size:14px
  font-family:'Oswald';
  font-weight:600;
}

/* FORM*/
#requestinfo {
    max-width: 500px;
    margin-left: auto;
}

.rowan-form,
.rowan-form * {
    box-sizing: border-box;
}

.rowan-form {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
    background: #fff200 !important;
    color: #57150B !important;
    padding: 26px 26px 28px !important;
    text-align: left !important;
}

.rowan-form h2 {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #57150B !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-family: inherit !important;
}

.rowan-form-field {
    margin-bottom: 12px !important;
}

.rowan-form-field label {
    display: block !important;
    font-size: 13px !important;
    color: #57150B !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.rowan-form-field .req {
    color: #57150B !important;
    margin-left: 2px !important;
}

.rowan-form-field input,
.rowan-form-field select {
    width: 100% !important;
    padding: 14px 14px !important;
    font-size: 15px !important;
    border: 1px solid rgba(87, 21, 11, 0.25) !important;
    background: #fff !important;
    color: #1f1f1f !important;
    border-radius: 4px !important;
    appearance: none !important;
    font-family: inherit !important;
    line-height: normal !important;
}

.rowan-form-field input:focus,
.rowan-form-field select:focus {
    outline: 2px solid #57150B !important;
    outline-offset: -2px !important;
    border-color: #57150B !important;
}

/* Placeholder gray for text inputs */
.rowan-form-field input::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* Gray text when the placeholder option is selected (empty value) */
.rowan-form-field select:invalid,
.rowan-form-field select:has(option[value=""]:checked) {
    color: #999 !important;
}

.rowan-form-field select option {
    color: #1f1f1f !important;
}

.rowan-form-field select option[value=""] {
    color: #999 !important;
}

.rowan-form-field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2357150B' d='M6 8L0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
}

.rowan-form-field.error input,
.rowan-form-field.error select {
    border-color: #b00020 !important;
    outline-color: #b00020 !important;
}

.rowan-form-field .err-msg {
    color: #b00020 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    min-height: 14px !important;
}

.rowan-form-fieldset-label {
    display: block !important;
    font-size: 13px !important;
    color: #57150B !important;
    font-weight: 600 !important;
    margin: 4px 0 6px !important;
    text-transform: none !important;
    text-align: left !important;
}

.rowan-form-radio {
    display: flex !important;
    gap: 18px !important;
    margin-top: 4px !important;
}

.rowan-form-radio label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    color: #57150B !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

.rowan-form-radio input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    border: 2px solid #57150B !important;
    border-radius: 50% !important;
    background: #fff !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    flex: 0 0 18px !important;
}

.rowan-form-radio input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 8px !important;
    height: 8px !important;
    background: #57150B !important;
    border-radius: 50% !important;
}

.rowan-form-radio input[type="radio"]:focus {
    outline: 2px solid #57150B !important;
    outline-offset: 2px !important;
}

.rowan-form-progress {
    height: 6px !important;
    background: rgba(87, 21, 11, 0.22) !important;
    border-radius: 3px !important;
    overflow: hidden !important;
    margin: 6px 0 10px !important;
}

.rowan-form-progress-bar {
    height: 100% !important;
    background: #57150B !important;
    transition: width 0.3s !important;
}

.rowan-form-step-label {
    font-size: 12px !important;
    color: #57150B !important;
    margin-bottom: 4px !important;
    font-weight: 700 !important;
}

.rowan-form-actions {
    margin-top: 18px !important;
    display: flex !important;
    gap: 10px !important;
}

.rowan-form-btn {
    background: #57150B !important;
    color: #fff200 !important;
    border: 0 !important;
    padding: 13px 26px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    font-family: inherit !important;
    line-height: 1 !important;
}

.rowan-form-btn:hover {
    background: #6e1c10 !important;
}

.rowan-form-btn[disabled] {
    opacity: 0.6 !important;
    cursor: default !important;
}

.rowan-form-btn.secondary {
    background: transparent !important;
    color: #57150B !important;
    border: 1px solid #57150B !important;
}

.rowan-form-success {
    color: #57150B !important;
    font-size: 15px !important;
    padding: 4px 0 !important;
}

.rowan-form-success h2 {
    margin-bottom: 8px !important;
}

.rowan-form-error-banner {
    background: #fee !important;
    color: #b00020 !important;
    padding: 10px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    margin-bottom: 12px !important;
}

.rowan-form-spinner {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important;
    border: 2px solid rgba(255, 242, 0, 0.4) !important;
    border-top-color: #fff200 !important;
    border-radius: 50% !important;
    animation: rowan-spin 0.7s linear infinite !important;
    vertical-align: -2px !important;
}

@keyframes rowan-spin {
    to {
        transform: rotate(360deg);
    }
}




@media (max-width:768px){
  .hero{
    max-height:100%;
    min-height:50vh;
    padding-top:20px;
    padding-bottom:20px;
    position:relative;
    background-color:#57150B!important;
    background-image:none!important;
  }
  
  .hero:before{
    content:'';
    position:absolute;
    left:0;
    top:unset;
    bottom:0;
    background:url(https://explore.rowan.edu/hubfs/raw_assets/public/Rowan/assets/hero-brown-bg-mobile.svg);
    background-size:cover;
    background-position:center top;
    background-repeat: no-repeat;
    z-index: 0;
    height:65vh;
    width:100%;
    display:block;   
  }
  
  #requestinfo{
    max-width: 100%;
    margin: auto 0;
    position:relative;
    z-index:10;
  }
  
  .card.feature-card {
    min-height:150px;
  }
}



@media (min-width:1600px){
  .container-fluid > .row{
    max-width:1550px;
    margin:0 auto;
  }
}