@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap');

:root{
   --main-color:#2980b9;
   --orange:#f39c12;
   --red:#e74c3c;
   --black:#333;
   --white:#fff;
   --light-color:#666;
   --light-bg:#eee;
   --border:.2rem solid var(--black);
   --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}

*{
   font-family: 'Nunito', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
}

*::selection{
   background-color: var(--main-color);
   color:var(--white);
}

::-webkit-scrollbar{
   height: .5rem;
   width: 1rem;
}

::-webkit-scrollbar-track{
   background-color: transparent;
}

::-webkit-scrollbar-thumb{
   background-color: var(--main-color);
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
}

body{
   background-color: var(--light-bg);
}

#scrollToTop {
   position: fixed;
   bottom: 40px;
   right: 10px;
   background-color: #007bff;
   color: white;
   border: none;
   padding: 7px 15px;
   text-align: center;
   font-size: 20px;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
   display: none;
   z-index: 1000;
   background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(62 158 255) 10%, rgb(97 196 255) 80%, rgb(67 202 255) 50%);
}
#scrollToTop:hover {
   background-color: #0011ff;
   box-shadow: 0px 0px 6px 5px #4dafe9;
   background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(62 158 255) 10%, rgb(97 196 255) 80%, rgb(67 202 255) 50%);
}
/* ******************************** BARG BOSHLANISHI*********************/


.barg {
   position: fixed;
   background-size: cover;
   opacity: 1;
   animation: fall 12s infinite ease-out;
   /* border-radius: 50%; */
 }
 
 /* Barg rasmni qo'shish */
 #barg1 {
   left: 15%;
   background-image: url("../images/bargrasmi1.png"); /* bargning rasm manzili */
   animation-name: fallLeft;
   animation-delay: 1s; /* Animatsiya 2 sekund kechikadi */
   width: 50px; /* boshlang'ich o'lcham */
   height: 50px;
   transform: scale(0.8); /* boshlang'ich kichik o'lcham */
 }
 
 #barg2 {
   left: 40%;
   background-image: url("../images/bargrasmi3.png"); /* bargning rasm manzili */
   animation-name: fallCenter;
   animation-delay: 1.5s; /* Animatsiya 1 sekund kechikadi */
   width: 37px; /* boshlang'ich o'lcham */
   height: 37px;
   transform: scale(1); /* boshlang'ich katta o'lcham */
 }
 
 #barg3 {
   left: 60%;
   background-image: url("../images/bargrasmi2.png"); /* bargning rasm manzili */
   animation-name: fallRight;
   animation-delay: 0.7s; /* Animatsiya 3 sekund kechikadi */
   width: 40px; /* boshlang'ich o'lcham */
   height: 40px;
   transform: scale(1); /* boshlang'ich o'lcham */
 }

 #barg4 {
   left: 80%;
   background-image: url("../images/bargrasmi4.png"); /* bargning rasm manzili */
   animation-name: fallfour;
   animation-delay: 1.7s; /* Animatsiya 3 sekund kechikadi */
   width: 40px; /* boshlang'ich o'lcham */
   height: 40px;
   transform: scale(1); /* boshlang'ich o'lcham */
 }
 
 /* Barg tushish animatsiyasi */
 @keyframes fall {
   0% {
     opacity: 1;
     transform: translateY(-100px) translateX(0) rotate(0deg);
   }
   100% {
     opacity: 1;
     transform: translateY(100vh) translateX(0) rotate(720deg); /* 100% holatida pastga tushishi */
   }
 }
 
 /* Animatsiya turli pozitsiyalar uchun */
 @keyframes fallLeft {
   0% {
     opacity: 1;
     transform: translateY(-100px) translateX(-100px) scale(0.8) rotate(0deg); /* boshlang'ich kichik o'lcham */
   }
   100% {
     opacity: 1;
     transform: translateY(100vh) translateX(-100px) scale(0.8) rotate(720deg); /* oxirida pastga tushish */
   }
 }
 
 @keyframes fallCenter {
   0% {
     opacity: 1;
     transform: translateY(-100px) translateX(0) scale(1.2) rotate(0deg); /* boshlang'ich katta o'lcham */
   }
   100% {
     opacity: 1;
     transform: translateY(100vh) translateX(0) scale(1.2) rotate(720deg); /* oxirida pastga tushish */
   }
 }
 
 @keyframes fallRight {
   0% {
     oopacity: 1;
     transform: translateY(-100px) translateX(100px) scale(1) rotate(0deg); /* boshlang'ich o'lcham */
   }
   100% {
     opacity: 1;
     transform: translateY(100vh) translateX(100px) scale(1) rotate(720deg); /* oxirida pastga tushish */
   }
 }

 @keyframes fallfour {
   0% {
     oopacity: 1;
     transform: translateY(-100px) translateX(100px) scale(1) rotate(0deg); /* boshlang'ich o'lcham */
   }
   100% {
     opacity: 1;
     transform: translateY(100vh) translateX(100px) scale(1) rotate(720deg); /* oxirida pastga tushish */
   }
 }

/* ******************************** BARG TUGASHI*********************/



.registon .tillarone{
   width: 100%;
   height: 50px;
   text-align: right;
   padding: 10px;
}
.registon .tillartwo{
   font-size: 20px;
   border: 1px solid rgb(255, 255, 255);
   border-radius: 5px;
   margin: 10px;
   padding: 5px;
   color: white;
}

.registon .tillartwo:hover{
   border: 1px solid rgb(0, 0, 0);
   color: black;
}



.hemis{
    border: 1.5px solid rgb(0, 0, 0);
    width: 100px;
    height: auto;
    font-size: 20px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0px 0px 3px 1px #000000;
}
.hemis a{
   color: rgb(0, 0, 0);
}
.hemis:hover{
   /* border-color: #ffffff; */
   color: #2980b9;
   rotate: 360deg;
   transition:all 1s;
}
.hemis a:hover{
   color: #2980b9;
   transition:all 1s;
}

.hemisone{
   border: 2px solid rgb(255, 255, 255);
   width: 150px;
   height: 90px;
   position: absolute;
   top: 75px;
   right: -6px;
   padding: 2px;
   border-radius: 5px;
   background-color: rgb(255, 255, 255);
   opacity: 0;
}
.hemisone:hover{
   opacity: 1;
}
.hemistwo{
   font-size: 17px;
   padding: 8px;

}
.hemistwo:hover{
background-color: #F2F2F2;
}


section{
   padding:2rem;
   max-width: 1300px;
   margin:0 auto;
}

.heading{
   font-size: 2rem;
   color:var(--black);
   margin-bottom: 2rem;
   text-align: center;
   text-transform: uppercase;
}
.sarlavhauz{
   font-size: 2rem;
   color:var(--black);
   margin-bottom: 2rem;
   text-align: center;
   display: none;
   text-transform: uppercase;
}

.btn,
.delete-btn,
.option-btn{
   display: block;
   width: 100%;
   margin-top: 1rem;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 1.7rem;
   /* text-transform: capitalize; */
   color:var(--white);
   cursor: pointer;
   text-align: center;
}

.btn:hover,
.delete-btn:hover,
.option-btn:hover{
   background-image: radial-gradient( circle farthest-corner at 10% 20% ,rgb(62 158 255) 10%, rgb(97 196 255) 80%,  rgb(67 202 255) 50%);
}

.btn{
   background-color: #2980b9;
}





/* BTN 2 boshlanishi */


.btnelonyangilik{
   display: block;
   width: 100%;
   margin-top: 2rem;
   border-radius: .5rem;
   padding:1rem 3rem;
   font-size: 1.7rem;
   text-transform:uppercase;
   color:black;
   cursor: pointer;
   text-align: center;
}

.btnelonyangilik:hover{
   background-image: radial-gradient( circle farthest-corner at 10% 20% ,rgb(62 158 255) 10%, rgb(97 196 255) 80%,  rgb(67 202 255) 50%);
   color: white;
}

/* .btnelonyangilik{
   background-color: #2980b9;
} */
/* BTN 2 tugashi */





.option-btn{
   background-color: var(--orange);
}

.delete-btn{
   background-color: var(--red);
}

.flex-btn{
   display: flex;
   gap:1rem;
   justify-content: center;
}

.date{
   width: 100%;
   font-size: 15px;
   margin-left: 35%;
   background:white;
}

.dateone{
   font-size: 15px;
   margin-left: 50%;
}
.datethree{
   width: 100%;
   font-size: 15px;
}
.message{
   position: sticky;
   top:0;
   max-width: 1200px;
   margin:0 auto;
   background-color: var(--light-bg);
   padding:2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1.5rem;
   z-index: 1100;
}

.message span{
   font-size: 2rem;
   color:var(--black);
}

.message i{
   cursor: pointer;
   color:var(--red);
   font-size: 2.5rem;
}

.message i:hover{
   color:var(--black);
}
/* ******************* */
.hemisqismi{
   display: inline-flex;
   border: 2px solid black;
   width: 100%;
   height: auto;
   padding: 10px;
   justify-content:space-around;
}

.hemisqismlari{
   border: 2px solid black;
   width: 25%;
   height: auto;

}
/* ******************* */

/* goole transate boshlanishi */

#translate_button {
   background-color: #ffffff;
   color: white;
   padding: 7px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   position: absolute;
   right: 10px;
   /* top: 10px; */
   box-shadow: 0px 0px 6px 0px black;

   display: flex;
   align-items: center;
}
#translate_button:hover{
   box-shadow: 0px 0px 6px 1px #4dafe9;
}
#translate_button:hover span{
  color: #4dafe9;
}
#translate_button img {
   width: 20px;
   height: auto;
   margin-right: 3px;
   border-radius: 50%;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#translate_button span {
   /* margin-right: 5px; */
   font-size: 2rem;
   color: black;
}

