body{
    width: 100%;
    min-height: 100vh;
    background-color: rgb(241, 241, 241);
  }
  *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none !important;
    list-style: none;
    font-family: 'Itim','cursive';
  }
  .loadercontainer{
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(to top right, rgb(26, 23, 23),black);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 555;
  }
  .loadercontainer img{
    border-radius: 50%;
  }
  .App {
    text-align: center;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin: 0 auto;
    background-color: white;
    overflow: hidden;
    position: relative;
    padding-top: 60px;
  }
  .menu{
     padding: 5px;
     background-color: transparent;
     border: none;
     outline: none;
     display: none;
  }
  .menu svg{
     width: 40px;
     height: 40px;
     color: #213;
  }
nav{
    max-width: 1440px;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5%;
    position: fixed;
    top: 0px;
    background-color: white;
    backdrop-filter: blur(10px) ;
    z-index: 55;
}

nav::before{
    position: absolute;
    top:  0;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background-color: rgb(3, 3, 3);
    box-shadow: 1px 1px 1px rgb(47, 128, 210);
}
nav::after{
    position: absolute;
    bottom:  0;
    left: 0;
    content: '';
    width: 100%;
    height: 5px;
    background-color: rgb(29, 177, 251);
    box-shadow: 0px 1px 2px #08f;
}
button{
    cursor: pointer;
}
.logo{
    font-size: 35px;
    color:black;
}
.logo:hover{
    animation:  logo 0.3s ease-in 2;
}
@keyframes logo{
    0%{transform: rotate(0deg);}
    50%{transform: rotate(3deg);}
    100%{transform: rotate(-3deg);}
}
nav ul{
    width: 50%;
    display: flex;
    justify-content: space-between;
}
nav ul a{
    font-size: 25px;
    color: rgb(121, 5, 163);
    position: relative;
}
nav ul a::before{
    position: absolute;
    bottom:0;
    left: 0;
    content: '';
    width: 0%;
    height: 2px;
    background-color: orange;
    transition: all 0.2s ease;
}
nav ul a:hover{
    font-size: 25px;
    color: rgb(95, 93, 96);
}
nav ul a:hover::before{
    width: 100%;
}
.p{
    width: 50%;
    height: 500px;
    background-color: red;
    margin: 20px 0px;
}


/* ////////pdfcard */
.pdfcard{
    width: 100%;
    height: 700px;
}
/* ////////pdfcard */
/* sec1 */

.sec1{
    width: 100%;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(20, 17, 17, 0.971),rgba(128, 128, 128, 0)),url(./img/sec1bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
    padding: 0px 10%;
    text-align: center;

}
.title{
    font-size: 55px;
    color: white;
    text-shadow: 1px 2px 2px black;
  
}
.titleparagrf{
    font-size: 40px;
    color: white;
    text-shadow: 1px 2px 2px black;
    text-align: center;
    margin: 30px 0px;
}
.textflex{
    display: flex;
    gap: 10px;
    justify-content: space-around;
    align-items: center;
    margin: 20px 0px;
}
.blacktitle{
    font-size: 35px;
    color: black;
    text-align: center;
    margin-bottom: 20px;
}
/* sec2 */


.sec2 {
    width: 100%;
    min-height: 100vh;
    /* --border-size: 2px;
    --border-angle: 0turn; */
    background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
    background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-animation: bg-spin 6s linear infinite;
            animation: bg-spin 6s linear infinite;
   padding: 60px 10%;
  

  }
  @-webkit-keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }
  @keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }

  @property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
  }
