.search-hero {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-gray);
  border-radius: 10px;
  padding: 10px;
  width: 50%;
  gap: 10px;
  height: 65px;
  margin: 20px auto 0;
  justify-content: space-between;
}

.search-hero input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 10px;
  border-radius: 0;
  font-family: "font_main";
  color: #f7f8f8 !important;
  font-size:18px;
}
.arrow-select {
  position: relative;
  width: calc(30% - 80px);
  height: 100%;
}

.search-hero select {
  height: 100%;
  border: none;
  outline: none;
  color: #f7f8f8 !important;
  padding: 0 10px;
  border-radius: 0px !important;
  border-right: 1px solid var(--color-gray) !important;
}
.search-hero select option{
  color: black;
}

.search-hero button {
  width: 45px;
  height: 45px;
  border: none;
  background-color: var(--color-Primary2);
  color: var(--color-white);
  border-radius: 10px;
  cursor: pointer;
  font-size: 23px;
  line-height: 0;
}

.search-hero button:hover {
  background-color: var(--color-Primary1);
}

.arrow-select::after {
  content: "";
  width: 28px;
  height: 28px;
  background-image: url(../images/arrow-down.png);
  background-size: contain;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  top: 7px;
  left: 10px;
}
.banner-slider {
  width: 100%;
  height: 550px;
  border-radius: 10px;
  border: 1px solid #8080804f;
  overflow: hidden;
}
.banner-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-hero {
  margin-top: 50px !important;
}
.content-banner-slider {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 380px;
  border-radius: 10px;
  padding: 20px;
  height: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

.content-banner-slider h2 {
  color: var(--color-white);
  font-size: 25px;
  font-weight: 600;
}
.text-banner-slider {
  margin: 15px 0;
}
.content-banner-slider .text-banner-slider {
  display: flex;
  align-items: center;
  gap: 10px;
}

.content-banner-slider .text-banner-slider h4 {
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
}

.content-banner-slider .text-banner-slider h4 i {
  font-size: 16px;
  display: block;
  line-height: 0;
}
.ctm-btn {
  background-color: var(--color-Primary2);
  color: var(--color-white);
  padding: 10px 35px;
  border-radius: 10px;
  height: 45px;
  border: none;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s linear;
  text-align: center;
}
.ctm-btn:hover {
  color: var(--color-white);
  background-color: var(--color-Primary1);
}

.owl-theme .owl-dots .owl-dot span {
  width: 7px;
  height: 7px;
  margin: 5px 3px;
  background: #f8f8f8;
  transition: all 0.3s linear;
  display: block;
}
.owl-theme .owl-dots .owl-dot.active span {
  background: var(--color-white);
  width: 30px;
}
.title-start {
  margin-bottom: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-start-text h3 {
  font-size: 18px;
  color: var(--color-Primary1);
  font-family: "font_medium";
  margin-bottom: 10px;
}

.title-start-text h2 {
  font-size: 30px;
  font-family: "font_bold";
}

.fliter-product {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fliter-product-item a {
  color: var(--color-white);
  font-size: 13px;
  border: 1px solid var(--color-white);
  padding: 10px 20px;
  border-radius: 10px;
  font-family: "font_medium";
}

.fliter-product-item a:hover,
.fliter-product-item.active a {
  background-color: var(--color-Primary1);
  border-color: var(--color-Primary1);
}

.main-product-index {
  width: 95%;
  margin-right: auto;
}
.main-product-index .owl-stage {
  padding-right: 0 !important;
}
.product-index .title-start {
  width: 90%;
  margin: 0 auto 50px;
}
.product-index-img {
  width: 100%;
  height: 250px;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
}
.product-index-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-index-content {
  padding: 10px;
}

.title-product-index {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.sub-product-index {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--color-black);
}
.sub-product-index::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #2d2c2c96;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translateY(100%);
  transition: all 0.3s linear;
  z-index: -1;
}
.sub-product-index:hover::after {
  transform: translateY(0);
}

.title-product-index h2 {
  font-size: 20px;
  font-family: "font_bold";
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heart-product-index {
  font-size: 20px;
  background-color: #8080804f;
  width: 45px;
  height: 45px;
  cursor: pointer;
  display: flex;
  list-style: 0;
  align-items: center;
  transition: all 0.3s linear;
  justify-content: center;
  border-radius: 50%;
}

.heart-product-index:hover {
  color: var(--color-white);
  background-color: var(--color-Primary1);
}

.heart-product-index i {
  font-size: 20px;
  line-height: 0;
}

.text-product-index ul {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 20px 0;
}

.text-product-index ul li {
  display: flex;
  align-items: center;
  gap: 5px;

  padding: 8px 15px;
  font-size: 13px;
  border-radius: 10px;
  background-color: #3534344f;
}
.text-product-index ul li:nth-of-type(1) {
  color: #f05a72;
}

.text-product-index ul li:nth-of-type(2) {
  color: #03a237;
}

.product-index-content > ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  margin: 15px 0;
  color: var(--color-white);
}

.product-index-content > ul li i {
  font-size: 20px;
  line-height: 0;
}

.product-index-content > ul li span {
  color: var(--color-Primary2);
}

.product-index-content > ul {
  padding-bottom: 5px;
  border-bottom: 1px solid #3534344f;
  margin-bottom: 20px;
}

.btn-more-product {
  position: relative;
  text-align: center;
  z-index: 1;

  margin: 60px 0 0;
}

.ctm-btn2 {
  background-color: var(--color-black);
  color: var(--color-white);
  border: 1px solid #8080804f;
  padding: 13px 35px;
  border-radius: 5px;
  display: inline-block;
  cursor: pointer;
  height: 50px;
  font-size: 16px;
  transition: all 0.3s linear;
  z-index: 1;
  text-align: center;
  font-family: "font_medium";
}
.ctm-btn2 i {
  vertical-align: middle;
  font-size: 20px;
  line-height: 0;
}
.ctm-btn2:hover {
  background-color: var(--color-Primary1);
  border-color: var(--color-Primary1);
  color: var(--color-white);
}

.btn-more-product::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #8080804f;
  position: absolute;
  top: 50%;
  z-index: -2;
  right: 0;
  left: 0;
  transform: translateY(-50%);
}
.btn-more-product::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--color-Primary1);
  position: absolute;
  top: 50%;
  position: absolute;
  z-index: -1;
  right: 0;
  transform: translateX(120%);
  transition: all 0.3s linear;
}
.btn-more-product:hover::before {
  transform: translateX(0);
}
.title-about-us {
  text-align: center;
}

