* {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
}

html {
       scroll-behavior: smooth;
}

body {
       font-family: Arial, sans-serif;
       background: #f7f9fc;
       color: #222;
       line-height: 1.6;
}

/* NAVIGATION */

nav {
       background: #ffffff;
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 10px 6%;
       position: sticky;
       top: 0;
       z-index: 1000;
       box-shadow: 0 2px 15px rgba(0,0,0,.12);
}

.nav-logo img {
       height: 65px;
       width: auto;
       display: block;
}

nav ul {
       display: flex;
       list-style: none;
       gap: 22px;
       align-items: center;
}

nav a {
       color: #174c80;
       text-decoration: none;
       font-weight: bold;
}

nav a:hover {
       color: #2872c9;
}

/* HERO */

.hero {
       min-height: 600px;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       padding: 60px 20px;
       background: linear-gradient(
              135deg,
              #174c80,
              #2872c9
       );
       color: white;
}

.hero-content {
       max-width: 850px;
}

.hero-logo {
       width: 300px;
       max-width: 80%;
       background: white;
       border-radius: 20px;
       padding: 15px;
       margin-bottom: 25px;
}

.hero h1 {
       font-size: 60px;
       margin-bottom: 15px;
}

.hero p {
       font-size: 22px;
       margin-bottom: 30px;
}


/* BUTTONS */

.button {
       display: inline-block;
       background: #ffd54f;
       color: #174c80;
       padding: 15px 28px;
       border-radius: 30px;
       text-decoration: none;
       font-weight: bold;
       margin: 5px;
       transition: 0.2s;
}

.button:hover {
       transform: scale(1.05);
}

.button-outline {
       background: transparent;
       color: white;
       border: 2px solid white;
}

/* GENERAL SECTIONS */

section {
       padding: 80px 10%;
}

.section-title {
       text-align: center;
       margin-bottom: 45px;
}

.section-title h2 {
       color: #174c80;
       font-size: 40px;
}

.section-title p {
       color: #666;
       margin-top: 10px;
}


/* HOME CARDS */

.home-cards {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 25px;
}

.card {
       background: white;
       padding: 30px;
       border-radius: 15px;
       text-align: center;
       box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.card h3 {
       color: #174c80;
       margin-bottom: 10px;
}

.card-icon {
       font-size: 45px;
       margin-bottom: 15px;
}
.event-card {
       background: white;
       padding: 30px;
       border-radius: 15px;
       text-align: center;
       box-shadow: 0 5px 20px rgba(0,0,0,.08);
       width: 80%;
       margin: 0 auto;
}



/* GOAL */

.goal-section {
       background: linear-gradient(
              135deg,
              #174c80,
              #2872c9
       );
       color: white;
       text-align: center;
}

.goal-section h2 {
       font-size: 40px;
}

.goal-number {
       font-size: 60px;
       font-weight: bold;
       color: #ffd54f;
       margin: 20px 0;
}

.progress-container {
       max-width: 800px;
       margin: 30px auto;
}

.progress-bar {
       width: 100%;
       height: 30px;
       background: rgba(255,255,255,.3);
       border-radius: 30px;
       overflow: hidden;
}

.progress {
       width: 1.31%;
       height: 100%;
       background: #ffd54f;
       border-radius: 30px;
}


/* SPONSORS */

.sponsor-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
       gap: 25px;
}

.sponsor {
       background: white;
       padding: 40px 20px;
       text-align: center;
       border-radius: 15px;
       box-shadow: 0 5px 20px rgba(0,0,0,.08);
       margin: 100px;
       

}

.sponsor-logo {
       width: 100px;
       height: 100px;
       background: #eaf1f8;
       border-radius: 50%;
       margin: 0 auto 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 35px;
}

/* PRIZES */

.prizes-container {
       max-width: 800px;
       margin: auto;
}

.prize-textbox {
       width: 100%;
       min-height: 250px;
       padding: 25px;
       font-size: 18px;
       font-family: Arial, sans-serif;
       color: #333;
       background: #ffffff;
       border: 2px dashed #174c80;
       border-radius: 15px;
       box-shadow: inset 0 3px 10px rgba(0,0,0,0.05);
       resize: vertical;
       outline: none;
       transition: 0.3s border-color;
}

.prize-textbox:focus {
       border-color: #ffd54f;
       border-style: solid;
}


/* DONORS */

.donor-list {
       max-width: 800px;
       margin: auto;
}

.donor {
       display: flex;
       justify-content: space-between;
       align-items: center;
       background: white;
       padding: 20px 25px;
       margin-bottom: 15px;
       border-radius: 12px;
       box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

.rank {
       font-size: 24px;
       font-weight: bold;
       color: #174c80;
       width: 60px;
}

.donor-name {
       flex: 1;
       font-weight: bold;
}

.donation {
       color: #159947;
       font-size: 20px;
       font-weight: bold;
}


/* ABOUT */

.about-box {
       max-width: 900px;
       margin: auto;
       background: white;
       padding: 45px;
       border-radius: 20px;
       box-shadow: 0 5px 20px rgba(0,0,0,.08);
}


/* FAQ */

.faq-container {
       max-width: 850px;
       margin: auto;
}

.faq {
       background: white;
       margin-bottom: 15px;
       border-radius: 12px;
       padding: 25px;
       box-shadow: 0 3px 12px rgba(0,0,0,.08);
}

.faq h3 {
       color: #174c80;
       margin-bottom: 10px;
}


/* FOOTER */

footer {
       background: #102f50;
       color: white;
       text-align: center;
       padding: 40px 20px;
}


/* MOBILE */

@media (max-width: 800px) {

       nav {
              flex-direction: column;
              gap: 12px;
       }
       
       nav ul {
              flex-wrap: wrap;
              justify-content: center;
              gap: 12px;
       }
       
       .hero h1 {
              font-size: 42px;
       }
       
       .hero p {
              font-size: 18px;
       }
       
       section {
              padding: 60px 6%;
       }
       
       .donor {
              padding: 15px;
       }
}