/* GLOBAL */
		
		
		body {
		     margin: 0;
		      font-family: "Inter", "Segoe UI", sans-serif;
		      background: #0e0e12;
		      color: #f0f0f5;
		      line-height: 1.6;
		      justify-content: center;
		    align-items: center;
		    text-align: center;
		}
		
		a {
		    color: #aabfff;
		    text-decoration: none; /* Removed underline by default */
		}
		
		a:hover {
		    color: #ffffff;
		    text-decoration: underline;
		}
		
		/* MAIN CONTAINER */
		.main-container {
		    max-width: 960px;
		    margin: 0 auto;
		    display: flex;
		    flex-direction: column; /* stack children vertically */
		    justify-content: center;
		    align-items: center;
		    text-align: center;
		    width: 100%; /* ensures it scales on mobile */
		}
		
		.main-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 2rem;
      background: #141418;
      border-bottom: 1px solid #1f1f28;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .main-nav .brand {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 600;
      font-size: 1.2rem;
      color: #aabfff;
    }
    .main-nav img {
      height: 28px;
      width: 28px;
    }
    .main-nav a {
      margin-left: 1.5rem;
      font-size: 0.95rem;
      color: #e0e0e5;
    }
    .main-nav a:hover { color: #aabfff; }
		
		.brand-logo {
		    width: 24px;
		    height: 24px;
		}
		
		/* HEADER */
		.header-nav {
		    display: flex;
		    flex-direction: column; /* Stack vertically */
		    align-items: center;
		    text-align: center;
		    margin-bottom: 20px;
		    gap: 15px;
		}
		
		.header-nav h1 {
		    margin: 0;
		    font-size: 1.8rem; /* Adjusted for mobile */
		  }
		
		h1 {
		    font-size: 2.2em; /* Adjusted for mobile */
		    margin: 0;
		    background: linear-gradient(45deg, #aabfff, #ffffff);
		    -webkit-background-clip: text;
		    -webkit-text-fill-color: transparent;
		}

		h2 {
			margin-top: 20px;
         
			font-size: 1.8em; /* Adjusted for mobile */
		}
		
		/* NAV */
		.nav-links {
		    display: none;
		    flex-direction: column;
		    justify-content: flex-end;
		    gap: 15px; /* Increased gap for better spacing */
		    align-items: center;
		    flex-wrap: wrap;
		    margin-top: 15px;
		}
		
		/* BUTTONS */
		.deep-btn {
		    cursor: pointer;
		    background: #888;
		    color: white;
		    padding: 6px 14px;      /* Reduces the space inside the button. (Top/Bottom, Left/Right) */
  			font-size: 0.9rem; 
		    border-radius: 25px;
		    text-decoration: none;
		    font-weight: 600;
		    
		    box-shadow: 0 4px 15px rgba(0,0,0,0.4); /* Adjusted shadow */
		    transition: all 0.3s ease;
		    display: inline-block;
		    margin-top: 15px;
		    border: none; /* remove default border */
		    width: 70%; /* Make buttons wider on mobile */
		    max-width: 300px; /* Set a max-width */
		}
		.submit-btn {
		    cursor: pointer;
		    background: #888;
		    color: white;
		    
		    padding: 14px 22px; /* Slightly larger for easier tapping */
		    border-radius: 25px;
		    text-decoration: none;
		    font-weight: 600;
		    box-shadow: 0 4px 15px rgba(0,0,0,0.4); /* Adjusted shadow */
		    transition: all 0.3s ease;
		    display: inline-block;
		    margin-top: 30px;
		    margin-bottom: 20px; /* Add some space below */
		    border: none; /* remove default border */
		    width: 70%; /* Make buttons wider on mobile */
		    max-width: 300px; /* Set a max-width */
		}
		
		.deep-btn:hover, .submit-btn:hover {
		    transform: translateY(-2px);
		    box-shadow: 0 10px 25px rgba(0,0,0,0.5); /* Adjusted shadow */
		}

		.submit-btn:disabled {
			background-color: #555;
			cursor: not-allowed;
			transform: none;
			box-shadow: 0 4px 15px rgba(0,0,0,0.4);
		}
		
		.upload-section{
		    background: transparent;
		    border-radius: 20px;
		     /* Uniform padding */
		    margin-bottom: 10px;
			box-shadow: 0 10px 30px rgba(0,0,0,0.3);

		    margin: 10px auto; /* Center the whole component on the page */
		    
		}
		/* HERO & UPLOAD SECTION */
		.hero-section, .about-section, #resultsContainer {
		  	padding: 1rem; /* Add generous padding on all sides */
		
		    position: relative; 
		    background: transparent;
		    border-radius: 20px;
		    
		    margin-bottom: 10px;
/* 		    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
 */		    
		    margin: 60px auto; /* Center the whole component on the page */
		    
		}
		
		.tab-container {
		  margin-bottom: 30px;
		  width: 100%;
		  max-width: 900px;
		  margin-left: auto;
		  margin-right: auto;
		  background: rgba(18, 18, 18, 0.7);
		  border-radius: 20px;
		  padding-top: 90px;
		  padding-bottom: 80px;
		  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		  overflow: hidden;
		  position: relative;
		}
		
		
		
		.tabs {
		  display: flex;
		  flex-direction: row;
		  
		  
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 60px;
		  border-top-left-radius: 20px;
		  border-top-right-radius: 20px;
		  
		  
		  background-color: #1f1f1f;
		}
		
		.tab-btn {
		  flex: 1;
		  width:100%; /* Make buttons fill the available space */
		  background: #2a2a2a;
		  color: #e0e0e0;
		  border: none;
		  border-right: 1px solid #444;
		  padding: 15px 20px;
		  cursor: pointer;
		  font-weight: 600;
		  text-align: center;
		  transition: background 0.3s ease;
		}
		
		
		
		.tab-btn:last-child {
		  border-right: none; /* Remove divider on last button */
		}
		
		.tab-btn.active {
		  background: #3a3a3a;
		  border-bottom: 3px solid #888;
		}
		
		.tab-btn:hover {
		  background: #333;
		}
		
		.tab-content {
		  display: none;
		  min-height: 400px;
		  margin-top: 30px;
		  width: 100%;
		}
		
		.tab-content.active {
		  display: block;
		}
		
		.tab-description {
		  color: #aaa;
		  margin-bottom: 20px;
		  font-size: 1.1em;
		}
		
		.badge {
		  font-size: 0.7em;
		  background: #444;
		  padding: 3px 8px;
		  border-radius: 12px;
		  margin-left: 8px;
		}
		
		.premium-btn {
		  background: linear-gradient(45deg, #888, #aaa);
		  color: #fff;}
			

		/* .upload-section {
			padding-top: 20px;
			padding-bottom: 10px;
		} */
		
		.about-section h2{
		background: #121212;
		}
		
		.input-group {
		    max-width: 600px; /* or whatever makes sense */
		    margin: 0 auto;   /* center on screen */
		}

		.input-label {
		    font-size: 1.1em;
		    font-weight: 600;
		    color: #e0e0e0;
		    margin-bottom: 10px;
		    display: block;
		}
		
		.promo-label {
		    display: flex;
		    justify-content: center;
		    flex-direction: column;
		    align-items: center;
		    width: 100%; /* prevents collapsing on mobile */
		    margin: 10px 0;
		}
		
		.promo-label p{
			font-size: 1.1em;
		    font-weight: 600;
		    color: #e0e0e0;
		    margin-bottom: 10px;
		    margin: 0 0 10px 0;
		    display: block;
		}
		
		.promo-label h3{
			font-size: 1.8em; /* Adjusted for mobile */
		    margin: 0;
		    background: linear-gradient(45deg, #aabfff, #ffffff);
		    -webkit-background-clip: text;
		    -webkit-text-fill-color: transparent;
		}
		
		.promo-label button {
				display: inline-flex;       /* safe for text + icon alignment */
			    align-items: center;
			    justify-content: center;
			    flex-shrink: 1; /* Prevents shrinking */
			    flex-grow: 0; /* Prevents growing */
			    flex-direction: row; /* Aligns text and icon horizontally */
			    padding: 8px 16px;
			    font-size: 1em;
			    font-weight: 600;
			    color: white;
			    background: #7289da;
			    border: none;
			    border-radius: 25px;
			    cursor: pointer;
			    white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    max-width: 90vw;            /* never exceed viewport */
            
        }
        .promo-label button span {
		    flex-shrink: 1;          /* text shrinks instead of button growing */
		    white-space: nowrap;
		    overflow: hidden;
		    text-overflow: ellipsis;
		}
        
        .promo-label button:hover {
               background: rgb(104, 102, 104);
               box-shadow: 0 4px 15px rgba(0,0,0,0.4);
        }
        
        .promo-label button img {
            	width: 20px !important;     /* force fixed width */
			    height: 20px !important;    /* force fixed height */
			    flex-shrink: 1; 
			    flex-grow: 0;            /* prevents image from shrinking/growing */
			    object-fit: contain;        /* preserves aspect ratio */
			    display: inline-block;
			    vertical-align: middle;
			    margin-right: 8px;
			    background: transparent;    /* ensures no white box */
        }
                            
        
		
		.url-input {
		    width: 100%;       /* fill parent */
		    max-width: 600px;  /* optional max width */
		    box-sizing: border-box; /* includes padding in width */
		    padding: 15px;
		    font-size: 1em;
		    border: 2px solid #333;
		    border-radius: 10px;
		    background: #2a2a2a;
		    color: #f0f0f0;
		}
		
		input[type="file"] {
		    display: none; /* Keep this hidden */
		}
		
		.url-input:focus {
		    border-color: #888;
		    background: #2f2f2f;
		}
		
		.image-container {
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    height: 70vh; /* This makes each section take up the full height of the viewport */
		    opacity: 0; /* Start with the image hidden */
		    transition: opacity 1.2s ease-in-out; /* Slower fade for a more dramatic effect */
		    transform: scale(0.9); /* Start slightly smaller */
		    transition: opacity 1.2s ease-in-out, transform 1s ease-in-out;
		}
		
		.image-container.visible {
		    opacity: 1; /* Make the image visible */
		    transform: scale(1); /* Scale to normal size */
		}
		
		/* --- REVISED IMAGE STYLING --- */
		img {
		    /* First, define the maximum "box" or "frame" the image can occupy. */
		    width: 90vw;   /* It can be up to 90% of the viewport's width. */
		    height: 90vh;  /* It can be up to 90% of the viewport's height. */
		
		    /* This is the key property. It does two things:
		       1. Respects the image's original aspect ratio.
		       2. Scales the image down until it fits completely inside the box defined above (90vw x 90vh). */
		    object-fit: contain;
		}
		
		.custom-file-upload {
		  display: inline-block;
		  background-color: #2a2a2a;
		  color: #f0f0f0;
		  padding: 12px 18px; /* Easier to tap */
		  border-radius: 10px; /* Match input fields */
		  cursor: pointer;
		  font-size: 1em;
		  border: 1px solid #444;
		  transition: background 0.2s;
		  width: 90%; /* Consistent width */
    	  max-width: 300px; /* Consistent max-width */
		}
		
		.custom-file-upload:hover {
		  background-color: #3a3a3a;
		}
		
		/* DIVIDER */
		.divider {
		    text-align: center;
		    margin: 25px 0;
		    color: #999;
		    font-weight: 600;
		    position: relative;
		}
		
		.divider::before {
		    content: '';
		    position: absolute;
		    top: 50%;
		    left: 5%; /* Don't stretch full width */
		    right: 5%;
		    height: 1px;
		    background: #444;
		    z-index: 1;
		}
		
		.divider span {
		    background: #121212;
		    padding: 0 15px; /* Reduced padding */
		    position: relative;
		    z-index: 2;
		}
		
		.terms-text {
		    display: block; /* forces it onto a new line */
		    margin-top: 8px; /* optional spacing */
		    font-size: 0.85em; /* optional styling */
		    color: #666; /* optional styling */
		}
		
		/* STATUS */
		#deepStatus, #quickStatus {
		    padding: 15px;
		    background: #222;
		    border-left: 4px solid #888;
		    margin-top: 5px;
			margin-bottom: 50px;
		    font-size: 1em;
		    color: #ddd;
		    border-radius: 10px;
		    font-weight: 500;
		    line-height: 1.5;
		}
		
		/* RESULTS */
		#deepResultsContainer, #quickResultsContainer {
		    padding: 20px; /* Adjusted padding */
		    margin-top: 10px;
		    display: none;
		    overflow-y: auto; /* Add scrolling for overflow content */
		    
		}
		
		#quickResultsHeader, #deepResultsHeader {
		    font-size: 1.4em;
		    font-weight: 700;
		    margin-top: 20px;
		    margin-bottom: 10px;
		    color: #fff;
		    display: flex;
		    flex-direction: column; /* Stack header items */
		    justify-content: center;
		    align-items: center;
		    gap: 10px;
		}
		
		.result {
			padding: 20px;
		    border-bottom: 1px solid #333;
		    font-size: 1em;
		    border-radius: 10px;
		    max-height: 400px; /* Limit height for better mobile view */
		}
		
		.result:hover {
		    background: #2a2a2a;
		    transform: scale(1.02); /* Use scale instead of translate for better mobile feel */
		}

		.result a {
			display: flex;
			align-items: center;
			gap: 15px;
		}

		.result img {
		    width: 50px; /* Smaller image size for mobile */
            height: auto;
            object-fit: flex;
            border-radius: 8px;
			   
		}
		
		.result strong {
		    color: #eee;
		    display: block;
		}
		
		.hidden-result-folder {
		    border: 1px solid #444;
		    padding: 8px;
		    margin: 10px;
		    border-radius: 6px;
		    background-color: #1e1e1e;
		    color: #f0f0f0;
		}
		
		.hidden-folder-content {
		    display: block;
		}
		.hidden-result-folder.collapsed .hidden-folder-content {
		    display: none;
		}
		
		.hidden-folder-title {
		    cursor: pointer;
		    font-weight: bold;
		}
		
		.hidden-folder-icon {
		    width: 32px;
		    height: auto;
		    object-fit: contain;
		    margin-right: 8px;
		    vertical-align: middle;
		    border-radius: 4px;
		    filter: blur(6px);
  			opacity: 0.6;
		}
		
		.result-folder {
		    border: 1px solid #444;
		    padding: 8px;
		    margin: 10px;
		    border-radius: 6px;
		    background-color: #1e1e1e;
		    color: #f0f0f0;
		}
		
		.folder-content {
		    display: block;
		}
		.result-folder.collapsed .folder-content {
		    display: none;
		}
		
		.folder-title {
		    cursor: pointer;
		    font-weight: bold;
		}
		
		.folder-icon {
		    width: 32px;
		    height: auto;
		    object-fit: contain;
		    margin-right: 8px;
		    vertical-align: middle;
		    border-radius: 4px;
		}
		
		
		
		.result.locked {
			padding: 20px;
		    border-bottom: 1px solid #333;
		    font-size: 1em;
		    border-radius: 10px;
		    max-height: 400px; /* Limit height for better mobile view */
		}
		
		.result.locked:hover {
		    background: #2a2a2a;
		    transform: scale(1.02); /* Use scale instead of translate for better mobile feel */
		}

		.result.locked a {
			display: flex;
			align-items: center;
			gap: 15px;
		}

		.result.locked img {
		    width: 50px; /* Smaller image size for mobile */
            height: auto;
            object-fit: flex;
            border-radius: 8px;
            filter: blur(6px);
  			opacity: 0.6;
			   
		}
		
		.result.locked strong {
			display: block;
		    color: #eee;
		}
		
		
.folder-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 10px 0;
}