.title-about-us img {
  width: 100px;
  margin: 0 auto 15px;
  object-fit: contain;
  height: 100px;
  border-radius: 50%;
}

.title-about-us h3 {
  font-size: 18px;
  color: var(--color-Primary1);
  font-family: "font_medium";
  margin-bottom: 15px;
}

.title-about-us h2 {
  font-size: 30px;
  margin-bottom: 15px;
  font-family: "font_bold";
}

.title-about-us p {
  font-size: 18px;
  font-family: "font_medium";
  color: var(--color-white);
  line-height: 2;
}

.feature-aboutus {
  margin-top: 50px;
}

.feature-aboutus-item {
  text-align: center;
}

.feature-aboutus-item-img {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #5f5f5f4f;
  border-radius: 50%;
  margin: 0 auto 15px;
  box-shadow: 0px 0px 3px #ffbc0425;
}
.title-center {
  text-align: center;
}
.title-center h2 {
  font-size: 30px;
  font-family: "font_bold";
}
.title-center p {
  font-size: 16px;
  font-family: "font_medium";
  color: var(--color-Primary1);
}

.registration-item {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
}

.registration-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.registration-item {
  background-color: #3534344f;
  text-align: center;
}
.registration-item h2 {
  font-size: 24px;
  font-family: "font_bold";
  width: 70%;
  margin-bottom: 25px;
  transition: all 0.3s linear;
  margin: 0 auto 30px;
  color: var(--color-white);
}

.registration-item {
  background-color: #3534344f;
  color: var(--color-white);
  border-radius: 10px;
  z-index: 1;
  position: relative;
  overflow: hidden;
  padding: 50px 20px;
}
.registration-item::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--color-Primary3);
  position: absolute;
  top: 0;
  transition: all 0.3s linear;
  transition-delay: 0.3s;
  z-index: -1;
  left: 0;
  transform: translateY(-100%);
}
.registration-item::after {
  content: "";
  width: 70%;
  height: 3px;
  background-color: var(--color-Primary1);
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.3s linear;
  right: 0;
  margin: auto;
}
.registration-item:hover h2 {
  color: var(--color-Primary1);
}
.registration-item:hover::after {
  background-color: var(--color-Primary3);

  width: 100%;
}
.registration-item:hover::before {
  transform: translateY(0);
  background-color: var(--color-Primary3);
}
.main-registration {
  margin-top: 70px;
}

.main-blog-index {
  width: 95%;
  margin-right: auto;
}
.sub-blog-index {
  transition: all 0.3s linear;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
}

.sub-blog-index:hover .sub-blog-index-img img {
  transform: scale(1.1);
}
.sub-blog-index:hover {
  background-color: #2d2c2c96;
}

.main-blog-index .owl-stage {
  padding-right: 0 !important;
}

.sub-blog-index-img {
  position: relative;
  overflow: hidden;
  height: 250px;
}
.sub-blog-index-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s linear;
}
.icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-Primary3);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  color: var(--color-Primary2);
  justify-content: center;
}
.icon-play i {
  font-size: 26px;
  line-height: 0;
}

.time-blog {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: var(--color-Primary3);
  color: var(--color-Primary2);
  padding: 7px 10px 5px;
  border-radius: 5px;
  font-size: 15px;
}
.sub-blog-index-content {
  padding: 10px;
}
.sub-blog-index-content h2 {
  font-size: 20px;
  margin-top: 10px;
}

.date-blog {
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 0;

  color: var(--color-gray);
}
.date-blog i {
  font-size: 20px;
  line-height: 0;
  color: var(--color-Primary1);
}

.sub-partner-index {
  width: 100%;
  height: 150px;
  overflow: hidden;
  background-color: #3534344f;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-partner-index img {
  width: 70% !important;
  height: 70% !important;
  object-fit: contain;
}

