styles.css

/* css styles */

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap');
:root {
  --main-font: 'Nunito Sans';
}


html{
  scroll-behavior: smooth;
}


body {
  font-family: var(--main-font);
}

main:not(.text_grid, .text_grid_title), p:not(.text_grid, .text_grid_title) {
  font-size: 1.1em !important;
}
    
    .navbar-brand > img {
      max-height: 400px;
      max-width: 200px;
      width: auto;
    }
    
    
        .sidebar nav[role=doc-toc] ul>li>a.active {
    border-left: 1px solid var(--bs-red);
    color: var(--bs-red) !important;
}


.sidebar nav[role=doc-toc] ul>li>ul>li>a.active {
    border-left: 1px solid var(--bs-red);
    color: var(--bs-red) !important;
}

.nav-link:hover, .nav-link:focus {
    color: var(--bs-red);
}

hr {
    border: 2.5px solid #c0041c;
  border-radius: 10px;
  opacity: 70%
}

/*-- scss:defaults --*/

/**** navbar overrides *****/

.navbar {
    background: black;/*linear-gradient(to right, #000428, #004e92);  **/
    position: fixed;
    width: 100%;
}

.navbar a {
    color:  white !important;
}




.dropdown-menu .dropdown-item {
text-align: center;
background: black;/*linear-gradient(to right, #000428, #004e92);  **/
transition: all 0.3s ease-in-out;
overflow: hidden;


}


.dropdown-menu .dropdown-item:hover {
  transform: scale(1.05);
}

/*Color buttons navbar*/
.quarto-color-scheme-toggle i.bi::before {
  filter: brightness(0%) saturate(100%) invert(100%); !important;
}



.dropdown-menu {
  min-width: 150px !important;
  top: 50px !important;
}

.aa-SubmitIcon{
  
  fill: white !important;
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler {
    border:0px;
    box-shadow: none !important;
}



.quarto-container {
  margin-top: 100px !important;
}


li.nav-item {
  text-align: center !important;
}

.navbar-brand{
  color: #c0041c !important;
}


.navbar .navbar-nav .nav-link.active {
    font-weight: 700 !important;
    color: #c0041c !important;
}

.navbar-brand, .navbar-nav li.nav-item a.nav-link {
    height: inherit;
    line-height: 30px !important;
    padding-top: 7px !important;
    padding-bottom: 5px !important;
}

.navbar a.nav-link,
.navbar a.nav-link:after,
.navbar a.nav-link:before {
  transition: all .4s;
}



.navbar a.nav-link {
  position: relative;
}

.navbar a.nav-link:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.'; /* make invisible, dot beneath links */
  color: transparent;
  background: #c0041c;
  height: 2px;

}

a:not(.lightbox) {
  color: #757575;
}



a.nav-link:hover:after {
  width: 70%;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #c0041c !important;
}


p > a:hover {
  color: #c0041c;
  text-decoration: none;
}

p > a {
  color: #c0041c;
  text-decoration: none;
}

p > a:not(.lightbox) {
  position: relative;
  color: #c0041c;
  text-decoration: none;
}


ul.share li a {
    background-color: #c0041c;
}

p > a:before:not(img, #TOC) {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #c0041c;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

a {
  color: #c0041c;
}

a:hover {
  color: #c0041c;
}

p > a:hover::before {
  visibility: visible;
  transform: scaleX(1);
}

.quarto-title-meta {
  margin-top: 20px;
}

.quarto.column-body {
  color: white !important;
}


h1.title .quarto.column-body  {
  color: white !important;
}

div > h1.title {
  color: white !important;
}


 .quarto-title-banner{
  margin-block-end: 1rem;
  margin-top: 50px;
  height: 85%;
  background: black;/*linear-gradient(to right, #000428, #004e92);  **/
  color: white !important;
  background-color:  white !important;
  
}


@media screen and (max-width: 991px) {
 .quarto-title-banner{
  margin-top: 50px;
  overflow: auto;
  background: black;/*linear-gradient(to right, #000428, #004e92);  **/
  color: white !important;
  background-color:  white !important;
  
}
}

@media screen and (min-width: 2183px) {
 .quarto-title-banner{
   margin-top: .15%;
  background: black;/*linear-gradient(to right, #000428, #004e92);  **/
  color: white !important;
  background-color:  white !important;
  
}
}


.layout{
  display:grid;
  place-items: center;
}




article {
  display: flex;
  width:100%;
  height:430px;
}

article img.lukas{
  
  width: 0px;
  flex-grow: 1;
  object-fit: cover;
  opacity: .8;
  transition: .5s ease;
}

article img.lukas:hover , img.lukas:focus, img.lukas:active{
  cursor: pointer;
  width:300px;
  opacity: 1;
  filter: contrast(120%);
  
}



.pic_grid{
  width: 25%;
  height: 25%;
  margin: 0px 10px 30px 20px;
  
}


@media (max-width: 850px) {
  article {
    display: flex;
    width:100%;
    height:100%;
  }

  .lukas {
width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0.8;
  transition: 0.5s ease;
  margin-bottom: 10px;
  }

  .lukas:hover,
  .lukas:focus,
  .lukas:active {
    width: 100%;
  }
}




.inline-photo {
  border: 1em solid #BA0020;
  border-bottom: 4em solid #BA0020;
  border-radius: .25em;
  box-shadow: 1em 1em 2em .25em #d56679;
  margin: 2em auto;
  transform: translateY(4em); //rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  will-change: transform, opacity;
}

.inline-photo.is-visible {
  opacity: 1;
  transform: rotateZ(0deg);
}


.em-wide {
  line-height: 1%;
}



header:not(.headroom):not(.quarto-title-block) {
  opacity: 0;
  transition: opacity .5s .25s ease-out;
}

header:not(.headroom):not(.quarto-title-block).is-visible {
  opacity: 1;
}

.heading {
  transform: translate(15%, calc(15% + 1em));
  font-size: 50px;
  font-weight: bold;
  margin-right: 100px;
}

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




.is-visible .heading {
  transform: translate(15%, 15%);
}



.heading {
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              filter 10s 2s ease-out;
  will-change: transform;
  width: -50%;
}

.main_page{
 display: flex;
    height: auto;

  max-width: 100%;
}

.grid-container {
  display: grid;
  grid-template-columns: .9fr .1fr; /* define three columns */
  grid-gap: 1px;
  align-items: center; /* align the text and image vertically */
}

.text {
  text-align: center;
  font-size: 2.5em;
  font-family: 'Source Sans Pro', sans-serif;
  animation: zoomIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 6s; /* don't forget to set a duration! */
  grid-column: 1; /* position in the first column */
  color: #ffffff;
}

.image img {
  width: 600px;
  display: block;
  height: auto;
  animation: zoomIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 6s; /* don't forget to set a duration! */
}

.image_mob img {
  display: none;
}


.image_about img {
  max-width: 100%;
  display: block;
  height: auto;
}

.image_mob_about img {
  display: none;
}


/* Media query for smaller screens */
@media only screen and (max-width: 617px) {
  .grid-container {
    grid-template-columns: 1fr; /* change to one column for smaller screens */
  }
  
  .image img {
  display: none;
}

  .image_about img {
  display: none;
}
  
  .image_mob img {
  width: 300px;
  height: auto;
  display: block;
  animation: zoomIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 6s;
}
  
    .image_mob_about img {
  max-width: 100%;
  height: auto;
  display: block;
}
  
  
}


.h1{
  z-index: -1;
  position:relative;
  display:grid;
  place-items: center;
}

.intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 720px;
  margin-top: -50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%), url("https://images.unsplash.com/photo-1587620962725-abab7fe55159?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1031&q=80");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.intro h1 {
  font-family: sans-serif;
  font-size: 60px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0;
}

.intro p {
  font-size: 20px;
  color: #d1d1d1;
  margin: 20px 0;
}

.intro button {
  background-color: #5edaf0;
  color: #000;
  padding: 10px 25px;
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4)
}

.achievements {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}

.achievements .work {
  display: flex;
  flex-direction: row;
  padding: 40px 0px 20px 0px;
  width: 100%;
  margin-left: 10px;
  border-bottom: 3px solid #c0041c;
}

.achievements .work:last-child {
  border-bottom: none;
}

.achievements .work .work-icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  margin-left: 10%;
}

.achievements .work .work-icon i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  font-size: 50px;
  color: #ffffff;
  border-radius: 50%;
  background-color: #00325E; /* Add a fancy color here */
  padding: 12px;
}

.achievements .work .work-icon .work-heading {
  font-size: 25px;
  letter-spacing: 2px;
  color: #ffffff; /* Add a complementary color here */
  margin: 0;
  text-align: center;
  padding: 10px 20px;
}



.achievements .work .work-description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70%;
  margin-left: 0;
  margin-bottom: 10px;
}

.achievements .work .work-description .work-text {
  font-size: 15px;
  color: #fff;
  margin: -5px;
  text-align: center;
}



