.elementor-6933 .elementor-element.elementor-element-295651f{--display:flex;--min-height:250px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-6933 .elementor-element.elementor-element-295651f:not(.elementor-motion-effects-element-type-background), .elementor-6933 .elementor-element.elementor-element-295651f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EEE7D9;background-image:url("https://www.thefirebeargroup.com/wp-content/uploads/2025/10/Heading-13.png");background-position:center center;background-repeat:no-repeat;background-size:733px auto;}.elementor-6933 .elementor-element.elementor-element-6638038{z-index:1;}.elementor-6933 .elementor-element.elementor-element-31a6e92{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-6933 .elementor-element.elementor-element-2685264{width:100%;max-width:100%;}@media(max-width:1024px){.elementor-6933 .elementor-element.elementor-element-295651f{--min-height:250px;}.elementor-6933 .elementor-element.elementor-element-295651f:not(.elementor-motion-effects-element-type-background), .elementor-6933 .elementor-element.elementor-element-295651f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:651px auto;}}@media(max-width:767px){.elementor-6933 .elementor-element.elementor-element-295651f{--min-height:250px;}.elementor-6933 .elementor-element.elementor-element-295651f:not(.elementor-motion-effects-element-type-background), .elementor-6933 .elementor-element.elementor-element-295651f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:354px auto;}.elementor-6933 .elementor-element.elementor-element-31a6e92{--content-width:90%;}}@media(min-width:768px){.elementor-6933 .elementor-element.elementor-element-295651f{--content-width:100vw;}.elementor-6933 .elementor-element.elementor-element-31a6e92{--content-width:900px;}}@media(max-width:1024px) and (min-width:768px){.elementor-6933 .elementor-element.elementor-element-31a6e92{--content-width:95%;}}/* Start custom CSS for container, class: .elementor-element-295651f *//* 🔸 วางใน Elementor -> Custom CSS */

/* -------------------------- */
/* 1. กรอบ (เปลือกตา) */
/* -------------------------- */
.eye-container {
  position: relative;
  width: 100%;
  height: 600px; /* 👈 ปรับความสูงของกรอบ "ดวงตา" ได้ที่นี่ */
  
  /* ✅ นี่คือส่วนที่สำคัญที่สุด: ทำหน้าที่เป็น "เปลือกตา" */
  overflow: hidden; 
  
  background-color: #FFFFFF; /* 👈 สีขาวของตา (ถ้าจำเป็น) */
  
  /* จัดให้ลูกตาอยู่ตรงกลาง */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* -------------------------- */
/* 2. ลูกตาสีเหลือง (Iris) */
/* -------------------------- */
.iris-bg {
  position: absolute;
  
  /* ✅ ทำให้ใหญ่กว่ากรอบมากๆ (เช่น 150vw) เพื่อให้เห็นเป็นขอบโค้ง */
  width: 150vw; 
  height: 150vw;
  min-width: 1200px; /* 👈 ขนาดวงกลมขั้นต่ำ */
  min-height: 1200px;
  
  background-color: #fbcb0a; /* 👈 สีเหลืองจากในรูป */
  border-radius: 50%;
  
  /* จัดการของข้างใน (ตัวหนังสือ, ปุ่ม) ให้อยู่กลาง */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; 
}

/* -------------------------- */
/* 3. ตัวหนังสือหมุนๆ */
/* -------------------------- */
.spinning-text {
  position: absolute;
  width: 500px; /* 👈 ปรับขนาด "วง" ของตัวหนังสือ */
  height: 500px;
  
  /* ✅ สั่งให้หมุนช้าๆ 30 วินาทีต่อรอบ */
  animation: spin 30s linear infinite; 
}

.spinning-text svg {
   width: 100%;
   height: 100%;
   /* ป้องกันบั๊กตัวหนังสือหายใน Safari */
   transform: translate3d(0, 0, 0); 
}

/* ✅ Keyframes สำหรับการหมุน */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* -------------------------- */
/* 4. ปุ่มลูกตาดำ (Pupil) */
/* -------------------------- */
.pupil-button {
  position: absolute;
  width: 110px; /* 👈 ขนาดปุ่ม "ลูกตาดำ" */
  height: 110px;
  background-color: #3B82F6; /* 👈 สีน้ำเงินจากในรูป */
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3;
  text-decoration: none;
  z-index: 10; /* 👈 ให้อยู่ทับตัวหนังสือ */
  cursor: pointer;
  transition: transform 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.pupil-button:hover {
   transform: scale(1.1);
}


/* -------------------------- */
/* 🔸 สำหรับมือถือ (Mobile) 🔸 */
/* -------------------------- */
@media (max-width: 767px) {
  .eye-container {
     height: 400px; /* 👈 ลดความสูงกรอบในมือถือ */
  }
  
  .iris-bg {
     /* 👈 ทำให้ใหญ่ขึ้นอีกในมือถือ (เช่น 250vw) เพื่อให้ขอบโค้งยังสวย */
     width: 250vw;
     height: 250vw;
  }
  
  .spinning-text {
     width: 300px; /* 👈 ลดขนาดวงตัวหนังสือ */
     height: 300px;
  }
  
  /* ปรับขนาดฟอนต์ใน SVG */
  .spinning-text text {
     font-size: 28px; 
  }
  
  .pupil-button {
     width: 90px; /* 👈 ลดขนาดปุ่ม */
     height: 90px;
     font-size: 14px;
  }
}/* End custom CSS */