/* Make the image container relative */
.background-image {
  position: relative;
}

/* Make the video float over the image */
.floating-video {
  position: absolute;
  top: 170px;      /* Adjust vertical position */
	width: 770px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Optional: shadow */
}

/* Target dropdown menu items */
.main-navigation ul ul {
  width: 600px; /* Increase this value as needed */
  white-space: normal; /* Allows text to wrap inside */
}

.circular-video {
  width: 600px;
  height: 600px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #000; /* optional, makes background black instead of transparent */
}

.circular-video video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;

  object-fit: contain;
}

/* Example: Move the block down by 50px */
.custom-block {
  transform: translateY(1500px);
}

.img-left {
  margin-right: 20px; /* Add space to the right of the left image */
}

.img-right {
  margin-left: 20px; /* Add space to the right of the left image */
}

.full-width-block {
  width: 100vw;        /* Full viewport width */
  margin-left: calc(-50vw + 50%);  /* Center it */
  position: relative;  /* Keep positioning controlled */
}

/* Target your text box container */
.photo-text-box {
  position: absolute;    /* or relative, depending on theme */
  top: 10%;              /* adjust this value to move it down */
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: black;          /* optional: make text visible */
}


.top-button {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  z-index: 100;
}

.my-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 0%;
    right: 50%;
    margin-left: 0vw !important;
    margin-right: -50vw !important;
}

 /* video of HDI page make it middle place */

#video-area {
    display: flex;               /* flex container */
    justify-content: center;     /* center horizontally */
    margin-top: 10px;            /* gap from paragraph */
}

#main-video {
    max-width: 80%;              /* optional: restrict width */
    height: auto;                /* maintain aspect ratio */
}



.BFS-block-image img {
    display: block;
	text-align: center !important;
}

.middle-list {
  max-width: 700px;
  margin: 0 auto;
}

.middle-lists {
  max-width: 2400px;
  margin: 0 auto;
}


.entry-content .contact-form-submission-message,
.entry-content .contact-form-submission-message p {
    color: #000000 !important;
}

body {
color: #000 !important;
}






/* ===== Contact Form 7 Clean Styling ===== */

/* Form container */
.wpcf7-form {
  max-width: 700px;
}

/* Labels */
.wpcf7-form p {
  margin-bottom: 20px;
  font-size: 14px;
  color: #333;
}

/* Required text */
.wpcf7-form .required {
  color: red;
  font-size: 12px;
}

/* Input fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

/* Textarea */
.wpcf7-form textarea {
  height: 120px;
}

/* Fix checkbox + text inline */
.wpcf7-form .wpcf7-acceptance label {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
}

/* Checkbox alignment */
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
  margin-top: 3px;
}

/* Keep privacy link inline */
.wpcf7-form a {
  display: inline !important;
}

/* Submit button */
.wpcf7-form input[type="submit"] {
  background-color: #45B39D;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  width: auto;
}

/* Submit hover */
.wpcf7-form input[type="submit"]:hover {
  background-color: #3aa18c;
}




/* new overlay button code */

/* common style */
.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.overlay-button {
    position: absolute;
    transform: translate(-50%, -50%);
    
    width: 40px;              /* square size */
    height: 40px;

    background-color: #FF0800;
    color: white;

    border: none;
    cursor: pointer;

    font-size: 28px;          /* bigger + */
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border-radius: 4px;       /* slight rounding */
    
    transition: all 0.2s ease; /* smooth hover animation */
}

/* Hover effect */
.overlay-button:hover {
    background-color: #cc0000;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Positions for ampoule page only */
.page-product-a .button-1 { top: 25%; left: 28%; }
.page-product-a .button-2 { top: 40%; left: 40%; }
.page-product-a .button-3 { top: 37%; left: 59%; }
.page-product-a .button-4 { top: 32%; left: 67%; }

/* Positions for vial page only */
.page-product-b .button-1 {
    top: 54%;
    left: 29%;
}
.page-product-b .button-2 {
    top: 55%;
    left: 50%;
}
.page-product-b .button-3 {
    top: 50%;
    left: 44%;
}
.page-product-b .button-4 {
    top: 35%;
    left: 82%;
}

/* Positions for cartridge page only */

.page-product-c .button-1 {
    top: 25%;
    left: 29%;
}

.page-product-c .button-2 {
    top: 39%;
    left: 39%;
}

.page-product-c .button-3 {
    top: 35%;
    left: 55%;
}

.page-product-c .button-4 {
    top: 32%;
    left: 69%;
}

/* Positions for PFS page only */

.page-product-d .button-2 {
    top: 40%;
    left: 52%;
}

.page-product-d .button-3 {
    top: 32%;
    left: 60%;
}

.page-product-d .button-4 {
    top: 30%;
    left: 74%;
}

/* Positions for BFS page only */
.page-product-e .button-1 {
    top: 52%;
    left: 16%;
}

.page-product-e .button-2 {
    top: 49%;
    left: 43%;
}

.page-product-e .button-3 {
    top: 48%;
    left: 66%;
}

.page-product-e .button-4 {
    top: 42%;
    left: 80%;
}

/* Positions for SVP page only */
.page-product-f .button-1 {
    top: 15%;
    left: 14%;
}

.page-product-f .button-2 {
    top: 39%;
    left: 30%;
}

.page-product-f .button-3 {
    top: 37%;
    left: 46%;
}

.page-product-f .button-4 {
    top: 33%;
    left: 73%;
}

.page-product-e .button-5 {
    top: 32%;
    left: 23%;
}

/* Positions for bottle page only */
.page-product-g .button-1 {
    top: 48%;
    left: 21%;
}

.page-product-g .button-2 {
   top: 48%;
    left: 39%;
}

.page-product-g .button-3 {
     top: 32%;
    left: 46%;
}

.page-product-g .button-4 {
    top: 49%;
    left: 46%;
}

/* Positions for bag page only */
.page-product-h .button-1 {
    top: 25%;
    left: 25%;
}

.page-product-h .button-2 {
    top: 46%;
    left: 45%;
}

.page-product-h .button-3 {
    top: 47%;
    left: 71%;
}

/* Positions for HDL only */
.page-product-i .button-1 {
    top: 40%;
    left: 30%;
}

.page-product-i .button-2 {
    top:37%;
    left: 49%;
}

/* Positions for Lyo page only */
.page-product-j .button-1 {
    top: 30%;
    left: 28%;
}

.page-product-j .button-2 {
   top: 32%;
    left: 36%;
}

.page-product-j .button-3 {
     top: 36%;
    left: 49%;
}

.page-product-j .button-4 {
    top: 39%;
    left: 60%;
}

/* delete underline when adding link */
.footer-no-underline a {
  text-decoration: none !important;
}
.footer-no-underline a:hover {
  text-decoration: none !important;
}