:root{
            --green:#00e65a;
            --dark-green:#3c7c2d;
            --black:#151515;
            --gray:#f5f5f5;
        }

        body{
            background:#efefef;
            font-family: Arial, Helvetica, sans-serif;
        }

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

        /* =========================
           LEFT IMAGE SECTION
        ========================== */

        .workflow-image img{
            width:100%;
            max-width:650px;
        }

        /* =========================
           RIGHT CLIPBOARD DESIGN
        ========================== */

        .clipboard-wrapper{
            position:relative;
            max-width:430px;
            margin:auto;
        }

        .clipboard-paper{

                position: relative;
    background: #fff;
    border: 3px solid var(--black);
    /* min-height: 563px; */
    padding: 70px 17px 0px;
    border-radius: 10px 10px 30px 20px / 10px 10px 25px 20px;
    transform: rotate(-1deg);
    box-shadow: 12px 14px 0 rgba(0, 0, 0, 0.08);
    overflow: visible;
        }

        /* OUTER SHADOW PAPER */
        .clipboard-paper::after{
            content:"";
            position:absolute;
            inset:12px -10px -12px 10px;
            border:3px solid rgba(0,0,0,0.07);
            border-radius:
            10px 10px 30px 20px /
            10px 10px 25px 20px;
            z-index:-1;
        }

        /* =========================
           TOP CLIP
        ========================== */

        .clip-top{
          position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 80px;
    background: var(--green);
    border: 3px solid var(--black);
    border-radius: 6px 6px 0 0;
    z-index: 5;
        }

        .clip-inner{
               border-radius: 5px;
               border: 3px solid black;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 50px;
    background: #ffffff;
        }

        /* =========================
           GREEN RIBBON
        ========================== */

        .ribbon-banner{

            position:absolute;

            top:70px;
            left:-18px;

            width:calc(100% + 35px);

            background:var(--green);

            border:3px solid var(--black);

            transform:rotate(-1.8deg);

            padding:18px 20px;

            box-shadow:4px 5px 0 rgba(0,0,0,0.18);

            z-index:3;
        }

        /* Ribbon Fold */
        .ribbon-banner::after{
            content:"";
            position:absolute;
            bottom:-16px;
            left:0;
            border-top:16px solid var(--dark-green);
            border-left:16px solid transparent;
        }

        .ribbon-banner h2{
            font-size:25px;
            color:#fff;
            font-weight:800;
            margin:0;
            text-transform:uppercase;
            line-height:1.2;
        }

        .ribbon-banner .blue-bg{
            padding:2px 5px;
        }

        /* =========================
           CHECKLIST
        ========================== */

        .checklist-area{
            margin-top:110px;
        }

        .custom-list{
            list-style:none;
            padding:0;
            margin:0;
        }

        .custom-list li{
            display:flex;
            align-items:flex-start;
            gap:15px;
            margin-bottom:20px;
            color:#404040;
            font-size:18px;
            line-height:1.5;
        }

        .custom-list i{
            color:#52b34d;
            font-size:31px;
            flex-shrink:0;
            margin-top:-3px;
        }

        .custom-list b{
            font-weight:800;
        }

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

        @media (max-width:767px){

            .workflow-image{
                text-align:center;
                margin-bottom:50px;
            }

            .clipboard-wrapper{
                {{-- max-width:100%; --}}
                max-width: 85% !important;
            }

            .clipboard-paper{
                min-height:auto;
            }
            .checklist-area{
                margin-top: 75px !important;
            }

        }

        @media (max-width:767px){

            .sm-main-section{
                padding:40px 0;
            }

            .clipboard-paper{
                padding:90px 22px 35px;
            }

            .ribbon-banner{
                left:-10px;
                width:calc(100% + 18px);
                padding:14px;
            }

            .ribbon-banner h2{
                font-size:17px !important;
            }

            .custom-list li{
                font-size:13px;
                margin-bottom:15px;
            }

            .custom-list i{
                font-size:26px;
            }

            .clip-top{
                width:250px;
                height:80px;
            }

            .clip-inner{
                       width: 170px;
        height: 50px;
    }
            }

        }