@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap");
.bg-fiol{background:#000 !important;border:1px solid black}
.bg-fiol.active{background:#252525 !important}
h2{color:#0090FF;text-align:center;font-size:3rem;font-weight:600}
@media screen and (max-width:768px){h2{font-size:1.5rem;text-align:center !important}}
.nav .bg-fiol:hover{background:#555 !important}
.banner{border-radius:24px;overflow:hidden;position:relative;width:100%;height:400px;display:flex;align-items:center;justify-content:flex-start;padding:20px 50px;background:url("/storage/app/media/images/tv/mediateka/banner.png") no-repeat center right;background-size:60% auto}
.banner::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(87deg,#000 4.23%,#072D8B 42.31%,rgba(135,134,134,0) 72.68%);z-index:1}
@media screen and (max-width:768px){.banner{height:auto;padding-left:20px;background-size:auto 100%;border-radius:16px;background:url("/storage/app/media/images/tv/mediateka/banner.png") no-repeat center top /cover;background-size:100% auto;padding-top:50%}.banner::before{background:linear-gradient(0deg,#000 4.23%,#072D8B 40.4%,rgba(135,134,134,0) 60.68%)}}
.banner .banner-content{border-radius:24px;color:white;text-shadow:2px 2px 4px rgba(0,0,0,0.7);position:relative;z-index:2;display:flex;flex-direction:column;height:100%;justify-content:space-between}
.banner .banner-content h1{color:#FFF;line-height:1;font-family:"Roboto Flex","Roboto ",sans-serif;font-size:68px;font-style:normal;font-weight:900;letter-spacing:10.2px;text-transform:uppercase}
@media screen and (max-width:768px){.banner .banner-content h1{font-size:2.5rem}}
@media screen and (max-width:400px){.banner .banner-content h1{font-size:1.5rem}}
.banner .banner-content h2{color:#FFF;text-align:start;font-family:"Montserrat",sans-serif;font-size:20px;font-style:normal;font-weight:700;line-height:1;letter-spacing:3.4px;text-transform:uppercase;text-wrap:wrap;text-align:start !important}
@media screen and (max-width:768px){.banner .banner-content h2{margin-top:10px;margin-bottom:20px;letter-spacing:2px;font-size:0.7rem}}
@media screen and (max-width:400px){.banner .banner-content h2{letter-spacing:2px}}
.banner .banner-content p{font-family:"Montserrat",sans-serif;font-size:24px;font-style:normal;font-weight:400;line-height:130%}
@media screen and (max-width:768px){.banner .banner-content p{font-size:0.9rem}}
.banner .banner-content .count{color:#FFF;font-family:"Inter",sans-serif;font-size:4rem;line-height:1;font-style:normal;font-weight:900}
@media screen and (max-width:768px){.banner .banner-content .count{font-size:3rem}}
.banner .banner-content .price{margin:0;font-family:"Montserrat",sans-serif;font-size:20px;font-style:normal;font-weight:400}
@media screen and (max-width:768px){.banner .banner-content .price{font-size:1rem}}
.banner .banner-content a.btn.btn-info{font-family:"Inter",sans-serif;background-color:#007bff;border-radius:12px;width:175px;color:white;border:none;padding:10px 20px;font-size:20px;cursor:pointer}
@media screen and (max-width:768px){.banner .banner-content a.btn.btn-info{padding:8px 16px;font-size:0.9rem;margin-right:10px}}
.banner .banner-content a.btn.btn-info:hover{background-color:#0056b3}
@media screen and (max-width:768px){.banner .banner-content{width:100%}}
.accordion-button{background:#000;border-radius:24px;color:white;transition:color 0.1s ease-in-out,background-color 0.1s ease-in-out,border-color 0.1s ease-in-out,box-shadow 0.1s ease-in-out,border-radius 0.1s ease}
@media screen and (max-width:768px){.accordion-button{border-radius:16px;font-size:0.9rem}}
.accordion-button:not(.collapsed){color:white;background:#000;box-shadow:none}
.accordion-button:hover{background:#55550}
.accordion-body{color:white}
@media screen and (max-width:768px){.accordion-body{font-size:0.9rem}}
.advantages-section .advantages-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;justify-content:start}
@media screen and (max-width:1200px){.advantages-section .advantages-cards{padding-left:10px;grid-template-columns:repeat(3,1fr)}}
@media screen and (max-width:992px){.advantages-section .advantages-cards{grid-template-columns:repeat(1,1fr);gap:0.5rem}}
@media screen and (max-width:576px){.advantages-section .advantages-cards{grid-template-columns:1fr;gap:0.3rem}}
.advantages-section .advantage-card{color:white;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:1rem;font-weight:bold;text-align:left}
@media screen and (min-width:768px){.advantages-section .advantage-card{flex-direction:column;text-align:center;padding:0.5rem;gap:0.2rem}}
@media screen and (max-width:576px){.advantages-section .advantage-card{gap:0.2rem;border-radius:0.75rem}}
.advantages-section .advantage-card .icon-wrapper{width:100px;height:80px;object-fit:cover;display:flex;justify-content:center;align-items:center}
@media screen and (max-width:576px){.advantages-section .advantage-card .icon-wrapper{width:60px;object-fit:contain;height:40px}}
.advantages-section .advantage-card .icon-wrapper img{width:100px;height:80px;object-fit:contain}
@media screen and (max-width:576px){.advantages-section .advantage-card .icon-wrapper img{width:50px;height:40px}}
.advantages-section .advantage-card .text{flex:1;font-size:1rem}
@media screen and (max-width:576px){.advantages-section .advantage-card .text{font-size:0.9rem}}
.media-section .media-cards{display:flex;flex-wrap:wrap;gap:1rem}
@media screen and (max-width:768px){.media-section .media-cards{gap:0.5rem}}
.media-section .media-card{background:#000;border:1px solid black;padding:1.5rem;border-radius:1rem;text-align:center;color:white;display:flex;justify-content:center;align-items:center;gap:1rem;font-weight:bold;flex:1;transition:all 0.1s ease-in-out}
@media screen and (max-width:768px){.media-section .media-card{padding:1rem;border-radius:0.75rem;width:100%}}
.media-section .media-card img{height:80px;width:200px;object-fit:contain;transition:all 0.2s ease-in-out}
@media screen and (max-width:768px){.media-section .media-card img{height:auto;width:100%}}
.media-section .media-card:hover{box-shadow:0 0 15px rgba(255,255,255,0.1)}
.media-section .media-card:hover img{transform:scale(1.2)}
@media screen and (max-width:768px){.what-is-section p{color:#FFF;font-family:Inter,sans-serif;font-size:16px;font-weight:400;line-height:150%}}
.movie-banner{border-radius:24px;overflow:hidden;position:relative;width:100%;background:black;display:flex;align-items:flex-start;justify-content:flex-start;flex-direction:column;padding:20px 50px}
@media screen and (max-width:768px){.movie-banner{border-radius:16px;padding:0}.movie-banner img{z-index:300}.movie-banner::before{background:black !important}}
.movie-banner::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,#000 4.23%,#000 20.23%,rgba(0,0,0,0.8) 55.31%,rgba(135,134,134,0) 68.68%);z-index:1}
.movie-content{border-radius:24px;color:white;text-shadow:2px 2px 4px rgba(0,0,0,0.7);position:relative;z-index:2;display:flex;flex-direction:column;height:100%;justify-content:flex-start;gap:10px}
@media screen and (max-width:768px){.movie-content{padding:10px}}
.movie-content h3{font-size:2.5rem;font-weight:600;font-family:"Roboto Flex","Roboto",sans-serif;color:#FFF;margin:1rem 0;line-height:1.2}
@media screen and (max-width:768px){.movie-content h3{font-size:1.5rem}}
.movie-content .janres{display:flex;gap:0.8rem;font-size:0.9rem;color:#fff;align-items:center}
.movie-content .janres .item{padding-right:0.8rem;border-right:1px solid white}
.movie-content .janres .item:last-child{border-right:0 solid white}
.movie-content .janres .item .age{border:1px solid white;color:#fff;padding:2px 8px;border-radius:4px;font-size:0.8rem}
.movie-content .rait{display:flex;gap:10px;font-size:0.9rem}
.movie-content .rait .icon{display:inline-block;width:16px;height:16px;background:url("data:image/svg+xml;utf8,<svg>...</svg>") no-repeat;margin-right:5px}
.movie-content .rait .count{color:#fff}
.movie-content .description{font-size:1rem;line-height:1.5;max-width:50%;margin:10px 0;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:7.5rem}
@media screen and (max-width:768px){.movie-content .description{max-width:100%;font-size:0.9rem}}
.movie-content a.btn-info{background-color:#007bff;color:#FFF;padding:10px 20px;border-radius:12px;text-decoration:none;font-size:1rem;width:175px;text-align:center;align-self:flex-start}
@media screen and (max-width:768px){.movie-content a.btn-info{font-size:0.9rem;padding:8px 16px;width:auto}}
.movie-content a.btn-info:hover{background-color:#0056b3}
.carousel{margin-top:20px}
.carousel .carousel-indicators{bottom:auto;top:5px;left:0;margin-right:15px;margin-left:15px}
.carousel .carousel-indicators button{width:100%}
.carousel .carousel-control-next,.carousel .carousel-control-prev{width:auto}
.carousel .carousel-control-prev,.carousel .carousel-control-next{display:none;filter:invert(1)}
.devices-section .nav{margin-top:3rem;padding:1rem;border-radius:50px;display:flex;gap:0.25rem;margin-bottom:1rem}
.devices-section .nav .device-button{border:0;padding:0.5rem;flex:1 1 0%;font-size:1rem;border-radius:50px;text-align:center;color:#fff;font-weight:700}
@media (max-width:768px){.devices-section .nav{margin-top:1rem;padding:0.2rem;border-radius:20px}.devices-section .nav .device-button{border-radius:14px;font-size:12px}.devices-section .tab-pane p,.devices-section .tab-pane ol,.devices-section .tab-pane li,.devices-section .tab-pane ul,.devices-section .tab-pane a{font-size:14px}}