:root {
    --menu-gray: #d9d9d9;
}

.viterbo-major .major-top {
    height: 350px;
    margin: 0;
    overflow: hidden;
}

.viterbo-major .panel-oedu-1col {
    position: relative;
    width: 100%;
}

/* Left-side title block remains floated left */
.viterbo-major .field--name-node-title {
    color: var(--primary-navy);
    padding: 2.5em 0 0 2.5em;
    width: 45%;
    float: left;
}
.viterbo-major .field--name-node-title h1 {
    font-size: 2.5rem;
}
/* Right-side image container: remove float, use absolute positioning to center vertically */
.viterbo-major .field--name-field-major-title-round-image {
    width: 50%;
    /* Absolutely position the container so we can center the image vertically */
    position: absolute;
    top: 50%;
    right: 1em;              /* Adjust as needed to move image horizontally */
    transform: translateY(-50%);
}

.viterbo-major .field--name-field-major-title-round-image img {
    position: relative;
    background-color: var(--menu-gray);
    width: 550px;
    height: 550px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: -8px 8px 15px rgba(0, 0, 0, 0.8);
    border: 13px solid var(--white);
    object-fit: cover;
}
.viterbo-major .field--name-field-major-background-title-ima {
    z-index: -100;
    width: 100%;
    max-height: 350px;
    position: absolute;
    overflow: hidden; 
}
.viterbo-major .field--name-field-major-background-title-ima img {
    width: 100%;
}
.viterbo-major .field--name-field-major-tagline {
    color: var(--primary-navy);
    float: left;
    font-size: 1.25rem;
    width: 42%;
    margin-left: 2.25em;
    clear: both;
}
.viterbo-major .major-stats {
    background-color:var(--primary-navy);
    color: var(--white);
    font-size: 1.05em;
    line-height: 1.25em;
    text-align: center;
    width: 100%;
    margin: 0 0 1em 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: baseline;
}
.viterbo-major .major-stats .col-sm-3 img {
    margin-bottom: .5em;
}
.viterbo-major .major-stats .panel-oedu-2col {
    align-content: center;
    margin: 1em;
}

.viterbo-major .col-sm-4 {
    flex: 0 0 30.333333%;
    max-width: 30.333333%;
}

.viterbo-major .col-sm-8 {
    flex: 0 0 69.333333%;
    max-width: 69.333333%;
}

.viterbo-major .panel-panel .gray {
    background-color: var(--menu-gray);
}
.viterbo-major .panel-panel .view-dept-menu {
    margin: 0;
    padding: 5% 5% 0 5%;
    background-color: var(--menu-gray);
    color: var(--primary-navy);
    border: none;
}
.viterbo-major .panel-panel .view-dept-menu ul,
.viterbo-major .panel-panel .field--name-field-major-menu ul {
    list-style: none;
    margin-bottom: 0;
    padding: 0;
}
.viterbo-major .row {
    margin-right: 0;
    margin-left: 0;
}
.viterbo-major .major-content .col-sm-4 .panel-panel .view-dept-menu ul li,
.viterbo-major .major-content .col-sm-4 .panel-panel .field--name-field-major-menu ul li,
.viterbo-major .major-content .col-sm-4 .panel-panel .field--name-field-major-menu p {
    margin: unset;
    padding: unset;
    line-height: unset;
}
.viterbo-major .major-content .col-sm-4 .panel-panel .field--name-field-major-menu .field--name-field-text p {
    margin: 0;
}
.viterbo-major .panel-panel .view-dept-menu a,
.viterbo-major .panel-panel .field--name-field-major-menu a {
    color: #343a40;
}
.viterbo-major .panel-panel .view-dept-menu a:hover,
.viterbo-major .panel-panel .field--name-field-major-menu a:hover {
    color: #a51d37;
    text-decoration: none;
}


.viterbo-major .panel-panel .views-element-container {
    padding: 0;
}
.viterbo-major .panel-panel .field--name-field-major-menu {
    margin-bottom: 2em;
    padding: 0 5% 5% 5%;
    background-color: var(--menu-gray);
    color: #343a40;
    border: none;
}
.viterbo-major .panel-panel .field--name-field-major-menu h3 {
    color: var(--primary-navy);
}

.viterbo-major .panel-panel .paragraph--type--buttons .field--item {
    display: block;
    width: 225px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
    font-family: "RobotoSlab", Georgia, Times, "Times New Roman", serif;
    font-size: 1.5em;
}
.viterbo-major .panel-panel .paragraph--type--buttons .field--item a {
    padding: 0 0 0 0;
}

.viterbo-major .col-sm-8 .paragraph--type--text {
    margin-bottom: 1em;
}
.viterbo-major .panel-panel .paragraph--type--accordion {
    padding-top: 0;
}
.viterbo-major .panel-panel .paragraph--type--accordion .field--item {
    margin-top: -2px;
    background: var(--white);
    color: var(--primary-navy);
    border-radius: 0;
    border-top: 2px solid var(--primary-navy);
    border-bottom: 2px solid var(--primary-navy);
    box-shadow: unset;
}
.viterbo-major .section.container {
    padding: 0 10% 5% 0;
}
.viterbo-major h2 {
    font-size: 1.8rem;
    margin-bottom: .25rem;
}
.viterbo-major h3 {
    margin-top: .5rem;
    font-size: 1.5rem;
}
.viterbo-major h5 {
    margin-top: .5rem;
    font-size: 1.5rem;
}
.viterbo-major blockquote .italic,
.viterbo-major blockquote p {
    font-weight: 200;
}
.viterbo-major blockquote .text-align-right {
    font-size: .8em;
}
.viterbo-major .field--name-field-stories-title {
    display: none;
}
.viterbo-major .major-content .field--name-field-major-paragraph .field--name-field-text .video-embed-field-provider-youtube h2 {
    margin-bottom: 1em;
}