.bg-animation {
  position: absolute;
  top: 60%;
  left: 50%;
  height: 1px;
  width: 1px;
  opacity: 0.8;
  background-color: #feb200;
  border-radius: 50%;
  box-shadow: -42vw -4vh 0px 0px #feb200, 25vw -41vh 0px 0px #feb200,
    -20vw 49vh 0px 1px #feb200, 5vw 40vh 1px 1px #feb200,
    29vw 19vh 1px 0px #feb200, -44vw -13vh 0px 0px #feb200,
    46vw 41vh 0px 1px #feb200, -3vw -45vh 0px 1px #feb200,
    47vw 35vh 1px 0px #feb200, 12vw -8vh 1px 0px #feb200,
    -34vw 48vh 1px 1px #feb200, 32vw 26vh 1px 1px #feb200,
    32vw -41vh 1px 1px #feb200, 0vw 37vh 1px 1px #feb200,
    34vw -26vh 1px 0px #feb200, -14vw -49vh 1px 0px #feb200,
    -12vw 45vh 0px 1px #feb200, -44vw -33vh 0px 1px #feb200,
    -13vw 41vh 0px 0px #feb200, -36vw -11vh 0px 1px #feb200,
    -23vw -24vh 1px 0px #feb200, -38vw -27vh 0px 1px #feb200,
    16vw -19vh 0px 0px #feb200, 28vw 33vh 1px 0px #feb200,
    -49vw -4vh 0px 0px #feb200, 16vw 32vh 0px 1px #feb200,
    36vw -18vh 1px 0px #feb200, -25vw -30vh 1px 0px #feb200,
    -23vw 24vh 0px 1px #feb200, -2vw -35vh 1px 1px #feb200,
    -25vw 9vh 0px 0px #feb200, -15vw -34vh 0px 0px #feb200,
    -8vw -19vh 1px 0px #feb200, -20vw -20vh 1px 1px #feb200,
    42vw 50vh 0px 1px #feb200, -32vw 10vh 1px 0px #feb200,
    -23vw -17vh 0px 0px #feb200, 44vw 15vh 1px 0px #feb200,
    -40vw 33vh 1px 1px #feb200, -43vw 8vh 0px 0px #feb200,
    -48vw -15vh 1px 1px #feb200, -24vw 17vh 0px 0px #feb200,
    -31vw 50vh 1px 0px #feb200, 36vw -38vh 0px 1px #feb200,
    -7vw 48vh 0px 0px #feb200, 15vw -32vh 0px 0px #feb200,
    29vw -41vh 0px 0px #feb200, 2vw 37vh 1px 0px #feb200,
    7vw -40vh 1px 1px #feb200, 15vw 18vh 0px 0px #feb200,
    25vw -13vh 1px 1px #feb200, -46vw -12vh 1px 1px #feb200,
    -18vw 22vh 0px 0px #feb200, 23vw -9vh 1px 0px #feb200,
    50vw 12vh 0px 1px #feb200, 45vw 2vh 0px 0px #feb200,
    14vw -48vh 1px 0px #feb200, 23vw 43vh 0px 1px #feb200,
    -40vw 16vh 1px 1px #feb200, 20vw -31vh 0px 1px #feb200,
    -17vw 44vh 1px 1px #feb200, 18vw -45vh 0px 0px #feb200,
    33vw -6vh 0px 0px #feb200, 0vw 7vh 0px 1px #feb200,
    -10vw -18vh 0px 1px #feb200, -19vw 5vh 1px 0px #feb200,
    1vw 42vh 0px 0px #feb200, 22vw 48vh 0px 1px #feb200,
    39vw -8vh 1px 1px #feb200, -6vw -42vh 1px 0px #feb200,
    -47vw 34vh 0px 0px #feb200, -46vw 19vh 0px 1px #feb200,
    -12vw -32vh 0px 0px #feb200, -45vw -38vh 0px 1px #feb200,
    -28vw 18vh 1px 0px #feb200, -38vw -46vh 1px 1px #feb200,
    49vw -6vh 1px 1px #feb200, -28vw 18vh 1px 1px #feb200,
    10vw -24vh 0px 1px #feb200, -5vw -11vh 1px 1px #feb200,
    33vw -8vh 1px 0px #feb200, -16vw 17vh 0px 0px #feb200,
    18vw 27vh 0px 1px #feb200, -8vw -10vh 1px 1px #feb200;

  box-shadow: 24vw 9vh 1px 0px #feb200, 12vw -24vh 0px 1px #feb200,
    -45vw -22vh 0px 0px #feb200, -37vw -40vh 0px 1px #feb200,
    29vw 19vh 0px 1px #feb200, 4vw -8vh 0px 1px #feb200,
    -5vw 21vh 1px 1px #feb200, -27vw 26vh 1px 1px #feb200,
    -47vw -3vh 1px 1px #feb200, -28vw -30vh 0px 1px #feb200,
    -43vw -27vh 0px 1px #feb200, 4vw 22vh 1px 1px #feb200,
    36vw 23vh 0px 0px #feb200, -21vw 24vh 1px 1px #feb200,
    -16vw 2vh 1px 0px #feb200, -16vw -6vh 0px 0px #feb200,
    5vw 26vh 0px 0px #feb200, -34vw 41vh 0px 0px #feb200,
    1vw 42vh 1px 1px #feb200, 11vw -13vh 1px 1px #feb200,
    48vw -8vh 1px 0px #feb200, 22vw -15vh 0px 0px #feb200,
    45vw 49vh 0px 0px #feb200, 43vw -27vh 1px 1px #feb200,
    20vw -2vh 0px 0px #feb200, 8vw 22vh 0px 1px #feb200,
    39vw 48vh 1px 1px #feb200, -21vw -11vh 0px 1px #feb200,
    -40vw 45vh 0px 1px #feb200, 11vw -30vh 1px 0px #feb200,
    26vw 30vh 1px 0px #feb200, 45vw -29vh 0px 1px #feb200,
    -2vw 18vh 0px 0px #feb200, -29vw -45vh 1px 0px #feb200,
    -7vw -27vh 1px 1px #feb200, 42vw 24vh 0px 0px #feb200,
    45vw -48vh 1px 0px #feb200, -36vw -18vh 0px 0px #feb200,
    -44vw 13vh 0px 1px #feb200, 36vw 16vh 0px 1px #feb200,
    40vw 24vh 0px 0px #feb200, 18vw 11vh 0px 0px #feb200,
    -15vw -23vh 1px 0px #feb200, -24vw 48vh 0px 1px #feb200,
    27vw -45vh 1px 0px #feb200, -2vw -24vh 0px 1px #feb200,
    -15vw -28vh 0px 0px #feb200, -43vw 13vh 1px 0px #feb200,
    7vw 27vh 1px 0px #feb200, 47vw 5vh 0px 0px #feb200,
    -45vw 15vh 1px 1px #feb200, -5vw -28vh 0px 1px #feb200,
    38vw 25vh 1px 1px #feb200, -39vw -1vh 1px 0px #feb200,
    5vw 0vh 1px 0px #feb200, 49vw 13vh 0px 0px #feb200,
    48vw 10vh 0px 1px #feb200, 19vw -28vh 0px 0px #feb200,
    4vw 7vh 0px 0px #feb200, 21vw 21vh 1px 1px #feb200,
    -15vw -15vh 0px 1px #feb200, -6vw -42vh 1px 0px #feb200,
    -15vw 48vh 1px 1px #feb200, -23vw 25vh 1px 1px #feb200,
    -48vw 25vh 0px 1px #feb200, -31vw -19vh 0px 1px #feb200,
    4vw 37vh 1px 1px #feb200, -43vw 28vh 0px 0px #feb200,
    3vw -25vh 0px 1px #feb200, -39vw 14vh 0px 1px #feb200,
    -40vw 31vh 0px 1px #feb200, 35vw -36vh 1px 1px #feb200,
    16vw 49vh 0px 0px #feb200, 6vw 39vh 0px 0px #feb200,
    3vw -35vh 0px 1px #feb200, -44vw -2vh 1px 0px #feb200,
    -6vw 21vh 1px 0px #feb200, 48vw 9vh 1px 1px #feb200,
    -43vw 30vh 1px 1px #feb200, 29vw -12vh 1px 1px #feb200,
    -48vw 13vh 1px 0px #feb200, -42vw 32vh 1px 1px #feb200,
    34vw 15vh 1px 1px #feb200, 29vw -37vh 1px 1px #feb200,
    28vw 2vh 0px 0px #feb200;
  animation: zoom 6s alternate infinite;
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
.hero,
.slider-hero,
.btn-more-product,
.product-index,
.about-us-index,
.footer,
.blog-index,
.partner-index {
  position: relative;
}

.owl-nav button {
  width: 50px;
  position: relative !important;
  height: 30px;
  margin: 0 4px !important;
  transition: all 0.3s linear !important;
}

.owl-nav button::before {
  content: "";
  width: 10px;
  display: block;
  height: 10px;
  border-top: 2px solid #d1d3d4;
  border-right: 2px solid #d1d3d4;
  right: 2px;
  transition: all 0.3s linear;
  top: 50%;
  position: absolute;
  transform: translateY(-50%) rotate(45deg);
}

.owl-nav button::after {
  content: "";
  height: 2px;
  background-color: #d1d3d4;
  position: absolute;
  right: 0;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s linear;
}

.owl-nav button span {
  color: transparent !important;
}

.owl-nav button:hover {
  background-color: transparent !important;
  width: 70px;
}

.owl-nav button:hover::before {
  border-top: 2px solid var(--color-Primary1);
  border-right: 2px solid var(--color-Primary1);
}

.owl-nav button:hover::after {
  background-color: var(--color-Primary1);
}

button.owl-next {
  transform: scaleX(-1);
}

.partner-index .owl-nav,
.blog-index .owl-nav {
  position: absolute;
  top: -118px;
  left: 0;
}

.breadcrumb-header {
  display: flex;
  align-items: center;
  font-family: "font_medium";
  gap: 5px;
  font-size: 18px;
}

.breadcrumb-header a {
  color: var(--color-white);
  font-size: 18px;
  font-family: "font_medium";
}
.breadcrumb-header span {
  color: var(--color-Primary2);
}

.breadcrumb-header i {
  line-height: 0;
  color: var(--color-Primary2);
}

.icon-vision-aboutus {
  width: 120px;
  height: 120px;
  background-color: transparent;
  border: 1px solid var(--color-Primary1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.text-vision-aboutus h2 {
  font-size: 26px;

  margin: 20px 0;
  font-family: "font_medium";
}
.text-vision-aboutus p {
  font-size: 16px;
}

.img-vision-aboutus {
  text-align: end;
  position: relative;
  padding-top: 40px;
  height: 470px;
}
.img-vision-aboutus::before {
  content: "";
  width: 40%;
  height: 60%;
  border-radius: 10px;
  position: absolute;
  right: 0;
  top: 0;
  margin: auto;
  z-index: -1;
  left: 0;
  border: 1px dashed var(--color-gray);
}
.img-vision-aboutus img {
  width: 60%;
  height: 100%;
  object-fit: contain;
}

.message-aboutus .img-vision-aboutus {
  text-align: start;
}
.sub-members-aboutus {
  background-color: #2d2c2c96;
  height: 280px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  z-index: 1;
  align-content: center;
}

.sub-members-aboutus-img {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-gray);
}
.sub-members-aboutus-img img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.sub-members-aboutus-content {
  text-align: center;
  z-index: 1;
  margin-top: 20px;
}
.sub-members-aboutus-content h2 {
  font-size: 20px;
  font-family: "font_medium";
  color: var(--color-white);
}

.sub-members-aboutus-content p {
  font-size: 20px;
  font-family: "font_medium";
  color: var(--color-Primary2);
}

.sub-members-aboutus::after {
  content: "";
  width: 70%;
  height: 3px;
  background-color: var(--color-Primary1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transition: all 0.3s linear;
  z-index: -1;
}

.sub-members-aboutus:hover::after {
  width: 100%;
}

.title-fliter-program h2 {
  font-size: 20px;
  font-family: "font_medium";
  color: var(--color-white);
  margin-bottom: 20px;
  padding: 20px 0;
  border-bottom: 1px dashed var(--color-gray);
}
.data-fliter-program ul {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}
.data-fliter-program ul li a,
.data-fliter-program ul li .label-filter,
.data-fliter-program ul .day-custom label{
  padding: 7px 15px;
  background-color: #2d2c2c96;
  border-radius: 10px;
  font-size: 17px;
  display: inline-block;
  color: var(--color-white);
  cursor: pointer;
}
.data-fliter-program ul li .filterbody:checked + .label-filter{
  background-color: var(--color-Primary1);
}
.data-fliter-program ul li .filterbody{
position: absolute;
opacity: 0;
pointer-events: none;
}





.program-actions {
  display: flex;
  gap: 16px;
  margin: 24px 0 0 0;
}

.circle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  transition: background 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.circle-btn i {
  font-size: 1.7rem;
  line-height: 0;
  color: #fff;
}

.circle-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px #fff;
}
.title-programs-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.circle-btn.active {
  background: var(--color-Primary1);
  box-shadow: 0 0 0 2px var(--color-Primary1);
}
.circle-btn.active i {
  color: #fff;
}
.title-programs-details h2 {
  font-size: 25px;
  color: var(--color-white);
}

.img-programs-details {
  margin: 20px 0;
  width: 100%;
  max-height: 600px;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}
.img-programs-details img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-programs-details-overlay{
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: fit-content;
  height: fit-content;
  padding: 10px;
  background-color: var(--color-Primary2);
  border-radius: 12px;
  color: var(--color-white);
  font-size: 18px;
  border: 2.5px solid #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-datails h2 {
  font-size: 25px;
  color: var(--color-white);
  margin: 15px 0;
  font-family: "font_medium";
}
.text-datails p {
  font-size: 16px;
  color: var(--color-white);
}

.text-datails video {
  width: 100%;
  height: 350px;
  margin: 20px 0;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--color-gray);
}

.data-programs-details h2 {
  font-size: 25px;
  color: var(--color-white);
  font-family: "font_medium";
  margin-bottom: 20px;
}
.data-programs-details ul li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 16px;
  color: var(--color-white);
}

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

