body {
    background-color: #040714;
   margin: 0;
   background-image: url("pozadina.webp");
   background-repeat: no-repeat;
   background-position: top;
}
h1{
    color: aliceblue;
    text-align: center;
    font-size: 48px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-top: 190px;
  
    
}

.p1{
    color: aliceblue;
    text-align: center;
    font-size: 30px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   

}
.p2{
    color: darkgray;
    text-align: center;
    font-size: 14px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


.email{
    width: 400px;
    height: 40px;
    color: darkgray;
    background-color: darkslategrey;
    border: none;
    text-align: left;
    font-size: 25px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-radius: 5px;
    cursor: text;
    position: relative;
    left: 350px;
}

.sign{
    width: 265px;
    height: 40px;
     color: darkslategrey;
     background-color:rgb(0, 191, 255);
     border: none;
     font-size: 25px;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      border-radius: 5px;
      cursor: pointer;
    position: absolute;
      right: 340px;


      

      
}
.sign:hover{
    background-color: rgb(0, 163, 218) ;
}


.log{
     width: 95px;
    height: 48px;
     color: rgb(255, 255, 255);
     background-color:rgb(0, 0, 0);
     border: none;
     font-size: 25px;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      border-radius: 5px;
    bottom: 278px;
    cursor: pointer;
    position: absolute;
    top:20px;
    right: 10px;
}
.log:hover{
    background-color: rgb(255, 255, 255) ;
    color: black;
}

.top-10 img {
    width: 190px;
    height: 270px;
    border-radius: 12px;
    object-fit: cover;
    scroll-snap-align: start;
    cursor: pointer;
}

.top-10 {
    display: flex;
    gap: 25px;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.top-10::-webkit-scrollbar{
    display: none;
}

.top-10{
    scrollbar-width: none;
}
.slider-container {
    width: 100%;
    margin: 20px 0;
}
.pre-btn, .nxt-btn {
    position: absolute;
    z-index: 2;
    height: 240px; 
    width: 50px;
    background: rgba(0, 0, 0, 0.5); 
    color: white;
    border: none;
    cursor: pointer;
    font-size: 30px;
}

.pre-btn { left: 0; }
.nxt-btn { right: 0; }

.pre-btn:hover, .nxt-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}
table {
  width: 100%;
  max-width: 830px;
  margin: 40px auto;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  border: 2px;
  border-collapse: collapse;
  background: #0e1323;
  color: #fff;
}
table tr {
    border-bottom: 1px solid #ffffff1a;
}
th, td{
    padding: 20px;
  text-align: center;
}
td:first-child{
    text-align: left;
    color: #bfc7d5;
}

th:nth-child(2), td:nth-child(2){
     background-color: #131a33;
     border-left: 1px solid #ffffff1a;
  border-right: 1px solid #ffffff1a;
}

table img {
    width: 50px;
    height: auto;
}
.plan {
    color: antiquewhite;
    padding: 35px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 45px;
    text-align: center;
}
.PREMIUM{
    height: 50px;
    width: 160px;
    color: rgb(2, 23, 42);
    background-color: rgb(2, 214, 232);
    border-radius: 6px;
    font-size: 15px;
    font-family:  Inspire,sans-serif;
    font-weight: bold;
    border: none;
    cursor: pointer;

}
.PREMIUM:hover{
    background-color: rgb(0, 182, 199);
}

.STANDARD {
  height: 50px;
  width: 160px;
  background: #1b6b78;
  color: white;
  font-size: 15px;
    font-family:  Inspire,sans-serif;
    font-weight: bold;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.STANDARD:hover{
    background-color:#175e69 ;
}

.prati1 th, .prati1 td{
    position: sticky;
    top: 0;
     background-color: #0e1323;
  z-index: 3;

}
.prati2 th, .prati2 td{
    position: sticky;
    top: 70px;
    z-index: 2;
    background: #0e1323;
  z-index: 2;
}
.p3{
    color: #b7b8bd;
    font-size: 12px;
    font-family: Inspire, sans-serif;
    margin-left: 270px;
    margin-right: 230px;
}
.click-here{
    color: #fff;
}
.learn-more{
    color: #fff;
}

.enjoy{
     color: #b7b8bd;
     font-family: Inspire, sans-serif;
     text-align: center;
     font-size: 18px;
}

.slika{
    width: 1220px;
    margin-left: 135px;
}

.nesto{
    display: flex;
    gap: 35px;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    text-align: center;
    margin-left: 105px;
}
h3{
    color: antiquewhite;
    font-family: Inspire, sans-serif;
     font-size: 25px;
}

pre{
    color: #b7b8bd;
    font-family: Inspire, sans-serif;
    font-size: 18px;
    margin-top: 20px;
}
.questions{
    color: antiquewhite;
    font-size: 48px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-top: 150px;
}

.pitanja{
    margin: auto;
    background-color: #13151d;
    margin-bottom: 15px;
    width: 1000px;
    min-height: 70px;
    border-radius: 6px;
    color: white;
    font-family: Arial, sans-serif;
    overflow: hidden;
}

.pitanja summary{
    padding: 20px;
    font-size: 20px;
    display: flex;
    cursor: pointer;
    list-style: none;
    justify-content: space-between;
    align-items: center;
    background-color: #13151d;
}

.odgovor{
    color: #a9a9b3;
    padding: 0px 20px 20px 20px;
    margin: 0;
}

.devices{
    display: flex;
    margin-left: 100px;
    gap: 35px;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    text-align: center;
    margin-left: 105px;
}

.devices img{
    width: 300px;
}

.kraj {
    text-align: center;
    padding-left: 435px;
    background-color: #17171c;
    display: flex;
}
h6{
    color: aliceblue;
    font-size: 19px;
}
.kraj pre{
    font-size: 14px;
    cursor: pointer;
}
.kraj p{
    color: #a9a9b3;
    padding-right: 397px;
}
.kraj  img{
    width: 144px;
    margin-right: 397px;
}

.mreze{
    display: flex;
    gap: 25px;
    background-color: #17171c;
    padding-left: 625px;
    padding-top: 45px;

}
.mreze img{
    width: 35px;
}

.disney{
    background-color: #17171c;
     padding-left: 25px;
     text-align: center;
     padding-top: 25px;
     padding-bottom: 25px;
}
.disney p{
    color: #a9a9b3;
}