/* 
breakpoint-sm: 576px;
breakpoint-md: 768px;
breakpoint-lg: 992px;
breakpoint-xl: 1200px;
*/

@media (min-width: 992px) {
    .viterbo-major .major-top {
        margin: .5em 0;
        height: 325px;
    }
    .viterbo-major .field--name-field-major-title-round-image img {
        width: 500px;
        height: 500px;
    }
    .viterbo-major .major-content .col-sm-4 .panel-panel .field--name-field-major-menu a {
        line-height: 1em;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .viterbo-major .major-top {
        margin: .5em 0;
        height: 245px;
    }
    .viterbo-major .field--name-node-title {
        padding: 1em 0 0 1em;
        width: 57%;
    }
    .viterbo-major .field--name-node-title h1 {
        font-size: 2rem;
    }
    .viterbo-major .field--name-field-major-tagline {
        font-size: 1rem;
    }
    .viterbo-major .field--name-field-major-title-round-image {
        width: 40%;
    }
    .viterbo-major .field--name-field-major-title-round-image img {
        position: relative;
        background-color: var(--menu-gray);
        width: 295px;
        height: 295px;
        box-shadow: -8px 8px 10px rgba(0, 0, 0, 0.8);
    }
    .viterbo-major .major-content .col-sm-4 .panel-panel h3,
    .viterbo-major .major-content .col-sm-4 .panel-panel h5 {
        font-size: 1rem;
    }
    .viterbo-major .major-content .col-sm-4 .panel-panel h3 {
        margin-bottom: .1em;
    }
    .viterbo-major .major-content .col-sm-4 .panel-panel h5 {
        margin-top: .8rem;
        margin-bottom: .1em;
    }
    .viterbo-major .major-content .col-sm-4 .panel-panel .view-dept-menu ul li,
    .viterbo-major .major-content .col-sm-4 .panel-panel .field--name-field-major-menu ul li,
    .viterbo-major .major-content .col-sm-4 .panel-panel .field--name-field-major-menu p {
        line-height: 1em;
        margin: 0;
        padding: .2em;
        font-size: .8em;
    }
}

@media (min-width: 577px) and (max-width: 767px) {
    .viterbo-major.container { 
        padding: 0;
    }
    .viterbo-major .major-top {
        height: auto;
        width: 100%;
        margin: .5em 0;
        overflow: hidden; 
    }
    .viterbo-major .panel-oedu-1col {
        position: relative;
        height: 100%;
        width: 100%;
        overflow: hidden; 
    }
    .viterbo-major .major-top .panel-oedu-1col img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center; 
    }
    .viterbo-major .field--name-field-major-background-title-ima {
        width: 100%;
        height: 100%; 
    }
    .viterbo-major .field--name-field-major-title-round-image {
        display: none; 
    }
    .viterbo-major .field--name-node-title {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .viterbo-major .field--name-field-major-tagline {
        width: 80%;
        margin-bottom: 2rem;
        text-align: center; 
    }
    .viterbo-major .major-stats {
        font-size: .90em;
        line-height: 1rem;
    }
    .viterbo-major .major-stats .col-sm-3 {
        padding: 0;
    }
    .viterbo-major .major-stats .col-sm-3 img {
        margin-bottom: unset;
    }
    .viterbo-major .major-stats .field--name-field-major-stat-left-text,
    .viterbo-major .major-stats .field--name-field-major-stat-middle-text,
    .viterbo-major .major-stats .field--name-field-major-stat-right-text {
        margin-top: 0.75rem;
    }
    .viterbo-major .col-sm-4 {
        flex: unset;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        order: 2;
    }
    .viterbo-major .col-sm-8 {
        flex: unset;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        order: 1;
    }
}

@media (max-width: 576px) {
    .viterbo-major.container { 
        padding: 0;
    }
    .viterbo-major .major-top {
        height: auto;
        width: 100%;
    }
    .viterbo-major .panel-oedu-1col {
        height: 100%;
        overflow: hidden; 
    }
    .viterbo-major .major-top .panel-oedu-1col img {
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left center; 
    }
    .viterbo-major .field--name-field-major-background-title-ima {
        height: 100%; 
    }
    .viterbo-major .field--name-field-major-title-round-image {
        display: none; 
    }
    .viterbo-major .field--name-node-title {
        display: block;
        width: 100%;
        padding: 1em 0 0 0;
        text-align: center;
    }
    .viterbo-major .field--name-field-major-tagline {
        display: block;
        width: 100%;
        margin: 0 0 2em 0;
        text-align: center; 
    }
    .viterbo-major .major-stats {
        width: 100%;
        font-size: 1.25em;
        line-height: 2rem;
    }
    .viterbo-major .major-stats .col-sm-3 img {
        margin-bottom: 0;
        width: 30%;
        height: auto;
    }
    .viterbo-major .major-stats .field--name-field-major-stat-left-text,
    .viterbo-major .major-stats .field--name-field-major-stat-middle-text,
    .viterbo-major .major-stats .field--name-field-major-stat-right-text {
        margin-top: 0;
    }
    .viterbo-major .col-sm-4 {
        flex: unset;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        order: 2;
    }
    .viterbo-major .col-sm-8 {
        flex: unset;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        order: 1;
    }
}



.panel-oedu-myvu .block-region-left-col {
    margin-bottom: 1em;
    padding: 0px !important;
}
.panel-oedu-myvu .block-region-left-col ul.nav.myvu-menu {
    margin: 10px 5px;
    padding: 0px;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}
.panel-oedu-myvu .block-region-left-col ul.nav.myvu-menu li {
    margin: 5px;
    display: list-item;
    flex: none !important;
}
.panel-oedu-myvu .block-region-left-col ul.nav.myvu-menu li a {
    height: 100px;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: white;
    background-color: #a51d37;
    font-size: 1em;
    text-decoration: none;
    text-align: center; 
    border-radius: 10px;
    box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.8);
}
.panel-oedu-myvu .block-region-left-col ul.nav.myvu-menu li a.active {
    color: white;
    font-weight: 700;
    background: #7b3844;
}
.panel-oedu-myvu .block-region-left-col ul.nav.myvu-menu li a:hover, .panel-oedu-myvu .block-region-left-col ul.nav.myvu-menu li a:focus {
    color: white;
    background: #7b3844;
    font-size: 0.9em;
    padding: 15px;
    box-shadow: none;
}
.panel-oedu-myvu .block-region-left-col ul.nav.myvu-menu li a i {
    display: block;
    text-align: center;
    font-size: 34px;
    padding-bottom: 6px;
}



