/* mobile.css */
/*---------------------------- header section------------------ */
.logo img {
    width: 100%;
    max-width: 115px;
}

.dropdown-menu {
    display: none;
    /* Hide by default */

    right: 0;
    background-color: white;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
    z-index: 10;
    width: 100%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

}

.fixed-portion {
    position: fixed;
    width: 100%;
    transition: all 0.5s ease;
    z-index: 9999;
}

.active {
    background-color: white;
    box-shadow: 0 0 10px #0000001f;

}


.dropdown-links {
    list-style: none;
    display: flex;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

.left-link {
    width: 50%;
}

.right-links {
    width: 50%;
}

.dropdown-links li {
    padding: 10px 20px;
}

.dropdown-links li a {
    text-decoration: none;
    color: #000;
    /* Adjust link color */
    font-size: 16px;
}

.dropdown-links li a:hover {
    color: #FE6E01;
    /* Adjust hover color */
}

@media (max-width: 1140px) {
    .nav-links li a {
        font-size: 14px;
    }
}

@media (max-width: 1041px) {
    .nav-links {
        display: none;
    }

    .fixed-portion {
        background-color: white;
    }

    .en p {
        display: none;
    }

    .bar {
        display: block;
    }

    .header-content {
        flex-direction: column;
    }

    .header-section {
        justify-content: flex-end;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .header-left-content {
        width: 100%;
        align-items: center;
        order: 2;
        padding-bottom: 62px;
    }

    h1 {
        padding-right: 0;
        text-align: center;
        padding-top: 20px;
    }

    .header-left-content p {
        text-align: center;
    }

    .header-right-content {
        width: 70%;
    }

    .reg-btn {
        width: 40%;
        padding: 12px 14px;
    }

}

@media (max-width: 991px) {
    .logo img {
        width: 100%;
        max-width: 80px;
    }



}

@media (max-width: 768px) {
    h1 {
        font-size: 40px;

    }

    .dropdown-links {
        flex-direction: column;
    }
}

@media (max-width: 523px) {
    .reg-btn {
        width: 100%;
    }

    h1 {
        font-size: 20px;
    }
}

/* dropdown */

/*------------------------ aboutus-section------------------------------------ */
@media (max-width: 991px) {
    .aboutus-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .aboutus-content-left {
        width: 80%;
    }

    .aboutus-content-right {
        width: 100%;
        text-align: center;
        padding: 20px 0;
    }

    .content-imgs {
        flex-direction: column;
    }

    .img-left {
        width: 100%;
    }

    .img-right {
        width: 100%;
        padding: 10px 0;
        padding-left: 10px;
    }

    .aboutus-content-right h4 {
        padding-left: 0;
    }
}

@media (max-width: 515px) {
    .bsv h2 {
        font-size: 20px;
        text-align: center;
    }

    .aboutus-content-left {
        width: 100%;
    }

    .aboutus-content-right {
        width: 100%;
        text-align: left;

    }

    .aboutus-content-right p {
        padding-left: 0;
    }

    .aboutus-content-right h4 {
        text-align: left;
    }
}

/* Responsive adjustments for tablets (up to 991px) */
@media screen and (max-width: 991px) {
    .icons-content {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .box {
        margin-bottom: 20px;
    }
}

/* Responsive adjustments for mobile (up to 768px) */
@media screen and (max-width: 768px) {
    .icons-content {
        flex-direction: column;
        align-items: center;
    }

    .box {
        width: 100%;
        margin-bottom: 20px;
    }

    .icon {
        width: 120px;
        height: 120px;
    }

    .fa-solid,
    .fa-regular {
        font-size: 30px;
    }

    .reg-btn-2 {
        padding: 11px 9px;
        font-size: 12px;
    }
}

/* Extra small screens (up to 480px) */
@media screen and (max-width: 480px) {
    .icon {
        width: 100px;
        height: 100px;
    }

    .fa-solid,
    .fa-regular {
        font-size: 25px;
    }

    .box p {
        font-size: 14px;
    }
}

/* -------------------------------------event section----------------------------------- */
@media (max-width: 1024px) {
    .event-content {
        flex-direction: column;
    }

    .upcoming-event {
        width: 70%;
    }

    .recent-event {
        width: 70%;
        padding-top: 50px;
    }
}

@media (max-width: 768px) {
    .event-img {
        width: 25%;
    }

    .upcoming-event {
        width: 100%;
    }

    .recent-event {
        width: 100%;
    }

    .event-info p {
        font-size: 12px;
    }

    .event-info h5 {
        font-size: 17px;

    }

    .fa-clock,
    .fa-calendar,
    .fa-location-dot {
        color: white;
        padding-right: 10px;
        font-size: 15px;
    }

    .event-supportingtext h4 {
        font-size: 24px;
    }
}

@media (max-width: 568px) {
    .event-img {
        width: 30%;
    }

    .event {
        flex-direction: column;
    }

    .event-info h5 {
        padding-left: 0;
    }

    .event-info p {
        padding-left: 0;
    }

    .grey-line {
        margin: 2px 0;
    }

    .view-btn {
        margin-top: 10px;
    }

    .event-supportingtext h4 {
        font-size: 18px;
    }

    .event-info h5 {
        font-size: 15px;
    }

    .event-heading h3 {
        font-size: 20px;
        text-align: center;
        margin-top: 10px;
        padding: 12px 0;
    }
}

/* --------------------------gallery section-------------------------------- */
@media (max-width: 556px) {

    .f1 {
        padding: 4px;
    }

    .f2 {
        padding: 4px;
    }

    .f3 {
        padding: 4px;
    }

    .f4 {
        padding: 4px;
    }

    .f5 {
        padding: 4px;
    }

    .f6 {
        padding: 4px;
    }
}

/* -----------------------------------members section----------------------------------- */
@media (max-width: 991px) {
    .m-l {
        order: 5;
    }

    .m-r {
        order: 6;
    }
}

/* -----------------------------------join community section----------------------------------- */
@media (max-width: 991px) {
    #jcs {
        flex-direction: column;
        align-items: center;
        margin: 15px 0;
    }

    .join-community-content-right {
        width: 100%;
        padding-left: 0;
        display: flex;
        align-items: center;
        text-align: center;
        margin: 35px 0;
    }

    .jcs-btn {
        margin-left: 0;
    }

    .join-community-content-right p {
        padding-left: 0;
    }

    .jcs-heading {
        padding-left: 0;
        text-align: center;
    }

    .join-community-content-left {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }

    .j1 {
        width: 60%;
    }

    .j2 {
        width: 60%;
    }

    .j3 {
        width: 60%;
    }

    .combine {
        width: 100%;
    }
}

@media (max-width: 568px) {
    .jcs-heading {
        font-size: 20px;
    }

    .join-community-content-right p {
        line-height: 30px;
    }
}

/* -----------------------------------comming soon section----------------------------------- */
@media (max-width: 991px) {
    .comming-soon-content {
        flex-direction: column;
    }

    .csl {
        width: 100%;
        order: 2;
        align-items: center;
        text-align: center;
    }

    .csr {
        width: 80%;
    }
}

@media (max-width: 768px) {
    .xyz {
        padding-bottom: 45px;
        display: none;
    }
    #cs-btn {
        margin-bottom: 150px;
    }
}

@media (max-width: 554px) {
    .xyz {

        padding-bottom: 100px;
    }
   
}

/*------------------------------ footer responsiveness----------------- */
@media (max-width: 768px) {
    .footer-content-r {
        width: 100%;
    }

    .footer-content-l {
        width: 65%;
    }

    .footer-content {
        justify-content: space-between;
    }

    .footer-content-r h5 {
        font-size: 20px;
    }

    .footer-content-l h5 {
        font-size: 20px;
    }

    .footer-content-l p {
        font-size: 12px;
    }

    .footer-content-r p {
        font-size: 12px;
        padding-bottom: 0;
    }

    .footer-add {
        justify-content: flex-start;
    }

    .second-footer-content {
        flex-direction: column;
    }

    .fcl p {
        font-size: 12px;
        padding: 10px 0;
        text-align: center;
    }
}

@media (max-width: 523px) {
    .footer-content-l {
        width: 100%;
        order: 2;
    }

    .footer-content-m {
        width: 65%;
        justify-content: flex-start;
    }

}

@media (max-width:768px) {
    .fa-location-arrow:before {
        font-size: 14px;
    }

    .fa-phone:before {
        font-size: 14px;
    }
}

/* -----------------------------------blackbox  section----------------------------------- */
@media (max-width: 1200px) {
    .blackbox-content {
        flex-direction: column;
        align-items: center;
        margin-top: 60px;
    }

    .blackbox-lc {
        width: 100%;
        order: 2;
        text-align: center;
        align-items: center;
        padding: 20px;
    }

    .donate-row {
        display: block;
        width: 45%;
    }

    .bank-info {
        flex-direction: column;

    }
}

@media (max-width: 682px) {
    .donate-row {
        width: 100%;
    }
}



/* gallary section  */

@media (max-width: 768px) {
    .photos {
       flex-direction: column;
    }
    .frame-1 {
        width: 100%;
    }
    .frame-2 {
        width: 100%;
    }
}
@media (max-width: 475px) {
    .upperf {
        flex-direction: column;
    }
    .downf {
        flex-direction: column;
    }
    .f1{
        width: 100%;
    }
    .f2{
        width: 100%;
    }
    .f3{
        width: 100%;
    }
    .f4{
        width: 100%;
    }
    .f5{
        width: 100%;
    }
    .f6{
        width: 100%;
    }
}