/* Standard banner H1 */
@media (min-width: 1024px) {
  .heading--standard-banner.heading--search-form .section_title h1 {
    margin-bottom: 65px;
  }
}
@media (min-width: 1024px) {
  section.heading--standard-banner .section_title h1 {
    font-size: 110px !important;
    margin-bottom: 100px;
  }
}
@media (max-width: 768px) {
  section.heading--standard-banner .section_title h1 {
    font-size: 46px !important;
    margin-bottom: 50px;
  }
}
section.heading--standard-banner .section_title h1 {
  font-weight: 700;
  line-height: 1;
  color: #596781;
}
.heading--standard-banner .section_title h1 {
  margin-bottom: 0;
}


/* Fullwidth image H1 */
@media (max-width: 1440px) {
section.heading--fullwidth-image .section_title h1 {
    font-size: 150px;
    line-height: 0.9;
}
}
@media (min-width: 1024px) {
section.heading--fullwidth-image .section_title h1 {
    font-size: 110px;
    margin-bottom: 100px;
}
}
@media (max-width: 768px) {
section.heading--fullwidth-image .section_title h1 {
    font-size: 78px;
    margin-bottom: 50px;
}
}
section.heading--fullwidth-image .section_title h1 {
    font-weight: 700;
    line-height: 1;
    color: #fff;
}


/* Large CTA */
.order-prospectus .subtitle, .order-prospectus h2 {
    color: white;
}
@media (min-width: 768px) {
.order-prospectus h2 {
    font-size: 96px;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 30px;
}
}
  
@media (max-width: 767.98px) {
.order-prospectus h2 {
    font-size: 46px;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 19px;
}
}

@media (max-width: 767.98px) {
    .order-prospectus h1 {
        max-width: 300px;
    }
}

/* Quote with image */

h2.quote-heading {
    font-size: 3em;
    padding-bottom: 15px;
}

.component-course-overview-footer .wlv-quote-source {
    font-size: 14px;
    font-weight: 500;
    line-height: 25px;
    margin-top: 50px;
}

.news-article-detail__section_title h1 {
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 36px;
    color: #596781;
}
section.page-wrap-side-nav .col-lg-9 .heading--image-banner .section_title h1 {
    font-size: 65px;
    font-weight: bold;
    line-height: 0.96;
    color: #596781;
    color: white !important;
}
.heading--fullwidth-image .section_title h1, .heading--image-banner .section_title h1 {
    margin-bottom: 30px;
}
.general-content h1, .case-study h2 {
    font-size: 50px;
}
.general-content h1 {
    font-weight: bold;
    line-height: 0.96;
    margin-bottom: 30px;
    color: #596781;
}
.component-hero-dates .component-hero-dates__further-toggle{
font-size: 18.72px !important;
}
p.event-detail-summary {
font-size: unset !important;
}

/* Open Day landing pages */
.which-campus{
background: #f1f1f1;
    padding-top: 60px;
    text-align: center;
    position: relative;
  	padding-left: 50px;
  	padding-right: 50px;
}

.which-campus:before {
    background: #f1f1f1;
    position: absolute;
    left: -2000px;
    right: 2000px;
    top: 0;
    bottom: 0;
    content: '';
    display: block;
    width: 4000px;
}

.which-campus .container {
    margin: 0;
    padding: 10px;
    width: 100%;
}

.which-campus h3{
font-size: 3em;
color: #596781;
}

#which-campus-output{
padding: 80px 80px 20px 80px;
}

#which-campus-multi{
font-weight: 600;
}

.programme{
font-weight:400;
}



#which-campus-programme-output{
padding-bottom: 80px;
}


#which-campus-output {
font-weight: 600;
margin-bottom: 0;
}
select#myDropDown {
    background: #7bc4b0;
    height: 60px;
    box-shadow: none;
    font-size: 1.2em;
    border: none;
   padding-left: 20px;
   color:#fff;
  width: 100%;
}

/* Open Day further dates */

.od-further-dates {
  color: #596781;
  text-align: center;
}

.od-further-dates h3 {
	font-size: 32px;
}

