/* home page design start */
.video-section {
  position: relative;
  width: 100%;
  height: 550px;
  background-color: rgba(0, 0, 0, 0.185);
  display: flex;
  justify-content: center;
  align-items: center;
}

.video-section.right-aligned-video {
  position: relative;
  width: 100%;
  height: 485px !important;
  background-color: rgba(0, 0, 0, 0.185);
  display: flex;
  justify-content: center;
  align-items: center;
}



.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 550px;
  /* background-image: linear-gradient(to bottom, #faa820cc, #d58a1d99, #b16f1a70, #6b3f1238, #311b0736, #371d043b, #371d0438, #311b0740, #6b3f1252, #b16f1a70, #d58a1d99, #faa820cc); */
  background-image: linear-gradient(
    to bottom,
    #f9a313e6,
    #df9221de,
    #a95e01b0,
    #61310196,
    #391f0796,
    #2f1a0591,
    #391f0796,
    #49290d91,
    #552b0480,
    #a95e01b0,
    #df9221de,
    #f9a313e6
  );
  z-index: 0.5;
}

.howItWorks .video-overlay {
  background-image: linear-gradient(
    to bottom,
    #f9a313e6,
    #df9221de,
    #a95e01b0,
    #61310196,
    #391f0796,
    #2f1a0591,
    #391f0796,
    #49290d91,
    #552b0480,
    #a95e01b0,
    #df9221de,
    #f9a313e6
  );
}

.right-aligned-video .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 485px !important;
  /* background-image: linear-gradient(to bottom, #f9a313e6, #e3b36d99, #e3b7804a, transparent, transparent, transparent, transparent, transparent, transparent, #e3b7804a, #e3b36d99, #f9a313e6) !important; */
  background-image: linear-gradient(
    to right,
    #f9a313e6,
    #e3b36d99,
    #e3b7804a,
    transparent,
    transparent
  ) !important;
  z-index: 0.5;
}

section:is(.ihealth_page) .video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 280px !important;
  background-image: linear-gradient(
    to bottom,
    #faa923,
    #8e5800,
    #faa820
  );
  z-index: 0.5;
}

.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  /* z-index: -1; */
}

.right-aligned-video .background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  transform: translate(-50%, -50%);
  background-color: white;
  padding-top: 0;
  padding-bottom: 0;
}

.text-container {
  position: absolute;
  width: 100%;
  color: white;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  height: 100%;
}

.right-aligned-video .text-container {
  position: absolute;
  color: white;
  opacity: 1;
  top: 50% !important;
  left: 25%;
  transform: translate(-50%, -50%) !important;
  z-index: 10;
  height: 100%;
}

.text-container h1,
.text-container p {
  margin: 0;
  padding: 0;
  text-align: center;
}

.text-container h1 {
  font-size: 60px;
  line-height: 90px !important;
  font-weight: 500 !important;
  font-family: "Canada-type-gibson" !important;
  color: #ffffff;
}

.right-aligned-video .text-container h1 {
  font-size: 57px;
  line-height: 90px !important;
  font-weight: 600 !important;
  font-family: "Canada-type-gibson" !important;
  color: #0c4c7c;
  margin-bottom: 0px;
}

.text-container button {
  color: white;
  background-color: transparent;
  font-size: 32px;
  font-family: "Canada-type-gibson";
  border: none;
  border-radius: 30px;
  border: 8px solid #ffb436;
  margin-top: 20px;
  padding: 12px 60px;
  cursor: pointer;
}

.right-aligned-video .text-container button {
  color: #0c4c7c !important;
  background-color: #ffb436 !important;
  font-size: 32px;
  font-family: "Canada-type-gibson";
  border: none;
  border-radius: 30px;
  border: 3px solid #ffffff;
  margin-top: 20px;
  padding: 12px 60px;
  cursor: pointer;
}

.downArrow {
  width: 40px;
  margin-top: 30px;
  cursor: pointer;
}

.play-pause-button {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 27;
  transition: transform 0.3s ease;
  scale: 0.7;
}

.right-aligned-video .play-pause-button {
  background-color: rgba(255, 180, 54, 0.15);
}

.play-pause-button svg {
  fill: white;
  width: 35px;
  height: 35px;
}

.progress-circle {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  z-index: 2;
  scale: 0.7;
}

.progress-circle circle {
  fill: none;
  stroke-width: 4;
  stroke: rgba(255, 255, 255, 0.5);
}

.progress-circle .progress {
  stroke: #fff;
  stroke-dasharray: 0 100;
  transition: stroke-dashoffset 0.2s linear;
}

.right-aligned-video .progress-circle circle {
  stroke: rgba(255, 180, 54, 0.5);
}

.right-aligned-video .progress-circle .progress {
  stroke: #0c4c7c;
}

.right-aligned-video .play-pause-button svg {
  fill: #0c4c7c;
}

.sectionHeading {
  font-size: 50px !important;
  line-height: 65px !important;
  font-family: "Canada-type-gibson" !important;
  font-weight: 500 !important;
  margin: 0;
  padding: 0;
  color: #000 !important;
}

