/*---------------------------------------------------------------------------------

 Theme Name:   Eyeconic
 Theme URI:    
 Description:  
 Author:       
 Author URI:   
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/*add borders to the menu items*/

.et_pb_menu nav > ul > li:not(:last-child) {
  border-right: 1px solid #10203e;
}

/*adjust spacing around menu items*/

.et_pb_menu li a {
  padding: 4px 5px;
}

.custom-arrow-button {
  display: inline-flex; /* keep flex for icon/text alignment */
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: transparent;
  color: #111;
  text-decoration: none;
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s;

  /* new line settings */
  display: inline-flex; /* keep flex for icon alignment */
  flex-direction: row;
  width: max-content; /* shrink to fit text + icon */
  margin-bottom: 12px; /* spacing between buttons */
}

/* Optional hover effect on text/border */
.custom-arrow-button:hover {
  color: #111;
  border-color: #111;
}

/* Default arrow using ::after */
.custom-arrow-button::after {
  content: "↗"; /* diagonal arrow */
  display: inline-block;
  font-size: 2em;
  line-height: 1;
  transition: transform 0.3s, opacity 0.3s;
  margin-left: 0.3em; /* spacing from text */
}

/* Hover arrow effect */
.custom-arrow-button:hover::after {
  content: "→"; /* right arrow */
  transform: scaleX(0.85); /* slightly shorter */
}

.custom-arrow-larger-button {
  position: relative;
  display: inline-block;
  width: 5em; /* larger size */
  height: 5em; /* larger size */
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Default arrow using ::after */
.custom-arrow-larger-button::after {
  content: "↗"; /* diagonal arrow */
  display: inline-block;
  font-size: 3em; /* larger icon */
  line-height: 1;
  transition: transform 0.3s, opacity 0.3s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Hover arrow */
.custom-arrow-larger-button:hover::after {
  content: "→"; /* right arrow */
  transform: translate(-50%, -50%) scaleX(0.85); /* slightly shorter on hover */
}

/* ===== Team Tabs ===== */
.custom-tabs .tab-buttons {
  display: flex;
  flex-wrap: wrap; /* allow multiple rows */
  gap: 10px;
  margin-bottom: 20px;
}

/* Button style - all buttons same width */
.custom-tabs .tab-btn {
  background: #10203e; /* default button background */
  color: #fff; /* default text color */
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 16px;
  border-radius: 4px;
  flex: 1 1 calc(20% - 8px); /* 5 buttons per row: 100% / 5 = 20%, minus gap */
  text-align: center;
  min-width: 120px; /* optional: prevents buttons from shrinking too much on mobile */
}

/* Hover effect */
.custom-tabs .tab-btn:hover {
  opacity: 0.85;
}

/* Active button style */
.custom-tabs .tab-btn.active {
  background: #fff; /* white background */
  color: #10203e; /* text color */
  font-weight: 500;
}

/* Tab content */
.custom-tabs .tab-panel {
  display: none;
  margin-top: 20px;
}

.custom-tabs .tab-panel.active {
  display: block;
}
/* ===== Vertical Tabs Layout ===== */
.custom-vertical-tabs .vertical-tabs-container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap; /* stack on mobile */
}

/* Left Column: Buttons */
.custom-vertical-tabs .tab-buttons-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1 1 200px; /* minimum width */
  height: 100%; /* make column fill height */
}

/* Right Column: Content */
.custom-vertical-tabs .tab-content-column {
  flex: 3 1 600px; /* wider content column */
}

/* Buttons */
.custom-vertical-tabs .tab-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e5e5e5; /* inactive button background */
  color: #10203e;
  border: none;
  padding: 45px 20px;
  font-size: 35px;
  line-height: 1;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: left;
  font-family: var(--et_global_heading_font);

  /* Make buttons take equal height */
  flex: 1;
  min-height: auto; /* override default if needed */
}

/* Active button */
.custom-vertical-tabs .tab-btn.active {
  background: #10203e; /* dark blue */
  color: #fff;
}

/* Arrow */
.custom-vertical-tabs .tab-arrow {
  font-size: 30px;
  transition: transform 0.3s ease;
}

.custom-vertical-tabs .tab-btn.active .tab-arrow {
  transform: rotate(45deg); /* optional rotation for active */
}

/* Hover effect */
.custom-vertical-tabs .tab-btn:hover {
  opacity: 0.85;
}

/* Tab content */
.custom-vertical-tabs .tab-panel {
  display: none;
}

.custom-vertical-tabs .tab-panel.active {
  display: block;
}

/* RTL */

html[dir="rtl"] .header_btn {
  float: left;
}