@import url("./Sub-Style/urgent-alert.css");
@import url("./Sub-Style/header.css");
@import url("./Sub-Style/footer.css");
@import url("./Sub-Style/cookie-banner.css");
@import url("./Sub-Style/Home-Hero-Section.css");
@import url("./Sub-Style/accepted-crypto-section.css");
@import url("./Sub-Style/about-key-feature.css");
@import url("./Sub-Style/about-our-team.css");
@import url("./Sub-Style/About-out-story.css");
@import url("./Sub-Style/partnership.css");
@import url("./Sub-Style/Home-news.css");
@import url("./Sub-Style/aid.css");
@import url("./Sub-Style/subscribe.css");
@import url("./Sub-Style/donation-table.css");
@import url("./Sub-Style/expenses-table.css");
@import url("./Sub-Style/cause.css");
@import url("./Sub-Style/gallary.css");
@import url("./Sub-Style/hero.css");
@import url("./Sub-Style/how-to-help.css");
@import url("./Sub-Style/donation.css");


/* General Body and Font Styles */
body {
    font-family: 'Inter', sans-serif;
    color: #333; /* Dark gray for general text */
    background-color: #f5f5f5; /* Light gray background */
    line-height: 1.6; /* Improved readability */
    margin: 0;
    padding: 0;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    color: #1a1a1a; /* Darker gray for headlines */
    line-height: 1.2;
    letter-spacing: -0.02em; /* Tighter letter spacing for headlines */
}

/* General Button Styling */
.btn-primary {
    background-color: #E10000; /* Nike Red */
    color: white;
    padding: 14px 32px; /* Larger padding for emphasis */
    border-radius: 10px; /* More rounded corners */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px; /* More prominent letter spacing */
    box-shadow: 0 5px 15px rgba(225, 0, 0, 0.3); /* Red glow shadow */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-block; /* For proper padding and alignment */
    text-decoration: none; /* Ensure no underline for anchor buttons */
    line-height: 1.5; /* Ensure text sits nicely in the button */
}
.btn-primary:hover {
    background-color: #c00000; /* Darker red on hover */
    transform: translateY(-3px); /* More pronounced lift */
    box-shadow: 0 8px 20px rgba(225, 0, 0, 0.4); /* Stronger shadow on hover */
}
.btn-secondary {
    background-color: #1a1a1a; /* Black */
    color: white;
    padding: 12px 28px; /* Slightly larger padding */
    border-radius: 10px; /* More rounded corners */
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15); /* Subtle shadow */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-block; /* For proper padding and alignment */
    text-decoration: none; /* Ensure no underline for anchor buttons */
    line-height: 1.5; /* Ensure text sits nicely in the button */
}
.btn-secondary:hover {
    background-color: #333; /* Darker gray on hover */
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.25); /* Stronger shadow on hover */
}


/* Responsive Images */
.responsive-img {
    max-width: 100%;
    height: auto;
    border-radius: 12px; /* More rounded corners for images */
    box-shadow: 0 6px 20px rgba(0,0,0,0.1); /* Consistent shadow for images */
}

/* Section Padding and Margins */
main {
    padding-top: 116px; /* Desktop: 44px urgent + 72px header */
}

/* Medium devices (≤767px) */
@media (max-width: 767px) {
    main {
        padding-top: 100px; /* Slightly smaller space on mobile */
    }
}

/* Very small devices (≤360px) */
@media (max-width: 360px) {
    main {
        padding-top: 90px; /* Even tighter on very small screens */
    }
}

section {
    padding: 80px 0; /* Equivalent to Tailwind py-20 */
    margin: 0;
    box-sizing: border-box; /* Ensure padding is included in element's total width */
}
/* This ensures content within sections remains readable and centered */
section > div:not(.absolute) { /* Exclude special absolute positioned elements like hero background */
    max-width: 1200px; /* Equivalent to Tailwind max-w-7xl (for many sections) or specific max-widths */
    margin: 0 auto; /* Center content within the section */
    padding: 0 24px; /* Equivalent to Tailwind px-6 */
    box-sizing: border-box; /* Include padding in element's total width/height */
}


/* Subtle Fade-in Animation for Sections */
.fade-in {
    opacity: 0;
    transform: translateY(30px); /* Greater initial offset */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Slower, smoother transition */
}
.fade-in.appear {
    opacity: 1;
    transform: translateY(0);
}



/* =============================
   Global Spacer Utility
   ============================= */
.spacer {
  display: block;
  width: 100%;
  height: 0.625rem; /* ~10px base */
}

/* Slightly larger space */
.spacer.spacer-md {
  height: 1rem; /* 16px */
}

/* Larger space */
.spacer.spacer-lg {
  height: 1.5rem; /* 24px */
}

/* Extra large space */
.spacer.spacer-xl {
  height: 2rem; /* 32px */
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .spacer {
    height: 0.5rem; /* ~8px on very small devices */
  }
  .spacer.spacer-md {
    height: 0.875rem; /* ~14px */
  }
  .spacer.spacer-lg {
    height: 1.25rem; /* ~20px */
  }
  .spacer.spacer-xl {
    height: 1.75rem; /* ~28px */
  }
}