body { background-color: #151d4c; } /* Slider styles */ .slider-container { position: relative; width: 460px; height: 214px; overflow: hidden; margin-bottom: 0; } .slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; transition: all 0.5s ease; } .slider img { width: 100%; height: 100%; object-fit: cover; } .slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 400px; background-color: rgb(0 0 0 / 75%); color: #fff; font-size: 24px; font-weight: 700; text-align: center; line-height: 400px; cursor: pointer; transition: all 0.3s ease; display: none; } .slider-arrow:hover { background-color: rgba(0, 0, 0, 0.5); } .slider-arrow-left { left: 0; } .slider-arrow-right { right: 0; } .slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; } .slider-dot { width: 15px; height: 15px; border-radius: 50%; background-color: rgb(68 66 66); margin: -8px 5px; cursor: pointer; transition: all 0.3s ease; } .slider-dot.active { background-color: rgb(255 255 255); } /* Tab styles */ .tab { display: none; width: 460px; height: 100px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box; } .tab.active { display: block; } .tab-links { display: flex; width: 460px; margin-bottom: 10px; margin-top: 20px; background-color: transparent; border-top: none; } .tab-link { flex: 1; text-align: center; color: #e5e6eb; background-color: #151d4c; padding: 10px; cursor: pointer; transition: all 0.3s ease; } .tab-link.active { background-color: #ffffff; border-bottom: 1px solid #ccc; color: #151d4c; } .tab-content { font-size: 15px; line-height: 1.5; margin-bottom: 10px; background-color: #ffffffe3; } .tab-date { font-size: 12px; color: #000; text-align: right; } .slider-container:hover .slider-arrow { display: block !important; }