@charset "UTF-8";

/*USE FOR MEGA-MENU*/
/*#primary-menu{
 margin-top: 40px;   
}*/

/* add timestamp for test */

main#main-content{
display:contents
}

.photoswipe-gallery{
display:flex;
flex-wrap:wrap;
justify-content:center
}

.photoswipe-gallery > div{
float:left;
margin:1%;
width:12.3em;
border:1px solid;
text-align:center
}

.photoswipe-gallery > div span{
font-size:10px
}

footer{
clear:both
}

.view-articles .views-field-body .field-content h3 + img{
float:right
}
.view-articles .views-field-body{
padding-top:3em
}
.view-articles{
margin:auto
}
#page-wrapper{
padding-top:2em
}
summary.pcard img{
width:100%;
height:auto
}
summary.pcard a{
display:block;
font-weight:bold
}
summary.pcard{
display:inline;
line-height:normal;
background:none;
color:black;
width:min-content
}
.pcell{
text-align:center
}
#primary-menu {
    z-index: 1035;    
}
#navbar {
    padding: 0;
    width: 100vw;
    z-index: 1040;
}
.navbar {
    --bs-navbar-padding-y: 0!important;
}

ul.mega-box {
    position: relative; 
}
ul.mega-box .mega-menu-wrapper,
ul.mega-box .mega-menu-item-wrapper
{
	position: absolute;
	display: none;
	z-index:10;
}
ul.mega-box .mega-menu-wrapper {
    background-color: var(--kc-text-color-green);   
    width: 200vw;
    left: calc(-100vw + 100%);
    top: 100%;
    min-height: 480px;
	
}
ul.mega-box .mega-menu-item-wrapper {
    background-color: transparent;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    color: azure;
   
    max-width: 1200px;
    min-height: 440px;
}
li.nav-item:hover .mega-menu-wrapper,
li.nav-item:hover .mega-menu-item-wrapper{
	 
	display: block;
}
li.nav-item {
	transition: all 0.1s cubic-bezier(.45,.05,.55,.95);
	min-width: 180px;
	text-align: center;
}

/* Disable or simplify transitions for users with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  li.nav-item {
    transition: none; /* or transition: background-color 0.1s linear; */
  }
}

li.nav-item:hover{
	background-color:var(--kc-text-color-green);
	/*border-top: 1px solid #000;*/
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

li.nav-item.smedia-links{
	background-color:transparent;
	border-top: 1px solid transparent;
}



ul.mega-box li.nav-item ul > li a{
   text-decoration: none !important;
    transition: all 0.3s ease-out;
	
}

#primary-menu .nav a {
    color: #000!important;
    padding: 0;
}

#primary-menu {
  z-index: 1035;
  max-width: 1200px; /* Set a maximum width to control how wide the menu gets */
  margin: 0 auto;    /* Center the menu within the page */
}

#primary-menu li.nav-item {
    margin: 0;
	flex: 1;
}

li.nav-item {
  /* Added display: flex for uniform alignment and sizing 
  display: flex;*/
  align-items: center;
  justify-content: center;
}


#primary-menu a {
    font-size: 1.2rem;
    font-weight: 500;    
}

li.smedia-links a.social-media-links {
	margin: 0 1rem;
	font-size: 1.8rem;
	text-decoration: none!important;
	 color: #000!important;
}
li.smedia-links a.social-media-links:hover {
	background: transparent;
}
#primary-menu button.accordion-button {
    width: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent!important;
    box-shadow: none;
}
.mega-menu-item-wrapper ul, .mega-menu-item-wrapper div.back-flip {
    padding-left:3%!important;
	
}
ul.sub-menu {
    text-align: left;
    max-width: 30%; 
	overflow-x: visible;
	display: block;
	min-height: 420px;
    height: auto;
	opacity: 1;
    visibility: visible;
}

#primary-menu .sub-menu-item a {
  /* Adjust padding as needed for submenu items */
  font-size: 1rem;        /* Smaller font size for submenu items */
  
}



ul.mega-box li.nav-item ul > li:hover a.top-level {
    padding-left: 20px;
    
}
ul.mega-box li.nav-item ul > li {
    text-align: left;
    border-bottom: 1px solid #ddd;
	cursor: pointer;
}

.primary-mobile-menu li.nav-item ul > li {
    
    padding-left: 1rem;
    padding-right: 1rem;
}

