/*
I certify that the HTML file I am submitting is all my own work.
None of it is copied from any source or any person.
Signed: Ibrahim Ali.
Date: 11/08/2025
Author: Ibrahim Ali
Date: 12/11/2025
Class: CSS305
Project: Final Project
File Name: index.css
Description: The page styles the main page. It splits the viewport into two pages. I used the hero section first, then the visual container and services at the bottom.  
*/
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

/* Main content wrapper 
Uses Gradient for Background colour
*/
.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(#e8dacc, #DBC2A4, #eaded3, #DBC2A4);
}

/*
Header with transparent background to allow main pages colour to be uses
uses z-index to make sure items begin at the top
aligns all my items at the center
spcae between to make sure the tow main header's fill the spcae given
*/
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;  
  align-items: center;
  padding: 40px;             
  background-color: transparent;
  color: #648EC0;
  z-index: 10;
}

/*
sets margin for the Ace 'title and makes the font bigger and responsive
*/
header .title h2 {
  margin: 0;
  font-size: 1.8rem;
}

/*
sets the spacing between the quick link elements
*/
header .quick-links {
  display: flex;                  
  gap: 40px;                      
}

header .quick-links h3 {
  margin: 0;
}


/* First Page Styling
Sets the viewport to take one page - (ensures theres like two pages for on file)
Centers the content
Adds a background colour to the page
*/
.hero {
  height: 100vh;
  width: 100%;
  background: linear-gradient(#e2d7cd, #DBC2A4, #dcd1c5, #DBC2A4);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/*
Arranges the content in a row
Ensures both elements spread out in the page to fit the screen
has a max widht to make sure there is a size limit to the contents

*/
.hero-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  gap: 20px;
}
/*
Has flex one to take same size as the image
Centers the text
Gives space between text and buttons
*/
.hero-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 1rem;
}
.hero-left h1 {
  font-size: 4rem;
  line-height: 1.2;
  font-weight: bold;
  margin-bottom: 20px;
  color: #605c58;
}
.hero-left p {
  color: #605c58;
}
.hero-button {
  margin-top: 20px;
}

/*
Has flex one to take same size as the image
Centers the image
Makes sure the image stays on the right
*/
.hero-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.hero-image {
  width: 100%;
  height: auto;
  max-height: 90vh;
  border-radius: 60px;
}
.hero-buttons {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}


/*
Adds colour to the buttons
Gets a hover when on top of a button
*/
#get_started_btn {
  padding: 12px 28px;
  background-color: #648EC0;
  color: white;
  border: none;
  border-radius: 70px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: 0.3s;
}

#get_started_btn:hover {
  background-color: #849DBB;
}

/*
Visual Container
Splits my two content pages
Adds a separator between content
*/
.visual-container {
  width: 100%;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  background-color: #849DBB;
  color: white;
}

/*
This is the separator lines
Spaces them evenly
*/
.info-row {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  gap: 40px;
}
.info-row article {
  flex: 1;
  padding: 20px;
  text-align: center;
  border-right: 2px solid #ccc;
}
.info-row article:last-child {
  border-right: none;
}
.info-row h1 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 10px;
}
.info-row p {
  font-size: 1rem;
}


/* 
ACE SECTION 
Another Visaul Elements
Has boxes evenly spaced with equal sizing
*/
.ACE {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 90px;
  padding: 60px 0;
  background: linear-gradient(500deg, #d3c9be, #DBC2A4);
}
.ACE section {
  flex: 1;
  max-width: 300px;
  background: #849DBB;
  color: white;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.ACE img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  object-fit: contain;
}

/* FAQ 
Styled it as a footer 
Centers the itmes
Makes sure they are all evenly spaced
*/
.faq {
  width: 100vw;
  background-color: #849DBB;
  color: white;
  padding: 40px 20px;
  box-sizing: border-box;
}

.faq-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.faq-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  white-space: nowrap;
  color: white;
}

.faq-row ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-row h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
  font-weight: bold;
}

.faq-row li {
  margin-bottom: 6px;
}