html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

/* --------------------------------------------------------------------------------- */
/* course summary */
/* --------------------------------------------------------------------------------- */

.course-summary-card {
  border: 1px solid #aaa;
  border-radius: 10px;
  width: 100%;
  background-color: #f8f8f8;
  text-align: left;
  margin-bottom: 20px;
  font-size: 14px;
  padding: 1rem;
}

.course-summary-card > div {
  display: flex;
}

.course-summary-card > div > i {
  font-size: 180%;
}

.course-summary-card > div > p {
  position: relative;
  top: 4px;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1rem;
}

.course-summary-card > hr {
  border-color: #9999;
}

/* --------------------------------------------------------------------------------- */
/* course instructors */
/* --------------------------------------------------------------------------------- */

.instructor-row {
  margin-top: -0.8rem;
}

.instructor-row > div {
  display: flex;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
}

.instructor-img {
  margin-right: 1rem;
  text-align: center;
}

.instructor-img > img {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
}

.instructor-detail {
  line-height: 20px;
  font-size: 15px;
}
ol.ps-5::marker {
  font-weight: bold;
}

/* mobile */
@media (max-width: 992px) {
  .ps-lg-3,
  .pe-lg-3 {
    padding-right: 0;
    padding-left: 0;
    border-bottom: 1px solid #ddd;
  }
  .instructor-row {
    margin-bottom: 0;
  }
  .instructor-img {
    width: 25%;
  }
  .instructor-detail {
    width: 75%;
  }
  .instructor-collapse {
    display: none;
  }
}

/* desktop */
@media (min-width: 992px) {
  .ps-lg-3 {
    padding-right: 0;
    padding-left: 0.8rem;
  }
  .pe-lg-3 {
    padding-right: 0.8rem;
    padding-left: 0;
  }
  .instructor-row {
    margin-bottom: -0.8rem;
  }
  .instructor-img {
    width: 35%;
  }
  .instructor-detail {
    width: 65%;
  }
  .instructor-collapse {
    display: block;
  }
}

#batch h6,
#batch button {
  font-size: 14px;
}

#course_detail small {
  font-size: 12px;
}

#course_detail h3 {
  font-weight: bold;
}

.rainbow_text_animated {
  background: linear-gradient(
    to right,
    #6666ff,
    #0099ff,
    #00ff00,
    #ff3399,
    #6666ff
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow_animation 6s ease-in-out infinite;
  background-size: 400% 100%;
}

@keyframes rainbow_animation {
  0%,
  100% {
    background-position: 0 0;
  }

  50% {
    background-position: 100% 0;
  }
}

/* #detail_course::before, */
/* #job_suitable::before, */
/* #curriculum::before, */
/* #instructor::before, */
/* #FAQ::before, */
/* #reviews::before { */
/* content: ""; */
/* display: block; */
/* height: 120px; fixed header height */
/* margin: -120px 0 0; negative fixed header height */
/* z-index: -100; */
/* } */

#batch::before {
  content: "";
  display: block;
  height: 90px; /* fixed header height*/
  margin: -90px 0 0; /* negative fixed header height */
  z-index: -100;
}
/* #job_suitable {
  padding: 1px;
  margin: 0.5rem;
} */
.lb-cancel {
  background: url("../../public/img/loading.gif?t=<?= time() ?>") no-repeat;
}

.lb-nav a.lb-prev {
  background: url("../../public/img/prev.png?t=<?= time() ?>") left 48%
    no-repeat;
}

.lb-nav a.lb-next {
  background: url("../../public/img/next.png?t=<?= time() ?>") right 48%
    no-repeat;
}

.lb-data .lb-close {
  background: url("../../public/img/close.png?t=<?= time() ?>") top right
    no-repeat;
}

.courseCard:hover {
  transform: translate(0, -4px);
  box-shadow: 0 4px 8px lightgrey;
}

.left_arrow::before {
  position: absolute;
  top: 33%;
  left: 0px;
  z-index: 100;
  cursor: pointer;
}

.right_arrow::before {
  position: absolute;
  top: 33%;
  right: 0px;
  z-index: 100;
  cursor: pointer;
}

.right_arrow2::before {
  position: absolute;
  top: 45%;
  right: 10px;
  z-index: 100;
  cursor: pointer;
}

.left_arrow2::before {
  position: absolute;
  top: 45%;
  left: 10px;
  z-index: 100;
  cursor: pointer;
}

