@font-face {
    font-family: 'SulimanLipi';
    src: url('font/SolaimanLipi_22-02-2012.ttf') format('truetype');
}
@font-face {
    font-family: 'Li Ador Noirrit Bold';
    src: url('font/Li Ador Noirrit Bold.ttf') format('truetype');
}

body {
    font-family: 'SulimanLipi', sans-serif;
    overflow-x: hidden;
}
.main-bg {
    background: #fff;
}

/*other page bg*/
.page-content {
    background-color: rgba(242, 246, 238, 1);
    min-height: 100vh;
}


.total_org {
    display: inline-flex;
    padding: 6rem 5rem 6rem 5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.63331rem;
    background: #FFF4E7;
}

    .total_org h1 {
        color: #1C1C1C;
        font-size: 4rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .total_zila {
        display: inline-flex;
        padding: 1.125rem 4.70206rem 1.07294rem 4.7rem;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius: 0.63331rem;
        background: #FFFEE3;

    }

    .total_zila h1 {
        color: #1C1C1C;
        font-size: 4rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .total_upazila {
        display: flex;
        padding: 1.125rem 0rem 1.07294rem 0rem;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius: 0.63331rem;
        background: #F2FFEB;
    }

    .total_upazila h1 {
        color: #1C1C1C;
        font-size: 4rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .total_member {
        display: inline-flex;
        padding: 1.10419rem 5.63331rem 1.09375rem 5.575rem;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 0.63331rem;
        background: #E9F1FF;
    }

    .total_member h1 {
        color: #1C1C1C;
        font-size: 4rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .total_service {
        display: inline-flex;
        padding: 1.10419rem 3.875rem 1.09375rem 3.825rem;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 0.63331rem;
        background: #F8EDFF;
    }

    .total_service h1 {
        color: #1C1C1C;
        font-size: 4rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

    .parent {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 10px;
    }

    .parent h3 {
        font-family: 'Li Ador Noirrit Bold', sans-serif;
    }

    .total_org {
        grid-area: 1 / 1 / span 2 / span 4;
    }

    .total_zila {
        grid-area: 1 / 5 / span 1 / span 3;
    }

    .total_upazila {
        grid-area: 1 / 8 / span 1 / span 5;
    }

    .total_member {
        grid-area: 2 / 5 / span 1 / span 5;
    }

    .total_service {
        grid-area: 2 / 10 / span 1 / span 3;
    }
    .service_title{
        font-family: 'Li Ador Noirrit Bold', sans-serif;
        margin-top: 8rem;
        color: #EFEFEF;
        font-size: 6rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .photo_title{
    color: #EFEFEF;
    font-size: 6rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.card-body{
        padding: 0;
    }
    .card_icon{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /*width: 16.875rem;*/
        height: 17.4375rem;
        flex-shrink: 0;
    }
    .card_no_border{
        border: none;
        border-radius: 0.5rem;
        background: #F6F6F6;
        box-shadow: 0px 15.2px 38px -9.5px rgba(0, 0, 0, 0.25);
    }
    .image_card {
        /*width: 18.88125rem;*/
        height: 24.06669rem;
        border: none;
        flex-shrink: 0;
    }
    .image_card img{
        width: 100%;
        height: 24.06669rem;
        border-radius: 0.5rem;
        object-fit: cover;
        transition: all .2s ease-in-out;
    }

    .card-body img:hover{
        transform: scale(1.05);
    }

    .image_card_5 {
        height: 21.1rem;
        border-radius: 0.5rem;
        width: 100%;
        border: none;
        flex-shrink: 0;

    }
    .image_card_5 img{
        height: 21.1rem;
        border-radius: 0.5rem;
        width:100%;
        object-fit: cover;
        transition: all .2s ease-in-out;
    }

    .text-card{
        display: flex;
        height: 7.4375rem;
        padding: 1.58331rem 0.87294rem 1.54169rem 0.84169rem;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        border-radius: 0.5rem;
        border: 0.633px solid #CCC;
        background: #FBFBFB;
    }
    .meet_titel{
        display: flex;
        height: 10.5rem;
        padding: 0rem 1.6375rem 0rem 1.57706rem;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }
    .more_btn:hover{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        margin-left: 16%;
        cursor: pointer;
        height: 3rem;
        width: 12rem;
        padding: 8px;
        border-radius: 3.125rem;
        background: #009A4E;
        color: #ffffff;
        box-shadow: 0px 10.133px 38px -12.667px #116D20;
        transition: 0.5s ease;

    }
    .more_btn{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        margin-left: 16%;
        cursor: pointer;
        height: 3rem;
        width: 12rem;
        padding: 8px;
        border-radius: 3.125rem;
        border: 1px solid #1C1C1C;
        color: #1C1C1C;
        font-size: 1.25rem;
    }

    .more_btn_2{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        cursor: pointer;
        height: 3rem;
        width: 12rem;
        padding: 8px;
        border-radius: 3.125rem;
        border: 1px solid #1C1C1C;
        color: #1C1C1C;
        font-size: 1.25rem;
    }
    .more_btn_2:hover{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        cursor: pointer;
        height: 3rem;
        width: 12rem;
        padding: 8px;
        border-radius: 3.125rem;
        background: #009A4E;
        color: #ffffff;
        box-shadow: 0px 10.133px 38px -12.667px #116D20;
        transition: 0.5s ease;

    }
    .more_btn_2:hover .bi-arrow-up-right{
        transform: rotate(45deg);
    }
    .more_btn:hover .bi-arrow-up-right{
        transform: rotate(45deg);
    }
    .our_info_button{
        position: relative;
    }
    .hover-content{
        position: absolute;
        left: 175px;
        top: 0;
        z-index: 999;
    }
    /*slider section*/
    .top_bar{
        position: fixed;
        display: inline-flex;
        padding: 11px 60px 12px 60px;
        justify-content: center;
        align-items: center;
        gap: 96px;
        z-index: 999;
        background: rgba(25, 24, 24, 0.6);
        backdrop-filter: blur(8px);
    }
    .top_title{
        height: 70px;
        width: auto;
    }
    .slider_section img{
        object-fit: cover;
        height: 100vh;
    }
    .slider_section{
        position: relative;
    }
    .sideMenu{
        position: absolute;
        top: 40%;
    }
    .carousel-indicators [data-bs-target] {
        width: 5px;
        height: 5px;
        margin-right: 3px;
        margin-left: 3px;
        border-radius: 50%;
    }
    .carousel-indicators .active {
        width: 30px;
        height: 5px;
        border-radius: 30%;
        background-color: #08cc08;
    }
    .top_title img{
        display: flex;
        width: 64px;
        height: 64px;
        padding: 4px 11px 4px 11px;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        background: #FFF;
    }
    .second_logo{
        padding: 4px 5px !important;
    }
    .top_bar h3{
        color: #FFF;
        margin: 0;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .tb_border{
        font-size: 21px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        border-right: 2px solid #ffffff;
        background: linear-gradient(91deg, #B4FF69 0.33%, #F3EE65 105.05%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .tb_bg{
        font-size: 21px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        background: linear-gradient(90deg, #99EDFF -2.28%, #CDFF8C 105.19%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    #our_info_submenu {
        display: none;
    }
    .sidemenu_arrow{
        margin-top: 1.1rem;
    }

    .sidemenu_1{
        position: relative;
        display: flex;
        width: 160px;
        height: 80px;
        padding-left: 20px;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
        border-radius: 0px 8px 8px 0px;
        background: rgba(255, 255, 255, 0.70);
        backdrop-filter: blur(4px);
    }
    .sidemenu_1:hover {
        border-radius: 0;
        background: #009A4E;
        color: #ffffff;
        transition: 0.5s ease;
    }

    .sidemenu1-2{
        display: flex;
        width: 160px;
        height: 80px;
        justify-content: center;
        align-items: center;
        gap: 16px;
        border-radius: 0px 8px 0px 0px;
        background: rgba(255, 255, 255, 0.70);
        backdrop-filter: blur(4px);
    }
    .sidemenu1-2:hover{
        border-radius: 0;
        background: #009A4E;
        color: #ffffff;

    }
    .sidemenu1-3{
        display: flex;
        width: 160px;
        height: 80px;
        justify-content: flex-start;
        align-items: center;
        gap: 16px;
        padding-left: 12px;
        border-radius: 0px 0px 8px 0px;
        background: rgba(255, 255, 255, 0.70);
        backdrop-filter: blur(4px);
    }
    .sidemenu1-3:hover{
        border-radius: 0;
        background: #009A4E;
        color: #ffffff;
        transition: 0.5s;

    }
    .cm_grid_menu{
        display: grid;
        grid-template-columns: 2fr 1fr;
    }
    .sidemenu_2{
        display: flex;
        width: 160px;
        height: 80px;
        padding-right: 12px;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
        border-radius: 8px 0px 0px 8px;
        background: rgba(255, 255, 255, 0.70);
        backdrop-filter: blur(4px);
    }
    .sidemenu_2:hover{
        border-radius: 0;
        background: #009A4E;
        color: #ffffff;
    }
    .sideMenu a, .sideMenu a{
        color: #1C1C1C;
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .cm_grid_gallery {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 10px;
    }

    .gallery_img_1 {
        grid-area: 1 / 1 / span 1 / span 7;
        height: 21rem;
        border-radius: 1rem;
        overflow: hidden;


    }
    .gallery_img_1 img{
        height: 21rem;
        width: 100%;
        object-fit: cover;
        border-radius: 1rem;
        transition: all .2s ease-in-out;
    }
    .cm_grid_gallery img:hover{
        transform: scale(1.05);
    }

    .gallery_img_2 {
        grid-area: 1 / 8 / span 1 / span 5;
        height: 21rem;
        border-radius: 1rem;
        overflow: hidden;

    }
    .gallery_img_2 img{
        height: 21rem;
        width: 100%;
        object-fit: cover;
        border-radius: 1rem;
        transition: all .2s ease-in-out;
    }
    .gallery_img_3 {
        grid-area: 2 / 1 / span 1 / span 4;
        height: 16rem;
        border-radius: 1rem;
        overflow: hidden;

    }
    .gallery_2nd_row img{
        height: 16rem;
        width: 100%;
        object-fit: cover;
        border-radius: 1rem;
        transition: all .2s ease-in-out;
    }
    .gallery_img_4 {
        grid-area: 2 / 5 / span 1 / span 4;
        height: 16rem;
        border-radius: 1rem;
        overflow: hidden;

    }

    .gallery_img_5 {
        grid-area: 2 / 9 / span 1 / span 4;

        height: 16rem;
        border-radius: 1rem;
        overflow: hidden;

    }
    .gallery_img_6 {
        grid-area: 3 / 1 / span 1 / span 6;
        height: 21rem;
        border-radius: 1rem;
        overflow: hidden;

    }
    .gallery_img_6 img{
        height: 21rem;
        width: 100%;
        object-fit: cover;
        border-radius: 1rem;
        transition: all .2s ease-in-out;
    }
    .gallery_img_7 {
        grid-area: 3 / 7 / span 1 / span 6;
        height: 21rem;
        border-radius: 1rem;
        overflow: hidden;

    }
    .gallery_img_7 img{
        height: 21rem;
        width: 100%;
        object-fit: cover;
        border-radius: 1rem;
        transition: all .2s ease-in-out;
    }
    .video-item{
        width: 40rem;
        height: 22.5625rem;
        padding: 10px;
    }
    .video-item img{
        border-radius: 1rem;
        object-fit: contain !important;
    }
    .gallery_title{
        margin-top: 8rem;
        margin-bottom: 6rem;
        text-align: center;
    }
    .gallery_title h1{
        color: #1C1C1C;
        font-size: 3rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    footer{
        /* height: 400px; */
        background: rgba(30, 65, 25, 1);
    }
    .footer-img  {
        width: 122.53px;
        height: 24px;
    }

    .img-padding {
        padding: 0px 0.51px 0.32px 0px;
    }
    .footer-text{
        color: rgba(255, 255, 255, 1);
        font-size: 16px;
        font-weight: 300;
        line-height: 19px;
        letter-spacing: 0em;
        text-align: left;
    }
    .pksf-logo{
        display: flex;
        width: 6rem;
        height: 6rem;
        padding: 0.5rem 1rem;
        justify-content: center;
        align-items: center;
        border-radius: 1rem;
        background: #FFF;
    }
    .footer_logo_section h5{
        color: #FFF;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .address .social h4 {
        font-size: 20px;
    }
    .address p {
        color: #FFF;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 2rem; /* 160% */
    }
    footer hr {
        width: 100%;
        /* margin-left: auto;
        margin-right: auto; */
        color: rgba(180, 255, 105, 1);
        opacity: 1;
    }

    .copyrights p{
        font-size: 16px;
        font-weight: 300;
        line-height: 19px;
        letter-spacing: 0em;
        text-align: left;

    }
    /* .header {
        background-color: rgba(0, 154, 78, 1);
    } */

    /* Breadcrumb */
    .breadcrumb_title{
        font-family: 'Li Ador Noirrit Bold', sans-serif;
        margin-top: 8rem;
        color: rgb(173 173 173);
        font-size: 76px;
        /*font-style: italic;*/
        /*font-style: italic;*/
    font-weight: 700;
    line-height: 58px;
    letter-spacing: 0em;
}

    .button-style button{
        width: 120px;
        background-color: rgba(255, 255, 255, 0.7);

    }
    .button-style button:hover{
        background-color: rgba(255, 255, 255, 1);
    }
    .loginPage{
        position: relative;
        width: 41.71875rem;
        height: 37rem;
        flex-shrink: 0;
        border-radius: 0.75rem;
        background: rgba(255, 255, 255, 0.90);
        backdrop-filter: blur(3px);
    }
    .btn-close{
        position: absolute;
        right: 15px;
        top: 15px;
    }
    .form-check-input:checked {
        background-color: #009A4E;
        border-color: #009A4E;
    }
    .modal-header{
        border: none !important;
    }
    .modal-body img{
        height: 6rem;
    }
    .modal-body h6{
        color: #1C1C1C;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 1.7rem;
    }
    .modal-body p{
        color: #6A6A6A;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .modal-body h5{
        color: #000;
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .login_input{
        padding-left: 8rem;
        padding-right: 8rem;

}
.login_input button {
    margin-bottom: 8rem;
}
.login_input a{
    color: #222;
    text-align: right;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}
.form-check label{
    color: #222;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400;
}

/* contact.html page style */
.input-container {
    position: relative;
}

/* Style the label */
.input-container label {
    position: absolute;
    top: -10px;
    left: 17px;
    background-color: rgba(242, 246, 238, 1);
    padding: 0 5px;
    font-size: 16px;
    color: #333;
}

/* Style the input field */
.custom-input {
    width: 100%;
    background-color: rgba(242, 246, 238, 1);
    padding: 10px;
    border: 1px solid rgba(196, 201, 191, 1);
    outline: none;
    border-radius: 8px;
    font-size: 16px;
}

/* Style the textarea */
.custom-textarea {
    width: 100%;
    height: 150px; /* Adjust the height as needed */
    background-color: rgba(242, 246, 238, 1);
    padding: 10px;
    border: 1px solid rgba(196, 201, 191, 1);
    outline: none;
    border-radius: 8px;
    font-size: 16px;
    resize: vertical; /* Allow vertical resizing */
}
.sidemenu_1:hover .cm_grid_menu svg {
    stroke: white;
}
.cm_grid_menu svg {
    stroke: black;
}

    .item {
        border-radius: 1rem;
        overflow: hidden;
    }
    .modal input::-ms-input-placeholder { /* Edge 12-18 */
        color: #A1A1A1;
        font-size: 0.6875rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .modal input::placeholder {
        color: #A1A1A1;
        font-size: 0.6875rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .field-icon {
        float: right;
        margin-right: 5px;
        margin-top: -30px;
        position: relative;
        z-index: 2;
    }
    .main-page{
        position: absolute;
    }
    .side_menu_two{
        top: 40%;
        position: relative;
    }
    .card-img{
        width: 16.875rem;
        height: 21.25rem;
        flex-shrink: 0;
        border-radius: 0.5rem;
        border: 1px solid #C4C9BF;
        background: #F2F6EE;
        overflow: hidden;

}
.img_main{
    position: relative;
    height: 14.3125rem;
    flex-shrink: 0;
    /*background: linear-gradient(140deg, rgba(180,255,105,0.5) 0%, rgba(0,154,78,0.5) 100%);*/
    display: flex;
    width: 100%;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
}
.img_main::before{
    content: "";
    /*background: linear-gradient(120deg, rgba(180, 255, 105, 0.2) 0%, rgba(0, 154, 78, 0.2) 100%);*/
    background: url("assets/image/Maskgroup.png");
    background-size: cover;
    filter: blur(100px);
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 14.3125rem;
}
.designation h5{
    color: #1C1C1C;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.designation p{
    color: #8F8F8F;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.designation{
    padding-top: 25px;
    text-align: center;
    height: 6.9rem;
    flex-shrink: 0;
    z-index: 1;
    background: #F2F6EE;
}
.page_body{
    background: #F2F6EE;
}
.page_title{
    position: relative;
}
.Page-sideMenu{
    position: absolute;
    top:42%;
}
.Page-sideMenu a{
    color: #1C1C1C;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.page-main-section{
    margin-bottom: 12rem;
}
.page-main-section-two{
    margin-bottom: 6rem;
}

/* Popup Styling */
.img-popup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(3, 3, 3, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.img-popup img {
    max-width: 900px;
    width: 100%;
    opacity: 0;
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    -o-transform: translateY(-100px);
}

.close-btn {
    width: 35px;
    height: 30px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
}

.close-btn .bar {
    height: 4px;
    background: #333;
}

.close-btn .bar:nth-child(1) {
    transform: rotate(45deg);
}

.close-btn .bar:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
}

.opened {
    display: flex;
}

.opened img {
    animation: animatepopup 1s ease-in-out .8s;
    -webkit-animation: animatepopup .3s ease-in-out forwards;
}

@keyframes animatepopup {

    to {
    opacity: 1;
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    }

}

@media screen and (max-width: 880px) {

    .container .container__img-holder:nth-child(3n+1) {
    margin-left: 16px;
    }

}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 21px;
    font-weight: 800;
    border: none;
    outline: none;
    background: #009A4E;
    color: #ffff;
    cursor: pointer;
    padding: 6px;
    border-radius: 5px;
}

#myBtn:hover {
    background: #ef0f0f;
}
.loction-map{
    height: 522px;
}