.about-me {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  border-top: 2px solid #eeeeee;
}

.about-me-text h2 {
  font-size: 30px;
  color: #333333;
  text-transform: uppercase;
  margin: 0;
}

.about-me-text p {
  font-size: 15px;
  color: #585858;
  margin: 10px 0;
}


@media (max-width: 953px) {
  .achievements .work {
    flex-direction: column;
    align-items: center;
  }
  
  .achievements .work .work-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  .achievements .work .work-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 20px;
  }
  
  .achievements .work .work-description .work-text {
    margin-left: 0;
    text-align: center;
  }
}




.layout_footer{
  text-align: center;
  padding: 1% 6%;
  font-size: 14px;
}

@media (max-width: 530px) {
  
  .layout_footer{
  text-align: center;
  padding: 1% 6%;
  font-size: 11px;
}

.cc-icon {
  width: 14px;
  height: 14px;
  margin: 0 5px;
}
  
}



.layout_grid_cards{
  padding: 1% 2%;
  //border-top: 2px solid #eeeeee;
  height: 50%;
  display: grid;
}

.layout_grid_objectives {
  padding: 1% 10%;
}

.layout_grid_objectives_mob{
  padding: 1% 10%;
}


.layout_grid{
  padding: 1% 10%;
  //border-top: 2px solid #eeeeee;
}

.layout_table{
  padding: 1% 6%;
}

.layout_hertie{
  padding: 1% 10%;
  /*background-image: url("images/cool-background.png")*/
}

.layout_grid_6{
  padding: 1% 6%;
  display: grid;
  justify-self: end;
  margin-top: -50px;
}


div.listing-author{
  color: white !important;
}

.layout_grid_learnr{
  padding: 1% 6%;
  //border-top: 2px solid #eeeeee;
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  grid-gap: 60px;
  align-items: center;
}

.layout_grid_learnr2{
  padding: 1% 6%;
  //border-top: 2px solid #eeeeee;
  display: grid; 
  grid-template-columns: 2fr 2fr; 
  grid-gap: 60px;
  align-items: center;
}

.containerff {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.layout_grid_events{
  padding: 1% 6%;
  display: grid; 
  grid-template-columns: 1.5fr 1.5fr; 
}

.layout_grid_books{
  padding: 1% 6%;
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-gap: 60px;
  align-items: center;
}

.section_white{
  margin-top: 100px;
}

.section_white2{
  margin-top: 150px;
}


.hero-sec{
  width: 100%;
  align-items: flex-start;
  background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);
  display: flex;
  min-height: 100%;
  justify-content: center;
  padding: var(--spacing-xxl) var(--spacing-l);
}

.cardg{
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: var(--spacing-l);
grid-row-gap: 10px;
width: 100%;
transition: transform 0.3s ease;
border: none; /* add this line */
}


@media(min-width: 540px){
.cardg{
grid-template-columns: repeat(2, 1fr);
border: none; /* add this line */
height : 100%;

}
}

@media(max-width: 540px){

.cardg{
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 350px;
border: none; /* add this line */
grid-gap: 0.9rem;
}



.card__background{
  height: 50%;
  grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 350px;
border: none; /* add this line */
grid-gap: 0.9rem;
}


}



@media(min-width: 960px){
.cardg{
grid-template-columns: repeat(4, 1fr);
border: none; /* add this line */
width: 100%;
}
}
.card_img{
list-style: none;
position: relative;
border: none; /* add this line */
width: 100%;
}

.card_img:before{
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card__background{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  filter: brightness(0.75) saturate(1.2) contrast(0.85);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  transform: scale(1) translateZ(0);
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* updated line */     box-shadow: #6694bd 2px 2px 5px 2px;
}

.card_img:hover .card__heading,
.card_img:hover .card__background,
.card_img:hover .card__category{
  transform: scale(1.05) translateZ(0);
   transition: transform 0.3s ease;
   transition: box-shadow 0.5s ease, transform 0.3s ease;
}

.card_img:hover .card__background{
  transform: scale(1.05) translateZ(0);
    box-shadow: #6694bd 12px 12px 5px 2px;
}


.card__content{
  left: 0;

  padding: var(--spacing-l);
  position: absolute;
  top: 0;
}

.card__category {
  color: #FFFFFF;
  font-size: 1vw;
  margin-bottom: var(--spacing-s);
  transform: scale(1) translateZ(0);
  transition: transform 0.3s ease;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* updated text shadow */
}

.card__heading {
  color: #FFFFFF;
  font-size: 6.5vw;
  text-shadow: 2px 2px 20px rgba(0,0,0,0.4);
  line-height: 1.4;
  transform: scale(1) translateZ(0);
    transition: transform 0.3s ease;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5), 
               -1px -1px 0px rgba(0, 0, 0, 0.5), 
               1px -1px 0px rgba(0, 0, 0, 0.5), 
               -1px 1px 0px rgba(0, 0, 0, 0.5);
}

.card__heading:hover {
  transform: scale(1.1) translateZ(0);
}


@media (min-width: 540px) {
  .card__category {
    font-size: 1.8rem;
  }
  .card__heading {
    font-size: 2.3rem;
  }
}

@media (min-width: 960px) {
  .card__category {
    font-size: 0.9rem;
  }
  .card__heading {
    font-size: 2rem;
  }
}




:root{

  --text-light:  white;
  --text-lighter:  white;
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --width-container: 1200px;
}





.btn-21 {
  cursor: pointer;
  font-family: Urbanist;
  bottom: -100px;
  animation: zoomInUp; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /
  text-transform: uppercase;
  width: 120px;
  height: 40px;
  position: relative;
  color: white;
  transition: all 0.5s ease-in-out;
  border-radius: 0px;
  background: transparent;
  overflow: hidden;
  border: none;
}

.btn-21:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #bbb);
  animation: btn-21-right 2s linear infinite;
  transition: 0.5s ease-in-out;
}

.btn-21:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #bbb);
  animation: btn-21-bottom 2s linear infinite;
  animation-delay: 1s;
  transform: translateY(-100%);
}

.btn-21 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 4px;
}

.btn-21 span:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to left, transparent, #bbb);
  animation: btn-21-left 2s linear infinite;
}

.btn-21 span:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to top, transparent, #bbb);
  animation: btn-21-top 2s linear infinite;
  animation-delay: 1s;
  transform: translateY(-100%);
}

.btn-21:hover:before {
  background: linear-gradient(to right, transparent, red);
}

.btn-21:hover:after {
  background: linear-gradient(to bottom, transparent, red);
}

.btn-21 span:hover:before {
  background: linear-gradient(to top, transparent, red);
}

.btn-21 span:hover:after {
  background: linear-gradient(to left, transparent, red);
}

.btn-21:hover {
  color: red;
}

.btn-21:active:before {
  background: linear-gradient(to right, transparent, #00a7fc);
}

.btn-21:active:after {
  background: linear-gradient(to bottom, transparent, #00a7fc);
}

.btn-21 span:active:before {
  background: linear-gradient(to top, transparent, #00a7fc);
}

.btn-21 span:active:after {
  background: linear-gradient(to left, transparent, #00a7fc);
}

.btn-21:active {
  color: #00a7fc;
}

@keyframes btn-21-right {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }

}

@keyframes btn-21-top {
  0% {
    transform: translateY(100%);
  }

  100% {
    transform: translateY(-100%);
  }

}

@keyframes btn-21-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }

}

@keyframes btn-21-bottom {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }

}

.btn-21:focus {
  outline: none
}







/* Media query for smaller screens 
@media only screen and (max-width: 413px) {
 
  .quarto-category:nth-of-type(4) ~ .quarto-category {
color: red ;
bottom: 90px;
position: absolute;
display: grid;
}
 
 
   .quarto-category:nth-of-type(5) {
bottom: 90px;
position: absolute; left: 100px;
display: grid;
}

   .quarto-category:nth-of-type(6) {
bottom: 90px;
position: absolute; left: 150px;
display: grid;
}
 
  
}*/

#container {
  padding: 1rem;
  max-width: 1000px;
  justify-content: center;
}

.user-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 350px;
  grid-gap: 0.9rem;
  line-height: 1.2; 
}

.card {
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
  height: 100%;
  width: 100%;
  line-height: 1.2; 
}

.card_team {
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 5px;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  height: 100%;
  width: 100%;
  line-height: 1.2; 
}


.card:hover, .card:focus, .card:active{
  box-shadow: inset 0 100px 1000px 10px rgba(192, 4, 28, .5);
}

.card_team:hover, .card_team:focus, .card_team:active{
  box-shadow: inset 0 100px 1000px 10px #1C93E4;
  cursor: pointer;
  
}


.card_team:hover {
  box-shadow: 1em 1em 2em .25em #c0041c;
  transition: all .4s ease;
}



.card:hover .user-content,
.card_team:hover .user-content{
  opacity: 1;
  height: 20%;
}