.panel-oedu-1col:not(.subsection) .block {
    margin-top: 0;
    padding: 0;
    background-color: var(--white);
}


/* Sizing for stat blocks on landing pages. */
.paragraph--type--grid-content .field--name-field-body .openedu-stat {
    font-size: 3rem;
}
.paragraph--type--grid-content .field--name-field-body .text-align-center {
    font-size: 1.15rem;
}


/* Viterbo 30-70 & Viterbo One Col */
/* Base Style for Viterbo 30-70 & Viterbo One Col */
.viterbo-30-70 .left-content .gray .view-dept-menu.view-display-id-block_1 {
    background-color: var(--menu-gray);
    padding: 5% 5% 0 5%;
    border: none;
}
.viterbo-30-70 .panel-oedu-1col,
.viterbo-one-col .panel-oedu-1col {
    position: relative;
    width: 100%;
}
.viterbo-30-70 .row-page-top,
.viterbo-one-col .row-top {
    width: 100%;
    background: url(../images/BackgroundArchway.jpg) no-repeat;
    background-size: cover;
    margin: .5em 0;
    padding: 1.5rem 1rem 1.5rem 1rem;
    border-bottom: 3px solid var(--primary-navy);
    color: var(--primary-navy);
}
.viterbo-30-70 .row-page-top h1,
.viterbo-one-col .row-top h1 {
    width: 100%;
    font-size: 2.5rem;
    color: var(--primary-navy);
}
.viterbo-30-70 .row-content {
    display: flex;
    flex-direction: column;
}
.viterbo-30-70 .row-content h2 {
    margin-bottom: .5em;
    font-size: 1.8rem;
}
.viterbo-30-70 .row-content h3,
.viterbo-30-70 .row-content .left-content .gray .block-related #wb_menu_title {
    margin-top: .5em;
    font-size: 1.5rem;
}
.viterbo-30-70 .row-content h5 {
    margin-top: .5rem;
    font-size: 1.5rem;
}
.viterbo-30-70 .row-content .left-content {
    order: 2;
    width: 100%;
    margin: 0 auto;
    padding: .5em;
}
.viterbo-30-70 .row-content .left-content .gray {
    background-color: var(--menu-gray);
}

.viterbo-30-70 .row-content .left-content .gray .view .view-header h3,
.viterbo-30-70 .row-content .left-content .gray .field h3,
.viterbo-30-70 .row-content .left-content .gray .block-related #wb_menu_title {
    color: var(--primary-navy);
}
.viterbo-30-70 .row-content .left-content .gray .view-dept-menu ul,
.viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-menu ul,
.viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph ul {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}
.viterbo-30-70 .row-content .left-content .gray .view-dept-menu ul li,
.viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-menu ul li,
.viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-menu p,
.viterbo-30-70 .row-content .left-content .gray .block-related ul li {
    margin: unset;
    padding: unset;
    line-height: unset;
}
.viterbo-30-70 .left-content .gray .field--name-field-basic-page-menu p,
.viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph p {
    margin: 0;
}
.viterbo-30-70 .row-content .left-content .gray .view-dept-menu ul li a,
.viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph a,
.viterbo-30-70 .row-content .left-content .gray .block-related ul li a {
    color: #343a40;
}
.viterbo-30-70 .left-content .gray .field--name-field-basic-page-menu a,
.viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph a {
    color: #343a40;
}
.viterbo-30-70 .left-content .gray .field--name-field-basic-page-menu a:hover,
.viterbo-30-70 .row-content .left-content .gray .view-dept-menu ul li a:hover,
.viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph a:hover,
.viterbo-30-70 .row-content .left-content .gray .block-related ul li a:hover {
    color: #a51d37;
    text-decoration: none;
}
.viterbo-30-70 .left-content .gray .views-element-container {
    padding: 0;
}
.viterbo-30-70 .left-content .gray .field--name-field-basic-page-menu,
.viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph,
.viterbo-30-70 .row-content .left-content .gray .block-related {
    margin-bottom: 0;
    padding: 0 5% 0 5%;
    background-color: var(--menu-gray);
    color: #343a40;
    border: none;
}
.viterbo-30-70 .row-content .left-content .gray .block-related {
    padding-bottom: 1em;
}
.viterbo-30-70 .row-content .right-content {
    order: 1;
    width: 100%;
    margin: 0 auto;
    padding: .5em;
}