.sectionContent {
  width: 83%;
  font-size: 40px !important;
  line-height: 59px !important;
  font-family: "Canada-type-gibson";
  font-weight: 300;
  margin-top: 40px !important;
  padding: 0;
  margin-bottom: 65px !important;
}

.sectionContent span {
  font-weight: 500;
}

/* Custom styles for the Fancybox close button */
/* Style the close button */

.fancybox-button {
  margin: 10px 195px 0 0 !important;
  height: 35px !important;
  width: 35px !important;
  color: #000 !important;
}
.fancybox-button:hover {
  color: #000 !important;
}

.fancybox-button--close {
  position: absolute; /* Position it absolutely */
  top: 15px; /* Adjust as needed */
  right: 15px; /* Adjust as needed */
  width: 40px; /* Button width */
  height: 40px; /* Button height */
  background-color: #faa71c !important; /* Semi-transparent background */
  border: none; /* No border */
  border-radius: 50% !important; /* Make it round */
  cursor: pointer; /* Pointer cursor */
  display: flex; /* Flexbox for centering */
  justify-content: center; /* Center the SVG */
  align-items: center; /* Center the SVG */
  transition: background-color 0.3s, transform 0.3s; /* Transition for hover effect */
  z-index: 9999; /* Ensure it’s above other elements */
}

/* Change the background on hover */
.fancybox-button--close:hover {
  background-color: #faa71c; /* Change color on hover */
  transform: scale(1.1); /* Slightly enlarge on hover */
}

/* Style the SVG icon */
.fancybox-button--close svg {
  fill: white; /* Icon color */
  width: 20px; /* Icon width */
  height: 20px; /* Icon height */
}

@media only screen and (max-width: 1728px) {
  .sectionHeading {
    font-size: 56px !important;
  }
}

@media only screen and (max-width: 1680px) {
}

@media only screen and (max-width: 1600px) {
  .video-section,
  .video-overlay {
    height: 450px;
  }
}

@media only screen and (max-width: 1536px) {
  .video-section,
  .video-overlay {
    height: 390px;
  }

  .video-section.right-aligned-video,
  .right-aligned-video .video-overlay {
    height: 650px !important;
  }

  .background-video {
    object-fit: cover;
  }

  .sectionHeading {
    font-size: 50px !important;
    line-height: 64px !important;
  }

  .sectionContent {
    font-size: 36px !important;
    line-height: 52px !important;
  }

  .sectionSubHeading {
    font-size: 42px !important;
    line-height: 50px !important;
  }

  .text-container.device-withings h1 {
    font-size: 52px;
    line-height: 65px !important;
  }
}