.regeister-form {
  width: 600px;
  margin: 70px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.regeister-form form {
  padding: 35px;
  border: 1px dashed rgba(128, 128, 128, 0.43);
  width: 100%;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.regeister-form form .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}
.regeister-form form .form-group label {
  font-size: 20px;
  color: #fff;
}
.regeister-form form .form-group input {
  padding: 10px;
  border-radius: 8px;
  border: none;
  outline: none;
  background-color: #2d2c2c96;
  color:#f7f8f8;
  height: 50px;
  width: 100%;
}
.regeister-form form .form-group input::placeholder {
  color: var(--gray);
  font-size: 18px;
  font-family: "defaultFont", sans-serif;
}
.regeister-form form .form-group input:focus {
  border: 1px solid rgba(128, 128, 128, 0.43);
}

.regeister-form form .form-group .input-password {
  position: relative;
}
.regeister-form form .form-group .input-password i {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: var(--gray);
  cursor: pointer;
}

.regeister-form form h2 {
  font-size: 24px;
  color: var(--color-Primary2);
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
}
.regeister-form form p {
  font-size: 24px;
  color: #fff;
}
.regeister-form form .form-group.checkbox {
  gap: 10px;
  flex-direction: row;
  align-items: center;
}
.regeister-form form .form-group.checkbox input {
  display: none;
}
.regeister-form form .form-group.checkbox span {
  width: 18px;
  height: 18px;
  border: 1px solid var(--gray);
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
}
.regeister-form form .form-group.checkbox label {
  font-size: 14px;
  cursor: pointer;
  margin: 0;
}
.regeister-form form .form-group.checkbox label a {
  color: var(--color-Primary2);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: all 0.3s ease;
}
.regeister-form form .form-group.checkbox label a:hover {
  color: var(--gray);
}
.regeister-form form .form-group.submit-button input {
  background-color: var(--color-Primary2);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  font-family: "defaultFont", sans-serif;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
  height: 50px;
  transition: all 0.3s ease;
  font-family: "font_main";
}
.regeister-form form .form-group.submit-button input:hover {
  background-color: var(--primary-color);
  color: #fff;
  border: 1px solid var(--color-Primary2);
}
.regeister-form form .form-group:last-child p {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  color: var(--gray);
}
.regeister-form form .form-group:last-child p a {
  color: var(--color-Primary2);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: all 0.3s ease;
}
.regeister-form form .form-group:last-child p a:hover {
  color: var(--gray);
}

/* login */
.password-forget {
  color: var(--color-Primary2);
  font-size: 12px;
  text-align: left;
  margin-top: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.password-forget:hover {
  color: var(--gray);
}

/* verification code */

.input-check-code {
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 0 25px;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
}
.input-check-code input {
  width: 15%;
  height: auto;
  aspect-ratio: 1;
  font-size: 24px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(19, 19, 19, 1);
  border: 1px solid transparent;
  color: var(--gray);
}
.input-check-code input:focus {
  outline: none;
  border: 1px solid rgba(128, 128, 128, 0.43);
}

/* profile home */

.sub-header {
  color: white;
  margin: 50px 0;
  font-size: 24px;
}
.sub-header-item.home {
  font-weight: 400;
  font-size: 24px;
  color: #fff;
  transition: all 0.3s ease;
}
.sub-header-item.home:hover {
  color: var(--color-Primary2);
}
.sub-header-item.home i {
  color: var(--color-Primary2);
}

.sub-header-item.active {
  color: var(--color-Primary2);
  font-weight: 500;
}
.sub-header span {
  color: var(--color-Primary2);
}

.profile-home {
  margin: 70px auto;
}
.profile-card-header {
  font-size: 26px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 40px 0;
  border-bottom: 1px solid rgba(128, 128, 128, 0.43);
}
.profile-card-header p {
  color: var(--gray);
  font-size: 20px;
}
.profile-card-header .profile-header-img {
  width: 77px;
  height: 77px;
  border-radius: 50%;
  background-color: #041a25;
}
.profile-card-header .profile-header-img img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.profile-card-body li {
  display: flex;
  gap: 10px;
}

.profile-card-body ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 5px 10px;
}
.profile-card-body li a {
  font-size: 20px;
  color: var(--gray);
  font-weight: 500;
}
.profile-card-body li img {
  opacity: 0.5;
}
.profile-card-body li:hover a {
  color: #fff;
}

.profile-card-body li.active a {
  color: #fff;
  font-weight: 600;
}
.profile-card-body li.active img {
  opacity: 1;
}
.profile-card-body li:hover img {
  opacity: 1;
  animation: rubberBand 1s infinite;
}

.profile-page {
  padding: 25px;
  border: 1px dashed rgba(128, 128, 128, 0.43);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}
.profile-page h2 {
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}
.profile-info-body {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  gap: 20px;
}
.profile-info-body form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-info-body form .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.profile-info-body form .form-group label {
  font-size: 20px;
  color: #fff;
}
.profile-info-body form .form-group input {
  padding: 10px;
  border-radius: 8px;
  border: none;
  outline: none;
  background-color: rgba(19, 19, 19, 1);
  color: var(--gray);
  height: 50px;
  text-align: right;
  font-family: "font_main";
}
.profile-info-body form .form-group input::placeholder {
  color: var(--gray);
  font-size: 18px;
  font-family: "defaultFont", sans-serif;
  text-align: right;
}
.profile-info-body form .form-group input:focus {
  border: 1px solid rgba(128, 128, 128, 0.43);
}
.profile-info-body form .form-group .input-password {
  position: relative;
  width: 100%;
}
.profile-info-body form .form-group .input-password i {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  color: var(--gray);
  cursor: pointer;
}
.profile-info-body form .form-group .input-password input {
  padding-left: 30px;
  width: 100%;
  font-family: "font_main";
}

.profile-info-body form .form-group .submit-button {
  background-color: var(--color-Primary2);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  font-family: "font_main", sans-serif;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
  height: 50px;
  transition: all 0.3s ease;
  margin-top: 20px;
  text-align: center;
}
.profile-info-body form .form-group .submit-button:hover {
  background-color: var(--primary-color);
  color: #fff;
  border: 1px solid var(--color-Primary2);
}

/* activity-page */
.profile-activity-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;
}

