/* Background animation elements */
 .background {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     overflow: hidden;
 }

 .floating-element {
     position: absolute;
     opacity: 0.7;
     animation-name: floating;
     animation-iteration-count: infinite;
     animation-timing-function: ease-in-out;
 }

 /* Medical instrument icons created with CSS */
 .stethoscope {
     position: relative;
     width: 40px;
     height: 40px;
 }

 .stethoscope:before {
     content: '';
     position: absolute;
     width: 30px;
     height: 30px;
     border: 3px solid #2c6b9e;
     border-radius: 50%;
     top: 0;
     left: 0;
 }

 .stethoscope:after {
     content: '';
     position: absolute;
     width: 20px;
     height: 25px;
     border: 3px solid #2c6b9e;
     border-top: none;
     border-radius: 0 0 15px 15px;
     top: 27px;
     left: 5px;
 }

 .syringe {
     position: relative;
     width: 8px;
     height: 40px;
     background: #48cae4;
     border-radius: 10px;
 }

 .syringe:before {
     content: '';
     position: absolute;
     width: 15px;
     height: 8px;
     background: #48cae4;
     border-radius: 5px;
     top: 0;
     left: -4px;
 }

 .syringe:after {
     content: '';
     position: absolute;
     width: 5px;
     height: 10px;
     background: #2c6b9e;
     border-radius: 0 5px 5px 0;
     top: -10px;
     left: 1px;
 }

 .pill {
     width: 20px;
     height: 10px;
     background: #ff6b6b;
     border-radius: 10px;
 }

 .heart-rate {
     position: relative;
     width: 40px;
     height: 25px;
 }

 .heart-rate:before {
     content: '';
     position: absolute;
     width: 5px;
     height: 5px;
     border-radius: 50%;
     background: #ff6b6b;
     top: 5px;
     left: 0;
     box-shadow: 10px 5px 0 0 #ff6b6b,
         20px 15px 0 0 #ff6b6b,
         30px 5px 0 0 #ff6b6b,
         40px 10px 0 0 #ff6b6b;
 }

 .heart-rate:after {
     content: '';
     position: absolute;
     width: 40px;
     height: 2px;
     background: #ff6b6b;
     top: 11px;
     left: 0;
 }

 .medical-cross {
     position: relative;
     width: 30px;
     height: 30px;
 }

 .medical-cross:before,
 .medical-cross:after {
     content: '';
     position: absolute;
     background: #2c6b9e;
     border-radius: 2px;
 }

 .medical-cross:before {
     left: 14px;
     width: 2px;
     height: 30px;
 }

 .medical-cross:after {
     top: 14px;
     width: 30px;
     height: 2px;
 }

 .pulse {
     position: absolute;
     border: 2px solid rgba(70, 130, 180, 0.3);
     border-radius: 50%;
     height: 20px;
     width: 20px;
     animation: pulse 3s linear infinite;
 }

 @keyframes floating {
     0% {
         transform: translate(0, 0) rotate(0deg);
     }

     50% {
         transform: translate(0, -20px) rotate(5deg);
     }

     100% {
         transform: translate(0, 0) rotate(0deg);
     }
 }

 @keyframes pulse {
     0% {
         transform: scale(0.1);
         opacity: 0.0;
     }

     50% {
         opacity: 0.5;
     }

     100% {
         transform: scale(3);
         opacity: 0.0;
     }
 }