/* ------------  ONE EXPERIENCE TEMPLATE CSS ADHINSA © 2025   ------------*/


/*---------------- General styles --------------------*/

body, p {
  font-family: "bentonsansbook",  Tahoma, Arial, sans-serif !important;  
  font-size: 1rem;
}
.text-purple {
    color: #4F2683 !important;
  }
.btn-purple {
    --bs-btn-color: #fff; /* Text color remains white for contrast */
    --bs-btn-bg: #4F2683; /* Set background color to the desired purple */
    --bs-btn-border-color: #4F2683; /* Match border color to the background */
    --bs-btn-hover-color: #fff; /* Keep text white on hover */
    --bs-btn-hover-bg: #401F6A; /* Slightly darker purple for hover background */
    --bs-btn-hover-border-color: #351A5A; /* Slightly darker purple for hover border */
    --bs-btn-focus-shadow-rgb: 79, 38, 131; /* RGB equivalent of #4F2683 for focus shadow */
    --bs-btn-active-color: #fff; /* Keep text white when active */
    --bs-btn-active-bg: #351A5A; /* Even darker purple for active background */
    --bs-btn-active-border-color: #2d164b; /* Even darker purple for active border */
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* Standard active shadow */
    --bs-btn-disabled-color: #fff; /* Keep text white when disabled */
    --bs-btn-disabled-bg: #4F2683; /* Use the base purple for disabled background */
    --bs-btn-disabled-border-color: #4F2683; /* Use the base purple for disabled border */
}
.bg-purple {
    background-color: #4F2683 !important;
}

.--wu-oor-heading-underline {
    border-bottom: 2px #8F55E0 solid;
    padding-bottom: 16px;
}

.--wu-oor-main-content a, .--wu-oor-main-content a:link {
    color: #4f2683;
    text-decoration: none;
    border-bottom: 1px dotted;
    padding-bottom:3px;
}

.--wu-oor-main-content a:hover {
    color:#8F55E0;
    text-decoration: none;
    border-bottom: 1px solid;
}

.--wu-oor-main-content a:visited {
    color:#201436;
}

.--wu-oor-main-content a:active {
    color:#8F55E0;
}


.sky-underline {
  position: relative;
  display: inline-block;
}

.sky-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 4px;
  background-color: #7DEAFB;
  border-radius: 2px;
}

.max-width-800 {
  max-width: 800px;
}
/*---------------- COLOURS --------------------*/

.--wu-oor-purple {
    color: #4f2683;
}
.--wu-oor-orchid {
    color: #8F55E0;}
.--wu-oor-deep-focus {
    color: #201436;
}
.--wu-oor-sky {
    color:#7DEAFB;
}
.--wu-oor-spring {
    color: #B9F876;
}
.--wu-oor-vivid {
    color: #FCF05E;
}
.--wu-oor-tiger {
    color:#F0A757;
}
.--wu-oor-grey {
    color: #6F7273;
}



  /* ---------------Headers ----------------*/

.--wu-oor-purple-header {
    background-color: #4f2683;
    color: #ffffff;
    padding: .5rem;
}

.--wu-oor-white-header {
    background-color: #ffffff;
    color: #4f2683;
    padding: .5rem;
}

  /* --------------- Navbar ----------------*/
.--wu-oor-navbar {
    background-color: #ffffff;
    border-top: #dddddd 0.5px solid;
}

    .navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    color: #4f2683 !important;
    }

    .nav-link {
    transition: color 0.3s ease;
    margin-right: 2rem;
  
    }

    .nav-link:hover {
    color: #4f2683 !important;
    }

    .nav-link.active {
    color:#8F55E0 !important;
    }

    .animated-border {
    position: relative;
    display: inline-block;
    color: #000;
    text-decoration: none;
    padding-bottom: 4px;
    }

    .animated-border::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: #4f2683;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    }

    .animated-border:hover::after,
    .animated-border.active::after {
    transform: scaleX(1);
    }

 /* --------------- Purple Bar White Links ----------------*/


    .purplebar-nav-link, a.purplebar-nav-link {
    color: #ffffff;
    transition: color 0.3s ease;
    }

    .purplebar-nav-link:hover, a.purplebar-nav-link:hover {
    color: #ffffff !important;
    }

    .purplebar-nav-link.active {
    color: #ffffff !important;
    }

    .animated-border-white {
    position: relative;
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    padding-bottom: 4px;
    }

    .animated-border-white::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    }

    .animated-border-white:hover::after,
    .animated-border-white.active::after {
    transform: scaleX(1);
    }



  /* --------------- Breadcrumb ----------------*/
