@import url('https://fonts.googleapis.com/css2?family=Stack+Sans+Headline:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* =========================
   VARIÁVEIS
========================= */
:root {
    --title-font: "Stack Sans Headline", sans-serif;
    --paragraph-font: "Stack Sans Headline", sans-serif;
    --title-weight: 700;
    --paragraph-weight: 600;
      /*========== Colors ==========*/
    --primary-color-blue: #2563EB;
    --second-color-blue: #3B82F6;
    --accent-color: #60A5FA;
    --color-hover: #080F28;
    --subtittles: #5a6a77;
    --secondary-text:#FFF;
    --text-color: #ffffff;
}

/* =========================
   BODY
========================= */
    body {
        font-family: var(--paragraph-font);
        font-optical-sizing: auto;
        font-weight: var(--paragraph-weight);
        font-style: normal;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* =========================
    CONTAINER
    ========================= */
    .container {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .linha-boi{
        width: 100%;
        height: 50px; 
        background: url('../assets/Linha-boi.png') center center no-repeat; 
        background-size: contain;
        margin: 15px auto;   
    }
    @media (max-width: 768px) {
        .linha-boi {
            min-height: 180px;
            background-size: cover;
        }
    }
    h1 {
        margin-left: 20px;
        font-family: var(--title-font);
        font-size: 35px;
        text-align: center;
    }

    .keywords-text{
        font-family: var(--font-keywords);
        color: #2563EB;
        font-size: 40px;
        margin-left:0;
        text-shadow: -10px 10px 10px  rgba(200, 200, 200, 0.8);
        
    }
    .flutuar{
        text-align: center;
        margin-top: 3.5rem;
        margin-bottom: 2rem;
        animation: flutuar 3s ease-in-out infinite;
    }
    @keyframes flutuar {
        0%, 100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-6px);
        }
    }
    .section-tittles{
        margin-top: 3rem;
        margin-bottom:0;
    }
    .detail-text-blue{
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1.3;
        color: #2563EB;
        margin: 0 0 rem;
        text-transform: uppercase;  
    }
  /* ============== BAIXAR CATALOGO ================= */
  .nosso-catalogo{
    margin: 0;
    width: 100%;
    max-height: 500px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: -6rem;
  }
  .image-content img{
    max-width: 500px;
    object-fit: cover;
  }
  .catalogo-content{

    margin-left: 1rem;
  }
  .catalogo-content h2{
    color: #003366;
    margin:0;
    font-size: 2rem;
    text-align:start;
  }
  .catalogo-content p{
    font-size: 1rem;
    margin: 0.7rem 0 5rem 0;
    text-align:start;
    color: #5a6a77;
  }
  .catalogo-cta {
  text-decoration: none;
  width: 18rem;
  background: linear-gradient(-45deg,
      #003366,
      #0057b8
  );
  background-size: 400% 400%;
  animation: gradient 12s ease infinite;
  color: white !important;
  padding: .75rem 1.5rem;
  border-radius: 7px;
  font: 500 var(--small-font-size) var(--body-font);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
 }
/* Tablet: reduz respiro do texto */
@media (max-width: 900px){
  .catalogo-content p{
    margin:0.7rem 0 1.5rem 0;
  }
}

/* Mobile: empilha imagem e conteúdo */
@media (max-width: 750px){
  .nosso-catalogo{
    margin-bottom: 0;
    flex-direction:column;
    gap:1.5rem;
  }
  .image-content,
  .catalogo-content{
    width:100%;
    margin-left:0;
  }
  .image-content img{
    width: 400px;
  }
  .catalogo-content h2,
  .catalogo-content p{
    text-align:center;
  }

  .catalogo-cta{
    margin:0 auto;
  }
}
    /* =================================
                    BOTÃO
    =================================*/
    .button-cta-blue {
        text-decoration: none;
        max-width: 300px;
        background-color: white;
        color: black;
        border-radius: 10em;
        font-size: 17px;
        font-weight: 600;
        padding: 1em 2em;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
        border: 1px solid black;
        box-shadow: 0 0 0 0 black;
    }
    .button-cta-blue:hover {
    transform: translateY(5px) translateX(0px);
    box-shadow: 0 5px 0 0 #2563EB;
    };

    .button-cta-blue:active {
    transform: translateY(2px) translateX(1px);
    box-shadow: 0 0 0 0 black;
    };