/* 
Color Hex Uso Azul principal #0C274C
Header, navegación, títulos, bloques corporativos Azul secundario #163D6B
Variaciones, hover, elementos secundarios Azul claro #EAF1F7
Fondos de secciones, destacados informativos Verde principal #47A948
CTA, acciones, estados activos, resaltados Verde oscuro #34853A
Hover de botones y acciones Verde claro #EAF6EA
Fondos de destacados y mensajes positivos */

:root {
  --azul: #0c274c;
  --azul-hover: #163d6b;
  --azul-destacado: #0c274c;
  --azul-claro: #eaf1f7;
  --verde: #47a948;
  --verde-oscuro: #34853a;
  --verde-claro: #eaf6ea;
  --white: #ffffff;
  --white-hover: #f0f0f0;

}

/* Sobrescribir ancho container en Bootstrap 4 */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px; /* en lugar de 1140px */
  }
}

@media (min-width: 1300px) {
  .container {
    max-width: 1300px; /* breakpoint "extra grande" estilo Bootstrap 5 */
  }
}


html {
  scroll-behavior: smooth;
  height: 100%;
}

/*
 * min-height y no height: con "height: 100%" el body queda clavado a la altura
 * del viewport. En las pantallas cortas el .main no llega a estirarse y el pie
 * queda flotando a media pantalla; en las largas el contenido se desborda por
 * encima del pie. Con min-height el .main (flex:1) crece lo necesario y el pie
 * siempre cae al final. El segundo min-height con dvh evita el salto de la
 * barra de direcciones en el celular.
 */
body {
  background-color: #fff !important;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.a-link {
  color: white;
}

.a-link:hover {
  color:white;
  font-weight: bold;
}

.outstanding-btn {
    color: white !important;
}

/* piso colores de bootrap */
.btn-primary {
  background-color: var(--azul) !important;
  border-color: var(--azul) !important;
}

.btn-primary:hover {
  background-color: var(--azul) !important;
  border-color: var(--azul) !important;
}

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

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

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


.row.top-header-row {
  font-size: 12px;
}
.top-header-bg {
  background-color: var(--azul-destacado);
  color: white;
}
.semaforo {
  padding: 0 10px;
  border-radius: 100px;
}

.container,
.container-fluid {
  position: relative;
}

.card-title {
  padding: 0px;
  color: #333;
}

.card-image {
  border-radius: 5px 0 5px 0;
  padding: 10px;
  margin-bottom: 25px;
  text-align: center;
  height: 250px;
}

.exhibitor-item {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  overflow: hidden;
  width: 100vw;
}

a {
  color: var(--azul);
}

.small-text {
  font-size: 12px;
}

.text-info {
  font-size: 14px;
  color: white !important;
}

a.text-info:hover {
  color: white !important;
  font-weight: bold;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: var(--verde);
  border-color: var(--verde);
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #007bff;
  background-color: #fff;
  border: 1px solid #dee2e6;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link
{color:var(--azul);
}
.navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
  color: rgba(0, 0, 0, 0.9);
  font-weight: bold;
}
@media screen and (max-width: 768px) {
  .navbar-nav {
    justify-content: end;
    align-items: end;
  }
  .cart-count {
    right: -11px;
  }
}

.main-menu-contenedor {
  display: flex;
  justify-content: end;
  align-items: center;
}

.home-menu i {
  color: var(--azul);
  font-size: 15px;
}
.outstanding-btn .fa-home {
  color: var(--white)!important;
}
.dropdown-menu i {
  color: var(--azul);
  font-size: 15px;
}
.home-menu i:hover {
  color: var(--white-hover);
  font-size: 15px;
}

.cart-menu i {
  color: var(--white);
  font-size: 24px;
}

.cart-menu i:hover {
  color: var(--white-hover);
  font-size: 24px;
}

.separador-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  padding: 0 10px;
}

.logo {
  width: auto;
  border-radius: 10px 2px 10px 0px;
}

a:hover {
  text-decoration: none;
}

.outstanding-btn {
  background: var(--verde);
  padding: 8px 40px;
  border-radius: 10px 2px 10px 0px;
}

.navbar-light .navbar-nav .nav-link {
  color: var(--azul);
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--azul-hover);
}

.cart-menu li.nav-item {
  padding: 0 10px;
}

.breadcrumb {
  background-color: transparent;
}

ol.breadcrumb {
  padding: 0 15px;
  border-radius: 0;
}

.breadcrumb li a {
  color: #333;
}

.btn-primary {
  background-color: var(--verde) !important;
  border-color: var(--verde) !important;
}

.btn-general {
  background-color: #999;
  color: white;
}

.breadcrumb-item {
  padding: 10px 0 0 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #333;
  content: ">";
}