.od-further-dates p {
	font-size: 20px;
}

.od-registing-at {
  color: #596781;
}

.row .col-sm-12 {padding-bottom: 20px;}

ol li:before {
  display: none !important;
}

ol li:after {
  display: none !important;
}

td ul {
  column-count: 1 !important;
  margin: 25px 0 0 !important;
}

td ul li:before {
  display: none !important;
}

td ul li:after {
  display: none !important;
}

td ul li {
  list-style-type: disc;
}

.induction {
  padding-top: 0 !important;
}

.homepage-banner .overlay_content  {
	left: 10%;
	right: 0 !important;
}
.homepage-banner h1 {
  	font-family: roboto-slab;
}
.homepage-banner:after {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    content: "";
  	background: none !important; 
}

.hp-search {
  margin-top: 25px !important;
  padding-bottom: 25px !important;
}

.homepage-news {
  margin-top: 50px !important;	
  margin-bottom: 50px !important;}

.homepage-news-box {
	background-color: #596781;
	color: #FFF;
}

.homepage-news-image {
	padding: 0 !important;
	margin: 0 !important;
}

.homepage-news-text {
padding: 25px !important;}

.homepage-news-text h2 {
  font-family: roboto-slab;
  /* font-size: 1.75rem; */
  font-weight: bold;
  line-height: normal !important;
}

.homepage-news-text p {
  /* font-size: 1.2rem; */
  font-weight: normal !important;
}

.homepage-news-cta {
  padding-top: 45px;
}
.wlv-stats {
  background: #F7F7F7 !important;
} 
.stats-container {
  padding: 25px !important;
  margin-bottom: 50px;
} 
.wlv-stats h2 {
  font-family: roboto-slab;
  font-weight: bold;
  line-height: normal !important;
  font-size: 3rem;
} 

.wlv-stats h3 {
  font-family: roboto-slab;
  font-weight: bold;
  line-height: normal !important;
  font-size: 1.75rem;
}

.openday-upper {
  text-transform: uppercase;
}
.stat-sources {
  border-top: 1px solid black;
  padding-top: 10px;
}



@media (min-width: 1024px) {
.banner-homepage .item .overlay_content {
    top: 50% !important;

}
}

.award .overlay h1 {
    /*font-size: 96px;*/
    font-weight: 600;
    line-height: 1.2;
    color: white;
}

.btn-wlv {margin-top: 10px;}

.homepage-news-heading {
  font-size: 1.1rem;
  font-weight: bold;
}


.homepage-news-teaser {
	font-size: 0.80rem;
}

.news-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.news-row > [class*='col-'] {
	 display: flex;
	 flex-direction: column;
}

a.homepage-news-link:link {
  font-size: 1.1rem;
  font-weight: bold;
  color: #596781 !important;
  text-decoration: none;
}


a.homepage-news-link:hover {
  font-size: 1.1rem;
  font-weight: bold;
  color: #596781 !important;
  text-decoration: underline;
}

a.homepage-news-link:visited {
  font-size: 1.1rem;
  font-weight: bold;
  color: #596781 !important;
  text-decoration: none;
}


h2.latest-news {
  font-size: 3rem;
  font-weight: bold;
  color: #596781
}


/* Padding for news article nav header on mobiles */

@media only screen and (max-width: 600px) {
  .news-header-row {
    padding-bottom: 25px;
  }
}

/* Styling for WLV Open Events secondary banner */

  .secondary-banner-date {
    font-size: 22px !important;
    line-height: 26px;
    display: block;
    margin-bottom: 37px;
    color: white;
  }

h1.wlv-calendar-event {
  font-family: roboto-slab;
  font-weight: bold;
  font-size: 50px;
  color: #596781;
}

.wlv-event-btn {
    display: flex;
    width: 100%;  
    text-transform: uppercase;
    color: black;
    /*-webkit-box-align: center;*/
    align-items: center;
    /*-webkit-box-pack: center;*/ 
    justify-content: center;
    font-weight: bold;
}

