/**
 * WEBSITE: https://themefisher.com
 * TWITTER: https://twitter.com/themefisher
 * FACEBOOK: https://www.facebook.com/themefisher
 * GITHUB: https://github.com/themefisher/
 */

/*=== MEDIA QUERY ===*/
/* @import url("https://fonts.googleapis.com/css?family=Muli:300,400,600,700,800,900"); */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
body {
  line-height: 1.5;
  font-family: "Roboto", sans-serif;
  background: #fff;
}

p, li, input, select, button {
  font-family: "Roboto", sans-serif;
  color: #666;
  font-size: 14px;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  color: #333;
}

p {
  color: #666;
}

h1 {
  font-size: 35px;
}

h2 {
  font-size: 25px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

p {
  color: #888;
}

label {
  font-size: 14px;
  letter-spacing: 0;
  color: #848484;
}

.nav-pills .nav-link {
  font-size: 16px;
}

    /* Contenedor Flex para la Estructura de dos Columnas */
    .truck-contact-layout {
        display: flex;
        gap: 0; 
        margin: 0 auto;
    }
    
    /* 1. Sección del Formulario (Lado Izquierdo) */
    .truck-form-section {
        flex: 2; /* Ocupa más espacio (aprox 66%) */
        padding: 40px;
    }

    .truck-contact-form {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        padding-top: 20px;
    }

    /* Estilo para las filas de dos columnas */
    .truck-form-row {
        display: flex;
        width: 100%;
        gap: 20px;
    }

    /* Estilo para los campos que ocupan todo el ancho */
    .truck-form-group.full-width {
        width: 100%;
    }

    .truck-form-group { /* Permite que los campos se dividan en la fila */
        display: flex;
        flex-direction: column;
    }


    .truck-form-section label {
        font-weight: bold;
        margin-bottom: 5px;
        font-size: 14px;
        color: #333;
    }

    .truck-form-section input[type="text"], 
    .truck-form-section input[type="email"], 
    .truck-form-section input[type="tel"], 
    .truck-form-section select, 
    .truck-form-section textarea {
        padding: 15px 12px;
        border: none;
        border-radius: 8px;
        background-color: #f5f5f5 !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        font-size: 16px;
        width: 100%;
        box-sizing: border-box; 
    }

    .truck-form-section textarea {
        resize: vertical;
        min-height: 120px;
    }

    /* 2. Estilos del Sidebar de Información (Lado Derecho) */
    .truck-info-sidebar {
        flex: 1; /* Ocupa menos espacio (aprox 33%) */
        background-color: #013366; 
        color: white;
        padding: 40px;
        position: relative;
        border-radius: 13px;
    }
    
    .truck-info-block {
        margin-bottom: 40px;
    }

    .truck-info-sidebar h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 10px;
        padding-bottom: 5px;
        color: #FFFFFF;
    }

    .truck-info-sidebar p, .truck-info-sidebar li {
        margin: 5px 0;
        line-height: 1.6;
        font-size: 15px;
        opacity: 0.9;
    }
    
    .truck-info-sidebar .social-icons a {
        color: var(--original-blue);
        text-decoration: none;
    }

    /* Estilos de los Iconos Sociales (Círculos Naranjas) */
    .truck-social-icons {
        display: flex;
        gap: 10px;
        margin-top: 15px;
    }

    .truck-social-icon-wrapper {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: #2abcd4; 
        border: 1px solid white;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .truck-social-icon-wrapper i {
        color: white;
    }

    
    /* Media Query para hacerlo responsivo */
    @media (max-width: 992px) {
        .truck-contact-layout {
            flex-direction: column;
        }

        .truck-form-row {
            flex-direction: column;
            gap: 0;
        }

        .truck-form-group {
            margin-bottom: 15px;
        }

        .truck-form-section, .truck-info-sidebar {
            padding: 30px 20px;
        }
    }

/*
 * --- FIX DEFORMACIÓN Y TAMAÑO DEL SLIDER PRINCIPAL ---
 */
.product-details-slider .product-slider {
    position: relative !important;
    /* IMAGEN MÁS PEQUEÑA Y HORIZONTAL. Ajuste a 65% */
    padding-bottom: 65% !important; 
    height: 0 !important;
    overflow: hidden !important;
}

.product-details-slider .product-slider .slick-list {
    position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
}

/* 🔑 CENTRADO VERTICAL DE LA IMAGEN (SOLUCIÓN FLEXBOX AGRESIVA) */
/* Aplicamos Flexbox al contenedor interno de Slick y le damos altura completa */
.product-details-slider .product-slider .slick-slide > div {
    display: flex !important;      /* Activa Flexbox */
    justify-content: center !important; /* Centrado horizontal */
    align-items: center !important;     /* Centrado vertical (¡CLAVE!) */
    height: 100% !important;            /* Ocupa toda la altura del viewport */
}

.product-details-slider .product-slider img {
    /* Mantenemos tus dimensiones fijas */
    width: 600px !important; 
    height: 500px !important; 
    object-fit: contain !important;
    
    /* Limpiamos cualquier interferencia de posicionamiento absoluto */
    position: static !important;
    margin: 0 auto !important; /* Asegura centrado horizontal si no usa flex */
}


/*
 * --- ESTILOS DE MINIATURAS (Sin cambios) ---
 */
.product-slider-nav .slick-slide {
    /* Ajustamos el padding para que las imágenes queden limpias y separadas */
    padding: 0 7px; /* Aumentamos el espacio entre cada miniatura */
    cursor: pointer; 
    box-sizing: border-box; 
    transition: none; 
}
/* Tu estilo de imagen y borde se mantienen: */
.product-slider-nav .slick-slide img {
    border: 3px solid transparent; display: block; border-radius: 4px; transition: none;
}
.product-slider-nav .slick-current img {
    border-color: #013366; box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); 
}


/*
 * --- ESTILOS DE FLECHAS PARA SLIDER PRINCIPAL (Grandes y Azules) ---
 */
.product-slider .slick-prev,
.product-slider .slick-next {
    z-index: 10 !important; width: 60px !important; height: 60px !important;
    background-color: transparent !important; box-shadow: none !important; border-radius: 50% !important;
    top: 50% !important; transform: translateY(-50%) !important;
}

.product-slider .slick-prev:before,
.product-slider .slick-next:before {
    font-family: 'slick'; font-size: 35px; line-height: 1;
    color: #013366 !important; opacity: 1 !important;
}

.product-slider .slick-prev { left: 5px !important; }
.product-slider .slick-next { right: 5px !important; }

/*
 * --- ESTILOS DE PUNTOS DE NAVEGACIÓN (DOTS) ---
 */
.product-slider-nav .slick-dots { bottom: -30px !important; }
.product-slider-nav .slick-dots li button:before { font-size: 10px; color: #ccc !important; opacity: 1 !important; }
.product-slider-nav .slick-dots li.slick-active button:before { color: #013366 !important; }

/*
 * --- ESTILOS DE FLECHAS PARA EL SLIDER DE GALERÍA (Pestaña) ---
 * APUNTAMOS A LOS ELEMENTOS NATIVOS DE SLICK.
 */
#pills-galeria .slick-prev,
#pills-galeria .slick-next {
    /* Posicionamiento, Tamaño, y Forma */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10 !important; 
    width: 60px !important; 
    height: 60px !important;
    
    background-color: transparent !important; /* Fondo transparente */
    box-shadow: none !important; 
    border-radius: 50% !important; /* Círculo */
    
    cursor: pointer;
}

/* 🛑 CLAVE: Estilizar el ÍCONO usando la pseudo-clase :before (donde Slick pone la flecha) */
#pills-galeria .slick-prev:before,
#pills-galeria .slick-next:before {
    /* Replicamos las propiedades de tu slider principal */
    font-family: 'slick'; 
    font-size: 35px; 
    line-height: 1;
    color: #013366 !important; /* ¡Tu color azul oscuro! */
    opacity: 1 !important;
}

/* Posición de las flechas */
#pills-galeria .slick-prev { 
    left: 5px !important; 
}
#pills-galeria .slick-next { 
    right: 5px !important; 
}

