/* General Styles */
body {
  background-color: #000000 !important; /* Black background */
  color: white; /* Default text color */
  font-family: Arial, sans-serif; /* Consistent font */
}
/* index styles */
.index-background {
  background-image: url("../images/newindex/splashbg.png"); /* Replace with the actual path */
  background-size: cover; /* Ensures the image covers the entire area */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents tiling */
  min-height: 100vh; /* Ensures the background covers the viewport */
  background-color: #000000 !important; /* Black background */
}

.custom2-input {
  font-size: 1rem; /* Adjust text size */
  padding: 10px 15px; /* Inner padding */
  width: 100%; /* Ensure full width */
  border: 2px solid #ccc; /* Light border */
  border-radius: 5px; /* Rounded corners */
}

.custom2-input:focus {
  border-color: #ffd700; /* Yellow border on focus */
  outline: none;
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); /* Add yellow glow */
}

.custom2-button {
  font-size: 1rem; /* Button text size */
  padding: 12px 20px; /* Padding inside the button */
  background-color: #ffd700; /* Nurflix yellow */
  color: black; /* Black text */
  border: none;
  border-radius: 5px;
}

.custom2-button:hover {
  background-color: #ffc300; /* Slightly darker yellow */
  color: white;
}

/* Container Wrapper */
.container-wrapper {
  background-color: #191919; /* Dark grey background */
  padding: 40px; /* Inner padding */
  border-radius: 10px; /* Rounded edges */
}

/* Shared Buttons */
.yellow-btn,
.activate-button,
.submit-button {
  background-color: #ffd700; /* Nurflix yellow */
  color: black; /* Black text */
  border: none;
  padding: 10px 20px; /* Adjust padding */
  font-weight: bold;
  border-radius: 5px; /* Slightly rounded corners */
  width: 100%; /* Full width */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s ease; /* Smooth hover */
}

.yellow-btn:hover,
.activate-button:hover,
.submit-button:hover {
  background-color: #ffc300; /* Slightly darker yellow */
  color: white; /* Change text on hover */
}

/* Input Fields */
.custom-input,
.payment-input,
.access-code-input {
  font-size: 16px;
  color: black; /* Text color */
  background-color: #f8f9fa; /* Light grey background */
  border: 2px solid #ccc; /* Light grey border */
  border-radius: 8px; /* Rounded edges */
  padding: 10px;
  width: 100%; /* Full width */
}

.custom-input:focus,
.payment-input:focus,
.access-code-input:focus {
  border-color: #ffd700; /* Yellow focus border */
  outline: none; /* Remove default outline */
  box-shadow: 0 0 5px rgba(255, 215, 0, 0.5); /* Subtle glow */
}

.custom-input::placeholder,
.payment-input::placeholder {
  color: #888; /* Light grey placeholder text */
}

/* Styling for Quick Actions links */
.custom-link {
  color: #ffd700; /* Nurflix yellow for links */
  text-decoration: none; /* Remove underline by default */
  font-weight: bold; /* Make it stand out */
  transition: all 0.3s ease; /* Smooth transition on hover */
}

.custom-link:hover {
  text-decoration: underline; /* Add underline on hover */
  color: #ffc300; /* Slightly darker yellow on hover */
}