@media only screen and (max-width: 1440px) {
  .video-section,
  .video-overlay {
    height: 370px;
  }

  .video-section.right-aligned-video,
  .right-aligned-video .video-overlay {
    height: 575px !important;
  }

  .background-video {
    object-fit: contain;
  }

  .sectionHeading {
    font-size: 46px !important;
    line-height: 65px !important;
  }
  .sectionContent {
    width: 92%;
    font-size: 32px !important;
    line-height: 48px !important;
    margin-bottom: 50px !important;
  }

  .text-container.device-withings h1 {
    font-size: 50px !important;
    line-height: 65px !important;
  }

  .right-aligned-video .text-container {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .right-aligned-video .text-container h1 {
    font-size: 45px !important;
  }

  .right-aligned-video .text-container button {
    font-size: 27px !important;
    border-radius: 14px !important;
    padding: 5px 45px 0 45px !important;
  }

  .sectionSubHeading {
    font-size: 35px !important;
    line-height: 35px !important;
  }
}

@media only screen and (max-width: 1366px) {
  .video-section,
  .video-overlay {
    height: 350px;
  }

  .video-section.right-aligned-video,
  .right-aligned-video .video-overlay {
    height: 460px !important;
  }

  .sectionHeading {
    font-size: 45px !important;
    line-height: 55px !important;
  }
  .sectionContent {
    font-size: 32px !important;
    line-height: 48px !important;
  }
}

@media only screen and (max-width: 1280px) {
  .text-container h1 {
    font-size: 45px !important;
    line-height: 60px !important;
  }

  .text-container.device-withings h1 {
    font-size: 38px !important;
    line-height: 48px !important;
  }

  .video-section,
  .video-overlay {
    height: 330px;
  }

  .sectionHeading {
    font-size: 40px !important;
    line-height: 54px !important;
  }

  .sectionContent {
    font-size: 33px !important;
    line-height: 45px !important;
  }

  .sectionSubHeading {
    font-size: 32px !important;
    line-height: 45px !important;
  }
}

@media only screen and (max-width: 1200px) {
  .video-section,
  .video-overlay {
    height: 305px;
  }

  .text-container h1 {
    font-size: 45px !important;
  }

  .text-container button {
    font-size: 23px !important;
  }

  .sectionHeading {
    font-size: 41px !important;
    line-height: 54px !important;
  }

  .sectionContent {
    font-size: 30px !important;
    line-height: 45px !important;
    margin-bottom: 28px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
  .background-video {
    object-fit: cover !important;
  }
}

@media sccreen and (max-width: 992px) and (min-width: 600px){
  
  :is(.body-composition-page,.sleep_analysis_page,.vital_signs_page) .right-aligned-video .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 485px !important;
  }
}
@media only screen and (max-width: 600px) {
  .video-section,
  .video-overlay {
    max-height: 518px;
  }

  .background-video {
    object-fit: cover;
    background-position: center;
  }

  .video-overlay {
    background-image: linear-gradient(
      to bottom,
      #faa820cc,
      #d58a1d99,
      #b16f1a69,
      #6b3f1254,
      #311b073d,
      #371d044a,
      #371d044a,
      #311b073d,
      #6b3f1254,
      #b16f1a69,
      #d58a1d99,
      #faa820cc
    );
  }
  :is(.body-composition-page,.sleep_analysis_page,.vital_signs_page) .right-aligned-video .video-overlay {
    background-image: linear-gradient(
      to top,
      #f9a313e6,
      #e3b36d99,
      #e3b7804a,
      #ffffff,
      #ffffff
    ) !important;
  }

  .sectionHeading {
    text-align: center;
    font-size: 30px !important;
    line-height: 38px !important;
    padding-bottom: 0px !important;
    max-width: 85%;
    margin: 0 auto;
  }

  .sectionContent {
    font-size: 21px !important;
    line-height: 33px !important;
    padding: 0 !important;
    text-align: center;
    width: 70% !important;
    margin: 20px auto !important;
  }

  .video-section {
    width: 100%;
    /* Height set according to a 4:5 aspect ratio */
    height: calc(100vw * 5 / 4); /* Maintain 4:5 aspect ratio */
  }

  .video-overlay {
    /* Overlay must maintain the same size as the video section */
    width: 100%;
    height: 100%;
  }
  :is(.body-composition-page,.sleep_analysis_page,.vital_signs_page) .right-aligned-video .text-container h1 {
    font-size: 35px !important;
  }
  :is(.body-composition-page,.sleep_analysis_page,.vital_signs_page) .video-section.right-aligned-video,
  .right-aligned-video .video-overlay {
    height: 188px !important;
  }


  section:is(.body-composition-page,.sleep_analysis_page,.vital_signs_page) .right-aligned-video .text-container {
    top: 40% !important;
  }

  :is(.body-composition-page,.sleep_analysis_page,.vital_signs_page) .right-aligned-video .video-overlay,
  :is(.ihealth_page) .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 188px !important;
    background-image: linear-gradient(
      to top,
      #f9a313e6,
      #e3b36d99,
      #e3b7804a,
      #ffffff,
      #ffffff
    ) !important;
    z-index: 0.5;
  }

  .body-composition-page .right-aligned-video .video-overlay,
  :is(.body-composition-page,.vital_signs_page) .video-section.right-aligned-video,
  .right-aligned-video .video-overlay {
    height: 188px !important;
  }

  :is(.sleep_analysis_page,.body-composition-page,.vital_signs_page) a#scrollDown {
    display: none;
  }

  section:is(.body-composition-page,.vital_signs_page) .right-aligned-video .text-container {
    top: 50% !important;
  }
  :is(.sleep_analysis_page,.body-composition-page,.vital_signs_page) .right-aligned-video .text-container h1 {
    font-size: 28px !important;
    line-height: 50px !important;
  }

  .activity_tracking_page .video-section,
  .activity_tracking_page .video-overlay {
    max-height: 188px !important;
  }

  .activity_tracking_page a#scrollDown {
    display: none !important;
  }

  .activity_tracking_page .text-container button {
    border: 5px solid #ffb436 !important;
    padding: 12px 45px !important;
  }

  .activity_tracking_page .text-container h1 {
    font-size: 35px !important;
  }

  section.ihealth_page .video-overlay,
  section.ihealth_page .video-section {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 188px !important;
    background-image: linear-gradient(
      to top,
      #f9a313e6,
      #e3b36d99,
      #e3b7804a,
      #ffffff,
      #ffffff
    ) !important;
    z-index: 0.5;
  }
  
  section.ihealth_page .text-container h1{
    color: #0c4c7c;
    font-weight: 600 !important;
  }

  section.ihealth_page .text-container button{
    color: #0c4c7c !important;
    background-color: #ffb436 !important;
    font-size: 27px !important;
    border-radius: 14px !important;
    padding: 12px 45px 5px 45px !important;
    font-family: "Canada-type-gibson";
    border: none;
    border: 3px solid #ffffff;
    margin-top: 20px;
    cursor: pointer;
  }

	.video-section.right-aligned-video,
	.video-section{
	  background-color: transparent;
	}
}

@media only screen and (max-width: 380px) {
  :is(.sleep_analysis_page,.body-composition-page,.vital_signs_page) .right-aligned-video .text-container h1,
  section.ihealth_page .text-container h1{
    font-size: 28px !important;
    line-height: 40px !important;
  }
}