/* global.css */
/* ---------------------------------------------------- */
/* Color Variables (7-color cycle from the Opepen face) */
:root {
    --btn-color-1: #39FF14; /* Lime Green (cold) */
    --btn-color-2: #9D00FF; /* Purple (cold) */
    --btn-color-3: #FF4500; /* Orange Red (hot) */
    --btn-color-4: #F0E130; /* Yellow (hot) */
    --btn-color-5: #FF00FF; /* Magenta (hot) */
    --btn-color-6: #FF1493; /* Hot Pink (hot) */
    --btn-color-7: #00FFFF; /* Cyan (cold) */
  }
  
  /* Base reset */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Body & Font */
  body {
    font-family: 'Montserrat', sans-serif;
    background: #fff; /* White background */
    color: #000;      /* Black text */
    line-height: 1.6;
  }
  
  /* Header */
  header {
    position: relative;
    padding: 20px;
    background: #000; /* Black header */
    color: #fff;
    text-align: center;
  }
  
  /* Animated Rainbow Border on Header */
  header::before {
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 10px;
    background: linear-gradient(
      90deg,
      var(--btn-color-1),
      var(--btn-color-2),
      var(--btn-color-3),
      var(--btn-color-4),
      var(--btn-color-5),
      var(--btn-color-6),
      var(--btn-color-7)
    );
    background-size: 300%;
    z-index: -1;
    animation: borderScroll 10s linear infinite;
  }
  
  @keyframes borderScroll {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }
  
  /* Navigation Widget (Dropdown) in the upper right */
  .nav-widget {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  
  .nav-widget button {
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  
  .nav-widget button:hover {
    background: #333;
    transform: translateY(-2px);
  }
  
  /* Dropdown styling for menu options (multicolored) */
  .nav-dropdown {
    position: absolute;
    top: 45px;
    right: 0;
    border-radius: 5px;
    padding: 5px 0;
    min-width: 150px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    display: none;
  }
  
  .nav-dropdown.show {
    display: block;
  }
  
  .nav-dropdown a {
    display: block;
    text-decoration: none;
    padding: 10px 15px;
    border: 1px solid #000;
    font-size: 0.95em;
    color: #000;
    transition: background 0.2s;
  }
  
  /* Multicolor assignment for nav-dropdown items */
  .nav-dropdown a:nth-child(1) {
    background: var(--btn-color-1);
  }
  .nav-dropdown a:nth-child(2) {
    background: var(--btn-color-2);
  }
  .nav-dropdown a:nth-child(3) {
    background: var(--btn-color-3);
  }
  .nav-dropdown a:nth-child(4) {
    background: var(--btn-color-4);
  }
  .nav-dropdown a:nth-child(5) {
    background: var(--btn-color-5);
  }
  .nav-dropdown a:hover {
    background: #555;
  }
  
  /* Header Content: Logo + Text/Buttons side by side */
  .header-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; /* Center them horizontally */
    align-items: center;     /* Vertically center the logo & text */
    margin-top: 20px;
  }
  
  /* Logo on the left, enlarged */
  .header-logo {
    max-width: 200px;
  }
  
  /* Text & Buttons container on the right */
  .text-and-buttons {
    display: flex;
    flex-direction: column;
    align-items: center; /* Keep text & buttons centered */
    gap: 10px;
  }
  
  /* Action Buttons in Header */
  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
  
  .action-buttons a {
    display: inline-block;
    color: #000;
    border: 1px solid #000;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
    transition: transform 0.2s;
  }
  
  /* Fixed colors for each action button */
  .action-buttons a:nth-child(1) {
    background: var(--btn-color-1);
  }
  .action-buttons a:nth-child(2) {
    background: var(--btn-color-2);
  }
  .action-buttons a:nth-child(3) {
    background: var(--btn-color-3);
  }
  .action-buttons a:nth-child(4) {
    background: var(--btn-color-4);
  }
  .action-buttons a:nth-child(5) {
    background: var(--btn-color-5);
  }
  .action-buttons a:nth-child(6) {
    background: var(--btn-color-6);
  }
  .action-buttons a:nth-child(7) {
    background: var(--btn-color-7);
  }
  
  .action-buttons a:hover {
    transform: translateY(-2px);
  }
  
  /* Info + Carousel Section (side-by-side) */
  .info-carousel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;
  }
  
  .info-block {
    flex: 1;
    min-width: 300px;
    text-align: left;
  }
  
  .info-block h2 {
    margin-bottom: 15px;
  }
  
  .info-block ul {
    list-style: disc;
    margin-left: 20px;
    line-height: 1.6;
  }
  
  /* Carousel Container (Right) */
  .carousel-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    max-width: 600px; /* Adjust as needed */
    margin: 0 auto;
  }
  
  .carousel-track-container {
    overflow: hidden;
    width: 80%;
    border: 1px solid #000;
    border-radius: 5px;
  }
  
  .carousel-track {
    display: flex;
    transition: transform 0.4s ease;
  }
  
  .carousel-image {
    min-width: 100%;
    object-fit: cover;
  }
  
  /* Carousel Arrow Buttons */
  .arrow-btn {
    background: #000;
    color: #fff;
    border: 1px solid #fff;
    font-size: 1.5rem;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 10px;
    transition: background 0.2s, transform 0.2s;
  }
  
  .arrow-btn:hover {
    background: #333;
    transform: translateY(-2px);
  }
  
  /* Tools Page: Grid Layout for Tools */
  .tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 20px;
  }
  
  .tool-card {
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 15px;
    flex: 1 1 250px; /* Min width for each card */
    text-align: center;
  }
  
  .tool-thumb {
    width: 256px;    /* Fixed width of 256px */
    height: auto;    /* Preserve aspect ratio */
    border-radius: 3px;
    margin: 0 auto 10px;
    display: block;
  }
  
  .tool-card h3 {
    margin: 10px 0 5px 0;
  }
  
  .tool-card p {
    margin: 5px 0;
  }
  
  .tool-card a {
    display: inline-block;
    background: #000;
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 5px;
    margin-top: 10px;
  }
  
  .tool-card a:hover {
    background: #333;
  }
  
  /* Main Container */
  .container {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    text-align: left;
  }
  
  /* Footer */
  footer {
    background: #000;
    color: #fff;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
  }
  
  footer a {
    color: #fff;
    text-decoration: underline;
  }

  /* Launch Chat-Pepen Button */
.launch-btn {
  display: inline-block;
  background: var(--btn-color-3); /* Choose one of your palette colors */
  color: #000;
  border: 1px solid #000;
  padding: 12px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 1.2em;
  transition: background 0.2s, transform 0.2s;
}

.launch-btn:hover {
  background: #FF4500; /* Slightly darker shade */
  transform: translateY(-2px);
}