.carousel-view ul.slick-dots li button {
  background-color: #ddd;
}

.carousel-view ul.slick-dots .slick-active button {
  background: #022433;
  height: 15px;
  width: 15px;
}
#0CB4CE .carousel-view {
  padding: 30px;
  padding-top: 0px;
  padding-bottom: 15px;
}

.carousel-view .slick-disabled {
  opacity: 0;
}

#eachCard {
  cursor: pointer;
}

#curriculum a:hover {
  background-color: #fff !important;
  color: rgb(79, 96, 167) !important;
  border: 1px solid rgb(79, 96, 167) !important;
}

ul.slick-dots {
  display: flex;
  list-style: none;
  text-align: center;
  justify-content: center;
  padding: 0;
}

ul.slick-dots li {
  display: inline-block;
  margin: 0px 10px;
  height: 14px;
  width: 14px;
  background: #ddd;
  border-radius: 50%;
}

ul.slick-dots li:hover {
  cursor: pointer;
}

ul.slick-dots li a {
  font-size: 10px;
  border: 0;
  padding: 0;
}

ul.slick-dots .slick-active a {
  /* background: #022433; */
  color: white !important;
  font-size: 15px;
}

ul.slick-dots .slick-active {
  background: #022433;
  color: white !important;
  font-size: 15px;
  height: 20px;
  width: 20px;
}

.reviews-img-view,
.promotion-view {
  /* padding: 30px;
  padding-top: 0px;
  padding-bottom: 15px; */
  height: fit-content;
}

.promotion-view li.promoImage img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  cursor: pointer;
  border-radius: 10px;
  margin-bottom: 0px;
  /* object-fit: contain; */
  /* position: relative; */
}

#reviews_img img {
  width: 80%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 15px;
  cursor: context-menu;
}

.promotion-view li.promoImage img:hover {
  transform: scale(1.05);
  transition: 1s;
}

.promotion-view li.promoImage a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  overflow: hidden;
  border-radius: 10px;
  /* object-fit: contain; */
  /* position: relative; */
}

.reviews-img-view li.promoImage,
.promotion-view li.promoImage {
  width: auto;
  max-height: auto;
  display: flex;
  text-align: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 15px;
  /* margin:0px 30px 15px; */
}

.promotion-view li.promoImage h6 {
  width: 80%;
  font-size: 13px;
}

.promotion-view ul.slick-dots li button {
  background-color: #ddd;
}

.promotion-view ul.slick-dots .slick-active button {
  background: #022433;
  height: 15px;
  width: 15px;
}

.slick-track {
  display: flex !important;
  justify-content: center !important;
}

.display-none {
  display: none;
}

.alert {
  color: red;
  font-weight: bold;
}

@media only screen and (max-width: 1200px) {
  .promotion-view li.promoImage h6 {
    font-size: 13px;
  }
}

/* .courseCard:active + #button_apply {
  background: #022433;
  color: white;
} */

/* .courseCard:hover #button_apply {
  background: #022433;
  color: white;
} */

.course-card {
  border: 1px solid #ddd;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
}

/* mobile */
@media (max-width: 992px) {
  .course-card > div > .course-detail {
    height: 7rem;
  }
}

/* tablet */
@media (min-width: 992px) and (max-width: 1200px) {
  .course-card > div > .course-detail {
    height: 11.8rem;
  }
}

/* desktop */
@media (min-width: 1200px) {
  .course-card > div > .course-detail {
    height: 9.4rem;
  }
}

#contact_us_btn {
  background-color: #022433;
  color: white;
  border: 1px solid white;
}

#contact_us_btn:hover {
  background-color: white;
  color: #022433;
  border: 1px solid #022433;
}
#newsletter_btn {
  background-color: rgb(79, 96, 167);
  color: white;
  border: 1px solid white;
}

#newsletter_btn:hover {
  background-color: white;
  color: #0cb4ce;
  border: 1px solid #0cb4ce;
}

#see_details_button:hover {
  background: white !important;
  color: #022433 !important;
}
#schedule_btn {
  background-color: white;
  color: #0cb4ce;
  border: 1px solid #0cb4ce;
}

#schedule:hover {
  background: white !important;
  color: #0cb4ce !important;
  border: 1px solid #0cb4ce !important;
}

/* .courseCard:active #button_apply {
  background: #022433;
  color: white;
} */

