/* style.css */

/* Base styles for body and typography */
body {
    font-family: 'Inter', sans-serif; /* Apply Inter font from Google Fonts */
    background-color: #f8fafc; /* Very light gray background for clean sections */
    color: #1e293b; /* Dark Slate 900 for general text for strong contrast */
}

/* Responsive Padding for Sections */
.section-padding {
    padding: 4rem 1rem; /* Default padding for small screens (py-16 px-4) */
}

/* Medium screens and up (md breakpoint in Tailwind) */
@media (min-width: 768px) {
    .section-padding {
        padding: 6rem 2rem; /* Increased padding for larger screens (md:py-24 md:px-8) */
    }
}

/* Large screens and up (lg breakpoint in Tailwind) */
@media (min-width: 1024px) {
    .section-padding {
        padding: 8rem 4rem; /* Even more padding for very large screens */
    }
}

/* Primary Button Styling */
.btn-primary {
    display: inline-block;
    background-color: #2563eb; /* Tailwind Blue 600 - a vibrant techy blue */
    color: #ffffff; /* White text */
    padding: 0.75rem 2rem; /* px-8 py-3 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
    transform: translateY(0); /* Initial state for hover effect */
    font-weight: 600; /* font-semibold */
    font-size: 1.125rem; /* text-lg */
    text-decoration: none; /* Remove underline from links */
    border: none; /* Ensure no default button border */
    cursor: pointer; /* Indicate clickable */
}

.btn-primary:hover {
    background-color: #1d4ed8; /* Tailwind Blue 700 - darker blue on hover */
    transform: translateY(-0.25rem); /* hover:-translate-y-1 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); /* focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 */
}

/* Secondary Button Styling (specifically for white buttons in the hero section) */
.btn-secondary-hero {
    display: inline-block;
    background-color: #ffffff; /* White background */
    color: #2563eb; /* Tailwind Blue 600 text */
    padding: 0.75rem 2rem; /* px-8 py-3 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
    transform: translateY(0); /* Initial state for hover effect */
    font-weight: 600; /* font-semibold */
    font-size: 1.125rem; /* text-lg */
    text-decoration: none; /* Remove underline from links */
    border: none; /* Ensure no default button border */
    cursor: pointer; /* Indicate clickable */
}

.btn-secondary-hero:hover {
    background-color: #f3f4f6; /* Gray 100 */
    transform: translateY(-0.25rem); /* hover:-translate-y-1 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-xl */
}

.btn-secondary-hero:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); /* focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 */
}

/* Card Styling */
.card {
    background-color: #ffffff; /* White background */
    border-radius: 1rem; /* rounded-2xl */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
    padding: 2rem; /* p-8 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
    transform: translateY(0); /* Initial state for hover effect */
    border: 1px solid #e2e8f0; /* Light Slate 200 border for subtle definition */
}

.card:hover {
    transform: translateY(-0.5rem); /* hover:-translate-y-2 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* hover:shadow-2xl */
}

/* Form Input Styling */
.form-input {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    appearance: none; /* Remove default browser styling */
    border: 1px solid #94a3b8; /* Slate 400 border for a slightly techier look */
    border-radius: 0.5rem; /* rounded-lg */
    width: 100%;
    padding: 0.75rem 1rem; /* py-3 px-4 */
    color: #1f2937; /* Gray 800 text */
    line-height: 1.5; /* leading-tight */
    transition-property: all;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */
}

.form-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* focus:ring-2 focus:ring-blue-500 */
    border-color: #2563eb; /* Blue 600 border on focus */
}

/* Hero Section Specific Gradient Adjustment for Techy Blue */
/* This overrides the Tailwind classes directly in the HTML for the gradient */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, #2563eb, #1e40af); /* Blue 600 to Blue 800 */
}

/* Adjustments for specific elements to match techy blue theme */
/* Top Header Bar */
.bg-blue-800 { /* This class is used in topHeaderBarHTML */
    background-color: #1e40af; /* Tailwind Blue 800 */
}
.hover\:text-blue-200:hover { /* Used in topHeaderBarHTML for links */
    color: #bfdbfe; /* Tailwind Blue 200 */
}


/* Logo/Company Name */
.text-blue-700 {
    color: #1d4ed8 !important; /* Darker blue for logo for prominence */
}

/* Link colors in navigation and text */
.text-blue-600 {
    color: #2563eb; /* Standard techy blue for links */
}

.hover\:text-blue-600:hover {
    color: #2563eb;
}

.hover\:text-blue-800:hover {
    color: #1e40af; /* Darker blue on hover for links */
}

/* Bullet points in About section */
.about-values-list li span:first-child {
    color: #2563eb; /* Techy blue for bullet points */
}

/* Specific Footer Styling (for elements not directly covered by Tailwind defaults) */
footer .text-blue-400 {
    color: #60a5fa; /* Tailwind Blue 400 for accents in footer */
}

footer .hover\:text-blue-200:hover {
    color: #bfdbfe; /* Tailwind Blue 200 on hover for footer links */
}

footer .no-underline {
    text-decoration: none; /* Ensure links remain without underline */
}

/* Adjustments for Font Awesome icons within footer */
footer i.fas, footer i.fab {
    color: inherit; /* Inherit color from parent link/text */
}