.wlv-event img {
  max-width: 100% !important;
  height: auto !important;
  padding-bottom: 20px;
} 

/* Toast */

.toast{
     border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
     position: fixed;
     bottom: 0;
     right: 0;
     background:#E8E8E8;
  }
  
     .alert--emergency{
  background:none !important;
  }

  
  .btn-info{
    background-color:#596781 !important;
      border-color: #596781 !important;
        font-size: 13px;
		 border-radius: 0 !important;
  }
  
  .text-info{
     margin-top: 20px;
     margin-bottom: 20px;
    margin-left: 10px;
     color:#596781 !important;
    font-size: 14px;
 
  }
  
  a.button:hover{
     background: #383;
}

.ml-2, .mx-2{
    margin-left: 80px !important;
    margin-top: 5px !important;
    background: #fff;
    border-color: #596781 !important;
}

.wlv-quote-with-image {
    padding-top: 0 !important;
    padding-bottom: 15px;
}

.wlv-banner-image h1 {
  	font-family: roboto-slab;
  	color: #FFF;
  
}



@media (min-width: 768px) {
  
.wlv-banner-image .overlay_content {
    position: absolute;
    z-index: 11;
    top: 50%;
    left: 10%;
    right: 0;
    max-width: 700px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}
  
  .wlv-banner-image {
    position: relative;
    height: 615px !important;
}
  
  .wlv-banner-image h1 {
  	font-family: roboto-slab;
  font-size: 96px;
    font-weight: bold;
    line-height: 1.1;
    margin-bottom: 30px;
}
  
  .wlv-banner-image .subtitle {
    font-size: 36px;
    line-height: 51px;
    display: block;
    margin-bottom: 30px;
    color: #FFF;
}
  
  .wlv-banner-image .wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: -webkit-gradient(linear, right top, left top, color-stop(.33%, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); 
    background: linear-gradient(-90deg, rgba(0, 0, 0, 0.5) .33%, rgba(0, 0, 0, 0) 100%); 
    z-index: 1;
}
  
  .wlv-banner-image::after {
      background: none !important;
  }
  
  

}

.search-intro p {
color: #000 !important;
}


 .quote-play {
    position: relative;
  }

  .svg-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Ensure SVG is above the image */
  }

.component-course-overview-footer .wlv-quote-image:after {
 display: none !important; 
}

.wlv-quote-text:before {
 display: none !important; 
}
.wlv-quote-text:after {
 display: none !important; 
}



.wlv-video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.wlv-video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





.strategy-stat {
color: #000 !important;
}


.wlv-banner-image {
margin-bottom: 50px;
}


@media only screen and (max-width: 768px) {
  /* CSS rules for mobile devices */
  .component-course-overview-footer .wlv-quote-source {
  margin-top: 30px !important;
 text-align: center;
  }
}


.wlv-hof {
padding-top: 0 !important;
}

/* Clearing 2024 styles start */

.alert--emergency {
    max-width: 75% !important;
}


p.clearing-message {
    padding-top: 25px;
    font-size: xx-large;
    font-weight: bolder;
}

.clearing-call-link {
    color: #ffcc00;
}

a.clearing-call-link:link {
    color: #ffcc00;
  text-decoration: none;
}

a.clearing-call-link:active {
    color: #ffcc00;
  text-decoration: none;
}

a.clearing-call-link:hover {
    color: #ffcc00;
  text-decoration: underline;
}

a.clearing-call-link:visited {
    color: #ffcc00;
  text-decoration: none;
}

/* Clearing 2024 styles end */


/* Learna Courses start */
@media (min-width: 768px) {
    .learna-course p {
        font-size: 32px;
        font-weight: 300;
        line-height: 48px;
        margin-top: 30px;
        padding-right: 10px;
    }
}

.learna-hero-button {
    color:#212529 !important;
}


/* Learna Courses end */



/* Make links on grey BG accessible */
.discover.bg-lightgrey .hero_heading a {
    color: #2A4158; /* Darker blue for good contrast */
    text-decoration: underline; /* Ensures visibility */
    font-weight: bold; /* Makes links stand out */
}