#button_apply:hover {
  background: white !important;
  color: #0cb4ce !important;
  border: 1px solid #0cb4ce !important;
}

.order_list ul {
  padding-left: 15px;
}

.order_list li {
  line-height: 25px;
}

.wrapper {
  max-height: 350px;
  display: flex;
  padding: 10px;
  overflow-x: auto;
  position: relative;
}

.wrapper::-webkit-scrollbar {
  height: 10px;
  width: 5px;
}

.wrapper::-webkit-scrollbar-track {
  background: #edf0f2;
  border-radius: 100vw;
}

.wrapper::-webkit-scrollbar-thumb {
  background: #022d40;
  border-radius: 12px;
}

.wrapper .item {
  margin-right: 15px;
  margin-left: 25px;
  /* margin-bottom: 20px; */
  max-width: 160px;
  height: 220px;
  line-height: 110px;
}

.pic-header {
  position: relative;
}

.pic-header img {
  /* height: 500px; */
  object-fit: cover;
  max-width: 100%;
}

.subscribe {
  color: white;
  border-radius: 10px;
  background-color: #022d40;
  padding: 10px;
  border-width: 2px;
  border-style: solid;
}

.batch-list {
  margin-top: 1.5rem;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.hr-sectioned {
  margin: 2.5rem 0;
}

.section-title {
  margin-bottom: 1.5rem;
}

ul {
  list-style-type: disc;
  padding: 0;
  margin: 2px;
}

.customSwalBtn {
  background-color: #f96310;
  border: 1px solid #f96310;
  border-radius: 100vw;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  width: auto;
  font-size: 17px;
  font-weight: 500;
  margin: 10px 5px 10px 5px;
  padding: 10px 32px;
}

.customSwalBtn:hover {
  background-color: #fff !important;
  border: 1px sold #f96310 !important;
  color: #f96310 !important;
}

.swal2-image {
  margin: 0px;
}

.swal2-container.swal2-center > .swal2-popup {
  overflow: hidden;
  border-radius: 25px;
}

.content-q {
  width: 100%;
}

.question {
  background-color: #f8f8f8;
  /* background-color: #ffffff; */
  border: 1px solid #f8f8f8;
  border-radius: 20px;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  /* border: none; */
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  font-weight: bold;
  margin-bottom: 15px;
}

.reviews-img-view .slick-disabled {
  opacity: 0;
}

.question-panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.active,
.question:hover {
  border: 1px solid #022d40;
  background-color: white;
  font-weight: bolder;
  color: #022d40;
}

.active::after {
  content: "\2212" !important;
}

.question::after {
  content: "\002B";
  /* color: white; */
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active_topic_top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border: 1px solid #022d40;
  background-color: white;
  font-weight: bolder;
  color: #022d40;
  transition: 0.2s;
}

.active_top {
  border: 1px solid #022d40;
  background-color: white;
  font-weight: bolder;
  color: #022d40;
  transition: 0.2s;
}

.active_topic_bottom {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 1px solid #022d40;
  background-color: white;
  font-weight: bolder;
  color: #022d40;
  transition: 0.2s;
}

#sticky {
  z-index: 1;
}

#sticky a {
  text-decoration: none;
}

#sticky p {
  margin: 0px;
  padding: 10px;
}

#tabbar {
  background-color: rgb(245, 245, 245);
  border-radius: 10px;
  border-radius: 1px solid rgb(245, 245, 245);
}

.swal2-shown {
  padding-right: 0px !important;
}

.wip_wup_animated {
  animation: wip_wup_animation 2s ease-in-out infinite;
}

#interest_btn {
  background-color: #edaf05;
  color: white;
  border: 1px solid white;
}

#interest_btn:hover {
  background-color: white;
  color: #edaf05;
  border: 1px solid #edaf05;
}

#free_trial_btn {
  background-color: #ff92ab;
  color: white;
  border: 1px solid white;
}

#free_trial_btn:hover {
  background-color: white;
  color: #ff92ab;
  border: 1px solid #ff92ab;
}

#free_trial_video {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: rgba(0, 0, 0, 0.95);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

#free_trial_video iframe {
  position: relative;
  max-width: 900px;
  outline: none;
}

.close {
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  filter: invert(1);
  max-width: 32px;
}

.active_ft {
  visibility: visible !important;
  opacity: 1 !important;
}

.isDisable {
  background-color: #757474 !important;
  color: white !important;
}

