@import url("https://fonts.cdnfonts.com/css/museo");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: "Museo", sans-serif, "Roboto";*/
}

body {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    background: #fdfdfd;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh !important;
}


.content {
    flex: 1 !important;
}
.tm-c {
    height: 60vh !important;
}
.form-label {
    margin-bottom: 0.1rem !important;
}
.menu h3 {
    font-weight: 700;
    color: #4d4d4d;
    font-size: 1.2rem;
}
.menu p {
    font-weight: 300;
    color: #717171;
    font-size: 0.8rem;
}
/*.bg {
    min-height: 100%;
    background: linear-gradient(
        rgba(255, 252, 252, 0.877),
        rgba(255, 255, 255, 0.829)
    ),
    url(/assets/Aerea-Crato-redimensionada.jpg);
    background-size: cover;
}*/

label {
    font-family: "Roboto";
    font-size: 0.9rem;
}

.btncad {
    background-color: #4077bb;
    color: white;
    border: none;
    padding: 0.4rem;
    border-radius: 10px;
}

.btn {
    transition: all 0.9s ease-in-out;
}

.btn:hover {
    transform: scale(1.1);
}

.card-title {
    font-size: 1.2rem;
    font-weight: 700;
}

.card a {
    text-decoration: none;
    //color: #4077bb;
    font-style: normal;
    font-family: "Roboto";
}
.card span,
p,
h6 {
    font-family: "Roboto", sans-serif !important;
}
.border.border-primary {
    border-bottom: 6px solid #4077bb !important;
}

.border.border-primary-input {
    border: 1px solid #4077bb !important;
}

.brand {
    text-decoration: none;
    outline: none;
    font-weight: 900;
    color: white;
    font-size: 1.2rem;
}

.clock {
    width: 80px;
    height: 50px;
    padding: 10px;
    color: white;
    background-color: #4077bb;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 14px;
}
.links {
    font-size: 0.9rem;
}
.links:hover {
    color: #092e47;
}

.imgc {
    margin-right: 5rem;
}

p {
    font-size: 12px;
    color: rgba(0, 0, 0, 0.58);
}

.modalc {
    justify-content: center;
    align-items: center;
}
input::placeholder {
    font-family: "Roboto";
}

button[type="submit"] {
    background-color: #4077bb;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

button[type="submit"]:hover {
    background-color: #305b8d;
    transform: scale(1.05);
}

button[type="submit"]:active {
    transform: scale(0.95);
    background-color: #2a4e76;
}

.form-end p {
    font-size: 1.2rem;
    color: #092e47;
}
.form-end span {
    font-weight: 500;
}
#video {
    width: 320px;
    height: 270px;
    border: 1px solid black;
}
#canvas {
    display: none;
}
#snapshot {
    margin-top: 10px;
}
@media (max-width: 785px) {
    .card {
        width: 100%;
        flex-direction: column !important;
    }
    img {
        transform: scale(0.94);
    }
}

/* Versão compacta dos floating labels */
.form-floating-custom {
    position: relative;
    margin-bottom: 1rem;
}

/* Altura reduzida igual aos inputs normais */
.form-floating-custom > .form-control,
.form-floating-custom > .form-select {
    height: auto;
    min-height: calc(2.1rem + 2px);
    padding: 0.5rem 0.75rem;
    line-height: 1.5;
}

.form-floating-custom > label {
    position: absolute;
    top: 0.67rem;
    left: 0.75rem;
    padding: 0 0.25rem;
    font-size: 0.875rem;
    color: #6c757d;
    pointer-events: none;
    transform-origin: 0 0;
    transition: all 0.1s ease-in-out;
}

/* Estado ativo - label sobre a borda */
.form-floating-custom > .form-control:focus ~ label,
.form-floating-custom > .form-control:not(:placeholder-shown) ~ label,
.form-floating-custom > .form-select ~ label {
    transform: scale(0.85) translateY(-1.4rem) translateX(0.15rem);
    color: #1266f1;
    background-color: white;
    padding: 0 0.35rem;
    z-index: 2;
}

