body {
   font-family: sans-serif;
   margin: 0;
   padding: 0;
   background: #f9f9f9;
 }

 header {
    background-color: #a4102a;
    color: white;
    padding: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    display: flex;
    justify-content: space-between;
}

 .logo img {
   width: 200px;
 }

 .lang {
   display: flex;
   gap: 10px;
 }

 .container {
   max-width: 1000px;
   margin: 40px auto;
   padding: 0 20px;
 }

 button {
   padding: 10px;
   border: none;
   background: #a4102a;
   color: white;
   font-family: montserrat;
   border-radius: 5px;
   transition: all 0.3s ease-in;
   font-weight: 600;
   cursor: pointer;
 }

 button:hover {
   scale: 90%;
 }

 .container-hd {
   padding: 0px;
 }

 h1 {
   text-align: center;
   font-size: 32px;
   margin-bottom: 30px;
 }

 .item {
   background: white;
   border-radius: 12px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   margin-bottom: 16px;
   padding: 16px 24px;
   cursor: pointer;
   transition: background 0.2s;
   position: relative;
 }

 .item:hover {
   background: #f1f1f1;
 }

 .arrow {
   float: right;
   transition: transform 0.3s;
 }

 .item.expanded .arrow {
   transform: rotate(180deg);
 }

 .submenu {
   display: none;
   padding-top: 10px;
 }

 .item.expanded .submenu {
   display: block;
   transition-duration: 1s;
   transition-behavior: allow-discrete;

   @starting-style {
     opacity: 0;
   }
 }

 .submenu a {
   display: block;
   padding: 8px 0;
   color: #0077cc;
   text-decoration: none;
 }

 .submenu a:hover {
   text-decoration: underline;
 }

 @media screen and (max-width: 500px) {
   .item {
     margin-bottom: 20px;
     padding: 30px;
     font-size: 1em;
   }
    button {
    transform: scale(1.1);
  }
   .lang{
    gap: 10px;
   }
 }