span.categoria {
  padding: 10px 0px 0px 20px;
  color: lightgray;
}

.categoria a {
  color: cadetblue;
}

.card-body1 {
  color: #333;
  background-color: #fff;
  border-radius: 4px;
  text-decoration: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  z-index: 1;
}

.card-body1 {
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
  /* display: inline-block; */
  vertical-align: text-top;
  -webkit-transition: height 0.1s ease-out;
  transition: height 0.1s ease-out;
}

.card-body1:hover {
  box-shadow:
    0 7px 16px 0 rgb(0 0 0 / 20%),
    0 1px 3px 0 rgb(0 0 0 / 10%);
  z-index: 9999;
}

.buscador {
  width: 80% !important;
  display: inline-block;
}

.dropdown-toggle::after {
  display: none;
}

.nav-categorias-left .nav-item {
  padding: 0px;
  width: 100%;
}

.fotoproducto250 {
  max-height: 250px;
  max-width: 100%;
}

.foto-producto img {
  width: auto;
  max-height: 600px;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  height: auto;
  object-fit: contain;
  width: 100%;
}

@media (max-width: 500px) {
  .nav-categorias-left {
    margin-bottom: 10px;
    opacity: 0.9;
  }

  .logo-contenedor {
    text-align: center;
  }

  .dropdown-menu {
    border: none;
    padding-left: 10px;
  }
}

.footer {
  background-color: var(--azul);
}

.navbar-light .navbar-toggler {
  padding: 10px;
  border-color: transparent;
}

.nav-item {
  color: var(--azul);
  margin:0 7px;
}

.btn-pill {
  border-radius: 50px;
  font-size: 12px;
}

#btn-back-to-top {
  background-color: #495057;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  border: 0;
  position: fixed;
  bottom: 80px;
  top: auto;
  right: 27px;
  z-index: 999999;
}

.bt_wp {
  background-color: #4dc247;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  border: 0;
  position: fixed;
  bottom: 20px;
  top: auto;
  right: 20px;
  z-index: 999999;
}

.bt_wp svg {
  width: 50px;
  height: 50px;
  padding: 11px 0px;
  fill: white;
  vertical-align: middle;
}

#loadingDiv {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 99998;
  opacity: 0.9;
  /* El overlay arranca oculto. Antes relied en que el JS del footer hiciera
     $loading.hide() al cargar, y eso no pasa en todas las paginas: la home
     renderiza header_home.php pero footer_content.php, sin ese script, asi
     que el loader se quedaba tapando la pantalla. Con display:none el
     show() de jQuery lo enciende igual (el estilo inline gana) y hide() lo
     apaga, sin depender de que el script haya corrido. */
  display: none;
}

.ip-logo {
  position: absolute;
  left: 0;
  width: 100%;
  cursor: default;
  pointer-events: none;
  z-index: 99999999;
  margin-left: auto;
  margin-right: auto;
  width: 50px;
  height: 50px;
  right: 0;
  top: 50%;
}

table#carrito_tabla {
  font-size: 14px;
}

.dataTables_wrapper .dataTables_filter input {
  border: 1px solid #e9e9e9;
}

.table-scrollbar {
  position: relative;
  height: 600px;
  overflow: auto;
}

.table-wrapper-scroll-y {
  display: block;
}
.table-hover tbody tr:hover{
  background-color: white!important;
}

input[type="radio"],
input[type="checkbox"] {
  width: 20px;
}

li.ui-menu-item {
  font-size: 12px;
  width: 100%;
}

/* Autocomplete (typeahead del filtro de drogas).
   Sin esto el menu queda ilegible por dos motivos: el sidebar de filtros mide
   220px y tiene `overflow: hidden`, asi que el menu heredaba un ancho de ~200px;
   y la regla de mas arriba lo deja en 12px. Con eso las sugerencias se partian
   en una columna angosta y no se leia nada. */
