.background-image {
            width: 100%;
            height: auto;
            display: block;
          }
        
        .community_container{
            
            background: url('../images/community_cover_list.png') no-repeat;
            background-size: cover;
            object-fit: cover;
            background-attachment: fixed;
            background-position: center center;
            
    
            background-color: #d1c5bb;
            font-family: 'Arial Narrow', Arial, sans-serif;
            text-align: center;
            min-height:100vh;
            position: relative;
            width: 100%;
            height: auto;
        }

        .community-intro {
            
            padding: 0.6em;
            filter: alpha(opacity=90); 
            border: 1px solid #e5d5c8; 
            border-radius: 10px;
            width: 20vw;
            height: 40%;/*39vh;*/
            
            top:34vh;
            left:35.5vw;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: fixed; 
            overflow: auto;    
        }

        .community-intro h2 {
            color: #9c89b8; /* Lavender */
            text-align: center;
            font-size: 2vh;
        }

        .community-intro p {
            line-height: 0.85em;
            text-align: justify;
            font-size: 0.8em;
            margin-bottom: 0.8em;
        
        }


        .resources-section {
            width: 39%;
            padding: 10px;
            /*margin: 0 auto;
            top: 38.5vw;*/
            bottom: 10px;
            
            right: 43%; 
            position: fixed;
        }

        .resources-section h2 {
            text-align: center;
            color: #D37F7F;
            font-size: 2vw;
            margin-bottom: 1vw;
        }
        .resources-section_right {
            width:30%;
            padding: 10px;
            /*margin: 0 auto;*/
        
            /*top:19vw;*/
            bottom: 10px;
            left: 56%;/*55vw;*/ 
            position: fixed;
        }

        .resource-grid{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between; /* Distributes items */
            align-items: flex-end; /* Aligns items at the bottom */
            height: 100%; /* Makes sure container stretches fully */
        }
        .resource-item-left, .resource-item-right{
            background-color: #ddd5cc;
            text-decoration: none;
            
            text-align: center;
            border-radius: 1.5vw;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;

            overflow: hidden;
            box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
            z-index: 2;
            height:auto;
            width: 100%;
        }
        .resource-item-left {
            flex: 1 1 calc(25% - 20px); /* Adjust width for 4 columns */
        }
        .resource-item-right {
            flex: 1 1 calc(33.33% - 20px); /* Adjust width for 3 columns */
        }

        .resource-item-left:hover, .resource-item-right:hover  {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        .resource-grid img {
            padding: 1vh 1vw 0.5vh ;
            height:  8vw;
            width:auto;         
        }
        .resource-grid i {
            font-size: 2vw;
            color: #D37F7F;
            margin-bottom: 1vw;
        }

        .resource-grid h3 {
            color: #755c59;
            font-size: 1vw;
            padding-bottom: 1vh;
            
        }

        #legal_support_bak{
            cursor: pointer;
            
            position: relative;
            /*display: table;
            background-color: white;  
            width: 120px; */

        }
        #cultural_adjustment{
            cursor: pointer;
            
            position: relative;
            display: table;
        }
        #popup-close-btn{
            padding:5px 0;
            /*right:10vw;*/
            margin: 0;
            width: auto;
            height: 6%;
            position: relative;
        }
        .button {
            background-color: #a190a3;
            border: 1px solid #5c3832;;
            border-radius: 10px;  
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

            color: white;

            padding: 4px 32px;

            text-align: center;
            text-decoration: none;

            display: inline-block;

            font-size: 12px;
            margin: 4px 2px;
            cursor: pointer;
            right:30px;
            position: absolute;
          }
        .button:hover {
            transform: translate(-2px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        #dynamic-content-container{

            padding: 0.6em;
            background-color: #bba795;
           
            border-radius: 10px; 
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   
            overflow: auto;    
            width: 100%;
            height: auto;
            top:0;
            bottom: 10px;
            left: 0;
            right : 0;
            margin:auto;
            text-align: justify;

            position: absolute;
            display: none;
            z-index:99;
        }
        #dynamic-content_bak{
            padding: 0.6em;
            filter: alpha(opacity=90); 
            border: 1px solid;
            border-radius: 10px;
            /* width: 97%;*/
            width: 90%;
       
            top:3em;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            position: relative; 
            overflow: auto;    
        }

/* Create three unequal columns that floats next to each other */
.column {
    float: left;
    padding: 10px;
    background-color: white;
    
  }
  
.left {
    background: url('../images/left_border.png') no-repeat;
    background-size: cover;
    
    background-attachment: scroll;
    background-position: center center;

    width: 5%;
    height: 100%;
    position: relative;
}
  .right {
    background: url('../images/right_border.png') no-repeat;
    background-size: cover;
    
    background-attachment: scroll;
    background-position: center center;

    width: 10%;
    height: 100%;
    position: relative;
  }
  .middle {

    width: 85%;
    height: 100%;
    overflow: auto;
    position:relative
    
  }
#dynamic-content{
    padding: 1em;
    /*filter: alpha(opacity=90); */
    border: 1px solid;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #fbeee7;

    width: 100%;
    height: 93%;
    overflow: auto;
    position:relative
}
  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }