:root {
    --cta: #286B92; /*#427868;*/
    --cta-dark: #1E5373; /*#2f5a4c;*/
    --primary: #286B92;
    --primary-dark: #074559;
    
    --secondary: #80A9B3;
    --dark: #052248;/*#074559;*/
    --light: #DAD7C6;
    --gray: #222222;
    --success: #427868; 
    
    --very-light-background: #F9F8F6;
    --light-background: #F4F3EF;
    --medium-background: #E8E6D9;
    --dark-background: #DAD7C6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--dark);
    background-color: var(--light);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--primary-dark);
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    color: white;
}

.btn-outline {
    border: 2px solid var(--primary);
    color: var(--primary);
    background-color: transparent;
}

.btn-outline:hover {
    background-color: var(--primary);
    color: white;
}

#btn-cta {
    background-color: var(--cta);
    color: white;
}

#btn-cta:hover {
    background-color: var(--cta-dark);
    color: white;
}

/* Header */
header {
    background-color: var(--light-background);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 2rem;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    display: flex;
    align-items: center;
    width: 52px;
    height: 52px;
}

.logo i {
    margin-right: 0.5rem;
}

.logo img {
    height: inherit;
}

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

nav ul li {
    margin-left: 1.5rem;
    margin-top: auto;
    margin-bottom: auto;
}

nav ul li a {
    color: var(--dark);
    font-size: 1.125rem;
    font-weight: 600; 
}

nav ul li a:hover {
    color: var(--primary);
}

.mobile-nav {
    display: none;
}

.mobile-nav ul {
    font-size: 1.5rem;
    list-style-type: none;
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark);
}

/* Hero Section */