.user-content {
  opacity: 0;
  transition: all 0.5s ease-in-out;
  line-height: 1.2;
  height: auto; 
}

.bio {
  margin-top: 25vh;
  line-height: 1.8; 
}

.social {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 1px;
  line-height: 1.2; 
}

.hover_esp{
  color: white;
  bottom: 0; 
  opacity: 1;
  position: fixed;
  transition-timing-function: ease-in-out;
  transition: 0.5s;
}

.hover_esp_team {
  color: white;
  bottom: 0; 
  position: fixed;
  font-size: 30px;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}



/* Responsiveness */
@media (min-width: 600px) and (max-width: 767px) {
  
.card, .card_team {
  position: relative;
}
.bio {
  margin-top: 37vh;
  font-size: 1rem;
  line-height: 1.2; 
  position: relative;
}
  
  .user-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card .text_grid{
  margin-top: -200px;
  font-size: .7rem;
  position: relative;
}

.card .text_grid_title{
  margin-top: -310px;
  position: relative;
}


}

/* Responsiveness */
@media (min-width: 400px) and (max-width: 600px) {
  
    .user-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card .text_grid_title{
  font-size: 1rem;
  position: relative;
  margin-top: -300px;
}

  .card .text_grid{
  margin-top: -130px;
  position: relative;
  font-size: .6rem;
}
  
.card, .card_team {
  position: relative;
}
.bio {
  margin-top: 330px;
  font-size: 1rem;
  line-height: 1.2; 
  position: relative;
}
  
 
}



@media (min-width: 1185px) {
  

  .card .text_grid{
  font-size: .6rem;
}

.card .text_grid_title{
  font-size: 1rem;
  position: relative;
  margin-top: -330px;
}

}



@media (min-width: 767px) and (max-width: 1000px) {
  
    .user-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
.card, .card_team {
  position: relative;
}
.bio {
  margin-top: 320px;
  font-size: 1rem;
  line-height: 1.2; 
  position: relative;
}
  
  .card .text_grid_title{
  margin-top: -270px;
  position: relative;
}

  .card .text_grid{
  font-size: .7rem;
  margin-top: -150px;
}
 
}


@media (min-width: 1000px) and (max-width: 1185px) {
  

.card, .card_team {
  position: relative;
}
.bio {
  margin-top: 270px;
  font-size: 1rem;
  line-height: 1.2; 
  position: relative;
}
  
  .card .text_grid_title{
  margin-top: -300px;
  position: relative;
}

  .card .text_grid{
  font-size: .7rem;
  margin-top: -80px;
}
 
}




@media (max-width: 400px) {
  
  .card, .card_team {
  padding: 1rem 1rem;
  background-color: #ffffff;
  border-radius: 5px;
  transition: all 0.5s ease-in-out;
  width: 100%;
}
.bio {
  margin-top: 400px;
  font-size: 1rem;
  line-height: 1.2; 
  position: relative;
}
  
  .user-container {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card .text_grid{
  color: white;
  font-size: .6rem;
  position: relative;
    margin-top: -260px;
}

.text_grid_title{
  color: white;
  font-size: 10px;
  position: relative;
    margin-top: -260px;
}


  
}


.user-container .card:nth-child(1) {
  background: url("members_images/giorgiocoppola.jpg") no-repeat;
  background-size: 400px 400px;
  background-position: center;
}

.user-container .card:nth-child(2) {
  background: url("members_images/tushiagarwal.jpeg") no-repeat;
  background-size: 400px 400px;
  background-position: center;
}

.user-container .card:nth-child(3) {
  background: url("members_images/issacjohn.jpg") no-repeat;
  background-size: 350px 450px;
  background-position: center;
}

.user-container .card:nth-child(4) {
  background: url("Presentation/images/lukas.jpeg") no-repeat;
  background-size: 400px 400px;
  background-position: center;
}
.card:nth-child(5) {
  background: url("Presentation/images/lukas.jpeg") no-repeat;
  background-size: 400px 400px;
  background-position: center;
}
.card:nth-child(6) {
  background: url("Presentation/images/lukas.jpeg") no-repeat;
  background-size: 400px 400px;
  background-position: center;
}
.user-container .card:nth-child(7) {
  background: url("Presentation/images/lukas.jpeg") no-repeat;
  background-size: 400px 400px;
  background-position: center;
}
.user-container .card:nth-child(8) {
  background: url("Presentation/images/lukas.jpeg") no-repeat;
  background-size: 400px 400px;
  background-position: center;
}

/* Image move up */
.card:nth-child(1):hover,
.card:nth-child(2):hover,
.card:nth-child(3):hover,
.card:nth-child(4):hover,
.card:nth-child(5):hover,
.card:nth-child(6):hover,
.card:nth-child(7):hover,
.card:nth-child(8):hover{

}


.user-container #gayatrishejwal.card_team {
  background: url("members/team/team/gayatri_shejwal/gayatrishejwal.jpg") no-repeat;
  background-size: 300px 400px;
  background-position: center;
}

.user-container #huydang.card_team {
  background: url("members/team/team/huy_dang/huydang.png") no-repeat;
  background-size: 300px 400px;
  background-position: center;
}

.user-container #simonmunzert.card_team {
  background: url("members/team/team/simon_munzert/simonmunzert.jpg") no-repeat;
  background-size: 300px 400px;
  background-position: center;
}

.user-container #jorgeroa.card_team {
  background: url("members/team/team/jorge_roa/jorgeroa.jpeg") no-repeat;
  background-size: 320px 350px;
  background-position: center;
}

.user-container #lukaswarode.card_team {
  background: url("members/team/team/lukas_warode/lukas.jpeg") no-repeat;
  background-size: 340px 360px;
  background-position: center;
}

.user-container #rodrigodornelles.card_team {
  background: url("members/team/team/rodrigo_dornelles/rodrigo.jpg") no-repeat;
  background-size: 400px 400px;
  background-position: center;
}

.user-container #carmengarro.card_team {
  background: url("members/team/team/carmen_garro/carmen.jpeg") no-repeat;
  background-size: 350px 350px;
  background-position: center;
}

.user-container #valeriagracia.card_team {
  background: url("members/team/team/valeria_gracia/valeriagracia.jpg") no-repeat;
  background-size: 350px 450px;
  background-position: center;
}

.user-container #davidgaribay.card_team {
  background: url("members/team/team/david_garibay/davidgaribay.png") no-repeat;
  background-size: 350px 450px;
  background-position: center;
}

.user-container #gabrielzech.card_team {
  background: url("members/team/team/gabriel_zech/gabriel.jpg") no-repeat;
  background-size: 320px 460px;
  background-position: center;
}
.user-container #lukaslehmann.card_team {
  background: url("members/team/team/lukas_lehmann/lukaslehmann.jpeg") no-repeat;
  background-size: 400px 400px;
  background-position: center;
}

.user-container #aayransalman.card_team {
  background: url("members/staff/staff/aayran_salman/aayransalman.jpeg") no-repeat;
  background-size:300px 500px;
  background-position: center;
}

.user-container #ridhimasingh.card_team {
  background: url("members/staff/staff/ridhima_singh/ridhimasingh.jpeg") no-repeat;
  background-size:400px 400px;
  background-position: center;
}



/* Image move up */
.user-container .card_team:nth-child(1):hover,
.user-container .card_team:nth-child(2):hover,
.user-container .card_team:nth-child(3):hover,
.user-container .card_team:nth-child(4):hover,
.user-container .card_team:nth-child(5):hover,
.user-container .card_team:nth-child(6):hover,
.user-container .card_team:nth-child(7):hover,
.user-container .card_team:nth-child(8):hover{

}



* {
  margin: 0;
  padding: 0;
}

h3 {
  font-size: 0.9rem;
}
p {
  font-size: 0.75rem;
}


a#hoverlogo{
  color: white;
  
}

a#hoverlogo:hover {
  color: red;
}
   
     .inline-photo3 {
  box-shadow: 1em 1em 2em .25em #004e92;
  transform: translateY(4em); //rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
              opacity .3s .25s ease-out;
  will-change: transform, opacity;
}

.inline-photo3.is-visible {
  opacity: 1;
  transform: rotateZ(0deg);
} 



.text_grid{
  color: white;
  margin-top: -120px;
  font-size: 0.50rem;
}

.text_grid_title{
  color: white;
  margin-top: -300px;
  font-size: 1rem;
  height: 2em;
}

h3#hover_esp:hover{
  display: none;
  opacity: 0;
}


.hover_esp{
  color: white;
  margin-top: -10px
  opacity: 1;
  transition-timing-function: ease-in-out;
  transition: 0.5s;
}

.card:hover .hover_esp{
  opacity: 0;
  transform: translateY(130%);
  transition-timing-function: ease-in;
  transition: 0.5s;
}


