:root {
    --bg1: #f0eeee;
    --bg2: #fcfcfc;
    /* --default-color: #6ea84c; */
  --button-bg: #34355;
  --cont-bg: #0955;
  --color: #f39224;
  /* --font-family:"Questrial", sans-serif !important; */
  --font-family: "Outfit", sans-serif;
  --color1: #797979;
}
        /* =================================
           DEMO AREA
        ================================= */

 


        .demo-col {
            display: flex;
            flex-direction: column;

            align-items: center;
            justify-content: center;

            /* gap: 15px; */
        }


        /* =================================
           LABEL
        ================================= */

        .demo-label {
            color: rgba(255,255,255,.55);

            font-size: 13px;

            text-align: center;

            line-height: 1.6;
        }

        .demo-label b {
            color: #fff;

            font-weight: 500;
        }


        /* =================================
           MAGNETIC ZONE
        ================================= */

        .mag-zone {
  
            display: flex;

            align-items: center;
            justify-content: center;

            position: relative;


            border: 1px dashed var(--border);

            cursor: pointer;

            /* Important */
            overflow: visible;
        }


        /* =================================
           MAGNETIC BUTTON
        ================================= */
 .mag-btn{
    background-color: var(--color) !important;
    /* color: red !important; */
    width: 100% !important;
    font-size: 16px !important;
    text-align: start !important;
}
     .carousel   .mag-btn {
            border: 1px solid rgba(211, 211, 211, 0.226) !important;
            background-color: rgba(245, 245, 245, 0.082) !important;
            
            backdrop-filter: blur(20px) !important;
            position: relative;
            display: flex;

            align-items: center;
            justify-content: center;

            /* min-width: 150px; */
            /* min-height: 55px; */

            /* padding: 16px 32px; */

            border: none;

            border-radius: 10px !important;

            background: transparent;

            cursor: pointer;

            color: #fff;

            font-size: 15px;

            font-weight: 600;

            overflow: hidden;

            will-change: transform;

            transform: translate3d(0,0,0);

            box-shadow:
                0 10px 25px rgba(0,0,0,.25);
        }


        /* =================================
           BUTTON BACKGROUND
        ================================= */

       .carousel    .mag-btn .bg {

            position: absolute;

            inset: 0;

            z-index: 0;

            border-radius: inherit;

            background:
                linear-gradient(
                    135deg,
                    var(--orange),
                    var(--orange-dark)
                );

            transition:
                box-shadow .3s ease,
                filter .3s ease;
        }


        /* =================================
           BUTTON LABEL
        ================================= */

        .carousel   .mag-btn .label {

            position: relative;

            z-index: 2;

            pointer-events: none;

            color: #fff;

            will-change: transform;
        }


        /* =================================
           HOVER
        ================================= */

     .carousel      .mag-btn:hover .bg {

            filter: brightness(1.08);

            box-shadow:
                0 15px 40px rgba(243,146,36,.35);
        }


      .carousel     .mag-btn:focus {
            outline: none;
        }


        /* =================================
           CODE PEEK
        ================================= */

        .code-peek {

            width: 32px;
            height: 32px;

            border-radius: 8px;

            border: 1px solid var(--border);

            background: var(--color) !important;

            color: rgba(255,255,255,.65);

            cursor: pointer;

            font-size: 14px;

            display: flex;

            align-items: center;
            justify-content: center;

            transition: .25s ease;
        }


        .code-peek:hover {

            color: var(--orange);

            border-color: var(--orange);

            transform: translateY(-2px);
        }


        /* =================================
           MOBILE
        ================================= */

        @media (max-width: 575px) {

            .mag-zone {

                width: 210px;
                height: 210px;
            }

            .mag-btn {

                min-width: 135px;
                min-height: 50px;

                padding: 14px 25px;

                font-size: 13px;
            }

        }

   


        /* === */