body {
    font-family: 'Raleway', sans-serif; 
    margin: 0;
    padding: 0;
}


header {
    background-color: #fff;
    
    padding: 20px 0;
    
}

.container {
    max-width: 1200px;
    
    margin: 0 auto;
    
    display: flex;
   
    align-items: center;
    
    justify-content: space-between;
   
}

.logo img {
    height: 40px;

}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    margin: 0 15px;
  
}

nav a {
    text-decoration: none;
    color: #333;
    
}

.early-access-btn {
    background-color: #7d5e44;
   
    color: #fff;
   
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    
    text-decoration: none;
   
    font-weight: bold;
   
}
.hero {
    background-color: #fff; 
    color: #000;                
    text-align: center;        
    padding: 80px 0;           
}

.hero .container {  
    display: flex;     
    flex-direction: column; 
    align-items: center;    
}

.hero h1 {
    font-size: 3em;            
    margin-bottom: 15px;        
}

.hero p {
    font-size: 1.2em;           
    line-height: 1.5;           
}

.image-row .container {
    display: flex;
    justify-content: space-between; 
    gap: 15px;                    
    overflow-x: auto;            
}

.image-row img {
    width: 100%; 
    max-width: 250px;           
    height: auto;               
    object-fit: cover;          
    border-radius: 8px;          
}


@media (max-width: 768px) {
    .image-row .container {
        flex-wrap: nowrap;    
        justify-content: flex-start; 
    }

    .image-row img {
        flex: 0 0 auto;
    }
}

.summary-section .container {
    display: flex;
    align-items: center;   
    gap: 40px;              
}

.screenshot-container {
    width: 45%;            
}

.screenshot-container img {
    width: 100%;
    height: auto;         
    border-radius: 8px;    
}

.text-container {
    width: 55%;            
}

.buy-now-pay-later {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
}


.text-container p {
    line-height: 1.6;
    margin-bottom: 10px; 
    color: #555;     
}


@media (max-width: 768px) {
    .summary-section .container {
        flex-direction: column; 
    }

    .screenshot-container,
    .text-container {
        width: 100%;          
    }
}

.features-section .container {
    display: flex;               /* Enable Flexbox for centering */
    flex-direction: column;       /* Arrange items vertically */
    justify-content: center;    /* Center vertically */
    align-items: center;        /* Center horizontally */
    min-height: 300px;  /* Centers the text within the container */
}

.features-section h2 {
    /* Styles for the main heading (font size, etc.) */
    font-size: 2em;
    text-align: center;
}

.features-section p {
    /* Styles for the subheading/paragraph (font size, etc.) */
    font-size: 1.2em;
    margin-top: 5px;
}

/* Feature Image Row Section */
.feature-image-row .container {
    display: flex;
    justify-content: center; /* Center the row of images */
    gap: 20px;             /* Adjust spacing between images as needed */
  }
  
  .feature-image-row img {
    width: calc(20% - 20px); /* Adjust to fit five images with spacing */
    height: 200px;         /* Adjust height as needed */
    object-fit: cover;      /* Cover the container while maintaining aspect ratio */
    border-radius: 8px;      /* Optional: Rounded corners */
  }
  
  /* Center Image Specific Styles */
  .feature-image-row .center-image-container {
    width: calc(20% - 20px); /* Same width as other images */
    /* Adjust z-index if needed to ensure it's on top */
  }
  
  .feature-image-row .center-image-container img {
    transform: scale(1.1) translateY(-10px);  /* Make it larger and move up */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Optional subtle shadow */
    z-index: 1;
  }
  
  /* Image Caption Styling */
  .feature-image-row .image-caption {
    text-align: center; 
    font-size: 0.9em;
    margin-top: 20px; 
  }


  
  /* Media Query for responsiveness */
  @media (max-width: 768px) {
    .feature-image-row .container {
      flex-wrap: wrap;      /* Wrap images to multiple rows */
      justify-content: space-around; /* Distribute evenly */
    }
  
    .feature-image-row img {
      width: calc(50% - 20px); /* Two images per row on smaller screens */
    }
  
    .feature-image-row .center-image-container img {
      transform: none;  /* Remove the scaling and translation on small screens */
    }
    

  }


.exciting-features-section .container {
    display: flex;               /* Enable Flexbox for centering */
    flex-direction: column;       /* Arrange items vertically */
    justify-content: center;    /* Center vertically */
    align-items: center;        /* Center horizontally */
    min-height: 300px;  /* Centers the text within the container */
}

.exciting-features-section h2 {
    /* Styles for the main heading (font size, etc.) */
    font-size: 2em;
    text-align: center;
}

.exciting-features-section p {
    /* Styles for the subheading/paragraph (font size, etc.) */
    font-size: 1.2em;
    margin-top: 5px;
}

/* Feature Row Section */
.lower-display .container {
    display: flex; /* Use flexbox for the main layout */
    gap: 20px; /* Adjust spacing between images as needed */
  }
  
  /* Left Image */
  .lower-display .left-image {
    flex: 1; /* Allows the left image to grow and take up available space */
  }
  
  .lower-display .left-image img {
    width: 100%; 
    height: auto;  
    border-radius: 8px;
  }
  
  /* Right Images */
  .lower-display .right-images {
    display: flex;
    flex-direction: column; /* Stack the right images vertically */
    flex: 1; /* Allows the right images to grow and take up available space */
    gap: 20px;
  }
  
  .lower-display .right-images img {
    width: 100%;
    height: auto; 
    border-radius: 8px;
  }
  
  /* Media Query for responsiveness */
  @media (max-width: 768px) {
    .lower-display .container {
      flex-direction: column; /* Stack all images vertically on smaller screens */
    }
  }

/* Footer Styling */
.footer {
    background-color: #fff; /* Grey background */
    padding: 20px 0;         /* Add padding */
  }
  
  .footer .container {
    display: flex;           /* Use flexbox for alignment */
    justify-content: space-between; /* Align logo and icons to opposite ends */
    align-items: center;    /* Vertically center items */
    max-width: 1200px;      /* Adjust as needed */
    margin: 0 auto;         /* Center the container */
  }
  
  .footer img {
    height: 40px;           /* Adjust logo/icon height as needed */
  }
  
  .footer .social-icons {
    display: flex;           /* Align icons horizontally */
    gap: 20px;              /* Adjust spacing between icons as needed */
  }
  
  /* Media Query for responsiveness */
  @media (max-width: 768px) {
    .footer .container {
      flex-direction: column; /* Stack logo and icons on smaller screens */
      gap: 10px;             /* Adjust spacing for stacked layout */
    }
  }