/* Plan Buttons */
.plan-button {
  background-color: transparent;
  color: white;
  border: 2px solid #ffd700; /* Yellow border */
  border-radius: 8px;
  padding: 15px 20px;
  margin-bottom: 10px;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.plan-button:hover {
  background-color: #ffd700; /* Yellow hover background */
  color: black; /* Black text on hover */
}

/* Vertical Line */
.vertical-line {
  height: 100%;
  width: 2px; /* Line thickness */
  background-color: #444; /* Grey line */
  margin: 0 auto;
}

/* Tables */
.table {
  color: white; /* White text */
  background-color: #333; /* Dark grey background */
  border-radius: 8px; /* Rounded edges */
}

.table thead th {
  color: white;
  background-color: #444; /* Slightly lighter grey */
}

.table tbody tr:hover {
  background-color: #222; /* Darker grey on hover */
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
  border: 1px solid #444; /* Border for table responsiveness */
  margin-bottom: 20px; /* Spacing below the table */
}

/* Highlight Titles */
.highlight-title {
  color: #ffd700; /* Nurflix yellow */
  font-size: 1.2rem; /* Slightly larger text */
  font-weight: bold;
  letter-spacing: 0.5px; /* Subtle spacing */
}

/* Section Divider */
.section-divider {
  border-top: 1px solid #ffd700; /* Yellow divider */
  margin: 2rem 0; /* Vertical spacing */
}

.gradient-divider {
  border-top: 1px solid;
  border-image: linear-gradient(to right, #191919, #ffcc00, #191919);
  border-image-slice: 1; /* Ensures full gradient application */
  margin: 2rem 0;
}

/* Status Box */
.status-box {
  background-color: #191919; /* Dark grey background */
  border: 2px solid #ffd700; /* Yellow border */
  border-radius: 8px; /* Rounded edges */
  padding: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  color: white;
}
.status-container {
  background-color: #000000; /* Dark background */
  border: 2px solid #313131 /*border */
  border-radius: 8px; /* Rounded corners */
  color: white; /* Text color */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}

.vertical-line {
  height: 100%; /* Full height */
  width: 2px; /* Thickness of the line */
  background-color: #444; /* Grey color */
  margin: 0 auto; /* Center alignment */
}

/* Inline Secure Server Styling */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.secure-server {
  display: flex;
  align-items: center;
  color: #28a745; /* Green color */
  font-size: 0.9rem;
}
.secure-server i {
  margin-left: 0.5rem; /* Space between text and icon */
}

.plan-button {
  background-color: transparent;
  color: white;
  border: 2px solid #ffd700; /* Yellow border */
  border-radius: 8px;
  padding: 10px 15px; /* Adjust padding */
  text-align: center;
  font-size: 1.1rem; /* Adjust font size */
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 10px; /* Space between buttons */
  transition: all 0.3s ease; /* Smooth hover effect */
}

.plan-button:hover {
  background-color: #ffd700; /* Yellow hover */
  color: black;
}

.plan-button span {
  display: block; /* Ensure each detail is on its own line */
}

.plan-button .small {
  font-size: 0.9rem; /* Smaller font for discounts */
  font-weight: normal; /* Lighter weight for discount text */
}

.campaign-card {
  background-color: transparent; /* No background for cards with images */
  border: 2px solid #d6d6d6; /* Optional: Light border */
  border-radius: 8px; /* Rounded corners for cards */
  overflow: hidden; /* Ensures images don’t spill outside rounded corners */
  cursor: pointer;
  transition: transform 0.3s ease-in-out; /* Smooth hover effect */
}

.campaign-card img {
  width: 100%; /* Ensure images fill the card */
  height: auto; /* Maintain aspect ratio */
}

.campaign-card:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  border-color: #ffd700; /* Yellow border on hover */
}
.proceed-button {
  background-color: #ffd700; /* Nurflix yellow */
  color: black;
  border: none;
  padding: 10px 20px; /* Normal padding */
  font-weight: bold;
  border-radius: 5px; /* Slightly rounded corners */
  width: 100%; /* Full width on mobile */
  max-width: 250px; /* Limit width on desktop */
  transition: all 0.3s ease-in-out;
}

.proceed-button:hover {
  background-color: #ffc300; /* Slightly darker yellow */
  color: white; /* White text on hover */
}

.vh-70 {
    height: 70vh;
}

.py-3 {
    padding-top: 1rem !important;
    padding-left: 1rem !important; 
    padding-right: 1rem !important;
    padding-bottom: 1rem !important;
}

.platform-text {
    line-height: 1.2;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: 0.8rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .yellow-btn {
    width: 100%; /* Full-width buttons on small screens */
  }

  .status-box {
    text-align: center; /* Center text alignment */
  }

  .container-wrapper {
    padding: 20px; /* Reduced padding */
  }

  .vertical-line {
    display: none; /* Hide vertical line on small screens */
  }
	.campaign-card {
    height: 120px; /* Shorter height for smaller screens */
  }
	.proceed-button {
    width: auto; /* Normal width for desktop */
    margin-center: 0; /* Ensure it's aligned to the right */
  }
	
	/* Ensure the button stacks below the input on mobile */
  .custom2-button {
    margin-top: 10px; /* Add spacing between the input and button */
  }
	  .stack-icons .col-auto {
    display: block; /* Force stacking */
    text-align: center; /* Center the images */
  }

  .stack-icons img {
    margin-bottom: 10px; /* Add spacing between stacked images */
  }
}