.fanlarbtns{
    width: 100%;
    height: auto;
    padding: 30px 0%;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 10px;
}
.fanlarbtn{
    border-radius: 5px;
    border: 1px solid grey;
    padding: 6px;
    background-color: white;
    font-size: 25px;
    position: relative;
}
.fanlarbtn::before{
    position:absolute;
    bottom:-7px;
    left:0;
    content:'';
    width: 0%;
    height: 2px;
    background-color: orange;
    transition: all 0.3s ease-in-out;
}
.fanlarbtn:hover{
    background-color: orange;
    color: white;
    text-shadow:0px 1px 1px black;
}
.fanlarbtn.active{
    background-color: orange;
    color:white;
    text-shadow:0px 1px 1px black;
}
.fanlarbtn.active::before{
    width: 100%;
}
.fanlarbtn:hover::before{
    width: 100%;
}
.uyincards{
    width: 100%;
    height: auto;
}

.uyinheader{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 20% 20% 60%;
    align-items: center;
}
.uyinheader h1{
    font-size: 25px;
    color: white;
}
.uyinheader select{
    width: max-content;
    font-size: 25px;
    color: rgb(6, 6, 6);
    background-color: white  ;
    outline: none;
    border-radius: 5px;
    padding: 5px 10px;
}
.profilcard{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profilcard .title{
    display: flex;
    align-items: center;
    gap: 10px;
}
.profilcard .title img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid white;
}
.uyinheader .vaqtcard{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    
}
.vaqtpos{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.soat{
    width: 80px;
    height: 50px;
}
.secund{
    color: white;
    font-size: 25px;
}
.uyinbody{
    width: 100%;
    height: 450px;
    background-color: rgb(246, 252, 255);
    position: relative;
    padding: 20px;
   position: relative;
}
.uyinbody::before{
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 5px;
    height: 100%;
    background-color: rgb(29, 177, 251);
    box-shadow: -2px -3px 5px #08f;
}
.savol{
    width: 100%;
    height: 150px;
    overflow-y: auto;
    border: 1px solid rgb(240, 240, 240);
    box-shadow: 0px 0px 2px #08f;
    border-radius: 5px;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.variant{
    width: 100%;
    height: auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}
.variant button{
    border: 1px solid rgb(177, 176, 176);
    border-radius: 5px;
    background-color: white;
    font-size: 25px;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    justify-content: start;
    padding: 0px 6px;
}
.variant button:hover{
    background-color: rgba(0, 136, 255, 0.587);
}
.variant button.ok{
    background-color: green;
}
.variant button.err{
    background-color: red;
}
.uyinbodyfooter{
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 25px;
}
.next{
    padding: 10px 20px;
    background-color: #08f;
    border-radius: 5px;
    border: none;
    font-size: 25px;
}
.clear{
    padding: 10px 20px;
    background-color: red;
    border-radius: 5px;
    border: none;
    font-size: 25px;
}
.startcard{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.start{
    padding: 10px 20px;
    background-color: #08f;
    font-size: 35px;
    border-radius: 5px;
    border: none;
    animation: startbtn 1.5s ease-in-out infinite;
}
@keyframes startbtn {
    0%{transform: scalex(1) translateY(0px); }
    50%{transform: scalex(1.1) translateY(-5px);}
    100%{transform: scalex(1.05) translateY(0px);}
}
/* uyinchicards */
.uyinchilarcards, .uyinchilarcards2{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4,auto);
    gap: 15px;
    padding: 50px 0px;
}
.ustozlarcard{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(5,auto);
    gap: 15px;
    padding: 50px 0px;
    display: flex;
    transition: all 0.4s ease-in-out;
}
.uyinchicard.active{
    transform: translateY(-20px);
}

.uyinchicard h3{
    font-size: 25px;
}
.uyinchicard{
    width: 100%;
    min-width: 200px;
    padding: 15px;
    border-radius: 7px;
    overflow: hidden;
    background-color: white;
    cursor: pointer;
}

.uyinchicard .imgcard {
    width: 100%;
    height: 70%;
    overflow: hidden;
}
.uyinchicard .imgcard img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in;
}
.uyinchicard .imgcard:hover img{
    transform: scale(1.1);
}
.satrs{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
.satrs img{
    width: 30px;
    height: 30px;
}

/* uyinbodymodal */
.uyinmodal{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* background-image: linear-gradient(rgb(150, 128, 3),rgba(247, 210, 3, 0.505)); */
    backdrop-filter:blur(15px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -55;
    opacity: 0;
}
.uyinmodal.active{
    z-index: 55;
    opacity: 1;
}
.uyinmodalcard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.uyinmodalcard img{
    width: 150px;
    height: 120px;
    margin-bottom: 20px;
}
.uyinmodalcard button{
    padding: 10px 30px;
    border: 3px solid green;
    box-shadow: #08f 0px 4px 10px;
}
.modalyacunprofil{
    display: flex;
    align-items: center;
    gap: 10px;
}
.modalyacunprofil img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.modalyacunprofil .title{
    font-size: 35px;
    color:black;
}
.errimg{
    padding: 20px;
    border: 2px solid red;
    border-radius: 5px;
}
/* sec3 */
/* .sec3{
    width: 70%;
    height: auto;
    padding: 30px 0px;
    margin:0 auto;
    overflow: hidden;
} */
.splide{
    height: 100%;
    box-shadow:rgb(0, 0, 0) 10px 20px 20px;
}
 .splide__slide{
    height: 700px !important;
}



/* footer */
footer{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding: 30px 5%;
    justify-content: space-between;
    background-color: #213;
}
footer ul{
    display: flex;
    flex-direction: column;
    text-align: start;
    gap: 15px;
}
footer ul a{
    color: grey;
    font-size: 25px;
}
.social{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.social svg{
    width: 50px;
    height: 50px;
}

.instagram{
    color: rgb(232, 6, 229);
}
.telegram{
    color: rgb(6, 89, 232);
}
.facebook{
    color: rgb(20, 10, 212);
}
.github svg{
    width: 100%;
}
.splide__slide{
    width: 500px;
    height: 200px;
}

@media(max-width:420px){
   .menu{
    display: inline-block;
   }
   nav ul{
    width: 100%;
    height: 93vh;
    background-color: rgba(255, 255, 255, 0.904);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 7vh;
    left: -100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transition: all 0.4s ease-in-out;
    transform: scale(0.5);
   }
   nav ul.active{
    left: 0;
    transform: scale(1);
   }
   nav ul a{
      font-size: 40px;
   }
  /* sec1 */
  .sec1{
    padding: 0px 4%;
    min-height: 300px;
  }
   .title{
    font-size: 35px;
   }
   .uyinheader{
      display: flex;
      flex-direction: column;
   }


  /* sec2 */
  .sec2{
    padding: 50px 3%;
    --border-size: 1px;
  }
  .fanlarbtns{
    width: 100%;
    height: auto;
    padding: 15px 0%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}
  .uyinchicard h3{
    font-size: 18px;
  }
  .uyinbody{
    height: 350px;
    padding: 10px;
  }
  .profilcard {
    padding: 15px 0px;
  }
  .profilcard .title{
    font-size: 25px;
  }
  .savol{
    font-size: 18px;
    height: min-content;
    padding: 10px 0px;
  }
  .variant {
    grid-template-columns: 100%;
  }
  .variant button{
    font-size: 18px;
  }
  .next{
    padding: 5px 10px;
    font-size: 18px;
  }
  .clear{
    padding: 5px 10px;
    font-size: 18px;
  }
  .uyinmodalcard > img{
     width: 100px;
     height: 80px;
  }
  .blacktitle{
    font-size: 20px;
    margin-bottom: 5px;
  }
  .modalyacunprofil .title{
    font-size: 25px;
  }
  .modalyakunimg{
    width: 30px !important;
    height: 30px !important;
  }
  .ustozlarcard{
    overflow-x: scroll;
  }
  .uyinchilarcards, .uyinchilarcards2{
      overflow-x: scroll;
    }
    /* sec3 */
  
    .splide__slide{
        height: 220px !important;
    }
   /* footer */
   footer{
    grid-template-columns: repeat(1,1fr);
    gap: 20px;
   }




}