.elementor-kit-16{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-44998ab:#0794B1;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-16 button,.elementor-kit-16 input[type="button"],.elementor-kit-16 input[type="submit"],.elementor-kit-16 .elementor-button{background-color:#0794B1;font-family:"Montserrat", Sans-serif;font-size:20px;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#0794B1;}.elementor-kit-16 button:hover,.elementor-kit-16 button:focus,.elementor-kit-16 input[type="button"]:hover,.elementor-kit-16 input[type="button"]:focus,.elementor-kit-16 input[type="submit"]:hover,.elementor-kit-16 input[type="submit"]:focus,.elementor-kit-16 .elementor-button:hover,.elementor-kit-16 .elementor-button:focus{background-color:#0794B1;color:#FFFFFF;}.elementor-kit-16 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =======================
   RESET & BASIC LAYOUT
   ======================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: sans-serif;
  background-color: #E3E3E3;
}

.main-layout {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* =======================
   BACKGROUND / WATERMARK
   ======================= */
.center-background-logo {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.1;
}
.center-background-logo img {
  max-width: 600px;
  width: 90%;
  height: auto;
}
.top-right-logo {
  position: absolute;
  top: 0;
  right: 0;
  margin: 10px;
  z-index: 10000;
}
.top-right-logo img {
  max-width: 120px;
  height: auto;
  border: 2px solid #fff;
  border-radius: 8px;
}

/* =======================
   LOADING OVERLAY
   ======================= */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.95);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.spinner-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;
  border-top-color: #444;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.instructions-section {
  text-align: center;
  max-width: 500px;
  border: 1px solid #ddd;
  background: #fff;
  padding: 20px;
  position: relative;
  border-radius: 8px;
}
.welcome-logo {
  max-width: 100px;
  margin-bottom: 10px;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #aaa;
  color: #fff;
  border: none;
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
}
.close-btn:hover {
  background: #888;
}

/* =======================
   SKETCHFAB PANEL
   ======================= */
.sketchfab-panel {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.iframe-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* =======================
   QUIZ PANEL (DRAGGABLE)
   ======================= */
.quiz-panel {
  position: absolute;
  top: 60px;
  right: 40px;
  width: 400px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  z-index: 9999;

  /* Make resizable (optional) */
  resize: both;
  overflow: hidden;
  max-height: 80vh;
  min-width: 200px;
  min-height: 150px;
}
.quiz-header {
  background: #fff;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #bbb;
  border-radius: 4px 4px 0 0;
  justify-content: space-between;
  cursor: move; /* Draggable from the header */
}
.quiz-instructions {
  font-size: 0.85rem;
  font-weight: bold;
  margin-right: 10px;
}
.toggle-nav-btn {
  background-color: #888;
  border: none;
  color: #fff;
  font-size: 16px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  border-radius: 4px;
}
.quiz-content {
  position: relative;
  overflow: auto;
  transition: max-height 0.3s ease-out;
}
.quiz-content.collapsed {
  max-height: 0;
  overflow: hidden;
}

/* =======================
   ANNOTATION POPUP
   ======================= */
.annotation-popup {
  position: absolute;
  width: 300px;
  background: #fff;
  border: 2px solid #333;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: none;
  z-index: 9999;

  /* Resizable if desired */
  resize: both;
  overflow: auto;
  max-width: 90%;
}
.annotation-popup-header {
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #bbb;
  border-radius: 6px 6px 0 0;
  padding: 6px;
  cursor: move; /* Draggable from the header */
}
.annotation-drag-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.annotation-popup-title {
  font-weight: bold;
  margin-right: 8px;
}
.annotation-zoom-btn {
  margin-left: auto;
  margin-right: 8px;
  background: #ddd;
  color: #333;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0 8px;
  height: 30px;
  cursor: pointer;
  font-size: 0.85rem;
}
.annotation-zoom-btn:hover {
  background: #bbb;
}
.annotation-popup-close {
  background: #cc3333;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 16px;
  height: 30px;
  cursor: pointer;
}
.annotation-popup-close:hover {
  background: #bb2222;
}
.annotation-popup-content {
  padding: 8px;
}
/* Changed input to a bigger default height for multi-line text area */
.annotation-popup-input {
  width: 100%;
  height: 80px; 
  margin-bottom: 10px;
  padding: 6px;
  box-sizing: border-box;
}
.annotation-popup-save {
  background: #5cba47;
  color: #fff;
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}
.annotation-popup-save:hover {
  background: #4ca337;
}
.annotation-popup.zoom-x2 {
  font-size: 1.25rem;
}

/* =======================
   SPIN ANIMATION
   ======================= */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* =======================
   RESPONSIVE TWEAKS
   ======================= */
@media (max-width: 600px) {
  .quiz-panel {
    width: 90%;
    right: 5%;
    top: 20%;
  }
  .annotation-popup {
    width: 90% !important;
    left: 5% !important;
    top: 20% !important;
    transform: none !important;
  }
}/* End custom CSS */