/* =========================================================
   RESPONSIVE GENERAL - INKTEK
   Todo el responsive de la página está aquí
   ========================================================= */


/* =========================================================
   TABLETS / PANTALLAS MEDIANAS
   <= 991px
   ========================================================= */

@media (max-width: 991px) {

    /* -------------------------
       SUMINISTROS DIGITALES
       ------------------------- */

    .feature {
        padding: 120px 0;
    }

    .info-suministros {
        margin-bottom: 40px;
    }

    .info-suministros h3 {
        font-size: 28px;
    }


    /* -------------------------
       CONTACTO
       ------------------------- */

    .contact {
        padding: 140px 0;
    }


    /* -------------------------
       PRODUCTOS
       ------------------------- */

    .pricing {
        padding: 140px 0;
    }


    /* -------------------------
       FOOTER
       ------------------------- */

    .footer {
        padding-top: 70px;
    }

}


/* =========================================================
   CELULARES / TABLETS PEQUEÑAS
   <= 768px
   ========================================================= */

@media (max-width: 768px) {


    /* =====================================================
       HERO / SLIDER
       ===================================================== */

    .hero-area-index {

        padding: 90px 0 90px;

        min-height: 720px;

    }


    /*
       Cada slide tendrá suficiente altura para colocar
       imagen + cuadro de texto sin que uno tape al otro.
    */

    .hero-area-index .carousel-item {

        min-height: 620px;

        height: 620px;

        overflow: hidden;

    }


    /* -------------------------
       IMAGEN DEL SLIDER
       ------------------------- */

    .hero-area-index .carousel-item img {

        position: absolute;

        top: 35px;
        right: 5%;

        transform: none;

        width: 90%;
        max-width: 90%;

        height: auto;

        max-height: 48%;

        object-fit: contain;

        z-index: 5;

    }


    /* -------------------------
       CUADRO DE TEXTO DEL SLIDER
       ------------------------- */

    .hero-area-index .carousel-caption {

        display: block !important;

        visibility: visible !important;

        opacity: 1 !important;

        position: absolute;

        left: 5%;
        right: 5%;

        top: auto;

        bottom: 55px;

        transform: none;

        width: 90%;

        max-width: 420px;

        margin: 0 auto;

        padding: 22px 24px;

        text-align: left;

        background: rgba(0, 153, 102, 0.90);

        border-radius: 12px;

        z-index: 30;

    }


    .hero-area-index .carousel-caption h5 {

        font-size: 27px;

        line-height: 1.15;

        margin-bottom: 12px;

    }


    .hero-area-index .carousel-caption p {

        font-size: 15px;

        line-height: 1.5;

        margin-bottom: 12px;

    }


    /* -------------------------
       BOTÓN DEL SLIDER
       ------------------------- */

    .hero-area-index .carousel-caption .mybtn1 {

        font-size: 14px;

        padding: 10px 20px;

    }


    /* -------------------------
       FLECHAS DEL SLIDER
       ------------------------- */

    .hero-area-index .carousel-control-prev,
    .hero-area-index .carousel-control-next {

        width: 45px;

        z-index: 35;

    }

    .hero-area-index .carousel-control-prev {
        left: 5px;
    }

    .hero-area-index .carousel-control-next {
        right: 5px;
    }


    /* =====================================================
       BADGE "OFERTA ESPECIAL"
       ===================================================== */

    .hero-area-index .discount-circle {

        left: 5%;

        top: 8%;

        width: 90px;

        height: 90px;

        z-index: 40;

    }


    .hero-area-index .discount-circle-inner {

        width: 74px;

        height: 74px;

    }


    .hero-area-index .discount-circle .price {

        font-size: 12px;

        line-height: 1.1;

    }


    .hero-area-index .discount-circle .price span {

        font-size: 14px;

    }


    /* =====================================================
       CURVAS SVG
       ===================================================== */

    /* Productos */

    .pricing .section-wave {

        height: 70px;

    }


    /* Suministros */

    .feature .section-wave {

        height: 70px;

    }


    /* Contacto - triangular */

    .contact .contact-wave-top {

        height: 70px;

    }


    /* =====================================================
       PRODUCTOS DESTACADOS
       ===================================================== */

    .pricing {

        padding: 120px 0;

    }


    .pricing .single-product .img {

        height: 200px;

    }


    .pricing .single-product .img img {

        max-height: 165px;

    }


    .pricing .single-product .content {

        padding: 18px;

    }


    /* =====================================================
       SUMINISTROS DIGITALES
       ===================================================== */

    .feature {

        padding: 100px 0;

    }


    .info-suministros {

        padding: 30px;

    }


    .info-suministros h3 {

        font-size: 24px;

    }


    .info-suministros p {

        font-size: 16px;

        line-height: 28px;

    }


    .categoria-card {

        margin-bottom: 25px;

    }


    /* =====================================================
       TÍTULOS GENERALES
       ===================================================== */

    .section-title .title {

        font-size: 28px;

        line-height: 36px;

    }


    /* =====================================================
       VIDEO
       ===================================================== */

    .video .video-wrapper .video-box {

        padding: 100px 0;

    }


    /* =====================================================
       NAVBAR
       ===================================================== */

    .navigation .navbar .navbar-brand img {

        max-width: 120px;

    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer .footer-info-area .text p {

        font-size: 14px;

    }

}


/* =========================================================
   CELULARES PEQUEÑOS
   <= 480px
   ========================================================= */

@media (max-width: 480px) {


    /* =====================================================
       HERO
       ===================================================== */

    .hero-area-index {

        padding: 80px 0 70px;

        min-height: 680px;

    }


    .hero-area-index .carousel-item {

        min-height: 590px;

        height: 590px;

    }


    /* -------------------------
       IMAGEN
       ------------------------- */

    .hero-area-index .carousel-item img {

        top: 30px;

        right: 5%;

        width: 90%;

        max-width: 90%;

        max-height: 42%;

    }


    /* -------------------------
       TEXTO
       ------------------------- */

    .hero-area-index .carousel-caption {

        left: 4%;

        right: 4%;

        bottom: 45px;

        width: 92%;

        max-width: none;

        padding: 18px 20px;

    }


    .hero-area-index .carousel-caption h5 {

        font-size: 23px;

        line-height: 1.15;

    }


    .hero-area-index .carousel-caption p {

        font-size: 14px;

    }


    /* -------------------------
       OFERTA
       ------------------------- */

    .hero-area-index .discount-circle {

        left: 4%;

        top: 6%;

        width: 75px;

        height: 75px;

    }


    .hero-area-index .discount-circle-inner {

        width: 62px;

        height: 62px;

        border-width: 2px;

    }


    .hero-area-index .discount-circle .price {

        font-size: 10px;

    }


    .hero-area-index .discount-circle .price span {

        font-size: 12px;

    }


    /* =====================================================
       CURVAS
       ===================================================== */

    .pricing .section-wave,
    .feature .section-wave {

        height: 55px;

    }


    .contact .contact-wave-top {

        height: 55px;

    }


    /* =====================================================
       PRODUCTOS
       ===================================================== */

    .pricing {

        padding: 100px 0;

    }


    .pricing .single-product .img {

        height: 180px;

    }


    .pricing .single-product .img img {

        max-height: 150px;

    }


    /* =====================================================
       SUMINISTROS
       ===================================================== */

    .feature {

        padding: 90px 0;

    }


    .info-suministros {

        padding: 25px;

    }


    .info-suministros h3 {

        font-size: 22px;

    }


    .info-suministros p {

        font-size: 15px;

        line-height: 25px;

    }


    /* =====================================================
       CONTACTO
       ===================================================== */

    .contact {

        padding: 100px 0;

    }


    .contact .contact-form-wrapper {

        padding: 25px;

    }


    .contact .info-box {

        padding: 25px;

    }


    .contact .google_map_wrapper iframe {

        height: 320px;

    }


    /* =====================================================
       TÍTULOS
       ===================================================== */

    .section-title .title {

        font-size: 24px;

        line-height: 32px;

    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer {

        padding-top: 60px;

    }

}
/* =========================================================
   RESPONSIVE productos
========================================================= */

@media (max-width: 991px) {

    .products-hero {
        margin-bottom: 60px;
    }

    .products-toolbar {
        flex-direction: column;

        align-items: stretch;
    }

    .products-toolbar-left {
        justify-content: space-between;
    }

    .products-sort {
        width: 100%;
    }

    .products-sort-select {
        flex: 1;
    }

}


@media (max-width: 767px) {

    .products-hero {
        margin-bottom: 45px;
    }

    .products-section {
        padding: 50px 0 80px;
    }

    .products-toolbar {
        padding: 16px;
    }

    .products-toolbar-left {
        flex-direction: column;

        align-items: stretch;
    }

    .products-sort {
        flex-direction: column;

        align-items: stretch;

        gap: 7px;
    }

    .products-sort-select {
        width: 100%;
    }

    .store-product-image {
        height: 220px;
    }

    .store-product-content {
        padding: 18px;
    }

}