#translate_button:hover .flag_info {
   display: block;
}

.flag_info {
   display: none;
   position: absolute;
   top: 40px;
   right: 0;
   background-color: #333;
   color: white;
   border-radius: 5px;
   padding: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   z-index: 1;
}

.flag_info img {
   width: 30px;
   height: auto;
   margin-right: 10px;
   cursor: pointer;
}

#google_translate_element {
   display: none;
   position: absolute;
   top: 78px;
   right: 10px;
   z-index: 2;
}
/* goole transate tugashi */
/* auto shopdagi slidenig  boshlanishiS*/

.audioone{
   border: 2px solid black;
   border-radius: 5px;
}
.audiotwo{
   border: 2px solid black;
   border-radius: 5px;
   display: none;
}


/* carousel */
.carouselnews{
   font-size: 12px;
    height: 85vh;
    margin-top: 0px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.carouselnews .listnews .itemnews{
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0 0 0 0;
}
.carouselnews .listnews .itemnews img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.carouselnews .listnews .itemnews .contentnews{
    position: absolute;
    top: 10%;
    width: 1300px;
    max-width: 95%;
    left: 50%;
    transform: translateX(-50%);
    text-align: justify;
    padding-right: 30%;
    box-sizing: border-box;
    color: #fff;

    text-shadow: 0 5px 10px #0004;
}
.carouselnews .listnews .itemnews .authornews{
    font-weight: bold;
    letter-spacing: 10px;
}
.carouselnews .listnews .itemnews .titlenews,
.carouselnews .listnews .itemnews .topicnews{
    font-size: 2.2em;
    font-weight: bold;
    line-height: 1.3em;
}

.carouselnews .listnews .itemnews .animated-text{
   font-size: 34px;
   font-weight: 600;
   min-width: 280px;
}

.carouselnews .listnews .itemnews .animated-text span{
   position: relative;
}
.carouselnews .listnews .itemnews .animated-text span::before{
   content: "Youtuber";
   color: #ff7f50;
   animation: words 20s infinite;
}

.carouselnews .listnews .itemnews .animated-text span::after{
   content: "";
   position: absolute;
   width: calc(100% + 8px);
   height: 100%;
   background-color: #2f3542;
   border-left: 2px solid #ff7f50;
   right: -8px;
   animation: cursor .8s infinite, typing 20s steps(14) infinite;
}
@keyframes cursor {
   to{
       border-left: 2px solid #ff7f5000;
   }
}

@keyframes words {
   0%,20%{
       content: "Youtuber";
   }
   21%,40%{
       content: "Blogger";
   }
   41%,60%{
       content: "Developer";
   }
   61%,80%{
       content: "Designer";
   }
   81%,100%{
       content: "Gamer";
   }
}

@keyframes typing {
   10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
       width: 0;
   }
   5%,20%,25%,40%,45%,60%,65%,80%,85%{
       width: calc(100% + 8px);
   }
}

/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */

.animated-text{
   font-size: 20px;
    margin-top: 20px;
    font-weight: 600;
    /* border: 2px solid black; */
    text-align: center;
    min-width: 280px;
}

.animated-text span{
   position: relative;
}
.animated-text span::before{
   content: "JTSITI";
   color: #000000;
   animation: words 20s infinite;
}

 .animated-text span::after{
   content: "";
   position: absolute;
   width: calc(100% + 8px);
   height: 100%;
   background-color: #ffffff;
   border-left: 2px solid #ff7f50;
   right: -8px;
   animation: cursor 1s infinite, typing 120s steps(120) infinite;
}
@keyframes cursor {
   to{
       border-left: 2px solid #ff7f5000;
   }
}

@keyframes words {
   0%,100%{
       content: "SIZDA BIROR TAKLIF, SAVOL VA E'TIROZ BO'LSA BIZGA XABAR YUBORISHINGIZ MUMKIN! BIZ HAR DOIM HAMKORLIKKA TAYYORMIZ!";
   }
   /* 21%,40%{
       content: "Blogger";
   }
   41%,60%{
       content: "Developer";
   }
   61%,80%{
       content: "Designer";
   }
   81%,100%{
       content: "Gamer";
   } */
}

@keyframes typing {
   10%,15%,30%,35%,50%,55%,70%,75%,90%,95%{
       width: 0;
   }
   5%,20%,25%,40%,45%,60%,65%,80%,85%{
       width: calc(100% + 8px);
   }
}



/* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- */







.carouselnews .listnews .itemnews .topicnews{
    color: #ffffff;
    text-decoration: underline;
}
.carouselnews .listnews .itemnews .buttonsnews{
    display: grid;
    grid-template-columns: repeat(2, 110px);
    grid-template-rows: 40px;
    gap: 5px;
    margin-top: 20px;
}
.carouselnews .listnews .itemnews .buttonsnews button{
    /* border: 2px solid #f1683a; */
    background-color: transparent;
    letter-spacing: 3px;
    font-family: Poppins;
    font-weight: 500;

   
}
.carouselnews .listnews .itemnews .buttonsnews button:hover{
   border: 1px solid #f1683a;
   border-radius: 7px;
   box-shadow: 0px 0px 13px 3px #f1683a;
}
.carouselnews .listnews .itemnews .buttonsnews button a{
   color: white;
}
/* .carouselnews .listnews .itemnews .buttonsnews button a:hover {
   color:#f1683a;
} */
.carouselnews .listnews .itemnews .buttonsnews button:nth-child(2){
    background-color: transparent;
    border: 1px solid #fff;
    color: #eee;
}
/* thumbail */
.thumbnailnews{
    position: absolute;
    bottom: 50px;
    left: 45%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 20px;
}
.thumbnailnews .itemnews{
    width: 150px;
    height: 220px;
    border: 10px double #ffffff;
    border-radius: 15px;
    flex-shrink: 0;
    position: relative;
    transform: scale(1);
}
.thumbnailnews .itemnews:hover {
   transition: 0.2s linear;
   transform: scale(1);
   box-shadow: 0px 0px 7px 4px #f1683a;
   border: 0px double #f1683a;
}
/* .thumbnailnews .itemnews:hover .titlenews{
   color: #f1683a;
} */
.thumbnailnews .itemnews img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.thumbnailnews .itemnews .contentnews{
    color: #fff;
    font-size: 15px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
}
.thumbnailnews .itemnews .contentnews .titlenews{
    font-weight: 500;  
}
.thumbnailnews .itemnews .contentnews .descriptionnews{
    font-weight: 300;
}

/* arrows */
.arrowsnews{
    position: absolute;
    top: 80%;
    right: 67%;
    z-index: 100;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}
.arrowsnews button{
   width: 50px;
   height: 50px;
   border-radius: 50%;
   font-size: 25px;
   background-color: transparent;
   border: 6px double #ffffff;
   color: #ffffff;
   font-family: monospace;
   font-weight: bold;
   transition: 0.5s;
}
.arrowsnews button:hover{
   font-size: 30px;
   background-color: #fff;
   color: #f1683a;
   rotate: 360deg;
   box-shadow: 0px 0px 13px 3px #f1683a;
}

/* animation */
.carouselnews .listnews .itemnews:nth-child(1){
    z-index: 1;
}

/* animation text in first item */

