/* Custom styles for Ungaretti Comex */



/* Buttons and CTAs */

.btn-gradient {

    background: linear-gradient(135deg, hsl(var(--accent)), hsl(calc(var(--accent-h) + 20), var(--accent-s), var(--accent-l)));

    color: hsl(var(--accent-foreground));

    padding: 0.75rem 1.5rem;

    border-radius: 0.5rem;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;

}



.btn-gradient:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}



/* Cards */

.card {

    background: hsl(var(--card));

    border: 1px solid hsl(var(--border));

    border-radius: 0.75rem;

    padding: 2rem;

    transhttps://www.ungaretticomex.com.br/

}



.card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);

}



.card-icon {

    color: hsl(var(--accent));

    font-size: 2rem;

    margin-bottom: 1rem;

}



/* Hero Section */

       .hero{

  min-height: calc(100vh - 80px);

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 4rem 0;

  background: 

    linear-gradient(rgba(10, 53, 87, 0.5), rgba(10, 53, 87, 0.5)),

    url('https://www.ungaretticomex.com.br/wp-content/uploads/2025/11/banner-ungaretti.png');

  background-size: cover;

  background-position: center;

  color: #fff;

}



.hero-content {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

}



.hero h1 {

    font-size: 3rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    line-height: 1.2;

    color: #fff;

}



.hero-subtitle {

    font-size: 1.25rem;

    color: hsl(var(--text-dark));

    margin-bottom: 2rem;

}



.hero-highlights {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 1.5rem;

    margin-bottom: 2rem;

}



.hero-highlight {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    color: #fff;

}



.hero-highlight-icon {

    color: hsl(var(--accent));

    width: 1.5rem;

    height: 1.5rem;

}



/* Stats Grid */

.hero-stats {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 2rem;

    margin-top: -50px;

}



.hero-stat {

    text-align: center;

}



.hero-stat-number {

    font-size: 2.5rem;

    font-weight: 700;

    color: hsl(var(--primary));

    margin-bottom: 0.5rem;

}



.hero-stat-label {

    color: hsl(var(--text-dark));

}



/* Authority Section */

.authority {

    padding: 6rem 0;

    background: hsl(var(--muted));

}



.section-title {

    font-size: 2.5rem;

    font-weight: 700;

    text-align: center;

    margin-bottom: 1rem;

    color: hsl(var(--primary));

}



.section-subtitle {

    font-size: 1.25rem;

    text-align: center;

    color: hsl(var(--text-dark));

    margin-bottom: 4rem;

}



.credentials-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 2rem;

}



/* Footer customization */

footer {

    background: hsl(var(--primary)) !important;

}



footer .logo {

    color: hsl(var(--primary-foreground));

    font-size: 1.5rem;

    font-weight: 700;

}



/* Responsive Design */

@media (max-width: 768px) {

    .hero h1 {

        font-size: 2.25rem;

    }



    .hero-subtitle {

        font-size: 1.125rem;

    }



    .hero-highlights {

        flex-direction: column;

        align-items: center;

    }



    .section-title {

        font-size: 2rem;

    }



    .credentials-grid {

        grid-template-columns: 1fr;

    }

}



.problems {

  padding: 6rem 1rem;

  background: #fff;

  color: hsl(var(--text-dark));

}



.problems .container {

  max-width: 1200px;

  margin: 0 auto;

}



.problems-header {

  text-align: center;

  margin-bottom: 4rem;

}



.section-title {

  font-size: 2.5rem;

  font-weight: 800;

  color: hsl(var(--text-dark));

  line-height: 1.2;

}



.gradient-text {

  background: linear-gradient(90deg, #346282, #68acdb, #94c4e7);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  display: block;

}







.section-subtitle {

  font-size: 1.4rem;

  font-weight: 700;

  margin-top: 1rem;

  color: hsl(var(--text-dark));

}



.problems-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

  gap: 2rem;

}



.problem-card {

  background: #f9fafb;

  border-radius: 1rem;

  padding: 2.5rem 2rem;

  text-align: center;

  transition: all 0.3s ease;

  border: 1px solid transparent;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center; /* centraliza verticalmente o conteúdo */

}



.problem-card:hover {

  border-color: hsl(var(--accent));

  transform: translateY(-6px);

  background: #fff;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);

}



.problem-icon {

  color: #e5484d; /* vermelho dos textos de alerta */

  margin-bottom: 1.2rem;

}



.problem-icon svg {

  width: 36px;

  height: 36px;

  stroke: currentColor;

  stroke-width: 2;

  fill: none;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.problem-text strong {

  display: block;

  font-size: 1.1rem;

  margin-bottom: 0.5rem;

  color: hsl(var(--text-dark));

}



.problem-text span {

  color: #e5484d;

  font-weight: 500;

  font-size: 0.95rem;

}



.ocean-card {

  margin-top: 4rem;

  background: linear-gradient(135deg, #1a2a6c, #2ec4a3);

  padding: 2rem;

  border-radius: 1rem;

  color: #fff;

  text-align: center;

  font-style: italic;

}



.ocean-card span {

  color: #fff;

  font-weight: 700;

}



@media (max-width: 768px) {

  .section-title {

    font-size: 2rem;

  }



  .section-subtitle {

    font-size: 1.1rem;

  }



  .problem-card {

    padding: 1.5rem;

  }

}

/* Ícones das seções de soluções e do footer */

.solution-icon svg,

.benefits-list .check-icon,

.footer-section .icon-sm {

  fill: none;

  stroke: #68acdb;

  stroke-width: 2;

  stroke-linecap: round;

  stroke-linejoin: round;

}



/* Caso algum SVG precise de preenchimento */

.footer-section .icon-sm path[fill],

.footer-section .icon-sm circle[fill] {

  fill: #68acdb;

  stroke: none;

}

.contact-item-footer {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  color: #fff;

}



.contact-item-footer svg {

  flex-shrink: 0;

  width: 20px;

  height: 20px;

  fill: #68acdb; /* cor do ícone */

  margin-top: 3px; /* centraliza melhor com o texto */

}



.contact-item-footer div {

  flex: 1; /* faz o texto ocupar o espaço restante */

  line-height: 1.4;

}