@keyframes wip_wup_animation {
  0%,
  100% {
    background-color: #f96310;
    border: 1px solid #f96310;
    color: #fff;
  }

  50% {
    background-color: #fff;
    border: 1px solid #f96310;
    color: #f96310;
  }
}

/** fadeInLeft **/

@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translatex(-10px);
    -moz-transform: translatex(-10px);
    -o-transform: translatex(-10px);
    transform: translatex(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
}

@-moz-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translatex(-10px);
    -moz-transform: translatex(-10px);
    -o-transform: translatex(-10px);
    transform: translatex(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translatex(-100px);
    -moz-transform: translatex(-100px);
    -o-transform: translatex(-100px);
    transform: translatex(-100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
}
.in-left {
  -webkit-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-duration: 0.5s;
  animation-delay: 0s;
}

/** fadeOutLeft **/

@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translatex(-10px);
    -moz-transform: translatex(-10px);
    -o-transform: translatex(-10px);
    transform: translatex(-10px);
  }
}

@-moz-keyframes fadeOutLeft {
  from {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translatex(-10px);
    -moz-transform: translatex(-10px);
    -o-transform: translatex(-10px);
    transform: translatex(-10px);
  }
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
    -webkit-transform: translatex(0);
    -moz-transform: translatex(0);
    -o-transform: translatex(0);
    transform: translatex(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translatex(-100px);
    -moz-transform: translatex(-100px);
    -o-transform: translatex(-100px);
    transform: translatex(-100px);
  }
}
.out-left {
  -webkit-animation-name: fadeOutLeft;
  -moz-animation-name: fadeOutLeft;
  -o-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-duration: 0.5s;
  animation-delay: 0s;
}

/** fadeInUp **/

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translatey(-10px);
    -moz-transform: translatey(-10px);
    -o-transform: translatey(-10px);
    transform: translatey(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0);
  }
}

@-moz-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translatey(-10px);
    -moz-transform: translatey(-10px);
    -o-transform: translatey(-10px);
    transform: translatey(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translatey(-10px);
    -moz-transform: translatey(-10px);
    -o-transform: translatey(-10px);
    transform: translatey(-10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0);
  }
}

.in-up {
  -webkit-animation-name: fadeInUp;
  -moz-animation-name: fadeInUp;
  -o-animation-name: fadeInUp;
  animation-name: fadeInUp;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-duration: 1s;
  animation-delay: 0.2s;
}

/** fadeOutDown **/

@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translatey(-10px);
    -moz-transform: translatey(-10px);
    -o-transform: translatey(-10px);
    transform: translatey(-10px);
  }
}

@-moz-keyframes fadeOutDown {
  from {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translatey(-10px);
    -moz-transform: translatey(-10px);
    -o-transform: translatey(-10px);
    transform: translatey(-10px);
  }
}

@keyframes fadeOutDown {
  from {
    opacity: 1;
    -webkit-transform: translatey(0);
    -moz-transform: translatey(0);
    -o-transform: translatey(0);
    transform: translatey(0);
  }
  to {
    opacity: 0;
    -webkit-transform: translatey(-10px);
    -moz-transform: translatey(-10px);
    -o-transform: translatey(-10px);
    transform: translatey(-10px);
  }
}

.out-down {
  -webkit-animation-name: fadeOutDown;
  -moz-animation-name: fadeOutDown;
  -o-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -o-animation-duration: 1s;
  animation-delay: 0.2s;
}

.card_close figure {
  margin: 0;
}

.card_close figure .text {
  /* padding:5px; */
  color: red;
  z-index: 1;
  opacity: 1;
  top: 85%;
  /* left:35%; */
  position: absolute;
  /* transition: 0.5s ease-in-out; */
}

.card_close .text h6 {
  margin: 0;
  text-align: center;
}

@media (min-width: 992px) {
  .pr-lg-4 {
    padding-right: 2.5rem !important;
  }

  #lecturer_collapse {
    display: none;
  }

  .pic-header::after {
    padding-bottom: 20%;
  }
}

