/* hello start */
.hello {
  margin-top: 20px;
}
.hello .hello__all {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.hello .hello__all .hello__text {
  flex: 1;
  flex-basis: 400px;
}

.hello .hello__all .hello__img {
  flex: 1;
  height: 302px;
  flex-basis: 400px;
}
.hello .hello__all .hello__img img {
  object-fit: contain;
}

.hello .hello__categories {
  margin-top: 100px;
}

.hello .hello__categories h2 {
  text-align: center;
  color: var(--color-blue);
}
.hello .hello__categories .categories__main {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}
.hello .hello__categories .categories__main .categories__box {
  padding: 20px 14px;
  border-radius: 16px;
  text-align: center;
  flex: 1;
  max-width: 240px;
  flex-basis: 232px;
}
.hello .hello__categories .categories__main .categories__box .categories__img {
  width: 100%;
  height: 122px;
  margin-bottom: 20px;
}
.hello .hello__categories .categories__main .categories__box .categories__img img{
  object-fit:contain;
}
.hello
  .hello__categories
  .categories__main
  .categories__box
  .categories__img
  img {
  border-radius: 16px;
}
.hello .hello__categories .categories__main .categories__box:nth-child(1) {
  background-color: #c6b7b3;
}

.hello .hello__categories .categories__main .categories__box:nth-child(2) {
  background-color: #b1aebf;
}

.hello .hello__categories .categories__main .categories__box:nth-child(3) {
  background-color: #d0cbae;
}

.hello .hello__categories .categories__main .categories__box:nth-child(4) {
  background-color: #b0c3c1;
}

.hello .hello__categories .categories__main .categories__box:nth-child(5) {
  background-color: #bb595d;
}

.hello .hello__categories .categories__main .categories__box:nth-child(1) a {
  color: #ef6e4b;
}
.hello .hello__categories .categories__main .categories__box:nth-child(2) a {
  color: #726d8e;
}
.hello .hello__categories .categories__main .categories__box:nth-child(3) a {
  color: #56a5a1;
}
.hello .hello__categories .categories__main .categories__box:nth-child(4) a {
  color: #396894;
}
.hello .hello__categories .categories__main .categories__box:nth-child(5) a {
  color: #fff;
}
.hello .blue__line {
  margin-top: 50px;
  width: 100%;
  height: 34px;
  background-color: var(--color-blue);
}
/* hello end */

/* talk start */

.talk {
  margin-top: 100px;
}
.talk .talk__all {
  display: flex;
  justify-content: space-between;
  gap: 65px;
  flex-wrap: wrap;
}
.talk .talk__all .talk__text {
  flex: 4;
  flex-basis: 350px;
}
.talk .talk__all .talk__text h5 {
  margin-top: 30px;
  font-size: 2.4rem;
  line-height: 3.6rem;
}
.talk .talk__all .talk__text p {
  margin-top: 30px;
  color: var(--color-grey);
}
.talk .talk__all .talk__img {
  flex: 6;
  flex-basis: 500px;
}

/* talk end */

/* need start */

.need {
  margin-top: 200px;
  background-color: #ddb1e3;
  padding: 30px 0px;
}
.need .need__all {
  display: flex;
  align-items: center;
  color: var(--color-white);
  gap: 140px;
  flex-wrap: wrap;
}
.need .need__all .need__img {
  height: 300px;
  max-width: 400px;
  transform: translateY(-85px);
}
.need .need__all .need__text {
  flex: 2;
  flex-basis: 450px;
}
.need .need__all .need__text h5 {
  margin-top: 25px;
  /*color: var(--color-green);*/
  font-size: 2.4rem;
  line-height: 3rem;
}
.need .need__all .need__text p {
  margin-top: 25px;
  font-size: 1.6rem;
  line-height: 2.4rem;
}

.need .need__all .need__text a {
  border: 1px solid var(--color-white);
  color: var(--color-white);
  /*padding: 17px 75px;*/
}

/* need end */

/* want start */

.want {
  margin-top: 100px;
}
.want .want__all {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.want .want__all .want__text {
  width: 50%;
}
.want .want__all .want__text h5 {
  margin-top: 40px;
  color: var(--color-blue);
  font-size: 2.4rem;
  line-height: 3rem;
}
.want .want__all .want__text p {
  margin-top: 30px;
  color: var(--color-grey);
}
.want .want__all .want__text .text__link {
  margin-top: 15px;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.want .want__all .want__img {
  width: 45%;
  height: 389.57px;
}
.want .want__all .want__img img{
  object-fit:contain;
}
/* want end */

/* video start */

.video {
  margin-top: 150px;
  --height: 450px;
}
.video .line {
  background-color: #f4f4f4;
  height: 24px;
}

.video .video__slider {
  width: 100%;
  height: var(--height);
}

.video .video__container {
  display: none;
  width: 100%;
  height: var(--height);
  
}

.video .video__container.show {
  display: block;
}

.video .video__container video {
  width: 100%;
  height: var(--height);
}
.video .video__container .closeBtn {

 
  margin: 15px;
  margin-left: auto;
  background-color: var(--color-blue);
  color: var(--color-white);

  border-radius: 50%;
  width: 5rem;
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  cursor: pointer;
}

.video .video__slider.hide {
  display: none;
}

.video .video__slider .swiper-slide {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: pointer;
}
.video .video__slider .swiper-slide .playBtn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
   color: var(--color-white);
   border: 1px solid var(--color-white);
   display: flex;
   align-items: center;
   justify-content: center;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   cursor: pointer;
   pointer-events: none;
 }
 .video .video__slider .swiper-slide .playBtn i{
   font-size: 20px;
 }
 

.swiper-pagination {
   position: static !important;
   margin: auto;
   margin-top: 30px;
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  
   transform: translateX(0%) !important;
   
}

/* video end */

/* responsive start*/

@media screen and (max-width: 1300px) {
  .talk .talk__all .talk__img img {
    object-fit: contain;
  }
}
@media screen and (max-width: 1200px) {
  .talk .talk__all .talk__img img {
    object-fit: contain;
  }
  .need .need__all {
    gap: 50px;
  }
}
@media screen and (max-width: 992px) {
  .need .need__all {
    gap: 10px;
  }
  .want .want__all .want__img img {
    object-fit: contain;
  }
}
@media screen and (max-width: 908px) {
  .hello .hello__all .hello__text {
    text-align: center;
  }
  .hello .hello__all .hello__img {
    margin-top: 30px;
  }
  .need .need__all .need__img {
    transform: translateY(0px);
    height: 210px;
  }
}
@media screen and (max-width: 733px) {
  .need .need__all .need__text a {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .want {
    margin-top: 60px;
  }
  .want .want__all {
    gap: 30px;
  }
  .want .want__all .want__img {
    width: 100%;
  }
  .want .want__all .want__text {
    width: 100%;
  }
  .want .want__all .want__text .text__link {
    gap: 0;
  }
  .want .want__all .want__text .text__link a {
    width: 100%;
  }
}

@media screen and (max-width: 576px) {
  .want .want__all .want__img {
    height: 200px;
  }
}