/* Small devices (576px and up) */
@media (min-width: 576px) {
    .viterbo-30-70,
    .viterbo-one-col .viterbo-one-col-content {
        max-width: 540px;
        margin: 0 auto;
    }
    .viterbo-one-col .viterbo-one-col-content {
        font-size: 1.1rem;
    }
}
/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .viterbo-30-70,
    .viterbo-one-col .viterbo-one-col-content {
        max-width: 720px;
    }
    .viterbo-30-70 .row-content {
        flex-direction: row;
    }
    .viterbo-30-70 .row-content .left-content {
        order: 1;
        max-width: 30.333333%;
        padding: 10px 10px 10px 0;
    }
    .viterbo-30-70 .row-content .right-content {
        order: 2;
        max-width: 69.333333%;
        padding: 10px;
    }
    .viterbo-30-70 .row-content .left-content .gray .view-dept-menu ul li,
    .viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-menu ul li,
    .viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-menu p,
    .viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph ul li,
    .viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph p,
    .viterbo-30-70 .row-content .left-content .gray .block-related ul li {
        line-height: 1em;
        margin: 0;
        padding: .2em;
        font-size: .8em;
    }
}
/* Large devices (992px and up) */
@media (min-width: 992px) {
    .viterbo-30-70,
    .viterbo-one-col {
        max-width: 960px;
    }
    .viterbo-30-70 .row-content .left-content .gray .view-dept-menu ul li,
    .viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-menu ul li,
    .viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-menu p,
    .viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph ul li,
    .viterbo-30-70 .row-content .left-content .gray .field--name-field-basic-page-paragraph p,
    .viterbo-30-70 .row-content .left-content .gray .block-related ul li {
        font-size: 1em;
    }
}
/* X-Large devices (1200x and up) */
@media (min-width: 1200px) {
    .viterbo-30-70,
    .viterbo-one-col {
        max-width: 1140px;
    }
}

/*--------------------------------------------------------------
# Card - Hero Video
--------------------------------------------------------------*/
.col-sm-12 {
    padding: 0;
}
.landing-card-hero-video {
  padding: 0;
  position: relative;
}

.landing-card-hero-video .content {
  position: relative;
}

.landing-card-hero-video .hero-video-container {
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.landing-card-hero-video .field--name-field-media-video-file {
  display: flex;
  align-items: center;
  justify-content: center;
}

.landing-card-hero-video video {
    width: 100%;
    height: 70vh;
    object-fit: cover;
}
/* Text overlay container */
.landing-card-hero-video .hero-video-text-content {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 90%;
  text-align: center;
  z-index: 10;
  color: white;
}
/* Heading styles */
.landing-card-hero-video .field--name-field-card-heading {
  margin-bottom: 1rem;
}

/* Subtitle styles */
.landing-card-hero-video .field--name-field-card-heading {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 700;
  margin: 0 0 2em 0;
  text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
  opacity: 0;
  transform: translateY(30px);
  animation: slideInFromBelow 1.2s ease-out 1s forwards;
}
.landing-card-hero-video .field--name-field-card-subtitle {
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 400;
  margin: 0;
  text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
  opacity: 0;
  transform: translateY(30px);
  animation: slideInFromBelow 1.2s ease-out 1s forwards;
}
/* CTA styles */
.landing-card-hero-video .field--name-field-card-cta {
  opacity: 0;
  transform: translateY(30px);
  animation: slideInFromBelow 1.2s ease-out 1.5s forwards;
}
.landing-card-hero-video .field--name-field-card-cta a {
  display: inline-block;
  padding: 1em 2em;
  background-color: #f1aa1e;
  color: #00344b;
  text-decoration: none;
  font-size: 1em;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.3s ease;
  text-shadow: none;
}
.landing-card-hero-video .field--name-field-card-cta a:hover {
  background-color: #e09a0e;
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* Animation keyframes */
@keyframes slideInFromBelow {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Small devices (576px and up) 
@media (min-width: 576px) {
    .landing-card-hero-video {
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
}*/
/* Medium devices (768px and up) - Side by side layout 
@media (min-width: 768px) {
    .landing-card-hero-video {
        max-width: 720px;
    }
}
/* Large devices (992px and up)
@media (min-width: 992px) {
    .landing-card-hero-video {
        max-width: 960px;
    }
}*/
/* X-Large devices (1200x and up) 
@media (min-width: 1200px) {
    .landing-card-hero-video {
        max-width: 1140px;
    }
}*/

.landing-card-image-right h2,
.landing-card-three-boxes h2 {
    font-size: 2rem;
    color: #00344b;
}
.landing-card-image-right h3,
.landing-card-three-circles h3,
.landing-card-three-boxes h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #f1aa1e;
}
.landing-card-three-boxes h5 {
    margin-bottom: 1rem;
}

/*--------------------------------------------------------------
# Card - Image Right with rotating background.
--------------------------------------------------------------*/
.landing-card-image-right {
    display: block;
    width: 100%;
    height: auto;
    margin: 1rem auto 2rem auto;
    padding: 10px;
    background-color: var(--white);
}
.landing-card-image-right .content {
    width: 100%;
    margin: 0 auto;
}
.field--name-field-card-image {
  position: relative;
  display: inline-block;
  margin: 1rem;
}
.landing-card-image-right img {
    display: block !important;
    max-width: 100%;
    width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5px;
    transition: transform 0.1s ease-out; /* Smooth transition for any image transforms */
    position: relative;
    z-index: 2;
}
.field--name-field-card-image::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 10px;
  right: 10px;
  bottom: -3px;
  background-color: #00344b;
  /* Use CSS custom property for dynamic rotation */
  transform: rotate(var(--scroll-rotation));
  z-index: 1;
  border-radius: 5px;
  transition: transform 0.1s ease-out; /* Smooth rotation transition */
}
.landing-card-image-right .field--name-field-card-heading,
.field--name-field-card-subtitle,
.field--name-field-card-text,
.field--name-field-card-link {
    width: 100%;
    margin: 0 auto;
}
.landing-card-image-right .card-text p {
  color: black;
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 1.3rem;
}

/* Small devices (576px and up) */
@media (min-width: 576px) {
    .landing-card-image-right {
        max-width: 540px;
    }
}

/* Medium devices (768px and up) - Side by side layout */
@media (min-width: 768px) {
    .landing-card-image-right {
        max-width: 720px;
        margin-bottom: 3em;
    }
    
    .landing-card-image-right .content {
        display: flex;
        align-items: center;
        gap: 2rem;
        height: auto;
    }
    
    /* Left side: Image */
    .landing-card-image-right .image-content {
        flex: 0 0 40%;
        order: 1;
    }
    
    /* Right side: Text content */
    .landing-card-image-right .text {
        flex: 1;
        order: 2;
    }
    
    /* Reset image styling for two-column layout */
    .landing-card-image-right .field--name-field-card-image {
        margin: 0;
        display: block;
    }
    
    .landing-card-image-right img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        margin: 0;
    }
    
    /* Clickable image container */
    .landing-card-image-right .clickable-image {
        display: block;
        width: 100%;
    }
    
    .landing-card-image-right .clickable-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
    }
    
    .field--name-field-card-image::before {
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
    }
}
/* Large devices (992px and up) */
@media (min-width: 992px) {
    .landing-card-image-right {
        max-width: 960px;
    }
}
/* X-Large devices (1200px and up) */
@media (min-width: 1200px) {
    .landing-card-image-right  {
        max-width: 1140px;
    }
}

