html, body {
        height: 100%; /* Fontos! */
        }


    body{
        background-color: #0D0D0D!important;
        color: #ffffff;
        font-family: 'EB Garamond', serif!important;
        line-height: 1.6;
        font-size:20px;
        display: flex;
        flex-direction: column;
        min-height: 100vh; /* Legalább a képernyő méretű legyen */
        }
  
    main.container-fluid{
        flex: 1; /* A tartalom foglalja el a maradék helyet */
        }


   
    .md-3{
        color:black;
        font-size: 18px;
        margin-bottom: 15px;
        border-bottom: 3px solid rgba(94, 3, 3, 0.999);
        }
        
    
    h1, h2, h3 {
        color: black;
        font-family: "Cinzel Decorative",'serif'!important;
        font-style: italic;
        font-size:50px;
        font-weight: 400;
        text-shadow: 
        /* Fény (Highlight) - Felső-bal, világosabb */
        -2px -2px 2px rgba(243, 241, 241, 0.01), 
        /* Árnyék (Shadow) - Alsó-jobb, sötétebb */
        2px 2px 2px rgba(94, 3, 3, 0.999);
        border-bottom: 3px solid rgba(94, 3, 3, 0.999);
        margin-bottom:15px;
        }    

    tr{
        border-bottom: 2px solid rgba(94, 3, 3, 0.999);
        }    

    .table > thead{
        background-color:#550000!important;
        color: white!important;
        text-align: center;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.999);
        }

    td{
        text-align: center;
        font-weight: bold;
        }    

    td > img{
        border-bottom: 3px solid rgba(94, 3, 3, 0.999);
        margin-bottom:3px;
        }    


    .text-end{
        text-shadow:1px 0px 0px rgba(94, 3, 3, 0.999);
        }    


    .blokk3 h2{
        color:white;
        font-family: "Cinzel Decorative",'serif'!important;
        font-style: italic;
        font-size:50px;
        text-shadow: 
        /* Fény (Highlight) - Felső-bal, világosabb */
        -2px -2px 2px rgba(243, 241, 241, 0.01), 
        /* Árnyék (Shadow) - Alsó-jobb, sötétebb */
        2px 2px 2px rgba(94, 3, 3, 0.999);
        border-bottom: 3px solid rgba(94, 3, 3, 0.999);
        margin-bottom:15px; 
        }    
   


    a:hover{
        color:#B30000!important;
        font-weight:bold;
        text-decoration: underline;
        }
        
    

    .blokk1{
       color:white;
       font-size:18px;
       margin-bottom: 5px!important;
       }
     
    .blokk2 >.section-title{
        color:black;
        font-size:18px;
        }


    .blokk2{
        background:white;
        color:black;
        font-size:18px;
        margin-bottom: 5px!important; 
        }




    .blokk3{
        color:white;
        margin-bottom: 5px!important; 
        }
        

    .mt-auto{
        margin-top: 0!important;
        }      
  
    .card.h-100{
        background-color: #000000;
        border: 2px solid #2F4F4F;
        border-radius: 10px;
        box-shadow:
        1px 1px rgb(82, 1, 1),
        -5px 0px 3px rgb(44, 44, 31);
        padding: 12px!important; 
        color: #E5E5E5;
        accent-color:#999999;
        font-size:0.9em; 
        }
    
    

    .card-border{
        height: 100%;
        background: rgba(255, 255, 255, 0.1);
        border:1px  #2F4F4F;
        }      
    
    .col-md-6.col-lg-3.mb-5 .card-text{
        font-size: 20px;
        }    

    .card-text{
        font-family:"Spectral SC",'serif';
        color: white;
        font-size: 25px;
        font-weight: 700;
        text-align: center;
        text-shadow:2px 2px 2px rgba(5, 5, 5, 0.999);
        }

    .modal-content{
        color:black;     
        }

    .modal-title{
        color: rgb(0, 0, 0);
        font-family:"Spectral SC",'serif';
        font-weight:bold!important;
        font-style: italic;
        text-align: center;
        margin-bottom: auto;
        text-shadow: 1px 1px 1px rgba(94, 3, 3, 0.999);
        border-bottom: 3px solid rgba(94, 3, 3, 0.999);
        margin-bottom:15px;
        }
    
        
    
    .card-title{
        color: rgb(0, 0, 0);
        font-family:"Spectral SC",'serif';
        font-weight:bold!important;
        font-size:30px;
        font-style: italic;
        text-align: center;
        margin-bottom: auto;
        text-shadow: 1px 1px 1px rgba(94, 3, 3, 0.999);
        } 
          
    .text-muted{
        color:black!important;
        font-family: "Spectral SC",'serif';
        font-size: 15px;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(94, 3, 3, 0.999);
        }   

    .blokk3 .card-title{
        color: black;
        font-family:"Spectral SC",'serif';
        font-weight:bold!important;
        font-style: italic; 
        font-size: 25px;
        text-align: center;
        text-shadow: 1px 1px 1px rgba(94, 3, 3, 0.999);
        border-bottom: 3px solid rgba(94, 3, 3, 0.999);
        }

    .blokk3 .card-text{
        color:white!important;
        font-family: "EB Garamond",'serif';    
        font-weight:bold!important;
        font-size:20px;
        text-align: center;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.999);
        }

    p.lead{
        color:white!important;
        font-family: "EB Garamond",'serif';    
        font-weight:bold!important;
        font-size: 30px;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.999);
        }     


      

    .mb-2{
        color:black;
        }


    .elem{
        color:white!important;      
        }

    
    .card-header{
        background-color:#550000!important;
        color: white!important;
        text-align: center;
        font-weight: bold;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.999);
        }

    .card-body{
        color:black;
        padding: 1rem 0rem;
        }    
    
    .card-body.d-flex.flex-column{
        padding: 1rem 1rem!important;
        }
     

    .btn:hover{
        background-color:#8B0000!important;
        color:#E5E5E5!important;
        }

            
    .btn{
        font-weight: 600;
        padding: 12px 30px;
        border-radius: 30px;
        }

  

    
    .btn.btn-secondary.me-2{
        background-color: #550000;
        color: #FFFFFF;
        text-align: center!important;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        border: 2px solid #8B0000;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: 0.3s ease, color 0.3s ease;
        }

    .btn.btn-secondary{
        background-color: #550000;
        color: #FFFFFF;
        text-align: center!important;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        border: 2px solid #8B0000;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: 0.3s ease, color 0.3s ease;
        }

    .btn.btn-primary{
        background-color: #550000;
        color: #FFFFFF!important;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        text-align: center!important;
        border: 1px solid #8B0000;
        padding: 0.5em 1em!important;
        border-radius: 5px!important;
        transition: 0.3s ease, color 0.3s ease;
        }
            
    
     
    .btn-white-outline{
        background-color: #550000;
        color: white;
        text-align: center!important;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        border: 1px solid #8B0000;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition:0.3s ease, color 0.3s ease;
        }   


    .btn-danger{
        background-color: #550000;
        color: #FFFFFF;
        text-align: center!important;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        border: 1px solid #8B0000;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: 0.3s ease, color 0.3s ease;
        }
    
    
    .btn.mt-auto{
        background-color: #550000;
        color: #FFFFFF;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        text-align: center!important;
        border: 1px solid #8B0000;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: 0.3s ease, color 0.3s ease;
        }

    .custom-navbar .custom-navbar-nav li {
            margin-left: 15px;
            margin-right: 15px; } 
    .custom-navbar .custom-navbar-nav li a {
          font-weight: 500;
          color: #ffffff!important;
          background-color: #212529;
          opacity: .5;
          -webkit-transition: .3s all ease;
          -o-transition: .3s all ease;
          transition: .3s all ease;
          position: relative; }
          @media (min-width: 768px) {
            .custom-navbar .custom-navbar-nav li a:before {
              content: "";
              position: absolute;
              bottom: 0;
              left: 8px;
              right: 8px;
              background: #550000;
              height: 5px;
              opacity: 1;
              visibility: visible;
              width: 0;
              -webkit-transition: .15s all ease-out;
              -o-transition: .15s all ease-out;
              transition: .15s all ease-out; } }
    .custom-navbar .custom-navbar-nav li a:hover {
            opacity: 1; }
        .custom-navbar .custom-navbar-nav li a:hover:before {
              width: calc(100% - 16px); }
    .custom-navbar .custom-navbar-nav li.active a {
          opacity: 1; }
         .custom-navbar .custom-navbar-nav li.active a:before {
            width: calc(100% - 16px); }
    

    
    .blokk1 .card-img-top{
        width: 100%;
        object-fit :cover;
        }
    
 

    .col-md-4 > .card.h-100 > .card-img-top{  
        width: 100%;
        height:200px;
        object-fit:cover;
        object-position:center;
        }

    .col .card-img-top{
        width: 100%;
        height:200px;
        object-fit:cover;
        }    

    
    .flex-column{
        background-image:linear-gradient(rgba(255, 255, 255, 0.3), rgba(139, 115, 7, 0.3)),url("http://localhost/vtes/store/products/symbol1.png");
        background-repeat: no-repeat; /* Ne ismétlődjön a kép */;
        }    



    .list-group.mb-3{
        font-weight:bold!important;
        color:#2f2f2f!important;
        border-color:#6c757d!important;
        border-width: 4px!important;
        }
        
    .list-group-item.list-group-item-action{
        font-family:"EB Garamond",'serif';
        font-weight:bold!important;
        color:white!important;
        text-shadow: 1px 1px 1px rgba(94, 3, 3, 0.999);
        background:black!important;
        border-color:#6c757d!important;
        margin: 2px;
        accent-color:#999999;
        }
        


    .input-group{
        border-color:#6c757d!important;
        border-width: 4px!important;
        }
        
    .btn-outline-secondary{
        background-color: #550000;
        color: #FFFFFF;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        border: 1px solid #8B0000;
        text-align: center!important;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: background-color 0.3s ease, color 0.3s ease;
        }
        
    .btn-success.add-to-cart{
        background-color: #550000;
        color: #FFFFFF;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        text-align: center!important;
        border: 1px solid #8B0000;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: 0.3s ease, color 0.3s ease;
        }       
    
    .btn-success.add-to-cart-simple{
        background-color: #550000;
        color: #FFFFFF;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        text-align: center!important;
        border: 1px solid #8B0000;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: 0.3s ease, color 0.3s ease;
        }    
 
        
     .btn.btn-primary.btn-sm{
        background-color: #550000;
        color: #FFFFFF;
        text-shadow: 4px 2px 2px rgba(0, 0, 0, 0.999);
        text-align: center!important;
        border: 1px solid #8B0000;
        padding: 0.5em 1em;
        border-radius: 5px;
        transition: 0.3s ease, color 0.3s ease;
        }
        
    .form-control{
        border: 1px solid #8B0000;
        padding: 5px;
        margin:5px;
        }

    
    .form-label{
        color:black;
        font-family:"EB Garamond",'serif';
        font-weight:bold!important;
        text-shadow: 1px 1px 1px rgba(94, 3, 3, 0.999);
        font-size: 20px;
        }

    textarea{
        padding: 5px!important;
        } 
    
    .form-check-input{
        border: 1px solid #8B0000;
        }

    .img-fluid.mb-3{
        object-fit :cover;
        }
      
   .row.row-cols-1.row-cols-sm-2.row-cols-lg-3.g-4{
        margin-bottom:20px;
        }

    .col-md-12{
        color:black;
        }

    
    .container.my-4 .mt-3{
        color:black!important;
        }

    
    

    .form-check-label{
        color:black;
        }    


     
    .fa-shopping-cart{
        padding: 3px;
        }