/* Ajuste de padding quando ativo */
.form-floating-custom > .form-control:focus,
.form-floating-custom > .form-control:not(:placeholder-shown),
.form-floating-custom > .form-select {
    padding-top: 0.6rem;
    padding-bottom: 0.4rem;
}

.form-floating-custom > .form-control:focus {
    border-color: #1266f1;
    box-shadow: 0 0 0 0.2rem rgba(18, 102, 241, 0.25);
}

.form-floating-custom > .form-control::placeholder {
    color: transparent;
}

/*  para home */

:root {
    --primary-blue: #00AEEF;
    --secondary-blue: #0066CC;
    --light-blue: #E6F7FF;
    --text-dark: #333333;
    --text-muted: #666666;
    --bg-light: #F8F9FA;
    --bg-blue-light: #e5f5ff;

}




/* Header Styles */
.header {
    border-bottom: 1px solid #e9ecef;
}

.navbar-brand img {
    height: 40px;
}

.navbar-nav .nav-link {
    font-weight: 500;
    color: var(--text-dark) !important;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary-blue) !important;
}

.btn-login {
    background-color: var(--primary-blue);
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-login:hover {
    background-color: var(--secondary-blue);
    transform: translateY(-1px);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #0049a9 0%, #000000 100%);
    color: white;
    min-height: 170px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -250px;
    left: 0px;
    right: 0;
    bottom: 0;
    background-image: url('../images/fundocrato.png');
    opacity: 0.3;
}

.hero-title {
    font-size: 2.1rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.search-container {
    max-width: 600px;
    margin: 0 auto;
}

.search-input {
    border: none;
    border-radius: 25px 0 0 25px;
    padding: 15px 25px;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.search-btn {
    background-color: var(--primary-blue);
    border: none;
    border-radius: 0 25px 25px 0;
    padding: 15px 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.search-btn:hover {
    background-color: var(--secondary-blue);
    transform: translateY(-1px);
}

/* Services Section */
.services {
    padding: 80px 0;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.service-card {
    border: none;
    border-radius: 15px;
    padding: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    height: 100%;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.service-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    //background-color: var(--light-blue);
    background: linear-gradient(
    90deg,
    rgba(0, 221, 159, 0.17),  /* verde com transparência */
    rgba(0, 105, 233, 0.17)   /* azul com transparência */
);
    color: var(--primary-blue);
    font-size: 2rem;
}

.service-icon.resolve-ai {
    background-color: #FFF3CD;
    color: #856404;
    font-size: 1rem;
    font-weight: 600;
}

.service-icon.go-crato {
    background-color: #D1ECF1;
    color: #0C5460;
    font-size: 1rem;
    font-weight: 600;
}

.service-card .card-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.service-card .card-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.service-icon img.service-logo {
    max-width: 81%;
    max-height: 81%;
    object-fit: contain;
}

/* Pagination Dots */
.pagination-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: var(--primary-blue);
}

/* Service Categories */
.service-categories {
    padding: 60px 0;
}

.nav-pills .nav-link {
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: 500;
    margin: 0 5px;
    color: var(--text-muted);
    background-color: transparent;
    border: 2px solid #e9ecef;
}

.nav-pills .nav-link.active {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    color: white;
}

.category-content {
    min-height: 200px;
    border: 1px solid #e9ecef;
}

/* Events Section */
.events {
    padding: 80px 0;
}

.event-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.date-box {
    background-color: var(--primary-blue);
    color: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    min-width: 80px;
}

.date-box .day {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.date-box .month {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
}

.event-content .card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 10px;
}

.event-content .card-text {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Map Section */
.map-section {
    padding: 60px 0;
}

.map-container {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.map-container img {
    width: 100%;
    height: auto;
    display: block;
}

/* Footer */
.footer {
    background-color: var(--bg-blue-light) !important;
}

.footer h5 {
    font-weight: 600;
    margin-bottom: 20px;
}

.footer ul li {
    margin-bottom: 8px;
}

.footer ul li a {
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer ul li a:hover {
    color: black !important;
}

.social-links a {
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-links a:hover {
    transform: translateY(-2px);
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.4rem;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .search-input,
    .search-btn {
        padding: 12px 20px;
    }
    
    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .event-card .card-body {
        flex-direction: column;
        text-align: center;
    }
    
    .event-date {
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 20px 0;
    }
    
    .hero-title {
        font-size: 1.5rem;
    }

    @media (max-width: 360px) {
        .hero-title {
            font-size: 1.2rem;
        }
    }
    
    .services,
    .events {
        padding: 50px 0;
    }

    .service-card {
        padding: 0px !important;
    }

    .service-card .card-title {
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 15px;
    }
    
    .search-container .input-group {
        flex-direction: column;
    }
    
    .search-input {
        border-radius: 25px;
        margin-bottom: 10px;
    }
    
    .search-btn {
        border-radius: 25px;
    }
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Bootstrap Overrides */
.btn-primary {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
}

.btn-primary:hover {
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
}

.text-primary {
    color: var(--primary-blue) !important;
}

.bg-primary {
    background-color: var(--primary-blue) !important;
}

.search-container {
  position: relative;
  z-index: 1;
}

.search-container::before {
  content: "";
  position: absolute;
  inset: 0;
  //background: rgba(0, 0, 0, 0.5); /* Máscara escura */
  z-index: 0;
}

.search-container > * {
  position: relative;
  z-index: 1;
}


/*----------------------*/

/* Variables (Design System) */
:root {
  /* Colors - HSL Values */
  --primary: 213, 94%, 56%;
  --primary-hover: 213, 94%, 46%;
  --government: 213, 54%, 25%;
  --government-light: 213, 54%, 95%;
  --government-foreground: 0, 0%, 100%;
  --muted: 220, 14%, 96%;
  --muted-foreground: 220, 8%, 46%;
  --background: 0, 0%, 100%;
  --foreground: 224, 71%, 4%;
  --card: 0, 0%, 100%;
  --card-foreground: 224, 71%, 4%;
  --border: 220, 13%, 91%;
  
  /* Shadows */
  --shadow-soft: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-medium: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
  --shadow-strong: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1);
  
  /* Gradients */
  --gradient-hero: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--government)));
  --gradient-card: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted)));
  
  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  line-height: 1.6;
}

/* Header Styles */
.header-gradient {
  background: var(--gradient-hero);
}

.logo-container {
  background: white;
  padding: 0.5rem;
  border-radius: 0.5rem;
  box-shadow: var(--shadow-soft);
}

.text-government {
  color: hsl(var(--government)) !important;
}

.nav-link-custom {
  color: rgba(255, 255, 255, 0.8) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.375rem !important;
  transition: var(--transition-smooth);
}

.nav-link-custom:hover,
.nav-link-custom.active {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-link-custom.active {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Typography */
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: hsl(var(--muted-foreground));
  max-width: 48rem;
  margin: 0 auto;
}

.page-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: hsl(var(--foreground));
}

.page-subtitle {
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
  max-width: 42rem;
  margin: 0 auto;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

.section-subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

/* Button Styles */
.btn-primary {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: white;
  font-weight: 500;
  transition: var(--transition-smooth);
}

.btn-primary:hover {
  background-color: hsl(var(--primary-hover));
  border-color: hsl(var(--primary-hover));
  transform: translateY(-1px);
}

.btn-outline-government {
  color: hsl(var(--government));
  border-color: hsl(var(--government));
  background-color: transparent;
  font-weight: 500;
  transition: var(--transition-smooth);
}

.btn-outline-government:hover {
  background-color: hsl(var(--government-light));
  border-color: hsl(var(--government));
  color: hsl(var(--government));
}

.btn-outline-primary {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

.btn-outline-primary:hover {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: white;
}

.btn-outline-primary.active {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: white;
}

/* Card Styles */
.feature-card {
  border: 1px solid hsl(var(--border));
  transition: var(--transition-smooth);
  background-color: hsl(var(--card));
}

.feature-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.feature-icon {
  width: 3rem;
  height: 3rem;
  background-color: hsl(var(--primary) / 0.1);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.stats-card {
  background: var(--gradient-card);
  border: 1px solid hsl(var(--border));
  border-radius: 1rem;
  box-shadow: var(--shadow-medium);
}

.stat-number {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
}

.stat-label {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.cta-card {
  background-color: hsl(var(--government));
  color: hsl(var(--government-foreground));
  border-radius: 1rem;
  box-shadow: var(--shadow-strong);
}

.cta-title {
  color: hsl(var(--government-foreground));
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.cta-text {
  color: hsl(var(--government-foreground) / 0.9);
  font-size: 1.125rem;
  max-width: 42rem;
  margin: 0 auto;
}

/* Company Cards */
.company-card {
  transition: var(--transition-smooth);
  border: 1px solid hsl(var(--border));
}

.company-card:hover {
  box-shadow: var(--shadow-medium);
  transform: translateY(-2px);
}

.company-emoji {
  font-size: 2rem;
}

.company-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.rating {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.company-description {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}

.company-info .info-item {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}

.company-info .info-item:last-child {
  margin-bottom: 0;
}

/* Category Badges */
.category-saude {
  background-color: #fef2f2;
  color: #dc2626;
}

.category-educacao {
  background-color: #eff6ff;
  color: #2563eb;
}

.category-alimentacao {
  background-color: #fff7ed;
  color: #ea580c;
}

.category-vestuario {
  background-color: #faf5ff;
  color: #9333ea;
}

.category-bem-estar {
  background-color: #f0fdf4;
  color: #16a34a;
}

/* Form Styles */
.form-control-custom {
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 0.75rem;
  transition: var(--transition-smooth);
}

.form-control-custom:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 0.2rem hsl(var(--primary) / 0.25);
}

.beneficio-item {
  background-color: hsl(var(--muted) / 0.5);
  border-color: hsl(var(--border)) !important;
}

/* Responsive Utilities */
.hero-section {
  padding: 3rem 0;
}

@media (min-width: 992px) {
  .hero-section {
    padding: 5rem 0;
  }
}

/* Animation for cards */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.empresa-card {
  animation: slideUp 0.5s ease-out;
}

/* Filter buttons */
.filter-btn {
  transition: var(--transition-smooth);
}

.filter-btn.active {
  background-color: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: white;
}

/* Loading states */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Utilities */
.text-white-50 {
  color: rgba(255, 255, 255, 0.5) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-soft) !important;
}

.shadow {
  box-shadow: var(--shadow-medium) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-strong) !important;
}

/* Mobile optimizations */
@media (max-width: 767px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .hero-section {
    padding: 2rem 0;
  }
  
  .feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
  }
  
  .company-emoji {
    font-size: 1.5rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
}
/*-----------------*/

.b-hero{
    border-bottom: 5px solid;
    border-image: linear-gradient(to right, rgba(15, 134, 38, 1), rgba(20, 87, 116, 1));
    border-image-slice: 1;
}

.bg-deg{
    background: linear-gradient(to right, #0273a2, #1A8B39);
}

.bg-deg-suave-1{
    background: linear-gradient(to right, #5FB7D5, #74C47D);
}

.bg-deg-suave-2{
    background: linear-gradient(to right, #A8DDEA, #B7E2BA);
}



.text-deg {
  background: linear-gradient(to right, #0273a2, #1A8B39);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.text-deg {
  background: linear-gradient(to right, #0273a2, #1A8B39);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-header{
    max-width: 130px !important; 
    height: auto !important;
}

.logo-principal{
    max-width: 100px;
}


.swiper-pagination-bullet{
    width:11px !important;
    height:11px !important;
}

.card-slide{
    width:220px;
    height:160px;
}

@media (max-width: 785px) {

.card-slide{
    width:165px;
    height:120px;
}
}

@media (max-width: 360px) {

.card-slide{
    width:137.5px;
    height:100px;
}
}