@import "tailwindcss";

@tailwind base;
@tailwind components;
@tailwind utilities;

header {
  position: fixed;
  top: 1rem;
  left: 2rem;
  right: 2rem;
  height: 80px;
  z-index: 1000;
  background-image: url("/static/images/backgrounds/header_bg.png");
  /* background-repeat: no-repeat; */
  background-size: cover;
  background-position: left;
}

@media screen and (max-width: 430px) {
  header {
    inset: 0;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  color: #02443a;
  font-family: "Nave", sans-serif;
  width: 100%;
  overflow-x: hidden;

}

.font-rough {
  font-family: "citrus-gothic-rough", sans-serif;
  /* Example custom font */
}

.font-deva {
  font-family: "stadio-now-deva-variable", sans-serif !important;
  font-variation-settings: "wght" 800;
  /* Example custom font */
}

/* --- Shared Styles --- */
.section-bg-light {
  background-color: #fff;
  /* Off-white background */
  /* background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d1d1c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E"); */
}

.heading-bharat-red {
  color: #dc2626;
  /* Tailwind red-600 */
}

.heading-vision-green {
  color: #15803d;
  /* Tailwind green-700 */
}

.text-brand-pink {
  color: #ec4899;
  /* Tailwind pink-500 */
}

.border-brand-pink {
  border-color: #fbcfe8;
  /* Tailwind pink-100 */
}

/* Custom teal color for final section */
.text-brand-teal {
  color: #0d9488;
  /* Tailwind teal-600 */
}

.bg-brand-teal {
  background-color: #0d9488;
  /* Tailwind teal-600 */
}

.hover\:bg-brand-teal-dark:hover {
  background-color: #0f766e;
  /* Tailwind teal-700 */
}

/* --- Jagged Border Styles --- */
.jagged-top-red-bg {
  position: relative;
  margin-top: 10px;
}

.jagged-top-red-bg::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,10 10,0 20,10 30,0 40,10 50,0 60,10 70,0 80,10 90,0 100,10' fill='%23c53030'/%3E%3C/svg%3E");
  /* Red */
  background-repeat: repeat-x;
  z-index: 10;
}

.jagged-bottom-red-border {
  position: relative;
  overflow: visible;
  z-index: 5;
}

.jagged-bottom-red-border::after {
  background: #b22e1e;
  content: "";
  position: absolute;
  bottom: -23px;
  left: 0;
  width: 100%;
  height: 24px;
  clip-path: polygon(
      /* Top edge (was bottom edge) */
      0% 0%,
      /* Was 0% 100% */
      100% 0%,

      /* Was 100% 100% */
      /* Bottom jagged edge (peaks pointing UP) (was top jagged edge) */
      100% 100%,
      /* Was 100% 0% (peak) */
      98% 0%,
      /* Was 98% 100% (valley) */
      96% 100%,
      /* Was 96% 0% (peak) */
      94% 0%,
      /* Was 94% 100% (valley) */
      92% 100%,
      /* Was 92% 0% (peak) */
      90% 0%,
      88% 100%,
      86% 0%,
      84% 100%,
      82% 0%,
      80% 100%,
      78% 0%,
      76% 100%,
      74% 0%,
      72% 100%,
      70% 0%,
      68% 100%,
      66% 0%,
      64% 100%,
      62% 0%,
      60% 100%,
      58% 0%,
      56% 100%,
      54% 0%,
      52% 100%,
      50% 0%,
      48% 100%,
      46% 0%,
      44% 100%,
      42% 0%,
      40% 100%,
      38% 0%,
      36% 100%,
      34% 0%,
      32% 100%,
      30% 0%,
      28% 100%,
      26% 0%,
      24% 100%,
      22% 0%,
      20% 100%,
      18% 0%,
      16% 100%,
      14% 0%,
      12% 100%,
      10% 0%,
      8% 100%,
      6% 0%,
      4% 100%,
      /* Was 4% 0% (peak) */
      2% 0%,
      /* Was 2% 100% (valley) */
      0% 100%
      /* Was 0% 0% (peak) */
      /* Implicitly closes back to 0% 0% */
    );
}

