/* Define global variables in :root */
:root {
  /* Colors */
  --primary-bg-color: #0f111a; /* Dark background */
  --primary-text-color: #f0f0f0; /* Light text */

  /* Overlay */
  --overlay-dark: rgba(10, 10, 35, 0.7); /* Dark Overlay */
  --overlay-light: rgba(10, 10, 35, 0.2); /* Light Overlay */
  
  /* Spacing */
  --section-padding: 50px;
  --gap-between-elements: 40px;
  
  /* Font */
  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-size-large: 2.5em;
  --font-size-medium: 1.2em;
  --line-height: 1.8; /* Line height for text */

  /* Screenshot Size */
  --screenshot-max-width: 580px;
}

/* Apply a dark background to the entire page */
body {
    background-image: url('/assets/images/light_through_clouds.jpg');  /* Background image for the entire page */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* background-color: #0f111a;  /* deep dark blue/black */
    color: #f0f0f0;             /* light text by default */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;              /* Ensure full height */
    display: flex;              /* Allow content to stretch */
    flex-direction: column;     /* Align elements vertically */
}

/* Ensure html also covers full height */
/*html {
    height: 100%;
}

/* Hero Section */
#hero {
    position: relative;
    /* background-color: #0f111a; /* dark background */
    background: var(--overlay-dark); /* Semi-transparent overlay */
    color: white;
    text-align: center;
    padding-bottom: 20px;       /* adjust padding */
    /* min-height: 120px;          /* Set minimum height for hero section */
    height: auto;
    display: flex;              /* Allow content to stretch */
    flex-direction: column;     /* Align content vertically */
    justify-content: flex-start;    /* Vertically center content */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--overlay-dark); /* Semi-transparent overlay */
    z-index: 1;
}

#hero .container {
    z-index: 2; /* Ensure text is above the overlay */
    position: relative; /* Ensure it stays above the overlay */
}

/* Header style for MuCoder */
#hero h1 {
    font-size: 3.5em;
    font-weight: bold;
    margin-bottom: 15px; /* Space below the heading */
}

#hero h2 {
    font-size: 2.0em;
    font-weight: bold;
    margin-top: 0px;    /* Space above the subheading */
    margin-bottom: 5px; /* Space below the subheading */
}

#hero .cta-buttons {
    margin-top: 30px;          /* Same as #download */
    display: flex;             /* Arrange buttons in a row */
    flex-wrap: wrap;           /* Allow wrapping on small screens */
    justify-content: center;   /* Center the buttons horizontally */
    gap: 20px;                 /* Space between buttons (matches margin) */
}

#hero p.subtext {
    font-size: 1.2em;
    font-weight: lighter;
    margin-top: 30px;  /* Moves the subtext further down */
}

/* Download buttons styling */
.button {
    background-color: #ff6f00;
    padding: 15px 30px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    margin: 10px;
}

#hero .cta-buttons .button {
    background-color: #ff6f00;
    padding: 15px 30px;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    display: inline-block;
    margin: 0;                 /* Remove extra margin, spacing controlled by gap */
    width: auto;           /* Remove any fixed width */
    text-align: center;    /* Center text inside button */
}

.button:hover {
    background-color: #ff8c00; /* Lighter on hover */
    cursor: pointer;
}

/* Features Section */
#features {
    position: relative;
    /* background-color: #0f111a; /* dark background */
    background: var(--overlay-light); /* Semi-transparent overlay */
    color: white;
    text-align: center;
    padding: 0px 0px;       /* adjust padding */
    height: auto;          /* Set height to automatically adjust for Features section */
    display: flex;              /* Allow content to stretch */
    flex-direction: column;     /* Align content vertically */
    justify-content: flex-start;    /* Vertically center content */
    /*margin-top: 40px;            /* Adds some space between the Hero and Features section */
}

/* Title styling for Features section */
#features h2 {
    font-size: 2.5em;
    text-align: center;          /* Center the title */
    margin-bottom: 0px;         /* Space below the title */
}

/* Feature List Styling */
.feature-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;             /* Allow content to wrap for smaller screens */
    margin-top: 0px;
}

.feature-list li {
    width: 20%;                  /* Each feature takes up 20% of the space */
    text-align: center;          /* Center align the content */
    margin-bottom: 0px;         /* Space between feature items */
}

.feature-list h3 {
    font-size: 1.5em;            /* Feature title styling */
    margin-bottom: 10px;         /* Space below the title */
}

.feature-list p {
    font-size: 1.2em;            /* Feature description styling */
}

/* Supported Platforms Section */
#platforms {
    position: relative;
    /* background-color: #0f111a; /* dark background */
    background: var(--overlay-dark); /* Semi-transparent overlay */
    color: white;
    text-align: center;
    padding: 0px 0px;       /* Top and bottom spacing */
    height: auto;          /* Automatically set height for Supported Platforms section */
    display: flex;              /* Allow content to stretch */
    flex-direction: column;     /* Align content vertically */
    justify-content: flex-start;    /* Vertically center content */
    /*margin-top: 40px;            /* Adds some space between the Hero and Features section */
}

#platforms h2 {
  font-size: 2.5em;
  margin-bottom: 0px;
}

/* Bulleted List in Supported Platforms Section */
#platforms .platform-list {
  list-style-type: none;      
  padding-left: 20px;         /* Add some padding to the left for alignment */
  font-size: 1.75em;           /* Adjust the font size for better readability */
  line-height: 1.6;           /* Ensure there's space between the items */
}