/* Scroller styling */
.scroller {
  height: 1.2em;
  line-height: 1.2em;
  position: relative;
  overflow: hidden;
  width: 10em;
}
.scroller > span {
  position: absolute;
  top: 0;
  animation: slide 10s infinite;
  font-weight: bold;
  
}
@keyframes slide {
  0% {
    top: 0;
  }
  25% {
    top: -1.2em;
  }
  50% {
    top: -2.4em;
  }
  75% {
    top: -3.6em;
  }
}


.txt-rotate {
  color: #C60115;
  font-family: 'Montserrat', sans-serif;
}



.scroll-text {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.scroll-text.show {
  opacity: 1;
  transform: translateY(0);
}

/* CSS rules for Intersection Observer */
h1#main, p#main{
    opacity: 0; 
    position: relative;
    bottom: -40px;
    transition: all 0.8s ease-out;
}

.show#main {
    opacity: 1;
    bottom: 0;
}

.testimonials:nth-of-type(2) p.show#main {
    transition-delay: 0.5s;
}

.testimonials:nth-of-type(3) p.show#main {
    transition-delay: 1s;
}




/*Copy button*/

.code-copy-button i{
  filter: invert(13%) sepia(97%) saturate(7416%) hue-rotate(341deg) brightness(102%) contrast(102%);
transform: scale(1.3);
}

.code-copy-button:hover {
  filter: invert(13%) sepia(97%) saturate(7416%) hue-rotate(341deg) brightness(102%) contrast(102%);
transform: scale(1.3);
}

/**/



.cell-output-stdout pre code {
  background-color: #E8E8E8;
}


/*
code span {
  color: #007BA5;
}
*/
/*modify code*/

div.sourceCode {
  background: #2a2a2a;
  border: 3px solid #F3182E;
  border-style: ;
  font-size: .9em;
}


div.sourceCode#text {
  background: linear-gradient(to right, rgba(0, 4, 40, 0.9), rgba(0, 78, 146, 0.9));
  border: 3px solid #F3182E;
  border-style: ;
  font-size: 1.1em;
}

div.sourceCode pre code {
  color:red;
}




/*
code span.at {
  color: #7aa6da;
}

code span.ot {
  color: #007BA5;
}

code span.ss {
  color: #20794D;
}

code span.an {
  color: #5E5E5E;
}
*/

/*functions with arguments*/
code span.fu {
  color: #0567E4;
  font-weight: bold;
}

code {
  color: #0567E4;
}



/**/

/*

/*arrows, parenthesis*/

code span.ot { 
  color: #C60115 !important;
  
}

code span.op { 
  color: #C60115 !important;
  
}

/*


code span.cf {
  color: #007BA5;
}

code span.er {
  color: #AD0000;
}

code span.bn {
  color: #AD0000;
}

code span.al {
  color: #AD0000;
}

*/

/*Packages and variables*/
code span.va {
  color:  white !important;
  font-weight: bold;
}

code.sourceCode python #text{
  color:  white !important;
}

/*Strings*/
code span.st {
  color: #b9ca4a;
}



/*library
code span.kw {
  color: #2C7FAB;
}

code span.pp {
  color: #AD0000;
}

code span.in {
  color: #5E5E5E;
}

code span.vs {
  color: #20794D;
}

code span.wa {
  color: #5E5E5E;
  font-style: italic;
}

code span.do {
  color: #5E5E5E;
  font-style: italic;
}

code span.ch {
  color: #20794D;
}

code span.dt {
  color: #AD0000;
}

*/

/* modify numbers colors
code span.fl {
  color: white;
}
 */

/* modify comments */
code span.co {
  color: #60b5ff !important;
}
/**/

/* 
code span.cv {
  color: #5E5E5E;
  font-style: italic;
}

code span.cn {
  color: #8f5902;
}

code span.sc {
  color: #e78c45;
}

code span.dv {
  color: #d54e53;
}
 */

:not(img) a {
  /* animation properties */
}

/*card events*/

#listing-books .card-left {
  border: 0px solid white;
    background: repeating-radial-gradient(circle at bottom left, #fedc00 0%, #fedc00 5.56%, #fcb712 0%, #fcb712 11.11%, #f7921e 0%, #f7921e 16.67%, #e87f24 0%, #e87f24 22.22%, #dd6227 0%, #dd6227 27.78%, #dc4c27 0%, #dc4c27 33.33%, #ca3435 0%, #ca3435 38.89%, #b82841 0%, #b82841 44.44%, #953751 0%, #953751 50%, #364c88 0%, #364c88 55.56%, #16599d 0%, #16599d 61.11%, #02609e 0%, #02609e 66.67%, #0073a9 0%, #0073a9 72.22%, #008aa4 0%, #008aa4 77.78%, #239a87 0%, #239a87 83.33%, #7cba6d 0%, #7cba6d 88.89%, #becc2f 0%, #becc2f 94.44%, #e0d81d 0%, #e0d81d 100%), repeating-radial-gradient(circle at bottom right, #fedc00 0%, #fedc00 5.56%, #fcb712 0%, #fcb712 11.11%, #f7921e 0%, #f7921e 16.67%, #e87f24 0%, #e87f24 22.22%, #dd6227 0%, #dd6227 27.78%, #dc4c27 0%, #dc4c27 33.33%, #ca3435 0%, #ca3435 38.89%, #b82841 0%, #b82841 44.44%, #953751 0%, #953751 50%, #364c88 0%, #364c88 55.56%, #16599d 0%, #16599d 61.11%, #02609e 0%, #02609e 66.67%, #0073a9 0%, #0073a9 72.22%, #008aa4 0%, #008aa4 77.78%, #239a87 0%, #239a87 83.33%, #7cba6d 0%, #7cba6d 88.89%, #becc2f 0%, #becc2f 94.44%, #e0d81d 0%, #e0d81d 100%);
    background-blend-mode: overlay;
    height: 100vh;
  border-radius: 0px;
  color: white;
  font-weight: bold;
  border: 3.5px solid #BF041C;
    border-radius: 10px;
}


#listing-books .card-left:before{
    content: '';
    background:url('images/hcc_logo_card.png');
    background-size:cover;
    position:absolute;
    width: 100px;
    height: 27px;
    margin-left:-10px;
    bottom: 10px;
}

#listing-books.card-left:hover {
  transform: scale(1.1);
}



.card-left {
  border: 3.5px solid #BF041C;
  background: #00325E ;
  border-radius: 10px;
  color: white;
}

.card-left:before{
    content: '';
    background:url('images/hcc_logo_card.png');
    background-size:cover;
    position:absolute;
    width: 100px;
    height: 27px;
    margin-left:-10px;
    bottom: 10px;
}

.card-left:hover {
  transform: scale(1.1);
}


/*card events*/
.image-right {
  border: 3.5px solid #047abf;
  background: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%); 
  border-radius: 10px;
  color: white;
  transition: all 0.5s ease-in-out;
  position: relative;
  
}







.image-right:before {
    content: '';
    background:url('images/hcc_logo_card.png');
    background-size:cover;
    position:absolute;
    width: 100px;
    height: 27px;
    margin-right: 900px;
    right: calc(100% - 1000px);
    bottom: 10px;
}

 .image-right:hover {
  transform: scale(1.05);
}




/*card events*/
#learn-r .image-right {
  border: 3.5px solid #047abf;
  background: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%); 
  border-radius: 8px;
  color: white;
  transition: all 0.5s ease-in-out;
  position: relative;
  
}


#learn-r .image-right:before {
    content: '';
    background:url('images/hcc_logo_card.png');
    background-size:cover;
    position:absolute;
    width: 100px;
    height: 27px;
    right: calc(100% - 1000px);
    margin-right: 900px;
    bottom: 10px;
}

#learn-r .image-right:hover {
  transform: scale(1.05);
}


/*card events*/
.card-left {
  border: 2.5px solid #FD0E35;
  background: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%); 
  border-radius: 10px;
  color: white;
  transition: all 0.5s ease-in-out;
  position: relative;
  
}


.card-left:before {
    content: '';
    background:url('images/hcc_logo_card.png');
    background-size:cover;
    position:absolute;
    width: 100px;
    height: 27px;
    right: calc(100% - 1000px);
    margin-right: 900px;
    bottom: 10px;
}

.card-left:hover {
  transform: scale(1.05);
}

 div.listing-title{
  
  font-size: 2em;
    margin-right: 25px;
}

div.listing-subtitle{
  
  font-size: .7em;
  margin-right: 25px;
}

div.listing-subtitle p span.animate__animated.animate__fadeInDown.animate__delay-.6s{
  margin-right: 25px;
}

#learn-r .listing-title{
  
  font-size: 1em;
}

#learn-r div.listing-subtitle{
  
  font-size: .7em;
  margin-right: 25px;
}

#listing-Material .listing-title{
  
  font-size: 2em;
}