li.sub-menu-item.has-children > ul.level-two,
li.sub-menu-item.has-children > ul.level-three,
.mega-menu-item-wrapper div.back-flip{
    position: absolute;
    top: 0;
    left: 30%;
    max-width: 30%;    
    width: 30%;
    margin: 0;
    display: block;
    z-index: 999; 
	height: 100%;
	opacity: 0;
    visibility:hidden;
	transition: all 0.3s ease-out;
	background:var(--kc-text-color-green);
}
.mega-menu-item-wrapper div.back-flip
{
    z-index:0;
	height: 60%;
	

}
.mega-menu-item-wrapper div.back-flip a {
    height: 100%;
    display: block;
	text-decoration: none !important;
}
.mega-menu-item-wrapper div.back-flip .image-holder {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    height: 0;
    transition: all .3s ease-out;
    padding-bottom: 60%;
    max-width: 98%;
	background-image:var(--banner-src);
	margin:2% auto;
}
.mega-menu-item-wrapper div.back-flip .text-content {
    background: #fff;
    border-radius: 4px;
    max-width: 80%;
    margin: -3rem auto;
}
.mega-menu-item-wrapper div.back-flip:hover .image-holder{
    box-shadow: inset 0px 0px 25px rgba(0,0,0,0.75);
    transition: 0.5s;
}
.mega-menu-item-wrapper div.back-flip:hover .text-content{
    margin: -5rem auto;
    transition: 0.5s;
}
.mega-menu-item-wrapper div.back-flip .text-content h2.text-center {
    font-size: 1.2rem;
    padding: .5rem;
}
.back-flip.level-three-back-flip {
    max-width: 100%;
    width: 100%;
    left: 60%!important;
}

li.sub-menu-item.has-children > ul.level-three{
    max-width: 100%;
    width: 100%;
    left: 103%;
}
.mega-menu-item-wrapper div.back-flip,
ul.mega-box li.nav-item ul > li:hover ul.level-two{
opacity: 1;
visibility:visible;	
}
ul.mega-box li.nav-item ul > li:hover ul.level-two > li.sub-menu-item.has-children:hover ul.level-three{
opacity: 1;
visibility:visible;	
}

ul.mega-box li.nav-item i{
transition: transform 0.3s ease;
color:#000;
}

ul.mega-box li.nav-item ul > li:hover > i{
transform: rotate(180deg);
color:#fff;
}
ul.mega-box li.nav-item ul > li:hover ul.level-two > li.sub-menu-item.has-children:hover ul.level-three i{
transform: rotate(180deg);
color:#fff;
}
/*
MOBILE MEGA MENU CSS RULE
*/


/*fixed navigation not scrolling on mobile*/
ul.mobile-top-left{
	padding: 0;
	margin: 0;
}

@media (max-width: 1399px) {
    /* CSS rules here will only be applied when the viewport width is less than 1400px */

#navbar {

    margin-top: 0px;
}
ul.mega-box li.nav-item{
	position:relative;
	text-align: left;
}
    /* CSS rules here will only be applied when the viewport width is less than 1400px */
.navbar-nav {  
	max-height:80vh;
	overflow-y: scroll;
}
ul.nav.navbar-nav.ms-auto.w-100.mega-box.mobile-mega-box{
    flex-wrap: nowrap;
}
#primary-menu{
 margin-top: 0px;   
}
#primary-menu li.nav-item {
    margin: 0.3rem 0.5rem;
}

#primary-menu a {font-size: 1rem;}

/*.header-caption h1 {
    font-size: 2.4rem!important;
}*/
	
.header-caption {   
    max-width: 98%!important;
    padding: 3%!important;
}	
}



.mobile-sub-menu ul{
	padding: 0!important;
}


.primary-mobile-menu .accordion, .primary-mobile-menu .accordion-item {
    border: none!important;
    background: var(--kc-text-color-green);
}

li.mobile-nav {
    position: relative;
    
    
}
.primary-mobile-menu li.nav-item ul > li{
   border-bottom: 0!important; 
	
}
.primary-mobile-menu li.nav-item ul > li a {
    border-bottom: 1px solid #e5e5e5;
    display: block;
    line-height: 2.5rem;
    padding-left: 2%;
	
}
li.mobile-nav:hover{
	background-color:transparent;
	border-bottom: 1px solid transparent;
	/*border-top-right-radius: 5px;
	border-top-left-radius: 5px;*/
}

