/*
  website-creation-page.css
  Styles for the website creation feature cards and layout.

  Notes:
  - Sections are grouped and documented inline for easier maintenance.
  - Colors and spacing use simple variables where helpful (no CSS variables in this file).
*/

/* Creates a thin green horizontal line for visual separation */
.green-underline {
  width: 100px; /* Fixed width for the underline */
  height: 1px; /* Thin line height */
  background: #3c8d37; /* Green brand color */
  margin-bottom: 20px; /* Space below the underline */
}

/* Base layout for feature tags inside cards */
.build-features {
  list-style: none; /* Remove default bullets */
  padding: 0; /* Reset default list padding */
  margin-top: auto; /* Push tab list to bottom when used inside a flex container */
  display: flex; /* Align list items horizontally */
  gap: 15px; /* Spacing between feature tags */
}

/* Individual feature tag appearance */
.build-features li {
  background: #fff; /* White background for contrast */
  border: 1px solid #f0f0f0; /* Light border for subtle structure */
  padding: 10px 18px; /* Comfortable padding around text */
  font-size: 0.65rem; /* Small label text size */
  font-weight: 700; /* Bold label text */
  color: #3c8d37; /* Green text to match accent color */
  text-transform: uppercase; /* Uppercase label text */
  letter-spacing: 1px; /* Slight spacing for readability */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03); /* Soft shadow for depth */
}

/* Keep card text above any watermark layer */
.card-item h3,
.card-item p,
.card-item ul,
.card-item small {
  position: relative;
  z-index: 1;
}

/* Secondary build features list styling for alternate cards */
.build-features {
  list-style: none; /* Remove default list markers */
  padding: 0; /* Reset list padding */
  margin-top: 20px; /* Space above the list */
  display: flex; /* Horizontal layout for list items */
  gap: 15px; /* Spacing between items */
  margin: 0; /* Reset default margins completely */
}

/* Alternative styling for feature list items */
.build-features li {
  font-size: 0.7rem; /* Slightly larger text for readability */
  text-transform: uppercase; /* Uppercase label text */
  letter-spacing: 1px; /* Track letters for clarity */
  background: #f4f4f4; /* Light gray background */
  padding: 5px 10px; /* Smaller padding than primary style */
  border-radius: 3px; /* Rounded corners */
  color: #3c8d37; /* Highlight green text */
  font-weight: 600; /* Semi-bold text weight */
}

/* Small label styling inside card headers */
.card-inner small,
.card-inner-watermark small {
  letter-spacing: 4px; /* Wide letter spacing */
  color: #999; /* Muted gray color */
  font-size: 0.7rem; /* Small text size */
  margin-bottom: 20px; /* Space below the small label */
  display: block; /* Ensure it behaves like a block element */
}
.card-inner h3,
.card-inner-watermark h3 {
  font-family: "Lora", serif; /* Serif heading font for cards */
  font-size: 2.2rem; /* Large heading size */
  margin-bottom: 20px; /* Space below heading */
  color: #1a1a1a; /* Dark text color */
}

.card-inner p,
.card-inner-watermark p {
  font-family: "Poppins", sans-serif; /* Sans-serif body font */
  font-size: 1.1rem; /* Standard body text size */
  line-height: 1.7; /* Comfortable line height for readability */
  color: #444; /* Dark gray text */
}

.moodboard-layout {
  display: grid; /* Grid layout for moodboard section */
  grid-template-columns: 1.2fr 0.8fr; /* Asymmetric columns: 60/40 split */
  gap: 30px; /* Space between grid columns */
  align-items: center; /* Vertically center content */
  text-align: left !important; /* Left-align text content */
}

.strategy-note {
  font-size: 0.9rem !important; /* Smaller text size for notes */
  border-top: 1px solid rgba(0, 0, 0, 0.1); /* Subtle top border */
  padding-top: 15px; /* Space above border */
  margin-top: 15px; /* Space before section */
  font-style: italic; /* Italicized text for emphasis */
}

.mood-visual-column {
  background: rgba(0, 0, 0, 0.02); /* Subtle light gray background */
  padding: 20px; /* Internal spacing */
  border-radius: 2px; /* Slight rounded corners */
  display: flex; /* Flex layout for vertical stacking */
  flex-direction: column; /* Stack items vertically */
  gap: 20px; /* Space between flex items */
}

/* Small uppercase label for font category sections */
.font-label {
  display: block; /* Block-level element for full width */
  font-size: 0.6rem; /* Small text size */
  letter-spacing: 2px; /* Letter spacing for emphasis */
  text-transform: uppercase; /* All caps text */
  color: #bbb; /* Muted gray color */
  margin-bottom: 10px; /* Space below label */
}
/* Serif font preview display */
.preview-serif {
  font-family: "Lora", serif; /* Serif font for elegant look */
  font-size: 1.4rem; /* Larger preview text */
  margin: 0; /* Remove default margins */
  color: #1a1a1a; /* Dark text color */
}
/* Sans-serif font preview display */
.preview-sans {
  font-family: "Poppins", sans-serif; /* Sans-serif font for modern look */
  font-size: 0.9rem; /* Standard preview text size */
  margin: 0; /* Remove default margins */
  color: #666; /* Gray text color */
}

