/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.10.1756993008
Updated: 2025-09-04 13:36:48

*/

/* CSS Variables - AWS Inspired Design System */
:root {
    /* AWS Brand Colors */
    --primary: hsl(28 100% 52%);
    --primary-hover: hsl(28 100% 47%);
    --primary-foreground: hsl(0 0% 100%);
    --primary-light: hsl(28 100% 97%);
    
    /* Teal Accent */
    --teal: hsl(174 77% 56%);
    --teal-light: hsl(174 77% 97%);
    
    /* Neutral Colors */
    --background: hsl(0 0% 100%);
    --foreground: hsl(224 71% 4%);
    --muted: hsl(220 14% 96%);
    --muted-foreground: hsl(220 8% 46%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(224 71% 4%);
    --border: hsl(220 13% 91%);
    --input: hsl(220 13% 91%);
    --ring: hsl(28 100% 52%);
    
    /* Semantic Colors */
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(28 100% 52%), hsl(28 100% 62%));
    --gradient-bg: linear-gradient(135deg, hsl(174 77% 56% / 0.05), hsl(28 100% 52% / 0.05));
    --gradient-overlay: linear-gradient(135deg, hsl(28 100% 52% / 0.05) 0%, hsl(174 77% 56% / 0.05) 100%);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.05);
    --shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.1), 0 8px 10px -6px hsl(0 0% 0% / 0.1);
    --shadow-glow: 0 0 40px hsl(28 100% 52% / 0.15);
    
    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Spacing */
    --container-max-width: 1440px;
    --section-padding: 5rem 1rem;
    
    /* Border Radius */
    --radius: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    
    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}


/* Base Styles */


html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#aws-landing {
	width: 100%;
}

/* Utility Classes */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.section-padding {
    padding: var(--section-padding);
}

.section-grey {
	background: var(--muted);
} 

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.aws-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.aws-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

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

.btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: var(--shadow-glow);
}

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

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

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-icon {
    width: 1rem;
    height: 1rem;
}

/* Navigation */
/* .navigation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: hsl(var(--background) / 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    z-index: 1000;
}

.nav-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--foreground);
}

.nav-logo {
    width: 2rem;
    height: 2rem;
    color: var(--primary);
}

.nav-links {
    display: none;
    gap: 2rem;
}

.nav-link {
    color: var(--muted-foreground);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.nav-link:hover {
    color: var(--primary);
}

.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-toggle span {
    width: 1.5rem;
    height: 2px;
    background: var(--foreground);
    transition: var(--transition);
}

.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    padding: 1rem;
    display: none;
    flex-direction: column;
    gap: 1rem;
}

.mobile-menu.active {
    display: flex;
}

.mobile-link {
    color: var(--muted-foreground);
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 0;
    transition: var(--transition);
}

.mobile-link:hover {
    color: var(--primary);
}
 */
/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: var(--section-padding);
    padding-top: 6rem;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    z-index: 10;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.1;
}

.hero-content {
    position: relative;
    z-index: 20;
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--teal-light);
    border: 1px solid hsl(174 77% 56% / 0.2);
    border-radius: 9999px;
    margin-bottom: 2rem;
}

.badge-icon {
    width: 1rem;
    height: 1rem;
    color: var(--teal);
}

.hero-badge span {
    color: var(--teal);
    font-weight: 500;
    font-size: 0.875rem;
}

.hero-title {
    font-size: clamp(2rem, 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    color: var(--muted-foreground);
    max-width: 48rem;
    margin: 0 auto 3rem;
    line-height: 1.6;
}

.hero-title-suffix {
    display: block;
    margin-top: 0.5em;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 32rem;
    margin: 0 auto 3rem;
}

.hero-feature {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.feature-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
}

.hero-feature span {
    color: var(--muted-foreground);
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
	justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
}

.hero-buttons a:hover {
	color: #ffffff !important;
}

.hero-trust {
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.trust-text {
    color: var(--muted-foreground);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.trust-indicators {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    color: var(--muted-foreground);
}

.trust-indicators span {
    font-weight: 600;
}

.separator {
    display: none;
}

/* Benefits Section */

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

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.25rem;
    color: var(--muted-foreground);
    max-width: 48rem;
    margin: 0 auto;
    line-height: 1.6;
}

.benefits-grid, 
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 4rem;
}

.benefit-card,
.case-studies-card {
    padding: 2rem;
    text-align: center;
    background: var(--card);
    transition: var(--transition);
}

.benefit-card:hover,
.case-studies-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

.benefit-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    background: hsl(var(--primary) / 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.benefit-card:hover .benefit-icon {
    background: hsl(var(--primary) / 0.2);
}

.benefit-icon svg {
    width: 2rem;
    height: 2rem;
    color: var(--primary);
}

.benefit-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.benefit-description, 
.case-studies-description {
	font-size: 0.9rem;
 	font-weight: normal;
    color: var(--muted-foreground);
    line-height: 1.6;
}

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

.stat-card {
    background: var(--card);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--muted-foreground);
}

/* Migration Journey Section */

.journey-visual {
    margin-bottom: 4rem;
}

.journey-image-container {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto;
}

.journey-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.journey-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
}