/* Estilo al pasar el ratón (Opcional: puedes hacerlo más oscuro aquí si quieres) */
#pills-galeria .slick-prev:hover:before,
#pills-galeria .slick-next:hover:before {
    color: #004d99 !important; 
}

/*
 * --- ESTILOS DE PUNTOS DE NAVEGACIÓN (DOTS) ---
 * Se aplica tanto al slider de miniaturas (nav) como al de galería
 */

/* Contenedor: Mantenemos la posición inferior */
.product-slider-nav .slick-dots,
#pills-galeria .slick-dots { 
    bottom: -30px !important; 
}

/* 🔑 CLAVE: Aumentar el tamaño del punto (usamos 14px como ejemplo) */
.product-slider-nav .slick-dots li button:before,
#pills-galeria .slick-dots li button:before { 
    font-size: 12px; /* Tamaño del punto agrandado */
    color: #ccc !important; /* Color inactivo (gris claro) */
    opacity: 1 !important; 
}

/* Color del punto ACTIVO (Tu color azul oscuro #013366) */
.product-slider-nav .slick-dots li.slick-active button:before,
#pills-galeria .slick-dots li.slick-active button:before { 
    color: #013366 !important; 
}


/* ======================================= */
/* ESTILOS PARA EL FOOTER INTEGRADO        */
/* ======================================= */

.main-footer {
    background-color: #013366; /* Color verde/petróleo similar a la imagen */
    color: #fff; /* Color de texto principal blanco */
    padding: 60px 0 20px; /* Padding superior e inferior */
    font-size: 14px;
}

.main-footer h4 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 1.5px; 
}

.main-footer p.alt-color {
    color: #ddd; 
    text-align: justify;
    margin-top: 15px !important;
}

.main-footer .block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-footer .block ul li {
    margin-bottom: 10px;
}

.main-footer .block ul li a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s;
}

.main-footer .block ul li a:hover {
    color: #fff;
}

/* Columna de REDES SOCIALES */
.social-block p {
    color: #ddd;
    margin-bottom: 15px;
    font-size: 13px;
}

.social-media-icons-footer {
    display: flex;
    padding: 0;
    margin: 15px 0 0;
    list-style: none;
}

.social-media-icons-footer li {
    margin-right: 10px;
    margin-bottom: 0;
}

.social-media-icons-footer li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #2abcd4;
    color: #ddd; /* Color del ícono */
    font-size: 14px;
    transition: background-color 0.3s, color 0.3s;
}

.social-media-icons-footer li a:hover {
    background-color: #2abcd4;
    color: #ddd;
}

/* FOOTER INFERIOR (Términos y Copyright) */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.footer-terms-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.footer-terms-links li {
    margin-right: 15px;
}

.footer-terms-links li:last-child {
    margin-right: 0;
}

.footer-terms-links li a {
    color: #ddd;
    text-decoration: none;
    font-size: 13px;
}

.footer-bottom-bar p {
    margin-bottom: 0;
    font-size: 13px;
    color: #ddd;
}

@media (min-width: 992px) {
    .col-lg-2-25 {
        flex: 0 0 18.75%; /* 2.25 / 12 * 100% = 18.75% */
        max-width: 18.75%;
    }
}

/* ======================================= */
/* FOOTER INFERIOR (Términos y Copyright) */
/* ======================================= */

/* Mantenemos el estilo base de la barra inferior */
.footer-bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

/* 🎯 CLAVE: Añadir un padding izquierdo a la barra inferior en pantallas grandes (lg) */
@media (min-width: 992px) {
    /* Aquí añadimos padding-left que coincida con el espacio interno de las columnas de Bootstrap.
       El padding de Bootstrap es típicamente 15px a cada lado de la columna. */
    .footer-bottom-bar .container {
        padding-left: 15px; /* Valor por defecto del padding del container */
    }
    
    .footer-bottom-bar .row {
        /* Usamos este hack de margen negativo de Bootstrap para que el contenido se alinee con las columnas. */
        margin-left: -32px;
    }
    
    /* El contenedor directo de los enlaces necesita ajustarse.
       La columna del logo (col-lg-3) tiene padding a la izquierda, por lo que aplicamos un margen */
    .footer-bottom-bar .col-lg-6:first-child {
        /* El padding de la columna de Bootstrap es 15px, más el ajuste que tenga el texto dentro.
           Ajustaremos este margen hasta que el texto de 'Términos' se alinee con 'Selectruck es su socio...'
           Vamos a usar 15px por el padding de la columna + un ajuste de 10px si es necesario. */
        padding-left: 15px;
    }
    
    /* Ajuste para mover los enlaces a la derecha */
    .footer-terms-links {
        justify-content: flex-start !important; /* Alinea los enlaces a la izquierda de su columna */
        /* Margin para mover todo el bloque a la derecha, alineándolo con el texto de la primera columna.
           El valor de 15px es el padding izquierdo de la columna. */
        margin-left: 15px; 
    }
}


/* --- ESTILOS HERO CON CLIP-PATH --- */
.selectruck-hero-section {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
    overflow: hidden;
}

.hero-content {
    position: relative;
    width: 100%;
    min-height: 180px;
}

.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 🔵 CREAMOS EL FONDO AZUL CON EL CORTE DIAGONAL usando Pseudo-elemento */
.hero-content::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60%; /* Define la porción azul (60% del ancho) */
    height: 100%;
    background-color: rgba(0, 42, 141, 0.8); /* Azul Selectruck #013366 con 80% de opacidad */    z-index: 5;
    
    clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* Contenedor del texto overlay */
.hero-overlay-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; /* Centra verticalmente */
    justify-content: flex-end; /* Alinea a la derecha */
    padding-right: 15%; 
    color: white;
    text-align: right;
    z-index: 10; /* Asegura que el texto esté sobre el fondo azul y la imagen */
}

.overlay-text-inner {
    max-width: 500px;
    /* Ajustamos el color del texto si es necesario */
}

.overlay-text-inner h2 {
    font-size: 2.8em;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #ffffff;
}

.overlay-text-inner p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #f0f0f0;
}