.carouselnews .listnews .itemnews:nth-child(1) .contentnews .authornews,
.carouselnews .listnews .itemnews:nth-child(1) .contentnews .titlenews,
.carouselnews .listnews .itemnews:nth-child(1) .contentnews .topicnews,
.carouselnews .listnews .itemnews:nth-child(1) .contentnews .desnews,
.carouselnews .listnews .itemnews:nth-child(1) .contentnews .buttonsnews
{
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showContent .5s 1s linear 1 forwards;
}
@keyframes showContent{
 
    to{
        transform: translateY(0px);
        filter: blur(0px);
        opacity: 1;
    }
}
.carouselnews .listnews .itemnews:nth-child(1) .contentnews .titlenews{
    animation-delay: 1.2s!important;
}
.carouselnews .listnews .itemnews:nth-child(1) .contentnews .topicnews{
    animation-delay: 1.4s!important;
}
.carouselnews .listnews .itemnews:nth-child(1) .contentnews .desnews{
   font-size: 18px;
    animation-delay: 1.6s!important;
}
.carouselnews .listnews .itemnews:nth-child(1) .contentnews .buttonsnews{
    animation-delay: 1.8s!important;
}
/* create animation when next click */
.carouselnews.nextnews .listnews .itemnews:nth-child(1) img{
    width: 150px;
    height: 220px;
    position: absolute;
    bottom: 50px;
    left: 50%;
    border-radius: 30px;
    animation: showImage .5s linear 1 forwards;
}
@keyframes showImage{
    to{
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

.carouselnews.nextnews .thumbnailnews .itemnews:nth-last-child(1){
    overflow: hidden;
    animation: showThumbnail .5s linear 1 forwards;
}
.carouselnews.prevnews .listnews .itemnews img{
    z-index: 100;
}
@keyframes showThumbnail{
    from{
        width: 0;
        opacity: 0;
    }
}
.carouselnews.nextnews .thumbnailnews{
    animation: effectNext .5s linear 1 forwards;
}

@keyframes effectNext{
    from{
        transform: translateX(150px);
    }
}

/* running time */

.carouselnews .timenews{
    position: absolute;
    z-index: 1000;
    width: 0%;
    height: 3px;
    background-color: #f1683a;
    left: 0;
    top: 0;
}

.carouselnews.nextnews .timenews,
.carouselnews.prevnews .timenews{
    animation: runningTime 3s linear 1 forwards;
}
@keyframes runningTime{
    from{ width: 100%}
    to{width: 0}
}


/* prev click */

.carouselnews.prevnews .listnews .itemnews:nth-child(2){
    z-index: 2;
}

.carouselnews.prevnews .listnews .itemnews:nth-child(2) img{
    animation: outFrame 0.5s linear 1 forwards;
    position: absolute;
    bottom: 0;
    left: 0;
}
@keyframes outFrame{
    to{
        width: 150px;
        height: 220px;
        bottom: 50px;
        left: 50%;
        border-radius: 20px;
    }
}

.carouselnews.prevnews .thumbnailnews .itemnews:nth-child(1){
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail .5s linear 1 forwards;
}
.carouselnews.nextnews .arrowsnews button,
.carouselnews.prevnews .arrowsnews button{
    pointer-events: none;
}
.carouselnews.prevnews .listnews .itemnews:nth-child(2) .contentnews .authornews,
.carouselnews.prevnews .listnews .itemnews:nth-child(2) .contentnews .titlenews,
.carouselnews.prevnews .listnews .itemnews:nth-child(2) .contentnews .topicnews,
.carouselnews.prevnews .listnews .itemnews:nth-child(2) .contentnews .desnews,
.carouselnews.prevnews .listnews .itemnews:nth-child(2) .contentnews .buttonsnews
{
    animation: contentOut 1.5s linear 1 forwards!important;
}

@keyframes contentOut{
    to{
        transform: translateY(-150px);
        filter: blur(20px);
        opacity: 0;
    }
}
@media screen and (max-width: 678px) {
    .carouselnews .listnews .itemnews .contentnews{
        padding-right: 0;
    }
    .carouselnews .listnews .itemnews .contentnews .titlenews{
        font-size: 30px;
    }
}
/* auto shopdagi slidening tugashi */


/* ***************************** Laboratoriya 1 kodi boshlanishi*/

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 
 }
  ::selection{
   color: #fff;
   background: #007bff;
 }
 
 .wrapperjtsiti{
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
   margin: 100px auto;
   max-width: 1100px;
 }
 .wrapperjtsiti nav{
   display: flex;
   justify-content: center;
 }
 .wrapperjtsiti .items{
   display: flex;
   max-width: 1000px;
   width: 100%;
   justify-content: space-between;
 }
 .items span{
   padding: 7px 25px;
   font-size: 18px;
   font-weight: 500;
   cursor: pointer;
   color: #007bff;
   border-radius: 50px;
   border: 2px solid #007bff;
   transition: all 0.3s ease;
 }
 .items span.active,
 .items span:hover{
   color: #fff;
   background: #007bff;
 }
 
 .gallery{
   display: flex;
   flex-wrap: wrap;
   margin-top: 30px;
 }
 .gallery .image{
   width: calc(100% / 4);
   padding: 7px;
 }
 .gallery .image span{
   display: flex;
   width: 100%;
   overflow: hidden;
 }
 .gallery .image img{
   width: 100%;
   vertical-align: middle;
   transition: all 0.3s ease;
 }
 .gallery .image:hover img{
   transform: scale(1.1);
 }
 .gallery .image.hide{
   display: none;
 }
 .gallery .image.show{
   animation: animate 0.4s ease;
 }
 @keyframes animate {
   0%{
     transform: scale(0.5);
   }
   100%{
     transform: scale(1);
   }
 }
 
 .preview-box{
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.9);
   background: #fff;
   max-width: 700px;
   width: 100%;
   z-index: 5;
   opacity: 0;
   pointer-events: none;
   border-radius: 3px;
   padding: 0 5px 5px 5px;
   box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
 }
 .preview-box.show{
   opacity: 1;
   pointer-events: auto;
   transform: translate(-50%, -50%) scale(1);
   transition: all 0.3s ease;
 }
 .preview-box .details{
   padding: 13px 15px 13px 10px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .details .title{
   display: flex;
   font-size: 18px;
   font-weight: 400;
 }
 .details .title p{
   font-weight: 500;
   margin-left: 5px;
 }
 .details .icon{
   color: #007bff;
   font-size: 19px;
   cursor: pointer;
 }
 .preview-box .image-box{
   width: 100%;
   display: flex;
 }
 .image-box img{
   width: 100%;
   border-radius: 0 0 3px 3px;
 }
 .shadow{
   position: fixed;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
   z-index: 2;
   display: none;
   background: rgba(0,0,0,0.4);
 }
 .shadow.show{
   display: block;
 }
 
 @media (max-width: 1000px) {
   .gallery .image{
     width: calc(100% / 3);
   }
 }
 @media (max-width: 800px) {
   .gallery .image{
     width: calc(100% / 2);
   }
 }
 @media (max-width: 700px) {
   .wrapperjtsiti nav .items{
     max-width: 600px;
   }
   nav .items span{
     padding: 7px 15px;
   }
 }
 @media (max-width: 600px) {
   .wrapperjtsiti{
     margin: 30px auto;
   }
   .wrapperjtsiti nav .items{
     flex-wrap: wrap;
     justify-content: center;
   }
   nav .items span{
     margin: 5px;
   }
   .gallery .image{
     width: 100%;
   }
 } 
 
 
/* ***************************** Laboratoriya 1 kodi tugashi*/

 

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');




/* Quick viev pagedagi buttonlarning dastur kodi boshlanishi */

.container {
   border: 0px solid rgb(240, 23, 23);
   width: 100%;
   height: auto;
   display: inline-block;
   margin-top: 20px;
}
.buttonlarspan {
   border: 0px solid rgb(255, 0, 0);
   width: 250px;
   height: 100px;
   display: inline-block;
   text-align: center;
   padding: 10px;
   border-radius: 5px;
   font-size: 20px;
   color: white;
   margin-left: 65px;
   margin-bottom: 20px;
   background-color: #2888c2;
   text-decoration: none;
}

.buttonlarspan:hover {
 background-color: #1f1b1b;
}
.buttonlarspan a{
   text-align: center;
   text-decoration: none;
   color: white;
}

.buttonlarspanone{
   border: 0px solid rgb(255, 0, 0);
   width: 250px;
   height: 100px;
   display: inline-block;
   text-align: center;
   padding: 30px;
   border-radius: 5px;
   font-size: 20px;
   color: white;
   margin-left: 65px;
   margin-bottom: 20px;
   background-color: #2888c2;
   text-decoration: none;
}
.buttonlarspanone:hover{
   background-color: #1f1b1b;
}
.buttonlarspanone a{
   text-align: center;
   text-decoration: none;
   color: white;
}
@media (min-width:0px) and (max-width:425px){
   .buttonlarspan {
      width: 100%;
      margin-left:0px;
   }
   .buttonlar{
      width: 100%;
   }
   .buttonlarspanone {
      width: 100%;
      margin-left:0px;
   }

}
@media (min-width:426px) and (max-width:632px){
   .buttonlarspan {
      width: 70%;
      margin-left:90px;
   }
   .buttonlarspanone {
      width: 70%;
      margin-left:90px;
   }
   .buttonlar{
      width: 60%;
   }
}
/* Quick viev pagedagi buttonlarning dastur kodi tugashi */
.empty{
   padding:1.5rem;
   background-color: var(--white);

   box-shadow: 0px 0px 10px 1px #343434;
   text-align: center;
   color:var(--red);
   border-radius: .5rem;
   font-size: 2rem;
   /* text-transform: capitalize; */
}

.disabled{
   pointer-events: none;
   user-select: none;
   opacity: .5;
}

@keyframes fadeIn{
   0%{
      transform: translateY(1rem);
   }
}








.header{
   position: sticky;
   top:0; left:0; right:0;
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   z-index: 1000;
   animation: fade-tepada 2s;
}

.header .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   animation: fade-tepada 2s;
}
@keyframes fade-tepada{
   0%{
      transform: translateX(100px) scale(0.5);
      transform: translateY(-100px) scale(0.5);
      
   }
   100%{
      transform: translateZ(0px) scale(1);
      
   }
   
}


.instituttuzulmasi{
   width: 100%;
   height: auto;
   border: 0px solid black;
}

.instituttuzulmasi img{
   max-width: calc(80% - 0px);
   margin-left: calc(10% - 0px);
   margin-top: 20px;
}


/* **************logo2  tugashi*/

.header .flex .logotip img{
   width:45px; 
   height:35px; 
   padding: 1px;
   border-radius:2px;
   transform: scale(1);
   transition:  all 1.5s;
}
.header .flex .logotip img:hover{
   transform: scale(1.1);
   transition:  all 1.2s;
}

/* ***************logo2 tugashi********** */



/* ilmiy kengashdagi table dastur kodi boshlanishi */

/* ilmiy kengashdagi table dastur kodi boshlanishi */


.header .flex .logo{
   font-size: 2.5rem;
   color:var(--black);
}

.header .flex .logo span{
   color:var(--main-color);
}
.header .flex .logo img{
   width:60px; 
   height:60px; 
   border-radius:7px;
   transform: scale(1);
   transition:  all 1.5s;
}
.header .flex .logo img:hover{
   transform: scale(1.1);
   transition:  all 1.5s;
}
.header .flex .navbar a{
   margin:0 1rem;
   font-size: 2.25rem;
   color:var(--black);
   
}

.header .flex .navbar a:hover{
   color:var(--main-color);
   text-decoration: underline
}

