:root {		
		--primary-color: #354B4F; 
		--secondary-color: #6F8F8F; 
		--tertiary-color: #fff;		
		--primary-color-rgb: 53,75,79; /*#354B4F; CONFIRM */
		--secondary-color-rgb: 111,143,143; /*#6F8F8F; */		 
		--tertiary-color-rgb: 220,239,242; /* #dceff2 */ 
		--bs-primary: var(--primary-color); 
		--bs-secondary: var(--secondary-color); 
		--bs-primary-rgb: var(--primary-color-rgb);
		--bs-secondary-rgb: var(--secondary-color-rgb);	
		--text-color: rgb(220,239,242); 	
		--heading-color: var(--primary-color);
		--bs-link-color-rgb: 220,239,242; 
		--bs-link-hover-color-rgb: 255,255,255; 			
		--bs-nav-link-color: rgb(var(--bs-link-color-rgb)); 			
		--bs-navbar-brand-color: gb(var(--bs-link-color-rgb)); 
		--green-2: #dceff2; 
		--green-3: #BCCED2; 
		--green-4: #CFE2E5; 
		--green-5: #CDE0E3; 
		--green-6: #AABDC0; 
		--green-7: #354A4E; 
		--bs-body-font-family: Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif; 
		--bs-body-font-weight: 300;	
		--blockquote-bg: var(--primary-color); 
		--blockquote-color: #fff; 
	}
	
	.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
		font-weight: 700;
		color: var(--heading-color);
		text-align: center;
	}
	
	.h2, h2 {
		font-size: 3em; 
	}
	
	.h3, h3 {
		font-size: 1.3em; 
		text-align: left;
	}		
	
	strong {
	    font-weight: 600;
	}
	
	a {
		text-decoration: none; 
	}
  
    .jumbo-contact-icons {
	    text-align: center; 
    }
  
    .jumbo-contact-icon {
	    font-size: 3em; 				
    }
  
    .footer-contact-details {
	    border-left: none; 
	    border-top: 1px solid var(--text-color); 
    }
  
    @media (min-width: 576px) {
	    .footer-contact-details {
		    border-top: none; 
		    border-left: 1px solid var(--text-color); 
	    }
    }
	
	body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .content {
      flex: 1;
    }
    
    .collaborator-logo {
        height: 50px; 
        width: auto;
        max-width: 100%; 
        margin: 20px; 
    }
    
    .quote {
      background-color: var(--blockquote-bg); ; /* Dark background 333 */
      color: var(--blockquote-color); /* Light text #f5f5f5 */
      padding: 25px 30px; /* Padding for the entire figure */
      /*border-left: 10px solid var(--blockquote-color);*/ /* Line down the left side #f5f5f5*/
      position: relative; /* For positioning the opening quote */
      margin: 20px 0 20px 0; /* Add spacing around the figure */
      font-family: "Georgia", serif; /* Optional, elegant font for quotes */
      font-size: 1.2em;
      border-radius: 10px;
      font-style: italic;
    }
    
    .quote blockquote {
      margin: 0; /* Reset margin */
      padding-left: 40px; /* Indent the text block */
      /*position: relative;*/ /* For pseudo-element positioning */
    }
    
    .quote blockquote p {
      margin: 0; /* Reset paragraph margin */
      line-height: 1.6; /* Better line spacing for readability */
    }
    
    .quote blockquote::before {
      content: "“"; /* Opening quote mark */
      font-size: 100px; /* Large opening quote size */
      color: var(--blockquote-color); /* Light color matching text #f5f5f5 */
      position: absolute;
      /*left: -20px; *//* Position outside the padding */
      left: 8px; 
      top: 50%; /* Center vertically */
      transform: translateY(-50%); /* Adjust for centering */
      z-index: 1; /* Ensure it appears above the background */
    }
    
    .quote figcaption {
      margin-top: 15px; /* Space above the caption */
      text-align: right; /* Align to the right */
      font-style: italic; /* Italicize the name */
      color: var(--blockquote-color); /* Slightly muted color for the caption */
      opacity: 0.8;
    }
    
    section.section-secondary .quote.hero {
        font-size: 1.4em;
        --blockquote-bg: none; 
        --blockquote-color: #fff; /* var(--primary-color)*/ 
    }
    
    section.section-secondary .quote.hero blockquote::before {
         left: 50%; 
        top: 0; /* Center vertically */
     }
    
    
    @media (min-width: 600px) {
        
     .quote {
         margin: 20px 0 20px 50px;; /* Add spacing around the figure */
     }
     
     section.section-secondary .quote.hero blockquote::before {
         left: 8px; 
        top: 50%; /* Center vertically */
     }
    }

    section {		
		background: var(--primary-color); 
		color: var(--text-color);		
		padding-top: 6em; 
		padding-bottom: 6em;
	}
	  
	section.section-primary {		
		background: var(--primary-color); 
		color: var(--text-color);
		--heading-color: #fff;
		/**--blockquote-bg: var(--secondary-color); 
		--blockquote-color: */
		--blockquote-bg: var(--green-2); 
		--blockquote-color: var(--primary-color);
		
		
	}	  
	  
	section.section-secondary {		
		background: var(--secondary-color); 
		color: #ffffff;
	}
	  
	section.section-tertiary {		
		background: var(--tertiary-color); 
		color: #111; 
		--bs-link-color-rgb: var(--primary-color-rgb); 
		--bs-link-hover-color-rgb: var(--primary-color-rgb); 		
	}
	  
	.section-contact {
		padding-top: 0em; 
		padding-bottom: 0em;
	}
	  
	.copyright, .designby {
		font-size: 0.8em; 
		color: var(--text-color);
	}
	
    .animate-text {
      opacity: 0; /* Hidden by default */
      transform: translateY(20px); /* Move text slightly down */
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    /* Add the visible class when the section is in the viewport */
    .animate-text.visible {
      opacity: 1; /* Fully visible */
      transform: translateY(0); /* Move to original position */
    }