@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype'),
	src: url('/fonts/Poppins-Light.ttf') format('truetype'),
	src: url('/fonts/Poppins-Bold.ttf') format('truetype'); 
}


body {
	font-family: 'Roboto', sans-serif;
	font-size: 20px !important;
	font-weight: 400;
}



a {
	color: #000000;
}

a:hover {
	color: #999999;
	text-decoration: underline;
}
.text-justify {
	 text-align: justify;
}

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

.container-flex p {
    margin-left: 1em;
}


.text-green-underline {
	text-decoration-line: underline;
	text-decoration-color: #007a33;
	text-underline-offset: 6px; 
	text-decoration-thickness: 2px; 
}

a.nav-link, a.dropdown-item {
	font-size: 16px !important;
	font-weight: bold !important;
}
h2 {
	font-size: 36px !important;
	font-weight: 600;
}

.h2-green {
	color: #368c42 !important;
}

h4 {
	font-size: 20px !important;
	font-weight: 600;
}

.caption {
	font-size: 16px;
}

.background-dark-green {
	background: #368c83;
	color: #FFFFFF;
}

.quotemark {
	font-size: 100px;
	color: #73a8a0;
}

.quote-container {
  position: relative;
  font-size: 1.2rem;
  line-height: 1.6;
  padding: 0 2rem;
}

/* Opening quote */
.quote-container::before {
  content: "“";
  font-size: 4rem; /* Enlarge the mark */
  color: #ccc;     /* Adjust color */
  position: absolute;
  top: -2.5rem;    /* Align vertically with the first text line */
  left: 0;
}

/* Closing quote */
.quote-container::after {
  content: "”";
  font-size: 4rem;
  color: #ccc;
  position: absolute;
  bottom: -4.0rem; /* Align vertically with the end of the text */
  right: 0;
}


.quote::before {
    content: "\201C"; /*  */
		font-size: 100px;
	color: #73a8a0;
}

.quote::after {
    content: "\201D"; /* ” */
}

.font-bold {
	font-family: 'Poppins-bold', sans-serif;
	font-size: 20px !important;
	font-weight: 900;
}

.font-hero {
	font-family: 'Poppins-bold', sans-serif;
	font-size: 36px !important;
	font-weight: 900;
	color: #FFFFFF;
}

.font-hero-counter {
	font-size: 60px !important;
}

.font-green {
	color: #296e67;
}

.alt-color {
	background: #ebf3f3;
}


.footer-bg {
	background: #007a33;
	}
	
.homepage-hero {
	background-image: url("../images/homepage-hero.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.aboutus-hero {
	background-image: url("../images/aboutus-hero.png");
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;

}

.abtus {
	line-height: 1.8em !important;
	}

.footer-text {
	font-size: 12px;
	color: #FFFFFF;
}

.js-animate-element {
    opacity: 0;

    &.bottom-animation{
        transform: translateY(150px);
    }

    &.top-animation{
        transform: translateY(-150px);
    }

    &.right-animation{
        transform: translateX(150px);
    }

    &.left-animation{
        transform: translateX(-150px);
    }

    &.insight {
        transform: translateY(0) translateX(0);
        opacity: 1;
        transition: 1s all ease;
    }
}


  .timeline-wrapper { width: 100%; margin-top:50px; overflow: hidden; position: relative; height:250px; }
  .timeline { display:flex; position:absolute; left:0; top:6%; transition: transform 2s linear; }

  .line { position:absolute; top:10%; left:0; height:4px; background:#ddd; width:100%; z-index:0; transform:translateY(-50%); }
  .progress-line { position:absolute; top:10%; height:4px; background:#28a745; width:0%; z-index:0; transition: width 2s ease; transform:translateY(-50%); }

.quote-container {
  position: relative;
  padding-left: 2rem; /* Make space for the large quotation mark */
  font-family: sans-serif;
}


/* Left-Floated Image Styling */
.left-img {
    float: left;
    margin-top: 4px;
    margin-right: 50px; /* Space between image and right-side text */
    margin-bottom: 10px; /* Space between image and text wrapped underneath */
    border-radius: 6px;
    max-width: 40%; /* Keeps image scalable */
    height: auto;
}

/* Responsive Design for Mobile Screens */
@media (max-width: 600px) {
    .left-img {
        float: none; /* Disables wrapping on tiny screens */
        display: block;
        max-width: 100%;
        margin: 0 auto 15px auto; /* Centers the image above the paragraph */
    }
}