/* *************************** */
.header .flex .navbarone a{
   margin:0 1rem;
   font-size: 2.17rem;
   color:var(--black);
   
}

.header .flex .navbarone a:hover{
   color:var(--main-color);

}






/* ****************************** */

a {
    text-decoration: none;
}


nav {
    
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.navbarqismuz{
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
}
.header .flex .navbarqismuz a{
   margin:0 1rem;
   font-size: 2rem;
   color:var(--black);
   
}
/* .logo {
    width: 100px;
}

.logo img {
    width: 100px;
    
} */

.lang-menu {
    width: 155px;
    font-size: 18px;
    text-align: right;
    /* font-weight: bold; */
    position: relative;
}

.lang-menu .selected-lang {
    display: flex;   
    font-size: 21.6px;
    /* font-weight: bold; */
    justify-content: space-evenly;
    line-height: 1.5;
    cursor: pointer;
}
.lang-menu .selected-lang:before {
    content: '';
    display: inline-block;
    /* width: 30px; */
    height: 30px;
   
    background-size: contain;
    background-repeat: no-repeat;
}
.lang-menu .selected-lang:hover{
   color: #2980b9;
   transition: all 1s;
}
.lang-menu ul {
    margin: 0;
    padding: 0;
    display: none;
    background-color: #fff;
    border: 1px solid #f8f8f8;
    position: absolute;
    top: 35px;
    right: -10px;
    width: 150px;
    border-radius: 5px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);

}


.lang-menu ul li {
    list-style: none;
    text-align: center;
    display: flex;
    justify-content: space-between;
}

.lang-menu ul li a {
    text-decoration: none;
    width: 150px;
    color: black;
    padding: 5px 10px;
    display: block;
}

.lang-menu ul li:hover {
    background-color: #f2f2f2;
}

/* .lang-menu ul li a:before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
} */

/* .uz:before {
    background-image: url("../images/uzbekiston.png");
}

.de:before {
    background-image: url("../images/uzbekiston.png");
}
.eng:before {
    background-image: url("../images/english.png");
}

.ru:before {
    background-image: url("../images/rus.png");
} */


.lang-menu:hover ul {
    display: block;
}

/* ****************************** */


.videogallery{
   width: 100%;
   display: inline-block;
  text-align: center;
}
.videogalleryjtsiti{
   width: 49%;
   height: 580px;
   padding: 15px;
   display: inline-block;
}
.videogalleryjtsitiiframe{
   width:100%;
   height:560px;
   transform: scale(1);
}
.videogalleryjtsitiiframe:hover{
   transform: scale(1.03);
   transition: 1s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}












/* ***************HEMIS BOSHLANISHI*************** */

   .lang-menuhemis {
      width: 80px;
      padding: 5px;
      font-size: 18px;
      text-align: center;
      position: relative;
      box-shadow: 0px 0px 6px 0px black;
      border-radius: 5px;
   }
  .lang-menuhemis:hover{
   box-shadow: 0px 0px 8px 1px #4dafe9;
  }
   .lang-menuhemis .selected-langhemis {
      display: flex;
      font-size: 18px;
      height: 32px;
      font-weight: bold;
      justify-content: space-evenly;
      line-height: 2;
      cursor: pointer;
      flex-direction: column-reverse;

   }
   .lang-menuhemis .selected-langhemis:before {
      content: '';
      display: inline-block;
      width: 30px;
      height: 30px;
      background-size: contain;
      background-repeat: no-repeat;
   }
   .lang-menuhemis .selected-langhemis:hover{
      color: #4dafe9;
      /* transition: all 1s; */
   }
   .lang-menuhemis ul {
      margin: 0;
      padding: 0;
      display: none;
      background-color: #fff;
      border: 1px solid #f8f8f8;
      position: absolute;
      top: 45px;
      right: -35px;
      width: 160px;
      border-radius: 5px;
      box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
   }


   .lang-menuhemis ul li {
      list-style: none;
      text-align: left;
      display: flex;
      justify-content: space-between;
   }

   .lang-menuhemis ul li a {
      text-decoration: none;
      width: 155px;
      color: black;
      padding: 5px 10px;
      display: block;
   }

   .lang-menuhemis ul li:hover {
      background-color: #f2f2f2;
   }

   .lang-menuhemis ul li a:before {
      content: '';
      display: inline-block;
      width: 25px;
      height: 25px;
      vertical-align: middle;
      margin-right: 10px;
      background-size: contain;
      background-repeat: no-repeat;
   }

.dehemis:before {
   background-image: url("../images/xodimlar.png");

}

.enhemis:before {
   background-image: url("../images/talabalar.png");
}



.lang-menuhemis:hover ul {
   display: block;
}
/* ****************** HEMIS TUGASHI**************/








/* *******************begin */


.navigationhaqida{
   position: relative;
}

 .navigationhaqida .navigation-items a{
   position: relative;
   color: #fff;
   font-size: 1em;
   font-weight: 500;
   text-decoration: none;
   margin-left: 30px;
   transition: 0.3s ease;
}

 .navigationhaqida .navigation-items a:before{
   content: '';
   position: absolute;
   background: #fff;
   width: 0;
   height: 3px;
   bottom: 0;
   left: 0;
   transition: 0.3s ease;
}

 .navigationhaqida .navigation-items a:hover:before{
   width: 100%;
   background: #09a6d4;
}


.homehaqida {
   padding: 100px 150px;
   position: relative;
   width: 100%;
   min-height: 80vh;
   display: flex;
   justify-content: center;
   flex-direction: column;
   background: rgba(0, 140, 255, 0.959);
}

