* {
    font-family: Montserrat;
}

:root {
    --mav-growth-main-color: #8dd4bd;
    --mav-growth-second-color: #73b9a3;
    --mav-growth-third-color: #4b535b;
    --mav-growth-text-color: #4b535b;
}

.navbar-toggler-icon {
    font-size: 2rem;
    color: var(--mav-growth-text-color);
}

.offcanvas ul.navbar-nav li {
    font-size: 1.25rem;
    transition: color 0.3s ease, font-weight 0.3s ease;
}

.offcanvas ul.navbar-nav li:hover {
    color: var(--mav-growth-second-color);
    font-weight: 600;
}

h1 {
    font-family: Montserrat;
    font-weight: 600;
    color: var(--mav-growth-text-color);
}

h2 {
    font-family: Montserrat;
    font-size: 45px;
    color: var(--mav-growth-text-color);
    font-weight: 600;
}

h3 {
    font-size: 38px;
    font-weight: 600;
    color: #fff;
}

p {
    font-family: Montserrat;
    color: var(--mav-growth-text-color)
}

.btn {
    background-color: var(--mav-growth-main-color);
    color: var(--mav-growth-text-color);
    border: 0;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0;
    padding: 1rem 2rem;
}

.btn:hover,
.btn:active {
    background-color: var(--mav-growth-second-color);
}

#myCarousel .carousel-item {
    background: url(img/MAV&GROWTH_WEB_02.jpg);
    background-size: cover;
    height: 75vh;
}

#myCarousel .carousel-item:nth-child(2) {
    background: url(img/MAV&GROWTH_Slider_2.jpg);
    background-size: cover;
}

#myCarousel .carousel-item:last-child {
    background: url(img/MAV&GROWTH_Slider_3.jpg);
    background-size: cover;
}

#nosotros p {
    font-size: 24px;
}

#nosotros h4 {
    font-size: 18px;
    min-height: 3rem;
}

#nosotros .row.row-cols-md-4 p {
    font-size: 13.5px;
}

#nosotros .row.row-cols-md-4 svg {
    min-height: 135px;
}

#flexibilidad {
    background-color: #f9f9f9;
}

#flexibilidad h2 {
    font-weight: 300;
}

#flexibilidad h4 {
    font-size: 20px;
    font-weight: 600;
    color: var(--mav-growth-text-color);
}

#flexibilidad p {
    font-size: 13.5px;
}

#flexibilidad h4::before {
    content: "";
    display: inline-block;
    width: 10px;               /* Adjust width */
    height: 1em;              /* Matches text height */
    background-color: var(--mav-growth-main-color);
    margin-right: 1rem;        /* Space between bar and text */
    vertical-align: middle;
    border-radius: 2px;       /* Optional: rounded corners */
  }

#soluciones h2 {
    font-weight: 600;
}

#soluciones h2 span {
    font-weight: 500;
    display: block;
    font-size: 25px;
}

#soluciones .grid-atributos,
#soluciones .grid-atributos p {
    color: #fff;
}

#soluciones .grid-atributos h4 {
    min-height: 60px;
}

#soluciones .grid-atributos p {
    font-size: 1.5rem;
    font-weight: 300;
}

#historia h2 {
    font-weight: 300;
}

#historia p {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 0;
}

#historia .row > div:not(:last-child) {
    position: relative;
}

#historia .row > div:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 25%;               
    right: 0;
    width: 1px;
    height: 75%;
    background-color: #bbb;  
}


#historia .row span {
    font-weight: 300;
    font-size: 75px;
    color: var(--mav-growth-second-color);
}

#AI p {
    font-size: 1.5rem;
}

#AI h2, #AI p {color: #fff;}

#AI ul {
    list-style: none;
    padding: 0;
}

#AI ul li {
    position: relative;
    padding-left: 16px;       /* Space for the rectangle */
    margin-bottom: 3rem;
    font-size: 14px;
}

#AI ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0em;
    width: 4px;
    height: 2em;
    background-color: var(--mav-growth-main-color);
    border-radius: 2px;        /* Optional rounded edges */
  }


#agentesAI h2 {
    font-weight: 600;
}

#agentesAI p {
    font-size: 1.5rem;
}

#agentesAI .row.tres-items p {
    font-size: 22px;
    color: #fff;
}

#formulario {
    background-color: var(--mav-growth-third-color);
}

#formulario h2 {
    color: #fff;
}

#formulario input,
#formulario textarea {
    background-color: #404850;
    color: #e2e2e2;
    border-radius: 0;
    border: none;
    font-size: 13.5px;
}

#formulario label {
    color: #e2e2e2;
    font-size: 13.5px;
}

#formulario .form-floating>textarea:focus~label::after,
#formulario .form-floating>textarea:not(:placeholder-shown)~label::after {
    background: #404850;
}

#formulario form .row .form-floating>label {
    padding: 1rem 1.6rem;
}

footer {
    position: relative;
    z-index: 0;
    background-color: #1c1e20;
    color: #fff;
}

footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(img/bgfooter.svg);
    background-size: cover;
    opacity: 0.8;
    z-index: -1;
  }

footer p {
    color: var(--mav-growth-second-color);
}

footer a {
    color: #fff;
}

/* GRID */

.grid-atributos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    grid-auto-flow: row;
    grid-template-areas:
        "PersonalMedico Administrativos LogisticaOp"
        "Cajeras SoporteTI ProyectosEspeciales";
}

.grid-atributos .gi-1 {grid-area: PersonalMedico;}
.grid-atributos .gi-2 {grid-area: Administrativos;}
.grid-atributos .gi-3 {grid-area: Cajeras;}
.grid-atributos .gi-4 {grid-area: SoporteTI;}
.grid-atributos .gi-5 {grid-area: LogisticaOp;}
.grid-atributos .gi-6 {grid-area: ProyectosEspeciales;}

.grid-atributos .gi-2,
.grid-atributos .gi-3,
.grid-atributos .gi-6 {background-color: var(--mav-growth-main-color);}

.grid-atributos .gi-1,
.grid-atributos .gi-4,
.grid-atributos .gi-5 {background-color: var(--mav-growth-second-color);}


#AI {
    background-image: url(img/BG_Decisiones_Datos.jpg);
    background-size: cover;
    color: #fff !important;
}

#agentesAI .tres-items div {background: var(--mav-growth-main-color);}
#agentesAI .tres-items div:nth-child(2) {background: #80c7b0;}
#agentesAI .tres-items div:last-child {background: var(--mav-growth-second-color);}

/* RESPONSIVE */

@media (max-width: 768px) {

  .grid-atributos {
    grid-template-columns: 1fr;
    grid-template-areas:
      "PersonalMedico"
      "Administrativos"
      "LogisticaOp"
      "Cajeras"
      "SoporteTI"
      "ProyectosEspeciales";
  }

#myCarousel .carousel-item,
#myCarousel .carousel-item:nth-child(2),
#myCarousel .carousel-item:last-child {
  background-position-x: 100%;
}

h2 {font-size: 2.5rem;}

}