.jagged-bottom-light-bg {
  position: relative;
  overflow: visible;
  background-image: url("/static/images/backgrounds/brown_paper.png");
  background-size: cover;
  background-position: center center;
}


.jagged-bottom-red-border::before {
  background: #b22e1e;
  z-index: 1;
  content: "";
  position: absolute;
  top: -23px;
  left: 0;
  width: 100%;
  height: 24px;
  clip-path: polygon(
      /* Define bottom edge (originally top edge) */
      0% 100%,
      /* Was top-left, now bottom-left */
      100% 100%,

      /* Was top-right, now bottom-right */
      /* Define top jagged edge (right-to-left) (originally bottom jagged edge) */
      100% 0%,
      /* Was bottom-right, now top-right base point */
      98% 100%,
      /* Was peak, now valley point */
      96% 0%,
      /* Was base, now peak point */
      94% 100%,
      /* Was peak, now valley point */
      92% 0%,
      /* Was base, now peak point */
      90% 100%,
      88% 0%,
      86% 100%,
      84% 0%,
      82% 100%,
      80% 0%,
      78% 100%,
      76% 0%,
      74% 100%,
      72% 0%,
      70% 100%,
      68% 0%,
      66% 100%,
      64% 0%,
      62% 100%,
      60% 0%,
      58% 100%,
      56% 0%,
      54% 100%,
      52% 0%,
      50% 100%,
      48% 0%,
      46% 100%,
      44% 0%,
      42% 100%,
      40% 0%,
      38% 100%,
      36% 0%,
      34% 100%,
      32% 0%,
      30% 100%,
      28% 0%,
      26% 100%,
      24% 0%,
      22% 100%,
      20% 0%,
      18% 100%,
      16% 0%,
      14% 100%,
      12% 0%,
      10% 100%,
      8% 0%,
      6% 100%,
      4% 0%,
      /* Was base, now peak point */
      2% 100%,
      /* Was peak, now valley point */
      0% 0%
      /* Was bottom-left, now top-left base point */
      /* Implicitly closes back to 0% 100% */
    );
}

.jagged-bottom-light-bg::before {
  content: "";
  position: absolute;
  top: -23px;
  left: 0;
  width: 100%;
  height: 24px;
  background: #e5d8ca;
  /* Background of the section above */
  clip-path: polygon(
      /* Define bottom edge (originally top edge) */
      0% 100%,
      /* Was top-left, now bottom-left */
      100% 100%,

      /* Was top-right, now bottom-right */
      /* Define top jagged edge (right-to-left) (originally bottom jagged edge) */
      100% 0%,
      /* Was bottom-right, now top-right base point */
      98% 100%,
      /* Was peak, now valley point */
      96% 0%,
      /* Was base, now peak point */
      94% 100%,
      /* Was peak, now valley point */
      92% 0%,
      /* Was base, now peak point */
      90% 100%,
      88% 0%,
      86% 100%,
      84% 0%,
      82% 100%,
      80% 0%,
      78% 100%,
      76% 0%,
      74% 100%,
      72% 0%,
      70% 100%,
      68% 0%,
      66% 100%,
      64% 0%,
      62% 100%,
      60% 0%,
      58% 100%,
      56% 0%,
      54% 100%,
      52% 0%,
      50% 100%,
      48% 0%,
      46% 100%,
      44% 0%,
      42% 100%,
      40% 0%,
      38% 100%,
      36% 0%,
      34% 100%,
      32% 0%,
      30% 100%,
      28% 0%,
      26% 100%,
      24% 0%,
      22% 100%,
      20% 0%,
      18% 100%,
      16% 0%,
      14% 100%,
      12% 0%,
      10% 100%,
      8% 0%,
      6% 100%,
      4% 0%,
      /* Was base, now peak point */
      2% 100%,
      /* Was peak, now valley point */
      0% 0%
      /* Was bottom-left, now top-left base point */
      /* Implicitly closes back to 0% 100% */
    );
}