#platforms .platform-list li {
  margin-bottom: 0px;        /* Space between each list item */
}

/* Demo Section - Screenshot Carousel */
#demo {
    position: relative;
    /* background-color: #0f111a; /* dark background */
    background: var(--overlay-light); /* Semi-transparent overlay */
    color: white;
    text-align: center;
    padding: 25px 0px;       /* Top and bottom spacing */
    height: auto;          /* Set height to automatically adjust for Demo section */
    display: flex;              /* Allow content to stretch */
    flex-direction: column;     /* Align content vertically */
    justify-content: flex-start;    /* Vertically center content */
    /*margin-top: 40px;            /* Adds some space between the Hero and Features section */
}

#demo h2 {
  font-size: 2.5em;
  margin-bottom: 20px;        /* Space below the heading */
}

.screenshot-carousel-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px; /* Space between text row and image row */
  width: 100%;
}

.screenshot-text-row {
  display: flex; 
  /* display: grid; */
  /* grid-template-columns: repeat(auto-fit, minmax(550px, 1fr)); */
  justify-content: center;   /* Center the items horizontally */
  align-items: center;       /* Vertically center items in the row */
  gap: 60px;                 /* Space between items */
  width: 100%;
}

.screenshot-text-item {
  max-width: var(--screenshot-max-width);
  text-align: center;
  justify-content: center;
  font-size: 1.2em;
  font-weight: bold;
  line-height: var(--line-height);
  color: white;
  white-space: normal;
  word-wrap: break-word;
}

.screenshot-image-row {
  display: flex; 
  /* display: grid; */
  /* grid-template-columns: repeat(auto-fit, minmax(550px, 1fr)); */
  justify-content: center;   /* Center the items horizontally */
  align-items: center;       /* Vertically center items in the row */
  gap: 60px;                 /* Space between items */
  width: 100%;
}

.screenshot-image-item {
  max-width: var(--screenshot-max-width);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
}

.screenshot-image-item img {
  width: 100%;
  max-width: var(--screenshot-max-width);
  height: auto;             /* Keep natural aspect ratio */
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.2);
}

/* Download Section */
#download {
    position: relative;
    /* background-color: #0f111a; /* dark background */
    background: var(--overlay-dark); /* Semi-transparent overlay */
    color: white;
    text-align: center;
    padding: 0px 0px;       /* Top and bottom spacing */
    height: auto;          /* Automatically set height for Download section */
    display: flex;              /* Allow content to stretch */
    flex-direction: column;     /* Align content vertically */
    justify-content: flex-start;    /* Vertically center content */
    /*margin-top: 40px;            /* Adds some space between the Hero and Features section */
}

#download h2 {
  font-size: 2.5em;           /* Large title for prominence */
  font-weight: bold;
  margin-bottom: 10px;        /* Space below the title */
}

#download .cta-buttons {
  margin-top: 10px;           /* Space above the download buttons */
}

#download .subtext {
  font-size: 1.2em;           /* Font size for subtext */
  font-weight: lighter;       /* Lighter weight for the subtext */
  margin-top: 10px;           /* Move the subtext below the download buttons */
}

/* Button Styles */
#download .button {
  background-color: #ff6f00;  /* Orange button color */
  padding: 15px 30px;         /* Padding inside buttons */
  color: white;               /* White text on the buttons */
  text-decoration: none;      /* Remove underline from links */
  border-radius: 5px;         /* Round corners for the buttons */
  margin: 10px;               /* Space between buttons */
  display: inline-block;      /* Make sure buttons appear next to each other */
}

#download .button:hover {
  background-color: #ff8c00;  /* Lighten the button color on hover */
  cursor: pointer;           /* Change cursor to pointer on hover */
}

/* Security Assurance in the Download Section */
.security-assurance {
  font-size: 1em;
  color: #ffffff;    /* Light text color for contrast */
  margin-top: 20px;   /* Space above the message */
  text-align: center; /* Center the message */
  padding: 10px 20px; /* Add some padding around the message */
  background-color: #333333; /* Dark background for the security message */
  border-radius: 5px; /* Slight rounding of the edges */
  margin-bottom: 20px; /* Space below the message */
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
  #hero h1 {
    font-size: 2.5em;
  }

  #hero h2 {
    font-size: 1.5em;
  }

  #hero .cta-buttons {
    display: flex;
    flex-direction: column;  /* Stack buttons vertically */
    gap: 15px;
    align-items: center;
  }

  #hero .cta-buttons .button {
    width: auto;
    /* min-width: 200px;
    max-width: 250px;        /* Optional: limit max width */
  }

  .feature-list {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .feature-list li {
    width: 90%;
  }

  .screenshot-text-row,
  .screenshot-image-row {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .screenshot-text-item,
  .screenshot-image-item {
    max-width: 90%;
  }

  #download .cta-buttons {
    flex-direction: column;
    gap: 15px;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 2em;
  }

  #hero h2 {
    font-size: 1.3em;
  }

  #hero .subtext {
    font-size: 1em;
  }

  #download h2 {
    font-size: 2em;
  }
}

@media (max-width: 480px) {
  #hero h1 {
    font-size: 1.8em;
  }

  #hero h2 {
    font-size: 1.1em;
  }

  #hero .subtext {
    font-size: 0.9em;
  }

  #download h2 {
    font-size: 1.8em;
  }
}