body{
      background-color: #e8f0ec;

}

#intro-bar{
    background-image: url('../Images/rainybackground.png'); /*Background image*/
    background-size: cover; /*Cover the entire div area*/
    background-position:center; /*Centers the image */
    width: 100%; /*Full width*/
    height: 90vh; /* 60% of the viewport height (viewport is what the user currently sees)*/ 
    position: relative; /* So that children stay inside like the rain, if this where to go away it hop to the next "anchor" being the body tag*/
    display:flex; /*One of the most useful styles, allows for things to be position inside of a box */
    align-items: center; /*Going off of the flexbox this aligns the items in the center of the flex box */
    justify-content:center;/* This makes sure that there is even spacing between all of the content in flex box */
    color:#ffffff; /* Color of text */
}

#intro-bar .overlay{ /*This specifically targts the overlay inside of the intro-bar if overlay was used outside of introbar this styling would not affect it*/
    background-color: rgba(0,0,0,0.4); /*Background of the text inside of the intro bar, transparent black*/
    padding: 20px 40px; /*Spacing around the text*/
    border-radius: 10px; /*Curves the edges of the border of the overlay, higher you go the more curved it becomes*/
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /*Self explanitory the shadow around the box*/
    animation: fadeInUp 1.5s ease-out;
}

#overlay-text {
  transition: opacity 0.4s ease;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.lightning {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
}
@keyframes flash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  25%  { opacity: 0.5; }
  50%  { opacity: 0.2; }
  100% { opacity: 0; }
}


/* Don't worry about this, this stuff sucks to comphrend */

.rain {
  position: absolute;
  left: 0;
  width: 100%;
  height: 75%;
  z-index: 2;
}

.rain.back-row {
  display: none;
  z-index: 1;
  bottom: 50px;
  opacity: 0.5;
}

body.back-row-toggle .rain.back-row {
  display: block;
}

.drop {
  position: absolute;
  bottom: 100%;
  width: 15px;
  height: 120px;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}

@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(90vh);
  }
  100% {
    transform: translateY(90vh);
  }
}

.stem {
  width: 1px;
  height: 60%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
  animation: stem 0.5s linear infinite;
}

@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*Start worrying about stuff again*/

#intro-bar p {
    font-size: 1.8rem; /*rem is just a unit of measurement*/
    font-weight: bold; 
    text-align: center;
    margin:0; /*So for websites there is something called the box model, which contains margin, border and padding 
    this for example gets rid of the space around the text, the overlay bar would be bigger basically if any of the previously mentioned spacings is greater then 0 then there will be spacing between that and the page*/ 
}

#introduction-container{
    display:flex;
    flex-direction: row; /*For educational purposes this shows the direction of things will flow inside of a flex display, the direction is set to row by default but you can reverse the rows and have columns and 
    reverse columns*/
    align-items: center;
    justify-content: space-between;/* */
    gap:50px;
    padding:40px 60px;
    flex-wrap: wrap;
    background-color: #e8f0ec;
}

#introduction-lines{
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 1.1rem;
    line-height: 1.6;
    color:#333
}

#introduction-lines h2 {
    font-size: 2rem;
    margin-bottom: 10px
}

#introduction-lines a {
    font-weight: bold;
    text-decoration: none;
    color:#2c4c3b
}

#introduction-lines a:hover {
    text-decoration: underline;
    color:#4b8063
}

.intro-image{
  flex: 1 1 40%;
  position: relative;
  width: 100%;
  height: 400px;
  display:flex;
  justify-content: center;
}

.intro-image .behindcloud {
  position: absolute;
  width: 320px;
  height: 100px;
  background: #353535;
  border-radius: 100px;
  filter: drop-shadow(8px 8px 0 #0005);
  animation: animateCloud 2s steps(1) infinite;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.intro-image .behindcloud::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 40px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: #454c55;
  box-shadow: 90px -10px 0 30px #454c55;
}

.intro-image .behindcloud::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #454c55;
  border-radius: 100px;
}


.intro-image .cloud {
  position: relative;
  width: 320px;
  height: 100px;
  background: #fff;
  border-radius: 100px;
  filter: drop-shadow(8px 8px 0 #0005);
  animation: animateCloud 2s steps(1) infinite;
}


.intro-image .cloud::before{
  content: '';
  position:absolute;
  top:-50px;
  left: 40px;
  width:110px;
  height:110px;
  border-radius: 50%;
  background: #484f59;
  box-shadow: 90px -10px 0 30px  #484f59 ;
}


.intro-image .cloud::after{
  content: '';
  position:absolute;
  inset:0;
  background: #484f59;
  border-radius: 100px;
}

/* Only affects cloud rain */
.intro-image .drop {
  position: absolute;
  top:0;
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
  animation: cloudDrop 8s linear infinite;
  padding: 0 10px; /* gives buffer space on both sides */
  box-sizing: content-box;
}

.intro-image .drop p {
  margin: 0;
  font-size: 20px;
  color: #000;
  font-weight: 700;
  text-shadow: none;
}


/* Scoped animation for cloud text rain only */
@keyframes cloudDrop {
  0% {
    transform: translateY(0vh);
    opacity: 1;
  }
  100% {
    transform: translateY(60vh);
    opacity: 0.2;
  }
}



.rain-wrapper {
  position:absolute;
  right:280px;
  height: 60vh;
  width: 100%;
  max-width: 300px; /* match cloud width */
  overflow: visible; /* allow drops to extend a little */
  pointer-events: none;
  z-index: 1;
}

#services-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 60px 40px;
  background: #f4f9f7;
  justify-content: center;
}

.services-left,
.services-right {
  flex: 1 1 400px;
  min-width: 300px;
  max-width: 600px;
}

.service-list {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.service-list li {
  margin-bottom: 30px;
  border-left: 4px solid #4CAF50;
  padding-left: 16px;
}

.service-list h4 {
  font-size: 1.4rem;
  margin-bottom: 8px;
  color: #2c4c3b;
}

.service-list p,
.services-right p {
  font-size: 1rem;
  color: #333;
  line-height: 1.6;
}

.services-right h3,
.services-left {
  font-size: 1.6rem;
  color: #2c4c3b;
  margin-bottom: 20px;
}


#showcase-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 60px 40px;
    background-color: #e8f0ec;
}

#showcase-container h3 {
    font-size: 2rem;
    color: #2e7d32;
    margin-bottom: 10px;
}

#showcase {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.project {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 280px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.project:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.project h4 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 12px;
}

.project a{
    text-decoration: none;
    color: #333;
}

.project img {
    width: 100%;
    border-radius: 6px;
    object-fit: cover;
}