/*--------------------------------------------------------------
# Card - Three Round Images with Links
--------------------------------------------------------------*/
.landing-card-three-circles::before {
    clip-path: polygon(0 0, 0 100%, 100% 0);
    z-index: 10;
}
.landing-card-three-circles {
  background-color: var(--primary-navy);
  margin: 0 auto 0 auto;
  padding: 3em 10px 3em 10px;
  text-align: center;
}
.landing-card-three-circles h2 {
    color: var(--white);
}
/* Flex container for responsive layout */
.landing-card-three-circles .content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  padding: .25rem;
}
/* Individual image-link groups */
.landing-card-three-circles .image-link-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--white);
  text-decoration: none;
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

.landing-card-three-circles .image-link-group:hover {
  transform: translateY(-2px);
}
/* Make images circular */
.landing-card-three-circles .field--name-field-card-image-1 img,
.landing-card-three-circles .field--name-field-card-image-2 img,
.landing-card-three-circles .field--name-field-card-image-3 img {
  border-radius: 50%;
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  max-width: 300px;
  transform: translateZ(0);
}
.landing-card-three-circles a {
  color: #00344b;
  text-decoration: none;
  font-size: 1.25rem;
}
.landing-card-three-circles .link-text {
  font-weight: 600;
  line-height: 1.4;
}

/* Small devices (576px and up) */
@media (min-width: 576px) {
    .landing-card-three-circles {
        /*max-width: 540px;*/
    }
    .landing-card-three-circles {
        padding: 4em 10px 3em 10px;
    }
}
/* Desktop layout - row at 768px+ */
@media (min-width: 768px) {
    .landing-card-three-circles {
        /*max-width: 720px;*/
    }
    .landing-card-three-circles .content {
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
        padding: 1rem;
    }
    .landing-card-three-circles h3 {
        margin-bottom: 0;
    }
    .landing-card-three-circles .image-link-group {
        flex: 1;
        max-width: 400px;
    }
  
    .landing-card-three-circles .field--name-field-card-image-1 img,
    .landing-card-three-circles .field--name-field-card-image-2 img,
    .landing-card-three-circles .field--name-field-card-image-3 img {
        max-width: 200px;
    }
}
/* Large devices (992px and up) */
@media (min-width: 992px) {
    .landing-card-three-circles {
        /*max-width: 960px;*/
    }
    .landing-card-three-circles .field--name-field-card-image-1 img,
    .landing-card-three-circles .field--name-field-card-image-2 img,
    .landing-card-three-circles .field--name-field-card-image-3 img {
        max-width: 325px;
    }
}
/* X-Large devices (1200px and up) */
@media (min-width: 1200px) {
    .landing-card-three-circles  {
        /*max-width: 1140px;*/
    }
    .landing-card-three-circles .field--name-field-card-image-1 img,
    .landing-card-three-circles .field--name-field-card-image-2 img,
    .landing-card-three-circles .field--name-field-card-image-3 img {
        max-width: 350px;
    }
}

/*--------------------------------------------------------------
# Card - Three Boxes with links
--------------------------------------------------------------*/
.landing-card-three-boxes {
  background-color: white;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  overflow: hidden;
}