.activity-card {
  padding: 20px;
  border-radius: 12px;
  background-color: rgba(19, 19, 19, 1);
  width: 100%;
}

.activity-card-header {
  width: 100%;
  padding: 10px;
}
.activity-card-header img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.activity-card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.activity-card-body .body-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.activity-card-body .body-header p a{
  background-color: rgb(0, 0, 0);
  padding: 7px;
  border-radius: 50%;
}
.activity-card-body h {
  font-size: 24px;
  font-weight: 700;
}
.activity-card-body p {
  font-size: 18px;
  color: #fff;
  font-weight: 400;
  display: flex;
  gap: 8px;
  align-items: center;
}

.notification-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.notification-card .notification-card-header h2 {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  margin-bottom: 10px;
}

.notification-card .notification-card-body {
  display: flex;
  gap: 16px;
  font-size: 16px;
  color: var(--gray);
  font-weight: 400;
  background-color: rgba(19, 19, 19, 1);
  padding: 20px;
  border-radius: 8px;
}

.notification-card-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background-color: var(--primary-color);
  border: 1px solid rgba(255, 189, 4, 0.31);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-card-body .body-text {
  flex: 1;
}

.notification-card-body .body-text h3 {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  margin: 0;
}
.notification-card-body .body-text > span {
  font-size: 14px;
  color: var(--gray);
  font-weight: 500;
}