.homehaqida:before{
   z-index: 777;
   content: '';
   position: absolute;
   background: rgba(251, 3, 3, 0.034);
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.homehaqida .contenthaqida{
   z-index: 888;
   color: #fff;
   width: 100%;
   margin-top: 50px;
   display: none;
}

.homehaqida .contenthaqida.active{
   display: block;
}

.homehaqida .contenthaqida h1{
   font-size: 2em;
   font-weight: 900;
   text-transform: uppercase;
   text-align: justify;
   margin-bottom: 40px;
}

.homehaqida .contenthaqida h1 span{
   font-size: 1.2em;
   font-weight: 600;
}

.homehaqida .contenthaqida p{
   margin-bottom: 65px;
   text-align: justify;
   font-size: 20px;
}

.homehaqida .contenthaqida a{
   background: #fff;
   padding: 10px 18px;
   color: #09a6d4;
   font-size: 17px;
   font-weight: 500;
   text-decoration: none;
   border-radius: 15px;
}

.homehaqida .contenthaqida a:hover{
   background: #09a6d4;
   border-radius: 0px;
   color: #fff;
}

.homehaqida .media-iconshaqida{
   z-index: 888;
   position: absolute;
   right: 30px;
   display: flex;
   flex-direction: column;
   transition: 0.5s ease;
}

.homehaqida .media-iconshaqida a{
   color: #fff;
   font-size: 3em;
   transition: 0.3s ease;
}

.homehaqida .media-iconshaqida a:not(:last-child){
   margin-bottom: 20px;
}

.homehaqida .media-iconshaqida a:hover{
   transform: scale(1.3);
   color: #09a6d4;
}

.homehaqida img{
   z-index: 000;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.slider-navigationhaqida{
   z-index: 888;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   transform: translateY(80px);
   margin-bottom: 12px;
}

.slider-navigationhaqida .nav-btnhaqida{
   width: 25px;
   height: 25px;
   background: #fff;
   border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
   transition: 0.3s ease;
}

.slider-navigationhaqida .nav-btnhaqida.active{
   background: #09a6d4;
}

.slider-navigationhaqida .nav-btnhaqida:not(:last-child){
   margin-right: 20px;
}

.slider-navigationhaqida .nav-btnhaqida:hover{
   transform: scale(1.2);
   background-color: rgb(241, 133, 8);
}

.img-slidehaqida{
   position: absolute;
   width: 100%;
   clip-path: circle(0% at 0 50%);
}

.img-slidehaqida.active{
   clip-path: circle(150% at 0 50%);
   transition: 2s ease;
   transition-property: clip-path;
}

@media (max-width: 1040px){
   .homehaqida .contenthaqida p{
      width: 90%;
   }
   .homehaqida .contenthaqida h1 span{
      display: none;
   }
   .homehaqida{
      padding: 100px 15px;
   }
   .homehaqida .media-iconshaqida{
       right: 15px;
   }
     .navigationhaqida{
       display: none;
   }
     .navigationhaqida.active{
       position: fixed;
       width: 100%;
       height: 100%;
       top: 0;
       left: 0;
       display: flex;
       justify-content: center;
       align-items: center;
       background: rgba(1, 1, 1, 0.5);
   }

     .navigationhaqida .navigation-items a{
       color: #222;
       font-size: 1.2em;
       margin: 20px;
   }
     .navigationhaqida .navigation-items a:before{
       background: #222;
       height: 5px;
   }
     .navigationhaqida .navigation-items{
       background: #fff;
       width: 600px;
       max-width: 600px;
       margin: 20px;
       padding: 40px;
       display: flex;
       flex-direction: column;
       align-items: center;
       border-radius: 5px;
       box-shadow: 0 5px 25px rgb(1 1 1 / 20%);
   }
   .menu-btnhaqida{
       background: url(menu.png)no-repeat;
       background-size: 30px;
       background-position: center;
       width: 40px;
       height: 40px;
       cursor: pointer;
       transition: 0.3s ease;
   }
   .menu-btnhaqida.active{
       z-index: 999;
       background: url(close.png)no-repeat;
       background-size: 25px;
       background-position: center;
       transition: 0.3s ease;
   }
}

@media (max-width: 560px){
   .homehaqida .contenthaqida p{
      width: 100%;
   }
   .homehaqida .contenthaqida{
      width: 77%;
      margin-top: 0px;
   }
   .homehaqida .contenthaqida h1{
       font-size: 3em;
       line-height: 60px;
       display: none;
   }
   .homehaqida .contenthaqida a{
      padding: 10px 10px;
      font-size: 15px;
      margin-left: calc(80% - 100px);
      border-radius: 0px
   }
}
/* *******************end */










/* homkorlar pagedagi logotipnig dastut kodi boshlanishi */

.hamkorlarlogo {
    
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   min-height: 50vh;
   /* background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(171,102,255,1) 0%, rgb(131 204 247) 50%, rgb(105 168 231) 90%); */
}


.hamkorlarlogo .cardhamkorlogo {
   box-sizing: border-box;
   position: relative;
   width: 250px;
   height: 250px;
   margin: 20px;
}

.hamkorlarlogo .cardhamkorlogo .face {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   border-radius: 10px;
   overflow: hidden;
   transition: .5s;
}

.hamkorlarlogo .cardhamkorlogo .front {
   transform: perspective(600px) rotateY(0deg);
   box-shadow: 0 5px 10px #000;
}

.hamkorlarlogo .cardhamkorlogo .front img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hamkorlarlogo .cardhamkorlogo .front h3 {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 45px;
   line-height: 45px;
   color: #fff;
   /* background: rgba(0,0,0,.4); */
   text-align: center;
}

.hamkorlarlogo .cardhamkorlogo .back {
   transform: perspective(600px) rotateY(180deg);
  background-image: radial-gradient( circle farthest-corner at 50% 50%,  rgba(171,102,255,1) 0%, rgb(131 204 247) 50%, rgb(105 168 231) 70%);
   padding: 15px;
   color: #f3f3f3;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   text-align: center;
   box-shadow: 0 5px 10px #000;
}

.hamkorlarlogo .cardhamkorlogo .back .linkhamkorlogo {
   border-top: solid 1px #f3f3f3;
   height: 37px;
   line-height: 50px;
}

.hamkorlarlogo .cardhamkorlogo .back .linkhamkorlogo a {
   padding: 5px;
   color: #f3f3f3;
   font-size: 15px;
   border: 2px solid white;
   border-radius: 5px;
}

.hamkorlarlogo .cardhamkorlogo .back h3 {
   font-size: 30px;
   margin-top: 20px;
   letter-spacing: 2px;
}

.hamkorlarlogo .cardhamkorlogo .back p {
   letter-spacing: 1px;
   font-size: 15px;
   text-align: center;
   color: black;
} 

.hamkorlarlogo .cardhamkorlogo:hover .front {
   transform: perspective(600px) rotateY(180deg);
}

.hamkorlarlogo .cardhamkorlogo:hover .back {
   transform: perspective(600px) rotateY(360deg);
}
/* homkorlar pagedagi logotipnig dastut kodi tugashi */





/* index pagedagi hamkorlar qatori dastur kodi boshlanishi */

.hamkoruzdone {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   min-height: 70vh;
   /* background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(171,102,255,1) 0%, rgb(131 204 247) 50%, rgb(105 168 231) 90%); */
   background: url("../images/imageback000.png");
   object-fit: cover;
   /*background-repeat: no-repeat;*/
   background-position: center center;
   background-attachment: fixed;
}


.hamkoruzdone .cardhamkoruzdone {
   box-sizing: border-box;
   position: relative;
   width: 400px;
   height: 400px;
   margin: 20px;
}

.hamkoruzdone .cardhamkoruzdone .face {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   border-radius: 10px;
   overflow: hidden;
   transition: .5s;
}

.hamkoruzdone .cardhamkoruzdone .front {
   transform: perspective(600px) rotateY(0deg);
   box-shadow: 0px 0px 10px 5px #7cc3f3;
   border: 2px rgb(62 158 255) solid;
   border-radius: 12px;
}

.hamkoruzdone .cardhamkoruzdone .front img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hamkoruzdone .cardhamkoruzdone .front h3 {
   position: absolute;
   bottom: 0;
   width: 100%;
   height: 45px;
   font-size: 17px;
   line-height: 45px;
   color: #fff;
   background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(62 158 255) 10%, rgb(97 196 255) 80%, rgb(67 202 255) 50%);
   text-align: center;
}

.hamkoruzdone .cardhamkoruzdone .back {
   transform: perspective(600px) rotateY(180deg);
   background-image: radial-gradient(circle farthest-corner at 10% 20%, rgb(62 158 255) 10%, rgb(97 196 255) 80%, rgb(67 202 255) 50%);
   padding: 15px;
   color: #000000;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   text-align: center;
   font-weight: bold;
}

.hamkoruzdone .cardhamkoruzdone .back .linkhamkoruzdone {
   border-top: solid 1px #f3f3f3;
   height: 50px;
   line-height: 50px;
}

.hamkoruzdone .cardhamkoruzdone .back .linkhamkoruzdone a {
   color: white;
   font-size: 17px;
   padding: 5px;
   border-radius: 5px;
   border: 2px solid white;
   font-weight: bold;
}

/* .hamkoruzdone .cardhamkoruzdone .back h3 {
   font-size: 30px;
   margin-top: 20px;
   letter-spacing: 2px;
} */

.hamkoruzdone .cardhamkoruzdone .back p {
   letter-spacing: 1px;
   font-size: 20px;
   text-align: center;
} 

.hamkoruzdone .cardhamkoruzdone:hover .front {
   transform: perspective(600px) rotateY(180deg);
}

.hamkoruzdone .cardhamkoruzdone:hover .back {
   transform: perspective(600px) rotateY(360deg);
}
/* index pagedagi hamkorlar qatori dastur kodi boshlanishi */











.header .flex .icons > *{
   margin-left: 1rem;
   font-size: 2.5rem;
   cursor: pointer;
   color:var(--black);
   transform: scale(1);
}

/* .header .flex .icons > *:hover{
   color:var(--main-color);
   transform: scale(1.1);
    transition: all 1.5s;

} */
.header .flex .icons a i:hover{
   transform: scale(1.3);
    transition: 1.3s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
}
   

.header .flex .icons a span{
   font-size: 1.7rem;
}

.header .flex .profile{
   position: absolute;
   top:105%; right:2rem;
   background-color: var(--white);
   border-radius: .5rem;
   box-shadow: var(--box-shadow);
   border:var(--border);
   padding:2rem;
   width: 30rem;
   padding-top: 1.2rem;
   display: none;
   animation:fadeIn .2s linear;
}

.header .flex .profile.active{
   display: inline-block;
}

.header .flex .profile p{
   text-align: center;
   color:var(--black);
   font-size: 2rem;
   margin-bottom: 1rem;
}

#menu-btn{
   display: none;
}

.home-bg{
   background:url(../images/home-bg.png) no-repeat;
   background-size: cover;
   background-position: center;
   display: none;
}

.home-bg .home .slide{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap:1.5rem;
   padding-bottom: 6rem;
   padding-top: 2rem;
   user-select: none;
}

.home-bg .home .slide .image{
   flex:1 1 40rem;
}

.home-bg .home .slide .image img{
   height: 40rem;
   width: 100%;
   object-fit: contain;
}

.home-bg .home .slide .content{
   flex:1 1 40rem;
}

.home-bg .home .slide .content span{
   font-size: 2rem;
   color:var(--white);
}

.home-bg .home .slide .content h3{
   margin-top: 1rem;
   font-size: 4rem;
   color:var(--white);
   text-transform: uppercase;
}

.home-bg .home .slide .content .btn{
   display: inline-block;
   width: auto;
}

.swiper-pagination-bullet-active{
   background-color: var(--main-color);
}



.category .slide{
   margin-bottom: 5rem;
   margin-top: 5px;
   box-shadow: 0px 0px 3px 0px black;
   
   text-align: center;
   padding:2rem;
   background: var(--white);
   border-radius: .5rem;
   animation: fade-up2 3s;
}
.category .slide:hover{
   box-shadow: 0px 0px 6px 1px #4dafe9;
}
.category .slide:hover h3{
   color:#4dafe9;
}
@keyframes fade-up2{
   0%{
      transform: translateX(-100px) scale(0.5);
      transform: translateY(100px) scale(0.5);

   }
   100%{
      transform: translateZ(0px) scale(1);
   }
   
}
.category .slide:active{
   background-image: radial-gradient( circle farthest-corner at 10% 20% ,rgb(62 158 255) 10%, rgb(97 196 255) 80%, rgb(67 202 255) 50%);
}

.category .slide:hover img{
 
   animation: fade-up1 3s;
}
.category .slide:active img{
   color: white;
   filter:invert();
}
.category .slide:active h3{

   color:var(--white);
}

.category .slide img{
   height: 7rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem;
   user-select: none;
   animation: fade-up1 3s;
   transform: scale(1);
}
.category .slide img:hover{
   transform: scale(1.1);
   transition: 0.7s;
}
.category .slide h3{
   font-size: 2rem;
   color:var(--black);
   user-select: none;
   animation: fade-up1 3s;
}
/* .category .slide h3:hover{
   color: aqua;
} */
@keyframes fade-up1{
   0%{
      transform: translateX(100px) scale(0.5);
      transform: translateY(-100px) scale(0.5);

   }
   100%{
      transform: translateZ(0px) scale(1);
   }
   
}
.home-products .slide{
   position: relative;
   padding: 2rem;
   border-radius: 0.5rem;
   /* border: var(--border); */
   background-color: var(--white);
   box-shadow: 0px 0px 5px 1px black;
   margin-bottom: 5rem;
   margin: 5px 0px 5rem 0px;
   overflow: hidden;
   user-select: none;
}
.home-products .slide:hover{
   box-shadow: 0px 0px 5px 1px #4dafe9;
}
.home-products .slide img{
   width: 100%;
   height: 20rem;
   object-fit: cover;
   margin-bottom: 2rem;
}