.landing-card-three-boxes .content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 2fr 1fr;
  gap: 1rem;
  height: 300px;
}

.landing-card-three-boxes h2 {
  font-size: 2rem;
  color: #00344b;
  text-decoration: none;
}

.landing-card-three-boxes h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #f1aa1e;
  text-decoration: none;
}

.landing-card-three-boxes .field--name-field-card-image-1,
.landing-card-three-boxes .field--name-field-card-image-2,
.landing-card-three-boxes .field--name-field-card-image-3 {
    height: 100%;
}

/* Position images in grid */
.landing-card-three-boxes .image-1 {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.landing-card-three-boxes .image-2 {
  grid-column: 2;
  grid-row: 1;
}

.landing-card-three-boxes .image-3 {
  grid-column: 2;
  grid-row: 2;
}

/* Style all image containers */
.landing-card-three-boxes .image-link-group {
  width: 100%;        /* Fill grid area width */
  height: 100%;       /* Fill grid area height */
  overflow: hidden;
  border-radius: 2rem;
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
  text-decoration: none;
  display: block;
}

/* Images */
.landing-card-three-boxes .image-link-group img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
}

/* Link text overlay */
.landing-card-three-boxes .image-text {
  position: absolute;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  color: white;
  padding: 0.25rem 0.5rem;
  font-size: .875rem;
  font-weight: 500;
  margin: 0 0 .25em .25em;
  text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
  opacity: 0;
  transform: translateY(30px);
  animation: slideInFromBelow 1.2s ease-out 1s forwards;
}

/* Hover effects */
.landing-card-three-boxes .image-link-group:hover img {
  transform: scale(1.05);
}
/* Small devices (576px and up) */
@media (min-width: 576px) {
    .landing-card-three-boxes {
        max-width: 540px;
    }
    .landing-card-three-boxes .image-text {
        font-size: 1.1rem;
    }    
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .landing-card-three-boxes {
        max-width: 720px;
    }
    .landing-card-three-boxes .content {
        height: 500px;
    }
    .landing-card-three-boxes .image-text {
        font-size: 1.3rem;
        font-weight: 600;
    }
}
/* Large devices (992px and up) */
@media (min-width: 992px) {
    .landing-card-three-boxes {
        max-width: 960px;
    }
    .landing-card-three-boxes .content {
        height: 600px;
    }
    .landing-card-three-boxes .image-text {
        font-size: 1.5rem;
        font-weight: 700;
    }
}
/* X-Large devices (1200px and up) */
@media (min-width: 1200px) {
    .landing-card-three-boxes {
        max-width: 1140px;
    }
    .landing-card-three-boxes .content {
        height: 700px;
    }
    .landing-card-three-boxes .image-text {
        font-size: 1.75rem;
    }
}


/*--------------------------------------------------------------
# Card - Parallax 
--------------------------------------------------------------*/
/* Landing Card Parallax Component - Fixed Background */
.landing-card-parallax {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed; /* This keeps the image stationary */
}

/* Hide the field wrapper since we'll use background-image */
.landing-card-parallax .field--name-field-card-image {
  display: none;
}

.landing-card-parallax .content {
  position: relative;
  margin-top: 4rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark Overlay for Text Readability */
.landing-card-parallax .parallax-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

/* Text Content Overlay */
.landing-card-parallax .parallax-text-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 800px;
  padding: 2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Heading Styles */
.landing-card-parallax .field--name-field-card-heading h1,
.landing-card-parallax .field--name-field-card-heading h2,
.landing-card-parallax .field--name-field-card-heading h3 {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem 0;
  color: white;
}

/* Subtitle Styles */
.landing-card-parallax .field--name-field-card-subtitle p,
.landing-card-parallax .field--name-field-card-subtitle div {
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
  font-weight: 300;
  line-height: 1.4;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

/* CTA styles */
.landing-card-parallax .field--name-field-card-cta-button {
  margin-top: 1rem; 
}

.landing-card-parallax .field--name-field-card-cta-button a {
  display: inline-block;
  padding: 1em 2em;
  background-color: #f1aa1e;
  color: #00344b;
  text-decoration: none;
  font-size: 1em;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.3s ease;
  text-shadow: none;
}
.landing-card-parallax .field--name-field-card-cta-button a:hover {
  background-color: #e09a0e;
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Parallax Stats */
.landing-card-parallax .card-stats {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.landing-card-parallax .card-stats .card-stats-row-1 {
    width: 100%;
    margin: 1em 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.landing-card-parallax .card-stats .card-stats-row-2 {
    width: 100%;
    margin: 1em 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 480px) {
  .landing-card-parallax {
    min-height: 60vh;
  }
  
  .landing-card-parallax .parallax-text-content {
    padding: 1rem;
  }
}


/* Mobile fallback - fixed backgrounds can be problematic on mobile */
@media (min-width: 768px) {
    .landing-card-parallax {
        min-height: 50vh;
        /*background-attachment: scroll;  Fallback to scroll on mobile */
    }
    
    .landing-card-parallax .parallax-text-content {
        padding: 1.5rem;
    }
    .landing-card-parallax .parallax-overlay {
        background: rgba(0, 0, 0, 0.5);
    }
    .landing-card-parallax .card-stats .card-stats-row-1 {
    width: 50%;
    }
    .landing-card-parallax .card-stats .card-stats-row-2 {
        width: 50%;
    }
    .landing-card-parallax .card-stats {
        flex-direction: row;
    }
}

@media (min-width: 992px) {
    /* Text Content Overlay */
    .landing-card-parallax .parallax-text-content {
        max-width: 960px;
    }
}
@media (min-width: 1200px) {
    /* Text Content Overlay */
    .landing-card-parallax .parallax-text-content {
        max-width: 1140px;
    }
}



/* Accessibility - Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .landing-card-parallax {
    background-attachment: scroll !important;
  }
}



/*--------------------------------------------------------------
# Scroll animation helper
--------------------------------------------------------------*/
/* Animation base classes */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}



/*--------------------------------------------------------------
# Enhanced Generic Triangle Decorations - Multiple Triangles
--------------------------------------------------------------*/

/* Base class for elements that will have triangle decorations */
.triangle-decoration {
  position: relative;
  overflow: visible;
}

/* Top Left Triangle (using ::before) */
.triangle-decoration.triangle-top-left::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 0;
  width: 45%; /* Smaller width for left triangle */
  height: 3.5rem; /* Smaller height */
  background-color: var(--primary-red);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  z-index: 1;
  transform: translateY(-100%);
}
/* Top Left Inverse Triangle (using ::before) */
.triangle-decoration.triangle-inverse-top-left::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width:50%;
  height: 4.5rem;
  background-color: var(--primary-navy);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  z-index: 1;
  transform: translateY(0);
}
/* Top Right Triangle (using ::after) */
.triangle-decoration.triangle-top-right::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 0;
  width: 65%; /* Larger width for right triangle */
  height: 4.5rem; /* Normal height */
  background-color: var(--primary-navy);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 1;
  transform: translateY(-100%);
}
/* Top Right Inverse Triangle (using ::after) */
.triangle-decoration.triangle-inverse-top-right::after {
  content: '';
  position: absolute;
  top: -2px;
  right: 2px;
  width: 50%;
  height: 4.5rem;
  background-color: var(--primary-navy);
  clip-path: polygon(0 0, 0 100%, 100% 0);
  z-index: 1;
  transform: translateY(0);
}

/* Both top triangles combined */
.triangle-decoration.triangle-top-both::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 2rem;
  background-color: var(--triangle-red);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 1;
  transform: translateY(-100%);
}

