PageSourceSearch

https://shushilan.org/

html shushilan.org collected 2026-10-05 18:08:17 UTC 66,393 bytes, 1,466 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <meta name="csrf-token" content="tY4bdjBAxaDoSxuubqwuhc1hJnMLyEUBvwCvM8Ud">
8    <title>Shushilan</title>
9    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
10<link rel="shortcut icon" href="http://shushilan.org/assets/images/logo-small.png"  type='image/x-icon'>
11<link rel="stylesheet" href="http://shushilan.org/assets/css/bootstrap.min.css">
12<link rel="stylesheet" href="http://shushilan.org/assets/css/custom.css">
13<script src="https://cdn.tiny.cloud/1/vs2myiaiihwmfk0qdqjt9tamy9wmg0cjmwvzlmygt6mhjt0p/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
vendor: 2 bytes, line 13
13
14<script src="http://shushilan.org/assets/js/tinymce.js"></script>
14
15</head>
16<body>
17    <div class="container-fluid m-0">
18    <div class="row bg-success text-light p-1">
19        <div class="col-sm-12 col-md-6 col-lg-8 m-0">
20            <strong>
21            <address class="p-1 m-0 address"><i class='bx bx-map'></i> Address: Shushilan, House # 155,
22                KDA Jalil Sharoni,
23                Commercial cum Residential Area,
24                Rayermohol,
25                Boyra, Khulna 9000,
26                Bangladesh.
27            </address>
28            </strong>
29        </div>
30        <style>
31            .address{
32                font-size: 14px
33            }
34            /*.text-center {*/
35            /*    text-align: center !important;*/
36            /*    display: flex;*/
37            /*    align-items: center;*/
38            /*    justify-content: space-between;*/
39            /*}*/
40        </style>
41        <div class="col-sm-12 col-md-6 col-lg-4 text-center text-md-end m-0">
42            <a href="tel:+8801915319448" class="text-warning p-1 phone"> <i class='bx bxs-phone-call'></i> 
43            <strong>+880 1915 319448</strong></a>
44            
45            <a href="https://staffcorner.shushilan.org/login.php"
46               class="text-light p-1"
47               target="_blank"
48               rel="noopener noreferrer">
49              <i class='bx bxs-user-detail'></i>
50              Staff Corner
51            </a>
52            
53            <!-- Authentication Links -->
54                                            <a href="https://shushilan.org/login" class="text-light mx-3 floatEnd margin-0 d-none d-md-inline-block"><i class='bx bxs-user mx-1'></i>Login</a>
55                                <!---->
56                <!--    <a href="https://shushilan.org/register" class="text-light floatEnd"> <i class='bx bxs-user-plus'></i> Register</a>-->
57                <!---->
58                    </div>
59    </div>
60</div>    
60<script>
61    document.addEventListener('DOMContentLoaded', function () {
62        var navbar = document.querySelector('.stickly');
63        var triggerPosition = 100; // Adjust this value based on your layout
64
65        function toggleSticky() {
66            var scrollPosition = window.scrollY;
67
68            if (scrollPosition > triggerPosition) {
69                navbar.classList.add('sticky');
70            } else {
71                navbar.classList.remove('sticky');
72            }
73        }
74
75        window.addEventListener('scroll', toggleSticky);
76        toggleSticky(); // Call initially to set the initial state
77    });
78
79    // Dropdown menu on hover (desktop only, mobile-এ click-ই থাকবে)
80    document.addEventListener('DOMContentLoaded', function () {
81        var isDesktop = window.matchMedia('(min-width: 768px)');
82
83        document.querySelectorAll('.navbar .dropdown').forEach(function (dropdown) {
84            var toggle = dropdown.querySelector('[data-bs-toggle="dropdown"]');
85            var bsDropdown = new bootstrap.Dropdown(toggle);
86            var hideTimeout;
87
88            dropdown.addEventListener('mouseenter', function () {
89                if (!isDesktop.matches) return;
90                clearTimeout(hideTimeout);
91                bsDropdown.show();
92            });
93
94            dropdown.addEventListener('mouseleave', function () {
95                if (!isDesktop.matches) return;
96                hideTimeout = setTimeout(function () {
97                    bsDropdown.hide();
98                }, 150);
99            });
100        });
101    });
102</script>
102
103<style>
104    @media only screen and (min-width: 200px) and (max-width: 478px)
105    {
106        .menuLogo {
107            content: url('http://shushilan.org/assets/images/logo-white.png');
108        }
109
110    }
111    @media only screen and (min-width: 768px) and (max-width: 1399px)
112    {
113        #navbarSupportedContent ul li{
114            letter-spacing:-.5px;
115        }
116
117    }
118
119    /* =====================================================
120       Theme tokens — deep forest green (brand) + warm brass
121       accent used only as the hover/active marker.
122    ===================================================== */
123    :root{
124        --nav-link-color: #1f5c3f;
125        --nav-link-hover-color: #12402a;
126        --nav-link-hover-bg: rgba(31, 92, 63, .08);
127        --nav-active-color: #12402a;
128        --nav-accent: #c8933f;
129        --dropdown-hover-bg: rgba(31, 92, 63, .06);
130    }
131
132    /* navbar-dark + bg-light together leave the default (light-colored)
133       toggler icon almost invisible on mobile. Draw it explicitly. */
134    .navbar.bg-light .navbar-toggler-icon{
135        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(31,92,63,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
136    }
137    .navbar .navbar-toggler{
138        border-color: rgba(31, 92, 63, .25);
139    }
140    .navbar .navbar-toggler:focus{
141        box-shadow: 0 0 0 .2rem rgba(31, 92, 63, .25);
142    }
143
144    .navbar-brand img{
145        transition: transform .2s ease;
146    }
147    .navbar-brand:hover img{
148        transform: scale(1.03);
149    }
150
151    /* ---------- top-level links ---------- */
152    .navbar .navbar-nav{
153        gap: 2px;
154    }
155
156    /* nudge the whole menu a bit further right, past what ms-auto gives it
157       (desktop only — on mobile the menu is full-width and stacked, so a
158       negative right margin there would just clip content) */
159    @media (min-width: 768px){
160        .navbar .navbar-nav.ms-auto{
161            margin-right: -14px;
162        }
163    }
164
165    .navbar .nav-link{
166        position: relative;
167        display: flex;
168        align-items: center;
169        gap: 5px;
170        color: black;
171        font-weight: 500;
172        font-size: .90rem;
173        padding: .6rem .8rem !important;
174        border-radius: 6px;
175        transition: color .2s ease, background-color .2s ease;
176    }
177
178    .navbar .nav-link i{
179        font-size: .90rem;
180        line-height: 1;
181    }
182
183    .navbar .nav-link:hover,
184    .navbar .nav-link:focus{
185        color: var(--nav-link-hover-color) !important;
186        background-color: var(--nav-link-hover-bg);
187    }
188
189    .navbar .nav-link.active{
190        color: var(--nav-active-color) !important;
191        font-weight: 700;
192        font-size: .90rem;
193        background-color: var(--nav-link-hover-bg);
194    }
195
196    /* animated accent underline — shown on hover, held on the active item.
197       IMPORTANT: this uses ::before, NOT ::after.
198       Bootstrap's .dropdown-toggle caret arrow is itself drawn with ::after,
199       so if this underline also used ::after on the same <a>, the two would
200       fight over the same pseudo-element and the caret would get overridden
201       (permanently for .active items, and on :hover for the rest). Using
202       ::before keeps the underline completely separate from the caret. */
203    .navbar .nav-link.active::before,
204    .navbar .nav-link:hover::before{
205        content: "";
206        position: absolute;
207        left: 14px;
208        right: 14px;
209        bottom: 4px;
210        height: 2px;
211        border-radius: 2px;
212        background-color: var(--nav-accent);
213    }
214
215    /* ---------- dropdown items ---------- */
216    .navbar .dropdown-item{
217        color: blue;
218        font-size: .90rem;
219        padding: 7px 14px;
220        border-radius: 6px;
221        transition: background-color .15s ease, padding-left .15s ease, color .15s ease;
222    }
223
224    .navbar .dropdown-item:hover,
225    .navbar .dropdown-item:focus{
226        background-color: var(--dropdown-hover-bg);
227        color: var(--nav-active-color);
228        padding-left: 20px;
229    }
230
231    .navbar .dropdown-item.active{
232        background-color: var(--nav-link-hover-bg);
233        color: var(--nav-active-color);
234        font-weight: 600;
235    }
236
237    /* ---------- dropdown panel (desktop only — mobile keeps Bootstrap's
238       native static/collapsed behaviour so nothing breaks in the
239       collapsed menu) ---------- */
240    @media (min-width: 768px){
241        .navbar .dropdown-menu{
242            border: none;
243            border-radius: 10px;
244            box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
245            padding: 8px;
246            margin-top: 10px;
247            min-width: 230px;
248            display: block;
249            opacity: 0;
250            visibility: hidden;
251            transform: translateY(8px);
252            transition: opacity .18s ease, transform .18s ease, visibility .18s;
253        }
254
255        .navbar .dropdown-menu.show{
256            opacity: 1;
257            visibility: visible;
258            transform: translateY(0);
259        }
260    }
261
262    @media (max-width: 767.98px){
263        .navbar .dropdown-menu{
264            border-left: 2px solid var(--nav-link-hover-bg);
265            margin-left: 8px;
266        }
267    }
268</style>
269
270
271<nav class="navbar navbar-expand-md navbar-dark bg-light shadow-sm p-0 stickly bg-mobile">
272    <div class="container">
273        <a class="navbar-brand" href="https://shushilan.org">
274           <img src="http://shushilan.org/assets/images/logo.png" alt=" Shushilan" class="menuLogo">
275        </a>
276        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
277            <span class="navbar-toggler-icon"></span>
278        </button>
279
280        <div class="collapse navbar-collapse" id="navbarSupportedContent">
281
282            <ul class="navbar-nav ms-auto">
283                <li class="nav-item">
284                    <a class="nav-link active" href="/"  aria-current="page" >
285                        <i class='bx bxs-home'></i>Home
286                    </a>
287                </li>
288                <li class="nav-item dropdown">
289                    <a class="nav-link dropdown-toggle " href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
290                        <i class='bx bxs-book-content'></i>About Us
291                    </a>
292                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
293                        <li><a class="dropdown-item " href="/about-us/shushilan-glance">Shushilan at a Glance</a></li>
294                        <li><a class="dropdown-item " href="/about-us/senior-person-list">Senior Management Team</a></li>
295                        <li><a class="dropdown-item " href="/about-us/registration">Registration</a></li>
296                        <li><a class="dropdown-item " href="/about-us/vision-mission">Vision & Mission</a></li>
297                        <li><a class="dropdown-item " href="/policy">List of Policy</a></li>
298                        <!--<li><a class="dropdown-item " href="/guidelines">List of Guideline</a></li>-->
299                        <li><a class="dropdown-item " href="/about-us/executive-committee">Executive Committee</a></li>
300
301                        <li><a class="dropdown-item " href="/about-us/organogram">Organogram</a></li>
302                        <!--<li><a class="dropdown-item" href="/about-us/organization-profile">Organization Profile</a></li>-->
303                        <li><a class="dropdown-item" href="http://shushilan.org/assets/pdf/Organizational Profile_Shushilan.pdf">Organization Profile</a></li>
304                        <!--<li><a class="dropdown-item" href="/about-us/brochure">Brochure</a></li>-->
305                        <li><a class="dropdown-item" href="http://shushilan.org/assets/pdf/Shushilan Brochure.pdf">Brochure</a></li>
306                        <!--<li><a class="dropdown-item" href="/about-us/office-list">Office List</a></li>-->
307                         <li><a class="dropdown-item" href="http://shushilan.org/assets/pdf/Present office list.pdf">Office List</a></li>
308                    </ul>
309                </li>
310                <li class="nav-item">
311                    <a class="nav-link " href="/governance" >
312                        <i class='bx bx-grid'></i>Governance
313                    </a>
314                </li>
315                <!--<li class="nav-item dropdown policyAndGuideline">-->
316                <!--    <a class="nav-link text-success hover-danger dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">-->
317                <!--        <i class='bx bx-task'></i>Policy & Guideline-->
318                <!--    </a>-->
319                <!--    <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">-->
320                <!--        <li><a class="dropdown-item" href="/policy">Policy</a></li>-->
321                <!--        <li><a class="dropdown-item" href="/guidelines">Guideline</a></li>-->
322                <!--    </ul>-->
323                <!--</li>-->
324                <li class="nav-item">
325                    
326                    <a class="nav-link" href="/">
326<i class='bx bxs-map-pin'></i>Geographical Location </a>
327                </li>
328
329                <li class="nav-item dropdown">
330                    <a class="nav-link dropdown-toggle " href="#" id="navbarDropdown3" role="button" data-bs-toggle="dropdown" aria-expanded="false">
331                        <i class='bx bxs-business'></i> Program
332                    </a>
333                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown3">
334                        <li><a class="dropdown-item " href="/projects/running">Running Project List</a></li>
335                        <li><a class="dropdown-item " href="/projects/total">Total Project List</a></li>
336                    </ul>
337                </li>
338                    <li class="nav-item">
339                    <a class="nav-link " href="/personnel" >
340                        <i class='bx bxs-group'></i>Personnel
341                    </a>
342                </li>
343                <li class="nav-item">
344                    <a class="nav-link " href="/reports" >
345                        <i class='bx bx-table'></i>Reports
346                    </a>
347                </li>
348
349                <li class="nav-item dropdown">
350                    <a class="nav-link dropdown-toggle " href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
351                        <i class='bx bx-cog'></i>Research
352                    </a>
353                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
354                        <li><a class="dropdown-item " href="/research/case-study">Case Study</a></li>
355                        <li><a class="dropdown-item " href="/research/baseline-survey">Baseline Survey</a></li>
356                        <li><a class="dropdown-item " href="/research/publication">Publications</a></li>
357                        <li><a class="dropdown-item " href="/research/research-report">Research Report</a></li>
358                        <li><a class="dropdown-item " href="/research/list-of-research">List of Research</a></li>
359                    </ul>
360                </li>
361
362
363
364                <li class="nav-item dropdown">
365                    <a class="nav-link dropdown-toggle " href="#" id="navbarDropdown4" role="button" data-bs-toggle="dropdown" aria-expanded="false">
366                        <i class='bx bxs-donate-heart'></i>Donor
367                    </a>
368                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown4">
369                        <li><a class="dropdown-item " href="/present-donor">Present Donor </a></li>
370                        <li><a class="dropdown-item " href="/past-donor">Past Donor</a></li>
371
372                    </ul>
373                </li>
374                <!--<li class="nav-item">-->
375                <!--    <a class="nav-link text-success hover-danger" href="/donate"> <i class='bx bxs-credit-card-front'></i>Donate </a>-->
376                <!--</li>  -->
377
378            </ul>
379        </div>
380    </div>
381</nav>    <div id="app">
382        
383
384        <main class="py-4" style="margin-top: -5px">
385                <link href="https://fonts.maateen.me/adorsho-lipi/font.css" rel="stylesheet">
386    <style>
387        /* Global fix: stop horizontal/side scrolling and keep everything responsive */
388        html, body {
389            max-width: 100%;
390            overflow-x: hidden;
391        }
392        *, *::before, *::after {
393            box-sizing: border-box;
394        }
395        img, video, iframe {
396            max-width: 100%;
397            height: auto;
398        }
399    </style>
400    <div class="container-fluid bg-primary text-light m-0" style="margin-top:-19px !important;">
401        <marquee class="p-1 bangla_font">Theme of the year: “ জলবায়ু সহনশীল জীবিকায়ন নিশ্চিত করি, টেকসই উন্নয়নে অবদান রাখি (২০২৫-২০২৬)
402            “Ensure Climate-Resilient Livelihoods to Contribute Sustainable Development. (2025-2026)"</marquee>
403    </div>
404    <div class="row m-0" style="background-color: #9fbfd5">
405        <div class="col-12 col-md-5 col-lg-5  bg-time ">
406            <strong>
407                <h1 id="text" class="bangla_font display-7 text-danger joyhok-shushilan"></h1>
408            </strong>
409        </div>
410        
410<script>
411            window.onload = function () {
412                const textElement = document.getElementById("text");
413                const textToType = "“জয় হোক সুশীলন (Joy Hok Shushilan)”";
414                const animationDuration = 7000;
415        
416                function removeBorder() {
417                    textElement.style.borderRight = "none"; 
418                }
419        
420                setTimeout(removeBorder, animationDuration);
421        
422                let currentCharacter = 0;
423                const typingInterval = 420;
424                const loopPauseDuration = 2000; // 2 seconds
425        
426                function typeCharacter() {
427                    if (currentCharacter <= textToType.length) {
428                        textElement.innerHTML = textToType.slice(0, currentCharacter);
429                        currentCharacter++;
430                        setTimeout(typeCharacter, typingInterval);
431                    } else {
432                        // Reset currentCharacter for infinite repeat
433                        currentCharacter = 0;
434                        setTimeout(function () {
435                            textElement.innerHTML = ''; // Clear the text before starting the next loop
436                            setTimeout(typeCharacter, 0);
437                        }, loopPauseDuration);
438                    }
439                }
440        
441                setTimeout(typeCharacter, 0);
442            };
443        </script>
443
444        
445        <div class="col-12 col-md-2 col-lg-2 m-0 p-0 ">
446            <div class="text-end m-0 flaf">
447                <img src="http://shushilan.org/assets/images/flag.gif" alt="Shushilan" style="width:100%; max-width:120px; height:auto;">
448            </div>
449        </div>
450        <div class="col-12 col-md-5 col-lg-5 bg-time bg-date-time">
451            <time id="liveDateTime" class="display-7 text-dark"></time>
452                
453            
453<script>
454                function updateLiveDateTime() {
455                    const options = {
456                        weekday: 'long',
457                        year: 'numeric',
458                        month: 'long',
459                        day: 'numeric',
460                        hour: 'numeric',
461                        minute: 'numeric',
462                        second: 'numeric',
463                        timeZone: 'Asia/Dhaka',
464                    };
465
466                    const dateTimeFormat = new Intl.DateTimeFormat('en-US', options);
467                    const formattedDateTime = dateTimeFormat.format(new Date());
468
469                    const liveDateTimeElement = document.getElementById('liveDateTime');
470                    liveDateTimeElement.textContent = formattedDateTime;
471                }
472
473                // Update the live date and time every second
474                setInterval(updateLiveDateTime, 1000);
475
476                // Initial update
477                updateLiveDateTime();
478        </script>
478
479                
480        </div>
481    </div>
482
483    <div class="row m-0 mt-1 home-main-content">
484        <div class="col-12 col-md-6 col-lg-7 col-xl-7 p-0">
485            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
486                <div class="carousel-inner">
487                    <div class="carousel-item active">
488                        <img src="http://shushilan.org/assets/images/home/upokulbondhu-award.jpg" alt="Shushilan"
489                            class="d-block w-100">
490                    </div>
491                    <div class="carousel-item active">
492                        <img src="http://shushilan.org/assets/images/home/upokulbondhu_award.jpg" alt="Shushilan"
493                            class="d-block w-100">
494                    </div>
495                    <div class="carousel-item">
496                        <img src="http://shushilan.org/assets/images/home/Upokublbondhu_11_day_2025.jpg" alt="Shushilan"
497                            class="d-block w-100">
498                    </div>
499                    <div class="carousel-item">
500                        <img src="http://shushilan.org/assets/images/home/shushilan2.jpg" alt="Shushilan"
501                            class="d-block w-100">
502                    </div>
503                </div>
504                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
505                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
506                    <span class="visually-hidden">Previous</span>
507                </button>
508                <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
509                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
510                    <span class="visually-hidden">Next</span>
511                </button>
512            </div>
513            <h1 class="bg-success p-2 display-7 text-center text-light corner">Message From Chief Executive</h1>
514            <div id="ceo">
515                <div class="text-center">
516                    <img src="http://shushilan.org/assets/images/ce_shushilan.jpg" alt="Shushilan"
517                        width="20%">
518                </div>
519                <h5 class="display-7 text-center">
520                    <strong>
521                    Mostafa Nuruzzaman
522                    </strong>
523                    </h5>
524                <h6 class="display-7 text-center">Chief Executive</h6>
525            </div>
526            <style>
527                #ceo {
528                    /*background-image: url(https://img1.picmix.com/output/stamp/normal/0/0/5/7/1087500_bfe7a.gif)*/
529                }
530            </style>
531            <hr>
532            <div class="px-2 px-md-3">
533                <p class="text-justify">
534                    Shushilan, a national non-Government development organization established in 1991 is working almost all
535                    over in Bangladesh. As part of our mission to build a Congenial Society for Economic and Socio-Cultural
536                    Development we are moving forward to tackle poverty and vulnerability in the country and support to
537                    change the lives of most disadvantaged for good, help people to claim their rights to economic
538                    opportunities <a href="/chief-executive">Read More >>></a>
539                </p>
540            </div>
541
542            
543            <div class="row hr-contact-split">
544
545                
546                <div class="col-12 col-lg-5 hr-section">
547                    <h1 class="p-2 display-7 text-center my-3 corner bg-primary text-light">Human Resource</h1>
548                    <div class="row py-2 mt-4">
549                        <div class="col-4 col-sm-6 col-md-4 col-lg-4 hr-stat-block">
550                            <div class="row">
551                                <div class="col-12 col-md-6 col-lg-4">
552                                    <img src="http://shushilan.org/assets/images/staff-icon.jpg" alt="Shushilan"
553                                        width="100%" height="95px" class="hr-stat-icon">
554                                </div>
555                                <div class="col-5 col-sm-6 col-md-5 col-lg-5 pt-2">
556                                    <h2 class="text-center display-7 hr-stat-num">594</h2>
557                                    <h2 class="text-center display-7 hr-stat-label">Staff</h2>
558                                </div>
559
560                            </div>
561                        </div>
562                        <div class="col-4 col-sm-6 col-md-4 col-lg-4 hr-stat-block">
563                            <div class="row">
564                                <div class="col-12 col-md-6 col-lg-4">
565                                    <img src="http://shushilan.org/assets/images/male-staff.png" alt="Shushilan"
566                                        width="80%" height="80px" class="hr-stat-icon">
567                                </div>
568                                <div class="col-5 col-sm-6 col-md-5 col-lg-5 pt-2">
569                                    <h2 class="text-center display-7 hr-stat-num">395</h2>
570                                    <h2 class="text-center display-7 hr-stat-label">Male</h2>
571                                </div>
572
573                            </div>
574                        </div>
575                        <div class="col-4 col-sm-6 col-md-4 col-lg-4 hr-stat-block">
576                            <div class="row">
577                                <div class="col-12 col-md-6 col-lg-4">
578                                    <img src="http://shushilan.org/assets/images/female-staff.png" alt="Shushilan"
579                                        width="100%" height="80px" class="hr-stat-icon">
580                                </div>
581                                <div class="col-5 col-sm-6 col-md-5 col-lg-5 pt-2">
582                                    <h2 class="text-center display-7 hr-stat-num">199</h2>
583                                    <h2 class="text-center display-7 hr-stat-label">Female</h2>
584                                </div>
585
586                            </div>
587                        </div>
588
589                    </div>
590
591                    <div class="row py-2 mt-2">
592                        <div class="col-4 col-sm-6 col-md-4 col-lg-4 hr-stat-block">
593                            <div class="row">
594                                <div class="col-12 col-md-6 col-lg-4">
595                                    <img src="http://shushilan.org/assets/images/Volunteer.png" alt="Shushilan"
596                                        width="100%" height="95px" class="hr-stat-icon">
597                                </div>
598                                <div class="col-5 col-sm-6 col-md-5 col-lg-5 pt-2">
599                                    <h2 class="text-center display-7 hr-stat-num">161</h2>
600                                    <h2 class="text-center display-7 hr-stat-label">Volunteer</h2>
601                                </div>
602
603                            </div>
604                        </div>
605                        <div class="col-4 col-sm-6 col-md-4 col-lg-4 hr-stat-block">
606                            <div class="row">
607                                <div class="col-12 col-md-6 col-lg-4">
608                                    <img src="http://shushilan.org/assets/images/male-olunteer.png" alt="Shushilan"
609                                        width="100%" height="90px" class="hr-stat-icon">
610                                </div>
611                                <div class="col-5 col-sm-6 col-md-5 col-lg-5 pt-2">
612                                    <h2 class="text-center display-7 hr-stat-num">72</h2>
613                                    <h2 class="text-center display-7 hr-stat-label">Male</h2>
614                                </div>
615                            </div>
616                        </div>
617                        <div class="col-4 col-sm-6 col-md-4 col-lg-4 hr-stat-block">
618                            <div class="row">
619                                <div class="col-12 col-md-6 col-lg-4">
620                                    <img src="http://shushilan.org/assets/images/Female-olunteer.png" alt="Shushilan"
621                                        width="100%" height="80px" class="hr-stat-icon">
622                                </div>
623                                <div class="col-5 col-sm-6 col-md-5 col-lg-5 pt-2">
624                                    <h2 class="text-center display-7 hr-stat-num">89</h2>
625                                    <h2 class="text-center display-7 hr-stat-label">Female</h2>
626                                </div>
627
628                            </div>
629                        </div>
630                    </div>
631                </div>
632
633                
634                <div class="col-12 col-lg-7 contact-section">
635                    <div class="col-12">
636                        <h1 class="bg-success p-2 display-7 text-center text-light complain mt-3">Contact for Admin, HR and Complaint</h1>
637                        <div class="px-3 px-md-5 pt-3 complain_area">
638                            <div class="row g-3">
639                                <div class="col-4 col-md-4">
640                                    <div class="contact-card contact-admin h-100">
641                                        <i class='bx bxs-user-detail contact-icon'></i>
642                                        <h5 class="fw-bold mb-2">For Admin</h5>
643                                        <p class="mb-1"><i class='bx bx-phone'></i> +880 1778326821</p>
644                                        <p class="mb-0"><i class='bx bx-envelope'></i> [email protected]</p>
645                                    </div>
646                                </div>
647                                <div class="col-4 col-md-4">
648                                    <div class="contact-card contact-hr h-100">
649                                        <i class='bx bxs-group contact-icon'></i>
650                                        <h5 class="fw-bold mb-2">For HR</h5>
651                                        <p class="mb-1"><i class='bx bx-phone'></i> +880 1856410528</p>
652                                        <p class="mb-0"><i class='bx bx-envelope'></i> [email protected]</p>
653                                    </div>
654                                </div>
655                                <div class="col-4 col-md-4">
656                                    <div class="contact-card contact-complain h-100">
657                                        <i class='bx bxs-message-square-detail contact-icon'></i>
658                                        <h5 class="fw-bold mb-2">For Complain</h5>
659                                        <p class="mb-1"><i class='bx bx-phone'></i> +880 1823536400</p>
660                                        <p class="mb-0"><i class='bx bx-envelope'></i> [email protected]</p>
661                                    </div>
662                                </div>
663                            </div>
664                        </div>
665                    </div>
666                </div>
667
668            </div>
669            
670
671            <style>
672                .contact-card {
673                    border-radius: 12px;
674                    padding: 1.2rem 1rem;
675                    text-align: center;
676                    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
677                    transition: transform 0.2s ease, box-shadow 0.2s ease;
678                }
679                .contact-card:hover {
680                    transform: translateY(-3px);
681                    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
682                }
683                .contact-card p {
684                    font-size: 0.9rem;
685                    color: #333;
686                }
687                .contact-icon {
688                    font-size: 38px;
689                    margin-bottom: 6px;
690                    display: inline-block;
691                }
692                .contact-admin { background-color: #EAF2FB; }
693                .contact-admin .contact-icon, .contact-admin h5 { color: #2471A3; }
694                .contact-hr { background-color: #EAF7EE; }
695                .contact-hr .contact-icon, .contact-hr h5 { color: #1E8449; }
696                .contact-complain { background-color: #FDEDEC; }
697                .contact-complain .contact-icon, .contact-complain h5 { color: #C0392B; }
698            </style>
699        </div>
700
701        <div class="col-12 col-md-6 col-lg-5 col-xl-5 p-0 ps-1 ">
702            <h1 class="bg-success p-2 display-7 text-center text-light corner">
703                
704                    Shushilan Quick Access Corner
705                   
706                    </h1>
707
708            <div class="row m-0 g-2 row-cols-3 row-cols-sm-3 row-cols-lg-5 quickAccess">
709
710                <div class="col text-center p-2 qa-item">
711                    <a href="/short-overview-of-shushilan">
712                        <img src="http://shushilan.org/assets/images/short-over-view.png" alt="Shushilan" class="qa-img">
713                        <br>
714                        <h5> Shushilan Overview </h5>
715                    </a>
716                </div>
717
718                <div class="col text-center p-2 qa-item">
719                    <a href="/events">
720                        <img src="http://shushilan.org/assets/images/news.png" alt="Shushilan" class="qa-img">
721                        <br>
722                        <h5> Current News & Events</h5>
723                    </a>
724                </div>
725
726                <div class="col text-center p-2 qa-item">
727                    <a href="/awards">
728                        <img src="http://shushilan.org/assets/images/awarda.png" alt="Shushilan" class="qa-img">
729                        <br>
730                        <h5 class="mt-2">Awards</h5>
731                    </a>
732                </div>
733
734                <div class="col text-center p-2 qa-item">
735                    <a href="/gallery">
736                        <img src="http://shushilan.org/assets/images/gallery.webp" alt="Shushilan" class="qa-img">
737                        <br>
738                        <h5>Picture Gallery </h5>
739                    </a>
740                </div>
741
742                <div class="col text-center p-2 qa-item">
743                    <a href="https://career.shushilan.org">
744                        <img src="http://shushilan.org/assets/images/job.png" alt="Shushilan" class="qa-img">
745                        <br>
746                        <h5><a href="https://career.shushilan.org" target="_blank">Job Opportunity</a></h5>
747                    </a>
748                </div>
749
750                <div class="col text-center p-2 qa-item">
751                    <a href="/tender-and-procurement">
752                        <img src="http://shushilan.org/assets/images/tender.png" alt="Shushilan" class="qa-img">
753                        <br>
754                        <h5> Tender & Procurement</h5>
755                    </a>
756                </div>
757
758                <div class="col text-center p-2 qa-item">
759                    <a href="/presentation">
760                        <img src="http://shushilan.org/assets/images/presention.webp" alt="Shushilan" class="qa-img">
761                        <br>
762                        <h5>Our Presentation</h5>
763                    </a>
764                </div>
765
766                <div class="col text-center p-2 qa-item">
767                    <a href="#">
768                        <img src="http://shushilan.org/assets/images/Memorable.jpg" alt="Shushilan" class="qa-img">
769                        <br>
770                        <h5 class="mt-2">Memorable</h5>
771                    </a>
772                </div>
773
774                <div class="col text-center p-2 qa-item">
775                    <a href="#">
776                        <img src="http://shushilan.org/assets/images/cooperation.png" alt="Shushilan" class="qa-img">
777                        <br>
778                        <h5 class="mt-2">Business Adventure</h5>
779                    </a>
780                </div>
781
782            </div>
783            <style>
784                .qa-img {
785                    width: 100%;
786                    max-width: 95px;
787                    height: 90px;
788                    object-fit: contain;
789                }
790                .qa-item h5 {
791                    font-size: 0.95rem;
792                }
793                .qa-item a {
794                    text-decoration: none;
795                    color: inherit;
796                }
797            </style>
798
799            <h1 class="bg-primary p-2 display-7 text-center text-light corner">Programs</h1>
800            <div class="row m-0 g-2 row-cols-3 row-cols-sm-3 row-cols-lg-5 quickAccess">
801                <div class="col text-center p-2 current_project">
802                    <a href="/socio-economic-development-program">
803                        <img src="http://shushilan.org/assets/images/Socio Economic .jpg" alt="Shushilan" class="program-img">
804                        <br>
805                        <h5> 1. Socio Economic Development </h5>
806                    </a>
807                </div>
808
809                <div class="col text-center p-2 current_project">
810                    <a href="/education-and-ict-and-health-and-nutrition">
811                        <img src="http://shushilan.org/assets/images/Education &amp; ICT and Health &amp; Nutrition.png" alt="Shushilan" class="program-img">
812                        <br>
813                        <h5>2. Education & ICT and Health & Nutrition</h5>
814                    </a>
815                </div>
816
817                <div class="col text-center p-2 current_project">
818                    <a href="/disaster-climate-change-and-sustainable-environmental-resources-management">
819                        <img src="http://shushilan.org/assets/images/Disaster, Climate Change and Sustainable Environmental Resources Management.jpg" alt="Shushilan" class="program-img">
820                        <br>
821                        <h5>3. Disaster, Climate Change and Sus.</h5>
822                    </a>
823                </div>
824
825                <div class="col text-center p-2 current_project">
826                    <a href="/human-rights-and-good-governance-program">
827                        <img src="http://shushilan.org/assets/images/Human Rights &amp; Good Governance.jpg" alt="Shushilan" class="program-img">
828                        <br>
829                        <h5>4. Human Rights & Good Governance </h5>
830                    </a>
831                </div>
832
833                <div class="col text-center p-2 current_project">
834                    <a href="/sustainable-peoples-organisation-program">
835                        <img src="http://shushilan.org/assets/images/Sustainable Peoples Organization.png" alt="Shushilan" class="program-img">
836                        <br>
837                        <h5>5. Sustainable Peoples Organization </h5>
838                    </a>
839                </div>
840            </div>
841            <style>
842                .program-img {
843                    width: 100%;
844                    height: 110px;
845                    object-fit: contain;
846                }
847                .current_project h5 {
848                    font-size: 0.85rem;
849                    line-height: 1.2;
850                }
851                .current_project a {
852                    text-decoration: none;
853                    color: inherit;
854                }
855            </style>
856
857            <div class="px-3 px-md-5 pt-4">
858    <div class="card ">
859        <a href="https://tigerpoint.net" target="_blank">
860            <img src="http://shushilan.org/assets/images/tigerpoint.jpg" alt="Shushilan" width="100%">
861            <h2 class="text-center display-7 py-2 bg-warning text-dark fw-bold"><i>Shushilan</i> Tiger Point (Guest House)</h2>
862        </a>
863    </div>
864</div>
865
866            <div class="row m-0 px-3 px-md-5 mt-3">
867                <div class="col-12 col-sm-4">
868                    <div class="card ">
869                        <a href="/culture">
870                            <img src="http://shushilan.org/assets/images/culture.jpg" alt="Shushilan" width="100%">
871                            <h2 class="text-center display-8 py-2 bg-primary text-light px-1 m-0">Cultural Activities</h2>
872                        </a>
873                    </div>
874                </div>
875
876                <div class="col-12 col-sm-4">
877                    <div class="card ">
878                        <a href="/rohingya-responce">
879                            <img src="http://shushilan.org/assets/images/rohingya.jpg" alt="Shushilan" width="100%">
880                            <h2 class="text-center display-8 py-2 bg-success text-light px-1 m-0">Rohingya Respo.
881                            </h2>
882                        </a>
883                    </div>
884                </div>
885
886                <div class="col-12 col-sm-4">
887                    <div class="card ">
888                        <a href="https://shubazar.com">
889                            <img src="http://shushilan.org/assets/images/products.png" alt="Shushilan" width="100%">
890                            <h2 class="text-center display-8 py-2 bg-dark text-light px-1 m-0">Our Products
891                            </h2>
892                        </a>
893                    </div>
894                </div>
895
896                <div class="col-12">
897                    <h4 class="text-center display-8 py-2 bg-danger text-light px-3 m-0 my-4">Our Visitor</h4>
898                    <div class="row">
899                        <div class="col-12 col-md-6 col-lg-7 text-start">
900                            Views Today : 2
901                        </div>
902
903                        <div class="col-12 col-md-6 col-lg-5 text-start">
904                            Views Yesterday : 381
905                        </div>
906
907                        <div class="col-12 col-md-6 col-lg-7 text-start mt-2">
908                            Total views : 481134
909                        </div>
910
911                        <div class="col-12 col-md-6 col-lg-5 text-start mt-2">
912                            Who's Online : 1
913                        </div>
914
915                    </div>
916                   
917                </div>
918
919            </div>
920
921
922
923        </div>
924    </div>
925    
926
927    <section>
928        <h1 class="p-2 display-6 text-center bg-info cell my-4">Our Cell</h1>
929        <hr>
930        <div class="container">
931            <div class="row">
932
933                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
934                    <a href="/training-cell">
935                        <div class="cell-box cell-1 p-3 rounded">
936                            <div>
937                                <i class='bx bx-run fa-big'></i>
938                            </div>
939                            <h2 class="display-7">Training Cell</h2>
940                        </div>
941                    </a>
942                </div>
943                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
944                    <a href="/human-resource-cell">
945                        <div class="cell-box cell-2 p-3 rounded">
946                            <div>
947                                <i class='bx bxs-user fa-big'></i>
948                            </div>
949                            <h2 class="display-7">Human Resource Cell</h2>
950                        </div>
951                    </a>
952                </div>
953
954
955
956                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
957                    <a href="/gender-cell">
958                        <div class="cell-box cell-3 p-3 rounded">
959                            <div>
960                                <i class='bx bxs-user-pin fa-big'></i>
961                            </div>
962                            <h2 class="display-7">Gender Cell</h2>
963                        </div>
964                    </a>
965                </div>
966                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
967                    <a href="/finance-cell">
968                        <div class="cell-box cell-4 p-3 rounded">
969                            <div>
970                                <i class='bx bxs-credit-card-front fa-big'></i>
971                            </div>
972                            <h2 class="display-7">Finance Cell</h2>
973                        </div>
974                    </a>
975                </div>
976
977                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
978                    <a href="/internal-audit-cell">
979                        <div class="cell-box cell-5 p-3 rounded">
980                            <div>
981                                <i class='bx bxs-objects-vertical-bottom  fa-big'></i>
982                            </div>
983                            <h2 class="display-7">Internal Audit Cell</h2>
984                        </div>
985                    </a>
986                </div>
987
988                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
989                    <a href="/business-development-unit">
990                        <div class="cell-box cell-6 p-3 rounded">
991                            <div>
992                                <i class='bx bxs-business fa-big'></i>
993                            </div>
994                            <h2 class="display-7">Business Development Unit</h2>
995                        </div>
996                    </a>
997                </div>
998
999                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
1000                    <a href="/research-and-advocacy-cell">
1001                  
1001      <div class="cell-box cell-7 p-3 rounded">
1002                            <div>
1003                                <i class='bx bx-search-alt fa-big'></i>
1004                            </div>
1005                            <h2 class="display-7">Research and Advocacy cell</h2>
1006                        </div>
1007                    </a>
1008                </div>
1009                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
1010                    <a href="/procurement-logistics-and-admin-cell">
1011                        <div class="cell-box cell-8 p-3 rounded">
1012                            <div>
1013                                <i class='bx bx-cog fa-big'></i>
1014                            </div>
1015                            <h2 class="display-7">Procurement, Logistics & Admin Cell</h2>
1016                        </div>
1017                    </a>
1018                </div>
1019
1020
1021
1022
1023
1024
1025                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
1026                    <a href="/information-monitoring-evaluation-and-learning-cell">
1027                        <div class="cell-box cell-9 p-3 rounded">
1028                            <div>
1029                                <i class='bx bxs-book-reader fa-big'></i>
1030                            </div>
1031                            <h2 class="display-7">IMEL Cell</h2>
1032                        </div>
1033                    </a>
1034                </div>
1035
1036
1037                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
1038                    <a href="/risk-reduction-and-humanitarian-response-unit">
1039                        <div class="cell-box cell-10 p-3 rounded">
1040                            <div>
1041                                <i class='bx bx-layer fa-big'></i>
1042                            </div>
1043                            <h2 class="display-7">RRHR Unit</h2>
1044                        </div>
1045                    </a>
1046                </div>
1047                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
1048                    <a href="/environmental-and-social-safeguard-cell">
1049                        <div class="cell-box cell-11 p-3 rounded">
1050                            <div>
1051                                <i class='bx bx-globe fa-big'></i>
1052                            </div>
1053                            <h2 class="display-7">Environmental & Social Safeguard Cell</h2>
1054                        </div>
1055                    </a>
1056                </div>
1057
1058                <div class="col-6 col-md-4 col-lg-3 text-center p-2 ">
1059                    <a href="#">
1060                        <div class="cell-box cell-12 p-3 rounded">
1061                            <div>
1062                                <i class='bx bxs-time fa-big'></i>
1063                            </div>
1064                            <h2 class="display-7">Savings and Credit Unit</h2>
1065                        </div>
1066                    </a>
1067                </div>
1068            </div>
1069        </div>
1070    </section>
1071    <style>
1072        .fa-big {
1073            font-size: 60px;
1074        }
1075        .bg-primary {
1076            --bs-bg-opacity: 1;
1077            background-color: rgb(30 79 124) !important;
1078        }
1079        
1080        .bg-success {
1081            --bs-bg-opacity: 1;
1082            background-color: rgb(30 79 124) !important;
1083        }
1084        .bg-warning
1085         {
1086            --bs-bg-opacity: 1;
1087            background-color: rgb(30 79 124) !important;
1088        }
1089        .bg-info {
1090    --bs-bg-opacity: 1;
1091    background-color: rgb(30 79 124) !important;
1092    line-height: 1.2;
1093    font-size: 1.2rem;
1094    color: white;
1095}
1096.bg-warning {
1097    --bs-bg-opacity: 1;
1098    background-color: rgb(255 255 255) !important;
1099}
1100        .bg-danger
1101         {
1102            --bs-bg-opacity: 1;
1103            background-color: rgb(30 79 124) !important;
1104        }
1105        .bg-info {
1106            --bs-bg-opacity: 1;
1107            background-color: rgb(30 79 124) !important;
1108            line-height.6
1109            color: white;
1110        }
1111                .bg-dark {
1112            --bs-bg-opacity: 1;
1113            background-color: rgb(30 79 124) !important;
1114        }
1115              .display-7 {
1116            font-size: 1.1rem;
1117            font-weight: 300;
1118            line-height: 1.2;
1119        }
1120        .cell-box {
1121            transition: transform 0.2s ease, box-shadow 0.2s ease;
1122            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
1123        }
1124        .cell-box:hover {
1125            transform: translateY(-4px);
1126            box-shadow: 0 8px 18px rgba(0,0,0,0.16);
1127        }
1128        .cell-box a, .cell-box h2 {
1129            text-decoration: none;
1130        }
1131        .cell-1  { background-color: hsl(80, 55%, 92%); }
1132        .cell-1  i, .cell-1  h2 { color: hsl(80, 55%, 30%); }
1133                .cell-1  { background-color: hsl(80, 55%, 92%); }
1134        .cell-2  i, .cell-2  h2 { color: hsl(80, 55%, 30%); }
1135                .cell-2  { background-color: hsl(80, 55%, 92%); }
1136        .cell-2  i, .cell-2  h2 { color: hsl(80, 55%, 30%); }
1137                .cell-2  { background-color: hsl(80, 55%, 92%); }
1138        .cell-3  i, .cell-3  h2 { color: hsl(80, 55%, 30%); }
1139                .cell-3  { background-color: hsl(80, 55%, 92%); }
1140        .cell-3  i, .cell-3  h2 { color: hsl(80, 55%, 30%); }
1141                .cell-3  { background-color: hsl(80, 55%, 92%); }
1142        .cell-4  i, .cell-4  h2 { color: hsl(80, 55%, 30%); }
1143                .cell-4  { background-color: hsl(80, 55%, 92%); }
1144        .cell-4  i, .cell-4  h2 { color: hsl(80, 55%, 30%); }
1145                .cell-4  { background-color: hsl(80, 55%, 92%); }
1146        .cell-5  i, .cell-5  h2 { color: hsl(80, 55%, 30%); }
1147                .cell-5  { background-color: hsl(80, 55%, 92%); }
1148        .cell-5  i, .cell-5  h2 { color: hsl(80, 55%, 30%); }
1149                .cell-5  { background-color: hsl(80, 55%, 92%); }
1150        .cell-6  i, .cell-6 h2 { color: hsl(80, 55%, 30%); }
1151                .cell-6  { background-color: hsl(80, 55%, 92%); }
1152        .cell-6  i, .cell-6  h2 { color: hsl(80, 55%, 30%); }
1153                .cell-6  { background-color: hsl(80, 55%, 92%); }
1154        .cell-7  i, .cell-7 h2 { color: hsl(80, 55%, 30%); }
1155                .cell-6  { background-color: hsl(80, 55%, 92%); }
1156        .cell-7  i, .cell-7  h2 { color: hsl(80, 55%, 30%); }
1157                .cell-7  { background-color: hsl(80, 55%, 92%); }
1158        .cell-8  i, .cell-8 h2 { color: hsl(80, 55%, 30%); }
1159                .cell-8  { background-color: hsl(80, 55%, 92%); }
1160        .cell-8  i, .cell-8  h2 { color: hsl(80, 55%, 30%); }
1161                .cell-8  { background-color: hsl(80, 55%, 92%); }
1162        .cell-9  i, .cell-9 h2 { color: hsl(80, 55%, 30%); }
1163                .cell-9  { background-color: hsl(80, 55%, 92%); }
1164        .cell-9  i, .cell-9  h2 { color: hsl(80, 55%, 30%); }
1165                .cell-9  { background-color: hsl(80, 55%, 92%); }
1166        .cell-10  i, .cell-10 h2 { color: hsl(80, 55%, 30%); }
1167                .cell-10  { background-color: hsl(80, 55%, 92%); }
1168        .cell-10  i, .cell-10  h2 { color: hsl(80, 55%, 30%); }
1169                .cell-10  { background-color: hsl(80, 55%, 92%); }
1170        .cell-11  i, .cell-11 h2 { color: hsl(80, 55%, 30%); }
1171                .cell-11  { background-color: hsl(80, 55%, 92%); }
1172        .cell-11  i, .cell-11  h2 { color: hsl(80, 55%, 30%); }
1173                .cell-11  { background-color: hsl(80, 55%, 92%); }
1174        .cell-12  i, .cell-12 h2 { color: hsl(80, 55%, 30%); }
1175                .cell-12  { background-color: hsl(80, 55%, 92%); }
1176        .cell-12  i, .cell-12  h2 { color: hsl(80, 55%, 30%); }
1177                .cell-12  { background-color: hsl(80, 55%, 92%); }
1178    </style>
1179
1180    
1181    <style>
1182        @media (min-width: 992px) {
1183
1184            /* 1) LEFT-SIDE MARGIN FIX
1185               The right margin was already fine; this balances the left side so
1186               both edges match on laptop/desktop.
1187               → If the RIGHT side ends up with too much space after this, just
1188                 delete the "padding-right" line (keep padding-left only). */
1189            .home-main-content {
1190                padding-left: 12px;
1191                padding-right: 12px;
1192            }
1193
1194            /* 2) HUMAN RESOURCE + CONTACT side by side (each takes half width).
1195               Contact cards are compacted so all 3 stay readable in the
1196               narrower half. */
1197            .hr-contact-split > [class*="col-"] {
1198                padding-left: 6px;
1199                padding-right: 6px;
1200            }
1201            .hr-contact-split .complain_area {
1202                padding-left: 0.4rem !important;
1203                padding-right: 0.4rem !important;
1204            }
1205            .hr-contact-split .complain_area .row {
1206                --bs-gutter-x: 0.4rem;
1207            }
1208            .hr-contact-split .contact-card {
1209                padding: 0.9rem 0.5rem;
1210            }
1211            .hr-contact-split .contact-icon {
1212                font-size: 34px;
1213            }
1214            /* match the "Chief Executive" text (display-7 = 1.1rem) */
1215            .hr-contact-split .contact-card h5 {
1216                font-size: 1.1rem;
1217            }
1218            .hr-contact-split .contact-card p {
1219                font-size: 0.9rem;
1220                overflow-wrap: anywhere;
1221                word-break: break-word;
1222            }
1223            /* HR stat numbers/labels matched to the same 1.1rem scale */
1224            .hr-contact-split .hr-stat-num {
1225                font-size: 1.1rem;
1226            }
1227            .hr-contact-split .hr-stat-label {
1228                font-size: 0.9rem;
1229            }
1230        }
1231    </style>
1232
1233    
1234    <style>
1235        @media (max-width: 575.98px) {
1236
1237            /* 1) HUMAN RESOURCE / VOLUNTEER — smaller, cleaner, professional stat icons */
1238            .hr-stat-block > .row {
1239                margin-left: 0;
1240                margin-right: 0;
1241                flex-direction: column;
1242                align-items: center;
1243                text-align: center;
1244                row-gap: 1px;
1245            }
1246            .hr-stat-block > .row > div {
1247                width: 100%;
1248                max-width: 100%;
1249                flex: 0 0 auto;
1250                padding-left: 0;
1251                padding-right: 0;
1252            }
1253            .hr-stat-icon {
1254                width: 40px !important;
1255                height: 40px !important;
1256                object-fit: contain;
1257                margin-top: 2px;
1258            }
1259            .hr-stat-num {
1260                font-size: 1rem !important;
1261                font-weight: 700 !important;
1262                line-height: 1.1 !important;
1263                margin: 4px 0 0 0 !important;
1264                color: #1e4f7c;
1265            }
1266            .hr-stat-label {
1267                font-size: 0.68rem !important;
1268                font-weight: 500 !important;
1269                line-height: 1.1 !important;
1270                margin: 0 !important;
1271                color: #5b5b5b;
1272            }
1273
1274            /* 2) CONTACT CARDS — 3 compact, well-aligned cards in one row */
1275            .complain_area {
1276                padding-left: 0.4rem !important;
1277                padding-right: 0.4rem !important;
1278            }
1279            .complain_area .row {
1280                --bs-gutter-x: 0.4rem;
1281                --bs-gutter-y: 0.4rem;
1282            }
1283            .contact-card {
1284                padding: 0.55rem 0.35rem !important;
1285                border-radius: 10px;
1286            }
1287            .contact-icon {
1288                font-size: 24px !important;
1289                margin-bottom: 2px !important;
1290            }
1291            .contact-card h5 {
1292                font-size: 0.72rem !important;
1293                margin-bottom: 4px !important;
1294            }
1295            .contact-card p {
1296                font-size: 0.6rem !important;
1297                line-height: 1.25 !important;
1298                margin-bottom: 2px !important;
1299                overflow-wrap: anywhere;
1300                word-break: break-word;
1301            }
1302            .contact-card p i {
1303                font-size: 0.62rem;
1304            }
1305
1306            /* 3) QUICK ACCESS CORNER — 3 icons per row */
1307            .quickAccess .qa-img {
1308                height: 58px;
1309                max-width: 58px;
1310            }
1311            .qa-item {
1312                padding: 0.35rem !important;
1313            }
1314            .qa-item h5 {
1315                font-size: 0.68rem;
1316                line-height: 1.15;
1317                margin-top: 4px;
1318            }
1319
1320            /* 4) PROGRAMS — 3 icons per row */
1321            .program-img {
1322                height: 66px;
1323            }
1324            .current_project {
1325                padding: 0.35rem !important;
1326            }
1327            .current_project h5 {
1328                font-size: 0.64rem;
1329                line-height: 1.15;
1330            }
1331
1332            /* 5) OUR CELL — 2 boxes per row, equal height */
1333            .cell-box {
1334                padding: 0.8rem 0.5rem !important;
1335                height: 100%;
1336            }
1337            .cell-box .fa-big {
1338                font-size: 40px !important;
1339            }
1340            .cell-box h2.display-7 {
1341                font-size: 0.82rem !important;
1342                line-height: 1.15;
1343            }
1344        }
1345    </style>
1346
1347        </main>
1348    </div>
1349    <footer class="bg-footer">
1350    <div class="container">
1351        <div class="row m-0">
1352            <div class="col-sm-12 col-md-6 col-lg-3 text-light">
1353                <h5 class="p-3">Contact Info</h5>
1354
1355                <address>
1356                    <p>
1357                        Shushilan, House # 155,
1358                        <br>
1359                        KDA Jalil Sharoni,
1360                        <br>
1361                        Commercial cum Residential Area,
1362                        <br>
1363                        Rayermohol,
1364                        <br>
1365                        Boyra, Khulna 9000,
1366                        <br>
1367                        Bangladesh.
1368                        <br>
1369
1370                        E-mail: [email protected]
1371
1372                        <br>
1373                       Contact: +880 1915 319448
1374                       </p>
1375                </address>
1376            </div>
1377
1378            <div class="col-sm-12 col-md-6 col-lg-3 text-light">
1379                <h5 class="p-3">About Us</h5>
1380                <p class="text-justify">
1381                    Shushilan, a Bengali name signifying endeavours for a better future, is a local non government
1382                    development organization set up in 1991. The organization came into being in the face of degradation
1383                    of socio-ecological resources in the southwest coastal region with specific mission to redress the
1384                    declining natural resource base, livelihoods and food security of the people.
1385                </p>
1386            </div>
1387
1388            <div class="col-sm-12 col-md-6 col-lg-3 text-light">
1389                <h5 class="p-3">Find Us</h5>
1390                <iframe
1391                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2600.101150631921!2d89.52403555497035!3d22.8358520080615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39ff9aea3c7d1fe5%3A0x27d8ca3489458780!2z4Ka44KeB4Ka24KeA4Kay4Kao!5e0!3m2!1sen!2sbd!4v1702152313673!5m2!1sen!2sbd"
1392                    width="100%" height="240" style="border:0;" allowfullscreen="" loading="lazy"
1393                    referrerpolicy="no-referrer-when-downgrade"></iframe>
1394                    <br>
1395                <div class="social ">
1396                    <ul class="m-0 p-0 text-center">
1397                        
1398                        <li>
1399                            <a href="https://shushilanserver.quickconnect.to" target="_blank">
1400                            <img src="http://shushilan.org/assets/images/icon/server.png" alt="Shushilan"
1401                            width="80px" height="60px" >
1402                        </a>
1403                        </li>
1404                        <li>
1405                            <a href="https://www.facebook.com/groups/shushilanofficial" target="_blank">
1406                            <img src="http://shushilan.org/assets/images/icon/facebook.webp" alt="Shushilan"
1407                            width="50px" height="50px" >
1408                        </a>
1409                        </li>
1410                        <li>
1411                            <a href="#" target="blank">
1412                            <img src="http://shushilan.org/assets/images/icon/twitter.png" alt="Shushilan"
1413                            width="40px" height="40px">
1414                        </a>
1415                        </li>
1416                        <li>
1417                            <a href="#">
1418                            <img src="http://shushilan.org/assets/images/icon/whatsapp.webp" alt="Shushilan"
1419                            width="40px" height="40px" target="blank">
1420                        </a>
1421                        </li>
1422
1423                        <li>
1424                            <a href="https://www.youtube.com/channel/UCvVtOOY-u6ofxpuOEw3t8Yw" target="blank">
1425                            <img src="http://shushilan.org/assets/images/icon/youtube.png" alt="Shushilan"
1426                            width="40px" height="50px">
1427                        </a>
1428                        </li4
1429                    </ul>
1430                </div>
1431            </div>
1432
1433            <div class="col-sm-12 col-md-6 col-lg-3 text-light">
1434
1435
1436                <h5 class="p-3 pb-1">Youtube Channel</h5>
1437                <a href="https://www.youtube.com/channel/UCvVtOOY-u6ofxpuOEw3t8Yw" target="blank">
1438                    <img src="http://shushilan.org/assets/images/youtube-logo-updated.jpg" alt="Shushilan" width="100%"
1439                        height="130px">
1440                          <h5 class="p-3 pb-1 text-light">ব্যাঘ্রতট (সুশীলন মুখপাত্র)</h5>
1441                <a href="https://byaghratat.com/"target="blank">
1442                    <img src="http://shushilan.org/assets/images/icon/byaghratat.png" alt="Shushilan" width="100%"
1443                        height="130px">
1444                </a>
1445              
1446            </div>
1447
1448        </div>
1449    </div>
1450    <div class="bg-success p-2 row m-0 copyright">
1451        <div class="p-0 m-0 text-light col-sm-12 col-md-6 col-lg-6 ">Copyright Shushilan ©2026 All
1452            rights reserved</div>
1453        <div class="p-0 m-0 text-light col-sm-12 col-md-6 col-lg-6 text-end"><a target="blank"
1454                href="https://drive.google.com/file/d/1Ak_-mvrwY0W00010GjH7Yx7Tq2qlrf9B/view?usp=drive_link"
1455                class="text-light">Development by <i> Shushilan </i></a></div>
1456
1457    </div>
1458</footer>
1459    
1459<script src="http://shushilan.org/assets/js/bootstrap.bundle.min.js"></script>
vendor: 2 bytes, line 1459
1459
1460<script src="http://shushilan.org/assets/js/axios.min.js"></script>
vendor: 2 bytes, line 1460
1460
1461<script src="http://shushilan.org/assets/js/sweetalert.js"></script>
vendor: 2 bytes, line 1461
1461
1462<script src="http://shushilan.org/assets/js/jquery-3.7.0.min.js"></script>
vendor: 2 bytes, line 1462
1462
1463<script src="http://shushilan.org/assets/js/custom.js"></script>
1463
1464
1465</body>
1466</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.