.lineup-container{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    padding:100px 130px 80px;
    gap:135px
}
.LineUp-question{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    align-items:center;
    width:421px

}
.LineUp-question:before{
    content:'';
    display:inline-block;
    width: 400px;
    height: 125px;
    background:url(../Images/GamesIcons/line-up-word.webp) no-repeat center center;
    background-size:contain;
    margin-bottom:30px
}

.hearts{
        display: flex;
    justify-content: center;
    gap:10px;
}

.LineUp-question p{
    color: #FFF;
font-family: droidBold,Arial;
font-size: 46px;
text-align: center;
margin-bottom:12px
}

..lineup-container  .tenable-btn{
    width:136px;
    height:50px;
    border-radius: 51px;
    font-size:20px;
    font-family: droidBold,Arial;
}
.lineup-container .dropDown-Button {
    display: flex;
    flex-wrap: wrap;
    gap:10px;
    margin-top:65px
}

.game-logo{
    width: 380px;
    height: 310px;
    display:flex;
    justify-content:center;
    align-items:center;
    pointer-events:none
}

.game-logo img{
    width:100%;
    height:auto
}

.teams-container{
   height: auto;
    position: relative;
    width: 100%;
    max-width: 432px;
    aspect-ratio: 432 / 685;
    
}
.teams-container img{
    width:100%;
    height:100%
}

.squad-slots{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.squad-slot{
    position:absolute;
    width:55px;
    height:55px;
    border-radius:50%;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
        background: #fff;
}

.squad-slot img{
    width:75%;
    height:auto;
    object-fit:cover;
}

.icon{
    width:75px;
    height:auto;
  
}

.LineUp-question .answer-word{
    color: #FFF;
font-family: droidBold,Arial;
font-size: 34px;
margin-bottom:60px
}
.LineUp-question .wrong-content .answer-word{margin-bottom:0}
.LineUp-question .tenable-btn{
    width:136px;height:50px;font-size: 20px;
}
#tryAgainBtn{
    width: 250px;
height: 50px;
border-radius: 51px;
background: #FFF;
color: #000;
font-family: droidBold,Arial;
font-size: 20px;
margin-top:90px
}
.team-info{    display: flex;
        align-items: center;
    flex-direction: column;
    gap:10px
}
.team-info img{
border: 5px solid #FFF;
width:70px;
height:70px;
border-radius:50%}
.team-info p{
    color: #FFF;
font-family: droidBold,Arial;
font-size: 20px;
}

.next-ques{
    border-radius: 51px;
background: #989898;
width: 250px;
height: 50px;
color: #FFF;
font-family: droidBold,Arial;
font-size: 20px;
margin-bottom:6px;
cursor:pointer
}

.countDown{display:flex;flex-wrap:wrap;justify-content: center;gap:5px}
.countDown .next-label,
.countdown .time-box{
    color: #FFF;
font-family:  droidLight,Arial;
font-size: 15px;

}

.countdown{display:flex;flex-wrap:wrap;color: #FFF;
font-family:  droidLight,Arial;
font-size: 15px;}

.LineUp-question .end-tries{color: #FFF;
font-family:droidLight,Arial;
font-size: 20px;
}


@media screen and (min-width:1280px) and (max-width:1919px) {
    .lineup-container{padding:40px 80px 80px;        gap: 85px;}
    .LineUp-question{ 
    width:275px}
    .LineUp-question:before{
      width: 270px;
        height: 84px;
    }

    .LineUp-question p{
        font-size:30px
    }
    .LineUp-question  .dropDown-Button {
        margin-top:30px
    }
   .LineUp-question  .tenable-btn{
       font-size:15px;
        width: 80px;
       height: 38px;
    }

   
    .lineup-container .input-row,
   .lineup-container  .dropdown-wrapper{
        width: 185px;
       height: 38px;
    }

   .lineup-container  .dropdown-list{
         width: 185px;
             top: 38px;
    }


    .game-logo {
       width: 250px;
        height: 240px;
    }

    .teams-container{
        max-width:300px
    }

    .icon {
        width:45px;
        margin-bottom:10px
    }

    .LineUp-question .answer-word {
        margin-bottom:15px;
        font-size:20px
    }

    .team-info p{font-size:18px}

    .team-info img{width:60px;height:60px}
    .next-ques {           width: 159px;
        height: 35px;
        font-size: 16px;}
    .LineUp-question .end-tries{font-size:16px}

    .points-div,
    .icons-side{top:18px}

    .squad-slot{ 
        width: 45px;
    height: 45px;}

}


@media screen and (min-width:768px) and (max-width:1279px) {
    .lineup-container{padding:40px 30px 80px;        gap: 60px;}
    .LineUp-question:before{
                    width: 170px;
        height: 53px;    margin-bottom: 20px;
    }

    .LineUp-question p{
        font-size:26px
    }
    .LineUp-question  .dropDown-Button {
        margin-top:30px
    }
   .LineUp-question  .tenable-btn{
       font-size:15px;
        width: 80px;
       height: 38px;
    }

   
    .lineup-container .input-row,
   .lineup-container .dropdown-wrapper{
        width: 185px;
       height: 38px;
    }

   .lineup-container  .dropdown-list{
         width: 185px;
             top: 38px;
    }


    .game-logo {
               width: 200px;
        height: 195px;
    }

    .teams-container{
        max-width:280px
    }

    .icon {
        width:34px;
        margin-bottom:10px
    }

    .LineUp-question .answer-word {
        margin-bottom:15px;
        font-size:15px
    }

    .team-info p{font-size:16px}

    .team-info img{width:50px;height:50px}
    .next-ques {    width: 200px;
    height: 40px;font-size:17px }
    .LineUp-question .end-tries{font-size:16px}
     
      .icons-side .icon-games{width:40px;height:40px}
      .icons-side,
      .points-div{top:16px;}
      .LineUp-question{width:275px}

        .squad-slot{ 
        width: 40px;
    height: 40px;

        }
}

@media screen and (min-width:768px) and (max-width:1024px) {

 .game-logo{display:none}
 }

@media screen and (min-width:320px) and (max-width:767px) {
    .lineup-container{    padding:65px 45px 20px;flex-direction:column;gap:10px}
    .game-logo{display:none}
    .LineUp-question:before{width:215px;height: 70px;    margin-bottom: 5px;}
    .LineUp-question p{font-size:30px;        margin-bottom: 5px;}
    .hearts svg{width:14px;height:14px}

    .LineUp-question .dropDown-Button{margin-top:20px}

    .lineup-container .dropdown-wrapper{max-width:auto!important;width:auto!important}
    .lineup-container .input-row{width:160px!important}
    .lineup-container .tenable-btn{width:99px!important;height:40px!important}

    .lineup-container .dropDown-Button{margin-top:20px}
    .icon{width:70px}
        .LineUp-question .answer-word{font-size:24px;margin-bottom: 120px;}
        .team-info p{font-size:20px}
        .LineUp-question{width:100%}

         .squad-slot{ width: 40px;height: 40px;}
    }