.triangle-decoration.triangle-top-both::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 3rem;
  background-color: var(--triangle-primary);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 1;
  transform: translateY(-100%);
}

/* Size modifiers for left triangle */
.triangle-decoration.triangle-left-small::before {
  width: 25%;
  height: 1.5rem;
}

.triangle-decoration.triangle-left-medium::before {
  width: 35%;
  height: 2.5rem;
}

.triangle-decoration.triangle-left-large::before {
  width: 45%;
  height: 3.5rem;
}

/* Size modifiers for right triangle */
.triangle-decoration.triangle-right-small::after {
  width: 40%;
  height: 2rem;
}

.triangle-decoration.triangle-right-medium::after {
  width: 55%;
  height: 3.5rem;
}

.triangle-decoration.triangle-right-large::after {
  width: 65%;
  height: 4.5rem;
}

/* Color modifiers for left triangle */
.triangle-decoration.triangle-left-red::before {
  background-color: var(--triangle-red);
}

.triangle-decoration.triangle-left-primary::before {
  background-color: var(--triangle-primary);
}

.triangle-decoration.triangle-left-secondary::before {
  background-color: var(--triangle-secondary);
}

.triangle-decoration.triangle-left-white::before {
  background-color: var(--triangle-white);
}

.triangle-decoration.triangle-left-gray::before {
  background-color: var(--triangle-gray);
}

/* Color modifiers for right triangle */
.triangle-decoration.triangle-right-red::after {
  background-color: var(--triangle-red);
}

.triangle-decoration.triangle-right-primary::after {
  background-color: var(--triangle-primary);
}

.triangle-decoration.triangle-right-secondary::after {
  background-color: var(--triangle-secondary);
}

.triangle-decoration.triangle-right-white::after {
  background-color: var(--triangle-white);
}

.triangle-decoration.triangle-right-gray::after {
  background-color: var(--triangle-gray);
}

/* Bottom triangles (if needed) */
.triangle-decoration.triangle-bottom-center::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40%;
  height: 3rem;
  background-color: var(--triangle-primary);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  z-index: 1;
  transform: translateX(-50%) translateY(100%);
}

/* Alternative triangle shapes */
.triangle-decoration.triangle-left-diagonal::before {
  clip-path: polygon(0 0, 0 100%, 100% 0);
}

.triangle-decoration.triangle-right-diagonal::after {
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .triangle-decoration.triangle-top-left::before,
  .triangle-decoration.triangle-top-both::before {
    width: 35%;
    height: 1.5rem;
  }
  
  .triangle-decoration.triangle-top-right::after,
  .triangle-decoration.triangle-top-both::after {
    width: 60%;
    height: 2rem;
  }
}

@media (max-width: 480px) {
  .triangle-decoration.triangle-top-left::before,
  .triangle-decoration.triangle-top-both::before {
    width: 40%;
    height: 1rem;
  }
  
  .triangle-decoration.triangle-top-right::after,
  .triangle-decoration.triangle-top-both::after {
    width: 70%;
    height: 1.5rem;
  }
}

/* Ensure content stays above triangles */
.triangle-decoration > * {
  position: relative;
  z-index: 2;
}



.mr-2, .mx-2 {
  font-size: 30px;
}
.block-entity-fieldnodefield-event-date {
    font-size: 1.5em;
    font-weight: 600;
}

/* calendar-field_startdate/month page overrides */