/* Ajustes para pantallas más pequeñas (Móviles y Tabletas) */
@media (max-width: 992px) {
    
    .hero-content {
        min-height: 250px; /* Reducimos la altura en móvil para ahorrar espacio */
    }

    /* Ocultamos el corte diagonal (que ya tenías) */
    .hero-content::before {
        display: none;
    }

    /* 💥 NUEVO AJUSTE: Ocultar la imagen de fondo para mostrar solo el color sólido */
    .hero-image {
        display: none;
    }

    /* 💥 CAMBIO CLAVE: Aplicar fondo azul sólido al contenedor de texto */
    .hero-overlay-text {
        justify-content: center;
        padding: 50px 5%; /* Añadimos padding para espacio superior/inferior */
        text-align: center;
        /* Reemplazamos el overlay oscuro con el azul Selectruck sólido */
        background-color: #013366; 
        position: relative; /* Lo cambiamos a relativo si quitamos la imagen, o mantenemos absoluto y la imagen oculta */
        /* Si mantienes position: absolute; y ocultas la imagen, el color de fondo del body será visible */
    }

    /* Aseguramos que el contenido ocupe todo el ancho */
    .selectruck-hero-section {
         background-color: #013366; /* Aplicamos el fondo azul al contenedor principal si ocultamos la imagen */
    }

    .hero-overlay-text h2 {
        font-size: 2em;
    }
    
    /* Si ocultamos .hero-image, el texto sigue estando en su posición. 
       Para que el color azul cubra todo, debemos asegurarnos que el contenedor principal .selectruck-hero-section tenga el color: */
}
.nav-pills.with-background .nav-item {
  margin-right: 10px;
}
.nav-pills.with-background .nav-item:last-child {
  margin-right: 0;
}
.nav-pills.with-background .nav-link {
  background: white;
  padding: 10px 0;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
.nav-pills.with-background .nav-link:hover {
  color: #013366;
}
.nav-pills.with-background .nav-link.active {
  background: #013366;
  position: relative;
  transition: 0s;
}
.nav-pills.with-background .nav-link.active:hover {
  color: #f5f5f5;
}
.nav-pills.with-background .nav-link.active:after {
  content: "";
  position: absolute;
  left: 42%;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #013366;
  clear: both;
  transition: all 0.2s ease-in 0s;
}
.nav-pills.transparent .nav-link {
  background: transparent;
  margin-bottom: 20px;
  color: #848484;
  font-size: 24px;
}
@media (max-width: 768px) {
  .nav-pills.transparent .nav-link {
    font-size: 17px;
  }
}
@media (max-width: 480px) {
  .nav-pills.transparent .nav-link {
    font-size: 12px;
  }
}
.nav-pills.transparent .nav-link.active {
  background: transparent;
  color: #666;
}

ul.pagination li {
  margin-right: 10px;
}
ul.pagination li a {
  border-radius: 3px !important;
  font-size: 16px;
  padding: 0;
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-color: transparent;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  color: #666;
}
ul.pagination .active a {
  background-color: #013366 !important;
  color: #f5f5f5 !important;
  border-color: transparent !important;
}

ul.social-circle-icons li {
  margin-right: 7px;
}
ul.social-circle-icons li:last-child {
  margin-right: 0;
}
ul.social-circle-icons li a {
  display: block;
  font-size: 15px;
  line-height: 38px;
  color: #013366;
  height: 38px;
  width: 38px;
  border: 2px solid #013366;
  background: #f5f5f5;
  border-radius: 100%;
}
ul.social-circle-icons li a:hover {
  text-decoration: none;
  color: #f5f5f5;
  background: #013366;
}

.store-list h4 {
  font-size: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
  color: #666;
}
.store-list ul {
  list-style: none;
}
.store-list ul li {
  display: block;
  font-size: 15px;
  margin-bottom: 8px;
}
.store-list ul li a {
  display: block;
  color: #848484;
}
.store-list ul li a:hover {
  text-decoration: underline;
  color: #013366;
}
@media (max-width: 768px) {
  .store-list {
    margin-bottom: 15px;
  }
}
.store-list .btn {
  margin-top: 35px;
}

/**
 *
 * Base Elements
 *
 */
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

figure {
  margin: 0;
}

a {
  transition: all 0.3s ease-in 0s;
  color: #000;
}

iframe {
  border: 0;
}

a:focus,
a:hover {
  text-decoration: none;
  outline: 0;
  color: #013366;
}

.form-control {
  border-radius: 2px;
  height: 50px;
  background-color: transparent;
  color: #666;
  box-shadow: none;
  font-size: 15px;
}
.form-control:focus {
  color: #666;
  box-shadow: none;
  border: 1px solid #013366;
  background-color: transparent;
}

textarea.form-control {
  padding: 20px;
}

.form-control::-webkit-input-placeholder {
  color: #666;
}

/* WebKit, Blink, Edge */
.form-control:-moz-placeholder {
  color: #666;
}

/* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder {
  color: #666;
}

/* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder {
  color: #666;
}

/* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder {
  color: #666;
}

/* Microsoft Edge */
.mt-20 {
  margin-top: 20px;
}

.btn:active,
.btn:focus {
  color: #ddd;
  box-shadow: none;
}

.nice-select-white .nice-select:after {
  border-bottom: 2px solid #f5f5f5;
  border-right: 2px solid #f5f5f5;
}

.w-100 {
  width: 100%;
}

.margin-0 {
  margin: 0 !important;
}

button {
  cursor: pointer;
}

.btn.active:focus,
.btn:active:focus,
.btn:focus {
  outline: 0;
}

.bg-shadow {
  background-color: #f5f5f5;
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
  padding: 20px;
}


.section {
  padding: 100px 0;
}

.section-nosotros {
  padding-top: 120px;
}

.section-compra {
  margin-top: 80px;
}

.section-contactanos{
  margin-top: -30px;
}

.section-noticias{
  padding: 5px 0;
  margin-bottom: 70px;
}

.section-productos {
  padding: 5px 0;
}

.section-clientes{
  margin-top: 80px;
  margin-bottom: 140px;
}

.section-banner{
  margin-top: -20px;
}

.section-objetivos{
  margin-top: -150px;
}

.section-categorias{
  padding-top: 100px;
}

.section-servicios{
  padding-top: 10px;
}

.section-sm {
  padding: 70px 0;
}

.section-title {
  position: relative;
  margin-bottom: 75px;
  text-align: center;
}
.section-title h2 {
  font-size: 30px;
  letter-spacing: 0.05em;
  text-align: center;
}
.section-title h2:before {
  content: " ";
  display: block;
  margin: 0 auto;
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  width: 127px;
  height: 2px;
  background-color: #e0e0e0;
}
.section-title h2:after {
  content: " ";
  display: block;
  margin: 0 auto;
  position: absolute;
  bottom: -25px;
  left: 0;
  right: 0;
  width: 40px;
  height: 5px;
  background-color: #013366;
}
.section-title p {
  font-size: 18px;
  line-height: 30px;
  color: #848484;
}

/* 1. Ocultar el checkbox nativo (se mantiene igual) */
.custom-input-truck {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* 2. Estilo del contenedor (se mantiene `display: block`) */
.custom-control-truck {
    display: block;
}

/* 3. Estilo de la etiqueta (Texto) - SIN CAMBIOS SIGNIFICATIVOS */
.custom-label-truck {
    position: relative;
    padding-left: 4px; /* Ya es tu valor preferido */
    cursor: pointer;
    font-size: 0.95rem;
    color: #333;
    display: block;
    line-height: 35px;
    margin-bottom: 5px;
}

/* 4. Crear la caja del checkbox (el cuadrado oscuro/blanco) */
/* 4. Crear la caja del checkbox (el cuadrado oscuro/blanco) - AJUSTE DE POSICIÓN */
.custom-label-truck:before {
    content: '';
    position: absolute;
    /* Ajustado a -25px para alineación, se mantiene según tu último código */
    left: -25px; 
    top: 50%;
    transform: translateY(-50%);
    /* Tamaños de la caja según tu último código */
    height: 22px; 
    width: 22px; 
    border: 2px solid #013366; 
    border-radius: 6px; 
    background-color: white;
}

/* 5. Estado SELECCIONADO: La caja se rellena y se pone el ícono de check */
.custom-input-truck:checked + .custom-label-truck:before {
    background-color: #013366; 
    border-color: #013366;
}

/* 6. Estilo del ícono de check (Ajuste para centrado perfecto) */
.custom-label-truck:after {
    content: '';
    position: absolute;
    /* AJUSTE CLAVE DE CENTRADO: Muevo de -18px a -17px para centrar en la caja de 22px */
    left: -17px; 
    top: 50%;
    /* Mantenemos el centrado vertical */
    transform: translateY(-60%) rotate(45deg); 
    
    /* REDUCCIÓN DEL TAMAÑO DEL CHECK */
    width: 6px; 
    height: 12px; 
    border: solid white;
    /* REDUCCIÓN DEL GROSOR DEL BORDE */
    border-width: 0 3px 3px 0; 
    display: none;
}

/* 7. Mostrar el ícono de check SOLO cuando está seleccionado */
.custom-input-truck:checked + .custom-label-truck:after {
    display: block;
}

/* 8. AJUSTE DE ALINEACIÓN HORIZONTAL */
/* Aseguramos que las opciones del widget no tengan padding o margin extra */
.widget .custom-control-truck {
    padding: 0;
    margin-left: 0; /* Aseguramos que no haya margen */
}

.user-profile,
.dashboard {
  padding-top: 50px;
}

.overly {
  position: relative;
}
.overly:before {
  content: "";
  background: rgba(0, 0, 0, 0.51);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.page-wrapper {
  padding: 70px 0;
}

.social-media-icons ul li {
  display: inline-block;
}
.social-media-icons ul li a {
  font-size: 18px;
  color: #333;
  display: inline-block;
  padding: 7px 12px;
  color: #f5f5f5;
}
.social-media-icons ul li .twitter {
  background: #00aced;
}
.social-media-icons ul li .facebook {
  background: #3b5998;
  padding: 7px 18px;
}
.social-media-icons ul li .googleplus {
  background: #dd4b39;
}
.social-media-icons ul li .dribbble {
  background: #ea4c89;
}
.social-media-icons ul li .instagram {
  background: #bc2a8d;
}

/**
 *
 * Button Styles
 *
 */
.btn {
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 15px 30px;
  border-radius: 4px;
}

.btn-main, .btn-main-sm {
  background: #013366;
  color: #f5f5f5;
}
.btn-main:hover, .btn-main-sm:hover {
  background: #013366;
  color: #f5f5f5;
}

.btn-main-sm {
  padding: 6px 20px;
  font-size: 12px;
}

.btn-secondary {
  background: #f5f5f5;
  color: #000;
  border-color: #f5f5f5;
}
.btn-secondary:hover {
  background: #013366;
  color: #f5f5f5;
  border-color: #f5f5f5;
}

.btn-transparent {
  background: transparent;
  color: #013366;
  border: 1px solid #013366;
}
.btn-transparent:hover {
  background: #013366;
  color: #f5f5f5;
}

.btn-transparent-white {
  background: transparent;
  color: #f5f5f5;
  border: 1px solid #f5f5f5;
}
.btn-transparent-white:hover {
  background: #f5f5f5;
  color: #848484;
}

.btn-group .btn i {
  font-size: 16px;
  line-height: 40px;
}
.btn-group .btn:focus {
  color: #d0d0d0;
}
.btn-group .btn-transparent {
  color: #d0d0d0;
  border: 1px solid #d0d0d0;
  padding: 0;
  width: 40px;
}
.btn-group .btn-transparent:hover {
  color: #e6b322;
  background: transparent;
}

.btn-active {
  color: #e6b322;
}

/**
 *
 * Card Styles
 *
 */
.card-main {
  border-radius: 2px;
  border: none;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}

.mb-30 {
  margin-bottom: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.border-bottom {
  border-bottom: 1px solid #dedede;
}

.bl-none {
  border-left: none !important;
}

.alt-color {
  color: #c7c7c7;
}

.success {
  color: #1fcc2e;
}

.page-title {
  background: #013366;
  padding: 35px 0;
}
.page-title h3 {
  color: #f5f5f5;
  font-size: 42px;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: 0;
}

ul.pagination li {
  margin-right: 10px;
}
ul.pagination li a {
  font-weight: 600;
  border-radius: 3px !important;
  font-size: 16px;
  padding: 0;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-color: transparent;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  color: #666;
}
ul.pagination li a:hover {
  background-color: #013366 !important;
  color: #f5f5f5 !important;
  border-color: transparent !important;
}
ul.pagination .active a {
  background-color: #013366 !important;
  color: #f5f5f5 !important;
  border-color: transparent !important;
}

.nice-select .list {
  width: 100%;
}

.slick-slide:focus {
  outline: 0;
}

.page-search {
  background: #013366;
  padding: 30px 0;
}
.page-search .advance-search .form-group {
  margin-bottom: 0;
}
.page-search .advance-search .form-control {
  border: 1px solid #f5f5f5;
  color: #f5f5f5;
}
.page-search .advance-search ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #f5f5f5;
}
.page-search .advance-search ::-moz-placeholder {
  /* Firefox 19+ */
  color: #f5f5f5;
}
.page-search .advance-search :-ms-input-placeholder {
  /* IE 10+ */
  color: #f5f5f5;
}
.page-search .advance-search :-moz-placeholder {
  /* Firefox 18- */
  color: #f5f5f5;
}

.bg-light {
  background: #F5F5F5 !important;
}

.bg-gray {
  background: #F5F5F5;
}

.bg-1 {
  background: url('/images/banner/banner-principal.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-2 {
  background: url(../images/subscription/subscription-back.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-3 {
  background: url('/images/banner/banner-secundario.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-4 {
  background: #013366;
}

.navigation {
  padding: 1px 0;
}
.navigation .navbar-nav {
  text-align: center;
}

.login-button {
  border: 2px solid #dedede;
  margin-right: 8px;
  padding: 6px 20px !important;
}
@media (max-width: 400px) {
  .login-button {
    display: inline-block;
    padding: 6px 45px !important;
    margin: 5px 0;
  }
}
@media (max-width: 480px) {
  .login-button {
    display: inline-block;
    padding: 6px 45px !important;
    margin: 5px 0;
  }
}
@media (max-width: 768px) {
  .login-button {
    display: inline-block;
    padding: 6px 45px !important;
    margin: 5px 0;
  }
}
@media (max-width: 992px) {
  .login-button {
    display: inline-block;
    padding: 6px 45px !important;
    margin: 5px 0;
  }
}

.add-button {
  background: #28a745;
  color: #f5f5f5;
  padding: 8px 20px !important;
  display: inline-block;
}
.add-button:hover {
  color: #f5f5f5;
}

.main-nav .nav-item .nav-link {
  font-size: 16px;
  line-height: 43px;
  padding: 0 12px;
}
.main-nav .nav-item .nav-link span {
  margin-left: 4px;
}
.main-nav .nav-item .nav-link.dropdown-toggle {
  padding-right: 10px;
}
.main-nav .nav-item .dropdown-toggle::after {
  border: none;
}
.main-nav .nav-item.active .nav-link {
  color: #013366;
}
.main-nav .search .nav-link i {
  font-size: 15px;
  height: 43px;
  width: 43px;
  line-height: 43px;
  color: #013366;
  border: 1px solid #013366;
  border-radius: 3px;
  text-align: center;
}
.main-nav .search .input-group {
  width: 300px;
}
.main-nav .search .input-group .input-group-addon {
  background: #013366;
  color: #f5f5f5;
  border: 1px solid #013366;
}
.main-nav .search .input-group .input-group-addon i {
  font-size: 15px;
  padding-right: 5px;
  padding-left: 5px;
}

.dropdown-menu {
  padding: 0;
  border-radius: 0;
}
.dropdown-menu li:first-child {
  margin-top: 12px;
}
.dropdown-menu li:last-child {
  margin-bottom: 12px;
}

.nav-item.dropdown {
  position: relative;
}

.dropdown-item.active,
.dropdown-item:active {
  background: #013366;
}

.dropdown-submenu.active > a {
  background: #013366;
  color: #f5f5f5;
}

.dropdown-item {
  font-size: 14px;
  padding: 10px 60px 10px 25px;
}
@media (max-width: 992px) {
  .dropdown-item {
    padding: 10px 25px 10px 25px;
    text-align: center;
  }
}

.dropleft .dropdown-menu,
.dropright .dropdown-menu {
  margin: 0;
}

.dropleft .dropdown-menu {
  margin-right: -1px;
}

.dropright .dropdown-menu {
  margin-left: -1px;
}

.dropleft .dropdown-toggle::before,
.dropright .dropdown-toggle::after {
  font-weight: bold;
  font-family: "FontAwesome";
  border: 0;
}

.dropleft .dropdown-toggle::before {
  content: "\f104";
  margin-right: 6px;
}

.dropright .dropdown-toggle::after {
  content: "\f105";
  margin-left: 6px;
}

@media (min-width: 992px) {
  .dropdown-slide {
    position: static;
  }
  .dropdown-slide .open > a,
.dropdown-slide .open > a:focus,
.dropdown-slide .open > a:hover {
    background: transparent;
  }
  .dropdown-slide.full-width .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
  }
  .dropdown-slide .dropdown-menu {
    margin-top: 0;
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    position: absolute;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: 0.3s all;
    position: absolute;
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
  }
}
@media (min-width: 992px) and (max-width: 480px) {
  .dropdown-slide .dropdown-menu {
    transform: none;
  }
}
@media (min-width: 992px) {
  .dropdown:hover > .dropdown-menu {
    display: none;
    opacity: 1;
    display: block;
    transform: translate(0px, 0px);
    opacity: 1;
    visibility: visible;
    color: #777;
    transform: translateY(0px);
  }
}
@media (max-width: 480px) {
  .navbar-toggleable-md > .container {
    margin-right: 0;
    margin-left: 0;
    padding-left: 25px;
    padding-right: 25px;
  }
}
.hero-area .content-block h1,
.hero-area-2 .content-block h1 {
  color: #f5f5f5;
  font-size: 65px;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .hero-area .content-block h1,
.hero-area-2 .content-block h1 {
    font-size: 40px;
  }
}
.hero-area .content-block p,
.hero-area-2 .content-block p {
  color: #f5f5f5;
  font-size: 20px;
}
@media (max-width: 768px) {
  .hero-area .content-block p,
.hero-area-2 .content-block p {
    font-size: 17px;
  }
}

.hero-area {
  padding: 100px 0 0;
}
.hero-area .content-block {
  padding-bottom: 80px;
}
.hero-area .advance-search {
  background: #fff;
  padding: 20px 10px 10px 15px;
  border-radius: 3px;
  margin-bottom: -50px;
  box-shadow: -1px 3px 6px rgba(0, 0, 0, 0.12);
}
@media (max-width: 480px) {
  .hero-area .advance-search {
    margin-bottom: -80px;
  }
}
@media (max-width: 480px) {
  .hero-area .advance-search .block {
    display: block !important;
  }
}
.hero-area .advance-search .form-control {
  border-color: #dedede;
}
.hero-area .advance-search button {
  display: block;
}
@media (max-width: 480px) {
  .hero-area .advance-search button {
    width: 100%;
  }
}

.short-popular-category-list {
  margin-top: 40px;
}
.short-popular-category-list h2 {
  font-size: 14px;
  text-transform: uppercase;
  font-weight: bold;
  color: #f5f5f5;
}
.short-popular-category-list ul {
  margin-top: 10px;
}
.short-popular-category-list ul li {
  margin: 0 2px;
  margin-top: 15px;
}
.short-popular-category-list ul li a {
  /* border: 1px solid #404040; */
  color: #c1c1c1;
  font-weight: 200;
  padding: 4px 10px;
  font-size: 12px;
}
.short-popular-category-list ul li a i {
  margin-right: 2px;
}

.page-breadcrumb {
  background: none;
  margin-top: 10px;
  margin-bottom: 0;
}
.page-breadcrumb li a {
  color: #f5f5f5;
}
.page-breadcrumb li.active {
  color: #f5f5f5 !important;
}

.category-slider {
  box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.07);
  background: #f5f5f5;
  padding: 20px 0;
}
.category-slider .item {
  text-align: center;
}
.category-slider .item a {
  display: inline-block;
  padding: 20px 40px;
  background: #f5f5f5;
}
.category-slider .item a h4 {
  font-size: 14px;
  margin-top: 10px;
}
.category-slider .item a i {
  font-size: 40px;
}

.user-dashboard-menu li {
  margin-bottom: 5px;
}
.user-dashboard-menu li.active a {
  background: #013366;
  color: #f5f5f5;
}
.user-dashboard-menu li.active a:hover {
  color: #f5f5f5;
}
.user-dashboard-menu li a {
  padding: 10px;
  font-size: 15px;
  display: block;
  font-weight: 600;
  color: #555;
}
.user-dashboard-menu li a:hover {
  color: #013366;
}
.user-dashboard-menu li a:hover span {
  background: #013366;
  color: #f5f5f5;
}
.user-dashboard-menu li a i {
  margin-right: 5px;
}
.user-dashboard-menu li a span {
  float: right;
  background: #F4F7F9;
  float: right;
  font-size: 10px;
  border-radius: 8px;
  padding: 3px 8px;
  color: #84919B;
}

.user-dashboard-profile {
  text-align: center;
}
.user-dashboard-profile .profile-thumb img {
  width: 130px;
  height: auto;
  border: 5px solid #F4F7F9;
}
.user-dashboard-profile h4 {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 600;
}
.user-dashboard-profile .member-time {
  color: #888;
  font-size: 12px;
  margin-bottom: 3px;
}
.user-dashboard-profile .btn-contact {
  background: #1FCA6B;
}
.user-dashboard-profile .btn-offer {
  background: #373C4D;
}

.dashboard-container .product-dashboard-table thead th {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.dashboard-container .product-dashboard-table td {
  vertical-align: middle;
  padding: 40px 0;
}
.dashboard-container .product-thumb {
  width: 15%;
}
.dashboard-container tbody tr:hover .action a {
  color: #f5f5f5;
}
.dashboard-container tbody tr:hover .action a.edit {
  background: #59d659;
}
.dashboard-container tbody tr:hover .action a.view {
  background: #50c6e9;
}
.dashboard-container tbody tr:hover .action a.delete {
  background: #ff5252;
}
.dashboard-container .product-details {
  width: 45%;
}
.dashboard-container .product-details span {
  display: block;
  font-size: 14px;
  color: #848484;
}
.dashboard-container .product-details span strong {
  color: #666;
  width: 30%;
  display: inline-block;
}
.dashboard-container .product-details .title {
  font-size: 16px;
}
.dashboard-container .product-details .status.active {
  color: #59d659;
}
.dashboard-container .product-category {
  width: 15%;
  text-align: center;
}
.dashboard-container .action {
  width: 20%;
  text-align: center;
}
.dashboard-container .action a {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  font-size: 14px;
  color: #363b4d;
  text-align: center;
  display: inline-block;
}
.dashboard-container .action a:hover {
  color: #f5f5f5;
}
.dashboard-container .action a:hover.delete {
  background: #ff5252;
}
.dashboard-container .action a i {
  line-height: 40px;
}
.dashboard-container .action .list-inline .list-inline-item:not(:last-child) {
  margin-right: 0px;
}
.dashboard-container .action .edit {
  background: #f5f5f5;
}
.dashboard-container .action .view {
  background: #f5f5f5;
}
.dashboard-container .action .delete {
  background: #f5f5f5;
}

.submit-coupon .form-control, .submit-coupon .sbHolder {
  margin-bottom: 30px;
}
.submit-coupon button {
  margin-top: 20px;
}

.deals-categories {
  padding: 100px 0 0 0;
}
.deals-categories .border-bottom {
  padding-bottom: 70px;
}

@media (max-width: 768px) {
  .hero-area-2 {
    padding: 60px 0;
  }
}
.hero-area-2 .content-block {
  padding-bottom: 30px;
}
.hero-area-2 form {
  margin-bottom: 13px;
}
.hero-area-2 .coupon-ig {
  margin-bottom: 6px;
  /* WebKit, Blink, Edge */
  /* Mozilla Firefox 4 to 18 */
  /* Mozilla Firefox 19+ */
  /* Internet Explorer 10-11 */
  /* Microsoft Edge */
}
.hero-area-2 .coupon-ig input {
  background: #013366;
  color: #f5f5f5;
  border-color: transparent;
}
.hero-area-2 .coupon-ig .input-group-addon {
  background: #013366;
  color: #f5f5f5;
  border-left: none;
}
.hero-area-2 .coupon-ig .input-group-addon i {
  font-size: 17px;
  padding-right: 7px;
}
.hero-area-2 .coupon-ig .form-control::-webkit-input-placeholder {
  color: white;
}
.hero-area-2 .coupon-ig .form-control:-moz-placeholder {
  color: white;
}
.hero-area-2 .coupon-ig .form-control::-moz-placeholder {
  color: white;
}
.hero-area-2 .coupon-ig .form-control:-ms-input-placeholder {
  color: white;
}
.hero-area-2 .coupon-ig .form-control::-ms-input-placeholder {
  color: white;
}
.hero-area-2 .category-search .form-control {
  background: #f5f5f5;
}

.best-deal .block .tab-content {
  margin-top: 30px;
}
/* servicios */
/* .containerServi {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 40px 0;
}

.containerServi .cards {
    position: relative;
    width: 230px;
    height: 400px;
    background: #ccc;
    margin: 20px;
    border-radius: 40px;
    overflow: hidden;
}

.container .cards::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

.container .cards .icon {
    position: relative;
    width: 100%;
    height: 50%;
    background: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .cards .icon img {
    filter: invert(1);
    max-width: 120px;
    z-index: 10;
}

.container .cards .icon::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #ccc;
}

.container .cards .icon::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #333;
    border-bottom-left-radius: 50px;
}

.container .cards .content {
    position: relative;
    width: 100%;
    height: 50%;
    background: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .cards .content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #333;
}

.container .cards .content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #ccc;
    border-top-right-radius: 50px;
}

.container .cards .content .text {
    text-align: center;
    padding: 20px 30px;
    z-index: 1;
}

.container .cards .content .text h2 {
    font-weight: 500;
    font-size: 15px;
    color: #333;
}

.container .cards .content .text p {
    font-weight: 200;
    color: #333;
    font-size: 13px;
    margin: 10px 0;
} */


/* fin de servicios */
.category-block {
  box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.09);
  padding: 20px 25px;
  border-radius: 3px;
  margin-bottom: 25px;
  background: #f5f5f5 !important;
}
.category-block .header {
  margin-bottom: 20px;
  border-bottom: 3px solid #F4F7F9;
  text-align: center;
}
.category-block .header h4 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 5px;
}
.category-block .header .icon-bg-1 {
  background: #013366;
  box-shadow: 0 0 0px 4px rgba(0, 42, 141, 0.35);
}
.category-block .header .icon-bg-2 {
  background: #013366;
  box-shadow: 0 0 0px 4px rgba(0, 42, 141, 0.35);
}
.category-block .header .icon-bg-3 {
  background: #013366;
  box-shadow: 0 0 0px 4px rgba(0, 42, 141, 0.35);
}
.category-block .header .icon-bg-4 {
  background: #013366;
  box-shadow: 0 0 0px 4px rgba(0, 42, 141, 0.35);
}
.category-block .header .icon-bg-5 {
  background: #013366;
  box-shadow: 0 0 0px 4px rgba(0, 42, 141, 0.35);
}
.category-block .header .icon-bg-6 {
  background: #013366;
  box-shadow: 0 0 0px 4px rgba(0, 42, 141, 0.35);
}
.category-block .header .icon-bg-7 {
  background: #013366;
  box-shadow: 0 0 0px 4px rgba(0, 42, 141, 0.35);
}
.category-block .header .icon-bg-8 {
  background: #013366;
  box-shadow: 0 0 0px 4px rgba(0, 42, 141, 0.35);
}
.category-block .header i {
  margin-right: 6px;
  color: #f5f5f5;
  font-size: 13px;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  margin-bottom: 6px;
  border-radius: 40px;
}
.category-block .category-list li {
  display: block;
  font-size: 14px;
  border-bottom: 1px solid #F4F7F9;
  padding: 10px 0;
}
.category-block .category-list li:last-child {
  border: none;
}
.category-block .category-list li a {
  display: block;
  color: #777;
  font-size: 13px;
}
.category-block .category-list li a span {
  float: right;
  font-size: 10px;
  border-radius: 10px;
  padding: 3px 8px;
  color: #84919B;
}
.category-block .category-list li a:hover {
  text-decoration: underline;
}
.category-block .category-list li a i {
  margin-right: 6px;
  font-size: 12px;
  color: #013366;
  vertical-align: middle;
}

.search-result {
  padding: 20px;
  margin-bottom: 20px;
}
.search-result p {
  margin: 0;
}

.category-search-filter {
  background: #f5f5f5;
  padding: 20px;
}
.category-search-filter strong {
  margin: 0 5px;
}
.category-search-filter .view ul {
  display: inline-block;
}
.category-search-filter .view ul li:not(:last-child) {
  margin-right: 10px;
}
.category-search-filter .view ul li a {
  font-size: 15px;
}
.category-search-filter .view .view-switcher {
  background: #f5f5f5;
  padding: 10px 15px;
}

.nice-select {
  float: none;
  display: inline-block;
  border-radius: 0;
}
.nice-select .list {
  border-radius: 0;
}

.arrow-right, .arrow-left {
  cursor: pointer;
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: #013366;
  text-align: center;
  color: #f5f5f5;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.arrow-right {
  right: -15px;
}

.arrow-left {
  left: -15 px;
}

.product-item {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.product-item .card {
  border: none;
}
.product-item .card .card-body {
  padding: 20px;
  background: #f5f5f5 !important;
}
.product-item .card .card-body .card-title {
  font-size: 18px;
  margin-bottom: 5px;
  font-weight: 600;
}
.product-item .card .card-body .card-text {
  color: #777;
}
.product-item .thumb-content {
  position: relative;
}
.product-item .thumb-content .price {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #013366;
  color: #f5f5f5;
  display: inline-block;
  padding: 4px 8px;
  font-size: 12px;
}
.product-item .product-meta {
  margin-bottom: 15px;
}
.product-item .product-meta li {
  margin-right: 15px;
}
.product-item .product-meta li a {
  color: #888;
  font-size: 12px;
}
.product-item .product-meta li a i {
  margin-right: 4px;
}
.product-item .product-ratings li {
  margin-right: 1px;
}
.product-item .product-ratings li i {
  font-size: 18px;
  color: #dedede;
  cursor: pointer;
}
.product-item .product-ratings .selected i {
  color: #013366;
}

.product-details .product-title {
  font-size: 25px;
  font-weight: 600;
}
.product-details .tab-title {
  border-bottom: 1px solid #dedede;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.product-details .product-meta li {
  color: #888;
  margin-right: 25px;
}
.product-details .product-meta li a {
  color: #333;
  margin-left: 3px;
}
.product-details .content {
  padding-top: 40px;
}
.product-details .content h3 {
  font-size: 20px;
  font-weight: bold;
}
.product-details .content p {
  color: #888;
  line-height: 22px;
}
.product-details .content .nav {
  text-align: center;
  margin-bottom: 5px;
}
.product-details .content .nav .nav-item {
  margin-right: 3px;
}
.product-details .content .nav .nav-item .nav-link {
  padding: 20px 30px;
  border-radius: 0;
  background: #f5f5f5;
}
.product-details .content .nav .nav-item .nav-link:hover {
  background: #013366;
  color: #f5f5f5;
}
.product-details .content .nav .nav-item .nav-link.active {
  background: #013366;
}
.product-details .content .tab-content {
  background: #f5f5f5;
  padding: 30px;
}

.product-slider {
  padding: 40px 0;
}
.product-slider .carousel-indicators li {
  background: #888;
}
.product-slider .carousel-indicators li.active {
  background: #013366;
}
.product-slider .slick-dots {
  display: flex;
  bottom: -50px;
}
.product-slider .slick-dots li {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding-left: 0;
}
.product-slider .slick-dots li:first-child {
  margin-left: 0;
}
.product-slider .slick-dots li:last-child {
  margin-right: 0;
}
.product-slider .slick-dots li img {
  max-width: 100%;
  height: auto;
}

.product-table {
  margin-top: 20px;
}
.product-table tr td:first-child {
  background: #f9f9f9;
}
.product-table tr td {
  padding-left: 25px;
}

.product-review img {
  width: 60px;
  margin-right: 20px;
}
.product-review .name h5 {
  font-size: 18px;
  margin-bottom: 5px;
}
.product-review .media-body {
  background: #f5f5f5;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 2px;
}
.product-review .review-submission h5 {
  font-size: 16px;
  color: #888;
}
.product-review .review-submission .rate {
  margin-bottom: 20px;
}
.product-review .review-submission .rate i {
  margin: 0 5px;
}
.product-review .review-submission .form-control {
  margin-bottom: 8px;
  border-radius: 0;
}
.product-review .review-submission input[type=email], .product-review .review-submission input[type=password], .product-review .review-submission input[type=text], .product-review .review-submission input[type=tel] {
  height: 40px;
}

.widget {
  background: #f5f5f5;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  padding: 25px 30px 30px;
  margin-bottom: 30px;
  border-radius: 5px;
}

.widget .widget-header {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
}
.widget.category-list ul li:not(:last-child) {
  border-bottom: 1px solid #F4F7F9;
}
.widget.category-list ul li a {
  padding: 8px 0;
  display: block;
  transition: all linear 0.3s;
}
.widget.category-list ul li a span {
  float: right;
  font-size: 10px;
  background: #F4F7F9;
  border-radius: 10px;
  padding: 3px 8px;
  color: #84919B;
}
.widget.category-list ul li a:hover {
  color: #013366;
}
.widget.category-list ul li a:hover span {
  background: #013366;
  color: #f5f5f5;
}
.widget.filter .nice-select {
  width: 100%;
}
.widget.filter .nice-select .list {
  width: 100%;
}
.widget.price-range b {
  font-size: 13px;
  color: #888;
}
.widget.price-range .slider.slider-horizontal {
  width: 100%;
}
.widget.price-range .slider-handle {
  background: #013366;
}
.widget.price-range .slider-track {
  margin-top: -2px;
  height: 5px;
  box-shadow: none;
  border-radius: 0;
  background: #f5f5f5;
}
.widget.price-range .slider-selection {
  background: #dedede;
  box-shadow: none;
}
.widget.price {
  background: #013366;
}
.widget.price h4 {
  color: #f5f5f5;
}
.widget.price p {
  color: #f5f5f5;
  font-size: 30px;
  text-align: center;
  font-weight: bold;
  margin: 0;
}
.widget.map {
  padding: 10px;
}
.widget.map #map {
  height: 300px;
}
.widget.category ul.category-list li {
  margin-bottom: 8px;
}
.widget.category ul.category-list li a {
  font-size: 15px;
  letter-spacing: 0;
  display: block;
  color: #848484;
}
.widget.category ul.category-list li a:hover {
  color: #013366;
}
.widget.category ul.category-list li:last-child {
  margin-bottom: 5px;
}
.widget.archive ul.archive-list li {
  margin-bottom: 10px;
}
.widget.archive ul.archive-list li:last-child {
  margin-bottom: 5px;
}
.widget.archive ul.archive-list li a {
  font-size: 15px;
  letter-spacing: 0;
  display: block;
  color: #848484;
}
.widget.archive ul.archive-list li a:hover {
  color: #013366;
  text-decoration: underline;
}
.widget.share-coupon .sbHolder, .widget.share-coupon .form-control {
  margin-bottom: 10px !important;
}
.widget.share-coupon button {
  width: 100%;
}
.widget.coupon {
  background: #013366;
  padding: 35px 30px 40px 30px;
}
.widget.coupon p {
  font-size: 20px;
  line-height: 1.4;
  color: #f5f5f5;
  margin-bottom: 25px;
}
.widget.rate .starrr {
  display: flex;
  justify-content: center;
}
.widget.rate .starrr i {
  font-size: 20px;
  cursor: pointer;
  color: #e6b322;
  padding: 0 5px;
}
.widget.filter {
  padding-bottom: 17px;
}
.widget.filter .form-1 {
  margin-bottom: 20px;
}
.widget.filter .form-check-label {
  font-size: 14px;
  color: #848484;
}
.widget.filter .form-check-label input {
  margin-right: 10px;
}
.widget.filter .form-check-label input[type=checkbox]:checked .form-check-label {
  color: #013366 !important;
}
.widget.filter .form-check-label:hover {
  color: #013366;
}
.widget.user {
  padding-top: 50px;
}
.widget.user .image img {
  width: 157px;
  height: 157px;
  border-radius: 100%;
  border: 7px solid #dedede;
}
.widget.user h5 {
  font-size: 20px;
  margin-top: 23px;
  font-weight: bold;
  margin-bottom: 10px;
}
.widget .welcome-message h2 {
  font-size: 30px;
  line-height: 54px;
  letter-spacing: 0.05em;
}
.widget .welcome-message p {
  font-size: 14px;
  line-height: 26px;
  letter-spacing: 0;
  color: #848484;
}
.widget.personal-info .form-group, .widget.change-password .form-group, .widget.change-email .form-group {
  margin-bottom: 25px;
}
.widget.personal-info .form-group i, .widget.change-password .form-group i, .widget.change-email .form-group i {
  color: white;
  background: #013366;
  font-size: 25px;
  height: 50px;
  width: 50px;
  line-height: 50px;
  margin-right: 15px;
  border-radius: 100%;
}
@media (max-width: 768px) {
  .widget.personal-info .form-group i, .widget.change-password .form-group i, .widget.change-email .form-group i {
    margin-bottom: 20px;
  }
}
.widget.personal-info .form-check, .widget.change-password .form-check, .widget.change-email .form-check {
  margin-bottom: 25px;
}
.widget.personal-info .form-check .form-check-label input, .widget.change-password .form-check .form-check-label input, .widget.change-email .form-check .form-check-label input {
  margin-right: 7px;
}
.widget.personal-info button, .widget.change-password button, .widget.change-email button {
  margin-top: 5px;
  margin-bottom: 10px;
}
.widget.product-shorting .form-check {
  margin-bottom: 4px;
}
@media (max-width: 768px) {
  .widget.search {
    margin-top: 30px;
  }
}
.widget.search .input-group .form-control {
  border: none;
}
.widget.search .input-group .input-group-addon {
  background: #013366;
  color: #f5f5f5;
  border: none;
}
.widget.search .input-group .input-group-addon i {
  font-size: 15px;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 45px;
  cursor: pointer;
}

.call-to-action .content-holder h2 {
  color: #f5f5f5;
  font-weight: 600;
}
@media (max-width: 400px) {
  .call-to-action .content-holder ul li a {
    font-size: 14px;
    padding: 12px;
  }
}
.call-to-action .content-holder .store-btn-holder {
  margin-top: 35px;
}
@media (max-width: 768px) {
  .call-to-action .content-holder .store-btn-holder {
    margin-top: 25px;
  }
  .call-to-action .content-holder .store-btn-holder a:first-child img {
    margin-bottom: 10px;
  }
}
.call-to-action .content-holder .store-btn-holder a {
  margin-right: 15px;
}

.subscription {
  position: relative;
  padding: 80px 0;
}
.subscription .content-block h2 {
  font-size: 43px;
  letter-spacing: 0.05em;
  text-align: center;
  color: #f5f5f5;
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .subscription .content-block h2 {
    font-size: 30px;
  }
}
.subscription .content-block .form-control {
  display: inline-block;
  background-color: #f5f5f5;
}
.subscription .content-block input {
  width: 69%;
}
.subscription .content-block button {
  margin-left: 10px;
  width: 30%;
}
@media (max-width: 768px) {
  .subscription .content-block button {
    width: auto;
  }
}

.client-slider-03 {
  padding: 30px 0 0 0;
}

.stores {
  padding-bottom: 70px;
  padding-top: 70px;
}
.stores .block {
  margin-bottom: 30px;
}
.stores .block:last-child {
  margin-bottom: 0;
}
.stores .store-letter {
  font-size: 20px;
  margin-bottom: 16px;
}
.stores hr {
  margin-bottom: 25px;
}
.stores ul.store-list li a {
  display: block;
  font-size: 15px;
  color: #666;
  margin-bottom: 25px;
}
.stores ul.store-list li a:hover {
  text-decoration: underline;
  color: #013366;
}

.store-coupon {
  padding: 30px 0;
}
.store-coupon .block {
  padding: 25px 30px 30px;
  background: #f5f5f5;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
  .store-coupon .block .media {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .store-coupon .block .media .image-content {
    flex-grow: 1;
    width: 100%;
    justify-content: center;
    padding-bottom: 30px;
  }
}
.store-coupon .block .media .media-body {
  margin: 0 75px;
}
.store-coupon .block .media .media-body h4 {
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.store-coupon .block .media .media-body ul li {
  font-weight: bold;
  font-size: 17px;
  padding: 0 15px;
  border-right: 1px solid #dedede;
}
.store-coupon .block .media .media-body ul li:last-child {
  border: none;
}
.store-coupon .block .media .media-body ul li a {
  color: #013366;
}
.store-coupon .block .media .media-body p {
  font-size: 14px;
  line-height: 26px;
  color: #848484;
  letter-spacing: 0;
  margin: 20px 0;
}
@media (max-width: 768px) {
  .store-coupon .block .media .media-body {
    flex-grow: 1;
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .store-coupon .block .media .media-body {
    margin: 0;
  }
}
@media (max-width: 768px) {
  .store-coupon .block .social-content {
    flex-grow: 1;
    width: 100%;
    padding-top: 30px;
    text-align: center;
  }
}
.store-coupon .block .social-content ul.social-circle-icons li {
  margin-right: 7px;
}
.store-coupon .block .social-content ul.social-circle-icons li:last-child {
  margin-right: 0;
}
.store-coupon .block .social-content ul.social-circle-icons li a {
  display: block;
  font-size: 15px;
  line-height: 38px;
  color: #013366;
  height: 38px;
  width: 38px;
  border: 2px solid #013366;
  background: #f5f5f5;
  border-radius: 100%;
}
.store-coupon .block .social-content ul.social-circle-icons li a:hover {
  text-decoration: none;
  color: #f5f5f5;
  background: #013366;
}
.store-coupon .block .social-content .share {
  font-size: 15px;
  line-height: 28px;
  color: #848484;
}
@media (max-width: 768px) {
  .store-coupon .block .social-content .share {
    text-align: center !important;
    margin-top: 10px;
  }
}

.store {
  padding: 0 0 80px 0;
}
.store .block .store-nav .nav-item .nav-link {
  font-size: 17px;
  padding: 0 40px 0 0;
  margin-bottom: 15px;
}

article {
  background: #f5f5f5;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 2px;
}
@media (max-width: 768px) {
  article {
    padding: 20px;
  }
}
article .image,
article .video,
article .post-slider {
  margin-bottom: 25px;
}
article img {
  width: 100%;
  border-radius: 3px;
}
article .video {
  position: relative;
}
article .video:before {
  border-radius: 3px;
}
article .video .video-button {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
article .video .video-box span {
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
article .video .video-box span img {
  width: 79px;
}
article .video .video-box span iframe {
  width: 100%;
  height: 100%;
}
article h3 {
  margin-bottom: 5px;
}
article ul {
  margin-bottom: 15px;
}
article ul li {
  margin-right: 10px !important;
  color: #848484;
}
article ul li a {
  color: #013366;
}
article p {
  line-height: 26px;
  color: #848484;
  margin-bottom: 24px;
}
article .btn {
  margin-bottom: 10px;
}

.single-blog {
  padding-top: 50px !important;
}

article.single-post img {
  margin-bottom: 35px;
}
article.single-post p {
  margin-bottom: 35px;
}

.comment {
  background: #f5f5f5;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-bottom: 30px;
  border-radius: 2px;
}
.comment h4 {
  font-size: 20px;
  letter-spacing: 0;
}
.comment button {
  margin: 10px 0;
}

.popup .block-1 {
  padding: 20px 80px;
  background: #F6F8FA;
}
.popup .block-1 .media .img-content {
  height: 80px;
  width: 130px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  margin-right: 20px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}
.popup .block-1 .media .media-body h4 {
  font-size: 24px;
}
.popup .block-2 {
  padding: 50px 80px;
  background: #f5f5f5;
}
.popup .block-2 h6 {
  margin-bottom: 20px;
}
.popup .block-2 p {
  width: 100%;
  text-align: center;
  line-height: 60px;
  text-transform: uppercase;
  background: #f5f5f56f7;
  border: 2px dashed #013366;
  border-radius: 3px;
  margin-bottom: 40px;
}
.popup .block-2 form .form-group label {
  display: block;
  color: #666;
}
.popup .block-2 form .form-group a {
  float: right;
  margin-top: -5px;
}

.advt-post form fieldset input:focus {
  outline: 0;
}
.advt-post form fieldset label {
  margin-bottom: 0;
}
.advt-post .choose-file {
  cursor: pointer;
  display: block;
  border: 3px dashed #eaedef;
}
.advt-post .choose-file .select-files {
  border-radius: 45px;
}
.advt-post textarea {
  height: 200px;
}

.ad-listing-list {
  transition: all linear 0.3s;
}
.ad-listing-list:hover {
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

.product-ratings ul li i {
  font-size: 18px;
  color: #013366;
}

.terms-condition-content p {
  line-height: 30px;
}

.package-content {
  transition: all linear 0.3s;
}
.package-content .package-content-heading i {
  font-size: 50px;
  padding-bottom: 25px;
  color: #013366;
}
.package-content .package-content-heading span {
  font-size: 30px;
}
.package-content ul li i {
  margin-right: 10px;
}
.package-content:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.about-content p {
  line-height: 30px;
}

.counter-content i {
  font-size: 60px;
  color: #013366;
}
.counter-content span {
  font-size: 24px;
}

.contact-us-content h1 {
  font-size: 66px;
}
@media (max-width: 992px) {
  .contact-us-content h1 {
    font-size: 45px;
  }
}
@media (max-width: 768px) {
  .contact-us-content h1 {
    font-size: 40px;
  }
}
@media (max-width: 480px) {
  .contact-us-content h1 {
    font-size: 36px;
  }
}
@media (max-width: 400px) {
  .contact-us-content h1 {
    font-size: 36px;
  }
}

form textarea {
  height: 200px;
}



.scroll-top-to {
  position: fixed;
  right: 20px;
  bottom: 50px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #013366;
  color: #f5f5f5;
  transition: 0.3s;
  z-index: 999556;
  cursor: pointer;
  display: none;
}
.scroll-top-to:hover {
  background: #333;
}
@media (max-width: 768px) {
  .scroll-top-to {
    bottom: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    line-height: 35px;
  }
}
/*# sourceMappingURL=style.css.map */