header{
  width: 100%;
  max-width: 100%;
  min-height: 500px;
  height: auto;
  background-image: url('../images/about-banner.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
main{
  background-color: #f7f7f7;
}
footer{
  background-image: url('../images/Rectangle\ 51.png');
  position: relative;
}
.profile-image{
  background-image: url('../images/Group\ 878\ \(1\).png');
  background-position:top center;
  background-size: cover;
  background-repeat: no-repeat;
  height: auto;
  min-height: auto;
}
.profile-image img{
  border: 5px solid white;
}

.profile-bio{
  height: auto;
  min-height: auto;
}
#image-2{
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  animation: up-down 2s infinite ease-out;
}
#gold-text{
  color: orangered;
}
#footer-cloud-animation{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  animation: down-up 2s infinite ease-out;
}
#title{
  position: relative;
  padding-left:10px ;
}
#title::before{
  content: ""; /* Creates a pseudo-element */
  position: absolute;
  left: 0;
  top:3px;
  display: block; /* Ensures the pseudo-element is on its own line */
  width: 5px; /* Width of the blue bar */
  height: 20px; /* Height of the blue bar */
  background-color: rgb(73, 155, 248); /* Blue color for the bar */
  margin-bottom: 10px; /* Space between the blue bar and the title */
}
.round-shape-one {
width: 20px;
height: 20px;
border: 3px solid #5b93af;
border-radius: 50%;
position: absolute;
top: 15%;
left: 36%;
z-index: 99;
animation: animationFramesOne 15s infinite linear;
}
.round-shape-two {
width: 20px;
height: 20px;
border: 3px solid #5baf8b;
border-radius: 50%;
position: absolute;
top: 60%;
right: 40%;
z-index: 99;
animation: animationFramesOne 15s infinite linear;
}
.round-shape-three {
position: absolute;
width: 10px;
height: 10px;
border: 3px solid #a97d58;
border-radius: 50%;
bottom: 42%;
left: 6%;
z-index: 99;
animation: animationFramesTwo 15s infinite linear;
}
.shape-four {
position: absolute;
top: 17%;
right: 15%;
z-index: 99;
animation: rotatedHalf 30s infinite linear;
}
@media screen and (max-width: 768px) {
  header{
      min-height: 300px !important;
  }
  .profile-bio{
      min-height: auto;
  }
  #footer-cloud-animation{
      position: absolute;
      top: -1px;
      left: 0;
      right: 0;
      width: 100%;
      height: auto;
      animation: down-up 2s infinite ease-out;
  }
  img#logo-header{
      width: 120px;
  }
}
@keyframes up-down {
0%{
   transform: translateY(0);
} 
50%{
  transform: translateY(10px);
}
100%{
  transform: translate(0);
}
}
@keyframes down-up {
  0%{
     transform: translateY(0);
  } 
  50%{
    transform: translateY(-10px);
  }
  100%{
    transform: translate(0);
  }
}
@keyframes rotatedHalf{
0% {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
50% {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
100% {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}
}
@keyframes animationFramesOne{

0% {
  transform: translate(0px, 0px) rotate(0deg);
}
20% {
  transform: translate(73px, -1px) rotate(36deg);
}
40% {
  transform: translate(141px, 72px) rotate(72deg);
}
60% {
  transform: translate(83px, 122px) rotate(108deg);
}
80% {
  transform: translate(-40px, 72px) rotate(144deg);
}
100% {
  transform: translate(0px, 0px) rotate(0deg);
}
}
@keyframes animationFramesTwo{
0% {
transform: translate(0px, 0px) rotate(0deg) scale(1);
}
20% {
transform: translate(73px, -1px) rotate(36deg) scale(0.9);
}
40% {
transform: translate(141px, 72px) rotate(72deg) scale(1);
}
60% {
transform: translate(83px, 122px) rotate(108deg) scale(1.2);
}
80% {
transform: translate(-40px, 72px) rotate(144deg) scale(1.1);
}
100% {
transform: translate(0px, 0px) rotate(0deg) scale(1);
}
}

@media (max-width: 768px) {
  #footer-cloud-animation {
      animation: down-up 2s infinite ease-out;
  }
  @keyframes down-up {
      0%{
          transform: translateY(0);
       } 
       50%{
         transform: translateY(-4px);
       }
       100%{
         transform: translate(0);
       }
  }
}
@media (max-width: 768px) {
  #image-2 {
      animation: up-down 2s infinite ease-out;
  }
  @keyframes up-down{
      0%{
          transform: translateY(0);
       } 
       50%{
         transform: translateY(4px);
       }
       100%{
         transform: translate(0);
       }
  }
}
Collapse