/*for the icon to fit*/
.mobile-sub-menu li {
    position: relative;
}
.mobile-icon {
    position: absolute;
    top: 0;
    right: 0;   
    font-size: 1rem;
	width: 50px;
    height: 50px;
	line-height: 50px;
    text-align: center;
}

.mobile-sub-menu li .mobile-icon {    
    font-size: 1rem;
    
}
/* When .mobile-icon does not have .collapsed class (i.e., is expanded) */
.mobile-icon:not(.collapsed) {
    transform: rotate(45deg);
}

/* When .mobile-icon has .collapsed class (i.e., is collapsed) */
.mobile-icon.collapsed {
    transform: rotate(270deg);
}

/* Transition for smooth rotation effect */
.mobile-icon {
    transition: transform 0.3s ease;
}


/*USE FOR AUTOCOMPLETE FORMs*/
.href-button{
	cursor: pointer;
}
.search-engine {
    background-color: rgba(0,0,0,0.50);
    padding: 1rem 1rem;
    position: relative;
    bottom: 0;
    width: 100%;
}
#SearchEngineOffcanvas{
	background-color: #000;
}
#SearchEngineOffcanvas .btn-close {
	background-color: #fff!important;
}
.top-search-engine {
    position: absolute;
    top: 100px;
    height: 100vh;
    z-index: 2000;
    right: 0;
    left: 0;
    margin: auto;
}

.search-button {
    background-color: var(--kc-text-color-green) !important;
    margin-left: 5px;
    width: 60px;
    font-size: 1.5rem !important;
    border: 1px solid var(--kc-text-color-green) !important;
    color: #000 !important;
    cursor: pointer;
    border-radius: 0 !important;
    transition: box-shadow 1250ms cubic-bezier(0.19, 1, 0.22, 1), background-color 1250ms cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 0 0 1px var(--kc-text-color-green); /* Mimics the outline */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; /* Remove padding for accurate sizing */
    aspect-ratio: 1 / 1; /* Makes the button square */
    height: auto; /* Allows height to be determined by flex container */
}
.search-button:hover {
    background-color: var(--bs-light);
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); /* Mimics the outline-offset with transparent color */
}

.themehelper-search-engine-input, .form-control {
    color: var(--kc-text-color-green)!important;
    width: 100%; /*PARENT WIDTH*/
    border: 4px solid var(--kc-text-color-green)!important;
    background-color: #000!important;
	border-radius:0!important;
	font-size: 1rem!important;
	height: auto; /* Ensure input field has auto height */
    flex: 1; /* Allows the input to take up available space */
}

/* Focus style with box-shadow */
.themehelper-search-engine-input:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}

.search-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}


.view-about input.form-control {
    color: var(--kc-text-color-green)!important;
    width: 100%; /*PARENT WIDTH*/
    border: 4px solid var(--kc-text-color-green)!important;
    background-color: #fff!important;
	border-radius:0!important;
	font-size: 1rem!important;
}
.result-box,.top-result-box {
    position: absolute;
    background: #fff;
	color:#000;
    max-height: 500px;
    min-height: 100px;	
    overflow: hidden;
    overflow-y: auto;
    max-width: 100%;
    width: 99.1%;
    display: none;
    left: 0;
    right: 0;
	z-index: 10;
	
}
.themehelper-search-engine-holder {
    position: relative;
    margin: 5px auto;
    max-width: 600px;
}
.top-result-box .themehelper-search-engine-holder {
    position: relative;
    margin: 5px auto;
    max-width: 1000px;
}
.search-item-list a{
	color: var(--kc-text-color-green)!important;
}

.search-item-list a:hover{
	color: var(--kc-yellow-color)!important;
}

.result-box ol, .result-box ul 
.top-result-box ol, .top-result-box ul {
	padding: 0;
    padding-left: 0;
}
.themehelper-search-engine-input::placeholder {
  color: var(--kc-text-color-green)!important; 
}
.themehelper-search-engine-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: var(--kc-text-color-green)!important; 
}

.themehelper-search-engine-input::-moz-placeholder { /* Firefox 19+ */
color: var(--kc-text-color-green)!important; 
}

.themehelper-search-engine-input:-ms-input-placeholder { /* IE 10+ */
  color: var(--kc-text-color-green)!important; 
}

