.hero-gradient {
           background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.7) 100%);
       }

       .card-hover {
           transition: all 0.3s ease;
       }

       .card-hover:hover {
           transform: translateY(-5px);
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
       }

       .floating-btn {
           animation: pulse 2s infinite;
       }

       @keyframes pulse {
           0% {
               box-shadow: 0 0 0 0 rgba(255, 213, 0, 0.7);
           }

           70% {
               box-shadow: 0 0 0 10px rgba(197, 179, 88, 0);
           }

           100% {
               box-shadow: 0 0 0 0 rgba(197, 179, 88, 0);
           }
       }

       html {
           scroll-behavior: smooth;
       }


       /* TRECHO PARA FUNCIONAMENTO FLIP BOX*/

       /* --- Container e Grid dos Flip Cards --- */
       .fusion-flip-boxes {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           gap: 30px 20px;
           /* Aumentei o espaço vertical para o título */
           padding: 10px;
       }

       /* --- Regra principal para os cards --- */
       .fusion-flip-box-wrapper {
           display: flex;
           flex-direction: column;
           align-items: center;

           /* Para telas de computador: 3 colunas */
           flex-grow: 1;
           flex-shrink: 1;
           flex-basis: calc(33.333% - 22px);
           /* Define a base para 1/3 do espaço, descontando o gap */
           max-width: calc(33.333% - 22px);
       }

       /* --- Para telas de tablet: 2 colunas --- */
       @media (max-width: 992px) {
           .fusion-flip-box-wrapper {
               flex-basis: calc(50% - 22px);
               /* Base de 1/2 do espaço */
               max-width: calc(50% - 22px);
           }
       }

       /* --- Para telas de celular: 1 coluna --- */
       @media (max-width: 767px) {
           .fusion-flip-box-wrapper {
               flex-basis: 100%;
               /* Base de 100% para ocupar a linha toda */
               max-width: 350px;
               /* Um máximo para não ficar largo demais em telas deitadas */
           }
       }

       /* --- Estilo Base do Flip Card --- */
       .fusion-flip-box {
           width: 100%;
           height: 300px;
           perspective: 2000px;
           background-color: transparent;
           cursor: pointer;
           -webkit-tap-highlight-color: transparent;
       }

       .flip-box-inner-wrapper {
           position: relative;
           width: 100%;
           height: 100%;
           text-align: center;
           transition: transform 0.8s;
           transform-style: preserve-3d;
           will-change: transform;
       }

       /* --- ESTILO DO TÍTULO EMBAIXO DO CARD (NOVO) --- */
       .card-title {
           margin-top: 15px;
           /* Espaço entre o card e o título */
           font-size: 1em;
           font-weight: 700;
           color: #333;
           text-align: center;
           text-transform: uppercase;
       }

       /* --- Gatilho da Animação --- */
       .fusion-flip-box:hover .flip-box-inner-wrapper,
       .fusion-flip-box:focus .flip-box-inner-wrapper,
       .fusion-flip-box.flipped .flip-box-inner-wrapper {
           transform: rotateY(180deg);
       }

       /* --- Faces Frontal e Traseira --- */
       .flip-box-front,
       .flip-box-back {
           position: absolute;
           width: 100%;
           height: 100%;
           box-sizing: border-box;
           border-radius: 10px;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
           -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
           -webkit-transform: translateZ(0);
           transform: translateZ(0);
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
       }

       /* --- ESTILO DA FACE FRONTAL (AGORA COM IMAGEM) --- */
       .flip-box-front {
           background-size: cover;
           background-position: center;
           background-repeat: no-repeat;
           background-color: #eee;
       }

       /* --- DEFINA AQUI AS IMAGENS PARA CADA CARD --- */
       /* TROQUE as URLs pelas URLs das suas imagens */
       .card-1-front {
           background-image: url('imagens/porta.jpg');
       }

       .card-2-front {
           background-image: url('imagens/predio_comercial2.jpg');
       }

       .card-3-front {
           background-image: url('imagens/portao_residencial.jpg');
       }

       .card-4-front {
           background-image: url('imagens/cobertura.jpg');
       }

       .card-5-front {
           background-image: url('imagens/predio_residencial.jpg');
       }

       .card-6-front {
           background-image: url('imagens/revestimento_em_acm.jpg');
       }

       .card-7-front {
           background-image: url('imagens/novas_comerciais/GOLDEN\ TULIP_01.png');
       }




       /* --- ESTILO DA FACE TRASEIRA (COM A DESCRIÇÃO) --- */
       .flip-box-back {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           padding: 25px;
           background-color: #007bff;
           color: white;
           transform: rotateY(180deg) translateZ(1px);
           -webkit-transform: rotateY(180deg) translateZ(1px);
       }

       .flip-box-heading-back {
           font-size: 1.3em;
           font-weight: bold;
           margin: 0 0 15px 0;
       }

       .flip-box-back p {
           font-size: 1em;
           line-height: 1.6;
           margin: 0;
       }