/*===============***
* 
*HEADER AREA BEGINS*
*
**===============*/
.header {
  width: 100%;
  background-color: var(--body-color);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  box-shadow: 0 2px 8px hsla(220, 68%, 12%, 0.1);
  transition:  .4s; /*For animation to Dark Mode */
}

/*=============== NAV AREA START ===============*/
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
}
.nav__data {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  column-gap: 0.25rem;
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  transition: color 0.3s;
  width: 240px;
}
.nav__logo i {
  font-size: 1.25rem;
}
.nav__logo:hover {
  color: var(--primary-color-lighten);
}
.nav__toggle {
  position: relative;
  width: 32px;
  height: 32px;
}
.nav__toggle-menu, .nav__toggle-close {
  font-size: 1.25rem;
  color: var(--title-color);
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  cursor: pointer;
  transition: opacity 0.1s, transform 0.4s;
}
.nav__toggle-close {
  opacity: 0;
}

@media screen and (max-width: 1118px) {
  .nav__menu {
    background-color: var(--body-color);
    position: absolute;
    left: 0;
    top: 2.5rem;
    width: 100%;
    height: calc(100vh - 3.5rem);
    overflow: auto;
    padding-block: 1.5rem 4rem;
    pointer-events: none;
    opacity: 0;
    transition: top 0.4s, opacity 0.3s;
  }
  .nav__menu::-webkit-scrollbar {
    width: 0.5rem;
  }
  .nav__menu::-webkit-scrollbar-thumb {
    background-color: hsl(220, 12%, 70%);
  }
}
.nav__link {
  color: var(--title-color);
  font-weight: var(--font-semi-bold);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s;
}
.nav__link:hover {
  background-color: var(--primary-color-lighten);
}

.nav__link.cta{
  background-color: var(--primary-color);
  color: var(--body-color);
  outline: none;
  padding: 8px 15px;
  border: 2px solid var(--primary-color) ;
  border-radius: 100px;
}

.nav__link.cta:is(:hover) {
  color: var(--primary-color);
  background-color: var(--body-color);
}

/* Show menu */
.show-menu {
  opacity: 1;
  top: 3.5rem;
  pointer-events: initial;
}

/* Show icon */
.show-icon .nav__toggle-menu {
  opacity: 0;
  transform: rotate(90deg);
}

