.gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .mythumbnail {
            /*width: 100px;
            height: 100px;
            object-fit: cover;*/
            cursor: pointer;
        }
        .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
        }
        .popup-content_original {
            position: relative;
            max-width: 80%;
            max-height: 80%;
        }
        .popup-content {
            position: relative;
            max-width: 80%;
            /*max-height: 80%;*/
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        
        .popup-image_original {
            max-width: 100%;
            max-height: 100%;
            display: none; /* Hide image initially */
        }
        .popup-image {
            max-width: 80%;
            /*max-height: 80%;*/
            display: block; /* Ensure the image is visible */
        }
        
        
        
        .close, .prev, .next {
            position: absolute;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }
        .close {
            top: 0px;
            right: 20px;
            color:white;
            font-size: 36px;
        }
        .prev {
            left: 20px;
            top: 50%;         
            color:white;
        }
        .next {
            right: 20px;
            top: 50%;
            color:white;
        }
        
         .title_original 
         {
            position: absolute;            
            font-size: 24px;
            cursor: pointer;
            color:Black;
             
            /*left: 10%;
            top: 2%; */        
            
            
                /* Center both horizontally and vertically */
            left: 50%;
            top: 5%;
            transform: translate(-50%, -5%);
            
        }
         .title {
            font-size: 34px;
            color: black;
            background-color: #CAE4E4;
            padding-top: 20px;
            padding-bottom:20px;
            
            font-weight:bold;
         
            width: 100%; /* Set the title width to 100% of its container */
            text-align: center; /* Center-align the text within the title */
        }
        
        
        
        
        .loading {
            display: none;
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        
        @media screen and (max-width:1200px)  	       
        {
	             .title 
                 {             
                    font-size: 8px;                         
                }
                
                .close {                
                     font-size: 20px;
                     right: 15px;
                }
        
        }