/* Main container for the tabs */
.jrt-tabs-container {
  width: 100%;
  margin: 20px 0;
/*   border: 1px solid #ddd; */
  border-radius: 4px;
}

/* Tab navigation list */
/* .jrt-tab-nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;

  justify-content: center;
	
} */

/* Tab navigation list */
.jrt-tab-nav {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 0 auto; /* Aligns the nav block to the right */
  padding: 0;
  width: 60%; /* Makes the nav block the same width as the right column */
  justify-content: center; /* Centers the tab buttons within the new width */
}

.jrt-tab-nav li {
  margin: 0;
		border-right: 1px solid #ddd; 
}

/* Individual tab buttons */
.jrt-tab-button {
  padding: 10px 20px;
  margin: 0;
  border: none;
  background-color: transparent!important;
  cursor: pointer;
  font-size: 16px;
  color: #555;
  transition: all 0.3s, color 0.3s;
	opacity: 0.7
}
.jrt-tab-button:hover{
	opacity: .7;
}

/* No border for last tab item */
.jrt-tab-nav li:last-child {
  border-right: none;
}

/* Style for the active tab button */
.jrt-tab-button.active {
  
  opacity: 1;
  font-weight: bold;

}

/* Wrapper for all tab content panes */
.jrt-tab-content-wrapper {
  padding: 20px;
	    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: var(--e-global-typography-text-font-size);
    font-weight: var(--e-global-typography-text-font-weight);
    color: var(--e-global-color-primary);

/*   background-color: #fff; */
}

/* Individual tab content panes */
.jrt-tab-pane {
  display: none; /* Hide all panes by default */
}

/* Show the active pane */
.jrt-tab-pane.active {
  display: block;
}

/*--------------------------------------------------------------
# New Two-Column Layout Styles
--------------------------------------------------------------*/

/* Flex container for the two columns */
.jrt-tab-pane-inner {
  display: flex;
  flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
  align-items: center; /* Vertically aligns content in columns */
  gap: 6em; /* Space between the two columns */
}

/* Left (content) column - takes up ~40% of the space */
.jrt-content-col {
  flex: 2; /* Represents 2 parts of the total width */
  min-width: 280px; /* Adjust min-width if needed */
}

/* Right (viewer) column - takes up ~60% of the space */
.jrt-viewer-col {
  flex: 3; /* Represents 3 parts of the total width */
  min-width: 400px; /* Give the larger column a larger min-width */
}

/* Style for the new title in the left column */
.jrt-model-title {
    font-family: var(--e-global-typography-0a1140d-font-family), Sans-serif;
    font-size: var(--e-global-typography-0a1140d-font-size);
    font-weight: var(--e-global-typography-0a1140d-font-weight);
    text-transform: var(--e-global-typography-0a1140d-text-transform);
    font-style: var(--e-global-typography-0a1140d-font-style);
    text-decoration: var(--e-global-typography-0a1140d-text-decoration);
    line-height: var(--e-global-typography-0a1140d-line-height);
    word-spacing: var(--e-global-typography-0a1140d-word-spacing);
    color: var(--e-global-color-primary);
}

/* Style for the new body copy in the left column */
.jrt-model-body {
  font-size: 1em;
  line-height: 1.6;
}

/*--------------------------------------------------------------
# Responsive (Mobile) Styles
--------------------------------------------------------------*/
@media (max-width: 991px) {
  /* Stack the columns on top of each other on smaller screens */
  .jrt-tab-pane-inner {
    flex-direction: column;
  }
  
  /* Center-align the text in the content column on mobile */
  .jrt-content-col {
    text-align: center;
    order: 2; /* Optional: Puts the text below the viewer on mobile */
  }

  .jrt-viewer-col {
    order: 1; /* Optional: Puts the viewer above the text on mobile */
    width: 100%; /* Ensure viewer takes full width */
  }
	.jrt-tab-nav {
    width: 100%;
    margin: 0;
  }
}