body{
    background-size: 100% auto;
    
    background-image: url("chains/bg11.jpg");/*align-items: center;
     background-color: #1e2a25;
    background-repeat: repeat;*/
  
}
.cap2{
 color:rgb(62, 96, 81);
 text-shadow: 10px 10px 0 #6d8179, 5px 5px 0 #121501, ;
}

#continut{
    /*display: inline-block;
    flex-direction: column;
    width: 100px;
    max-width: 200px;
    margin-top: 20px;
    display: flex; /* Activează Flexbox */
   display: flex; 
    flex-wrap: wrap; /* Foarte important, permite fieldset-urilor să treacă pe rândul nou */
    justify-content: center; /* Centrează rândul de fieldset-uri pe orizontală */
    width: 100%; /* Folosește lățimea totală a paginii */
    margin-top: 20px;

    }

     header{
        display: flex;
        color: rgb(55, 60, 48);
        font-family:'Cinzel, serif';
        font-size: 40px;
        padding-bottom: 20px;
        padding-top: 0px;
        border-bottom: 1px;
        border-color: rgb(32, 33, 34);
    }
.bloc{
    width: 450px; /* Suficient de larg pentru fieldset-ul de 400px plus marginile*/
    margin: 20px; /* Adaugă spațiu în jurul fiecărui bloc */
    box-sizing: border-box
    

    /*margin: 2-0px 0;
    display: inline-block;
      justify-content: center;Centrează fieldset-ul orizontal în interiorul blocului */
   /*align-items: center;Centrează fieldset-ul vertical în interiorul blocului */
   /* Blocurile ocupă lățimea containerului #continut 
    box-sizing: border-box;*/
}

h1{  
    color: rgb(45, 49, 40);
font-size: 50px;

font-family: "Creepster", system-ui;
font-weight: 400;
font-style: normal;
    padding-bottom: 20px;
    padding-top: 0px;
    padding-left: 30px;

   font-size: 4rem;
    color: #fff;
    text-shadow: 5px 5px 0 #2c3d34, 10px 10px 0 #112314;
    animation: shadow-dance 2s infinite;
}

@keyframes shadow-dance {
    0%, 100% {
        text-shadow: 5px 5px 0 #121501, 10px 10px 0 #222423;
    }
    50% {
        text-shadow: -5px -5px 0 #051c0e, -10px -10px 0 #303732;
    }
}

.img{ padding-left: 25px;
    width: 350px;
    height: 290px;
}


.f{  /*align-items:center;*/
    width: 400px;
    height: auto;
    font-family: "Grenze Gotisch", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    border-color: rgb(0, 0, 0);
    margin: 0 auto; /* Centrează fieldset-ul în interiorul blocului */
    display: block;
    box-sizing: border-box;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 5px 5px 15px rgba(0, 0, 0, 0.7);
}

a{ color: rgb(74, 110, 90);
    text-decoration: none;
}
a:hover{
    color: rgb(96, 100, 58);
}
figcaption{
    text-align: center;
    font-size: 35px;
}
#lista{
    display: flex;
   
}
li{
    list-style: none; 
    padding: 30px;
    padding-top: 0px;
    font-size: 20px;
    
        font-family: "Eater", serif;
        font-weight: 400;
        font-style: normal;
      
}
#navigare{ width: 200px;
    border-color: rgb(36, 91, 72);
    border-width: 1px;
    padding-left: 600px;
}

html{

    scroll-behavior:smooth;

}

@keyframes MyAnimation{
    0%{   border-radius: 10px;
    /* 
        Your starting properties go here: like
        */ background-color:  rgb(78, 101, 43);
    opacity:0;
    transform:scale(0.5);
    }
    100%{
    /*
        Your ending properties go here: like
        */
    opacity:1;
    transform:scale(1);
    }
    }
a:hover{
    animation:MyAnimation
    1.0s
    ease-in-out; }
    h1{
        background-image:linear-gradient(180deg,#332f33,#87bfa8);
        background-clip:text;
        color:transparent;
        }
.butondiv{  justify-content: center;
    text-align: center;
}
.buton{
    background-color: #36513ec8;
    font-family: "Eater", serif;
    font-weight: 400;
    font-style: normal;
    color: black;
}
.a1{
    color: #000;
}
a:hover{
    color: rgb(4, 134, 76);
}
.a1:hover{
    animation:MyAnimation
    1.0s
    ease-in-out; }
    h1{
        background-image:linear-gradient(180deg,#332f33,#1d714e);
        background-clip:text;
        color:transparent;
        }



        * {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 300px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  width: auto;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
        



/* fitting pentru mobil */
/* Stiluri aplicate DUMAR pe ecranele cu lățime sub 768px (Mobil/Tabletă) */
@media only screen and (max-width: 768px) {

    body{background-size: 100% auto;background-repeat: no-repeat;
background-image:  url("chains/mobil.jpg");
background-size: cover;
background-attachment: fixed;
}
    header{padding-bottom: 0 !important;
        flex-direction: column; 
        text-align: center;
    /* 1. ARANJAREA HEADER-ULUI: Trecere la verticală */
    display: flex;
    text-align: center;
    }
    
    /* 2. CENTRAREA MENIULUI */
    #navigare {
    
    width: 100%;
        padding-left: 0;
        text-align: center;
        margin-top: 0 !important; 
        padding-top: 10px;      
        padding-bottom: 10px;
    }

    #lista { padding-bottom: -30px;
       justify-content: center;
        padding: 0;
        flex-wrap: wrap;
    }
    
    /* 3. ARANJAREA BLOCURILOR DE PRODUSE */
    /* Blocurile cu fieldset-uri se vor așeza pe rânduri separate și vor ocupa toată lățimea */
    .bloc{ width: 95% !important; /* Ocupă aproape toată lățimea ecranului mobil */
        margin: 10px auto !important; /* Centrează blocul */
        display: block; 
    }
    .f{
        width: 100% !important; /* Ocupă toată lățimea blocului părinte (.bloc) */
        margin: 0 auto !important;
    }
    
    /* 4. Ajustarea Titlului */
    h1 {padding-bottom: 0 !important; /* Anulează padding-ul de jos din stilul general */
        margin-bottom: 0 !important;
       font-size: 3rem; 
        padding-left: 0;
    }

    .bloc .img { /* Selector pentru imaginea din blocurile principale */
        width: 100% !important; /* Ocupă 100% din fieldset */
        height: auto !important; /* Înălțimea se adaptează proporțional */
        padding-left: 0 !important; /* Elimină padding-ul de 25px */
    }

}