.notification-card-body .body-text h3 span {
  font-size: 12px;
  color: rgba(255, 189, 4, 1);
  font-weight: 700;
  margin-right: 5px;
  white-space: nowrap;
}

.notification-card-body .body-text h3 p {
  flex: 1;
}

/* logout */

.profile-logout-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 20px 0;
  align-items: center;
  justify-content: center;
}
.profile-logout-body img {
  width: 150px;
  height: 150px;
}
.profile-logout-body p {
  font-size: 32px;
  color: #fff;
  font-weight: 500;
  text-align: center;
}

.profile-logout-body .logout-btn{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;

}
.profile-logout-body .logout-button a {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  font-family: "defaultFont", sans-serif;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 15px 25px;
  width: auto;
  height: auto;
  transition: all 0.3s ease;
}
.profile-logout-body .logout-button a:nth-child(1) {
  background-color: var(--color-Primary2);
}
.profile-logout-body .logout-button a:nth-child(1):hover {
  background-color: var(--primary-color);
  color: #fff;
  border: 1px solid var(--color-Primary2);
}
.profile-logout-body .logout-button a:nth-child(2) {
  background-color: rgba(255, 189, 4, 1);
}
.profile-logout-body .logout-button a:nth-child(2):hover {
  background-color: var(--primary-color);
  color: #fff;
  border: 1px solid rgba(255, 189, 4, 1);
}


.logout-btn .ctm-btn2{
  height: 45px;
  background-color: #feb200;
  border-radius: 10px;
  vertical-align: bottom;
}
.logout-btn .ctm-btn2:hover{
  background-color: var(--color-Primary2);
  color: #fff;
  border: 1px solid transparent;
}

/* cart */

.cart-buying {
  padding: 24px 16px;
  border-radius: 12px;
  border: 1px solid rgba(128, 128, 128, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cart-buying-header h2 {
  font-size: 24px;
  color: #fff;
  font-weight: 700;
}

.cart-buying-body-header p {
  font-size: 20px;
  color: #fff;
}

.cart-buying-body {
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
}

.cart-buying-item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 18px;
}

.cart-buying-item p:nth-child(1) {
  color: var(--gray);
}
.cart-buying-item p:nth-child(2) {
  color: var(--color-Primary2);
}

.profile-page.cart {
  border: none;
  padding: 0;
}

.cart .activity-card {
  border: 1px solid rgba(128, 128, 128, 0.08);
  align-items: center;
}

.activity-card-body .type {
  display: flex;
  gap: 5px;
  margin-bottom: 15px;
}

.activity-card-body .type p {
  font-size: 14px;
  font-weight: 500;
  background-color: rgba(28, 28, 28, 1);
  padding: 2px 10px;
  border-radius: 6px;
}
.activity-card-body .type p:nth-child(1) {
  color: rgba(240, 90, 114, 1);
}
.activity-card-body .type p:nth-child(2) {
  color: rgba(3, 162, 55, 1);
}
.cart .activity-card-header {
  height: 280px;
}
.activity-card-header img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-buying-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.cart-buying-footer .total-price {
  font-size: 20px;
  color: var(--gray);
  display: flex;
  justify-content: space-between;
}
.cart-buying-footer button {
  background-color: var(--color-Primary2);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  font-family: "font_main", sans-serif;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px;
  width: auto;
  height: auto;
  transition: all 0.3s ease;
}
.cart-buying-footer button:hover {
  background-color: var(--primary-color);
  color: #fff;
  border: 1px solid var(--color-Primary2);
}

/* talkers-page */
.talkers {
  margin: 70px auto;
}
.talkers .row{
  row-gap: 25px;
}
.talkers-header h2 {
  font-size: 32px;
  color: #fff;
  font-weight: 700;
  margin: 20px 0 40px;
  line-height: 1.6;
}
.talkers-header span{
  color: var(--color-Primary1);

}

.talkers-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 12px;
  background-color: rgba(19, 19, 19, 1);
  height: 100%;
}