.discover.bg-lightgrey .hero_heading a:hover, 
.discover.bg-lightgrey .hero_heading a:focus {
    color: #1A2D3D; /* Even darker shade for hover/focus states */
    text-decoration: none; /* Removes underline on hover for subtle effect */
    background-color: rgba(0, 0, 0, 0.1); /* Light highlight for better usability */
}

/* Make additional links on searches more prominent and accessible */
/* Targeting the link within the specific section */
section.heading.heading--standard-banner.heading--search-form.lazyloaded a.btn.btn-link.text-primary {
    font-size: 1.25rem !important; /* Making the text slightly larger for better readability */
    font-weight: bold !important; /* Ensuring the text is bold for prominence */
    color: #2A4158 !important; /* Accessible shade of blue for better contrast */
    text-decoration: underline !important; /* Underlining the link for accessibility */
    padding: 0.5rem 0 !important; /* Adding padding for better touch target size */
    transition: color 0.3s ease, background-color 0.3s ease !important; /* Adding smooth transition for hover */
}

/* Hover effect */
section.heading.heading--standard-banner.heading--search-form.lazyloaded a.btn.btn-link.text-primary:hover {
    color: #2A4158 !important; /* Maintain the same text colour on hover for consistency */
    background-color: #A6D0E4 !important; /* Softer, accessible background colour */
    text-decoration: underline !important; /* Keep underline on hover for consistency */
}

/* Focus state for accessibility */
section.heading.heading--standard-banner.heading--search-form.lazyloaded a.btn.btn-link.text-primary:focus {
    outline: 3px solid #2A4158 !important; /* Using the same accessible colour as the text for a consistent look */
    color: #2A4158 !important; /* Maintain the same colour as on hover */
    background-color: #A6D0E4 !important; /* Keep the background colour consistent with hover */
}

/* Make every H1 use Roboto Slab */
h1 {
    font-family: roboto-slab;
}


@media (max-width: 768px) {
  .btn--book-your-place {
    background-color: #FAEE2C !important; /* Deep navy for contrast */
    color: #000000 !important;
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
  }

  .btn--book-your-place:focus,
  .btn--book-your-place:hover {
    text-decoration: underline !important;
  }
}

.open-day-heading {
  font-size: 3em; /* Mobile default */
}

@media (min-width: 768px) {
  .open-day-heading {
    font-size: 4em; /* Desktop */
  }
}



/* === Clearing CTA Section Styles === */

/* Section background and spacing */
.call-to-action.lightbg {
  background-color: #fac41d;
  color: #182341;
  padding: 4rem 0;
}

/* Headings and paragraph base styling */
.call-to-action.lightbg h2,
.call-to-action.lightbg p {
  color: #182341;
  margin-bottom: 1rem;
}

/* Roboto Slab for headings */
.slab-heading {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
}

/* Phone number text size and spacing */
.call-to-action.lightbg p.font-30 {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

/* Underline only the phone number link */
.call-to-action.lightbg a[href^="tel:"] {
  color: #182341;
  text-decoration: underline;
  font-weight: 500;
}

/* === Button Group Styling === */

/* Layout: row/column wrap with spacing */
.ctaButtons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;         /* horizontal and vertical spacing */
  row-gap: 0.75rem;  /* slightly reduced vertical spacing */
}

/* Reset inherited underlines on buttons */
.dbBtn {
  text-decoration: none !important;
}

/* Unified button appearance */
.btn-darkblue {
  background-color: #182341;
  color: #fac41d !important;
  border: none;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.375rem;
  text-transform: uppercase;
  text-decoration: none;
  transition: text-decoration 0.2s ease;
  width: 12rem;              /* consistent button width */
  text-align: center;
}

/* Hover: underline only, no colour change */
.btn-darkblue:hover,
.btn-darkblue:focus {
  text-decoration: underline;
  color: #fac41d !important;
  background-color: #182341;
}

/* Icons inside buttons */
.btn-darkblue .csIcon i,
.btn-darkblue .arrow i {
  font-size: 1.25rem;
  color: inherit;
}
