* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

header {
  width: 100%;
  height: 10vh;
  background-color: #0B0D17;
  display: flex;
  align-items: center;
  padding: 10px 100px;
  justify-content: space-between;
}
header .logo {
  display: flex;
  align-items: center;
  gap: 20px;
}
header img {
  width: 100px;
  height: 30px;
}
header p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6039215686);
}
header nav {
  display: flex;
  gap: 25px;
  align-items: center;
}
header nav .onli {
  color: #60CDF6;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-decoration-line: underline;
}
header nav h1 {
  color: #fff;
  font-size: 14px;
  border-radius: 15px;
}
header nav button {
  width: 70px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 15px;
  border: 1px solid #31333D;
  background: #23252E;
  color: #fff;
}
header nav a {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
}

.grafik {
  width: 100%;
  height: 70vh;
  background-size: cover;
  background-image: url("/Rectangle 2 (1).png");
  display: flex;
  align-items: center;
}
.grafik .hom {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grafik p {
  color: #fff;
}
.grafik .dizayn {
  width: 470px;
}
.grafik .dizayn p {
  color: #FFF;
  font-size: 45px;
  font-style: normal;
  font-weight: 700;
}
.grafik .dizayn button {
  background-color: #EF3833;
  border-radius: 4px;
  border: 1px solid #EF3833;
  display: inline-flex;
  padding: 7px 21px 3px 21px;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}
.grafik .dizayn h1 {
  color: #FFF;
  font-size: 22px;
  font-style: normal;
  font-weight: 300;
}
.grafik .dizayn span {
  color: #FFF;
  font-size: 22px;
  font-weight: 300;
  text-decoration-line: underline;
}
.grafik .dizayn .lumot {
  display: inline-flex;
  padding: 15px 24px 12px 23px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #53C2EC;
  background: #45CCFF;
  color: #FFF;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}
.grafik .smesh {
  display: flex;
  justify-content: end;
}
.grafik .smesh img {
  margin-top: -20px;
  margin-left: -16px;
}
.grafik .dizayner {
  width: 180px;
  height: 44px;
}
.grafik .dizayner span {
  font-weight: 700;
  text-decoration: none;
}
.grafik .dizayner p {
  color: #FFF;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
}
.grafik .dizayner h1 {
  color: #60CDF6;
  font-size: 18px;
  text-align: end;
}

.organ {
  width: 100%;
  height: 110vh;
  padding: 10px 100px;
}
.organ p {
  font-size: 18px;
  font-weight: 800;
}
.organ h1 {
  color: #51555E;
  font-family: Inter;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
.organ button {
  border-radius: 4px;
  border: 1px solid #53C2EC;
  background-color: #45CCFF;
  width: 154px;
  height: 44px;
  flex-shrink: 0;
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}
.organ .box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  padding: 100px 10px;
}
.organ .box .meni {
  width: 370px;
  height: 41px;
  flex-shrink: 0;
}
.organ .box h2 {
  color: #A1A6B1;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}
.organ .box .hudi {
  display: flex;
  gap: 10px;
  align-items: center;
}
.organ .box .imgg {
  display: flex;
  gap: 20px;
  align-items: center;
}
.organ .box img {
  width: 186px;
  height: 186px;
}
.organ .box img:hover {
  box-shadow: 12px 15px 28px 0px rgba(34, 60, 80, 0.2);
}
.organ iframe {
  width: 570px;
  height: 290px;
  border-radius: 12px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), url(<path-to-image>), lightgray 50%/cover no-repeat;
}
.organ .youtube {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.organ .youtube p {
  color: #242935;
  font-size: 38px;
  margin-top: 20px;
}
.organ .youtube h1 {
  color: #51555E;
  font-size: 15px;
}
.organ .youtube .tube {
  width: 570px;
  height: 202px;
  position: relative;
}
.organ .youtube .ishla {
  width: 200px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 15px;
  border: 1px solid #D0D5DD;
  background-color: #FFF;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 350px;
  top: 260px;
}
.organ .youtube h2 {
  color: #344054;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.afsal {
  width: 100%;
  height: 70vh;
  background-image: url("/Rectangle 1219.png");
  padding: 70px 100px;
}
.afsal p {
  color: #FFF;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
}
.afsal .big {
  width: 100%;
  display: flex;
  gap: 50px;
}
.afsal .one {
  width: 270px;
  height: 106px;
  flex-shrink: 0;
  position: relative;
}
.afsal .one p {
  color: #FFF;
  text-align: center;
  font-size: 120px;
  font-style: normal;
  font-weight: 700;
  text-align: left;
}
.afsal .one h1 {
  color: #D9D9D9;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
.afsal .one h2 {
  color: #D9D9D9;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
.afsal .two {
  width: 270px;
  height: 106px;
  flex-shrink: 0;
  position: relative;
}
.afsal .two p {
  color: #FFF;
  text-align: center;
  font-size: 120px;
  font-style: normal;
  font-weight: 700;
  text-align: left;
}
.afsal .two h1 {
  color: #D9D9D9;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
.afsal .two h2 {
  color: #D9D9D9;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
.afsal .three {
  width: 270px;
  height: 106px;
  flex-shrink: 0;
  position: relative;
}
.afsal .three p {
  color: #FFF;
  text-align: center;
  font-size: 120px;
  font-style: normal;
  font-weight: 700;
  text-align: left;
}
.afsal .three h1 {
  color: #D9D9D9;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
.afsal .three h2 {
  color: #D9D9D9;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
.afsal .four {
  width: 270px;
  height: 106px;
  flex-shrink: 0;
  position: relative;
}
.afsal .four p {
  color: #FFF;
  text-align: center;
  font-size: 120px;
  font-style: normal;
  font-weight: 700;
  text-align: left;
}
.afsal .four h1 {
  color: #D9D9D9;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
.afsal .four h2 {
  color: #D9D9D9;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
.afsal .prem {
  position: absolute;
  top: 30px;
  left: 110px;
}

.kimlar {
  width: 100%;
  height: 50vh;
  background: #F5F5F5;
}
.kimlar p {
  color: #242935;
  text-align: center;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  padding: 100px 100px;
}
.kimlar .ubsh {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 100px;
  margin-top: -50px;
}
.kimlar .merg {
  display: flex;
  gap: 25px;
  width: 300px;
}
.kimlar .merg h1 {
  color: #242935;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
}
.kimlar .merg img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.kimlar h2 {
  color: #51555E;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  padding: 50px;
}

.mumkin {
  width: 100%;
  height: 100vh;
}
.mumkin .meshen {
  width: 100%;
  height: 70vh;
  display: flex;
  justify-content: center;
}
.mumkin .meshen img {
  width: 60%;
  height: 60vh;
}
.mumkin p {
  color: #242935;
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  padding: 10px;
}
.mumkin .sinab {
  width: 168px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid #53C2EC;
  background: #45CCFF;
}
.mumkin .sinab p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}
.mumkin .center {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
}

.tarifi {
  width: 100%;
  height: 100vh;
  background: #F5F5F5;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.tarifi h1 {
  color: #242935;
  text-align: center;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  padding: 10px 100px;
}
.tarifi .tari {
  width: 970px;
  height: 240px;
  border-radius: 12px;
  background: #FFF;
  display: flex;
}
.tarifi .muallif {
  padding: 10px;
}
.tarifi .muallif p {
  color: #475467;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
}
.tarifi .muallif h2 {
  color: #828282;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  padding: 20px;
}
.tarifi .muallif .soat {
  display: flex;
  gap: 10px;
  padding: 10px;
}
.tarifi .batafsil {
  width: 123px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #D0D5DD;
  background: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.tarifi .batafsil h3 {
  color: #344054;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.tarifi .dollorr {
  width: 270px;
  height: 96px;
  border-radius: 12px 0px 0px 12px;
  background: #F1F1F1;
  margin-top: 30px;
  margin-left: 20px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tarifi .dollorr h1 {
  color: var(--Gray-900, #101828);
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  padding: 10px 10px;
}
.tarifi .dollorr p {
  color: var(--Gray-900, #101828);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
}
.tarifi .dollorr span {
  color: #828282;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.tarifi .dollor {
  width: 270px;
  height: 96px;
  border-radius: 12px 0px 0px 12px;
  background: #F1F1F1;
  margin-top: 30px;
  margin-left: 45px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tarifi .dollor h1 {
  color: var(--Gray-900, #101828);
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  padding: 10px 10px;
}
.tarifi .dollor p {
  color: var(--Gray-900, #101828);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
}
.tarifi .dollor span {
  color: #828282;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.tarifi .sotib {
  width: 154px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid #53C2EC;
  background: #45CCFF;
  margin-left: 80px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tarifi .sotib p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}
.tarifi .ponch {
  width: 200px;
  height: 300px;
}

.rekl {
  width: 100%;
  height: 40vh;
  background-image: url("/Rectangle 1227.png");
  background-size: cover;
}
.rekl .vint {
  width: 100%;
  height: 40vh;
  display: flex;
  justify-content: space-between;
  padding: 50px 350px;
  align-items: center;
  gap: 50px;
}
.rekl .btu {
  width: 370px;
}
.rekl .btu span {
  color: #45CCFF;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
}
.rekl .btu p {
  color: #FFF;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
}
.rekl .btu h1 {
  color: #B8BCC5;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
}
.rekl .otsht {
  width: 236px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid #53C2EC;
  background: #45CCFF;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.rekl .otsht p {
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}
.rekl .mut {
  display: flex;
  position: relative;
}
.rekl .mut p {
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  transform: rotate(-10.212deg);
  position: absolute;
  left: 260px;
  top: 100px;
}

.kamron {
  width: 100%;
  height: 120vh;
  background: #FAFAFA;
}
.kamron p {
  color: #242935;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  padding: 20px;
}
.kamron .kamtitr {
  padding: 100px 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.kamron .ismok {
  width: 570px;
  height: 292px;
  border-radius: 12px;
  background: #FFF;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.25);
  padding: 30px 50px;
}
.kamron .ismok h1 {
  color: var(--Neutral-700, #514F6E);
  font-size: 18px;
  font-weight: 400;
  width: 405px;
  height: 100px;
}
.kamron .ismok span {
  color: #4D9FEB;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
.kamron .ismok img {
  padding: 10px;
}
.kamron .buttu {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-left: -50px;
  margin-top: 50px;
}
.kamron .buttu .hang img {
  width: 60px;
  height: 30px;
}
.kamron .buttu button {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  gap: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: 7px 9px 22px 12px rgba(34, 60, 80, 0.2);
}
.kamron .serg {
  display: flex;
  align-items: center;
  position: relative;
  width: 570px;
  height: 100px;
  margin-left: -15px;
}
.kamron .serg p {
  color: var(--Neutral-800, #170F49);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}
.kamron .serg span {
  color: var(--Neutral-600, #6F6C90);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
}
.kamron .morgen {
  position: absolute;
  left: 400px;
  top: 35px;
}
.kamron .reci {
  display: flex;
  align-items: center;
  justify-content: center;
}
.kamron .reci img {
  width: 450px;
  height: 577px;
}

.paniya {
  width: 100%;
  height: 20vh;
  background: #0B0D17;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pusto {
  background-color: #090B14;
  width: 100%;
  height: 8vh;
  display: flex;
  align-items: center;
}
.pusto p {
  color: #444444;
  font-size: 14px;
  padding: 10px 100px;
}

@media (max-width: 900px) {
  header nav {
    display: none;
  }
  .grafik {
    background-image: url("/ismoill.jpg");
    height: 100vh;
  }
  .dizayn {
    padding-left: 180px;
    padding-top: 100px;
  }
  .dizayn p {
    width: 500px;
    margin-top: 450px;
  }
  .dizayn h1 {
    width: 400px;
  }
  .dizayner {
    padding: 100px;
    padding-top: 300px;
    width: 200px;
    height: 100px;
  }
  .smesh img {
    width: 250px;
    height: 50px;
    padding-left: 180px;
    margin-left: 200px;
  }
  .dizayner h1 {
    margin-left: 20px;
  }
  .dizayner p {
    margin-top: -400px;
    margin-left: 250px;
  }
  .buti button {
    margin-top: 200px;
  }
}/*# sourceMappingURL=style.css.map */