@font-face {
  font-family: 'gabriela';
  src: url('https://uploads.igem.org/teams/4998/wiki/wiki-photos/fonts/thessaloniki-fontsfree-net-gabriela3.woff');
}


h1,
h2,
h3,
 h4,
 h5,
h6 {
  font-family: 'gabriela';
} 
     
.quote-box {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  /* Media query for screens smaller than 370px */
  @media (max-width: 370px) {
    .sdg-box .col {
      padding-right: 0;
      padding-left: 0;
    }
  }
   
  
  
  
  /*
  .accordion-sustain  {
    color: #0B3D25;
  }
  .accordion-sustain  .accordion-item {
    border-color: #0B3D25;
  } */
  
  
  .accordion-sustain  .accordion-item .accordion-header .accordion-button {
    color: #fff;
    font-size: 1.2rem;
  }
  .accordion-sustain  .accordion-item .accordion-header .accordion-button.collapsed {
    color: #fff;
  
  }
  .accordion-sustain  .accordion-item .accordion-header .accordion-button:focus {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  }
  
  .accordion-sustain  .accordion-item .accordion-header .accordion-button:hover {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    filter: brightness(95%);
  }
  
  .accordion-sustain  .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }
  .accordion-sustain  .accordion-item .accordion-header .accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  }
  
  #heading_accordion_sustain_1_1 .accordion-button {
    background-color: #92d36a;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
  
  }
  
  #heading_accordion_sustain_1_2 .accordion-button {
    background-color: #d0f0bb;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
  }
  
  #heading_accordion_sustain_2_1 .accordion-button {
  background-color: #d5a54f;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
  }
  
  #heading_accordion_sustain_2_2 .accordion-button {
  background-color:    #edd8b4;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
  }
  
  
  #heading_accordion_sustain_3_1 .accordion-button {
    background-color: #C5192D;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
    }
    
    #heading_accordion_sustain_3_2 .accordion-button {
      background-color: #e8495b;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
      }
      
  
    #heading_accordion_sustain_3_3 .accordion-button {
    background-color:   #f7c3c9;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
    }
    
    
    #heading_accordion_sustain_3_4 .accordion-button {
      background-color:   #ef828e;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
      }
      
    
  
    #heading_accordion_sustain_4_1 .accordion-button {
      background-color: #19486A;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
      }
      
      #heading_accordion_sustain_4_2 .accordion-button {
        background-color: #4497d3;
        box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
        }
        
    
      #heading_accordion_sustain_4_3 .accordion-button {
      background-color: #bcdaef;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); 
      }
      
  
  
  
  
  
  
  .sustain-card {
    display: flex;
    margin-bottom: 3rem;
    padding: 10px;
    border: 2px solid #3F7E44;
    overflow: hidden;
    background-color: #b8dbbb;
    text-align: justify;
    box-shadow: 2px 2px 7px 7px rgba(11, 61, 37, 0.2);
  
  }
  
  
  
  .sustain-card-image {
    flex: 2;
    padding: 5px;
    display: flex; /* Add flex display */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    
    }
    .sustain-card-image img {
      display: block;
      max-width: 100%;
      height: auto;
      border-radius: 3px;
  }
  
  .sustain-card-content {
    flex: 3;
    padding: 15px;
    align-items: center; 
    justify-content: center; 
  }
  
  /* Media query for screens smaller than a certain width (e.g., 768px) */
  @media (max-width: 768px) {
    .sustain-card {
      flex-direction: column; /* Stack elements vertically */
    }
  
    .sustain-card-image {
      order: 2; /* Move image to the bottom */
      margin-top: 1rem; /* Add some spacing between text and image */
      padding: 1rem;
    }
  
    .sustain-card-content {
      order: 1; /* Move text to the top */
    }
  }
  
  .carousel-sdg4{
    box-shadow: 2px 2px 7px rgba(197, 25, 45, 0.3);
  }
  
  
  .cards-pdf-l {
    text-decoration: none;
    color:#38B6FF;
    font-weight: bold;
  }
  
  
  
  .border-web{
   border :0px solid #87B679;
   box-shadow: inset 0px 0px 8px #87B679 , 0px 0px 8px 2px #87B679;
  }
  
  
  .carousel-webinair{
    box-shadow: 2px 2px 7px rgba(135, 182, 121, 0.3);
  }
  
  
  /*
  .sdg-had-text{
    border: 0px solid #196A5B;
    box-shadow: inset 0px 0px 8px #196A5B, 0px 0px 8px 2px #196A5B;
  }*/
  
  
  .sdg-button{
    border: 0px solid #196A5B;
    box-shadow: inset 0px 0px 8px #196A5B, 0px 0px 8px 2px #ABC6A8;
    width: 100%;
    padding: 1rem;
  }
  
  /*
  @media (max-width: 768px) {
    
    .sdg-button {
     min-height: 70px;
    }
  }*/
  .btn:focus {
    outline: none; 
    border: none;
    box-shadow: none;
  }
  
  .sdg-button:hover {
    background-color: #dfe9de;
  }
   .sdg-button:focus {
    background-color: #dfe9de;
    border: 0px solid #196A5B;
    box-shadow: inset 0px 0px 8px #196A5B, 0px 0px 8px 2px #ABC6A8;
    width: 100%;
    padding: 1rem;
  }
  
  
  .custom-content {
    display: none;
  }
  
  #content-collage {
    display: block;
  }
  
  .collage-box {
    background-color: #dfe9de; 
    border: 0px solid;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
  }
  
  @media (min-width: 767px) {
    .collage-box {
      height: 100%;
    }
  }
  
  @media (max-width: 767px) {
    .collage-box {
      margin-bottom: 20px; /* Adjust the margin size as needed */
    }
  }
  
  
  .carousel-conference{
    box-shadow: 2px 2px 7px rgba(171, 198, 168, 0.4);
  
  }