.home-products .slide .name{
   font-size: 2rem;
   color:var(--black);
   text-align: center;
}

.home-products .slide .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1rem;
}

.home-products .slide .flex .qty{
   width: 7rem;
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.home-products .slide .flex .price{
   margin:1rem 0;
   font-size: 2rem;
   color:var(--red);
}

.home-products .slide .fa-heart,
.home-products .slide .fa-eye{
   position: absolute;
   top: 4.4rem;
   height: 4rem;
   width: 12rem;
   line-height: 4rem;
   font-size: 15px;
   background-color: var(--white);
   /* border: 1px solid black; */
   box-shadow: 0px 0px 3px 0.5px black;
   border-radius: 0.5rem;
   text-align: center;
   color: var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.home-products .slide .fa-heart{
   right: -11.5rem;
}

.home-products .slide .fa-eye{
   left: -11.5rem;
}

.home-products .slide .fa-heart:hover,
.home-products .slide .fa-eye:hover{
    background-color: var(--white);
    box-shadow: 0px 0px 3px 0.5px #7cc3f3;
    color: #0049ff;
}

.home-products .slide:hover .fa-heart{
   right: 1rem;
}

.home-products .slide:hover .fa-eye{
   left: 1rem;
}

.quick-view form{
   padding: 2rem;
    background-color: var(--white);
    box-shadow: 0px 0px 8px 2px black;
    margin-top: 1rem;
}

.quick-view form .row{
   display: flex;
   align-items: center;
   gap:1.5rem;
   flex-wrap: wrap;
}

.quick-view form .row .image-container{
   margin-bottom: 2rem;
   flex:1 1 40rem;
}

.quick-view form .row .image-container .main-image img{
   height: 40rem;
   width: 100%;
   object-fit: contain;
}

.quick-view form .row .image-container .sub-image{
   display: flex;
   gap:1.5rem;
   justify-content: center;
   margin-top: 2rem;
}

.quick-view form .row .image-container .sub-image img{
   height: 7rem;
   width: 10rem;
   object-fit: cover;
   padding:.5rem;
   border:var(--border);
   cursor: pointer;
   transition: .2s linear;
}
.quick-view form .row .image-container .sub-image img:hover{
   transform: scale(1.05);
   border-color: #ff9100;
}
.quick-view form .flex .image-container .sub-image img:hover{
   transform: scale(1.1);
}

.quick-view form img{
   width: 100%;
   height: 20rem;
   object-fit: contain;
   margin-bottom: 2rem;
}

.quick-view form .row .content{
   flex:1 1 40rem;
}

.quick-view form .row .content .name{
   font-size: 2rem;
   color:var(--black);
   text-align: center;
}

.quick-view form .row .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap:1rem;
   margin:1rem 0;
}

.quick-view form .row .flex .qty{
   width: 7rem;
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.quick-view form .row .flex .price{
   font-size: 2rem;
   color:var(--red);
}

.quick-view form .row .content .details{
   font-size: 1.6rem;
   color:black;
   line-height: 2;
   text-align: justify;
}  

.products .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 33rem);
   gap:2.5rem;
   justify-content: center;
   align-items: flex-start;
}

.products .box-container .box{
   position: relative;
   background-color: var(--white);
   border-radius: .5rem;
   /* border:var(--border); */
   box-shadow: 0px 1px 6px 0px black;
   padding:2rem;
   overflow: hidden;
}
.products .box-container .box:hover{
   box-shadow: 0px 0px 11px 1px #7cc3f3;
  
  
}
.products .box-container .box img{
   height: 20rem;
   width: 100%;
   object-fit: contain;
   margin-bottom: 1rem;
}

.products .box-container .box .fa-heart,
.products .box-container .box .fa-eye{
   position: absolute;
   top: 4.4rem;
   height: 4rem;
   width: 12rem;
   line-height: 4rem;
   font-size: 15px;
   background-color: var(--white);
   /* border: 1px solid black; */
   box-shadow: 0px 0px 3px 0.5px black;
   border-radius: 0.5rem;
   text-align: center;
   color: var(--black);
   cursor: pointer;
   transition: .2s linear;
}

.products .box-container .box .fa-heart{
   right: -11.5rem;
}

.products .box-container .box .fa-eye{
   left: -11.5rem;
}

.products .box-container .box .fa-heart:hover,
.products .box-container .box .fa-eye:hover{
   background-color: var(--white);
   box-shadow: 0px 0px 3px 0.5px #7cc3f3;
   color: #0049ff;
}

.products .box-container .box:hover .fa-heart{
   right:1rem;
}

.products .box-container .box:hover .fa-eye{
   left:1rem;
}

.products .box-container .box .name{
   font-size: 2rem;
   color:var(--black);
   text-align: center;
}

.products .box-container .box .flex{
   display: flex;
   align-items: center;
   gap:1rem;
}

.products .box-container .box .flex .qty{
   width: 7rem;
   padding:1rem;
   border:var(--border);
   font-size: 1.8rem;
   color:var(--black);
   border-radius: .5rem;
}

.products .box-container .box .flex .price{
   font-size: 2rem;
   color:var(--red);
   margin-right: auto;
}

.form-container form{

   padding: 4rem;
    border-radius: 0.5rem;
    border: 20px groove rgb(255 108 0);
    /*box-shadow: 0px 0px 7px 3px #cbcbcb;*/
    text-align: center;
    margin: 90px auto;
    max-width: 75rem;
    /* height: 500px; */
}

.form-container form h3{
   font-size: 3.5rem;
   text-transform: uppercase;
   color:rgb(255, 255, 255);
}

.form-container form p{
   font-size: 2rem;
   color:white;
   margin:1.5rem 0;
}

.form-container form .box{
   margin:1rem 0;
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);  
   width: 100%;
   border-radius: .5rem;
   box-shadow: 0 0 0px 0px rgb(255, 255, 255);
}
.form-container form .box:hover{
   box-shadow: 0 0 7px 3px rgb(255, 255, 255);
}
.haqimizda{
   background: url("../images/tatusf2.jpg");
   height: 550px;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   border-radius: 0px 0px 100px 100px;
}



/* *****************INDEX HAMKOR************************ */

.containerlogoimg {
   max-width: 100%;
    width: 95%;
    margin: 0px 0px 10px 50px;
 }
 
 .slider-wrapper {
   position: relative;
 }
 
 .slider-wrapper .slide-button {
   position: absolute;
   top: 50%;
   outline: none;
   border: none;
   height: 50px;
   width: 50px;
   z-index: 5;
   color: #fff;
   display: flex;
   cursor: pointer;
   font-size: 2.2rem;
   background: #000;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   transform: translateY(-50%);
 }
 
 .slider-wrapper .slide-button:hover {
   box-shadow: 0px 0px 7px 3px #ff8800;
   color: #ff8800;
   background: white;
   border: 1px solid #ff8800;
   transition: all 0.5s;
 }
 
 .slider-wrapper .slide-button#prev-slide {
   left: -10px;
   display: none;
 }
 
 .slider-wrapper .slide-button#next-slide {
   right: -25px;
 }
 
 .slider-wrapper .image-list {
   display: grid;
   grid-template-columns: repeat(10, 1fr);
   gap: 1px;
   font-size: 0;
   list-style: none;
   margin-bottom: 30px;
   overflow-x: auto;
   scrollbar-width: none;
 }
 
 .slider-wrapper .image-list::-webkit-scrollbar {
   display: none;
 }
 
 .slider-wrapper .image-list .image-itemlogoimg {
   width: 265px;
   height: 230px;
   object-fit: contain;
 }
 .slider-wrapper .image-list .image-itemlogoimg:hover{
   transition: 2s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
   transform: scale(1.1)
 }
 .containerlogoimg .slider-scrollbar {
   height: 24px;
   width: 100%;
   display: flex;
   align-items: center;
 }
 
 .slider-scrollbar .scrollbar-track {
   background: #ccc;
   width: 100%;
   height: 2px;
   display: flex;
   align-items: center;
   border-radius: 4px;
   position: relative;
 }
 
 .slider-scrollbar:hover .scrollbar-track {
   height: 4px;
 }
 
 .slider-scrollbar .scrollbar-thumb {
   position: absolute;
   background: #000;
   top: 0;
   bottom: 0;
   width: 50%;
   height: 100%;
   cursor: grab;
   border-radius: inherit;
 }
 
 .slider-scrollbar .scrollbar-thumb:active {
   cursor: grabbing;
   height: 8px;
   top: -2px;
 }
 
 .slider-scrollbar .scrollbar-thumb::after {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   top: -10px;
   bottom: -10px;
 }
 
 /* Styles for mobile and tablets */
 
 
@media (min-width:1024px) and (max-width:1270px){
   #translate_button{
       top: 85px;
    }
    #google_translate_element{
       top: 130px;
    }
    #translate_button{
       padding: 5px;
    }
    #translate_button span{
       margin-right: 5px;
       font-size: 2rem;
    }
}

