/************************* FONT STYLE ***************/
@font-face {
  font-family: "Inter-Bold";
  src: url("../assets/fonts/Inter/Inter-Bold.ttf") format("truetype"); }
@font-face {
  font-family: "Inter-Regular";
  src: url("../assets/fonts/Inter/Inter-Regular.ttf") format("truetype"); }
@font-face {
  font-family: "Inter-Light";
  src: url("../assets/fonts/Inter/Inter-Light.ttf") format("truetype"); }
@font-face {
  font-family: "Inter-SemiBold";
  src: url("../assets/fonts/Inter/Inter-SemiBold.ttf") format("truetype"); }
.font-family-bold {
  font-family: "Inter-Bold", sans-serif; }

.font-family-regular {
  font-family: "Inter-Regular", sans-serif; }

.font-family-light {
  font-family: "Inter-Light", sans-serif; }

.font-family-semi-bold {
  font-family: "Inter-SemiBold", sans-serif; }

/***************** COLORS STYLE ***************/
/********************* ICONS STYLE ******************/
.icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  mask-size: 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
  background-color: #F1B301; }
  .icon.icon-phone {
    mask-image: url("../assets/icons/phone.svg");
    -webkit-mask-image: url("../assets/icons/phone.svg"); }
  .icon.icon-basket {
    mask-image: url("../assets/icons/basket.svg");
    -webkit-mask-image: url("../assets/icons/basket.svg");
    height: 21px; }
  .icon.icon-filter {
    mask-image: url("../assets/icons/filter.svg");
    -webkit-mask-image: url("../assets/icons/filter.svg"); }
  .icon.icon-plus {
    mask-image: url("../assets/icons/plus.svg");
    -webkit-mask-image: url("../assets/icons/plus.svg"); }
  .icon.icon-play {
    mask-image: url("../assets/icons/google.svg");
    -webkit-mask-image: url("../assets/icons/google.svg"); }
  .icon.icon-apple {
    mask-image: url("../assets/icons/apple.svg");
    -webkit-mask-image: url("../assets/icons/apple.svg"); }
  .icon.icon-youtube {
    mask-image: url("../assets/icons/youtube.svg");
    -webkit-mask-image: url("../assets/icons/youtube.svg"); }
  .icon.icon-facebook {
    mask-image: url("../assets/icons/facebook.svg");
    -webkit-mask-image: url("../assets/icons/facebook.svg"); }
  .icon.icon-instagram {
    mask-image: url("../assets/icons/instagram.svg");
    -webkit-mask-image: url("../assets/icons/instagram.svg"); }
  .icon.icon-telegram {
    mask-image: url("../assets/icons/telegram.svg");
    -webkit-mask-image: url("../assets/icons/telegram.svg"); }
  .icon.icon-tik-tok {
    mask-image: url("../assets/icons/tik-tok.svg");
    -webkit-mask-image: url("../assets/icons/tik-tok.svg"); }