/* Container for color swatches in a horizontal layout */
.swatch-grid {
  display: flex; /* Flex layout for horizontal arrangement */
  gap: 8px; /* Space between color swatches */
}

/* Individual circular color swatch */
.swatch {
  width: 35px; /* Square dimensions */
  height: 35px; /* Square dimensions */
  border-radius: 50%; /* Circular shape */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle inset shadow for depth */
}

/* Mood descriptor tag styling */
.mood-tag {
  font-family: sans-serif; /* Clean sans-serif font */
  font-size: 0.55rem; /* Very small text size */
  letter-spacing: 3px; /* Wide letter spacing for emphasis */
  color: #999; /* Medium gray text */
  border: 1px solid #ddd; /* Light gray border */
  padding: 5px; /* Minimal padding */
  text-align: center; /* Center-aligned text */
}

@media (max-width: 1100px) {
  .moodboard-layout {
    grid-template-columns: 1fr;
  }
}

/* Grid layout for wireframe section with two columns */
.wireframe-layout {
  display: grid; /* Grid layout for side-by-side content */
  grid-template-columns: 0.9fr 1.1fr; /* Asymmetric columns: 45/55 split */
  gap: 40px; /* Large space between columns */
  align-items: center; /* Vertically center content */
}

/* Container for wireframe visual representation */
.wireframe-visual-column {
  background: #f4f4f4; /* Light gray background */
  padding: 30px; /* Internal spacing */
  border: 1px solid #ddd; /* Subtle border */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
  height: 85%; /* Responsive height */
}

/* Simulated browser window for wireframe display */
.wireframe-browser-ui {
  background: #fff; /* White background for browser window */
  border: 1px solid #ddd; /* Subtle border */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); /* Soft shadow for depth */
  height: 85%; /* Responsive height */
}

/* Browser window header with close/minimize buttons */
.ui-header {
  height: 15px; /* Compact header height */
  background: #eee; /* Light gray header background */
  border-bottom: 1px solid #ddd; /* Separator line */
  display: flex; /* Flex layout for button alignment */
  gap: 4px; /* Space between buttons */
  padding: 4px 8px; /* Padding inside header */
}

/* Simulated close/minimize button dots */
.ui-dot {
  width: 4px; /* Small dot size */
  height: 4px; /* Small dot size */
  border-radius: 50%; /* Circular shape */
  background: #ccc; /* Gray dot color */
}

/* Main content area of wireframe */
.ui-body {
  padding: 15px; /* Internal spacing */
  display: flex; /* Flex layout for vertical stacking */
  flex-direction: column; /* Stack items vertically */
  gap: 10px; /* Space between content blocks */
}

/* Placeholder for hero/banner section */
.ui-hero-block {
  height: 40px; /* Fixed height for hero area */
  background: #f9f9f9; /* Light background */
  border: 1px dashed #ddd; /* Dashed outline for placeholder */
}

/* Container for grid row layout */
.ui-grid-row {
  display: flex; /* Flex layout for horizontal arrangement */
  gap: 10px; /* Space between grid items */
}

/* First type of grid item (shorter) */
.ui-grid-item-1 {
  flex: 1; /* Equal width distribution */
  height: 30px; /* Short item height */
  border: 1px dashed #ddd; /* Dashed outline for placeholder */
}

/* Second type of grid item (taller) */
.ui-grid-item-2 {
  flex: 1; /* Equal width distribution */
  height: 80px; /* Tall item height */
  border: 1px dashed #ddd; /* Dashed outline for placeholder */
}

/* Placeholder for text content block */
.ui-text-block {
  height: 20px; /* Text line height */
  width: 60%; /* Partial width for text appearance */
  background: #f9f9f9; /* Light background */
  border: 1px dashed #ddd; /* Dashed outline for placeholder */
}

/* Label for blueprint/wireframe section */
.blueprint-label {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 0.5rem;
  color: #aaa;
  letter-spacing: 1px;
}

/* Wireframe features list styling */
.wireframe-features {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

/* Individual wireframe feature items */
.wireframe-features li {
  font-family: "Poppins", sans-serif;
  font-size: 0.85rem;
  color: #666;
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
}

/* Bullet/plus sign for wireframe features */
.wireframe-features li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: #bbb;
}

/* Responsive breakpoint for wireframe layout */
@media (max-width: 1100px) {
  .wireframe-layout {
    grid-template-columns: 1fr;
  }
}

/* Grid layout for review section - split into 1.1fr and 0.9fr columns */
.review-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 10px;
  align-items: center;
}

