html, body {height: 100%; background-color: #999; margin: 0;padding: 0; }
body {
    display: flex;
    flex-direction: column;
    }
    .header { 
            text-align: left; 
            padding: 0px;
            flex-shrink: 0;            
            background-color: black;
           }
    .nav-container { background-color: black; align-items: center; width: 100%; }
    .navbar-brand{align-items: center;margin-right: auto;}
    .nav-links{display: flex; align-items:center;gap:20px;right: 100px;position: absolute;right: 100px;}
    .nav-links-m { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; margin: 5% auto; }
    .nav { display: flex; justify-content: space-between;align-items: center; gap: 10px;  margin: 0 auto; }
    .nav-m { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto; }
    .nav a { padding: 10px; color: white; text-decoration: none; }
    .nav-m a { padding: 10px; color: white; text-decoration: none; text-align: center; }
    .nav .dropdown { position: relative; display: inline-block; }
    .nav .dropdown-content { display: none; position: absolute; background-color: black; min-width: 160px; z-index: 1; z-index: 1000;}
    .nav .dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; }
    .nav .dropdown:hover .dropdown-content { display: block; }
    .line {
        display: block;
        background-color:#3b3a3a;
        height: 2px;
        width: 100%;
        flex-shrink: 0; /* Prevent shrinking */
        }
    .slogan { color:#bbb;font-size: 1.5em; margin: 20px 0; display:block;display: none;}

    .content {
        width: 100%;
        flex: 1;
        overflow-y: auto; /* Allows vertical scrolling */
        overflow-x: hidden; /* Hides horizontal scrollbar */
        display: flex;
        flex-direction: column;
        background-color: black;
        color: #a3a3a3;
        position: relative;    
        align-items: center;      
        }
    
   
    /*.backgroundimg {position: absolute; top: 0; left: 0; height: 100%;width:100%;background-image: url('jpg/NikonZ6iiWithPinhole.jpg'); background-size: cover; background-position: center; z-index: 1;opacity: 0.5;}*/
    
   
    .row {
        width: 70%;
        flex: 1;
        display: flex;
        align-items: center,stretch; 
        flex-wrap: wrap; /* alow sub items wrap */
        justify-content: center;       
            
        }
    .row_narrow {
            width: 75%;
            flex: 1;
            display: flex;
            align-items: center; 
            flex-wrap: wrap; /* alow sub items wrap */
            justify-content: center;
            align-items: stretch;      
            }    
   .box_split_l{
    width: 64%;
    height: auto;
    padding:10px;
    display: flex; 
    flex-wrap: wrap; /* alow sub items wrap */
    justify-content: center; 
    align-items: center; 
   }
   .box_split_r{
    width: 30%;
    height: auto;
    padding:10px;
    display: flex; 
    flex-wrap: wrap; /* alow sub items wrap */
    justify-content: center; 
    align-items: center; 
   }
   .txt_l
   {
     width: 25%;
     text-align: right;
   }
   .txt_r{
    width: 70%;
     text-align: left;
   }

    .box_main {
        width: 100%;
        height:100%;
        background-color: #000;
        border: 1px solid #393939;
        padding: 16px;
        position: relative;
        box-shadow: 5px 5px 3px #4f4e4e;
        display: flex; 
        justify-content: center; 
        align-items: center; 
        border-radius: 15px; /* Adjust the value as needed */
    }    
  
    .box_item {
        width: 28%;
        height: auto;
        background-color: #000;
        border: 1px solid #676767;
        margin: 5px;
        padding: 10px 10px 25px;
        position: relative;
        box-shadow: 5px 5px 3px #4f4e4e;
        display: flex; 
        flex-wrap: wrap;
        justify-content: center; 
        align-items: center; 
        border-radius: 15px; /* Adjust the value as needed */
    }
        
    .itemimg {
        max-width: 100%;
        max-height: 100%;
    }

    
    .itemimg img {
        max-width: 100%; 
        max-height: 100%; 
        object-fit: contain; /* Keep retio, disply inside the box */
    }
    
    .item_text {
        padding: 20px 25px 2px 15px;
        color:#cdcccc;
        text-shadow: 3px 3px 1px rgb(18, 17, 17);
        position: absolute; 
        bottom: 0px;
        left: 20px;              
        z-index: 4;
        display:flex;       
        height: auto;
        text-align: left; 
        font-family: Arial;
        font-size: 1rem;
        word-break: break-word;
    }

    .box {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 20px;
        justify-content: center;
        position: relative;
    }
    .foregroundimg{
        max-width: 100%;
        max-height: 100%;
        z-index: 3;
    /* position: relative;top: 2%;opacity: 1;*/ 
    }
    .foregroundimg img {
        max-width: 100%; 
        max-height: 100%; 
        object-fit: contain; /* Keep retio, disply inside the box */
    }
    .required {
        color: red;
    }
    
    .Main-text { 
               color:#bbb;
               position: relative; 
               padding:3px;
               left:1%;
               right: 10%; 
               text-align: left;
               font-family: Arial;
               font-size: 1rem;
               /*display:flex;*/
               width: 80%;
               }
    .text_lable{
            color: #c1c1c1;
            font-family: Arial;
            font-size: 1.2rem;
         }           
    .SpaceInRow { 
             display: block;
             height: 30px;
             width: 100%;
             flex-shrink: 0; /* Prevent shrinking */
            }
    .footer { 
            width: 100%;
            flex-shrink: 0;
            text-align: center;
            padding: 10px;
            background-color: #333;
            color: #aaa;         
           }