/********************* MAIN STYLE *******************/
html {
  font-size: 16px; }
  html body {
    overflow-x: hidden;
    width: 100%; }
    html body .header {
      background-image: linear-gradient(to right, #fff 60%, #800A7A 40%); }
      @media (max-width: 576px) {
        html body .header {
          background-image: linear-gradient(to bottom, #fff 30%, #800A7A 10%); } }
      html body .header .col-60 {
        width: 60%; }
      html body .header .col-40 {
        width: 40%; }
        @media (max-width: 767px) {
          html body .header .col-40 {
            width: 100%; } }
        html body .header .col-40 .icon {
          margin-right: 19px; }
        html body .header .col-40 .line {
          width: 1px;
          height: 43px;
          background-color: #ffffff;
          opacity: 0.4;
          margin-left: 40px;
          margin-right: 40px; }
          @media (max-width: 992px) {
            html body .header .col-40 .line {
              margin-right: 20px;
              margin-left: 20px; } }
        html body .header .col-40 p {
          font-size: 12px;
          line-height: 15px; }
          @media (max-width: 992px) {
            html body .header .col-40 p {
              font-size: 8px; } }
          @media (max-width: 767px) {
            html body .header .col-40 p {
              color: #222124 !important; } }
        html body .header .col-40 h4 {
          font-size: 18px; }
          @media (max-width: 992px) {
            html body .header .col-40 h4 {
              font-size: 12px; } }
          @media (max-width: 767px) {
            html body .header .col-40 h4 {
              color: #222124 !important; } }
        html body .header .col-40 .count {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #F1B301;
          border: 2px solid #800A7A;
          position: absolute;
          right: 6px;
          top: -10px;
          color: #ffffff;
          font-size: 10px;
          display: flex;
          align-items: center;
          justify-content: center; }
      html body .header header {
        padding-top: 120px;
        position: relative; }
        @media (max-width: 576px) {
          html body .header header .mobile-row {
            overflow: auto;
            margin-top: 46px;
            background-color: #ffffff; } }
        html body .header header h1 {
          font-size: 80px;
          line-height: 85px;
          color: #222124; }
          @media (max-width: 992px) {
            html body .header header h1 {
              font-size: 50px;
              line-height: 55px; } }
          @media (max-width: 576px) {
            html body .header header h1 {
              color: #ffffff; } }
        html body .header header p {
          font-size: 18px;
          line-height: 32px;
          color: #222124;
          margin-top: 14px; }
          @media (max-width: 576px) {
            html body .header header p {
              color: #ffffff; } }
        html body .header header .card {
          margin-top: 60px;
          border-radius: 12px;
          overflow: hidden; }
          @media (max-width: 992px) {
            html body .header header .card {
              box-shadow: 0 0 10px #ffffff; } }
          @media (max-width: 576px) {
            html body .header header .card {
              width: 255px; } }
          html body .header header .card.yellow {
            background-color: #F1B301; }
            html body .header header .card.yellow h3 {
              color: #E76A06; }
          html body .header header .card.purple {
            background-color: #800A7A; }
            html body .header header .card.purple h3 {
              color: #FC96F7; }
          html body .header header .card h3 {
            font-size: 34px;
            line-height: 32px; }
          html body .header header .card .card-body {
            padding: 20px; }
            html body .header header .card .card-body button {
              background: rgba(255, 255, 255, 0.203344);
              border-radius: 19px;
              color: #ffffff;
              padding: 8px 22px;
              font-size: 16px;
              line-height: 19px;
              margin-bottom: 56px; }
            html body .header header .card .card-body > img {
              position: absolute;
              right: 0;
              bottom: 0; }
        html body .header header .big-burger {
          position: absolute;
          right: 0;
          top: 65px;
          width: 54%; }
    @media (max-width: 992px) {
      html body main .menu {
        overflow: auto; } }
    @media (max-width: 992px) {
      html body main .menu .fil {
        display: none; } }
    @media (min-width: 992px) {
      html body main .menu .fil {
        display: block; } }
    @media (min-width: 992px) {
      html body main .menu .fil .fill {
        display: flex;
        align-items: center; } }
    @media (min-width: 992px) {
      html body main .menu .fil .fill .icon {
        margin-right: 5px; } }
    @media (max-width: 992px) {
      html body main .navs {
        border-radius: 27px;
        background-color: #F5F5F5;
        display: flex;
        justify-content: center; } }
    @media (max-width: 992px) {
      html body main .navs .filt {
        display: block; } }
    @media (min-width: 992px) {
      html body main .navs .filt {
        display: none; } }
    html body main .line {
      height: 1px;
      width: 100%;
      background-color: #EAEAEA;
      margin-top: 80px; }
    html body main .nav {
      margin-top: 40px; }
      html body main .nav .nav-link {
        color: #222124;
        font-size: 20px;
        line-height: 24px;
        padding: 15px 26px; }
        html body main .nav .nav-link.active {
          background-color: #F1B301;
          color: #ffffff;
          border-radius: 27px; }
      html body main .nav .nav-item:last-child .nav-link {
        background-color: #F5F5F5;
        border-radius: 27px;
        padding-left: 44px;
        padding-right: 44px; }
        html body main .nav .nav-item:last-child .nav-link .icon {
          width: 16px;
          height: 16px;
          background-color: #000000; }
    html body main .tab-pane section h1 {
      font-size: 52px;
      line-height: 63px;
      color: #222124;
      margin-top: 105px; }
      @media (max-width: 992px) {
        html body main .tab-pane section h1 {
          text-align: center; } }
    html body main .tab-pane section .card {
      border-radius: 12px;
      border: 1px solid rgba(151, 151, 151, 0.181927);
      margin-top: 30px; }
      html body main .tab-pane section .card .card-body {
        margin: 30px;
        padding: 0;
        position: relative;
        align-items: center; }
        html body main .tab-pane section .card .card-body h3 {
          font-size: 24px;
          line-height: 29px;
          color: #222124; }
          @media (max-width: 576px) {
            html body main .tab-pane section .card .card-body h3 {
              font-size: 18px;
              line-height: 22px; } }
        html body main .tab-pane section .card .card-body p {
          font-size: 14px;
          line-height: 17px;
          color: #A6A6A8;
          margin-top: 10px; }
          @media (max-width: 576px) {
            html body main .tab-pane section .card .card-body p {
              font-size: 12px;
              line-height: 15px; } }
        html body main .tab-pane section .card .card-body h2 {
          font-size: 24px;
          line-height: 29px;
          color: #222124;
          margin-top: 41px; }
          @media (max-width: 576px) {
            html body main .tab-pane section .card .card-body h2 {
              font-size: 18px;
              line-height: 22px;
              margin-top: 17px; } }
        html body main .tab-pane section .card .card-body .fire, html body main .tab-pane section .card .card-body .btn {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center; }
        html body main .tab-pane section .card .card-body .fire {
          background: rgba(255, 255, 255, 0.249235);
          box-shadow: 0 7px 40px rgba(238, 39, 68, 0.355086);
          backdrop-filter: blur(8.15485px);
          left: 0;
          top: 0; }
        html body main .tab-pane section .card .card-body .btn {
          right: 0;
          bottom: 0;
          background-color: #F1B301; }
          html body main .tab-pane section .card .card-body .btn .icon {
            transition: all 0.5s linear; }
          html body main .tab-pane section .card .card-body .btn:hover .icon {
            background-color: red !important; }
          html body main .tab-pane section .card .card-body .btn:focus .icon {
            transform: rotate(90deg); }
          @media (max-width: 576px) {
            html body main .tab-pane section .card .card-body .btn {
              right: -15px;
              bottom: -13px; } }
        html body main .tab-pane section .card .card-body .card-photo {
          margin-right: 41px; }
          @media (min-width: 992px) and (max-width: 1200px) {
            html body main .tab-pane section .card .card-body .card-photo {
              margin-right: 10px; } }
          @media (max-width: 576px) {
            html body main .tab-pane section .card .card-body .card-photo {
              margin-right: 10px;
              width: 127px;
              height: 127px; } }
    html body main .info2 {
      background-color: #800A7A;
      margin-top: 173px;
      padding-top: 75px;
      padding-bottom: 94px;
      position: relative; }
      @media (min-width: 767px) {
        html body main .info2 {
          display: none; } }
      @media (max-width: 767px) {
        html body main .info2 {
          display: block; } }
      html body main .info2 h1 {
        font-size: 52px;
        line-height: 63px;
        text-align: center;
        margin-top: 350px; }
      html body main .info2 .a1 {
        width: 80%;
        border: 1px solid rgba(255, 255, 255, 0.292941);
        border-radius: 46px;
        padding: 17px 31px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #ffffff;
        margin-top: 63px; }
        html body main .info2 .a1 .icon {
          margin-right: 20px; }
        html body main .info2 .a1 .icon-play {
          width: 40px;
          height: 44px; }
        html body main .info2 .a1 .icon-apple {
          width: 37px;
          height: 46px; }
      html body main .info2 .a2 {
        width: 80%;
        border: 1px solid rgba(255, 255, 255, 0.292941);
        border-radius: 46px;
        padding: 17px 31px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color: #ffffff;
        margin-top: 63px; }
        html body main .info2 .a2 .icon {
          margin-right: 20px; }
        html body main .info2 .a2 .icon-play {
          width: 40px;
          height: 44px; }
        html body main .info2 .a2 .icon-apple {
          width: 37px;
          height: 46px; }
    html body main .doppi2 {
      position: absolute;
      top: 100px;
      left: 100px;
      width: 72%; }
      @media (min-width: 767px) {
        html body main .doppi2 {
          display: none; } }
      @media (max-width: 767px) {
        html body main .doppi2 {
          display: block; } }
    html body main .bg-phone2 {
      position: absolute;
      left: 100px;
      top: -100px;
      width: 80%; }
      @media (min-width: 767px) {
        html body main .bg-phone2 {
          display: none; } }
      @media (max-width: 767px) {
        html body main .bg-phone2 {
          display: block; } }
    html body main .info {
      background-color: #800A7A;
      margin-top: 173px;
      padding-top: 75px;
      padding-bottom: 94px;
      position: relative; }
      @media (max-width: 767px) {
        html body main .info {
          display: none; } }
      @media (min-width: 767px) {
        html body main .info {
          display: block; } }
      html body main .info h1 {
        font-size: 52px;
        line-height: 63px; }
        @media (min-width: 767px) and (max-width: 992px) {
          html body main .info h1 {
            font-size: 40px;
            line-height: 50px; } }
      html body main .info a {
        border: 1px solid rgba(255, 255, 255, 0.292941);
        border-radius: 46px;
        padding: 17px 31px;
        display: inline-flex;
        align-items: center;
        font-size: 20px;
        color: #ffffff;
        margin-right: 30px;
        margin-top: 63px; }
        html body main .info a .icon {
          margin-right: 20px; }
        html body main .info a .icon-play {
          width: 40px;
          height: 44px; }
        html body main .info a .icon-apple {
          width: 37px;
          height: 46px; }
      html body main .info .doppi {
        position: absolute;
        right: 0;
        top: 125px;
        width: 37%; }
        @media (min-width: 767px) and (max-width: 992px) {
          html body main .info .doppi {
            top: 250px; } }
      html body main .info .bg-phone {
        position: absolute;
        right: -82px;
        top: -120px;
        width: 60%; }
        @media (min-width: 767px) and (max-width: 992px) {
          html body main .info .bg-phone {
            top: 120px; } }
    html body footer {
      padding-top: 125px;
      padding-bottom: 24px; }
      @media (max-width: 767px) {
        html body footer {
          display: none; } }
      @media (min-width: 767px) {
        html body footer {
          display: block; } }
      html body footer h4 {
        font-size: 20px;
        line-height: 18px;
        color: #222124; }
      html body footer .nav {
        margin-top: 24px; }
        html body footer .nav .nav-item .nav-link {
          padding: 0;
          color: #222124;
          font-size: 14px;
          line-height: 34px; }
      html body footer .phone-number {
        font-size: 25px;
        line-height: 33px;
        color: #222124;
        margin-top: 33px;
        margin-bottom: 13px;
        display: block; }
        @media (min-width: 992px) and (max-width: 1200px) {
          html body footer .phone-number {
            font-size: 20px;
            line-height: 25px; } }
        @media (min-width: 767px) and (max-width: 992px) {
          html body footer .phone-number {
            font-size: 14px;
            line-height: 18px; } }
      html body footer p {
        font-size: 14px;
        line-height: 24px;
        color: #A6A6A8; }
      html body footer .line {
        height: 1px;
        background-color: #979797;
        margin-top: 40px;
        margin-bottom: 30px;
        opacity: 0.3; }
      html body footer .d-flex {
        font-size: 14px;
        line-height: 24px;
        color: #222124; }
        html body footer .d-flex .icon {
          background-color: #222124;
          margin-left: 28px; }

@media (min-width: 767px) {
  .foot {
    display: none; } }
@media (max-width: 767px) {
  .foot {
    display: block; } }
.foot .asosiy {
  width: 60%;
  height: 46px;
  background: #F1F1F1;
  border-radius: 27px;
  margin-top: 50px;
  display: flex;
  align-items: center; }
  .foot .asosiy p {
    font-family: ProximaNova;
    font-size: 18px;
    line-height: 18px;
    margin-left: auto; }
  .foot .asosiy img {
    margin-left: auto;
    margin-right: 50px; }
.foot button {
  display: flex;
  justify-content: center; }
.foot .collapse1 .nav {
  text-align: center; }
.foot .phone-numberr {
  font-size: 40px;
  line-height: 33px;
  color: #222124;
  margin-top: 33px;
  margin-bottom: 13px;
  display: flex;
  justify-content: center; }
.foot .icon {
  background-color: #222124;
  margin-right: 28px;
  width: 30px;
  height: 30px; }

/*# sourceMappingURL=main.css.map */