.hero {
    /*padding: 6rem 0 5rem;*/
    padding: 68px 0 5rem;
    background: var(--light-background);
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.hero-text {
    flex: 1;
}

.hero-text h1 {
    font-size: 2.75rem; 
    margin-bottom: 0.65rem; 
    color: var(--dark);
}

.hero-text p {
    font-size: 1.125rem; 
    color: var(--gray);
    margin-bottom: 1rem; 
}

.hero-btns {
    display: flex;
    gap: 1rem;
}

.hero {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* This was called screenshot-container and that class is still used in docs.html. */
.hero-image-container {
  width: 100%; /* Make the container responsive */  
  aspect-ratio: 1920 / 1241;
}

.hero-image-container img {
  display: block; /* To prevent extra space below the image */
  max-width: 100%; /* Make the image scale down to fit the container width */
  height: auto;    /* Maintain the image's aspect ratio */
  /*border: 1px solid #ccc;*/
}  

/* Features Section */
.features {
    padding: 5rem 0;
    background: var(--dark-background);
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.125rem;
    color: var(--gray);
    max-width: 700px;
    margin: 0 auto;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background-color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    background-color: var(--light-background);
    color: var(--primary);
    font-size: 1.5rem;
}

.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.feature-card p {
    color: var(--gray);
}

/* APIs Section */
.apis {
    padding: 5rem 0;
    background-color: var(--medium-background);
}

.api-card {
    display: flex; /* Arranges thumbnail and content side-by-side */
    align-items: center; /* Vertically aligns content in the middle */
    width: 100%; /* Makes the card take full available width */
    max-width: 800px; /* Limits the max width for larger screens */
    margin-bottom: 20px; /* Space between cards */
    padding: 15px; /* Internal padding for the card content */
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 8px; /* Slightly rounded corners */
    text-decoration: none; /* Removes underline from the <a> tag */
    color: #333; /* Default text color */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Soft shadow for depth */
    background-color: var(--light-background);
}

.api-card:hover {
    /*box-shadow: 0 4px 10px rgba(0,0,0,0.1);*/ /* More pronounced shadow on hover */
    /*transform: translateY(-2px);*/ /* Slight lift effect on hover */
}

.api-card-thumbnail {
    flex-shrink: 0; /* Prevents thumbnail from shrinking */
    width: 120px; /* Fixed width for the thumbnail container */
    height: 120px; /* Fixed height for the thumbnail container */
    margin-right: 20px; /* Space between thumbnail and text content */
    overflow: hidden; /* Hides parts of the image if it exceeds container */
    border-radius: 4px; /* Slightly rounded corners for the thumbnail */
}

.api-card-thumbnail img {
    width: 100%; /* Makes image fill its container */
    height: 100%; /* Makes image fill its container */
    object-fit: cover; /* Ensures image covers the area without distortion, cropping if necessary */
    display: block; /* Removes extra space below image */
    border-radius: 4px;
    border: 2px solid var(--light-background);
    transition: border 0.3s ease;
}

.api-card-thumbnail img:hover {
    border: 2px solid var(--cta); 
}

.api-card-content {
    flex-grow: 1; /* Allows content to take up remaining space */
    padding-right: 10px; /* Small padding on the right to prevent text touching edge if card is tight */
}

.api-card-title {
    font-size: 1.4em; /* Larger font size for the title */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 8px; /* Space below the title */
    color: var(--primary); /* Using one of your brand colors for the title */
}

.api-card-text {
    font-size: 1em; /* Standard font size for description */
    line-height: 1.5; /* Good line height for readability */
    margin-bottom: 0; /* Remove default bottom margin */
}

.voice-option-card {
    border: 1px solid #ddd; /* A light grey border */
    border-radius: 8px;    /* Radiused corners (adjust as desired) */
    padding: 8px;         /* Add some padding inside the card */
    margin-top: 8px;   /* Add space between cards */
    background-color: var(--very-light-background); /* Ensure a white background if not already set */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Optional subtle shadow */
}

.voice-option-card h4 {
    margin-bottom: 4px;
}

.rapid-api-btn img{
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.rapid-api-btn img:hover {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /*0.3*/
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .api-card {
        flex-direction: column; /* Stacks thumbnail and content vertically on smaller screens */
        text-align: center; /* Centers text when stacked */
        padding: 20px 15px; /* Adjust padding for stacked layout */
    }

    .api-card-thumbnail {
        width: 100px; /* Slightly smaller thumbnail for mobile */
        height: 100px; /* Slightly smaller thumbnail for mobile */
        margin-right: 0; /* Remove horizontal margin */
        margin-bottom: 15px; /* Add vertical margin below thumbnail */
    }

    .api-card-content {
        padding-right: 0; /* Remove right padding for stacked layout */
    }

    .api-card-title {
        font-size: 1.2em; /* Adjust title size for mobile */
    }

    .api-card-text {
        font-size: 0.9em; /* Adjust text size for mobile */
    }
}

/* Testimonials Section */
.testimonials {
    padding: 5rem 0;
    background-color: var(--medium-background);
}

#testimonials-disclaimer {
    font-size: 1.5rem;
    font-weight: 600;
    color: #E31B23;  
}

#testimonials-invite {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cta-dark);
    transition: color 0.3s ease;
}

#testimonials-invite:hover {
    color: var(--cta);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background-color: white;
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.testimonial-text {
    font-style: italic;
    color: var(--gray);
    margin-bottom: 1.5rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
}

.author-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-right: 1rem;
    background-color: var(--light-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 700;
}

.author-info h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.author-info p {
    font-size: 0.875rem;
    color: var(--gray);
    margin-bottom: 0;
}

/* Documentation Links Section */
.documentation {
    padding: 5rem 0;
    background-color: var(--dark-background);
}

/* Call to Action Section */
.cta {
    padding: 5rem 0;
    background: var(--primary);
    color: white;
    text-align: center;
}

.cta h2 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

.cta p {
    font-size: 1.125rem;
    max-width: 700px;
    margin: 0 auto 2rem;
    opacity: 0.9;
}

.cta .btn {
    background-color: white;
    color: var(--primary);
}

.cta .btn:hover {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Footer */
footer {
    background-color: var(--dark);
    color: white;
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.footer-column h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    color: white;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
}

/*
.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    transition: background-color 0.3s ease;
}

.social-links a:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1.5rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}
*/

/* The Contact Modal */            
#modal-container {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

#modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 500px;
  border-radius: 5px;
  text-align: center; /* Center the text and button */
}

#modal-message-text {
  font-size: 1.5rem; /*1.125rem;*/
  margin-bottom: 15px;
  display: block; /* Ensure space below the text */
}

#dismiss-modal {
  font-size: 1.125rem;  
  background-color: var(--primary);
  color: white;
  padding: 10px 15px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  font-size: 1em;
}

#dismiss-modal:hover {
  background-color: var(--primary-dark);
}
/* End of The Contact Modal */

/* Media Queries */
@media (max-width: 1024px) {
    
    nav {
        display: none;
    }
    
    .mobile-menu-btn {
        display: block;
    }
    
    .mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: white;
        z-index: 101;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: transform 0.3s ease;
        transform: translateX(100%);
    }

    .mobile-nav.active {
        transform: translateX(0);
    }

    .mobile-nav ul {
        flex-direction: column;
        align-items: center;
    }

    .mobile-nav ul li {
        margin: 1rem 0;
    }

    .mobile-nav-close {
        position: absolute;
        top: 2rem;
        right: 2rem;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--dark);
    }
    
    .hero {
        padding: 6rem 0 5rem;
    }
    
    .hero-content {
        flex-direction: column;
    }

    .hero-text {
        text-align: center;
    }

    .hero-btns {
        justify-content: center;
    }

    .step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 768px) {

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }    
}

@media (max-width: 576px) {
    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-btns {
        flex-direction: column;
        width: 100%;
    }

    .hero-btns .btn {
        width: 100%;
    }

    .section-header h2 {
        font-size: 1.75rem;
    }

    .code-window {
        padding: 1rem;
    }

    .code-content {
        font-size: 0.75rem;
    }
}