.ui-autocomplete {
  z-index: 2000;
  /* Se pasan los 220px del sidebar a proposito: el menu se posiciona sobre el
     contenido y hay lugar de sobra hacia la derecha. */
  min-width: 320px;
  max-width: 460px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #c9ccd3;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

li.ui-autocomplete .ui-menu-item {
  font-size: 14px;
  width: 100%;
  margin: 0;
  /* Evita que las sugerencias largas se partan en varias lineas cortas */
  white-space: nowrap;
}

.ui-autocomplete .ui-menu-item > div {
  padding: 8px 12px;
  line-height: 1.4;
  color: #212529;
}

.ui-autocomplete .ui-menu-item.ui-state-active {
  background: var(--azul);
  color: #fff;
  margin: 0;
}

.carousel-indicators li {
  padding: 3px !important;
}

.dropdown-menu {
  padding: 10px;
  min-width: 11rem;
}

.btn_agregar_producto_combo {
  background: var(--verde);
  width: 60px;
  color: white;
}

/**chosen bootstrap adapt */
.chosen-container {
  display: block;
  width: 100% !important;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem !important;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.mini-text {
  font-size: 12px;
   
}

.bg-sucs {
  background: darkslateblue;
}

a.chosen-single {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 100% !important;
}

.bg-es-oferta {
  background: khaki;
}

.bg-es-novedad {
  background: lightseagreen;
}

/* TABS pedidos masivos */
.tab-content {
  color: white;
  border: 1px solid lightgrey;
  padding: 5px 15px;
}

/* remove border radius for the tab */

#exTab1 .nav-pills > li > a {
  border-radius: 0;
}

/**Slick slider */

.contenedor-producto-slick {
  max-height: 435px;
  height: 100%;
}

.box-shadows {
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 12%);
}

.detalle_producto-slick {
  height: 165px;
  padding: 14px 14px 10px;
  position: relative;
  text-align: left;
}

.badge-novedad {
  background-color: #3483fa;
  color: white;
  border-radius: 3px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 2px 4px;
}

.swal2-title {
  font-size: 16px !important;
}

.swal2-styled.swal2-confirm {
  background-color: var(--verde) !important;
}

.table-fixed-head {
  overflow: auto;
  height: 100px;
}

.table-fixed-head thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Just common table stuff. Really. */
table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background: #fff;
}

.table td,
.table th {
  border-top: none;
  border-bottom: 1px solid grey;
}

table#pedidos_tabla_ofertas tbody {
  font-size: 14px;
}

h5.mensaje_primer_ingreso {
  padding: 10px;
  background: darkseagreen;
  color: white;
  border: 1px solid green;
  text-align: center;
  margin-bottom: 25px;
  font-size: 17px;
  font-weight: 100;
}

button.dt-button.buttons-pdf.buttons-html5 {
  margin-left: 15px;
}

div#tb_ccc_length {
  margin-top: 5px;
}

/* botones laterales en tienda */
.btn_lateral {
  height: 70px;
  font-size: 13px;
  width: 100% !important;
}

.btn_ver_pedidos_masivos {
  background: gold;
}

.btn.btn_ver_faltas {
  background: #e9e9e9;
}

.btn_agregar_producto {
  background: var(--verde);
  color: white;
  padding:10px 25px;
}

a.btn.btn_ver_cart {
  background: darkorange;
  color: white;
}

table#pedidos_tabla td {
  font-size: 14px;
}

/* Estilo para la cantidad que se muestra en el ícono */
.cart-count {
  position: absolute;
  top: -7px;
  right: 0px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 3px 8px;
  font-size: 12px;
}

div#home_carrito li {
  font-size: 12px;
}

/**REVIEW 25*/
/**main head menu y logo */
.main-header {
  padding: 20px;
  box-shadow: 0 1px 0 0 rgb(0 0 0 / 10%);
  z-index: 80;
  background: white;
  color: white;
}

/**Filtros y Ordenamiento */
.total-registros {
  margin: 5px 10px;
}

#buscador {
  border-right: none !important;
  border-radius: 5px 0 0 5px !important;
}

.caja-buscador:focus-within {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#buscador {
  box-shadow: none !important;
  border-color: none !important;
}

#buscador:focus {
  box-shadow: none !important;
  border-color: transparent !important;
}

.chk-stock {
  width: 99px;
  border-left: none;
  border-radius: 0 5px 5px 0px;
}

.chk-stock label {
  padding: 0 15px;
}

.unstilish-selector {
  max-width: 200px;
  background-color: transparent;
  border: none;
}

/*Minicart*/
.cart-icon {
  position: fixed;
  top: 50%;
  right: 10px;
  background: #ff6600;
  color: white;
  padding: 15px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

/* Carrito flotante */
.minicart {
  position: fixed;
  top: 0;
  right: -450px;
  /* Oculto por defecto */
  width: 450px;
  height: 100vh;
  background: white;
  box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease-in-out;
  padding: 20px;
  z-index: 999;
}

div#main-carrito-container {
  height: 350px;
  overflow-y: auto;
}

/* Mostrar carrito */
.minicart.open {
  right: 0;
}

/* Botón cerrar */
.close-cart {
  background: white;
  color: red;
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  display: block;
  margin-bottom: 10px;
}

.carrito-sin-productos {
  min-height: 150px;
  background: whitesmoke;
  text-align: center;
  padding-top: 20px;
  font-weight: bold;
}

.nav-carrito {
  list-style: none;
  margin-top: 15px;
  width: 100%;
  z-index: 9999;
}