.image-right div.listing-reading-time,
div.quarto-post.image-right div.body a p.show,
.image-right div.listing-date,
.image-right div.listing-author,
.image-right div.listing-subtitle,
.image-right div.listing-categories,
.image-right .thumbnail,
.image-right h3.no-anchor.listing-title{
    color: white;
  margin-left: 25px;
}

h3.no-anchor.listing-title,{
  padding: 1rem;
}

div.listing-date{
  color:white;
}


/* .listing-category div.listing-category*/

div.quarto-post.image-right,
.listing-title,
div.listing-subtitle,
.animate__delay-\.6s{
      color: white;
}

.quarto-category a{
   color: white;
}

#quarto-header .quarto-category{
   border: 1px solid #BF041C;
   color: white;
}

#learn-r .listing-category{
   color: white;
   border: 1px solid #BF041C;
}


div.body div.listing-categories div.listing-category{
  
   color: white;
   border: 1px solid #BF041C;
  
}

.layout_grid .image-right .listing-category{
   color: white;
   border: 1px solid #BF041C;
}



/*footer*/

/* Media query for smaller screens */
@media only screen and (max-width: 767px) {
  
  div.nav-footer-center{
    display: none;
  }
}



.nav-footer{
 background: linear-gradient(to right, black, black);
  height: 9vh;
  border: none !important; 
  padding:0 !important; 
  margin: 0 !important; 
  border-bottom: none;
}




.nav-footer a.nav-link{
  color: white!important;
}

.nav-footer a.nav-link:hover{
  color: red!important;
}

.nav-footer a.nav-link:active{
  color: white!important;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-device-width : 480px) {
/* Styles */
/* footer class or footer id */
.nav-footer {
bottom: 0 !important;
}
}


.navbar a:focus {
  outline: none;
}




.intro_f {
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  letter-spacing: 0.1rem;
  background-color: black;
   z-index: -1;
}


.intro-slideshow .image-wrapper {
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}



.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 1) 100%),
              linear-gradient(to bottom, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.25) 90%, rgba(0, 0, 0, 1) 100%);
  z-index: 1;
}


.intro-slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%; /* relative to nearest positioned ancestor and not nearest block-level ancestor - alternatively: width: 100vw; */
  height:100%; /* relative to nearest positioned ancestor and not nearest block-level ancestor - alternatively: height: 100vh; */ 
  object-fit: cover;
  z-index:-1;
  /* filter: brightness(50%); */ /* 0% black, 100% original image, values > 100% are allowed for brighter than original image. */
  /* display: none; */
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
  background: linear-gradient(to right, rgba(0,0,0,0) 90%, rgba(0,0,0,1) 100%);

}





.intro-header {
  border-radius: 0.5rem;
  padding: 2rem 2.5rem;
  background-color: rgba(0,0,0,0.3);
  margin-right: 31%;
  margin-left:1%;
  margin-bottom: -5%;
  font-size: 1.5em;
  z-index: 1;
}
.intro_f h1 {
  font-size: 4rem;
  color: white;
  margin-bottom: 0.75rem;
}
.intro_f p {
  font-size: 2.75rem;
  color: white;
}

.intro-header p {
  font-size: 20px;
  
}

  .container-blue {
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 20%),
              linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 30%),
              linear-gradient(to right, black, black);
}
    .container-footer {
  background: linear-gradient(to right, black, black);
             
}

.container-footer2{
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%),
             linear-gradient(to right, black, black);
  margin-bottom: 0px;
  height:100px;
}

.container-footer3{
  background: linear-gradient(to right, black, black);
  color: white;
  margin-bottom: 0px;
  height:100px;
}


  .work-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 5%; /* Adjust this value to move content to the right as needed */
}

@media (min-width: 701px) {
  .quote-container, .quote-container-bg, .layout_grid_objectives_mob-blue{
    display: none;
  }
  

  
}

@media (max-width: 575px) {

.layout_grid_books, 
.social-media-mobile3{
  padding: 1% 20%;
    display: grid; 
  grid-template-columns: 5fr; 
}

}

@media (max-width: 1100px) {
  
  .layout_grid_books{
  padding: 1% 6%;
  //border-top: 2px solid #eeeeee;
  display: grid; 
  grid-template-columns: 5fr; 
}

.social-media-mobile3{
  display: flex; 
  flex-direction: column; 
  align-items: left;
}


}






@media (max-width: 700px) {
  
.social-media-mobile2{
  display: flex; 
  flex-direction: column; 
  align-items: left;
}


.layout_grid_events{
  padding: 1% 6%;
  //border-top: 2px solid #eeeeee;
  display: grid; 
  grid-template-columns: 5fr; 
}


  
  
    .image-wrapper::before {
    background: none;
  }
  

  .quote-container-bg {
  background-color: black;
}
  
.quote-container {
  border-left: 3px solid #333;
  padding-left: 16px;
  margin: 10px 10px;
  text-align: center;
  border: 2px solid #c0041c;
  margin-top: -100px;
  margin-bottom: 90px;
}

.quote-text {
  font-size: 24px;
  font-style: italic;
  line-height: 1.5;
  margin-left: 10px;
  margin-right: 10px;
}


  
  .intro-header { padding: .1rem 1.5rem;
    margin-right: 1%;
    margin-left:1%;
    margin-bottom: 80%;
    margin-top: 40%;
  }
  
  .intro-header h1 { font-size: 2.5rem; }
  .intro-header p { font-size: .1rem; }
  
    .intro_f h1 { font-size: 2.5rem; }
  .intro_f p { font-size: .1rem; }
  
  .quote-wrapper {
display: none;
}

.quote-name {
  margin-top: -5%;
  right: 10px;
  padding: .1rem 1.5rem;
}
.quote-copy {
  margin-top: 10%;
  padding: .1rem 1.5rem;
  right: 100%;
}

  
  .intro-slideshow img {
  width: 100%; /* relative to nearest positioned ancestor and not nearest block-level ancestor - alternatively: width: 100vw; */
  height:100%; /* relative to nearest positioned ancestor and not nearest block-level ancestor - alternatively: height: 100vh; */ 
}

.intro_f {
  height: 60%;
background-color: black;
 z-index: -1;
}
  
  

.intro-slideshow .image-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.image-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.5) 85%, rgba(0, 0, 0, 1) 100%);
  z-index: 1;
}
  
  
  
  
  
  
}





.intro-text {
  position: absolute;
  top: 200px;
  right: 0;
  width: 30%;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  padding: 0 2rem;
  color: rgba(0, 78, 146);
  font-style:"italic";
}

.intro-header p{

  font-size: 2em;
}


.flex {
  display: flex;
}


.blue {
    color: #3498db;
}

/* ---- QUOTE ---- */
.quote-wrapper {
  margin-top: 10%;
  bottom:-100px;
}
.quote-content {
  text-align: center;
  border: 2px solid #c0041c;
  padding: 0 3%;
  position: relative;
  top:80px;
}
.quote-img {
  background: rgba(0, 78, 146);
  width: 40px;
  height: 50px;
  position: relative;
  top: -27px;
  left: 42%;
  padding: 0 3%;
}
.svg-quote {
  fill: #3498db;
}

.svg-quote2 path {
    fill: #fff;
  }

.quote-name {
  margin-top: 5%;
  color: red;
}
.quote-copy {
  margin-top: -2%;
}

.social-media-mobile{
display: none;
}

.social-media{
  display: flex; 
  flex-direction: column; 
}

@media (max-width: 1241px) {
  

.social-media-mobile{
  display: flex; 
  flex-direction: column; 
  align-items: center;
}

.social-media-mobile2{
  display: flex; 
  flex-direction: column; 
  align-items: left;
}


.layout_grid_learnr{
  padding: 1% 6%;
  //border-top: 2px solid #eeeeee;
  display: grid; 
  grid-template-columns: 5fr; 
}

.layout_grid_learnr2{
  padding: 1% 15%;
  //border-top: 2px solid #eeeeee;
  display: grid; 
  grid-template-columns: 5fr; 
}



}





