/* Custom Styles for Dream Excello Landing Page */

:root {
    --primary: #172554; /* Blue 950 */
    --accent: #f59e0b;  /* Amber 500 */
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Noto Sans Tamil', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* Tamil Typography Optimization - Clean and Readable */
.tamil-font {
    font-family: 'Noto Sans Tamil', sans-serif;
    font-size: 17px; /* Range 16-18px */
    line-height: 1.75; /* Range 1.6-1.75 */
    letter-spacing: normal;
}

/* Adjustments for specific headings or large text containers */
h1 .tamil-font {
    font-size: clamp(18px, 4.5vw, 28px);
    line-height: 1.6;
    font-weight: 700;
}

section h2 .tamil-font {
    font-size: 19px;
    font-weight: 700;
}

/* Alignment Fixes for Lists */
.flex.items-start {
    display: flex;
    align-items: flex-start;
    text-align: left;
}

/* Spacing between bullet and text (8-10px) */
.gap-2.5 { gap: 10px; }
.gap-3 { gap: 12px; }

/* Section Specific Styles */

/* 1. Plot Features */
.feature-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}
.feature-card:hover {
    border-left-color: #10b981; /* emerald-500 */
    transform: translateX(4px);
}
.feature-icon svg {
    margin-top: 0.15rem; /* Precise top alignment with text baseline */
}

/* 2. Location Advantages */
.location-bullet svg {
    margin-top: 0.2rem; /* Align with first line of bold text */
}

/* 3. Daily Life Convenience */
.convenience-item {
    transition: background-color 0.2s ease;
}
.convenience-item:hover {
    background-color: rgba(239, 246, 255, 1); /* blue-50 */
}
.convenience-icon svg {
    margin-top: 0.25rem; /* Align with first line */
}

/* 4. Holy Places Devotional Styling */
.holy-icon-container {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.holy-card:hover .holy-icon-container {
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.4);
}

.holy-card {
    cursor: default;
}

/* Bullet sizing and alignment nudge for generic bullets */
.custom-bullet {
    width: 8px;
    height: 8px;
    margin-top: 0.65em;
    flex-shrink: 0;
}

/* Space reduction: Tightening vertical margins as requested */
section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
    section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

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

.animate-fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.5s ease-out forwards;
}

/* Gentle Attention Animation: Professional, triggered at footer once */
@keyframes gentle-attention {
    0% { transform: translateY(0) scale(1); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
    30% { transform: translateY(-8px) scale(1.08); box-shadow: 0 30px 40px -10px rgba(37, 211, 102, 0.4); }
    50% { transform: translateY(-2px) scale(1.05); }
    70% { transform: translateY(-5px) scale(1.07); }
    100% { transform: translateY(0) scale(1); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1); }
}

.animate-gentle {
    animation: gentle-attention 1.3s ease-out forwards !important;
}

#whatsapp-float {
    transition: opacity 0.4s ease, transform 0.3s ease;
}

/* Header state on scroll */
#main-header.scrolled {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    background-color: rgba(255, 255, 255, 0.98);
}

/* Mobile-first refinements */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .tamil-font {
        font-size: 16px;
    }
    /* Reduce heading content gap specifically on mobile */
    .text-center.mb-10, .text-center.mb-12, .text-center.mb-6 {
        margin-bottom: 1.5rem !important;
    }
}