/* Visual column container for review section */
.review-visual-column {
  position: relative;
  padding: 10px;
  border-radius: 4px;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Portfolio display card with shadow and slight rotation */
.portfolio-display {
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  padding: 10px;
  transform: rotate(2deg);
}

/* Label text displayed above portfolio items */
.display-label {
  font-size: 1rem;
  letter-spacing: 2px;
  color: #999;
  margin-bottom: 8px;
  text-align: center;
}

/* Project screenshot image container */
.project-screenshot {
  width: 100%;
  height: 550px;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Flex container for project details (name and status) */
.project-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* Client/project name styling */
.client-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a241d;
  font-family: "Lora";
}

/* Status badge styling - green background */
/* Status badge styling - green background */
.status-badge {
  font-size: 0.55rem;
  background: #3c8d37;
  color: #fff;
  padding: 2px 6px;
  border-radius: 2px;
}

/* Review icon - large decorative element positioned absolutely */
.review-icon {
  position: absolute;
  bottom: -40px;
  right: -20px;
  font-size: 15rem;
  opacity: 0.05;
  z-index: 0;
}

.build-layout {
  display: grid;
  grid-template-columns: 1;
  gap: 10px;
  align-items: center;
}

.build-visual-column {
  position: relative;
  padding: 10px;
  border-radius: 4px;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.build-visual-column .build-features {
  justify-content: center;
}

@media (max-width: 1100px) {
  .review-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1440px) {
}

/* NEW WEBSITE CSS HERE */

.process-carousel {
    background-color: #000;
    padding: 100px 0;
    overflow: hidden;
    position: relative;
    cursor: grab;
}

.carousel-track {
    display: flex;
    gap: 40px;
    padding: 0; /* JS will handle initial centering */
    will-change: transform;
}

.card-item {
    width: 45vw; /* This size ensures "2 and a bit" are visible */
    flex: 0 0 auto;
    background-color: #fff;
    background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
    padding: 40px;
    border-radius: 30px;
    user-select: none;
    align-content: center;
}

/* Dots Styling */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 50px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Active state for dot indicator - highlights and scales up */
.dot.active {
    background: #3C8D37;
    transform: scale(1.4);
}


/* CTA - Call To Action Section */
.cta-section {
  padding: 100px 0;
  text-align: center;
  background: #fff;
}

/* Primary button styling - dark background with white text */
.btn-primary {
  background: #000;
  color: #fff;
  padding: 15px 30px;
  border-radius: 30px;
  border: none;
  cursor: pointer;
}


/* Header Section - Hero area styling */
/* Large heading in hero section */
.hero-section h1{
  font-family: 'Lora';
  font-size: 5rem;
  text-align: center;
}

/* Paragraph styling in hero section - centered and constrained width */
.hero-section p{
  text-align: center;
  width:50%;
  margin-left:auto;
  margin-right: auto;
}


/* Main hero section container with top and bottom padding */
.hero-section {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 100px;
}

/* Process carousel heading - white text centered */
.process-carousel h2{
  color:#fff;
  text-align: center;
  padding-bottom: 50px;
}

/* Stats section background with green color and padding */
.stats-section {
    background-color: #3C8D37;
    color: #fff;
    padding: 120px 0;
    overflow: hidden;
}

/* Stats section - repeated declaration (can be consolidated) */
.stats-section {
    background-color: #3C8D37;
    padding: 100px 0;
    color: #fff;
}

/* Flexbox container for stats - centers content with gap */
.stats-container {
    display: flex;
    align-items: center;
    width:85%;
    margin: 0 auto;
    gap: 50px;
}

/* Stats content wrapper with flex layout */
.stats-content {
    flex: 1;
    gap:20px;
}

/* Flexbox grid for stat boxes - wraps to 2 columns */
.stat-flex-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to move to a new row */
    gap: 20px;
    margin-top: 40px;
}

/* Individual stat box - 2 per row with semi-transparent background */
.stat-box {
    /* (100% / 2) minus half of the gap to fit 2 per row */
    flex: 0 0 calc(50% - 10px); 
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 20px;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Large number display in stat box */
.stat-box .number {
    font-family: "Lora", serif;
    font-size: 2.5rem;
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
    font-size: 38px;
    letter-spacing: 3px;
}

.stat-box p {
    font-family: "Poppins", sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Mobile Responsiveness: Stack them in 1 column on small screens */
@media (max-width: 768px) {
    .stat-box {
        flex: 0 0 100%;
    }
    .stats-container {
        flex-direction: column;
    }
}

.stats-container .main-title{
  padding-bottom: 20px;
  color:#fff;
}

.mobile-mockup img{
  border-radius: 30px;
  width:60%;
}

.mobile-mockup {
  width:50%;
  text-align: end;
}

.primary-btn-creation{
  border-radius: 30px;
  width:20%;
  font-family: 'Lora';
  font-size: 18px;
  color: #3C8D37;
  text-transform: capitalize;
  border:1px solid #3C8D37;
}

.primary-btn-creation:hover{
  color: #fff;
  background-color: #3C8D37;
  border: #3C8D37;
}