/* Layout Grid System */

.container {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 20px;
}

.row {
   display: flex;
   flex-wrap: wrap;
   margin: 0 -15px;
}

.col,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
   position: relative;
   width: 100%;
   padding: 0 15px;
}

.col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Flex container for partners */
.flex-container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   gap: 20px;
}

.flex-container div {
   flex: 0 0 auto;
}

/* Text alignment utilities */
.text-start { text-align: left; }
.text-center { text-align: center; }
.text-end { text-align: right; }

/* Margin and padding utilities */
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.pt-1 { padding-top: 0.25rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 3rem; }

.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 3rem; }

/* Card styles */
.card {
   background-color: white;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card-img-top {
   width: 100%;
   height: 200px;
   object-fit: cover;
}

.card-body {
   padding: 1.5rem;
}

.card-title {
   font-size: 1.25rem;
   font-weight: bold;
   margin-bottom: 0.75rem;
   color: #333;
}

.card-text {
   color: #666;
   font-size: 0.9rem;
   line-height: 1.5;
   margin-bottom: 1rem;
}

.btn {
   display: inline-block;
   padding: 0.5rem 1rem;
   background-color: #007bff;
   color: white;
   text-decoration: none;
   border-radius: 4px;
   border: none;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.btn:hover {
   background-color: #0056b3;
   color: white;
   text-decoration: none;
}

.btn-primary {
   background-color: var(--azul-destaque);
}

.btn-primary:hover {
   background-color: var(--azul-principal);
}

/* Responsive Design */
@media screen and (max-width: 1024px) {
   .container {
      padding: 0 15px;
   }
   
   .col-6 {
      flex: 0 0 100%;
      max-width: 100%;
      margin-bottom: 2rem;
   }
   
   .flex-container {
      justify-content: center;
      gap: 15px;
   }
}

@media screen and (max-width: 768px) {
   .container {
      padding: 0 10px;
   }
   
   .row {
      margin: 0 -10px;
   }
   
   .col,
   .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
   .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
      flex: 0 0 100%;
      max-width: 100%;
      padding: 0 10px;
      margin-bottom: 1rem;
   }
   
   .text-start,
   .text-end {
      text-align: center !important;
   }
   
   .flex-container {
      flex-direction: column;
      align-items: center;
      gap: 10px;
   }
   
   .flex-container div {
      text-align: center;
   }
   
   /* Card adjustments for mobile */
   .card {
      margin-bottom: 1.5rem;
   }
   
   .card-img-top {
      height: 150px;
   }
   
   .card-body {
      padding: 1rem;
   }
   
   .card-title {
      font-size: 1.1rem;
   }
   
   .card-text {
      font-size: 0.85rem;
   }
   
   /* Margin utilities for mobile */
   .mt-4 {
      margin-top: 2rem !important;
   }
   
   .mt-5 {
      margin-top: 2.5rem !important;
   }
   
   .mb-4 {
      margin-bottom: 2rem !important;
   }
   
   .mb-5 {
      margin-bottom: 2.5rem !important;
   }
}

@media screen and (max-width: 480px) {
   .container {
      padding: 0 5px;
   }
   
   .row {
      margin: 0 -5px;
   }
   
   .col,
   .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
   .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
      padding: 0 5px;
   }
   
   .card-body {
      padding: 0.75rem;
   }
   
   .card-title {
      font-size: 1rem;
   }
   
   .card-text {
      font-size: 0.8rem;
   }
   
   .btn {
      padding: 0.4rem 0.8rem;
      font-size: 0.85rem;
   }
}

/* Additional mobile-specific utilities */
@media screen and (max-width: 768px) {
   .mobile-only {
      display: block !important;
   }
   
   .desktop-only {
      display: none !important;
   }
   
   .mobile-text-center {
      text-align: center !important;
   }
   
   .mobile-full-width {
      width: 100% !important;
   }
}

@media screen and (min-width: 769px) {
   .mobile-only {
      display: none !important;
   }
   
   .desktop-only {
      display: block !important;
   }
}