.--wu-oor-breadcrumb {
    background-color: #eeeeee;
    padding:1rem;
    font-size: 0.875rem;
}

/* --------------- Hero / Large Image ----------------*/

.hero-image {
    /*background: url('../images/Fall_Students.jpg') center/cover no-repeat; */
    /*background: url('../images/Western_tower.jpg') center/cover no-repeat; */
    background: url('../images/rfi-banner.png') center/cover no-repeat; 
    min-height: 50vh;
}


 /* Default overlay (desktop/tablet) */
  .gradient-overlay {
    background: linear-gradient(
      to right,
      rgba(0,0,0,0.75) 0%,
      rgba(0,0,0,0.4) 40%,
      rgba(0,0,0,0) 100%
    );
  }

  /* On small screens make overlay fully dark */
  @media (max-width: 576px) {
    .gradient-overlay {
      background: rgba(0,0,0,0.50);
    }
  }

/* ---------------  Full Width Banner Purple ----------------*/


  .full-width-banner-purple {
    background-color: #4f2683;
    height: 30vh;
  }

  .full-width-banner-orchid {
    background-color: #8F55E0;
    height: 23vh;
  }

  .full-width-banner-orchid p {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 35px;
  }

 .full-width-banner-purple-60vh {
    background-color: #4f2683;
    height: 60vh;
  }

   .full-width-banner-purple-60vh h1 {
      font-size: 3.5rem;
      font-family: "bentonsansbold", Tahoma, Arial, sans-serif !important;
      font-weight: 300;
      line-height: 1.2;
   }
  /* --------------- Form ----------------*/

.form-label {
    font-family: "bentonsansmedium",  Tahoma, Arial, sans-serif !important;  
    font-size: 1rem;
}


  /* --------------- Accordion ----------------*/

.--wu-oor-accordion{
    border: 0.5px solid #eeeeee;
  }

.--wu-oor-accordion .accordion-header {
    color: #ffffff;
    background-color: #4f2683;
}
.-bs-accordion-btn-focus {
    border-color: #86b7fe;
}
.--bs-accordion-active {
    color: #4f2683;
}
.accordion-button {
  background-color: #ffffff; 
  color: #000000;         /* dark text */
}

.accordion-button:not(.collapsed) {
  background-color: #4f2683; /* active header */
  color: #fff;
}


  /* --------------- Buttons ----------------*/

.btn-western-purple {
    color: #ffffff;
    background-color: #4f2683;
}

.btn-western-purple:hover {
    color: #ffffff;
    background-color: #201436;
}
.btn-western-grey {
    color: #ffffff;
    background-color: #6F7273;
}

.btn-western-grey:hover {
    color: #ffffff;
    background-color: #292a2b;
}

.btn-western-purple-outline {
    color: #4f2683;
    background-color: #ffffff;
    border: 2px solid #4f2683;
}

.btn-western-purple-outline:hover {
     color: #ffffff;
    background-color: #201436;
    border: 2px solid #201436;

}
.btn-western-grey-outline {
    color: #6F7273;
    background-color: #ffffff;
    border: 2px solid #6F7273;

}

.btn-western-grey-outline:hover {
    color: #ffffff;
    background-color: #292a2b;
    border: 2px solid #292a2b;

}


  /* --------------- Footer ----------------*/
.--wu-oor-footer {
    background-color: #4f2683;
    color: #ffffff;
    padding: 2rem;
  
}

/*.--wu-oor-footer a {
    color: #ffffff;
    text-decoration: none;
}
.--wu-oor-footer a:hover {
    color: #ffffff;
    border-bottom: 1px solid #ffffff;
    text-decoration: none;
}*/

.legal-divider {
  color: #FFF;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.6rem;
}


#footer a {
    position: relative;
    color: white;
    text-decoration: none;
    padding-bottom: 5px;
}

