/*
    ┌─┐┬ ┬┌─┐┌┬┐┌─┐┌┬┐  ┌┐ ┬ ┬┌┬┐┌┬┐┌─┐┌┐┌┌─┐
    │  │ │└─┐ │ │ ││││  ├┴┐│ │ │  │ │ ││││└─┐
    └─┘└─┘└─┘ ┴ └─┘┴ ┴  └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘
*/


            .custom-btn1 span {
                padding-bottom: 3px;
            }
            .custom-btn1 {
                --btn-width: 216px;
                --btn-height: 42px;
                --btn-font-size: 20px;
            }
            .custom-btn2 {
                --btn-width: 360px;
                --btn-height: 43px;
                --btn-font-size: 20px;
            }
            .custom-btn3 {
                --btn-width: 360px;
                --btn-height: 43px;
                --btn-font-size: 20px;
            }

    @media screen and (max-width: 640px) {
            .custom-btn1 {
                    --btn-width: 162px;
                    --btn-height: 32px;
                    --btn-font-size: 16px;
                }
    }

    @media screen and (max-width: 640px) {
            .custom-btn2 {
                    --btn-width: 270px;
                    --btn-height: 32px;
                    --btn-font-size: 16px;
                }
    }
    
    @media screen and (max-width: 640px) {
            .custom-btn3 {
                    --btn-width: 270px;
                    --btn-height: 32px;
                    --btn-font-size: 16px;

                }
    }


            .custom-btn {
                --slider-width: calc(var(--btn-width) - var(--btn-width) / 5);
                --slider-move: calc(var(--btn-width) - var(--slider-width) );
                --btn-border-radius: 50px;
            }
            .custom-btn {
                position: relative;
                margin: 50px;
            }
            .custom-btn .base {
                position: absolute;
                top: 2px;
                display: flex;
                width: var(--btn-width);
                height: var(--btn-height);
                border: 0px solid #1C8176;
                padding: 0px;
                border-radius: var(--btn-border-radius);
                box-sizing: border-box;
                text-align: center;
                background-color: hsl(173, 64%, 31%);
                box-shadow: 
                    -1px -2px 3px rgba(0, 0, 0, 0.3), /* Inner shadow for depth */
                    1px 2px 3px rgba(255, 255, 255, 0.5); /* Inner highlight */
            }
            .custom-btn .base:hover .slider {
                left: var(--slider-move);
            }
            .custom-btn .base-bottom {
                display: flex;
                justify-content: center;
                text-align: center;
                position: relative;
                width: 100%;
                height: 100%;
                border-radius: var(--btn-border-radius);
                box-shadow: 
                    0px 0px 3px rgba(0, 0, 0, 0.3), /* Inner shadow for depth */
                    2px 2px 3px rgba(255, 255, 255, 0.5), /* Inner highlight */
                    inset 3px 3px 8px rgba(0, 0, 0, 0.3);  /* Outer shadow for overall lift */
                
                opacity: 1;
            }
            .custom-btn .yellow-ins {
                position: absolute;
                width: var(--slider-width); /*150px; */
                height: 100%;
                top: 0px;
                left: 0px;
/*                border: 1px solid hsl(58, 100%, 35%); */
                border-radius: var(--btn-border-radius);
                box-sizing: border-box;
                background: #FFF705;
                box-shadow: inset 0px 0px 8px 0px rgba(0,0,0,0.5);
                opacity: 1;
            }
            .custom-btn .slider {
                position: absolute;
                display: flex;
                width: var(--slider-width); /*150px; */
                top: 0px;
                left: 0px;
                height: 100%;
                justify-content: center;
                text-align: center;
                border-radius: var(--btn-border-radius);
                border-bottom: 1px solid #829595;
                box-sizing: border-box;
/*                 background: linear-gradient(-10deg, #ccc 0%, #eee 100%); */
                background: linear-gradient(180deg, #f1f1f1 0%, #ccc 100%);
                box-shadow: 
                    inset -2px -2px 5px rgba(0, 0, 0, 0.3), /* Inner shadow for depth */
                    inset 2px 2px 5px rgba(255, 255, 255, 0.5), /* Inner highlight */
/*                    3px 3px 8px rgba(0, 0, 0, 0.2); Outer shadow for overall lift */
                    2px 2px 3px 0.5px rgba(0,0,0,0.2); /* Outer shadow for overall lift */
                transition: 0.3s;
                transition-timing-function: cubic-bezier(0, 0.44, 0.38, 0.99); 
                opacity: 1;
            }
            .custom-btn .button-face {
                display: flex;
                width: 100%;    
                justify-content: center;
                text-align: center;
                border-radius: var(--btn-border-radius);
                opacity: 1;
            }
            .custom-btn span {
                align-content: center;
                font-size: var(--btn-font-size);
                line-height: var(--btn-font-size);
                color: #1c8176;
                font-family: 'COOLVETICA',Arial,sans-serif;
                font-weight: 400;
                letter-spacing: 2px;
            }