.talkers-card-header {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.talkers-card-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.talkers-card-body {
  text-align: center;
}
.talkers-card-body h2 {
  font-size: 24px;
  color: #fff;
  font-weight: 500;
}
.talkers-card-body p {
  font-size: 16px;
  color: var(--gray);
  font-weight: 500;
}

/* packages-page */

.packages {
  margin: 70px auto;
}
.packages .main-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: center;
}

.header-logo {
  border-bottom: 1.5px dashed rgba(128, 128, 128, 0.43);
  padding: 40px 0;
}
.packages-header h2 {
  font-size: 22px;
  color: var(--color-Primary2);
  font-weight: 700;
  margin: 10px 0;
}
.packages-header p {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
}

.package-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: start;
  justify-content: center;
  padding: 20px;
  border-radius: 12px;
  background-color: rgba(19, 19, 19, 1);
  color: #fff;
  height: 100%;
}

.package-body {
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.package-price {
  display: flex;
  gap: 20px;
  align-items: end;
  vertical-align: middle;
}

.package-price h2 {
  font-size: 64px;
  color: var(--color-Primary2);
  font-weight: 500;
}

.package-body h2 {
  margin-bottom: 10px;
}
.package-body p {
  margin: 0;
  display: flex;
  gap: 7px;
  align-items: center;
}
.package-price p span {
  color: rgba(255, 189, 4, 1);
}

.package-button {
  background-color: var(--color-Primary2);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  font-family: "defaultFont", sans-serif;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px;
  width: auto;
  height: auto;
  transition: all 0.3s ease;
  width: 100%;
}
.package-button:hover {
  background-color: var(--primary-color);
  color: #fff;
  border: 1px solid var(--color-Primary2);
}

/* join-us */

.join-us {
  margin: 70px auto;
}
.join-us form {
  padding: 20px;
  border: 1 dashed rgba(128, 128, 128, 0.43);
  width: 100%;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  background-color: rgba(19, 19, 19, 1);
}

.join-us form p {
  font-size: 24px;
  color: #fff;
  font-weight: 500;
  text-align: center;
}
.join-us form .form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #fff;
}
.join-us form .form-group label {
  font-size: 20px;
  color: #fff;
}
.join-us form .form-group input,
.join-us form .form-group textarea {
  padding: 10px;
  border-radius: 8px;
  border: none;
  outline: none;
  background-color: #2d2c2c96;
  color: var(--gray);
  height: 50px;
  text-align: right;
}

.join-us form .form-group textarea {
  height: 250px;
}


.join-us form .form-group input::placeholder {
  color: var(--gray);
  font-size: 18px;
  font-family: "font_main";
}
.join-us form .form-group input:focus ,
.join-us form .form-group textarea:focus{
  border: 1px solid rgba(128, 128, 128, 0.43);
}

.join-us form .form-group select {
  padding: 10px;
  border-radius: 8px;
  border: none;
  outline: none;
  background-color: #2d2c2c96;
  color: var(--gray) !important;
  height: 50px;
}

.join-us-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.join-us-content .content-header h2 {
  font-size: 24px;
  color: #fff;
  font-weight: 700;
  margin: 0 0 20px;
}
.join-us-content .content-header p {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
}

.join-us-content .content-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.join-us-content .content-body ul {
  margin: 0;
}

.join-us-content .content-body li {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  color: #fff;
  font-size: 18px;
}
.join-us-content .content-body i {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  align-content: center;
  border: 1px dashed rgba(255, 189, 4, 0.31);
  transition: all 0.3s ease;
}
/* hover */
.join-us-content .content-body li:hover i {
  background-color: var(--color-Primary1);
}

.join-us-content .content-body li a {
  font-size: 18px;
  color: #fff;
}

.join-us-content .content-body .map {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
}
.join-us-content .content-body .map img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}


.heart-product-index.active i {
  color: var(--color-Primary1); /* your primary brand color */
}




/* modal  */

.modal-content {
  background-color: #181818;
  color: #fff;
  border-radius: 10px;
}

.flatpickr-calendar {
  background-color: #222;
}

.count-control button {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background-color: #333;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.count-control button:hover{
  background-color: var(--color-Primary2);
  color: #fff;
}

.count-control span {
  display: inline-block;
  width: 30px;
  text-align: center;
}

.btn-custom {
  background-color: #0099ff;
  color: #fff;
  font-weight: bold;
}

.dayContainer{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}
/* Full width for calendar wrapper */
#calendar,
.flatpickr-calendar.inline {
width: 100% !important;
box-shadow: none !important;
background-color: transparent;
}

/* Override Flatpickr's inner dayContainer behavior */
.flatpickr-days {
width: 100% !important;
display: flex !important;
flex-wrap: wrap;
gap: 0;
justify-content: space-between; /* This ensures that the days take equal space */

}
.flatpickr-current-month,
span.flatpickr-weekday{
color: #fff !important;
}