/* Animated underline */
#footer a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 1.6px;
    background-color: white;
    transition: width 0.3s ease;
    z-index: 1; /* Ensure it appears above the text */
}

/* Ensure the underline animates only on hover/focus */
#footer a:hover::after,
#footer a:focus::after {
    width: 100%;
}

/* For links that contain an image */
#footer a img {
    border: none !important;
    text-decoration: none;
    pointer-events: none; /* Prevent the image from interfering with the link hover */
}




/*
#footer a {
    position: relative;
    color: white;
    text-decoration: none;
    padding-bottom: 5px;
}

/* Animated underline */
/*#footer a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 1.6px;
    background-color: white;
    transition: width 0.3s ease;
}

#footer a:hover::after,
#footer a:focus::after {
    width: 100%;
}

#footer a:hover::after,
#footer a:focus::after {
    width: 100%;
}

#footer a img {
    border: none !important;
    text-decoration: none;
}

#footer a img::after {
    display: none;
}

#footer a img {
    pointer-events: none;
    text-decoration: none;
}

#footer a img + ::after {
    display: none !important;
}


#footer a:not(:has(img))::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 1.6px;
    background-color: white;
    transition: width 0.3s ease;
}

#footer a:not(:has(img)):hover::after,
#footer a:not(:has(img)):focus::after {
    width: 100%;
}
*/


/*@media (min-width: 1200px) {
  .additional-resources-container {
    gap: 0.3125rem !important;
  }
}
.additional-resources-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  align-self: stretch;
}
*/

/* ------------ FONTS  ------------ */
.--wu-oor-font-medium {
   font-family: "bentonsansmedium", Tahoma, Arial, sans-serif !important;
 }

.--wu-oor-font-book {
    font-family: "bentonsansbook",  Tahoma, Arial, sans-serif !important;
  }

.--wu-oor-font-bold {
     font-family: "bentonsansbold", Tahoma, Arial, sans-serif !important;
  }

.--wu-oor-font-regular {
     font-family: "bentonsansregular", Tahoma, Arial, sans-serif !important;
  }

.--wu-oor-font-light {
     font-family: "bentonsanslight", Tahoma, Arial, sans-serif !important;
  }


  .h6 {
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25rem;
  }

/*--wu-purple: #4F2683;
  --wu-orchid: #8F55E0;
  --wu-deep-focus: #201436;
  --wu-sky: #7DEAFB;
  --wu-spring: #B9F876;
  --wu-vivid: #FCF05E;
  --wu-tiger: #F0A757;
  --wu-grey-7: #6F7273;
  --wu-font-medium: "BentonSans Medium", Arial, sans-serif !important;
  --wu-font-book: "BentonSans Book", Arial, sans-serif !important;
  --wu-font-bold: "BentonSans Bold", Arial, sans-serif !important;
  --wu-font-regular: "BentonSans Regular", Arial, sans-serif !important;*/

  /* --------------- App Name ----------------*/
  .--wu-oor-app-name {
    color: #6f7273;
    font-family: "bentonsansbook", Tahoma, Arial, sans-serif !important;
    font-size: clamp(1rem, 4vw, 1.5rem);
    display: grid;
    /*place-items: center;*/
    align-items: center;   /* vertical */
    /*justify-content: center;  horizontal (optional) */
    /*border: 1px solid #ccc;*/
    
  }


 /* --------------- Carousel Student Testimonials----------------*/

 #student-testimonials  h2 {
  font-size: 2.25rem;
  font-family: "bentonsansmedium", Tahoma, Arial, sans-serif !important;
 }

 #student-testimonials  .quote {
  font-size: 1.5rem;

 }

   #student-testimonials .carousel-control-prev-icon,
  #student-testimonials .carousel-control-next-icon {
    background-color: #4f2683 !important;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    background-size: 50%, 50%;
  }

  #student-testimonials .carousel-indicators [data-bs-target] {
    background-color: #4f2683;
  }


/* --------------- FACTOIDS ----------------*/
  #factoids h2 {
    font-size: 3.5rem;
  }
  #factoids p {
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0%;
    color: #292929;
  }
  .fact-icon {
    color: #8F55E0;
    padding: 10px;
  }