.nav-carrito ul {
  overflow: hidden;
  list-style: none;
}

.nav-carrito li {
  padding: 5px 0px;
  width: 100%;
  font-size: 14px;
  border-bottom: 1px solid #e9e9e9;
}

/* end minicart */

/* Cards */
.card-producto-listado {
  padding: 10px 10px;
}

p.card-text.precio-old-card {
  font-size: 12px;
  color: grey;
  font-size: 18px;
  color: grey;
  text-decoration: line-through;
}

p.card-text.precio-final-card {
  font-weight: bold;
  font-size: 22px;
  color: #2e5bba;
}

.cantidad_es {
  width: 65px!important;
  border-radius: 0px 0px 0px 0px;
}

.cantidad_es_cart {
  border-radius: 5px;
  border: 1px solid #a1a1a1;
}
.input-fragancia,
.input-fragancia-cart {
  border-radius: 5px;
  border: 1px solid #a1a1a1;
  text-align: center;
}

.sin-flechas::-webkit-inner-spin-button,
.sin-flechas::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sin-flechas {
  -moz-appearance: textfield;
  appearance: textfield;
}

.incrementar {
  border-radius: 0px 5px 5px 0px;
  padding: 5px;
  width: 30px;
}

.decrementar {
  border-radius: 5px 0px 0px 5px;
  padding: 5px;
  width: 30px;
}

.product-image {
  margin: auto;
  height: 250px;
  max-width: 265px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.product-image img {
  object-fit: cover;
  width: auto;
  height: 250px;
}

.product-content {
  height: 200px;
}
#vista-grilla-container .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto{
  padding-left: 10px;
  padding-right: 10px;
}
.card-producto-catalogo,
.card-producto-grilla {
  margin-bottom: 25px;
}

.card-producto-grilla .card-body {
  padding: 1.25rem 1.25rem 0rem 1.25rem;
}

.product-content-catalogo {
  height: 65px;
}

p.card-text.descuento-card {
  color: green;
}

p.card-text.stock-card {
  font-size: 12px;

  color: grey;
}

p.card-title {
  padding: 12px 0 0 0;
  color: #333;
  font-size: 12px;
  min-height: 60px;
  border-bottom: 1px solid lightgrey;
}

p.card-title-catalogo {
  padding: 10px 0 0 0;
  color: #333;
  min-height: 40px;
  font-size: 12px;
}

.old-price {
  text-decoration: line-through;
  margin-bottom: 0px;
}

@media screen and (max-width: 600px) {
  /* buscador tienda */
  .contenedor-buscador {
    width: 100% !important;
    padding: 0px !important;
  }
  .search-filters {
    margin: 0px !important;
    padding: 0px !important;
  }
  .total-registros {
    margin-top: 10px;
    font-size: 12px;
  }

  /* home cards */
  .card-producto-listado {
    padding: 20px 0px;
  }

  .separador-menu {
    display: none;
  }

  .product-image {
    margin: auto;
    height: 180px;
    max-width: 180px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #fff;
    border-radius: 8px;
  }

  .product-image img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
    background: #fff;
  }
  p.card-title-catalogo {
    font-size: 12px;
  }
}

/** End cards */

.mensaje {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: white;
  margin-top: 10px;
  border-radius: 7px;
}

.mensaje p {
  margin-top: 15px;
}

/**Paginacion */
ul.pagination li {
  border: 1px solid var(--verde);
  color: white;
  padding: 5px 10px;
  margin: 0 2px;
  border-radius: 5px;
}

ul.pagination {
  justify-content: center;
}

.pagination li.active,
.pagination li.active a {
  background-color: var(--verde);
  color: white;
}

/**end paginacion */

/**Slide button */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
}

.switch input {
  display: none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: orange;
  transition: 0.4s;
  border-radius: 15px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider:before {
  transform: translateX(30px);
}

/* Scroll */
.scroll-down-indicator {
  width: 50px;
  height: 50px;
  background-color: #007bff;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 20px auto 0 auto; /* centrado horizontal */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  animation: bounce 2s infinite;
}

.scroll-down-indicator i {
  font-size: 20px;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(4px);
  }
}

/* en dispositivos pequeños achicar la letra, en resoluciones mas grandes sumar 2 puntos */
@media screen and (max-width: 600px) {
  .font-size-10 {
    font-size: 8px;
  }
  
}
  .font-size-10 {
    font-size: 12px;
}

/* Alineación cantidad + icono fragancias en carrito */
.qty-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qty-cell input[type="number"] {
  margin: 0;
}
.qty-cell .fragancia-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 1;
  padding: 0;
  width: 18px;
  min-width: 18px;
}
.qty-cell .fragancia-trigger i {
  line-height: 1;
  vertical-align: middle;
  font-size: 16px;
}