.themehelper-search-engine-input::placeholder { /* Standard syntax */
color: var(--kc-text-color-green)!important; 
}
.search-results-items {
    display: block;
    min-height: 250px;
}
div#top-auto-complete-search-result {
    z-index: 2002;
    margin-top: 2.5rem;
	display: none;
	color:#000;
	
}
div#top-auto-complete-search-result .search-item-list {
    max-height: 70vh;
    overflow: hidden;
    overflow-y: auto;
	padding-bottom: 6rem;
}

.input-group {
  display: flex; /* Ensure the input and button are aligned in a row */
  align-items: stretch; /* Makes children stretch to the same height */
}

.input-group-text {
 
    line-height: 0!important;
}

.input-group-text {
  padding: 0; /* Remove padding to ensure square sizing */
  display: flex;
  justify-content: center;
  align-items: center;
}




a#close-btn {
	position:absolute;
    top: 5px;
    margin: auto;
    z-index: 100;
    right: 5px;
    width: 25px;
    height: 25px;
    background: #000;
    color: var(--kc-text-color-green);
    text-align: center;
    font-size: 1.5rem;
    line-height: 20px;
    border-radius: 10%;
    cursor: pointer;
}
a#close-btn:hover {
    
    color: #fff;
    
}
a.clear-input{
	text-decoration: none!important;
}
.header-caption h1.page-title {
    background: transparent!important; 
    color: #fff!important; 
    padding: 0 0.3rem!important; 
    max-width: max-content!important; 
    font-size: clamp(1.5rem, 3vw, 2.5rem)!important; 
	margin-top: 3rem;
}
.highlighted-stories fieldset.header-caption{
background-size:cover;
width:min-content;
min-width:22em;
color:#fff;
margin:0
}
/*
#header + .container + .container .study-with-us-box{
background-color:var(--kc-text-color-green);
display:inline;
float:left;
margin:1em;
width:min-content;
border-radius:1em 0 1em 0;
padding:1em;
height:14em;

}*/

/*.study-with-us-box {
  background-color: var(--kc-text-color-green);
  border-radius: 2em 0 2em 0;
  margin: 4.5em 1em 1em 1em;
  padding: 1em;
  overflow:hidden;
  width: 225px; /* Set a fixed width to make all boxes the same size */
  /*height: 300px; /* Set equal height for all boxes */
  /*display: inline-flex; 
  flex-direction: column;
  text-align: left; /* Ensure text is left-aligned 
}*/

.study-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
}

.study-with-us-box {
  background-color: rgba(0, 210, 185, 0.9);
  border-radius: 2em 0 2em 0;
  flex: 1 1 calc(25% - 20px); /* Each card takes up 25% of the container width minus the gap */
  flex-grow: 0; /* Prevents cards from stretching to fill the row */
  box-sizing: border-box; /* Ensures padding and borders are included in the card's width */
  padding: 1em 1em 1em 1.5em;
  text-align: left; /* Ensure text is left-aligned */
}

/* Extra Small Devices (mobile, below 480px) - 1 card per row */
@media (max-width: 480px) {
  .study-with-us-box {
    flex: 1 1 100%;
	  
  }
}

/* Small Devices (portrait tablets and small desktops, 481px to 768px) - 1 cards per row */
@media (min-width: 481px) and (max-width: 768px) {
  .study-with-us-box {
    flex: 1 1 100%;
  }
}

/* Medium Devices (landscape tablets, small desktops, 769px to 991px) - 1 cards per row */
@media (min-width: 769px) and (max-width: 991px) {
  .study-with-us-box {
    flex: 1 1 100%;
  }
}

/* Large Devices (desktops, 992px to 1199px) - 2 cards per row */
@media (min-width: 992px) and (max-width: 1199px) {
  .study-with-us-box {
    flex: 1 1 calc(50% - 20px);
  }
}

/* Extra Large Devices (large desktops, 1200px and up) - 4 cards per row */
@media (min-width: 1200px) and (max-width: 1399px) {
  .study-with-us-box {
    flex: 1 1 calc(50% - 20px);
  }
}


.study-with-us-box h2, .study-with-us-box h2 a {
  margin: 0;
  font-size: 0.9em;
  text-decoration: none;
  padding: 0.2em 0 0.6em 0;
}

.study-with-us-box p, .study-with-us-box p a {
  margin: 0 0 1em 0;
  font-size: 0.77em;
  line-height: normal;
  text-decoration: none;
  padding: 0 1em 0 0;

}

/* custom study course list for study with us boxes */