.jagged-bottom-light-bg::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 24px;
  background: #e5d8ca;
  /* Background of the section above */
  clip-path: polygon(
      /* Top straight edge */
      0% 0%, 100% 0%,
      /* Bottom jagged edge (peaks pointing UP) */
      100% 100%, 98% 0%, 96% 100%, 94% 0%, 92% 100%, 90% 0%, 88% 100%,
      86% 0%, 84% 100%, 82% 0%, 80% 100%, 78% 0%, 76% 100%, 74% 0%,
      72% 100%, 70% 0%, 68% 100%, 66% 0%, 64% 100%, 62% 0%, 60% 100%,
      58% 0%, 56% 100%, 54% 0%, 52% 100%, 50% 0%, 48% 100%, 46% 0%,
      44% 100%, 42% 0%, 40% 100%, 38% 0%, 36% 100%, 34% 0%, 32% 100%,
      30% 0%, 28% 100%, 26% 0%, 24% 100%, 22% 0%, 20% 100%, 18% 0%,
      16% 100%, 14% 0%, 12% 100%, 10% 0%, 8% 100%, 6% 0%, 4% 100%,
      2% 0%, 0% 100%);
}


@media screen and (max-width: 430px) {

  .jagged-bottom-light-bg::after,
  .jagged-bottom-red-border::after {
    clip-path: polygon(
        /* Top straight edge */
        0% 0%, 100% 0%,
        /* Simplified bottom jagged edge (peaks pointing UP) */
        100% 100%,
        /* Bottom right corner */
        90% 0%,
        /* Peak */
        80% 100%,
        /* Valley */
        70% 0%,
        /* Peak */
        60% 100%,
        /* Valley */
        50% 0%,
        /* Peak */
        40% 100%,
        /* Valley */
        30% 0%,
        /* Peak */
        20% 100%,
        /* Valley */
        10% 0%,
        /* Peak */
        0% 100%
        /* Bottom left corner */
      );
  }

  .jagged-bottom-light-bg::before,
  .jagged-bottom-red-border::before {
    clip-path: polygon(
        /* Top jagged edge (peaks pointing DOWN) */
        0% 0%,
        /* Top left peak */
        10% 100%,
        /* Valley */
        20% 0%,
        /* Peak */
        30% 100%,
        /* Valley */
        40% 0%,
        /* Peak */
        50% 100%,
        /* Valley */
        60% 0%,
        /* Peak */
        70% 100%,
        /* Valley */
        80% 0%,
        /* Peak */
        90% 100%,
        /* Valley */
        100% 0%,
        /* Top right peak */
        /* Bottom straight edge */
        100% 100%,
        /* Bottom right corner */
        0% 100%
        /* Bottom left corner */
      );
  }
}

/* Jagged borders for the final section (yellow) */
.jagged-top-yellow {
  position: relative;
  margin-top: 10px;
}

.jagged-top-yellow::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,10 10,0 20,10 30,0 40,10 50,0 60,10 70,0 80,10 90,0 100,10' fill='%23facc15'/%3E%3C/svg%3E");
  /* Yellow-400 */
  background-repeat: repeat-x;
  z-index: 10;
}

.jagged-bottom-yellow {
  position: relative;
  padding-bottom: 10px;
}

/* Add padding for space */
.jagged-bottom-yellow::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 10,10 20,0 30,10 40,0 50,10 60,0 70,10 80,0 90,10 100,0' fill='%23facc15'/%3E%3C/svg%3E");
  /* Yellow-400 */
  background-repeat: repeat-x;
  z-index: 10;
}

