﻿ 
        .section {
            background-color: #F4F7F9;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            margin-bottom: 2rem;
            display: block;
        }

       @media (max-width: 768px) {
    .section {
        
        text-align: justify;
    }
}

         .section p {
    color: #000000;
}

        p {
            color: #000000;
        }

        .section-grid {
            /*display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));*/
          
            padding:10px;
        }

           .section-item {
                padding: 1.5rem;
                border-radius: 8px;
                background-color: #ff780712;
                box-shadow: 0 2px 10px rgb(0 0 0 / 28%);
                transition: transform 0.3s ease;
                /* border-bottom: #000; */
                border-bottom: 2px solid #f08832;
                margin-top:5px ;
                margin-bottom:5px;
            }

                /*.section-grid .section-item:hover {
                    transform: translateY(-5px);
                }*/

        .section h2, .section-item h3 {
            font-size: 2rem;
            color: #000e70;
            margin-top: 0;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        .section-item h3 {
            font-size: 1.35rem;
            color: #f76a23;
            margin-bottom: 0.75rem;
        }

        .services ul {
            list-style: none;
            padding: 0;
        }

            .services ul li {
                padding-left: 1.5rem;
                position: relative;
                margin-bottom: 0.75rem;
            }

                .services ul li::before {
                    content: '•';
                    content: '•';
                    color: #f57127;
                    font-size: 2.2rem;
                    font-weight: 700;
                    position: absolute;
                    left: 0;
                }

        .benefits ul li {
            display: flex;
            gap: 10px;
        }

        .why-us ul li {
            display: flex;
            gap: 10px;
        }

            .benefits ul li::before, .why-us ul li::before {
                content: '✔';
                color: #28a745;
            }


        /*.section.process {
            background: #f0f3f6;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 2px 6px rgba(0,0,0,0.1);
        }*/

            .section.process h2 {
                color: #0d1b55;
                margin-bottom: 10px;
                font-size: 1.5rem;
            }

        .process-flow {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .process-step {
            font-weight: bold;
            color: #000;
            padding: 10px 15px;
            text-align: center;
            white-space: nowrap;
        }

        .cta-section {
            text-align: center;
            padding: 3rem 0;
            background-image: linear-gradient(to right, var(--e-button-gradient-1) 0%, var(--e-button-gradient-2) 100%);
            color: #fff;
            border-radius: 10px;
            margin-top: 2rem;
            position: relative;
            z-index: 10;
        }

            .cta-section p {
                font-size: 1.5rem;
                margin-bottom: 1.5rem;
                font-weight: 300;
                color: #fff;
                font-weight: 600;
                text-align: center;
            }

        .cta-button {
            display: inline-block;
            background-color: #fff;
            color: #f96521;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1rem;
            transition: background-color 0.3s, transform 0.3s;
        }

            .cta-button:hover {
                background-color: #010521;
                transform: translateY(-3px);
            }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 2.5rem;
            }

            .process-flow {
                flex-direction: column;
            }

            .process-step:not(:last-child)::after {
                content: '↓';
                right: 50%;
                top: auto;
                bottom: -20px;
                transform: translateX(50%);
            }
        }

        .arrow {
            display: ruby;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 40px; /* container width */
            height: 40px; /* container height */
            margin-top: 15px;
        }

            .arrow span {
                display: block;
                width: 12px;
                height: 12px;
                border-bottom: 2px solid #e67e22;
                border-right: 2px solid #e67e22;
                transform: rotate(-45deg);
                margin: 4px 0; /* proper gap between arrows */
                animation: animate 1.5s infinite;
            }

                .arrow span:nth-child(2) {
                    animation-delay: -0.2s;
                }

                .arrow span:nth-child(3) {
                    animation-delay: -0.4s;
                }

        @keyframes animate {
            0% {
                opacity: 0;
                transform: rotate(-45deg) translate(-6px, -6px);
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
                transform: rotate(-45deg) translate(6px, 6px);
            }

        }

             .modal-content {
            max-width: 500px;
        }

   