.category-section {
            text-align: center;
            padding: 80px 0px;
            position: relative;
            background: #c9dfe8;
            z-index: 1;
            overflow: hidden;
        }

    
        .category-section h2 {
            font-size: 28px;
            color: #0a3148;
            font-weight: 700;
            padding: 0px 15px;
            background: #c9dfe8;
            position: absolute;
            top: 55px; 
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            margin: 0;
            white-space: nowrap;
        }

        .category-section .category-box {
            width: 85%;
            margin: auto;
            padding: 50px 0px;
            background: #c9dfe8;
            border: 3px solid #2c6f7d;
            border-radius: 40px;
            position: relative;
        }

        /* Arrows Logic */
        .arrow-btn-left, .arrow-btn-right {
            width: 45px;
            height: 45px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: #0d627a;
            border: none;
            color: rgb(255, 252, 252);
            border-radius: 50%;
            cursor: pointer;
            z-index: 10;
        }
        .arrow-btn-left { left: -25px; }
        .arrow-btn-right { right: -25px; }

        /* Card & Circle Logic */
        .card-s { text-align: center; display: flex; flex-direction: column; align-items: center; }

        .circle {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #fff;
        }

        .circle1 {
            width: 100%;
            height: 100%;
            border: 2px dashed #b28de9;
            border-radius: 50%;
            position: absolute;
            animation: aaa 10s linear infinite;
            box-sizing: border-box;
        }

        .circle img {
            width: auto !important;
            max-width: 95%;
            height: 150px;
            object-fit: contain;
        }

        @keyframes aaa { 100% { transform: rotate(360deg); } }

        .badge {
            position: absolute;
            top: 5px;
            right: 5px;
            background: #093e53;
            color: white;
            padding: 8px;
            border-radius: 50%;
            font-size: 12px;
        }

        .title { margin-top: 15px; font-weight: 600; color: #08384c; }

        /* --- 530px theke 320px er Fixes --- */
        @media (max-width: 530px) {
            .category-section { padding: 60px 0; }
            
            .category-section h2 { 
                font-size: 20px; 
                top: 45px; 
            }

            .category-section .category-box {
                width: 92%; 
                padding: 40px 5px;
                border-radius: 25px;
                border-width: 2px;
            }

            /* 530px-320px er moddhe circle size choto kora hoyeche jate bhenge na jay */
            .circle {
                width: 200px;
                height: 200px;
            }

            .circle img {
                height: 70px;
            }

        }

        @media (max-width: 360px) {
            .circle {
                width: 200px;
                height: 200px;
            }
            .category-section h2 { font-size: 18px; }
        }