/* @media only screen and (min-width: 1023px) {
   .carouselnews .listnews .itemnews .buttonsnews{
      margin-top: 485px;
      margin-left: calc(0% + 290px);
   }
} */

 @media only screen and (max-width: 1023px) {
 
   /* .lang-menuhemis{
      display: none;
   } */
   #translate_button{
      top: 72px;
   }
   #google_translate_element{
      top: 110px;
   }
   #translate_button{
      padding: 5px;
   }
   #translate_button span{
      margin-right: 5px;
      font-size: 2rem;
   }
   .containerlogoimg {
      max-width: 100%;
       width: 95%;
       margin: 0px 0px 10px 10px;
    }
   .slider-wrapper .slide-button {
     display: none !important;
   }
 
   .slider-wrapper .image-list {
     gap: 10px;
     margin-bottom: 15px;
     scroll-snap-type: x mandatory;
   }
 
   .slider-wrapper .image-list .image-itemlogoimg {
     width: 280px;
     height: 285px;
   }
 
   .slider-scrollbar .scrollbar-thumb {
     width: 20%;
   }
 }
 
/* *****************INDEX HAMKOR************************ */
.about .row{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap:1.5rem;
}





.about .row .image{
   flex:1 1 20rem;
   width: 400px;
   transform: scale(1);
}
.about .row .image:hover{
   transform: scale(1.04);
   transition: 1s;
}

.about .row .image img{
   width: 100%;
   box-shadow: 0px 0px 7px 2.5px black;
   border-radius: 10px;
}

.about .row .content{
   flex:1 1 40rem;
}

.about .row .content h3{
   font-size: 2.2rem;
   color: black;
   text-align: center;
}

.about .row .content p {
   line-height: 1.6;
   font-size: 2rem;
   text-align: justify;
   padding: 1rem 0;
}

.about .row .content .btn{
   display: inline-block;
   
}


.readread1{
   width: 200px;
   height: 40px;
   padding-top: 7px;
   border: 1px solid #000000;
   text-decoration: none;
   border-radius: 30px;
   margin-left: 24%;
   margin-top: 10px;
   transform: scale(1);
   transition: 0.3s;
}
.readread1:hover{
   border: 1px solid #ffffff;
   box-shadow: 0px 0px 8px 2px white;
   transform: scale(1.02);
   background-color: rgb(255, 255, 255);
}
.readread1 i:hover{
   color: aqua;
}
.tarmoq{
   font-size:30px;
   border:0px solid black;
   margin-left:30px;
   text-decoration: none;
   border-radius: 50%;

}
.tarmoq a i{
  
   color: rgb(2, 2, 2);
}
.tarmoq a i:hover{
   color: rgb(1, 120, 255);
}



.foydalanuvchi{
   font-size:15px; 
   text-align:justify; 
   line-height:1.3;
}
.foydalanuvchiend{
text-align:center;
 font-size:20px; 
 margin-left:25px;
}
.foydalanuvchiext{
   text-align:center;
   font-size:20px;
   margin-left:50px;
}
.markaz {
   border:2px solid black;
   display: inline-flex;
   width: 100%;
   height: auto;
}
.markazone{
   margin: 10px;
   padding: 10px;
   text-align: center;
   border:2px solid black;
   font-size: 20px;
   width: auto;

}
.reviews .slide{
   padding:2rem;
   text-align: center;
   box-shadow: 0px 2px 1rem 0px rgb(0 0 0 / 24%);
   border-radius: .5rem;
   margin-bottom: 5rem;
   user-select: none;
}
.reviews .slide:hover{
   box-shadow: 0px 10px 1.5rem 0px rgb(0 0 0 / 48%);
   transform: scale(1.02); 
   transition: 1.3s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%); 
}
.reviews .slide img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   margin-bottom: .5rem;
}

.reviews .slide p{
   padding:1rem 0;
   line-height: 2;
   font-size: 1.5rem;
   text-align: justify;
   color:black;
}

.reviews .slide .stars{
   display: inline-block;
   margin-bottom: 1rem;
   background-color: var(--light-bg);
   padding:1rem 1.5rem;
   border-radius: .5rem;
}

.reviews .slide .stars i{
   margin:0 .3rem;
   font-size: 1.7rem;
   color:var(--orange);
}

.reviews .slide h3{
   font-size: 2rem;
   color:black;
}

.contact form{
   padding: 2rem;
   text-align: center;
   /* background-color: var(--white); */
   box-shadow: 0px 0px 8px 1px black;
   border-radius: 0.5rem;
   /* border: var(--border); */
   max-width: 70rem;
   margin: 0 auto;
}

.contact form h3{
   margin-bottom: 1rem;
   font-size: 2.5rem;
   color:var(--black);
}

.contact form .box{
   margin: 1rem 0;
    width: 100%;
    /* background-color: var(--light-bg); */
    padding: 1.4rem;
    box-shadow: 0 0 5px 0px black;
    font-size: 1.8rem;
    /* border: 2px solid black; */
    color: var(--black);
    border-radius: 0.5rem;
}
.contact form .box:hover{
   box-shadow: 0 0 5px 0px #7cc3f3;
}
.contact form textarea{
   height: 15rem;
   resize: none;
}

.search-form form{
   display: flex;
   gap:1rem;
   margin-top: 20px;
}

.search-form form input{
   width: 100%;
   border-radius: .5rem;
   background-color: var(--white);
   box-shadow: 0px 0px 6px 0px black;
   padding:1.4rem;
   font-size: 1.8rem;
   color:var(--black);
}
.search-form form input:hover{
   box-shadow: 0px 0px 10px 1px #4dafe9;
   border-radius: 0px;
}
.search-form form button{
   font-size: 2.5rem;
   height: 5.5rem;
   line-height: 5.5rem;
   background-color: var(--main-color);
   cursor: pointer;
   color:var(--white);
   border-radius: .5rem;
   width: 6rem;
   text-align: center;
}

.search-form form button:hover{
   background-image: radial-gradient( circle farthest-corner at 10% 20% ,rgb(62 158 255) 10%, rgb(97 196 255) 80%, rgb(67 202 255) 50%);
}

.wishlist-total{
   max-width: 50rem;
   margin:0 auto;
   margin-top: 3rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;;
   padding:2rem;
   text-align: center;
}

.wishlist-total p{
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: 2rem;
}

.wishlist-total p span{
   color:var(--red);
}

.shopping-cart .fa-edit{
   height: 4.5rem;
   border-radius: .5rem;
   background-color: var(--orange);
   width: 5rem;
   font-size: 2rem;
   color:var(--white);
   cursor: pointer;
}



.shopping-cart .fa-edit:hover{
   background-color: var(--black);
}

.shopping-cart .sub-total{
   margin:2rem 0;
   font-size: 2rem;
   color:var(--light-color);
}

.shopping-cart .sub-total span{
   color:var(--red);
}

.cart-total{
   max-width: 50rem;
   margin:0 auto;
   margin-top: 3rem;
   background-color: var(--white);
   border:var(--border);
   border-radius: .5rem;;
   padding:2rem;
   text-align: center;
}

.cart-total p{
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: 2rem;
}

.cart-total p span{
   color:var(--red);
}

.display-orders{
   text-align: center;
   padding-bottom: 0;
}