@media screen and (max-width: 1200px) {
  #sticky {
    top: 7rem !important;
  }

  .subscribe {
    top: 7rem !important;
  }
}
@media (max-width: 767px) {
  .message-container {
    padding: 0 10px;
  }
}
@media screen and (max-width: 992px) {
  #free_trial_video iframe {
    max-width: 90%;
  }

  .batch-list {
    margin-top: 0 !important;
  }

  .pic-header::after {
    padding-bottom: 45%;
    height: 220px !important;
  }

  #lecturer {
    display: none !important;
  }

  #L-hr-F {
    display: none;
  }

  .stick {
    position: unset !important;
  }

  #button_apply {
    position: unset !important;
  }

  /* #batch_card {
    margin-bottom: 10px !important;
    width: 80% !important;
  } */

  #course_name {
    font-size: 40px !important;
  }

  #person_suit {
    margin-left: 0px;
    margin-right: 0px;
  }

  .wrapper .item {
    min-width: 150px;
  }
}

@media screen and (max-width: 400px) {
  .promotion-view li {
    font-size: 12px;
  }

  .promotion-view span {
    font-size: 12px;
  }
}
@media screen and (max-width: 668px) {
  .coursebox {
    width: 320px;
  }
}
.img-container {
  text-align: center;
  padding: 0px;
}
.img-fluid {
  max-height: 150px;
  max-width: 150px;
  object-fit: cover;
}
.message-container {
  margin-left: 40px;
  margin-right: 40px;
  padding: 0px;
}
.message-container p {
  font-size: 16px;
  margin-bottom: 15px;
}
.message-container li {
  font-size: 16px;
  margin-bottom: 10px;
}

.time-element {
  display: inline-block;
  background-color: red;
  border: 2px solid red;
  padding: 4px 8px;
  border-radius: 4px;
  color: #ffffff;
  font-size: 20px; /* Adjust the font size */
  font-weight: bold; /* Optional: make the text bold */
}
.colon {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

/* --------------------------------------------------------------------------------- */
/* create popup section */
/* --------------------------------------------------------------------------------- */
/* CSS for the popup */
#countdown {
  font-size: 42px;
  font-weight: bold;
  color: #022d40;
  text-align: right;
  background-color: #022d40;
  padding-top: 10px;
  display: flex;
  justify-content: right;
}

#countdown span {
  display: inline-block;
  padding: 5px;
  text-align: center;
}

.time-frame {
  background-color: #ffdc25;
  box-sizing: border-box;
}

.time-label {
  display: block;
  font-size: 11px;
  color: #fff;
}

.time-component {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 5px;
}

#countdown-wrapper {
  font-size: 27px;
  font-weight: bold;
  color: #000;
  text-align: center;
  background-color: #022d40;
  padding-right: 10px;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#countdown-wrapper .promotion-text {
  color: #fff;
  font-weight: normal;
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1; /* Add this to make the text take up the remaining space */
}
@media only screen and (max-width: 1000px) {
  #countdown {
    font-size: 21px;
    font-weight: bold;
    color: #022d40;
    text-align: right;
    background-color: #022d40;
    padding-top: 10px;
    display: flex;
    justify-content: right;
  }

  #countdown span {
    display: inline-block;
    padding: 5px;
    text-align: center;
  }

  .time-frame {
    background-color: #ffdc25;
    box-sizing: border-box;
  }

  .time-label {
    display: block;
    font-size: 11px;
    color: #fff;
  }

  .time-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;
  }

  .colonpopup {
    background-color: transparent;
    color: #fff;
  }

  #countdown-wrapper {
    font-size: 13px;
    font-weight: bold;
    color: #000;
    background-color: #022d40;
    padding-right: 10px;
    padding-left: 10px;
    justify-content: center;
  }

  #countdown-wrapper .promotion-text {
    color: #fff;
    font-weight: normal;
    padding-bottom: 10px;
    text-align: center;
    justify-content: center;
  }
}

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  background-color: #ffffff;
  padding: 0; /* Remove padding */
  border-radius: 0; /* Remove border-radius */
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  z-index: 999;
  display: none;
}

#popup img {
  display: block;
  /* vertical-align: top; */
  object-fit: contain; /* Ensure the entire image is displayed */
  border-radius: 0; /* Remove border-radius */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

#popup button {
  position: absolute;
  left: 50%;
  bottom: -70px;
  transform: translateX(-50%);
  display: block;
  padding: 5px 40px;
  background-color: #0cb4ce;
  color: #ffffff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  font-size: 20px; /* add this property to set the font size */
}

#popup button:focus {
  outline: none;
}

.popup-fade {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* adjust the opacity as desired */
  z-index: 998;
  display: none;
}

.btn-default {
  background-color: var(--primary-1);
  color: #ffffff;
  border-radius: 10rem;
  border-color: var(--primary-1);
}