/* Placeholder invisible para alinear cuando no hay fragancias */
.fragancia-placeholder {
  pointer-events: none;
}
.fragancia-placeholder i {
  opacity: 0;
}

/* ========================================
   ESTILOS PARA HOME MEJORADO
   ======================================== */

/* Títulos de secciones */
.section-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--azul);
  margin-bottom: 10px;
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: var(--verde);
  margin: 15px auto 0;
  border-radius: 2px;
}

/* Categorías Destacadas - Diseño Profesional Simple */
.pro-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.pro-card {
  background: var(--azul);
  border-radius: 10px 2px 10px 0px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
}

.pro-card:hover {
  box-shadow: 0 8px 25px rgba(23, 33, 109, 0.15);
  transform: translateY(-5px);
}

.pro-card-img {
  padding: 50px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.pro-card-img img {
  width: 100%;
  height: auto;
  max-height: 240px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.pro-card:hover .pro-card-img img {
  transform: scale(1.08);
}

.pro-card-body {
  background: var(--azul);
  padding: 30px;
  color: white;
}

.pro-card-body h3 {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 15px 0;
  color: white;
}

.pro-card-body p {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.pro-card-btn {
  display: inline-block;
  color: white;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 25px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.pro-card:hover .pro-card-btn {
  background: var(--verde);
  padding-right: 30px;
}

/* Slider de Marcas */
.marcas-slider {
  background: white;
  padding: 30px 0;
  border-radius: 8px;
}

.marca-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 15px;
  transition: transform 0.3s ease;
}

.marca-item:hover {
  transform: scale(1.1);
}

.marca-logo {
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(30%);
  transition: filter 0.3s ease;
}

.marca-item:hover .marca-logo {
  filter: grayscale(0%);
}

/* Carousel de Banners - Mejoras */
#homeBannerCarousel {
  position: relative;
}

#homeBannerCarousel .carousel-control-prev,
#homeBannerCarousel .carousel-control-next {
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(23, 33, 109, 0.7);
  border-radius: 50%;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    background 0.3s ease;
}

#homeBannerCarousel:hover .carousel-control-prev,
#homeBannerCarousel:hover .carousel-control-next {
  opacity: 1;
}

#homeBannerCarousel .carousel-control-prev:hover,
#homeBannerCarousel .carousel-control-next:hover {
  background: rgba(23, 33, 109, 0.9);
}

#homeBannerCarousel .carousel-control-prev {
  left: 20px;
}

#homeBannerCarousel .carousel-control-next {
  right: 20px;
}

#homeBannerCarousel .carousel-indicators {
  bottom: 20px;
}

#homeBannerCarousel .carousel-indicators li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid white;
  margin: 0 5px;
  transition: all 0.3s ease;
}

#homeBannerCarousel .carousel-indicators li.active {
  background-color: var(--verde);
  width: 14px;
  height: 14px;
}

/* Responsive */
@media (max-width: 768px) {
  .section-title {
    font-size: 24px;
  }

  .pro-card-img {
    min-height: 220px;
    padding: 40px 30px;
  }

  .pro-card-img img {
    max-height: 180px;
  }

  .pro-card-body {
    padding: 25px;
  }

  .pro-card-body h3 {
    font-size: 22px;
  }

  .pro-card-body p {
    font-size: 14px;
  }

  #homeBannerCarousel .carousel-control-prev,
  #homeBannerCarousel .carousel-control-next {
    opacity: 1;
    width: 40px;
    height: 40px;
  }

  #homeBannerCarousel .carousel-control-prev {
    left: 10px;
  }

  #homeBannerCarousel .carousel-control-next {
    right: 10px;
  }
}

/* ===== Banner home: overlay de texto animado ===== */
#homeBannerCarousel .banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  padding: 0 8%;
  pointer-events: none;
}

#homeBannerCarousel .banner-text {
  max-width: 640px;
  pointer-events: auto;
}

#homeBannerCarousel .banner-line {
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 4px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  opacity: 0;
}

#homeBannerCarousel .banner-cta {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 34px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--verde);
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: background 0.3s ease, transform 0.3s ease;
  opacity: 0;
}

#homeBannerCarousel .banner-cta:hover {
  background: var(--verde-oscuro);
  transform: translateY(-2px);
  color: #fff;
}

#homeBannerCarousel .carousel-item.active .banner-line,
#homeBannerCarousel .carousel-item.active .banner-cta {
  animation-name: bannerTextIn;
  animation-duration: 0.8s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

#homeBannerCarousel .carousel-item.active .banner-line-2 {
  animation-delay: 0.2s;
}

#homeBannerCarousel .carousel-item.active .banner-line-3 {
  animation-delay: 0.4s;
}