.show-icon .nav__toggle-close {
  opacity: 1;
  transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown__button {
  cursor: pointer;
}
.dropdown__arrow {
  font-size: 1.5rem;
  font-weight: initial;
  transition: transform 0.4s;
}
.dropdown__content, .dropdown__group, .dropdown__list {
  display: grid;
}
.dropdown__container {
  background-color: var(--primary-color-lighten);
  height: 0;
  overflow: hidden;
  transition: height 0.4s;
}
.dropdown__content {
  row-gap: 1.75rem;
}
.dropdown__group {
  padding-left: 2.5rem;
  row-gap: 0.5rem;
}
.dropdown__group:first-child {
  margin-top: 1.25rem;
}
.dropdown__group:last-child {
  margin-bottom: 1.25rem;
}
.dropdown__icon i {
  font-size: 1.25rem;
  color: var(--primary-color);
}
.dropdown__title {
  font-size: var(--small-font-size);
  font-weight: var(--font-semi-bold);
  color: var(--title-color);
}
.dropdown__list {
  row-gap: 0.25rem;
}
.dropdown__link {
  font-size: var(--smaller-font-size);
  font-weight: var(--font-medium);
  color: var(--text-color);
  transition: color 0.3s;
}
.dropdown__link:hover {
  color: var(--text-color-light);
}

/* Rotate dropdown icon */
.show-dropdown .dropdown__arrow {
  transform: rotate(180deg);
}

.hero-section{
  background-color:rgba(0, 0, 0, .2);
  background-image: url(/media/rhodesuniversity/styleassets/testingforqhama/scss/RUHeroBGPattern-90.png);
  background-blend-mode:hard-light;
  height: auto;
  padding-block-start: calc(var(--header-height) + 6rem);

}

.hero__content{
  color: #fff;
  margin-block-end: clamp(2rem, 2.5vw, 9rem);
  align-items: flex-start;
  
}


.hero__content h5{
  color: #FFF;
  font-family: Inter;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.5rem; /* 120% */
  letter-spacing: 0.05rem;
  text-transform: capitalize;
}

.hero__title{
  color: #fff;
  font-size: clamp(4.2rem, 3.5vw , 5.6rem);
  line-height: clamp(4.2rem, 3.5vw , 6rem);
  font-weight: 900;
  letter-spacing: 1px;
}

.hero__item{
  color: var(--container-color);
  padding-inline: 2rem;
}

.hero__link{
  color: var(--container-color);
  font-size: var(--small-font-size);
  font-weight: var(--font-bold);
}
.hero__item-border{
  border-inline: 1px solid var(--secondary-color--3-light);
}
.hero__img-box{
  align-items: end;
}

.hero__img{
  width: 100%;
}

.btn-hero{
  border-radius: 50px;
  gap: 5px;
  transition: all .4s;
}

.btn-hero span{
  font-weight: var(--font-semi-bold);
}

.btn-hero i{
  font-size: 2.6rem;
}

.btn-hero:hover{
  color: var(--primary-color);
  background-color: var(--secondary-color--3-lighten);
}

/*===============**
*HERO SECTION ENDS*
**===============*/

/*===============***
* 
*CAMPAIGN CTA BEGINS*
*
**===============*/
.compaign-cta{
  background-color: var(--secondary-color--5-lighten);
  padding-block: 4rem;
}

.campaign-btn{
  background-color: var(--secondary-color--5);
  transition: all .4s;
}

.campaign-btn:hover{
  background-color: var(--secondary-color--5-light);
  color: var(--secondary-color--5);
}

.campaign-btn i{
  font-size: var(--h2-font-size);
}

.future-cta__title{
  font-weight: 900;
}

.future-cta__title, .fund-figures{
  flex-shrink: 0;
  margin-block-end: 1rem;
  color: var(--title-color);
}

.future-cta__title>span{
  font-weight: 400;
}

.future-cta__btns{
 gap: 1rem;
 flex-shrink: 0;
}

.fund-figures h6{
  font-weight: 400;
}

.fund-figures h4{
  font-size: var(--h2-font-size);
}

.fund-figures:last-child{
  padding-inline-start: 15px;
  border-left: solid var(--text-color) 1px;
}

.requestInfo__link{
  color: var(--grey-color-darken);
  padding-inline: 1.2rem;
}

/* === STUDENT LIFE SECTION ENDS === */

/*===============***
* 
*QUICK REDIRECT CTA BEGINS*
*
**===============*/

.quick_rd{
  padding-block: 6rem;
  background-color: #F3F3F3;
}

.quick_rd__selector{
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  color: var(--title-color);
  padding: 1rem 1.6rem;
  outline: #F3F3F3;
  border-radius: 8px;
  border: solid 1px #E1E2E9;
  transition: all .4s;
}

.quick_rd__selector:hover{
  border-color: var(--primary-color);
}

.quick_rd__selector option:hover{
  background-color: var(--primary-color-lighten);
}




/* ========= BUTTONS START ==========*/
.button{
  display:inline-block;
  background-color: var(--primary-color);
  color: #fff;
  padding: 1.6rem 2.8rem;
  border-radius: .8rem;
  font-weight: var(--font-medium);
  transition: .3s;
}

.button:is(:hover){
  background-color: var(--primary-color);
}

.button__icon{
  transition: .3s;
}

.button:is(:hover) .button__icon{
  transform: translateY(0.4rem);
}



.button--flex{
  display: inline-flex;
  align-items: center;
  column-gap: .8rem;
}

.button--link{
  color: var(--primary-color);
}

.button--link:hover .button__icon{
  transform:  translateY(0.4rem);
}
/* ========== BUTTONS END ========== */

/*===============***
* 
*ABOUT SECTION START*
*
**===============*/
.about{
  background-color: #000;
  color: var(--body-color);
}

.about__container, .campusInfo__container{
  row-gap: 3.2rem;
}

.givingabout__title{
  color: var(--body-color);
}

.about__img__box{
  background-image: url(/media/rhodesuniversity/styleassets/testingforqhama/img/TheBigThree.png);
  height: 720px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about__img, .campusInfo__img{
  width: 100%;
}

.about__title, .campusInfo__title{
  margin-bottom: var(--mb-1-6);
}

.about__title{
  font-size: var(--h2-font-size);
}

.about__description, .campusInfo__description{
  margin-bottom: var(--mb-3-2);
}

.about__description{
  margin-block-start: 3rem;
  color: #fafafa;
}

/*===============***
* 
*ABOUT SECTION END*
*
**===============*/

/*===============**
*FUNDRAISING PRIORITIES SECTION END*
**===============*/

.campusInfo__container, .fp_container{
  background-color: #000;
  border-radius: 8px;
  color: var(--body-color);
  overflow: hidden;
}

.fp_container{
  align-items: center;
  margin-block-end: 4rem;
  box-shadow: 4px 6px 8px -6px rgba(0, 0, 0, 0.6);
}

.fp_data{
  padding: 3rem;
}

.fp_border__right{
  border-right: 8px solid;
}


.fp_border__left{
  border-left: 8px solid;
}

.fp_border__color1{
  border-color: #6799C8;
}

.fp_border__color2{
  border-color: #ADB8BF;
}

.fp_border__color3{
  border-color: #009EC8;
}

.fp_border__color4{
  border-color: #6B8A16;
}

.fp_border__color5{
  border-color: #B8C99E;
}

.fp_border__color6{
  border-color: #DB3168;
}

.fp_icon__container{
  width: 70px;
  align-items: center;
  justify-content: center;
}
.fp_icon{
  width: 100%;
}

.sectionIntro{
  padding-inline: 22rem;
  text-align: center;
  margin-block-end: 6rem;
}


.fd_data__heading{
  grid-template-columns: 100px 1fr;
  gap: 1.6rem;
  align-items: start;
  margin-block-end: 3rem;
}

.fp_data__title{
  margin: 0;
}

.fp_data__description{
  color: var(--off-white);
  font-size: var(--small-font-size);
}

.fp_btn{
  border-radius: 50px;
  padding: .8rem 1.2rem;
  font-size: var(--small-font-size);
}



/*===============***
* 
*HISTORY SECTION START*
*
**===============*/



.history__container, .stats__container{
  grid-template-columns: repeat(auto-fit,minmax(250px, 1fr));
  gap: clamp(3rem, 1.5vw,6rem);
}



.history__card, .history__list{
  row-gap: 2.4rem;
}

.history__card-title{
  align-items: center;
  column-gap: 1.5rem;
}



.history__card-title i{
  display: block;
  text-align: end;
  font-size: 4.8rem;
  color: var(--primary-color);
}

.history__card-nav{
  justify-content: center;
}

.history__link{
  align-items: end;
}

.history__description{
  margin-block-end: 0;
}

.stats__number{
  font-size: var(--big-font-size);
  line-height: var(--big-font-size);
  font-weight: var(--font-black);
  color: #222;
  margin-block-end:1.4rem ;
}

.stats__description{
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 2;
}

/* ===== HISTORY SECTION ENDS ===== */

/*===============***
* 
*CAMPUS INFORMATION SECTION BEGINS*
*
**===============*/

#campusInfoContainer> .campusInfo__img{
grid-column-start: 1;
grid-row-start: 1;
}

.campusInfo__title{
  font-size: var(--h3-font-size);
}

.campusInfo__heading{
  column-gap: 1.6rem;
}

.campusInfo__heading i, .degreeOptions__title i{
  color: var(--primary-color);
  font-size: 5.2rem;
  margin-bottom: 1.2rem;
}

.campusInfo__img, .admissionSection__img, .sports__img{
  height: 100%;
}

/* CAMPUS INFORMATION SECTION ENDS */

/*===============***
* 
*DEGREES OPTIONS SECTION BEGINS*
*
**===============*/

.degreeOptions__container{
  gap: 6rem;
}


.degreeOptions__btn{
  display: inline-block;
  color: #555;
  border-bottom: 1px solid #555;
  transition: .3s;
}

.degreeOptions__btn{
  color: #222;
  border-color: #222;
}

.degreeOptions__list{
  row-gap: .8rem;
  margin-bottom: 3rem;
  font-size: var(--h3-font-size);
}

.admimissionSection__container{
  column-gap: 3.2rem;
}

/*===============***
* 
*FACULTY CARD SLIDER BEGINS*
*
**===============*/

.faculty{
  display: flex;
  align-items: center;
  justify-content: center;

}

.card__container{
  padding-block: 5rem;
}

.card__content{
  margin-inline: 1.75rem;
  border-radius: 1.25rem;
  overflow: hidden;
}

.card__article{
  width:300px;
  border-radius: 1.25rem;
  overflow: hidden;
  background-color: var(--primary-color-lighten);
 
}

.card__data{
  padding: 1.8rem 2.2rem 3.2rem;
}

.card__description{
  margin-block-end: 1.8rem;
  color:#333;
  font-size: var(--small-font-size);
}

.science__color{
  color: var(--secondary-color--2);
}

.science__color-bg{
  background-color: var(--secondary-color--2-lighten);
}

.law__color{
  color: var(--secondary-color--3);
}

.law__color-bg{
  background-color: var(--secondary-color--3-lighten);
}


.education__color{
  color: var(--secondary-color--4);
}

.education__color-bg{
  background-color: var(--secondary-color--4-lighten);
}

.humanities__color{
  color: var(--secondary-color--5);
}

.humanities__color-bg{
  background-color: var(--secondary-color--5-lighten);
}



.commerce__color{
  color: var(--secondary-color--6);
}


.commerce__color-bg{
  background-color: var(--secondary-color--6-lighten);
}

.pharmacy__color{
  color: var(--primary-color);
}


.pharmacy__color-bg{
  background-color: var(--primary-color-lighten);
}

/* === CAMPUS INFORMATION SECTION ENDS === */


/*===============***
* 
*HOW TO APPLY SECTION BEGINS*
*
**===============*/

.apply{
  margin-block-end: 6rem;
}

.apply__heading{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-block-end: 5.2rem;
}

.apply__list{
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
}

.apply__item-title{
  gap:1.6rem;
  margin-block-end: 2rem;
}

.apply__item-title i{
  font-size: 4rem;
}



/* === HOW TO APPLY SECTION ENDS === */

/*===============***
* 
*SCHOLARSHIP CTA BEGINS*
*
**===============*/

.scholarship{
  background-color: var(--tertiary-color);
}

.future-cta__container{
  gap: 6rem;
}

/* === HOW TO APPLY SECTION ENDS === */

/*===============***
* 
*ALUMNI & DONORS BEGINS*
*
**===============*/

.alumni{
  margin-block-end: 9.2rem;
}

.alumni__cards{
  gap:3rem;
}

.alumni__info,
.alumni__data{
    border-radius: .8rem;
}

.alumni__info{
  margin-bottom: 3rem;
}

.alumni__data{
  padding: 3.2rem 2rem;
}

.alumni__data p{
  color: #fff;
}

.alumni__info{
  align-self: center;
}

.alumni__button-container{
  gap: 3rem;
}

.alumni__heading{
  margin-block-end: 3rem;
}

.alumni__icon{
  background: url(/media/rhodesuniversity/styleassets/testingforqhama/img/grad-cap-icon.png);
  width: 80px;
  height: 80px;
  margin-block-end: 1.6rem;
}

.alumni__button-container button{
  padding: .8rem 2rem;
}

.alumni__list, .alumni__description{
  margin-block-end: 4rem;
}

.alumni__item{
  font-size: var(--smaller-font-size);
  gap: 1rem;
}


/* === ALUMNI & DONORS SECTION ENDS === */


/*===============***
* 
*STUDENT LIFE BEGINS*
*
**===============*/

.studentlife{
  position: relative;
  background-image: url(/media/rhodesuniversity/styleassets/testingforqhama/img/RU_PATTERN_COMMUNITY_LARGE_CMYK.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--primary-color);
  height: auto;
  padding: 0;
}

.student__container{
  /* position: relative; */
  
  padding: 0;
  overflow: hidden;
}
.student__content{
  z-index: 5;
}

.studentlife__header{
  position: relative;
  width: 70rem;
}

.studentlife__title-box{
  gap: 40rem;
}

.studentlife__title{
  font-size: clamp(4.8rem, 1.5vh, 5.6rem);
  line-height: clamp(4.8rem, 1.5vh, 5.6rem);
}

.studentlife__header__img{
  height: 65rem;
  width: 65.9rem;
  position: absolute;
  z-index: 3;
  top: 10%;
  left: 50%;
}


.student__nav, .student__subtext{
 width: 100%;
 height:35rem;
 z-index: 5;
}

.student__nav{
  background-color: #C2EDFF;
}

.student__subtext{
  background-color: #FFB81C;
}

.studentlife__imgbox{
  width: 100%;
  height: 70rem;
  background-color: url(/media/rhodesuniversity/styleassets/testingforqhama/img/Frame940.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size:cover;
}

.studentlife__img{
  object-fit:cover;
  object-position:center;
  width: 100%;
  height: 69.9rem;
}

/* .studentlife{
  position: relative;
  background-image: url(/media/rhodesuniversity/styleassets/testingforqhama/img/RU_PATTERN_COMMUNITY_LARGE_CMYK.png);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: cover;
}

.studentlife__bg___overlay{
  background-image: url(/media/rhodesuniversity/styleassets/testingforqhama/img/Frame940.png);
  display: none;
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 50vw auto;
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

}

.studentlife__container{
  margin-inline: 0;
}
.studentlife__heading-container{
  position: relative;
  overflow: hidden;
  padding-inline-start: 30px;
  padding-block-start: 30px;
}

.studentlife__title,.campusexp__title{
  font-size: var(--h1-font-size);
  line-height: var(--h1-font-size);
  z-index: 4;
}

.student__wrap__container{
  position:absolute;
  top: 0;
  left: 30%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.student__wrap{
  width: 135%;
  height: 100%;
  background-image: url(/media/rhodesuniversity/styleassets/testingforqhama/img/student-life-img1.png);
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: contain;
}

.studentlife__title-container{
  z-index: 2;
}

.studentlife__content{
  z-index: 5;
}

.studentlife__link__container{
  margin-block-start: 23rem;
}

.studentLife__btn{
  margin-block-end: 3.2rem;
}

.studentlife__data,.studentlife__links {
  min-height: 30rem;
}

.studentlife__links{
  background-color: var(--secondary-color--5-lighten);
}

.studentlife__description{
  font-size: var(--h3-font-size);
  font-weight: var(--font-bold);
  color: var(--grey-color-darken);
} */
/* === STUDENT LIFE SECTION ENDS === */

/*===============***
* 
*THE CAMPUS EXPERIENCE SECTION BEGINS*
*
**===============*/

.campusexp__container {
  gap: 3rem;
  flex-wrap: wrap;
}

.campusexp__title__container{
  flex-shrink: 0;
}

/* === STUDENT LIFE SECTION ENDS === */


/*===============***
* 
*SPORT & ACTIVITIES SECTION BEGINS*
*
**===============*/
.sports__img{
  width: 100%;
  height: auto;
  border-radius: 1rem;
  margin-block-end: 3rem;
}

.sports__links{
  flex-wrap: wrap;
}

/* === STUDENT LIFE SECTION ENDS === */



/*===============***
* 
*NEWS & EVENTS BEGINS*
*
**===============*/

.news__container{
  gap:5rem;
  margin-block-end: 8rem;
  
}


.news__singleview___imgbox, .news__item___imgbox{
  width: 100%;
}

.news__singleview___img{
  width: 100%;
  height: auto;
  border-radius: .8rem;
}

.news__list{
  gap:3rem;
}

.news__item___date, .news__singleview___date{
  color: var(--primary-color);
  font-weight: var(--font-bold);
}

.news__item{
 grid-template-columns: 3fr 7fr;
 gap: 2.4rem;
}

.news__item___except, .news__singleview___except{
  font-size: var(--small-font-size);
  margin-block-start: .4rem;
  margin-block-end: 1.2rem;
}

/* === STUDENT LIFE SECTION ENDS === */




/*===============***
* 
*FOOTER BEGINS*
*
**===============*/

.footer{
  background-color: var(--grey-color);
  padding-block: 1rem;
}

.footer p{
  color: var(--container-color);
}

.footer-widget{
  background-color: var(--grey-color-darken);
  padding-block: 8rem;
}

.footer__container{
  color: #fff;
  width: 100%;
  gap:3rem;
}

.footer__list{
  gap: 3rem;
}

.footer__content p{
  padding-inline-end: 4rem;
}

.footer__link{
  color: var(--off-white);
}

.copyright{
  background-color: var(--grey-color-dark);
}

.copyright__container{
  padding-block-start: 2.4rem ;
}

/* === FOOTER ENDS === */

/* Swiper class */

.swiper-button-prev::after,
.swiper-button-next::after{
  content: '';
}

.swiper-button-next,
.swiper-button-prev{
  width: initial;
  height: initial;
  font-size: 3rem;
  color: var(--primary-color);
  top: 2rem;
}

.swiper-button-prev{
  left:65% ;
}

.swiper-button-next{
  right: 2rem;
}

.swiper-pagination-bullet{
  background-color: var(--secondary-color) ;
  opacity: 1;
}

.swiper-pagination-bullets.swiper-pagination-horizontal{
  bottom: 0px;
}

.swiper-pagination-bullet-active{
  background-color: hsl(var(--hue),32%,40%);
}

/* ======== SCROLL UP ======== */
.scrollup{
  position: fixed;
  background-color: var(--primary-color);
  left: 1.6rem;
  bottom:-30%;
  display: inline-flex;
  padding: .8rem;
  border-radius: .4rem;
  z-index: var(--z-tooltip);
  opacity: .8;
  transition: .5s;
}

.scrollup__icon{
  font-size: 1.6rem;
  color:#fff;
}

.scrollup:hover{
  background-color: var(--primary-color);
  opacity: 1;
}

/* Show scroll up */

.show-scroll{
  bottom: 4.8rem;
}

/* ======== SCROLL BAR BEGINS======== */
::-webkit-scrollbar{
  width: 0.96rem;
  background: hsl(var(--hue), 4%,53%);
}

::-webkit-scrollbar-thumb{
  background: hsl(var(--hue), 4%,29%);
  border-radius: .8rem;
}

/* ======== SCROLL BAR ENDS======== */