body {font-size: 16px;}
            .bg-fast-blue {
                background-color: #07b8b8;
            }
            .slider-fixed .swiper-container,
            .slider-fixed .swiper-wrapper,
            .slider-fixed .swiper-slide {
            height: 524px !important;
            }

            .navbar .navbar-nav .nav-link {margin: 0 16px;}
            .list-style-08 li {justify-content: flex-start;}
            .list-style-08 li .label-new, .list-style-08 li .label-hot {background-color: #232323; margin-left: 0px;}
            .text-extra-dark-gray, .text-black{color: #232323 !important;}
            body {color: #232323;}
            
            .feature-box{align-items: start; justify-content: start;}

            .h390{height: 390px;}
            .h350{height: 350px;}

            .bg-transparent-gradient-fast-blue-purple {
                background: #1f9ea1a3;
            }
            

            .feature-box-bg-white-hover:hover {
                background-color: #5b8923;
                border-color: #5b8923 !important;
            }
            
            .text-left{text-align: left !important;}

            .margin-20px-bottom {margin-bottom: 20px !important; margin-bottom: 20px;}

            .before-after {
                position: relative;
                width: 100%;
                max-width: 100%;
                min-height: 50vh;
                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            }

            .before-after .img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .before-after .img.front-img {
                z-index: 1;
                /* Crop half of the front image */
                clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
            }

            .slider {
                -webkit-appearance: none;
                -moz-appearance: none;
                position: absolute;
                width: 100%;
                height: 100%;
                background: transparent;
                z-index: 2;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            /* 
            SEPERATE -webkit-slider-thumb AND -moz-range-thumb FOR CHROME AND FIREFOX, OTHERWISE RANGE INPUT CUSTOM STYLES DON'T WORK 
            */

            .slider::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 7px;
                min-height: 50vh;
                cursor: pointer;
                background-color: white;
                border: 1px solid #c2c2c2;
                border-radius: 0;
            }

            .slider::-moz-range-thumb {
                -moz-appearance: none;
                width: 7px;
                min-height: 50vh;
                cursor: pointer;
                background-color: white;
                border: 1px solid #c2c2c2;
                border-radius: 0;
            }

             /* 
            22222222222222
            */

            .before-after2 {
                position: relative;
                width: 100%;
                max-width: 100%;
                min-height: 50vh;
                box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
            }

            .before-after2 .img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .before-after2 .img.front-img2 {
                z-index: 1;
                /* Crop half of the front image */
                clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
            }

            .slider2 {
                -webkit-appearance: none;
                -moz-appearance: none;
                position: absolute;
                width: 100%;
                height: 100%;
                background: transparent;
                z-index: 2;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            /* 
            SEPERATE -webkit-slider-thumb AND -moz-range-thumb FOR CHROME AND FIREFOX, OTHERWISE RANGE INPUT CUSTOM STYLES DON'T WORK 
            */

            .slider2::-webkit-slider-thumb {
                -webkit-appearance: none;
                width: 7px;
                min-height: 50vh;
                cursor: pointer;
                background-color: white;
                border: 1px solid #c2c2c2;
                border-radius: 0;
            }

            .slider2::-moz-range-thumb {
                -moz-appearance: none;
                width: 7px;
                min-height: 50vh;
                cursor: pointer;
                background-color: white;
                border: 1px solid #c2c2c2;
                border-radius: 0;
            }

            .h360{
                height: 360px;
                min-height: 360px;
            }

            .h420{
                height: 420px;
                min-height: 420px;
            }

            .h460{
                height: 460px;
                min-height: 460px;
            }

            .bg-extra-dark-gray {
                background-color: #6e6f74;
            }

             /* Fondo degradado animado (usa tus tamaños por defecto) */
            .backgradient {                    
                background: linear-gradient(-90deg, #1ea1a1, #558a3d, #558a3d, #1ea1a1);
                background-size: 400% 400%;
                animation: gradientBG 12s ease infinite;
                position: relative;
                overflow: hidden;
            }

             @keyframes gradientBG {
                0% {background-position: 0% 50%;}
                50% {background-position: 100% 50%;}
                100% {background-position: 0% 50%;}
            }

            :root{
        --fab-gold: #466b1c;   /* tono dorado del botón */
        --fab-gold-darker:#1f640e;  /* hover */
        --fab-outer:#fff;        /* anillo exterior */
        --fab-shadow: 0 8px 24px rgba(0,0,0,.18);
      }

      /* Contenedor principal */
      .fab-wrap{
        position: fixed;
        inset: auto 18px 18px auto; /* bottom-right */
        z-index: 1056; /* por encima del offcanvas/modal backdrop de Bootstrap */
        display: grid;
        gap: 12px;
        align-items: end;
        justify-items: end;
      }

      /* Overlay que oscurece el fondo cuando está abierto */
      .fab-overlay{
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
      }
      .fab-wrap.open ~ .fab-overlay{ /* hermano siguiente en el DOM */
        opacity: 1;
        pointer-events: auto;
        backdrop-filter: blur(2px);
      }

      /* Botón base (círculo) */
      .fab-btn{
        width: 75px;
        height: 75px;
        border: 0;
        border-radius: 50%;
        background: radial-gradient(closest-side, var(--fab-gold) 80%, var(--fab-outer) 90%);
        box-shadow: var(--fab-shadow);
        display: grid; place-items:center;
        cursor: pointer;
        transition: transform .18s ease, filter .18s ease;
      }
      .fab-btn:hover{ filter: brightness(1.03); }
      .fab-btn:active{ transform: scale(.98); }

      .fab-icon{ width: 34px; height: 34px; fill: #fff; }

      /* Botón de cierre (X grande) */
      .fab-close{
        width: 72px; height: 72px;
        background: radial-gradient(closest-side, #d9d9d9 75%, #ececec 76%);
      }
      .fab-close svg{ width: 30px; height: 30px; }

      /* Botones del menú (items) */
      .fab-item{
        width: 75px; height: 75px;
        border-radius: 50%;
        border: none;
        background: var(--fab-gold);
        box-shadow: var(--fab-shadow);
        display: grid; place-items: center;
        opacity: 0; transform: translateY(8px) scale(.96);
        pointer-events: none;
        transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .25s ease;
      }
      .fab-item:hover{ background: var(--fab-gold-darker); }

      /* Stagger al abrir */
      .fab-wrap.open .fab-item{
        opacity: 1; transform: translateY(0) scale(1);
        pointer-events: auto;
      }
      .fab-wrap.open .fab-item:nth-child(1){ transition-delay: 40ms; }
      .fab-wrap.open .fab-item:nth-child(2){ transition-delay: 90ms; }
      .fab-wrap.open .fab-item:nth-child(3){ transition-delay: 140ms; }

      /* Rotación del botón principal cuando se abre (cambia a X si usas la misma pieza) */
      .fab-main{ position: relative; }
      .fab-main .icon-open{ transition: transform .25s ease, opacity .2s ease; }
      .fab-main .icon-close{ position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform: rotate(-90deg) scale(.6); }
      .fab-wrap.open .fab-main .icon-open{ opacity:0; transform: rotate(90deg) scale(.6); }
      .fab-wrap.open .fab-main .icon-close{ opacity:1; transform: rotate(0) scale(1); }

      /* Tooltips sutiles opcionales */
      .fab-label{
        position:absolute; right: 84px; /* a la izquierda del círculo */
        background: rgba(0,0,0,.72); color:#fff; font-size:.825rem;
        padding: .35rem .6rem; border-radius: .5rem; white-space: nowrap;
        opacity: 0; transform: translateX(6px);
        transition: opacity .2s ease, transform .2s ease;
        pointer-events: none;
        bottom: 15%;
      }
      .fab-item-wrap{ position: relative; }
      .fab-item-wrap:hover .fab-label{ opacity: 1; transform: translateX(0); }

      /* Soporte modo reducido (accesibilidad) */
      @media (prefers-reduced-motion: reduce){
        .fab-item, .fab-btn, .fab-overlay{ transition: none !important; }
      }

            /* ==============================
            Phone
            ============================== */
            @media (max-width: 480px) and (min-width: 320px){
                .fab-overlay{z-index: 9;}
                .feature-box{height: auto !important; margin-bottom: 20px !important;}

                .h390{height: auto !important;}
                .h350{height: auto !important;}

                .h360{
                    height: auto !important;
                    min-height: auto !important;
                }

                .h420{
                    height: auto !important;
                    min-height: auto !important;
                }

                .h460{
                    height: auto !important;
                    min-height: auto !important;
                }

                .bp10{background-position:10% 50% !important;}

                .topslide{font-size: 16px !important; margin-bottom: 0;}
                .titleslide{font-size: 28px !important; margin-bottom: 0;}
                .bottomslide{font-size: 16px !important; }


            }