#homeBannerCarousel .carousel-item.active .banner-cta {
  animation-delay: 0.6s;
}

@keyframes bannerTextIn {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Publicidad gráfica (buscador y carrito) ===== */
.publicidad-grafica .publicidad-grafica-item {
  width: 100%;
  margin-bottom: 14px;
  overflow: hidden;
}

.publicidad-grafica .publicidad-grafica-img {
  width: 100%;
  height: auto;
  display: block;
}

.publicidad-grafica .publicidad-grafica-link {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  transition: box-shadow 0.2s ease;
}

.publicidad-grafica .publicidad-grafica-link:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.publicidad-grafica .publicidad-grafica-link .publicidad-grafica-img {
  transition: transform 0.25s ease;
}

.publicidad-grafica .publicidad-grafica-link:hover .publicidad-grafica-img {
  transform: scale(1.02);
}

.publicidad-grafica .publicidad-grafica-link:hover .publicidad-grafica-img {
  filter: brightness(0.97);
}

.publicidad-grafica .publicidad-grafica-cta {
  position: absolute;
  display: inline-block;
  padding: 8px 22px;
  background: var(--color-verde-principal, #47A948);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 30px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

.publicidad-grafica .publicidad-grafica-link:hover .publicidad-grafica-cta {
  background: var(--color-verde-oscuro, #34853A);
}

.publicidad-grafica .publicidad-grafica-cta.cta-pos-left {
  left: 4%;
  transform: none;
}

.publicidad-grafica .publicidad-grafica-cta.cta-pos-center {
  left: 50%;
  transform: translateX(-50%);
}

.publicidad-grafica .publicidad-grafica-cta.cta-pos-right {
  right: 4%;
  left: auto;
  transform: none;
}

.publicidad-grafica .publicidad-grafica-cta.cta-pos-top {
  top: 8%;
  bottom: auto;
}

.publicidad-grafica .publicidad-grafica-cta.cta-pos-bottom {
  bottom: 8%;
  top: auto;
}

@media (max-width: 576px) {
  .publicidad-grafica .publicidad-grafica-cta {
    font-size: 0.75rem;
    padding: 5px 12px;
  }
}

/* empresa */

/* -- banner fijo -- */
.empresa-banner-wrap {
  
  width: 100%;
  max-height: 440px;
  
  display: block;
}

.empresa-banner-wrap img {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  display: block;
}

.empresa-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(-13, 132, 109, 0.52);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  color: white;
}

.empresa-banner-overlay h1 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 14px;
  line-height: 1.15;
}

.empresa-banner-overlay p {
  font-size: 19px;
  opacity: 0.92;
  max-width: 640px;
  line-height: 1.6;
}

/* -- contadores -- */
.empresa-counters {
  background: white;
  padding: 55px 0;
  border-bottom: 1px solid #eee;
}

.counter-card {
  padding: 20px 10px;
}

.counter-number {
  display: block;
  font-size: 56px;
  font-weight: 800;
  color: var(--verde);
  line-height: 1;
}

.counter-divider {
  width: 56px;
  height: 3px;
  background: var(--verde);
  margin: 14px auto 12px;
  border-radius: 2px;
}

.counter-label {
  font-size: 16px;
  color: #666;
  font-weight: 500;
  margin: 0;
}

/* -- foto empresa -- */
.empresa-foto {
  width: 100%;
  max-height: 380px;
  object-fit: cover;
}

/* -- utiles -- */
.empresa-text {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 15px;
}

.section-subtitle {
  font-size: 24px;
  font-weight: 700;
  color: var(--azul);
}

.text-azul  { color: var(--azul); }
.text-verde { color: var(--verde); }
.bg-light-gray { background: #f8f9fb; }

/* -- identidad -- */
.identity-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 30px;  
  transition: all 0.3s ease;
  height: 100%;
}

.identity-card:hover {
  box-shadow: 0 4px 15px rgba(23, 33, 109, 0.1);
  border-color: var(--verde);
}

.identity-icon {
  font-size: 48px;
  color: var(--verde);
  margin-bottom: 20px;
}

.identity-card h4 {
  color: var(--azul);
  font-weight: 700;
  margin-bottom: 15px;
}

.identity-card p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* -- servicios -- */
.service-item {
  padding-left: 14px;
  border-left: 3px solid var(--verde);
  padding-bottom: 15px;
}

.service-item h5 {
  margin-bottom: 8px;
  color: var(--azul);
}

.service-item p {
  color: #666;
  margin: 0;
  font-size: 15px;
}

/* -- por qué elegirnos -- */
.porque-card {
  border: none; 
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;

  background-color: var(--azul);
  border-radius: 40px 0px 40px 0px;
 
  padding: 45px 45px 45px 45px;

}

.porque-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(23, 33, 109, 0.14);
}

.porque-card-body {
  padding: 22px 24px 26px;
}

.porque-card-body h4 {
  color: white;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 25px;
}

.porque-card-body p {
  color: #666;
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
}

/* -- sección final elegirnos -- */
.eleccion-section {
  background: var(--azul-hover);
  padding: 80px 0;
}

.eleccion-titulo {
  font-size: 32px;
  font-weight: 800;
  color: white;
  line-height: 1.25;
}

.eleccion-titulo span {
  color: var(--verde);
}

.eleccion-texto {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.8;
}

.eleccion-img {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.eleccion-img img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

/* -- CTA button -- */
.btn-cta {
  background: var(--verde);
  color: white;
  padding: 14px 40px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
}

.btn-cta:hover {
  background: var(--verde-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(71, 169, 72, 0.3);
  color: white;
}

/* -- breadcrumb -- */
.page-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--azul);
}

.breadcrumb {
  background: transparent;
  padding: 0;
}

.breadcrumb-item a {
  color: var(--azul);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #666;
}

@media (max-width: 768px) {
  .empresa-banner-overlay h1 {
    font-size: 28px;
  }

  .empresa-banner-overlay p {
    font-size: 15px;
  }

  .counter-number {
    font-size: 42px;
  }

  .eleccion-section {
    padding: 50px 0;
  }

  .eleccion-titulo {
    font-size: 26px;
  }

  .btn-cta {
    padding: 12px 28px;
  }
}
/* terminos */
.terminos-y-condiciones h5,
.terminos-y-condiciones h4 {
  color: var(--azul);
  font-weight: 700;
  margin-bottom: 8px;
}

.terminos-y-condiciones p {
  line-height: 2rem;
  font-size: 14px;
}

/* contacto */

.section-left-contact-container {
      background-color: var(--azul);
    border-radius: 40px 0px 40px 0px;
    padding: 75px 50px 50px 50px;
  
}

.section-left-contact-container h2 {
  color: white;
  font-size: 32px;
}

.contact-info-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.contact-icon {
  font-size: 28px;
  color: var(--verde);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(71, 169, 72, 0.1);
  border-radius: 8px;
  flex-shrink: 0;
}

.contact-info-item h5 {
  color: white;
  font-weight: 700;
  margin-bottom: 8px;
}

.contact-info-item p {
  color: white;
  margin: 5px 0;
  line-height: 1.6;
}

.contact-info-item a {
  color: var(--verde);
  text-decoration: none;
}

.contact-info-item a:hover {
  text-decoration: underline;
}

.link-mas {
  font-size: 14px;
  display: inline-block;
  margin-top: 5px;
}

.contact-form-container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.contact-form-container h3 {
  color: var(--azul);
  font-weight: 700;
  margin-bottom: 30px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  color: var(--azul);
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.form-control {
      border: 1px solid #ddd;
    border-radius: 6px;
    padding: 5px 15px;
    font-size: 12px;
    color: black !important;
    height: 45px;
    transition: all 0.3s ease;
    font-size: 16px;
}

#order__form .form-control {
  padding: 5px 15px;
}
.form-control-qty {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 0px ;
  font-size: 12px;
  transition: all 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(71, 169, 72, 0.1);
}

textarea.form-control {
  resize: vertical;
  font-family: inherit;
}

.form-check-label {
  color: #666;
  font-size: 14px;
  margin-bottom: 0;
}

.form-check-label a {
  color: var(--verde);
  text-decoration: none;
}

.form-check-label a:hover {
  text-decoration: underline;
}

.btn-submit {
  background: var(--verde);
  color: white;
  border: none;
  padding: 14px 40px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.btn-submit:hover {
  background: var(--verde-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(71, 169, 72, 0.3);
}

.btn-submit:active {
  transform: translateY(0);
}

.contact-map {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.cta-box {
  background: linear-gradient(
    135deg,
    var(--azul) 0%,
    rgba(40, 121, 40, 0.95) 100%
  );
  color: white;
  padding: 40px 30px;
  border-radius: 8px;
  text-align: center;
}

.cta-box h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

.cta-box p {
  margin-bottom: 20px;
  opacity: 0.9;
}

.btn-secondary {
  background: white;
  color: var(--azul);
  border: none;
  padding: 12px 30px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-secondary:hover {
  background: var(--verde);
  color: white;
  transform: translateY(-2px);
}

.text-danger {
  color: #dc3545;
}

.business-hours {
  font-size: 14px;
}

.business-hours h5 {
  color: var(--azul);
  font-weight: 700;
}

.business-hours p {
  color: #666;
}

.section-subtitle {
  font-size: 24px;
  font-weight: 700;
  color: var(--azul);
}

.page-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--azul);
}

.breadcrumb {
  background: transparent;
  padding: 0;
}

.breadcrumb-item a {
  color: var(--azul);
  text-decoration: none;
}

.breadcrumb-item a:hover {
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: #666;
}

/* ==========================================================================
   MENÚ MÓVIL COMO POPUP
   En pantallas < 992px el menú colapsable se abre como un panel fijo que pasa
   por encima del contenido (con fondo oscurecido detrás), en vez de empujar los
   elementos del header. Se cierra tocando el fondo, la X, una opción o con
   Escape (ver footer.php).
   ========================================================================== */
@keyframes menuPopupIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.menu-cerrar {
  display: none;
}

@media (max-width: 991.98px) {
  body.menu-movil-abierto {
    overflow: hidden;
  }

  /* El header es un .container-fluid (position: relative) con z-index, asi que
     forma un stacking context: el panel fijo de adentro quedaria SIEMPRE por
     debajo del fondo oscurecido. Subimos el header por encima del fondo (pero
     por debajo de los modales de Bootstrap) para que el panel y su boton de
     cerrar sean visibles y clickeables. */
  .main-header {
    z-index: 1037;
  }

  /* Fondo oscurecido detrás del panel */
  body.menu-movil-abierto::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(12, 39, 76, .5);
    z-index: 1035;
  }

  #top-navbar .navbar-collapse {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(340px, 85vw);
    max-width: 100%;
    height: 100% !important;
    margin: 0;
    padding: 3.2rem 1.1rem 2rem;
    background: #fff;
    box-shadow: -10px 0 30px rgba(12, 39, 76, .28);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 1036;
    border: 0;
    border-radius: 0;
  }

  /* Anular la animación de altura de Bootstrap: el panel se desliza desde la derecha */
  #top-navbar .navbar-collapse.collapsing {
    position: fixed;
    height: 100% !important;
    transform: translateX(100%);
    transition: none;
  }

  #top-navbar .navbar-collapse.show {
    animation: menuPopupIn .28s cubic-bezier(.2, .7, .3, 1);
  }

  /* Botón para cerrar el panel */
  .menu-cerrar {
    display: block;
    position: absolute;
    top: .7rem;
    right: .9rem;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--azul);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    pointer-events: auto;
  }

  .menu-cerrar:hover {
    color: var(--azul-hover);
  }

  /* Opciones a lo ancho del panel */
  #top-navbar .navbar-nav,
  #top-navbar .site-menu {
    width: 100%;
    margin: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: .35rem;
  }

  #top-navbar .site-menu .nav-item {
    width: 100%;
    margin: 0;
  }

  #top-navbar .navbar-collapse .nav-link,
  #top-navbar .navbar-collapse .nav-link i {
    color: var(--azul);
  }

  /* Cada opción como fila redondeada, con aire horizontal */
  #top-navbar .site-menu .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .65rem;
    width: 100%;
    padding: .8rem 1rem;
    border: 0;
    border-radius: .65rem;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
  }

  #top-navbar .site-menu .nav-link:hover {
    background: var(--azul-claro);
    color: var(--azul-hover);
  }

  #top-navbar .site-menu .nav-link i {
    width: 1.1rem;
    text-align: center;
    flex: none;
  }

  /* La opción activa se resalta como una fila azul, no como un recuadro pegado */
  #top-navbar .site-menu .nav-link.outstanding-btn {
    background: var(--azul) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(12, 39, 76, .22);
  }

  #top-navbar .site-menu .nav-link.outstanding-btn i {
    color: #fff !important;
  }

  /* CTA "Ingresar": botón lleno, prolijo y a lo ancho */
  #top-navbar .site-menu .nav-link.site-cta {
    justify-content: center;
    margin-top: .35rem;
    padding: .8rem 1rem;
    background: var(--azul) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: .65rem;
    box-shadow: 0 6px 16px rgba(12, 39, 76, .22);
  }

  #top-navbar .site-menu .nav-link.site-cta:hover {
    background: var(--azul-hover) !important;
    color: #fff !important;
  }

  #top-navbar .site-menu .nav-link.site-cta i {
    color: #fff !important;
  }

  /* El desplegable "Mi cuenta" se expande dentro del panel */
  #top-navbar .navbar-collapse .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    min-width: 0;
    margin: 0 0 .35rem;
    padding: .25rem 0 .25rem 1.25rem;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 768px) {
  .contact-form-container {
    padding: 20px;
  }

  .contact-info-item {
    flex-direction: column;
    gap: 10px;
  }

  .contact-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .btn-submit {
    padding: 12px 30px;
  }

  .cta-box {
    padding: 30px 20px;
  }

  .cta-box h3 {
    font-size: 20px;
  }
}