.study-course {
  list-style: none !important;
  font-size: 0.8em;
  padding: 0;
  margin: 0;
  display: block;
  list-style-type: none;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 0;
}

.study-course li {
   margin: 10px 0;             /* Add padding for spacing */
   /*border-bottom: 1px solid #ddd; /* Add a bottom border for separation */
   
}

.study-button {
  display: inline-block;
  position: relative;
  padding: 10px 10px 10px 20px;
  width: 95%;
  max-width: 300px;
  font-size: 1rem;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  background-color: #7BE5D9;
  color: #fff;
  border-radius: 0 0 0 0;
  transition: background-color 0.3s ease, transform 0.2s ease; 
}

.study-button:hover, .study-button:focus {
  background-color: #3EDBC9;
  transform: scale(1.05);
}

.study-button:focus {
  outline: 3px solid #ffa500; /* Accessible focus style */
  outline-offset: 3px;
}

/* Optional styling for adding icons or bullets */
.study-button::after {
  /*content: '\25B6';*/
  font-size: 1rem;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #00D2B9;
  transition: transform 0.3s ease;
}


.study-button:hover::after {
  transform: translateY(-50%) translateX(5px); /* Add subtle movement on hover */
  color: #000;
} 

.study-course li:hover i {
  transform: rotate(180deg);
  color: #fff;
}
.study-course li i {
  transition: transform 0.3s ease;
  color: #000;
}
/* end of custom list styling */


/* Optional: Remove extra margins from elements surrounding the wrapper */
.hero-header-caption .container, 
.hero-header-caption .container-fluid {
  margin: 0;
  padding: 0;
}

/*
#header + .container + .container .fieldset-wrapper{
display:flex;
vertical-align:middle
} */

.fieldset-wrapper {
  display: flex; /* Flexbox layout */
  width: 100%;
  justify-content: center; /* Horizontally align boxes */
  align-items: center; /* Vertically align boxes */
  /*gap: 1em;  Adds space between boxes */
  padding: 0; 
  margin: 0 auto; /* Center the wrapper */
}

.pagelinkrow:nth-child(1){
  background: rgba(0, 210, 185, 1);
  border-radius:2em 0 0 0
}

.pagelinkrow:nth-child(2){
  background: rgba(0, 210, 185, 0.75);
  border-radius:0 0 0 0
}

.pagelinkrow:nth-child(3){
  background: rgba(0, 210, 185, .5);
  border-radius:0 0 2em 0
}

.pagelinkrow a, .pagelinkrow:nth-child(2){
   color:#000000;
   font-weight:normal
}

.fronth1 h1{
    text-align:center;
    font-weight:600;
    padding:1em;
    font-size:3em;
    color:#000000
}

.pagelinkrow {
  display: flex;
  flex-direction: column; /* Stacks heading and paragraph vertically */
  justify-content: center; /* Vertically center the text */
  align-items: flex-start; /* Align the text to the left */
  padding: 2rem 2rem 2rem 2rem; /* Add some padding for better spacing */
  min-height: 150px; /* Ensures all rows have the same height, adjust as needed */
  margin-bottom: 10px; /* Add spacing between rows */
}

/*.pagelinkrow h3 a {
    font-weight:100;
	padding-left:3em;
    padding-bottom:1em;
	width:100%;
	display:inline-block
} */

.pagelinkrow h2 a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1em;
  font-weight: 500;
  margin: 0;
  text-decoration: none !important;
}

.pagelinkrow h2 a i {
  position: static;
  transition: transform 0.3s ease;
  color: #000;
  font-size: 0.65em;  
  margin-left: 0.5rem; /* Add space between the text and icon */
}

.pagelinkrow h2 a:hover i {
  transform: rotate(180deg);
  color: #fff;
}

.pagelinkrow p {
  margin: 0;
  font-size: 0.8em;
  line-height: normal;
  font-weight: normal;
}

/*.pagelinkrow h2 a{
    font-weight:100;
	padding-left:2em;
    padding-top:1em;
	width:100%;
	display:inline-block
}*/

/*@media (min-width: 1200px) {
  .pagelinkrow h3, .pagelinkrow h3 a {
    font-size: 1.1em; /* Re-apply the same size for large screens */
	/*font-weight: 500;
    text-decoration: none !important;
} */