hr.sep-2 {
  border: 0; 
  height: 2px; 
  background-image: linear-gradient(to right, #f0f0f0, #3498db, #c0041c, #f0f0f0)}
  
hr.sep-2-f {
 border: 1px solid #c0041c;
  
}

 h1.title.show.title{
  display: none;
}
  
  
  .btn-hover {
    width: 200px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    margin: 20px;
    height: 55px;
    text-align:center;
    border: none;
    background-size: 300% 100%;

    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

.btn-hover:focus {
    outline: none;
}

.btn-hover.color-9 {
    background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
    box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
}



.btn-hover.color-9-2 {
background-image: linear-gradient(to right, #7e00e8, #ff7f00, #ff1bff, #9d00ff);
box-shadow: 0 4px 15px 0 rgba(207, 39, 219, 0.75);
}

.btn-hover.color-9-3 {
    background-image: linear-gradient(to right, #ff9f43, #ff6b6b, #ff9f43, #ff6b6b);
    box-shadow: 0 4px 15px 0 rgba(0, 210, 255, 0.75);
}

span.about-link-text{
  color: white;
}


/* apply style to the first icon */
a.about-link:nth-child(1) {
  background-color: #0762B8;
  border: 1px solid #0762B8 !important;
  border-radius: 20px !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

a.about-link:nth-child(1):hover {
  transform: scale(1.1);
  border-color: #0762B8;
  cursor: pointer;
  background-color: #0762B8;
  box-shadow: 0px 4px 6px #0762B8;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}




/* apply style to the second icon */
a.about-link:nth-child(2){
  background-color: black;
  border: 1px solid black !important;
  border-radius: 20px !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

a.about-link:nth-child(2):hover {
  transform: scale(1.1);
  border-color: black;
  cursor: pointer;
  background-color: black;
  box-shadow: 0px 4px 6px black;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* apply style to the third icon */
a.about-link:nth-child(3){
  background-color: #1C93E4;
  border: 1px solid #1C93E4 !important;
  border-radius: 20px !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

a.about-link:nth-child(3):hover {
  transform: scale(1.1);
  border-color: #1C93E4;
  cursor: pointer;
  background-color: #1C93E4;
  box-shadow: 0px 4px 6px #1C93E4;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* apply style to the fourth icon */
a.about-link:nth-child(4){
  background-color: #A7CF35;
  border: 1px solid #A7CF35 !important;
  border-radius: 20px !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

a.about-link:nth-child(4):hover {
  transform: scale(1.1);
  border-color: #A7CF35;
  cursor: pointer;
  background-color: #A7CF35;
  box-shadow: 0px 4px 6px #A7CF35;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* apply style to the fifth icon */
a.about-link:nth-child(5){
  background-color: #EA4336;
  border: 1px solid #EA4336 !important;
  border-radius: 20px !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

a.about-link:nth-child(5):hover {
  transform: scale(1.1);
  border-color: #EA4336;
  cursor: pointer;
  background-color: #EA4336;
  box-shadow: 0px 4px 6px #EA4336;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


/* apply style to the sixth icon */
a.about-link:nth-child(6){
  background-color: #ff8000;
  border: 1px solid #ff8000 !important;
  border-radius: 20px !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

a.about-link:nth-child(6):hover {
  transform: scale(1.1);
  border-color: #ff8000;
  cursor: pointer;
  background-color: #ff8000;
  box-shadow: 0px 4px 6px #ff8000;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}



/* apply style to the seventh icon */
a.about-link:nth-child(7){
  background-color: #B2182B;
  border: 1px solid #B2182B !important;
  border-radius: 20px !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

a.about-link:nth-child(7):hover {
  transform: scale(1.1);
  border-color: #B2182B; 
  cursor: pointer;
  background-color: #B2182B;
  box-shadow: 0px 4px 6px #B2182B;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
}


/* apply style to the eigth icon */
a.about-link:nth-child(8){
  background-color: #A25416;
  border: 1px solid #A25416 !important;
  border-radius: 20px !important;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
}

a.about-link:nth-child(8):hover {
  transform: scale(1.1);
  border-color: #A25416; 
  cursor: pointer;
  background-color: #A25416;
  box-shadow: 0px 4px 6px #A25416;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
}



div.about-entity .title{
  color: black !important;
}

.rounded {
  position: relative;
  background: white;
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
  box-shadow: 1em 1em 2em 0em #c0041c;
  transition: all .4s ease;
}

.rounded:hover {
  border-radius: 0% 0% 50% 50% / 0% 0% 5% 5%;
  transform: scale(1.1);
  box-shadow: 1em 1em 2em 0em #004e92;
  transition: all .4s ease;
}

.rounded:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0% 0% 50% 50% / 0% 0% 5% 5%;
  box-shadow: 10px 10px #BA0020;
  opacity: 0;
  transition: all .4s ease;
}

.rounded:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0% 0% 50% 50% / 0% 0% 5% 5%;
  box-shadow: .5em .5em 1em 0em #c0041c;
  opacity: 0.5;
  transition: all .4s ease;
}

.rounded:hover::after,
.rounded:hover::before {
  z-index: -1;
}

.rounded:hover::after {
  transform: rotate(45deg);
  opacity: 0.5;
}

.rounded:hover::before {
  transform: rotate(-45deg);
  opacity: 0.3;
}



/*
.layout_table #listing-material{
    box-shadow: 10px 10px #BA0020;

}
*/

.quarto-listing-table{
  background: linear-gradient(to left, #000428, #004e92);
    border: 3px solid #BA0020 !important;
}

.quarto-listing-table th{
  color: white;
}

.quarto-listing-table td.listing-title span{
  color: #0070c9;
   text-decoration: underline;
    font-size: 20px;
}

.quarto-listing-table td.listing-subtitle span{
  color: white;
   font-size: 20px;
}

.quarto-listing-table td.listing-author{
  color: white;
   font-size: 20px;
}




@media (max-width: 520px) {
  
.quarto-listing-table td.listing-title span{
  font-size: 12px;
}

.quarto-listing-table td.listing-subtitle span{
  font-size: 12px;
}

.quarto-listing-table td.listing-author{
  font-size: 12px;
}

.quarto-listing-table .listing-image img{

width:20vw;
  
}

}


}



.cc-icons-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cc-icon {
  width: 18px;
  height: 18px;
  margin: 0 5px;
}



#listing-Resources .card-left{
  border: 2.5px solid #FD0E35;
  background: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%); 
  border-radius: 10px;
  color: white;
  transition: all 0.5s ease-in-out;
  position: relative;
  
}

.books {
background: repeating-radial-gradient(circle at bottom left, #fedc00 0%, #fedc00 5.56%, #fcb712 0%, #fcb712 11.11%, #f7921e 0%, #f7921e 16.67%, #e87f24 0%, #e87f24 22.22%, #dd6227 0%, #dd6227 27.78%, #dc4c27 0%, #dc4c27 33.33%, #ca3435 0%, #ca3435 38.89%, #b82841 0%, #b82841 44.44%, #953751 0%, #953751 50%, #364c88 0%, #364c88 55.56%, #16599d 0%, #16599d 61.11%, #02609e 0%, #02609e 66.67%, #0073a9 0%, #0073a9 72.22%, #008aa4 0%, #008aa4 77.78%, #239a87 0%, #239a87 83.33%, #7cba6d 0%, #7cba6d 88.89%, #becc2f 0%, #becc2f 94.44%, #e0d81d 0%, #e0d81d 100%), repeating-radial-gradient(circle at bottom right, #fedc00 0%, #fedc00 5.56%, #fcb712 0%, #fcb712 11.11%, #f7921e 0%, #f7921e 16.67%, #e87f24 0%, #e87f24 22.22%, #dd6227 0%, #dd6227 27.78%, #dc4c27 0%, #dc4c27 33.33%, #ca3435 0%, #ca3435 38.89%, #b82841 0%, #b82841 44.44%, #953751 0%, #953751 50%, #364c88 0%, #364c88 55.56%, #16599d 0%, #16599d 61.11%, #02609e 0%, #02609e 66.67%, #0073a9 0%, #0073a9 72.22%, #008aa4 0%, #008aa4 77.78%, #239a87 0%, #239a87 83.33%, #7cba6d 0%, #7cba6d 88.89%, #becc2f 0%, #becc2f 94.44%, #e0d81d 0%, #e0d81d 100%);
    background-blend-mode: overlay;
padding-top: 10px; 
border-radius: 20px;
}

.book_aut{
  font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 700;
background-image: conic-gradient(#553c9a, #ee4b2b, #00c2cb, #553c9a);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}

.table{
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: #6c757d;
  --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
  --bs-table-active-color: #6c757d;
  --bs-table-active-bg: rgba(0, 0, 0, 0.1);
  --bs-table-hover-color: #6c757d;
  --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
  width: 100%;
  margin-bottom: 1rem;
  color: black;
  vertical-align: top;
  border-color: #BA0020;
}

.table td,
.table th {
  border-bottom: 2px solid #BA0020; /* Change this value to increase or decrease the thickness of the cell borders */
  
}

figcaption {
  text-align: center;

}

.pagedtable-wrapper{
  font-size: 16px;
}


.header_about{
   width:100%;
   margin-top: -150px;
   height:1000px;
   opacity:.9;
   background-image:url('images/brandenburg.jpg');
   background-size:cover;
   background-position:bottom;
   position: relative;
   display: grid;
  place-items: center;
  text-align: center;
}

.header_about h1 {
  position: absolute; /* change position to relative to position the text relative to the container */
  font-weight: 600;
  margin-top: -400px;
  color: white;
  font-family: 'Your Font', sans-serif; /* replace 'Your Font' with the name of the font you want to use */
  font-size: 100px;
  letter-spacing: 2px;
  animation: fade-in-down 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}


@keyframes fade-in-down {
  from { opacity: 0; top: -100%; } /* start with opacity 0 and the text outside the header on the top */
  to { opacity: 1; top: 50%; } /* end with opacity 1 and the text centered in the header */
}




.containerabout{
   width:100%;
   margin-top: 0px;
  background: linear-gradient(to right, black, black);

}
.containerabout h1{
   font-size: 30px;
}

.about {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  background: transparent;
  opacity: 0;
  transform: translateY(50%);
  will-change: transform, opacity;
  transition: transform 1.5s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.about.show {
  opacity: 1;
  transform: translateY(0%);
}


.about .left{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  color: white;
  font-size: 18px;
  
}
.about .right{
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.about .right img{
    width: 100%;
  height: auto;
  margin-top: -14px;
  box-shadow: -.5em .5em 1em 0em #c0041c; /* Modified box shadow values */

  /*border-radius: 0% 0% 11% 21% / 10% 10% 0% 21%;*/
}



.about .left h1{
   text-align:center;
   color: white;
   margin:0 0 10px 0;
}
.about .left hr{
   width: -60%;
  border-top: 3px solid #c0041c;
  border-radius: 10px;
  border-bottom: none;
}
.about .left p{
   margin:15px auto;
   width:80%
}

@media only screen and (max-width: 1000px) {

.about .right img{
    width: 100%;
  height: auto;
  margin-top: 0px;
}


}

@media only screen and (max-width: 900px) {

.about .left{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  color: white;
  font-size: 15px;
  margin-top: 19px;
}


.containerabout h1{
   font-size: 30px;
}


}


@media only screen and (max-width: 1200px) {
  .about {
    display: block;
  }
  
  
  .about .left {
    order: 2;
  }
  .about .right {
    order: 1;
  }
  
  .containerabout{
   margin-top: -20px;

}
  
}



.containerabout2 {
   width: 100%;
   margin-top: 0px;
   background: linear-gradient(to right, black, black);
}

.containerabout2 h1 {
   font-size: 30px;
}

.about2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  background: transparent;
  transform: translateX(-50%);
  opacity: 0;
  transition: transform 2.5s cubic-bezier(0.6, -0.05, 0.1, 0.99),
              opacity 2.5s cubic-bezier(0.6, -0.05, 0.1, 0.99);
}

.about2.show {
   transform: translateX(0);
  opacity: 1;
}

.about2 .left2 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.about2 .right2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  color: white;
  font-size: 18px;
}

.about2 .left2 img {
  width: 100%;
  height: auto;
  margin-top: -14px;
  box-shadow: .5em .5em 1em 0em #c0041c; /* Modified box shadow values */

}

.about2 .right2 h1 {
  text-align: center;
  color: white;
  margin: 0 0 10px 0;
}

.about2 .right2 hr {
  width: -60%;
  border-top: 3px solid #c0041c;
  border-radius: 10px;
  border-bottom: none;
}

.about2 .right2 p {
  margin: 20px auto;
  width: 80%;
}

/* Updated media queries with new class names */
@media only screen and (max-width: 1000px) {
  .about2 .left2 img {
    width: 100%;
    height: auto;
    margin-top: 0px;
  }
}



@media only screen and (max-width: 900px) {
  .about2 .right2 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    color: white;
    font-size: 15px;
  }
  .containerabout2 h1 {
    font-size: 30px;
  }
}

/* ... (previous CSS code) ... */

@media only screen and (max-width: 1200px) {
  .about2 {
    display: flex; /* Updated display to flex */
    flex-direction: column; /* Added flex-direction */
  }
  
  .about2 .left2 {
    order: 2; /* Updated order */
  }
  .about2 .right2 {
    order: 1; /* Updated order */
  }
  
  .containerabout2 {
    margin-top: -20px;
  }
}





.containerabout3 {
  width: 100%;
  margin-top: 0px;
  background: linear-gradient(to right, black, black);
}

.containerabout3 h1 {
  font-size: 30px;
}

.about3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  background: transparent;
  opacity: 0;
  transform: translateX(50%); /* Updated transform property */
  transition: transform 2.5s cubic-bezier(0.6, -0.05, 0.1, 0.99),
              opacity 2.5s cubic-bezier(0.6, -0.05, 0.1, 0.99);
}

.about3.show {
  opacity: 1;
  transform: translateY(0%);
}

.about3 .left3 {
  grid-column: 1 / 2; /* Updated grid-column */
  grid-row: 1 / 2;
  color: white;
  font-size: 18px;
}

.about3 .right3 {
  grid-column: 2 / 3; /* Updated grid-column */
  grid-row: 1 / 2;
}

.about3 .right3 img {
  width: 100%;
  height: auto;
  margin-top: -14px;
  box-shadow: -.5em .5em 1em 0em #c0041c; /* Modified box shadow values */

}

.about3 .left3 h1 {
  text-align: center;
  color: white;
  margin: 0 0 10px 0;
}

.about3 .left3 hr {
  width: -60%;
  border-top: 3px solid #c0041c;
  border-radius: 10px;
  border-bottom: none;
}

.about3 .left3 p {
  margin: 18px auto;
  width: 80%;
}

/* Updated media queries with new class names */
@media only screen and (max-width: 1000px) {
  .about3 .right3 img {
    width: 100%;
    height: auto;
    margin-top: 0px;
  }
}

@media only screen and (max-width: 900px) {
  .about3 .left3 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    color: white;
    font-size: 15px;
  }
  .containerabout3 h1 {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1200px) {
  .about3 {
    display: block;
  }
  
  .about3 .left3 {
    order: 2;
  }
  .about3 .right3 {
    order: 1;
  }
  
  .containerabout3 {
    margin-top: -20px;
  }
}



.containerabout4 {
  width: 100%;
  margin-top: 0px;
  background: linear-gradient(to right, black, black);
}

.containerabout4 h1 {
  font-size: 30px;
}

.about4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  background: transparent;
  opacity: 0;
  transform: translateY(50%);
  transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.about4.show {
  opacity: 1;
  transform: translateY(0%);
}

.about4 .left4 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  color: white;
  font-size: 18px;
}

.about4 .right4 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.about4 .right4 img {
  width: 100%;
  height: auto;
  margin-top: -14px;
    box-shadow: .5em .5em 1em 0em #c0041c; /* Modified box shadow values */

}

.about4 .left4 h1 {
  text-align: center;
  color: white;
  margin: 0 0 10px 0;
}

.about4 .left4 hr {
  width: -60%;
  border-top: 3px solid #c0041c;
  border-radius: 10px;
  border-bottom: none;
}

.about4 .left4 p {
  margin: 18px auto;
  width: 80%;
}

/* Updated media queries with new class names */
@media only screen and (max-width: 1000px) {
  .about4 .right4 img {
    width: 100%;
    height: auto;
    margin-top: 0px;
  }
}

@media only screen and (max-width: 900px) {
  .about4 .left4 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    color: white;
    font-size: 15px;
  }
  .containerabout4 h1 {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1200px) {
  .about4 {
    display: block;
  }
  
  .about4 .left4 {
    order: 1;
  }
  .about4 .right4 {
    order: 2;
  }
  
  .containerabout4 {
    margin-top: -20px;
  }
}






.containerabout5 {
  width: 100%;
  margin-top: 0px;
  background: linear-gradient(to right, black, black);
}

.containerabout5 h1 {
  font-size: 30px;
}

.about5 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 20px;
  background: transparent;
  opacity: 0;
  transform: translateX(50%);
  transition: transform 2.2s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 2.2s ease-in-out;
}

.about5.show {
  opacity: 1;
  transform: translateX(0%);
}

.about5 .left5 {
  grid-column: 1 / 2; /* Updated grid-column */
  grid-row: 1 / 2;
  color: white;
  font-size: 18px;
}

.about5 .right5 {
  grid-column: 2 / 3; /* Updated grid-column */
  grid-row: 1 / 2;
}

.about5 .right5 img {
  width: 100%;
  height: auto;
  margin-top: -14px;
  box-shadow: -.5em .5em 1em 0em #c0041c; /* Modified box shadow values */

}

.about5 .left5 h1 {
  text-align: center;
  color: white;
  margin: 0 0 10px 0;
}

.about5 .left5 hr {
  width: -60%;
  border-top: 3px solid #c0041c;
  border-radius: 10px;
  border-bottom: none;
}

.about5 .left5 p {
  margin: 18px auto;
  width: 80%;
}

/* Updated media queries with new class names */
@media only screen and (max-width: 1000px) {
  .about5 .right5 img {
    width: 100%;
    height: auto;
    margin-top: 0px;
  }
}

@media only screen and (max-width: 900px) {
  .about5 .left5 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    color: white;
    font-size: 15px;
  }
  .containerabout5 h1 {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1200px) {
  .about5 {
    display: block;
  }
  
  .about5 .left5 {
    order: 2;
  }
  .about5 .right5 {
    order: 1;
  }
  
  .containerabout5 {
    margin-top: -20px;
  }
}







/* edit color of name of the profiles team*/
div.quarto-about-trestles.column-page h1.title{
  color: white !important;
}

div.about-contents main#quarto-document-content.content.column-page{
  color: white !important;
}


div.quarto-about-trestles.column-page div.about-contents{
  border-left: 2px solid red;
}

@media (max-width: 991px) {
  div.quarto-about-trestles.column-page div.about-contents {
    border-left: none;
  }
}


.final_layout_container{
  padding: 1% 15%;
  opacity: 0;
  transform: translateY(50%);
  will-change: transform, opacity;
  transition: transform 4s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 4s cubic-bezier(0.645, 0.045, 0.355, 1);
}


.final_layout_container.show {
  opacity: 1;
  transform: translateX(0%);
}




#listing-books .card-left .animate__delay-\.6s{
  font-size: 15px;
  
}


.book_style_mob{
display: none;
  
}


.book_style_desktop{
  font-size: 90px;
margin-top:20px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
 background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.certification_style_desktop{
  font-size: 70px;
margin-top:-20px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
 background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.certification_style_mobile{
display: none;
}


@media only screen and (max-width: 1100px) {


.book_style_mob{
  font-size: 90px;
margin-top:20px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
 background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  
}

.book_style_desktop{
display: none;
}


}



@media only screen and (max-width: 800px) {


.certification_style_desktop{
display: none;
}



.certification_style_mobile{
  font-size: 30px;
margin-top:-20px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
 background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),radial-gradient(99% 99% at 21% 78%, #7B00FFFF 0%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

}

.back_resource {
background: repeating-radial-gradient(circle at bottom left, #fedc00 0%, #fedc00 5.56%, #fcb712 0%, #fcb712 11.11%, #f7921e 0%, #f7921e 16.67%, #e87f24 0%, #e87f24 22.22%, #dd6227 0%, #dd6227 27.78%, #dc4c27 0%, #dc4c27 33.33%, #ca3435 0%, #ca3435 38.89%, #b82841 0%, #b82841 44.44%, #953751 0%, #953751 50%, #364c88 0%, #364c88 55.56%, #16599d 0%, #16599d 61.11%, #02609e 0%, #02609e 66.67%, #0073a9 0%, #0073a9 72.22%, #008aa4 0%, #008aa4 77.78%, #239a87 0%, #239a87 83.33%, #7cba6d 0%, #7cba6d 88.89%, #becc2f 0%, #becc2f 94.44%, #e0d81d 0%, #e0d81d 100%), repeating-radial-gradient(circle at bottom right, #fedc00 0%, #fedc00 5.56%, #fcb712 0%, #fcb712 11.11%, #f7921e 0%, #f7921e 16.67%, #e87f24 0%, #e87f24 22.22%, #dd6227 0%, #dd6227 27.78%, #dc4c27 0%, #dc4c27 33.33%, #ca3435 0%, #ca3435 38.89%, #b82841 0%, #b82841 44.44%, #953751 0%, #953751 50%, #364c88 0%, #364c88 55.56%, #16599d 0%, #16599d 61.11%, #02609e 0%, #02609e 66.67%, #0073a9 0%, #0073a9 72.22%, #008aa4 0%, #008aa4 77.78%, #239a87 0%, #239a87 83.33%, #7cba6d 0%, #7cba6d 88.89%, #becc2f 0%, #becc2f 94.44%, #e0d81d 0%, #e0d81d 100%);
    background-blend-mode: overlay;
}







.btn-webr{
 background: repeating-radial-gradient(circle at bottom left, #fedc00 0%, #fedc00 5.56%, #fcb712 0%, #fcb712 11.11%, #f7921e 0%, #f7921e 16.67%, #e87f24 0%, #e87f24 22.22%, #dd6227 0%, #dd6227 27.78%, #dc4c27 0%, #dc4c27 33.33%, #ca3435 0%, #ca3435 38.89%, #b82841 0%, #b82841 44.44%, #953751 0%, #953751 50%, #364c88 0%, #364c88 55.56%, #16599d 0%, #16599d 61.11%, #02609e 0%, #02609e 66.67%, #0073a9 0%, #0073a9 72.22%, #008aa4 0%, #008aa4 77.78%, #239a87 0%, #239a87 83.33%, #7cba6d 0%, #7cba6d 88.89%, #becc2f 0%, #becc2f 94.44%, #e0d81d 0%, #e0d81d 100%), repeating-radial-gradient(circle at bottom right, #fedc00 0%, #fedc00 5.56%, #fcb712 0%, #fcb712 11.11%, #f7921e 0%, #f7921e 16.67%, #e87f24 0%, #e87f24 22.22%, #dd6227 0%, #dd6227 27.78%, #dc4c27 0%, #dc4c27 33.33%, #ca3435 0%, #ca3435 38.89%, #b82841 0%, #b82841 44.44%, #953751 0%, #953751 50%, #364c88 0%, #364c88 55.56%, #16599d 0%, #16599d 61.11%, #02609e 0%, #02609e 66.67%, #0073a9 0%, #0073a9 72.22%, #008aa4 0%, #008aa4 77.78%, #239a87 0%, #239a87 83.33%, #7cba6d 0%, #7cba6d 88.89%, #becc2f 0%, #becc2f 94.44%, #e0d81d 0%, #e0d81d 100%);
    background-blend-mode: overlay;
    color: white!important;
    border-color: transparent;
    margin-right: -200px;
    font-weight: 900;
    border-radius: 10px;
}



.btn-webr:hover {
 background-color: #0073a9;
    color: white!important;
    transition: all 0.3s ease-in-out; /* Add a smooth transition effect */
}

.btn-webr:active {
    transform: scale(1.15); /* Shrink the button slightly when clicked */
}
/*Change code variable color (box shadow)*/

.red-frame {
  border: 4px solid #ff0000; /* Red border color */
}




    
.button_i2ds{
  width: 170px;
  height: 30px;
  border: 2px solid #BA0020;
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  outline: none;
  border-radius: 150px;
  background: transparent;
  cursor: pointer;
  transition: 0.3s all;
  color: #968C83;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  margin-top: 70px;
  text-align: center;
}

.button_i2ds:hover
{
  background: #BA0020;
  color: white;
  box-shadow: 0 0 10px #BA0020,
              0 0 10px #BA0020;
  filter:
}

.wrap
{
  margin: 20px auto 0 auto;
  width: 80%;
  display:flex;
  align-items:space-around;
  max-width:1500px;
}
.tile
{
  width:380px;
  height:450px;
  margin:10px;
  background-color:#99aeff;
  border-radius:15px;
  display:inline-block;
  background-size:cover;
  position:relative;
  cursor:pointer;
  transition: all 0.4s ease-out;
  box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
  overflow:hidden;
  color:white;
  font-family:'Roboto';
  
}
.tile img
{
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  z-index:0;
  transition: all 0.4s ease-out;
  filter: brightness(0.7) blur(1px);
}
.tile .text
{
/*   z-index:99; */
  position:absolute;
  padding:30px;
  font-size: 20px;
  height:calc(100% - 60px);
}
.tile h1
{
 
  font-weight:300;
  margin:0;
  color: white;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.tile h2
{
  font-weight:100;
  margin:20px 0 0 0;
  font-style:italic;
   transform: translateX(200px);
}
.tile p
{
  font-weight:300;
  margin:20px 0 0 0;
  line-height: 25px;
/*   opacity:0; */
  transform: translateX(-200px);
  transition-delay: 0.2s;
}
.animate-text
{
  opacity:0;
  transition: all 0.6s ease-in-out;
}
.tile:hover
{
/*   background-color:#99aeff; */
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
  transform:scale(1.05);
}
.tile:hover img
{
  opacity: 0.2;
}
.tile:hover .animate-text
{
  transform:translateX(0);
  opacity:1;
}
.dots
{
  position:absolute;
  bottom:20px;
  right:30px;
  margin: 0 auto;
  width:30px;
  height:30px;
  color:currentColor;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-around;
  
}

.dots span
{
    width: 5px;
    height:5px;
    background-color: currentColor;
    border-radius: 50%;
    display:block;
  opacity:0;
  transition: transform 0.4s ease-out, opacity 0.5s ease;
  transform: translateY(30px);
 
}

.tile:hover span
{
  opacity:1;
  transform:translateY(0px);
}

.dots span:nth-child(1)
{
   transition-delay: 0.05s;
}
.dots span:nth-child(2)
{
   transition-delay: 0.1s;
}
.dots span:nth-child(3)
{
   transition-delay: 0.15s;
}


@media (max-width: 1000px) {
  .wrap {
   flex-direction: column;
    width:400px;
  }
}





html body.nav-fixed.quarto-light header#title-block-header.quarto-title-block.default.page-columns.page-full div.quarto-title-banner.page-columns.page-full{
  background: black !important;
}