.bx-wrapper {
    margin: 0;
    padding: 0;
    width: 100%;
    border: 0;
  }
  @media screen and (max-width: 441px) {
    #color-and-shape .cover {
      text-align: center;
    }
  }
  #color-and-shape .cover .img-logan {
    position: absolute;
    right: 13%;
    top: 21%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .cover .img-logan {
      right: 18%;
      top: 24%;
    }
  }
  @media screen and (max-width: 1024px) {
    #color-and-shape .cover .img-logan {
      width: 38%;
    }
  }
  @media screen and (max-width: 441px) {
    #color-and-shape .cover .img-logan {
      left: 10%;
      text-align: left;
      top: 14%;
      width: 80%;
    }
  }
  #color-and-shape .cover .btn-start {
    background: #FF7715;
    border-radius: 35px;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 38px;
    text-align: center;
    color: #FFFFFF;
    margin-top: 35px;
    padding: 10px 43px;
    cursor: pointer;
  }
  #color-and-shape .cover .btn-start:hover {
    background: #FF9315;
  }
  #color-and-shape .info .box-info {
    position: absolute;
    color: #fff;
    top: 120px;
    width: 55%;
    text-align: center;
    left: 50%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .info .box-info {
      top: 25%;
      width: 50%;
    }
  }
  @media screen and (max-width: 1024px) {
    #color-and-shape .info .box-info {
      width: 73%;
    }
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .info .box-info {
      width: 80%;
      top: 25px;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .info .box-info {
      top: 80px;
    }
  }
  #color-and-shape .info .box-info .btn-info {
    background: #FF9315;
    border-radius: 35px;
    font-weight: bold;
    font-size: 20px;
    line-height: 27px;
    text-align: center;
    padding: 10px 43px;
    border: 0;
    margin-top: 30px;
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .info .box-info .btn-info {
      margin-top: 15px;
    }
  }
  #color-and-shape .info .box-info .btn-info:hover {
    background: #FF7715;
  }
  #color-and-shape .info .box-info-child {
    position: relative;
    left: -50%;
  }
  #color-and-shape .info__title {
    font-weight: bold;
    font-size: 36px;
    line-height: 49px;
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .info__title {
      font-size: 32px;
      line-height: 40px;
    }
  }
  #color-and-shape .info__desc {
    font-size: 18px;
    line-height: 24px;
    text-align: left;
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .info__desc {
      font-size: 16px;
      line-height: 22px;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .info__desc {
      margin-bottom: 28px;
    }
  }
  #color-and-shape .question {
    background: url("../../images/test/color-and-shape/bg-sec-question.png") no-repeat center;
    background-size: 100% 100%;
    padding: 90px 60px;
  }
  @media screen and (max-width: 1024px) {
    #color-and-shape .question {
      padding: 30px 60px;
    }
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question {
      padding: 20px 40px 120px 40px;
    }
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question {
      padding: 20px 25px 230px 25px;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question {
      background: url("../../images/test/color-and-shape/bg-sec-1-mobile.png") no-repeat center;
      background-size: 100% 100%;
    }
  }
  #color-and-shape .question .bx-wrapper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .bx-wrapper {
      padding-bottom: 70px;
    }
  }
  #color-and-shape .question .swap_question {
    background: #FFFCED;
    border-radius: 14px;
    position: relative;
  }
  #color-and-shape .question .swap_question .row-cus {
    padding: 5% 2.5%;
    display: flex;
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question .swap_question .row-cus {
      display: block;
    }
  }
  #color-and-shape .question .swap_question .start-ans {
    z-index: 9999;
  }
  #color-and-shape .question .swap_question .slide-question {
    position: relative;
  }
  #color-and-shape .question .swap_question .col-xl-6-cus {
    width: 50%;
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question .swap_question .col-xl-6-cus {
      width: 100%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .col-xl-6-cus .swap-ans {
      padding: 0 15px;
    }
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question .swap_question .col-xl-6-cus .swap-ans .bg-ques {
      margin: auto;
    }
  }
  #color-and-shape .question .swap_question .border-line {
    position: absolute;
    width: 95%;
    height: 90%;
    top: 5%;
    left: 2.5%;
    border: 2px dashed #FF6B00;
    border-radius: 10px;
  }
  #color-and-shape .question .swap_question .num-question {
    background: #FF6B00;
    width: max-content;
    font-style: normal;
    font-size: 30px;
    line-height: 28px;
    color: #FFFFFF;
    padding: 20px 50px;
    font-weight: bold;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .num-question {
      font-size: 27px;
      padding: 15px 30px;
      margin-top: 15px;
    }
  }
  #color-and-shape .question .swap_question .question-str {
    font-style: normal;
    font-weight: bold;
    font-size: 22px;
    line-height: 30px;
    color: #006BB9;
    padding-left: 4%;
    margin-bottom: 50px;
    padding-right: 55%;
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question .swap_question .question-str {
      padding-right: 0;
      margin-bottom: 25px;
    }
  }
  #color-and-shape .question .swap_question .item-ans-swap {
    display: flex;
    margin: auto;
    padding-left: 10%;
  }

  .item-ans img, .swap-ans img {
      width: auto;
  }

  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .item-ans-swap {
      padding-left: 20%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .item-ans-swap {
      padding-left: 0;
    }
  }
  #color-and-shape .question .swap_question .item-ans-swap .item-ans {
    display: block;
    text-align: center;
    margin: 0 20px;
  }
  #color-and-shape .question .swap_question .item-ans-swap .item-ans .ans {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
    color: #000000;
  }
  #color-and-shape .question .swap_question .swap-ans {
    position: relative;
    padding: 50px 0;
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question .swap_question .swap-ans {
      padding-top: 0;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .end-ans, #color-and-shape .question .swap_question .swap-ans .end-ans-2 {
    width: 112px;
    height: 112px;
    position: absolute;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .end-ans, #color-and-shape .question .swap_question .swap-ans .end-ans-2 {
      width: 70px;
      height: 70px;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .circle {
    background: url("../../images/test/color-and-shape/circle-2.png") no-repeat center;
    background-size: contain;
    top: 18%;
    left: 32%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .circle {
      left: 25%;
    }
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question .swap_question .swap-ans .circle {
      left: 42%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .circle {
      left: 39%;
      top: 10%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .square {
    background: url("../../images/test/color-and-shape/square-2.png") no-repeat center;
    background-size: contain;
    top: 50%;
    left: 52%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .square {
      left: 40%;
    }
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question .swap_question .swap-ans .square {
      left: 60%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .square {
      left: 65%;
      top: 45%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .triangle {
    background: url("../../images/test/color-and-shape/triangle-2.png") no-repeat center;
    background-size: contain;
    top: 50%;
    left: 15%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .triangle {
      left: 10%;
    }
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question .swap_question .swap-ans .triangle {
      left: 23%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .triangle {
      left: 13%;
      top: 45%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .triangle img {
    top: 8px !important;
  }
  #color-and-shape .question .swap_question .swap-ans .cat {
    background: url("../../images/test/color-and-shape/cat-2.png") no-repeat center;
    background-size: contain;
    top: 32%;
    left: 38%;
    width: 85px;
    height: 86px;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .cat {
      left: 29%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .cat {
      top: 16%;
      left: 38%;
      width: 60px;
      height: 62px;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .dog {
    background: url("../../images/test/color-and-shape/dog-2.png") no-repeat center;
    background-size: contain;
    top: 56%;
    left: 18%;
    width: 94px;
    height: 80px;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .dog {
      left: 16%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .dog {
      top: 54%;
      left: 22%;
      width: 70px;
      height: 60px;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .chicken {
    background: url("../../images/test/color-and-shape/chicken-2.png") no-repeat center;
    background-size: contain;
    top: 60%;
    left: 63%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .chicken {
      left: 48%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .chicken {
      top: 60%;
      left: 67%;
      width: 60px;
      height: 65px;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .cow {
    background: url("../../images/test/color-and-shape/cow-2.png") no-repeat center;
    background-size: contain;
    top: 24%;
    left: 12%;
    width: 106px;
    height: 136px;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .cow {
      left: 9%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .cow {
      top: 13%;
      left: 12%;
      width: 60px;
      height: 80px;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .pig {
    background: url("../../images/test/color-and-shape/pig-2.png") no-repeat center;
    background-size: contain;
    top: 36%;
    left: 70%;
    width: 106px;
    height: 94px;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .pig {
      left: 50%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .pig {
      top: 25%;
      width: 68px;
      height: 60px;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .tomato {
    width: 255px;
    height: 140px;
    position: absolute;
    top: 40%;
    left: 29%;
    display: flex;
  }
  #color-and-shape .question .swap_question .swap-ans .tomato img {
    width: 35%;
    top: -34% !important;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .tomato {
      left: 35%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .tomato {
      left: 20%;
      width: 205px;
      height: 120px;
      top: 35%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .apple {
    width: 90px;
    height: 90px;
    position: absolute;
    top: 40%;
    left: 45%;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .apple {
      width: 60px;
      height: 60px;
      left: 40%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .strawberry {
    width: 90px;
    height: 90px;
    position: absolute;
    top: 40%;
    left: 55%;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .strawberry {
      width: 60px;
      height: 60px;
      top: 36%;
      left: 60%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .yellow-3 {
    background: transparent;
    width: 100px;
    height: 100px;
    top: 10%;
    left: 28%;
    position: absolute;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .yellow-3 {
      width: 70px;
      height: 70px;
      top: 3%;
      left: 17%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .yellow-2 {
    background: transparent;
    width: 100px;
    height: 100px;
    top: 10%;
    left: 42%;
    position: absolute;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .yellow-2 {
      width: 70px;
      height: 70px;
      top: 3%;
      left: 39%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .yellow-1 {
    background: transparent;
    width: 265px;
    height: 300px;
    top: 10%;
    left: 27%;
    display: flex;
    position: absolute;
  }
  #color-and-shape .question .swap_question .swap-ans .yellow-1 img {
    width: 35%;
    top: -31% !important;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .yellow-1 {
      left: 35%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .yellow-1 {
      width: 205px;
      height: 270px;
      top: 1%;
      left: 20%;
    }
  }
  @media screen and (max-width: 375px) {
    #color-and-shape .question .swap_question .swap-ans .yellow-1 {
      width: 180px;
      height: 270px;
      top: 1%;
      left: 20%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .blue-1 {
    background: transparent;
    width: 240px;
    height: 300px;
    top: 12%;
    display: flex;
    left: 30%;
    position: absolute;
  }
  #color-and-shape .question .swap_question .swap-ans .blue-1 img {
    width: 35%;
    top: -32% !important;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .blue-1 {
      left: 35%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .blue-1 {
      width: 205px;
      height: 210px;
      top: 7%;
      left: 19%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .blue-2 {
    background: transparent;
    width: 100px;
    height: 100px;
    top: 17%;
    left: 44%;
    position: absolute;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .blue-2 {
      width: 70px;
      height: 70px;
      top: 10%;
      left: 40%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .blue-3 {
    background: transparent;
    width: 100px;
    height: 100px;
    top: 6%;
    left: 55%;
    position: absolute;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .blue-3 {
      width: 70px;
      height: 70px;
      top: 6%;
      left: 61%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .car-red {
    position: absolute;
    width: 130px;
    height: 150px;
    background: transparent;
    top: 33%;
    left: 12%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .car-red {
      width: 200px;
      height: 190px;
      top: 33%;
      left: 9%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .car-red {
      width: 90px;
      height: 90px;
      top: 34%;
      left: 9%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .car-yellow {
    position: absolute;
    width: 130px;
    height: 150px;
    background: transparent;
    top: 33%;
    left: 39%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .car-yellow {
      width: 200px;
      height: 190px;
      top: 30%;
      left: 38%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .car-yellow {
      width: 80px;
      height: 80px;
      top: 27%;
      left: 39%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .car-blue {
    position: absolute;
    width: 130px;
    height: 150px;
    background: transparent;
    top: 33%;
    left: 67%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .car-blue {
      width: 200px;
      height: 190px;
      top: 30%;
      left: 67%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .car-blue {
      width: 80px;
      height: 80px;
      top: 27%;
      left: 66%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .circle-3 {
    position: absolute;
    width: 70px;
    height: 70px;
    background: transparent;
    top: 31%;
    left: 13%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .circle-3 {
      width: 95px;
      height: 95px;
      top: 30%;
      left: 13%;
    }
    #color-and-shape .question .swap_question .swap-ans .circle-3 img {
      width: 100%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .circle-3 {
      width: 35px;
      height: 35px;
      top: 24%;
      left: 17%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .triangle-3 {
    position: absolute;
    width: 70px;
    height: 70px;
    background: transparent;
    top: 44%;
    left: 42%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .triangle-3 {
      width: 104px;
      height: 105px;
      top: 41%;
      left: 41%;
    }
    #color-and-shape .question .swap_question .swap-ans .triangle-3 img {
      width: 100%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .triangle-3 {
      width: 35px;
      height: 35px;
      top: 43%;
      left: 46%;
    }
  }
  #color-and-shape .question .swap_question .swap-ans .square-3 {
    position: absolute;
    width: 70px;
    height: 70px;
    background: transparent;
    top: 33%;
    left: 71%;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question .swap_question .swap-ans .square-3 {
      width: 85px;
      height: 85px;
      top: 33%;
      left: 71%;
    }
    #color-and-shape .question .swap_question .swap-ans .square-3 img {
      width: 100%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .swap_question .swap-ans .square-3 {
      width: 32px;
      height: 32px;
      top: 28%;
      left: 74%;
    }
  }
  #color-and-shape .question .start-ans-2, #color-and-shape .question .start-ans-3, #color-and-shape .question .start-ans-4, #color-and-shape .question .start-ans-5, #color-and-shape .question .start-ans-6, #color-and-shape .question .start-ans-7 {
    z-index: 9999;
    margin: auto;
  }
  #color-and-shape .question .question-1 .icon-right, #color-and-shape .question .question-2 .icon-right, #color-and-shape .question .question-3 .icon-right, #color-and-shape .question .question-4 .icon-right, #color-and-shape .question .question-5 .icon-right, #color-and-shape .question .question-6 .icon-right, #color-and-shape .question .question-7 .icon-right {
    position: absolute;
    bottom: 10%;
    right: 10%;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .question-1 .icon-right, #color-and-shape .question .question-2 .icon-right, #color-and-shape .question .question-3 .icon-right, #color-and-shape .question .question-4 .icon-right, #color-and-shape .question .question-5 .icon-right, #color-and-shape .question .question-6 .icon-right, #color-and-shape .question .question-7 .icon-right {
      width: 40px;
      height: 40px;
      bottom: -2%;
      right: 2%;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .question-3 .swap-ans .bg-ques, #color-and-shape .question .question-4 .swap-ans .bg-ques, #color-and-shape .question .question-5 .swap-ans .bg-ques {
      width: 80%;
    }
  }
  #color-and-shape .question .question-6 .icon-right, #color-and-shape .question .question-7 .icon-right {
    position: absolute;
    bottom: 8%;
    right: 10%;
  }
  #color-and-shape .question .bx-prev-custom, #color-and-shape .question .bx-next-custom {
    width: 75px;
    height: 75px;
    z-index: 999;
    cursor: pointer;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question .bx-prev-custom, #color-and-shape .question .bx-next-custom {
      width: 40px;
      height: 40px;
    }
  }
  #color-and-shape .question .bx-next-custom {
    background: url("../../images/test/color-and-shape/next-disable.svg") no-repeat center;
    background-size: contain;
    right: -23px;
  }
  #color-and-shape .question .bx-prev-custom {
    background: url("../../images/test/color-and-shape/prev-active.svg") no-repeat center;
    background-size: contain;
    left: -23px;
  }
  #color-and-shape .question-2 .item-ans-swap, #color-and-shape .question-3 .item-ans-swap, #color-and-shape .question-4 .item-ans-swap, #color-and-shape .question-5 .item-ans-swap, #color-and-shape .question-6 .item-ans-swap {
    display: block !important;
    text-align: center;
    padding-left: 0 !important;
  }
  #color-and-shape .question-2 .item-ans-swap .item-ans, #color-and-shape .question-3 .item-ans-swap .item-ans, #color-and-shape .question-4 .item-ans-swap .item-ans, #color-and-shape .question-5 .item-ans-swap .item-ans, #color-and-shape .question-6 .item-ans-swap .item-ans {
    width: 170px;
    height: 100px;
    display: inline-flex !important;
    margin: auto !important;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question-2 .item-ans-swap .item-ans, #color-and-shape .question-3 .item-ans-swap .item-ans, #color-and-shape .question-4 .item-ans-swap .item-ans, #color-and-shape .question-5 .item-ans-swap .item-ans, #color-and-shape .question-6 .item-ans-swap .item-ans {
      width: 90px;
    }
  }
  #color-and-shape .question-3 .item-ans-swap {
    padding-left: 5% !important;
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question-3 .item-ans-swap {
      padding-left: 25% !important;
    }
  }
  @media screen and (min-width: 1600px) {
    #color-and-shape .question-4 .item-ans-swap, #color-and-shape .question-5 .item-ans-swap {
      padding-left: 25% !important;
    }
  }
  #color-and-shape .question-3 .swap-ans img, #color-and-shape .question-4 .swap-ans img, #color-and-shape .question-5 .swap-ans img {
    margin: auto;
  }
  #color-and-shape .question-4 .swap-ans, #color-and-shape .question-5 .swap-ans {
    padding-top: 120px !important;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question-4 .swap-ans, #color-and-shape .question-5 .swap-ans {
      padding-top: 60px !important;
    }
  }
  #color-and-shape .question-4 .swap-ans .bg-ques, #color-and-shape .question-5 .swap-ans .bg-ques {
    position: relative;
    z-index: 99999;
  }
  #color-and-shape .question-3 .question-str {
    margin-bottom: 0 !important;
  }
  #color-and-shape .question-4 .question-str {
    margin-bottom: -40px !important;
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .question-4 .question-str {
      margin-bottom: 0 !important;
    }
  }
  #color-and-shape .question-6 .item-ans {
    width: 220px !important;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question-6 .item-ans {
      width: 120px !important;
    }
  }
  #color-and-shape .question-6 .swap-ans {
    padding: 100px 50px !important;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question-6 .swap-ans {
      padding: 30px !important;
    }
  }
  #color-and-shape .question-7 .swap-ans {
    padding-right: 30px !important;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .question-7 .swap-ans {
      padding-right: 15px !important;
      margin-top: 30px;
    }
  }
  #color-and-shape .form-contact .swap-contact, #color-and-shape .end-slide .swap-contact {
    padding: 100px 250px;
  }
  @media screen and (max-width: 768px) {
    #color-and-shape .form-contact .swap-contact, #color-and-shape .end-slide .swap-contact {
      padding: 50px;
    }
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .form-contact .swap-contact, #color-and-shape .end-slide .swap-contact {
      padding: 15px;
    }
  }
  #color-and-shape .form-contact .swap-contact .title-form, #color-and-shape .end-slide .swap-contact .title-form {
    font-weight: bold;
    font-size: 36px;
    line-height: 49px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 50px;
  }
  @media screen and (max-width: 500px) {
    #color-and-shape .form-contact .swap-contact .title-form, #color-and-shape .end-slide .swap-contact .title-form {
      font-size: 20px;
      line-height: 34px;
      margin-bottom: 25px;
    }
  }
  #color-and-shape .form-contact .swap-contact .desc-form, #color-and-shape .end-slide .swap-contact .desc-form {
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 30px;
  }
  #color-and-shape .form-contact .swap-contact .form-control, #color-and-shape .end-slide .swap-contact .form-control {
    height: 45px;
    margin-bottom: 10px;
  }
  #color-and-shape .form-contact #contact-submit-btn, #color-and-shape .end-slide #contact-submit-btn {
    background: #FF9315;
    border-radius: 35px;
    font-weight: bold;
    font-size: 20px;
    line-height: 27px;
    text-align: center;
    padding: 10px 43px;
    border: 0;
    margin-top: 40px;
  }
  #color-and-shape .form-contact #contact-submit-btn:hover, #color-and-shape .end-slide #contact-submit-btn:hover {
    background: #FF7715;
  }
  #color-and-shape .form-contact .btn-more, #color-and-shape .end-slide .btn-more {
    background: #FF9315;
    border-radius: 35px;
    font-weight: bold;
    font-size: 20px;
    line-height: 27px;
    text-align: center;
    color: #FFFFFF;
    padding: 10px 43px;
    border: 0;
    margin-top: 30px;
  }
  #color-and-shape .form-contact .btn-more:hover, #color-and-shape .end-slide .btn-more:hover {
    background: #FF7715;
  }
  #color-and-shape .form-contact .end, #color-and-shape .end-slide .end {
    margin-bottom: 25px !important;
  }