body {
     background-color: #f8f9fa;
 }

 .hero {
     background: linear-gradient(135deg, #007bff, #6610f2);
     color: white;
     padding: 90px 0;
     text-align: center;
 }

 .hero h1 {
     font-weight: 700;
 }

 .hero p {
     font-size: 1.1rem;
     opacity: 0.9;
 }

 .section {
     padding: 60px 0;
 }

 .card {
     border-radius: 1rem;
     transition: transform 0.2s;
 }

 .card:hover {
     transform: scale(1.02);
 }

 /* IMAGEM SOBRE */

 .img-sobre {
     max-width: 300px;
     /* diminui tamanho */
     width: 60%;
     transition: transform 0.4s ease;
     animation: flutuar 4s ease-in-out infinite;
 }

 /* efeito hover */

 .img-sobre:hover {
     transform: scale(1.08) rotate(2deg);
 }


 /* animação flutuante */

 @keyframes flutuar {

     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-10px);
     }

     100% {
         transform: translateY(0px);
     }

 }