.display-orders p{
   display: inline-block;
   padding:1rem 2rem;
   margin:1rem .5rem;
   font-size: 2rem;
   text-align: center;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.display-orders p span{
   color:var(--red);
}

.display-orders .grand-total{
   margin-top: 1.5rem;
   margin-bottom: 2.5rem;
   font-size: 2.5rem;
   color:var(--light-color);
}

.display-orders .grand-total span{
   color:var(--red);
}

.checkout-orders form{
   padding:2rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.checkout-orders form h3{
   border-radius: .5rem;
   background-color: var(--black);
   color:var(--white);
   padding:1.5rem 1rem;
   text-align: center;
   text-transform: uppercase;
   margin-bottom: 2rem;
   font-size: 2.5rem;
}

.checkout-orders form .flex{
   display: flex;
   flex-wrap: wrap;
   gap:1.5rem;
   justify-content: space-between;
}

.checkout-orders form .flex .inputBox{
   width: 49%;
}

.checkout-orders form .flex .inputBox .box{
   width: 100%;
   border:var(--border);
   border-radius: .5rem;
   font-size: 1.8rem;
   color:var(--black);
   padding:1.2rem 1.4rem;
   margin:1rem 0;
   background-color: var(--light-bg);
}

.checkout-orders form .flex .inputBox span{
   font-size: 1.8rem;
   color:var(--light-color);
}

.orders .box-container{
   display: flex;
   flex-wrap: wrap;
   gap:1.5rem;
   align-items: flex-start;
}

.orders .box-container .box{
   padding:1rem 2rem;
   flex:1 1 40rem;
   border:var(--border);
   background-color: var(--white);
   box-shadow: var(--box-shadow);
   border-radius: .5rem;
}

.orders .box-container .box p{
   margin:.5rem 0;
   line-height: 1.8;
   font-size: 2rem;
   color:var(--light-color);
}

.orders .box-container .box p span{
   color:var(--main-color);
}

.footer{
   background-color: var(--white);
   
}

.footer .grid{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
   gap:1rem;
   align-items: flex-start;
   /* margin-left: 8%; */
}

.footer .grid .box h3{
   font-size: 2.2rem;
   color:var(--black);
   margin-bottom: 2rem;
   /* text-transform: capitalize; */
}

.footer .grid .box a{
   display: block;
   margin:1.5rem 0;
   font-size: 2rem;
   color:var(--light-color);
}

.footer .grid .box a i{
   padding-right: 1rem;
   color:var(--main-color);
   transition: .2s linear;
}

.footer .grid .box a:hover{
   color:var(--main-color);
}

.footer .grid .box a:hover i{
   padding-right: 2rem;
}

.footer .credit{
   text-align: center;
   padding: 2.5rem 2rem;
   border-top: var(--border);
   font-size: 2rem;
   color:var(--white);
   background-color: black;
}
.testrejimi{
   font-size: 1.5rem;
}
.testrejimiikki{
   font-size: 1.9rem;
}
.footer .credit span{
   color:var(--main-color);
}



.footer .creditfooter{
   text-align: center;
   padding: 1.1rem 2rem;
   border-top: var(--border);
   font-size: 2rem;
   background: black;
   color:white;
   display: none;
}

.footer .creditfooter span{
   color:var(--main-color);
}


/* Orders sahifasidagi load more dastur kodi boshlanishi */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap');


.containerzed{
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding:25px 20px;
  transition: all .2s linear;
  
}

.containerzed .headingzed{
  font-size: 40px;
  margin-bottom: 20px;
  color:#334;
  transition: all .2s linear;
}

.containerzed .box-containerzed{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap:20px;
  transition: all .2s linear;
}

.containerzed .box-containerzed .boxzed{
  background-color: #fff;
  /* padding:15px; */
  border-radius: 5px;
  box-shadow: 0px 0px 4px 3px rgb(0 0 0 / 51%);
  display: none;
  transition: all .2s linear;
}

.containerzed .box-containerzed .boxzed:nth-child(1),
.containerzed .box-containerzed .boxzed:nth-child(2),
.containerzed .box-containerzed .boxzed:nth-child(3){
  display: inline-block;
}

.containerzed .box-containerzed .boxzed .imagezed{
  
  overflow: hidden;
  height: 250px;
  border-radius: 5px;
  transition: all .2s linear;
}

.containerzed .box-containerzed .boxzed .imagezed img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: all .2s linear;
  
}

.containerzed .box-containerzed .boxzed:hover .imagezed img{
  transform: scale(1.1);
}

.containerzed .box-containerzed .boxzed .contentzed h3{
   margin-top: 10px;
  font-size: 20px;
  color:#334;
}

.containerzed .box-containerzed .boxzed .contentzed p{
  font-size: 15px;
  color:#777;
  line-height: 2;
  padding:10px ;
  text-align: center;
  transition: all .2s linear;
}

.containerzed .box-containerzed .boxzed .contentzed .btnzed{
  display: inline-block;
  padding:6px 10px;
  border:1px solid #334;
  color:#334;
  font-size: 16px;
  transition: all .2s linear;
}

.containerzed .box-containerzed .boxzed .contentzed .btnzed:hover{
  background-color: #00a3ff;
  border-color: #00a3ff;
  color:#fff;
  transition: all .2s linear;
}

.containerzed .box-containerzed .boxzed .contentzed .iconszed{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 15px;
  border-top:1px solid #334;
  transition: all .2s linear;
}

.containerzed .box-containerzed .boxzed .contentzed .iconszed span{
  font-size: 14px;
  color:#777;
  margin-right: 7px;
  transition: all .2s linear;
}

.containerzed .box-containerzed .boxzed .contentzed .iconszed span i{
  color:crimson;
  padding-right: 5px;
  margin-left: 7px;
}

#load-more{
  margin-top: 20px;
  display: inline-block;
  box-shadow: 0px 0px 5px 1px black;
  border:1px solid #334;
  color:#334;
  font-size: 16px;
  background-color: #fff;
  cursor: pointer;
    padding: 8px 20px;
    border: 1px solid #334;
    border-radius: 7px;
}

#load-more:hover{
  background-color: #00a3ff;
  border-color: #00a3ff;
  color:#fff;
  transition: all .2s linear;
}

/* Orders sahifasidagi load more dastur kodi tugashi */
@media (max-width:1270px){
   .animated-text span{
      display: none;
    
   }
  .sarlavhauz{
   display: inline-block;
  }
}



@media (max-width:991px){
   .audioone{
      display: none;
   }
   .audiotwo{
      display: block;
   }
  
   .videogalleryjtsiti{
      width: 100%;
      height: 520px;
      padding: 15px;
      /* margin-left: calc(10% - 35px); */
     }
     .videogalleryjtsitiiframe{
        height: 490px;
     }
   .containerlogoimg {
      max-width: 100%;
       width: 95%;
       margin: 0px 0px 10px 10px;
    }
   html{
      font-size: 55%;
   }

}

@media (max-width:768px){
      .footer .grid .box a{
       font-size: 1.7rem;
    }

   nav{
      display: block;
   }
   .animated-text span{
      display: none;
     
   }
   
   .lang-menu ul {
      width: 160px;
      right: -24px;
      position: static;
  }


  .lang-menu ul li a{
   padding: 0px 0px;
  }
  .lang-menu .selected-lang{
   font-size: 20.6px;
  }
   .videogalleryjtsiti{
      width: 100%;
      height: 520px;
      padding: 15px;
      /* margin-left: calc(10% - 35px); */
     }
     .videogalleryjtsitiiframe{
        height: 490px;
     }
   .containerlogoimg {
      max-width: 100%;
       width: 95%;
       margin: 0px 0px 10px 10px;
    }
   .dateone{
      margin-left: 40%;
  }
   #menu-btn{
      display: inline-block;
   }
   .headerone .flex .navbar{
      position: absolute;
      top:99%; left:0; right:0;
      border-top: var(--border);
      border-bottom: var(--border);
      background-color: var(--white);
      transition: .2s linear;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }

   .headerone .flex .navbarone{
      position: absolute;
      top:99%; left:0; right:0;
      border-top: var(--border);
      border-bottom: var(--border);
      background-color: var(--white);
      transition: .2s linear;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   .headerone .flex .navbarone a{
      display: block;
      margin:2rem;
   }
   .headerone .flex .navbar a{
      display: block;
      margin:2rem;
   }
   /* *************************** */
   .header .flex .navbarone{
      position: absolute;
      top:99%; left:0; right:0;
      border-top: var(--border);
      border-bottom: var(--border);
      background-color: var(--white);
      transition: .2s linear;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }

   .header .flex .navbarone.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
   }

   .header .flex .navbarone a{
      display: block;
      margin:2rem;
   }
   /* ******************* */
   .header .flex .navbar{
      position: absolute;
      top:99%; left:0; right:0;
      border-top: var(--border);
      border-bottom: var(--border);
      background-color: var(--white);
      transition: .2s linear;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }

   .header .flex .navbar.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
   }

   .header .flex .navbar a{
      display: block;
      margin:2rem;
   }

   .home-bg .home .slide .content{
      text-align: center;
   }

   .home-bg .home .slide .content h3{
      font-size: 3rem;
   }

}

@media (max-width:450px){
   /* .carouselnews .listnews .itemnews .buttonsnews{
      
      margin-top: 390px;
  } */
  
  
  .btnelonyangilik{
   background-color: #2980b9;
  }
  .btnelonyangilik {
   margin-top: 5rem;
   color: rgb(255, 255, 255);

}
   .animated-text span{
      display: none;
   }
   .videogalleryjtsiti{
    width: 100%;
    height: 520px;
    padding: 15px;
    /* margin-left: calc(10% - 35px); */
   }
   .videogalleryjtsitiiframe{
      height: 490px;
   }
   nav{
      margin: 0px;
   }
   .containerlogoimg {
      max-width: 100%;
       width: 95%;
       margin: 0px 0px 10px 10px;
    }
   .galleryyangirasmlar .image-containeryangirasmlar .imageyangirasmlar{
      margin-bottom: 20px;
   }
   .dateone{
      margin-left: 36%;
  }
   .containerlogoimg{
      margin: 0px 0px 10px 5px
   }
   .lang-menu .selected-lang { 
      font-size: 18px;
      justify-content: space-between;
  }
.image iframe{
   width: 300px;
}
   .lang-menu{
      font-size: 13px;
      width: 55px;
      margin-left: 15px;
   }
   .lang-menu ul{
      width: 135px;
      right: -24px;
      position: static;
   }
   .lang-menu ul li a{
      padding: 4px 4px;
   }
   .lang-menuhemis {
      width: 50px;
      font-size: 14px;
      box-shadow: 0px 0px 3px 1px black;
   }
   .lang-menuhemis .selected-langhemis {
      font-size: 13px;
      height: 20px;
   }
  
   .lang-menuhemis ul {
      right: -5px;
      top: 35px;
      width: 133px;  
   }
   
   
   .containerzed .headingzed{
      font-size: 25px;
    }
  
    .containerzed .box-containerzed{
      grid-template-columns: 1fr;
    }
    .containerzed .box-containerzed .boxzed{
      padding: 0px;
    }
    .containerzed .box-containerzed .boxzed .contentzed p{
      font-size: 12px;
    }
  
    .containerzed .box-containerzed .boxzed .contentzed .iconszed span{
      font-size: 12px;
    }
   .about .row .image:hover{
      transform: scale(1.05);
   }
   .message span{
    font-size: 2rem;
    color: var(--black);
    text-align: center;
   }

   .header .flex .logo img{
      width: 45px;
      height: 45px;
   }
   html{
      font-size: 50%;
   }

   .heading{
      font-size: 2rem;
   }

   .flex-btn{
      flex-flow: column;
      gap:0;
   }

   .quick-view form .row .image-container .sub-image img{
      width: 8rem;
   }

   .checkout-orders form .flex .inputBox{
      width: 100%;
   }
   .footer .creditfooter{
      display: block;
   }
   .footer .grid .box h3{
      display: none;
   }
   .footer .grid {
      grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
      gap: 0rem;
  }
  
}



/* **************************** */