/* Ensure all day cells are exactly 1/7 of the width */
.flatpickr-day {
flex: 0 0 calc(100% / 7); /* Each day gets equal width */
max-width: calc(100% / 7); /* Ensure each day is constrained */
height: 48px;
line-height: 48px;
text-align: center;
margin: 0 !important;
box-sizing: border-box;
color: #fff !important
}

/* Ensure the day names (Sun, Mon, etc.) also align correctly */
.flatpickr-weekday {
flex: 0 0 calc(100% / 7);
max-width: calc(100% / 7);
text-align: center;
padding: 5px 0;
}
.modal-body .form-label{
color: #fff !important;
width: 100% !important;
text-align: right !important;
margin-bottom: 20px;
}

.modal-body-calender{
border: 1px solid #E8E8E824;
border-radius: 10px;
padding: 20px 15px;
}

.modal-header .btn-close{
  background-color: #1C1C1C;
  border-radius: 50%;
  padding: 5px;
  color: #fff;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #E8E8E824;
  transition: all 0.3s ease;
}

.modal-header .btn-close:hover{
  background-color: #000;
  color: #fff;
}

.flatpickr-current-month .flatpickr-monthDropdown-months{
  color: #fff !important;
}
.flatpickr-months {

  margin-bottom: 30px;
}

.flatpickr-day.today{
  color: #fff !important;
  transition: all 0.3s ease;
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
}

.flatpickr-day.selected,
.flatpickr-day:hover{
  background-color: var(--color-Primary2);
  color: #fff !important;
  transition: all 0.3s ease;
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
}

.flatpickr-day.today:hover{
  background-color: var(--color-Primary1);
  color: #fff;
}

.modal .action-modal{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.modal .action-modal .ctm-btn2{
  height: 45px;
  vertical-align: bottom;
  border-radius: 12px;
}

.modal .ticket-details{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 0;
}

.modal .ticket-details p{
  font-size: 18px;
  color: var(--gray);
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month{
  color: var(--gray);
  fill: var(--gray) !important;
  border: 1px solid #66666647;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg{
  background-color: var(--color-Primary2);
  color: #fff;
  fill: #fff;
}

.modal .action-modal button{
  width: 47% ;
}

/*  */
.data-fliter-program .day-custom{
  position: relative;
}
.data-fliter-program .day-custom input{
  display: none;
}


.data-fliter-program .day-custom .flatpickr-calendar.animate.open{
  right: 0 !important;
  top: 55px !important;
  background-color: #181818;
  box-shadow: none !important;
  padding: 10px 0;
}

.flatpickr-day.flatpickr-disabled{
  color: #333333 !important;
  cursor: default !important;
}

.flatpickr-calendar:before,
.flatpickr-calendar::after,
.flatpickr-current-month .numInputWrapper{
  display: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months{
  appearance: none !important;
  text-align: center !important;
  background-color: #181818 !important;
}



/* foundation form */

.upload-icon{

  padding: 10px 10px 10px 20px;
  border-radius: 8px;
  border: none;
  outline: none;
  background-color: #2d2c2c96;
  color: var(--gray);
  height: 50px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.upload-icon i {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
}

.regeister-form.foundation-form form p{

  width: 100%;
  text-align: center;
  color: var(--color-Primary2);
  margin-bottom: 20px;
}
.regeister-form.foundation-form form input{
  color: var(--color-white) ;
  text-align: right;
}
.regeister-form.foundation-form form .select-group{
  position: relative;
}

.regeister-form.foundation-form form .select-group select{
  padding: 10px;
  border-radius: 8px;
  border: none;
  outline: none;
  background-color: #2d2c2c96;
  color: #f7f8f8 !important;
  height: 50px;
  width: 100%;
}
.regeister-form.foundation-form form .select-group i{
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translate(-50% , -50%);
}

.radio-check {
  display: flex;
  flex-wrap: wrap;
}
.radio-check .form-check{
  display: flex;
  gap:25px
}

.radio-check .form-check input{
  width: 20px !important;
  height: 20px !important;
  position: relative;
  background-color: rgba(128, 128, 128, 0.43) !important;
  accent-color:rgba(128, 128, 128, 0.43)
}


.custom-radio input[type="radio"] {
  display: none;
}


.radio-circle {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(128, 128, 128, 0.43);
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  background-color: transparent; /* background color */
  position: relative;
}

.radio-circle::after{
  position: absolute;
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: transparent;
  top: 50%;
  right: 50%;
  transform: translate(50% ,-50%);
}
.custom-radio{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 18px;
  color: var(--gray) !important;
}
.custom-radio input[type="radio"]:checked + .radio-circle::after
{
  background-color: var(--color-Primary2); /* selected background */
}

.custom-radio input[type="radio"]:checked + .radio-circle {

  border-color: var(--color-Primary2);
}

.radio-check .form-check input[type="checkbox"]{
  accent-color: var(--color-Primary2) !important;
}


.active .toggle-favourite{
  background-color: var(--color-Primary2) !important;
}




/* scan page */


.scan-page .cart-buying{
    padding: 0 0px 24px;
    border: none;
    gap: 0;
  }

  .scan-page .cart-buying .actions{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .scan-page .cart-buying .actions button{
    width: 47% !important;
  }

  .scan-page .cart-buying-item p:nth-child(2){
    color: rgba(255, 189, 4, 1);
  }

  .scan-page .total-price p:nth-child(2){
    color: rgba(255, 189, 4, 1);
  }

  .scan-page .cart-buying-body{
    border: none;
    gap: 10px;
  }


  .scan-page .body-header  p {
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0px;
    background-color: rgba(255, 189, 4, 1);
    color: black    ;
    padding: 2px 20px;
    border-radius: 50px;
    width: fit-content;
    text-align: center;
    align-content: center;
    margin: 0;
    vertical-align: middle;
  }

  .cart .activity-card{
    row-gap: 20px;
  }


  .scan-page .activity-card-body{
    gap: 10px;
  }