.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-header img {
    display: none;
}

.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-header p {
    margin: 0 auto;
    padding: 0.5em 0.5em 0.25em;
}

.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-header p:nth-child(12) {
    margin-bottom: 2em; 
}

.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-header h3 {
    margin: 0 auto;
    padding: 0 0.5em;
}

.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-content {
    margin: 0 auto;
    padding: 0 0.5em;
}

.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-header p:nth-child(2),
.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-header p:nth-child(3),
.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-header p:nth-child(4),
.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-header p:nth-child(5) {
    display: none;
}
    

.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .view-header {
    width: 100%;
}

.main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) .visit-top {
    margin: 0.15em 0 0 0;
    border-top: none;
    background: url(../images/BackgroundArchway.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    border-bottom: 3px solid var(--primary-navy) !important;
    color: var(--primary-navy) !important;
    font-size: 2.5rem !important;
    font-family: "RobotoSlab", Georgia, Times, "Times New Roman", serif !important;

    /* Below is the original code injected into the html, above is the override
    .visit-top {
        background-image: url("/sites/default/files/LibraryArchBackground.jpg");
        background-size: cover;
        margin: 0;
        padding: 1.5rem 1rem 1.5rem 1rem;
        border-top: 3px solid #1f2f5f;
        border-bottom: 3px solid #1f2f5f;
        color: #1f2f5f;}
    */
}

/* Small devices (576px and up) */
@media (min-width: 576px) {
    .main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) {
        max-width: 540px;
        margin: 0 auto;
    }

}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
    .main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) {
        max-width: 720px;
    }

}

/* Large devices (992px and up) */
@media (min-width: 992px) {
    .main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) {
        max-width: 960px;
    }
}

/* X-Large devices (1200x and up) */
@media (min-width: 1200px) {
    .main-container section.col-sm-12.region-container:has(.view-content-field-startdate-on-calend) {
        max-width: 1140px;
    }
}
/* Enhanced Form Styling - Library Databases Page Only */
#views-exposed-form-library-database-block-1 .form--inline.form-inline.clearfix {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: end;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

/* Form Items - Title takes 50% width */
#views-exposed-form-library-database-block-1 .form-item {
    flex: 0 0 25%; /* Default 25% for dropdown */
    min-width: 200px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

/* Title field takes 50% width */
#views-exposed-form-library-database-block-1 .form-item:first-child {
    flex: 0 0 50%;
}

/* Labels */
#views-exposed-form-library-database-block-1 .control-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #495057;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Text Input - Consistent height */
#views-exposed-form-library-database-block-1 .form-text {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: 3.125rem; /* Fixed height for consistency */
    box-sizing: border-box;
    flex: 1;
}

#views-exposed-form-library-database-block-1 .form-text:focus {
    border-color: var(--primary-navy, #0066cc);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

/* Select Dropdown - Consistent height */
#views-exposed-form-library-database-block-1 .select-wrapper {
    position: relative;
    flex: 1;
}

#views-exposed-form-library-database-block-1 .form-select {
    width: 100%;
    padding: 0.75rem 3rem 0.75rem 1rem; /* Ensure enough padding for the arrow */
    border: 2px solid #ced4da;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    height: 3.125rem; /* Fixed height matching text input */
    box-sizing: border-box;
}

#views-exposed-form-library-database-block-1 .form-select:focus {
    border-color: var(--primary-navy, #0066cc);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

/* Submit Button - Takes remaining width and matches height */
#views-exposed-form-library-database-block-1 .form-actions {
    flex: 1;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#views-exposed-form-library-database-block-1 .btn {
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    border: 2px solid var(--primary-navy, #0066cc);
    background-color: var(--primary-navy, #0066cc);
    color: white;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    height: 3.125rem; /* Fixed height matching inputs */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

#views-exposed-form-library-database-block-1 .btn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

#views-exposed-form-library-database-block-1 .btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Responsive Behavior */
@media (max-width: 768px) {
    #views-exposed-form-library-database-block-1 .form--inline.form-inline.clearfix {
        flex-direction: column;
        align-items: stretch;
    }
    
    #views-exposed-form-library-database-block-1 .form-item,
    #views-exposed-form-library-database-block-1 .form-item:first-child {
        flex: none;
        min-width: auto;
        margin-bottom: 1rem;
    }
    
    #views-exposed-form-library-database-block-1 .form-actions {
        flex: none;
        margin-bottom: 0;
    }
    
    #views-exposed-form-library-database-block-1 .btn {
        width: 100%;
        padding: 1rem;
        height: auto;
    }
}

@media (max-width: 576px) {
    #views-exposed-form-library-database-block-1 .form--inline.form-inline.clearfix {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    #views-exposed-form-library-database-block-1 .control-label {
        font-size: 0.85rem;
    }
    
    #views-exposed-form-library-database-block-1 .form-text,
    #views-exposed-form-library-database-block-1 .form-select {
        font-size: 0.9rem;
        padding: 0.6rem 0.8rem;
        height: 2.75rem;
    }
    
    #views-exposed-form-library-database-block-1 .form-select {
        padding-right: 2.5rem;
    }
    
    #views-exposed-form-library-database-block-1 .btn {
        height: 2.75rem;
        padding: 0.6rem;
    }
}

/* Large screens - maintain the 50/25/25 layout */
@media (min-width: 992px) {
    #views-exposed-form-library-database-block-1 .form--inline.form-inline.clearfix {
        flex-wrap: nowrap;
        gap: 1.5rem;
    }
}