/* ==========================================================================
   Ope'Base Showcase Site Style
   ========================================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;700&display=swap');
      
   :root {
       --primary-bg: #232124;
       --secondary-bg: #2e2b2f;
       --card-bg: #4a464e;
       --card-bg-darker: #3a373e; /* For "soon" features */
       --accent-color: #9457eb;
       --accent-color-bright: #bd9deb;
       --text-color: #ffffff;
       --text-muted: #cccccc;
       --border-color: #555;
       --github-btn-bg: #333;
       --github-btn-hover-bg: #444;
       --font-family-main: "Comfortaa", sans-serif;
       --font-family-logo: "Lilita One", sans-serif;
       --transition-speed: 0.3s;

       /* Primary Button Colors */
       --btn-primary-bg-color: var(--accent-color);
       --btn-primary-text-color: var(--text-color);
       --btn-primary-border-color: var(--accent-color);
       --btn-primary-hover-bg-color: var(--accent-color-bright);
       --btn-primary-hover-text-color: var(--primary-bg);
       --btn-primary-hover-border-color: var(--accent-color-bright);

       /* Secondary Button Colors */
       --btn-secondary-bg-color: transparent;
       --btn-secondary-text-color: var(--accent-color-bright);
       --btn-secondary-border-color: var(--accent-color-bright);
       --btn-secondary-hover-bg-color: var(--accent-color-bright);
       --btn-secondary-hover-text-color: var(--primary-bg);
       --btn-secondary-hover-border-color: var(--accent-color-bright);

       /* GitHub Button Colors */
       --btn-github-bg-color: var(--github-btn-bg);
       --btn-github-text-color: var(--text-color);
       --btn-github-border-color: var(--github-btn-bg);
       --btn-github-hover-bg-color: var(--github-btn-hover-bg);
       --btn-github-hover-text-color: var(--text-color);
       --btn-github-hover-border-color: var(--github-btn-hover-bg);

       /* CTA Button (Primary variant on CTA section) Colors */
       --btn-cta-primary-bg-color: var(--text-color);
       --btn-cta-primary-text-color: var(--accent-color);
       --btn-cta-primary-border-color: var(--text-color);
       --btn-cta-primary-hover-bg-color: var(--primary-bg);
       --btn-cta-primary-hover-text-color: var(--text-color);
       --btn-cta-primary-hover-border-color: var(--primary-bg);
   }
      
   * { margin: 0; padding: 0; box-sizing: border-box; }
   html { scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
   html::-webkit-scrollbar { display: none; }
   body {
       font-family: var(--font-family-main); color: var(--text-color); background-color: var(--primary-bg);
       line-height: 1.6; font-size: 16px; overflow-x: hidden; overflow-y: auto;
   }
   .container { width: 90%; max-width: 1160px; margin: 0 auto; padding: 0 15px; }
   img { max-width: 100%; height: auto; display: block; }
   a { color: var(--accent-color-bright); text-decoration: none; transition: color var(--transition-speed) ease; }
   a:hover { color: var(--accent-color); }
   h2 { font-size: 2.2em; color: var(--accent-color); text-align: center; margin-bottom: 40px; }
   h3 { font-size: 1.5em; color: var(--accent-color-bright); }
   p { margin-bottom: 1em; color: var(--text-muted); }
   section p { font-size: 1.1em; }
   
   .top-logo-container {
       padding: 100px 20px 0px 0px; background-color: var(--primary-bg); display: flex;
       align-items: center; justify-content: center; gap: 20px;
   }
   .main-logo-img { height: 250px; }
   .top-logo-container h1 {
       font-family: var(--font-family-logo); font-size: 8em;
       background: linear-gradient(45deg, white 0%, var(--accent-color) 100%);
       background-clip: text;
       -webkit-background-clip: text; /* For Safari/Chrome */
       color: transparent;
       margin-bottom: 0; font-weight: normal; text-transform: uppercase;
   }
      
   /*? Floating Navigation - Thinner and More Transparent
      ========================================================================== */
   .floating-nav {
       position: fixed; top: 50%; right: 10px; transform: translateY(-50%);
       background-color: rgba(46, 43, 47, 0.7); 
       backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
       padding: 10px 8px; 
       border-radius: 8px; 
       box-shadow: 0px 4px 15px rgba(0,0,0,0.35); 
       z-index: 1000;
       width: 50px; 
       transition: all 0.3s ease;
   }
   .floating-nav:hover {
       width: 180px; 
   }
   .floating-nav:hover .btn-launch-sidebar {
       width: 100%; 
   }

   .floating-nav ul { list-style: none; padding: 0; margin: 0; }
   
   .floating-nav ul li a {
       display: flex;
       align-items: center;
       margin-bottom: 4px; 
       white-space: nowrap;
       position: relative;
       text-decoration: none;
       width: 100%; 
       justify-content: center; 
   }

   .floating-nav ul li a:not(.btn) {
       padding-top: 8px;    
       padding-bottom: 8px; 
       padding-left: 0;     
       padding-right: 0;    
       color: var(--text-muted);
       transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, padding var(--transition-speed) ease;
       border-radius: 5px; 
   }
   
   .floating-nav ul li a.btn-launch-sidebar {
        padding-left: 0;
        padding-right: 0;
        /* MODIFIED: Adjust vertical padding to account for border, ensuring alignment */
        padding-top: 6px;
        padding-bottom: 6px;
        gap: 0; 
   }

   .floating-nav ul li a:not(.btn)::before {
       content: ''; position: absolute; left: 0px; top: 50%; transform: translateY(-50%);
       width: 3px; 
       height: 0; background-color: var(--accent-color-bright);
       border-radius: 0 2px 2px 0; opacity: 0;
       transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out;
   }
   
   .floating-nav ul li a:not(.btn).active::before,
   .floating-nav ul li a:not(.btn):hover::before {
      height: 24px; 
      opacity: 1;
   }
   
   .floating-nav ul li a:not(.btn).active,
   .floating-nav ul li a:not(.btn):hover {
       background-color: var(--accent-color);
       color: var(--text-color);
   }

   .floating-nav:hover ul li a {
       justify-content: flex-start; 
   }

   .floating-nav:hover ul li a:not(.btn) {
       padding-left: 10px;  
       padding-right: 10px; 
   }

   .floating-nav:hover ul li a.btn-launch-sidebar {
       padding-left: 28px; 
       padding-right: 28px; 
       /* MODIFIED: Adjust vertical padding to account for border, ensuring alignment */
       padding-top: 6px;
       padding-bottom: 6px;
       gap: 8px; 
   }
   
   .nav-icon {
       font-size: 1.3em; 
       display: inline-flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       transition: transform 0.2s ease;
       flex-shrink: 0; 
   }

   .floating-nav ul li a:hover .nav-icon {
        transform: scale(1.1);
   }
   
   .nav-text {
       font-size: 0.85em; 
       font-weight: bold;
       max-width: 0;
       margin-left: 0;
       opacity: 0;
       overflow: hidden;
       white-space: nowrap; 
       transition: max-width 0.3s ease-in-out, margin-left 0.3s ease-in-out, opacity 0.3s ease-in-out 0.05s;
   }
   .floating-nav:hover .nav-text {
       max-width: 115px; 
       margin-left: 8px; 
       opacity: 1;
   }

   .floating-nav:hover ul li a.btn-launch-sidebar .nav-text {
       margin-left: 0; 
   }
   
   .floating-nav .launch-app-item {
       margin-top: 10px; 
       padding-top: 10px; 
       border-top: 1px solid var(--border-color);
   }
      
   /*? Buttons (general & specific)
      ========================================================================== */
   .btn {
       display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       padding: 12px 28px; font-family: var(--font-family-main); font-weight: bold;
       text-align: center; border-radius: 8px; cursor: pointer;
       transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease, transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease, padding var(--transition-speed) ease, gap var(--transition-speed) ease;
       border: 2px solid transparent; font-size: 1em;
       text-decoration: none;
   }
   .btn-primary, .main-launch-btn {
       background-color: var(--btn-primary-bg-color);
       color: var(--btn-primary-text-color);
       border-color: var(--btn-primary-border-color);
       box-shadow: 0 4px 15px rgba(148, 87, 235, 0.3);
   }
   .btn-primary:hover, .main-launch-btn:hover {
       background-color: var(--btn-primary-hover-bg-color);
       color: var(--btn-primary-hover-text-color);
       border-color: var(--btn-primary-hover-border-color);
       transform: translateY(-2px);
       box-shadow: 0 6px 20px rgba(189, 157, 235, 0.4);
   }
   .btn-secondary {
       background-color: var(--btn-secondary-bg-color);
       color: var(--btn-secondary-text-color);
       border: 2px solid var(--btn-secondary-border-color);
   }
   .btn-secondary:hover {
       background-color: var(--btn-secondary-hover-bg-color);
       color: var(--btn-secondary-hover-text-color);
       border-color: var(--btn-secondary-hover-border-color);
       transform: translateY(-2px);
   }
   .btn-github {
       background-color: var(--btn-github-bg-color);
       color: var(--btn-github-text-color);
       border: 2px solid var(--btn-github-border-color);
   }
   .btn-github:hover {
       background-color: var(--btn-github-hover-bg-color);
       color: var(--btn-github-hover-text-color);
       border-color: var(--btn-github-hover-border-color);
       transform: translateY(-2px);
   }
   .github-icon { width: 1.2em; height: 1.2em; fill: currentColor; }
   .btn-large { padding: 15px 35px; font-size: 1.1em; }
   
   #hero {
       min-height: calc(100vh - 250px); padding-top: 0px; display: flex;
       align-items: center; justify-content: center; text-align: center;
       background: var(--primary-bg) url('https://via.placeholder.com/1920x1080/232124/111111?text=Abstract+Background') no-repeat center center/cover;
       position: relative;
   }
   #hero::before {
       content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
       background-color: rgba(35, 33, 36, 0.7);
   }
   .hero-content { position: relative; z-index: 1; }
   #hero h2 { font-size: 3.5em; color: var(--text-color); margin-bottom: 0.5em; text-shadow: 2px 2px 8px rgba(0,0,0,0.5); }
   #hero .subtitle { font-size: 1.4em; color: var(--text-muted); max-width: 700px; margin: 0 auto 30px auto; }
   .hero-buttons {
       display: flex; flex-wrap: wrap; justify-content: center;
       gap: 15px; margin-top: 20px;
   }
   .hero-buttons .btn { margin: 0; }
   
   section { padding: 80px 0; }
   #about { background-color: var(--secondary-bg); }
   #features { background-color: var(--primary-bg); }
   
   .about-content { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
   .about-text { flex: 1; min-width: 300px; }
   .about-image { flex: 1; min-width: 300px; text-align: center; }
   .about-image img { border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 500px; width: 100%; margin: 0 auto; }
   
   .feature-showcase-item {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 40px;
       margin-bottom: 60px;
       padding: 30px;
       border-radius: 12px;
       background-color: var(--card-bg);
       box-shadow: 0 8px 25px rgba(0,0,0,0.15);
   }
   .feature-showcase-item:last-child {
       margin-bottom: 0;
   }
   
   .feature-showcase-text,
   .feature-showcase-image {
       flex: 1;
       min-width: 300px;
   }
   
   .feature-showcase-text h3 {
       color: var(--accent-color-bright);
       font-size: 1.8em;
       margin-bottom: 15px;
   }
   .feature-showcase-text p {
       font-size: 1.05em;
       line-height: 1.7;
       color: var(--text-muted);
   }
   
   .feature-showcase-image img {
       border-radius: 8px;
       width: 100%;
       height: auto;
       box-shadow: 0 5px 15px rgba(0,0,0,0.2);
   }
   
   .feature-showcase-item.reverse {
       flex-direction: row-reverse;
   }

   /* Styling for "soon to come" features */
   .feature-showcase-item.soon {
       background-color: var(--card-bg-darker);
   }

    /* Styling for "And much more to come..." divider */
    .features-divider {
        margin: 50px 0; /* Adjust vertical spacing */
    }

    .features-divider hr {
        border: none;
        height: 1px;
        background-color: var(--border-color); /* Or var(--accent-color) for more pop */
        margin: 20px auto;
        width: 50%; /* Adjust width as preferred */
    }

    .features-divider .text-center {
        text-align: center;
        font-style: italic;
        color: var(--accent-color-bright); /* Make it stand out */
        font-size: 1.25em; /* Slightly larger */
        font-weight: bold;
        letter-spacing: 0.5px;
        margin: 25px 0; /* Vertical margin for the text itself */
    }


   /*? Themes Section
   ========================================================================== */
    #themes-gallery {
        background-color: var(--secondary-bg); /* Alternating background */
        padding: 80px 0;
    }

    #themes-gallery h2 {
        /* Global h2 styles apply, can override if needed */
        margin-bottom: 50px; 
    }

    .themes-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }

    .theme-card {
        background-color: var(--card-bg);
        border-radius: 12px;
        overflow: hidden; /* Clips the image to the card's border-radius */
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        display: flex;
        flex-direction: column;
        transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    }

    .theme-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    }

    .theme-card img {
        width: 100%;
        height: 200px; 
        object-fit: cover; /* Ensures image covers the area, might crop */
        display: block; /* Removes any extra space below the image */
    }

    .theme-card .theme-info {
        padding: 20px;
        flex-grow: 1; /* Allows this section to grow, pushing button down */
        display: flex;
        flex-direction: column;
    }

    .theme-card h3 {
        font-size: 1.6em; /* Slightly larger than default h3 */
        color: var(--accent-color-bright);
        margin-bottom: 8px;
    }

    .theme-card .theme-author {
        font-size: 0.9em; /* Smaller than section p */
        color: var(--text-muted);
        margin-bottom: 15px;
        flex-grow: 1; /* Ensures space above button expands if content is short */
    }

    .btn-download-theme {
        /* Inherits from .btn and .btn-primary */
        padding: 10px 20px; /* Slightly smaller padding for card buttons */
        font-size: 0.95em;
        margin-top: auto; /* Pushes button to the bottom of .theme-info */
        align-self: flex-start; /* Aligns button to the left */
    }

   /*? End of Themes Section */
   
   #cta { text-align: center; background-color: var(--accent-color); }
   #cta h2 { color: var(--text-color); margin-bottom: 20px; }
   #cta p { color: var(--accent-color-bright); font-size: 1.2em; margin-bottom: 30px; }
   #cta .btn-primary {
       background-color: var(--btn-cta-primary-bg-color);
       color: var(--btn-cta-primary-text-color);
       border-color: var(--btn-cta-primary-border-color);
       box-shadow: 0 4px 15px rgba(0,0,0, 0.2);
   }
   #cta .btn-primary:hover {
       background-color: var(--btn-cta-primary-hover-bg-color);
       color: var(--btn-cta-primary-hover-text-color);
       border-color: var(--btn-cta-primary-hover-border-color);
       box-shadow: 0 6px 20px rgba(0,0,0, 0.3);
   }
   footer { background-color: var(--secondary-bg); color: var(--text-muted); text-align: center; padding: 30px 0; font-size: 0.9em; }
   footer p { margin-bottom: 0.5em; color: var(--text-muted); }
   
   
   /*? Responsive Design
      ========================================================================== */
   @media (max-width: 768px) {
       .top-logo-container { flex-direction: column; gap: 10px; padding: 20px; }
       .main-logo-img { height: 70px; }
       .top-logo-container h1 { font-size: 2.8em; text-align: center; }
      
       .floating-nav {
            right: 5px; 
            padding: 8px 6px; 
       }
       .nav-icon { 
           font-size: 1.3em; 
           min-width: 20px; 
           width: 20px;     
           height: 20px;    
       } 
       .floating-nav ul li a:not(.btn).active::before,
       .floating-nav ul li a:not(.btn):hover::before { 
           height: 20px; 
       }
       .floating-nav:hover {
           width: 150px; 
       }
       .floating-nav:hover .nav-text {
            max-width: 90px; 
            margin-left: 6px; 
       }
       .floating-nav:hover ul li a.btn-launch-sidebar .nav-text {
           margin-left: 0; 
       }
      
       #hero { min-height: calc(100vh - 180px); }
       #hero h2 { font-size: 2.5em; }
       .hero-buttons { flex-direction: column; align-items: center; }
       .hero-buttons .btn { width: 80%; max-width: 300px; }
      
       .about-content { flex-direction: column; }
       .about-image { order: -1; margin-bottom: 20px; }
   
       .feature-showcase-item,
       .feature-showcase-item.reverse {
           flex-direction: column;
           gap: 30px;
           padding: 20px;
       }
       .feature-showcase-item.reverse .feature-showcase-image {
            order: -1;
       }
       .feature-showcase-text h3 {
           text-align: center;
           font-size: 1.6em;
       }
       .feature-showcase-text {
           text-align: center;
       }

       .features-divider {
           margin: 40px 0;
       }
       .features-divider hr {
           width: 70%;
       }
       .features-divider .text-center {
           font-size: 1.15em;
       }

       .themes-grid {
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust minmax for smaller screens */
           gap: 20px;
       }
       .theme-card h3 {
           font-size: 1.4em;
       }
   }
      
   @media (max-width: 480px) {
       .top-logo-container h1 { font-size: 2.2em; }
       .main-logo-img { height: 60px; }
      
       .floating-nav { 
           padding: 6px 5px; 
       }
       .floating-nav:hover {
           width: 50px; 
       }
       .floating-nav:hover .nav-text { 
           display: none; 
       }

       .nav-icon { 
           font-size: 1.3em;
           min-width: 20px;
           width: 20px;
           height: 20px;
       }  
       .floating-nav ul li a:not(.btn).active::before,
       .floating-nav ul li a:not(.btn):hover::before {
           left: -5px; 
           height: 18px; 
       }
      
       #hero h2 { font-size: 2em; }
       .hero-buttons .btn { width: 90%; }

       .features-divider hr {
           width: 80%;
       }
       .features-divider .text-center {
           font-size: 1.1em;
       }

       .themes-grid {
           grid-template-columns: 1fr; /* Single column for very small screens */
       }
       .theme-card img {
           height: 180px; /* Adjust image height for smaller cards */
       }
   }