/* --- Section 3 Styles --- */
.quatrefoil-frame {
  width: 200px;
  height: 200px;
  clip-path: url(#quatrefoil-clip);
  overflow: hidden;
  margin: 0 auto;
  background-color: #e2e8f0;
}

.quatrefoil-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Section 4 Styles --- */
.rotated-image-left {
  transform: rotate(-5deg);
  border: 4px solid white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.rotated-image-right {
  transform: rotate(5deg);
  border: 4px solid white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Updated heading font style for section 4 */
.heading-nation-building {
  /* font-family: "Rock Salt", cursive; */
  /* Using Rock Salt as 'rough' font */
  /* font-weight: 900; */
  /* Rock Salt is typically one weight */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- Section 5 (Partner) Styles --- */
.partner-section-top-border {
  background-image: url("/static/images/backgrounds/partner_with_us.png");
  background-repeat: no-repeat;
  /* height: 10px;
  border-top: 2px dashed #fbcfe8;
  margin-bottom: 2rem; */
}

.partner-card {
  background-color: white;
  border: 2px solid #c47ea6;
  padding: 1.5rem;
  height: 100%;
  border-top-left-radius: 2rem;
  border-bottom-right-radius: 2rem;
}

/* --- Section 6 (Join Movement) Styles --- */
.yellow-banner {
  /* background-color: #f3bb44; */
  /* yellow-300 */
  display: inline-block;
  padding: 0.75rem 2rem;
  /* border-radius: 0.5rem; */
  /* rounded-lg */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  margin: 2rem 0;
  /* border: 2px solid #facc15; */
  background-image: url("/static/images/backgrounds/yellow_frame.png");
  background-size: cover;
  /* yellow-400 */
}

body>section>.container {
  /* max-width: 90vw; */
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 430px) {
  body>section>.container {
    max-width: 430px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
  }
}

.dotted-border-blue {
  border-bottom: 2px dotted #3b82f6;
}

.bg-grunge {
  background-image: url("/static/images/backgrounds/grunge.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.line-border {
  position: absolute;
  inset: 0;
  background-image: url("/static/images/borders/border.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@media screen and (max-width: 430px) {
  .line-border {
    background-image: url("/static/images/borders/border-sm.png");
  }
}

.stat-container {
  background-image: url("/static/images/backgrounds/bg-flower.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.bg-join-us {
  background-image: url("/static/images/backgrounds/join_us_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top;
}

@media screen and (max-width: 430px) {
  .bg-join-us {
    background-image: url("/static/images/backgrounds/join_us_sm.png");
  }
}

.bg-bs-event {
  background-image: url("/static/images/backgrounds/bharat_sparks.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top;
}

@media screen and (max-width: 430px) {
  .bg-bs-event {
    background-image: url("/static/images/backgrounds/bharat_sparks_sm.png");
  }
}

.overlay-bs-event {
  background-color: #000;
  opacity: 0.5;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media screen and (min-width: 431px) {
  .hero {
    background-image: url("/static/images/backgrounds/hero.png");
    background-repeat: no-repeat;
    background-size: cover;
  }
}

@media screen and (max-width: 430px) {
  .hero {
    background-image: url("/static/images/backgrounds/grunge.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.hero {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
}

.hero-bottom {
  position: absolute;
  bottom: 0;
  background-image: url("/static/images/backgrounds/hero_bottom.png");
  background-repeat: no-repeat;
  height: 200px;
  width: 100%;
  background-size: cover;
}

.hero-top {
  position: absolute;
  top: 0;
  background-image: url("/static/images/backgrounds/hero_top.png");
  background-repeat: no-repeat;
  height: 200px;
  width: 100%;
  background-size: cover;
}

@media screen and (max-width: 430px) {
  .bg-hero-image {
    background-image: url("/static/images/backgrounds/hero_sm.png");
  }
}

.mobile-menu {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease-in-out;
}

@media screen and (max-width: 430px) {
  section {
    padding-top: 7rem !important;
  }
}

/* Bihar Idea Page Styles */
.header-bg {
  background-image: url("/static/images/bihar/header-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.main-background {
  background-image: url("/static/images/bihar/bihar-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.organisers-bg {
  background-image: url("/static/images/bihar/organisers-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: -1rem;
}

.partner-background {
  background-image: url("/static/images/bihar/partner-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  position: relative;
  top: -1rem;
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.partner-logo:hover {
  transform: scale(1.05);
}

.bihar-festival-bg {
  background-color: #F7ECDE;
}

.text-coffee {
  color: #F9F5B6;
}

.mission-bg {
  background-image: url("/static/images/bihar/mission-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.partner-bg {
  background-image: url("/static/images/bihar/support-partner-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.districts-bg {
  background-image: url("/static/images/bihar/Districts-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 722px;
  margin-top: -2rem;
}

.udaan-bg {
  background-image: url("/static/images/bihar/udaan-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}


.pillar-border {
  background-image: url("/static/images/bihar/pillar-border.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.movement-background {
  background-image: url("/static/images/bihar/movement-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: -1rem;
}

.font-Laila {
  font-family: 'Laila', sans-serif;
}


@media screen and (min-width: 430px) {
  .districts-bg {
    height: auto;
  }
}