.hero-header-caption {
  /*background-image: url("/sites/default/files/2024-09/Faculty-of-Education_14469893377_o.jpg"); */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  width: 100%; /* Full width */
  display: flex; /* Flexbox for aligning content */
  justify-content: center; /* Horizontally center content */
  align-items: center; /* Vertically center content */
  padding: 2rem 2rem 2rem 2rem;
}
	
	
	

.featured-bottom{
width:fit-content;
margin:auto;
}

#header + .container + .container .fieldset-wrapper > div{
margin:auto
}

#header + .container + .container .fieldset-wrapper > div{
width:max-content
}

#header + .container + .container .study-with-us-box a{
color:#000	
}

.highlighted-stories{
padding-bottom:1em
}

.block-theme-helper-news-grid-block .col-md-8{
width:100%
}

.block-theme-helper-news-grid-block #news-grid-data-carousel .carousel-item img{
max-width:44em
}

#block-kings-barrio-themehelpernewsgridblock, #block-kings-barrio-views-block-articles-block-2{
float:left
}

#block-kings-barrio-views-block-articles-block-2{
width:min-content
}

#block-kings-barrio-views-block-articles-block-2 + *{
clear:both
}

 #custom-autocomplete-wrapper {
    max-height: 300px;
	 width: 100%; /*PARENT WIDTH*/
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
	 display:none;
	 transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
  }
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
  * html .custom-autocomplete-wrapper{
    height: 500px;
	  width: 100%; /*PARENT WIDTH*/
  }


#basic-page-header{
	padding: 0!important;
	
}

.hero .hero-alternative-content {
	height: auto!important;
	 margin-top: 150px;
}
@media (max-width: 1399px) {
    /* CSS rules here will only be applied when the viewport width is less than 1400px */
	.hero .hero-alternative-content {
	height: auto!important;
	 margin-top: 120px;
}

}
.curve-top-right {
    position: relative;
    background: var(--kc-text-color-green-half);
    height: auto;
    border-top-right-radius: 100px;	
	
	
}
.curve-top-right h1 {
    background: var(--kc-text-color-green);
    color: #000;
    padding: 0 0.3rem;
    max-width: max-content;
    font-size: clamp(2.5rem, 4vw, 3rem)!important; 
	
}
.truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em; /* Adjust the line height as needed */
  height: auto; 
 
}
.curve-top-right .title-wrapper {
    max-width: 90%;
    width: 90%;
    
}

/*SHORTHAND ADPTATION SUPPORT*/

.story-header{
	margin-top:100px;
}
@media (max-width: 1399px) {
 .story-header{
	margin-top:65px;
}
}
@media (max-width: 450px) {
 .story-header{
	margin-top:40px;
}
}



/* Container */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 15px; /* Spacing between items */
  margin: 10px auto; /* Centers the container with a vertical margin */	
}

/* Flex items */
.flex-item {
  flex: 1; /* Allows the item to grow */
  min-width: 0; /* Ensures items can shrink below their minimum content size */
  flex-basis: calc(33.333% - 15px); /* Adjusts for 3 items per row, accounting for the gap */
  	
}

/* Adjustments for containers with more than 3 items */
.flex-container:nth-last-child(n+4) .flex-item {
  flex-basis: calc(33.333% - 15px); /* Ensures a 3-column layout */
}

/* Specific styling for content inside flex items */
.flex-item-content {
  min-height: 200px; /* Sets a minimum height for each item */
}
@media (max-width: 1399px) {
.flex-item {
  flex: 1; /* Allows the item to grow */
  min-width: 0; /* Ensures items can shrink below their minimum content size */
  flex-basis: calc(50% - 15px); /* Adjusts for 3 items per row, accounting for the gap */
  	
}
.flex-container:nth-last-child(n+4) .flex-item {
  flex-basis: calc(50% - 15px); /* Ensures a 3-column layout */
}
	
div#top-auto-complete-search-result {
    margin-top: 6rem;	
}
	
	}
@media (max-width: 450px) {
 .flex-item {
  flex: 1; /* Allows the item to grow */
  min-width: 0; /* Ensures items can shrink below their minimum content size */
  flex-basis: calc(100% - 15px); /* Adjusts for 3 items per row, accounting for the gap */
  	
}
	}
.flex-container:nth-last-child(n+4) .flex-item {
  flex-basis: calc(100% - 15px); /* Ensures a 3-column layout */
}
div#top-auto-complete-search-result {
    margin-top: 7rem;	
}