.journey-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.step-card {
    padding: 2rem;
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.step-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

.step-icon {
    width: 3rem;
    height: 3rem;
    background: hsl(var(--primary) / 0.1);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.step-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
}

.step-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.step-description {
	font-size: 0.9rem;
  	font-weight: normal;
    color: var(--muted-foreground);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.step-details {
    list-style: none;
    padding: 0;
}

/* .step-details li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.step-details li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: 600;
} */



/* CASE STUDIES Section */

.case-studies-title { 
   color: var(--primary);
	margin-bottom: 1rem;
}




/* TOOLS and SERVICES Section */

.tools-services .section-title { 
	text-align: start;
}

.tools-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.tools-intro .tools-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #222;
}

.tools-intro .tools-description {
  font-size: 16px;
  line-height: 1.6;
  color: #444;
}

.tools-list ul, 
.partner-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tools-list li, 
.partner-list li {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  position: relative;
  padding-left: 20px;
}

.tools-list li::before, 
.partner-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: #ff9900;
  font-weight: bold;
}

.tools-list strong {
  color: #111;
}

/* MIGRATION OUTCOMES Section */
.migration-outcomes .stat-value {
	font-size: 1.2rem;
}

/* ROI Section */
.roi .benefit-card {
	border: 1px solid var(--primary);
}

/* READY TO START Section */
.container_ready-to-start {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.ready-to-start-buttons {
	display: flex;
	justify-content: center;
}

.contact-form_ready-to-start {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}

.contact-form_ready-to-start label {
    display: block;
    margin-bottom: 15px;
    font-weight: 500;
    color: #333;
}

.contact-form_ready-to-start textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    height: 80px;
    max-height: 120px;
    min-height: 60px;
}

.contact-form_ready-to-start input[type="submit"] {
    display: block;
    margin: 20px auto 0 auto;
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form_ready-to-start input[type="submit"]:hover {
    background-color: var(--primary-hover);
}


/* FAQ Section */

.faq-list {
    max-width: 48rem;
    margin: 0 auto 4rem;
}

.faq-item {
    background: var(--card);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.faq-question {
    width: 100%;
    padding: 1.5rem;
    background: none;
    border: none;
	border-radius: var(--radius-lg);
    text-align: left;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.faq-question:hover {
    background: var(--muted);
	border-radius: var(--radius-lg);
}

.faq-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: max-content;
}

.faq-content {
    padding: 1.5rem 1.5rem;
    color: var(--muted-foreground);
    line-height: 1.6;
	height: max-content;
}

/* .faq-cta {
    text-align: center;
}

.faq-cta-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.faq-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
	justify-content: center;
} */

/* Contact Section */

.contact-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 60rem;
    margin: 0 auto;
}

.contact-option {
    padding: 2rem;
    background: var(--card);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.contact-option:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-2px);
}

.contact-icon {
    width: 3rem;
    height: 3rem;
    background: hsl(var(--primary) / 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.contact-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
}

.contact-option h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.contact-option p {
    color: var(--muted-foreground);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}


/* Responsive Design */

@media (max-width: 768px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .tools-intro {
    margin-bottom: 20px;
  }
}

@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row;
    }
    
    .separator {
        display: inline;
    }
    
    .faq-cta-buttons {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .benefits-grid, .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .journey-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-options {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .benefits-grid, .case-studies-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .journey-steps {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--muted);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-hover);
}