* { padding: 0; margin: 0; box-sizing: border-box; } body { background-color: #000 !important; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("../13img13/bg.jpeg") !important; min-height: 100vh; background-size: cover; background-position: center; color: #fff; } .logo { text-align: center; padding-top: 30px; } .logo img { max-width: 250px; height: auto; filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3)); transition: all 0.3s ease; border-radius: 10px; } .logo img:hover { transform: scale(1.05); filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.4)); } @media (max-width: 768px) { .logo img { max-width: 200px; } } @media (max-width: 480px) { .logo img { max-width: 160px; } } .bottom-para { color: #c9c0c0; } .custom-accordion { max-width: 800px; margin: 60px auto; } @media (max-width: 768px) { .custom-accordion { margin: 60px 20px; } } .accordion-item { border: none; margin-bottom: 25px; border-radius: 0; overflow: hidden; box-shadow: none; transition: all 0.3s ease; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease forwards; } .accordion-item:hover { transform: translateY(-2px); box-shadow: none; } .accordion-item:nth-child(1) { animation-delay: 0.1s; } .accordion-item:nth-child(2) { animation-delay: 0.2s; } .accordion-item:nth-child(3) { animation-delay: 0.3s; } .accordion-item:nth-child(4) { animation-delay: 0.4s; } .accordion-header { border: none; } .accordion-button { background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); color: white; border: none; padding: 20px 25px; font-size: 18px; font-weight: 600; border-radius: 0; position: relative; transition: all 0.3s ease; box-shadow: none; display: flex; align-items: center; } .accordion-button:not(.collapsed) { background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%); color: white; box-shadow: none; border-radius: 0; } .accordion-button:not(.collapsed) .accordion-icon { transform: scale(1.1); } .accordion-button:not(.collapsed)::after { transform: rotate(180deg); } .accordion-button:focus { box-shadow: none; border: none; } .accordion-button::after { background-image: none; content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid white; transition: transform 0.3s ease; margin-left: auto; } .accordion-button:hover { transform: scale(1.02); } @media (max-width: 768px) { .accordion-button { padding: 15px 20px; font-size: 14px; } } .accordion-icon { width: 50px; height: auto; margin-right: 15px; transition: transform 0.3s ease; } @media (max-width: 768px) { .accordion-icon { width: 20px; height: 20px; margin-right: 10px; } } .accordion-body { background: rgba(255, 255, 255, 0.95); padding: 25px; border-radius: 0; font-size: 16px; line-height: 1.6; color: #333; } @media (max-width: 768px) { .accordion-body { padding: 20px; font-size: 14px; } } .accordion-collapse { transition: all 0.4s ease; } .accordion-collapse.collapsing { transition: height 0.4s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .telegram-button-container { text-align: center; margin-top: 3.5rem; } .telegram-button { display: inline-flex; align-items: center; background: linear-gradient(135deg, #0088cc 0%, #229ED9 100%); color: white; text-decoration: none; padding: 13px 24px; border-radius: 50px; font-size: 18px; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(34, 158, 217, 0.3); border: 2px solid transparent; } .telegram-button i { font-size: 24px; margin-right: 12px; transition: transform 0.3s ease; } .telegram-button span { transition: all 0.3s ease; } .telegram-button:hover { background: linear-gradient(135deg, #229ED9 0%, #0088cc 100%); transform: translateY(-2px); box-shadow: 0 8px 25px rgba(34, 158, 217, 0.4); color: white; text-decoration: none; } .telegram-button:hover i { transform: scale(1.1); } .telegram-button:active { transform: translateY(0); box-shadow: 0 4px 15px rgba(34, 158, 217, 0.3); } .border-radius { border-radius: 10px; }/*# sourceMappingURL=style.css.map */