/* Left side: Results */
.results-list {
  flex: 1 1 50%;
  min-width: 260px;
}

/* Right side: Hero preview */
.hero-preview {
  flex: 1 1 40%;
  background: 0 4px 10px rgb(47, 47, 47);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-video {
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

.hero-preview h3 {
  margin: 8px 0 4px;
  font-size: 1.1rem;
  color: rgb(242, 242, 242);
}

.hero-preview p {
  font-size: 0.9rem;
  color: rgb(224, 224, 224);
  line-height: 1.4;
  max-width: 380px;
}
		
		
		.spinner-wrapper {
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  padding: 20px;
		}
		
		.spinner {
		  width: 40px;
		  height: 40px;
		  border: 4px solid rgba(0, 0, 0, 0.1);
		  border-top-color: #333;
		  border-radius: 50%;
		  animation: spin 0.8s linear infinite;
		}
		
		@keyframes spin {
		  to { transform: rotate(360deg); }
		}
		
		
		
		.usage-bar span {
		  font-weight: 500;
		}
		
		.usage-bar {
    background: rgb(38, 39, 39);
    color: rgb(124, 171, 192);
    font-size: 0.95rem;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.usage-bar-background {
    background: rgb(60, 60, 60); /* dark gray behind fill */
    border-radius: 8px;
    width: 100%;
    height: 10px;
    margin-top: 4px;
    overflow: hidden;
}

.usage-bar-fill {
    background-color: rgb(124, 171, 192);
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
}
		
		.share-bar {
		  display: flex;
		  gap: 12px;
		  margin-top: 20px;
		  flex-direction: row; 
		  justify-content: center;
		}
		
		.share-btn {
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  width: 44px;
		  height: 44px;
		  border-radius: 50%;
		  color: white;
		  font-size: 18px;
		  text-decoration: none;
		  transition: transform 0.2s, opacity 0.2s;
		}
		
		.share-btn:hover {
		  transform: scale(1.1);
		  opacity: 0.9;
		}
		
		/* Colors */
		.facebook { background: #3b5998; }
		.twitter  { background: #1da1f2; }
		.reddit   { background: #ff4500; }
		.copy     { background: #555; }
		
		video {
		    width: 100%;
		    max-height: 400px;
		    margin: 20px 0;
		    border-radius: 10px;
		    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
		}
		
		.trimming-controls h3,
		.payment-section h3 {
		    color: #f0f0f0;
		    margin-bottom: 20px;
		    font-size: 1.3em;
		}
		
		.noUi-connect {
		    background: #888;
		}
		
		.noUi-handle {
		    background: #2a2a2a;
		    border: 3px solid #333;
		    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
		}
		
		.frame-interval-section {
		  margin-top: 20px;
		}
		
		.interval-options {
		  display: flex;
		  justify-content: center;
		  gap: 1.5rem;
		  flex-wrap: wrap;
		}
		
		.interval-option {
		  display: flex;
		  flex-direction: column;
		  align-items: center;
		  text-align: center;
		  padding: 12px 16px;
		  border: 2px solid #ccc;
		  border-radius: 8px;
		  cursor: pointer;
		  transition: border-color 0.2s, background-color 0.2s;
		  width: 150px;
		  position: relative;
		}
		
		.interval-option input[type="radio"] {
		  position: absolute;
		  opacity: 0;
		  pointer-events: none;
		}
		
		.interval-option:hover {
		  border-color: #888;
		  background-color: #f9f9f9;
		}
		
		.interval-option:has(input[type="radio"]:checked) {
		  background-color: #2c2f33;
		  border-color: #007bff;
		  font-weight: bold;
		}
		
		.interval-option small {
		  display: block;
		  margin-top: 2px;
		  font-size: 0.75rem;
		  color: #666;
		}
		
		.time-display {
			justify-content: center;
		    display: grid;
		    grid-template-columns: repeat(3, auto);
		    gap: 10px;
		    margin: 10px 0;
		    text-align: center;
		}
		
		.time-item {
		    background: #2a2a2a;
		    padding: 10px 12px;
		    border-radius: 8px;
		    border: 1px solid #444;
		    min-width: 80px;
		}
		
		.time-label {
		    font-size: 0.8em;
		    color: #aaa;
		    margin-bottom: 3px;
		}
		
		.time-value {
		    font-size: 1em;
		    font-weight: 500;
		    color: #f0f0f0;
		}
		
		.price-display {
		    background: #2a2a2a;
		    color: white;
		    padding: 10px 15px;
		    border-radius: 10px;
		    text-align: center;
		    margin: 10px 0;
		    min-width: 120px;
		}
		
		.price-display .price-label {
		    font-size: 0.9em;
		    opacity: 0.8;
		    margin-bottom: 2px;
		}
		
		.price-display .price-value {
		    font-size: 1.4em;
		    font-weight: 600;
		}
		
		#card-element {
		    background: #2a2a2a;
		    padding: 15px;
		    border-radius: 10px;
		    border: 2px solid #444;
		    margin-bottom: 15px;
		    color: #f0f0f0;
		}
		
		#card-errors {
		    color: #f44336;
		    font-size: 0.9em;
		    margin-top: 10px;
		}
		
		.submit-btn {
		    width: 100%;
		    font-size: 1.2em;
		    padding: 15px 30px;
		    background: #888;
		    color: white;
		    border: none;
		    border-radius: 25px;
		    cursor: pointer;
		    font-weight: 600;
		    transition: all 0.3s ease;
		    margin-top: 20px;
		}
		
		.submit-btn:hover:not(:disabled) {
		    transform: translateY(-2px);
		    box-shadow: 0 10px 25px #2a2a2a;
		}
		
		.submit-btn:disabled {
		    background: #555;
		    cursor: not-allowed;
		    transform: none;
		    box-shadow: none;
		    opacity: 0.6;
		}
		
		.feedback-section {
		    background-color: #1e1e1e; /* Dark background */
		    color: #f1f1f1;           /* Light text */
		    padding: 20px;
		    border-radius: 10px;
		    max-width: 600px;
		    margin: 40px auto;
		    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
		    font-family: Arial, sans-serif;
		}
		
		/* Header styling */
		.feedback-section h2 {
		    font-size: 24px;
		    margin-bottom: 10px;
		    color: #ffffff;
		}
		
		/* Paragraph styling */
		.feedback-section p {
		    font-size: 16px;
		    color: #cccccc;
		    margin-bottom: 20px;
		}
		
		/* Textarea styling */
		#feedbackText {
		    width: 100%;
		    padding: 10px;
		    background-color: #2b2b2b;
		    color: #f1f1f1;
		    border: 1px solid #444;
		    border-radius: 6px;
		    resize: vertical;
		    font-size: 14px;
		    outline: none;
		}
	
		#feedbackText::placeholder {
		    color: #888;
		}
		
		
		.tooltip-wrapper {
		    position: relative;
		    display: inline-block;
		}
		
		.tooltip-wrapper::after {
		    content: attr(data-tooltip);
		    position: absolute;
		    bottom: 125%;
		    left: 50%;
		    transform: translateX(-50%);
		    background: #1f1f1f;
		    color: white;
		    padding: 6px 8px;
		    border-radius: 4px;
		    white-space: nowrap;
		    font-size: 12px;
		    opacity: 0;
		    pointer-events: none;
		    transition: opacity 0.2s;
		    z-index: 999;
		}
		
		.tooltip-wrapper:hover::after {
		    opacity: 1;
		}
		
		/* ABOUT SECTION & FEATURES */
		.about-section p, .faq-answer {
		    padding: 2rem; /* Add generous padding on all sides */
		
		    text-align: left; /* Justify can be hard to read on mobile */
		    background: #121212;
		}

		.about-section .flex-container {
		
			display: flex;
			flex-direction: column; /* Stack on mobile */
			align-items: center;
			text-align: center;
			gap: 15px;
		}

		.about-section .flex-container img {
			width: 120px; /* Smaller images on mobile */
			height: 120px;
		}

		.about-section .flex-container p {
		
			text-align: center; /* Center text when stacked */
		}

		/* FEATURES GRID - Switched to Flexbox for better wrapping behavior */
		.features-grid, .features-grid2 {
		    display: flex;
			flex-wrap: wrap;
			justify-content: center;
		    gap: 20px;
		    margin: 30px 0;
		}
		
		.feature-card {
		    background: #2a2a2a;
		    padding: 25px;
		    border-radius: 15px;
		    text-align: center;
		    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
		    transition: all 0.3s ease;
		    display: flex;
		    flex-direction: column;
		    justify-content: flex-start; /* Align content to top */
		    align-items: center;
		    height: auto; /* Auto height */
			width: 280px; /* Set a base width for flex items */
		}
		
		.feature-icon {
		    font-size: 2.5em; /* Slightly smaller icon */
		    margin-bottom: 15px;
		    color: #aabfff;
		}
		
		.feature-card h3 {
		    color: #fff;
		    margin-bottom: 10px;
		}
		
		.feature-card p {
		    color: #aaa;
		    font-size: 0.95em;
		    text-align: center; /* Center feature text */
		}

		.feature-card img {
			max-width: 120px; /* Smaller images in cards */
			border-radius: 8px;
			margin-bottom: 10px;
		}
		
		/* FAQ */
		.faq-item {
		    margin-bottom: 25px;
		    text-align: left;
		}
		
		.faq-question {
		    font-size: 1.2em;
		    font-weight: 700;
		    margin-bottom: 10px;
		    color: #F1F1F1;
		}
		
		.faq-answer {
		    font-size: 1em;
		    color: #ccc;
		}
		
		.faq-answer a{
			color: #E4E1FF;
		    text-decoration: underline;
		}
		
		.blog-section {
		    margin-top: 60px;
		    padding: 40px 20px;
		}
		
		.blog-posts {
		    display: grid;
		    gap: 30px;
		    margin-top: 30px;
		}
		
		.blog-post {
		    background: rgba(255, 255, 255, 0.05);
		    border-radius: 12px;
		    padding: 25px;
		    border: 1px solid rgba(255, 255, 255, 0.1);
		    transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
		
		.blog-post:hover {
		    transform: translateY(-5px);
		    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
		}
		
		.blog-date {
		    color: #aabfff;
		    font-size: 0.9em;
		    margin-bottom: 10px;
		}
		
		.blog-post h3 {
		    margin: 0 0 15px 0;
		    color: #F1F1F1;
		    font-size: 1.3em;
		}
		
		.blog-post p {
		    color: #ccc;
		    line-height: 1.6;
		    margin-bottom: 15px;
		}
		
		.read-more {
		    color: #aabfff;
		    text-decoration: none;
		    font-weight: 500;
		    transition: color 0.3s ease;
		}
		
		.read-more:hover {
		    color: #ffffff;
		}
		
		.hero {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      align-items: center;
      padding: 4rem 10%;
    }
    .hero-content h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }
    .hero-content p {
      margin-bottom: 1.5rem;
      font-size: 1.1rem;
      max-width: 500px;
    }
    .hero-video video {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 0 20px rgba(170,191,255,0.2);
    }
		
		/* .auth-buttons a {
		  flex: auto;
		  align-items: right;
		  justify-content: right;
		  margin-bottom: 30px;
		} */
		
		.auth-buttons a {
		  margin-left: 10px;
		  margin-bottom: 40px;
		  padding: 6px 12px;
		  border-radius: 4px;
		  text-decoration: none;
		  font-weight: 600;
		}
		
		.login-btn {
		  background-color: rgb(104, 102, 104);
		  color: white;
		  border: 1px solid rgb(156, 164, 157);
		}
		
		.login-btn:hover {
		  background-color: rgb(29, 30, 28);
		  border-color: rgb(31, 34, 35);
		}
		
		.register-btn {
		  background-color: rgb(104, 102, 104);
		  color: white;
		  border: 1px solid rgb(156, 164, 157);
		}
		
		.register-btn:hover {
		  background-color: rgb(29, 30, 28);
		  border-color: rgb(31, 34, 35);
		}
		
		.logout-btn {
          color: white;
            cursor: pointer;
          
        }
        
        .logout-btn:hover {
          background-color: rgb(29, 30, 28);
          border-color: rgb(31, 34, 35);
        }
        
        .btn {
      padding: 0.6rem 1.2rem;
      border-radius: 8px;
      font-weight: 500;
      transition: 0.2s;
    }
    .btn.primary {
      background: #aabfff;
      color: #0e0e12;
    }
    .btn.primary:hover {
      background: #88a6ff;
    }
				
		
		
		
		/* FOOTER */
		.footer {
		    text-align: center;
		    padding: 20px; /* Reduced padding */
		    color: rgba(255, 255, 255, 0.7);
		    margin-top: 30px;
		}

		.footer div {
			display: flex;
			flex-direction: column; /* Stack links vertically */
			gap: 10px;
			margin-top: 15px;
		}
		
		.footer a {
		    color: rgba(255, 255, 255, 0.9);
		    text-decoration: none;
		    margin: 0;
		}
		
		.footer a:hover {
		    text-decoration: underline;
		}
		
		/* RESPONSIVE - DESKTOP STYLES */
		@media (max-width: 768px) {
		    
			.hero {
    grid-template-columns: 1fr;
    padding: 2rem 5%;
    text-align: center;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
    max-width: 100%;
  }
  .hero-video {
    margin-top: 1.5rem;
  }

			.main-nav {
			    flex-direction: column;
			    align-items: flex-start;
			    padding: 1rem;
			  }
			  .main-nav div {
			    display: flex;
			    flex-wrap: wrap;
			    gap: 0.8rem;
			    margin-top: 0.5rem;
			  }
			  .main-nav a {
			    margin-left: 0 !important;
			    font-size: 0.9rem;
			  }
		
		    .hero-section, .upload-section, .about-section, #deepResultsContainer, #quickResultsContainer {
		        
		        position: relative;
		        
		        padding: 10px; 
		    }
		    
		    .tabs {
		  display: flex;
		  flex-direction: row;
		  
		  
		  position: absolute;
		  top: 0;
		  left: 0;
		  width: 100%;
		  height: 60px;
		  border-top-left-radius: 20px;
		  border-top-right-radius: 20px;
		  
		  
		  background-color: #1f1f1f;
		}
		
		.tab-btn {
		  flex: 1;
		  width:100%; /* Make buttons fill the available space */
		  background: #2a2a2a;
		  color: #e0e0e0;
		  border: none;
		  border-right: 1px solid #444;
		  padding: 15px 20px;
		  cursor: pointer;
		  font-weight: 600;
		  text-align: center;
		  transition: background 0.3s ease;
		}
			
			  .tab-btn:last-child {
			    border-bottom: none;
			  }
			
			  .tab-container {
			    padding-top: 30px; /* Normal padding if tabs are inside flow */
			  }
		
		    h1 { font-size: 2.5em; }
			h2 {
				margin-top: 20px;
			 	font-size: 2em;
			    background: #121212;
			    display: inline-block; /* Add this line */
			    padding: 0.1em 0.1em;
		    }
			.header-nav h1 { font-size: 1.5rem; }
		
		    .header-nav {
		        flex-direction: row;
		        justify-content: space-between;
		    }

			.about-section .flex-container {
				flex-direction: row; /* Side-by-side on desktop */
				text-align: left;
			}
			
			.scattered-image {
			  position: absolute;
			  /* width: 20vw; */ /* Remove this */
			  /* max-width: 220px; */ /* And this */
			
			  /* Use clamp() instead */
			  width: clamp(100px, 20vw, 220px);
			
			  height: auto;
			  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
			  z-index: -1;
			}

			.about-section .flex-container p {
				text-align: left;
				margin-bottom: 2px;
				display: inline-block; /* Add this line */
			    padding: 0.25em 0.5em;
			}
			.about-section h2 {
                margin-top: 0;
                margin-bottom: 0px;
                font-size: 1.8em;
                background: #121212;
                display: inline-block; 
                padding: 0.1em 0.1em;
            }
            
            about-section p {
                font-size: 1.1em;
                margin-top: 0;
                margin-bottom: 20px;
            }

			.about-section .flex-container img {
				width: 150px;
				height: 150px;
			}
			
			.discord-btn {
			    display: inline-flex;       /* safe for text + icon alignment */
			    align-items: center;
			    justify-content: center;
			    padding: 8px 16px;
			    font-size: 1em;
			    font-weight: 600;
			    color: white;
			    background: #7289da;
			    border: none;
			    border-radius: 25px;
			    cursor: pointer;
			    white-space: nowrap;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    max-width: 90vw;            /* never exceed viewport */
			}
			
			.discord-btn img {
			    width: 20px !important;     /* force fixed width */
			    height: 20px !important;    /* force fixed height */
			    flex-shrink: 0;             /* prevents image from shrinking/growing */
			    object-fit: contain;        /* preserves aspect ratio */
			    display: inline-block;
			    vertical-align: middle;
			    margin-right: 8px;
			    background: transparent;    /* ensures no white box */
			}
			
			.discord-btn span {
			    white-space: nowrap;
			    flex-shrink: 1;
			}
			
			.blog-posts {
		        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		    }
		
			.footer div {
				flex-direction: row; /* Horizontal links on desktop */
				justify-content: center;
				gap: 0;
			}
			.footer a {
				margin: 0 15px;
			}

			.deep-btn, .submit-btn, .custom-file-upload {
				width: auto; /* Auto width on larger screens */
			}
		}

        /* Additional AdSense-friendly styles */
        .content-wrapper {
            min-height: 80px;
        }

        .breadcrumb {
            color: #666;
            font-size: 0.9em;
            margin-bottom: 20px;
        }

        .breadcrumb a {
            color: #ddd;
            text-decoration: none;
        }

        .page-section {
            margin-bottom: 40px;
        }
        .hidden {
            display: none !important;
        }