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

/* General CSS */
.custom-navbar{
    /* background: rgba(133, 230, 197, 0.3) !important; */
    backdrop-filter: blur(5px);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
header {
    background: url('/header2.jpg') center/cover no-repeat;
    min-height: 100vh; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; 
    z-index: 1;
}

.display-4{
    margin: 0 !important;
    font-weight: bold;
}
.headerGroup{
    margin: 0 !important;
    font-weight: bold;
    /* background: rgba(133, 230, 197, 0.2) !important; */
    backdrop-filter: blur(0.5px);
    padding: 10px 0;
}
#couple {
    position: relative;
    margin-top: -20vh; /* Moves it up by half of the viewport height */
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    background-color: #fff;
   /* background: rgba(255, 255, 255, 0.8); /* Light background for readability */
    /*backdrop-filter: blur(10px); /* Optional: Adds a glass effect */
    border-radius: 15px; /* Makes edges softer */
    /*box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Adds depth */
    width: 80%;
}
#couple p{
    font-size: 0.8rem;
}
#couple .hash{
    font-size: 1.4rem;
}
img.rounded-circle {
    border: 5px solid #fff;
}
h2{
    font-weight: lighter !important;
}
.card {
    border: 0 !important;
    background: transparent !important;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.card-header {
    background-color: #e3e3e3;
    color: #000;
    font-weight: bold;
    text-align: center;
    border: 2px solid #e3e3e3;
    width: 100%;
  }

.card-body {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(2px);
    text-align: center;
    font-size: 0.8rem;
  }

/* Family Members */

#family {
    background-image: url("https://github.com/natzkie88/Wed/raw/refs/heads/main/house.webp");
    background-size: cover;
    background-attachment: fixed;
    -webkit-background-size: cover;
}

#family .section-title {
    font-size: 2.8rem;
    text-align: center;
    color: #fff;
    margin-bottom: 2rem;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
}

#family ul {
    list-style: none;
    padding: 0;
}

#family ul li {
    margin-bottom: 0.5rem;
}

/* sponsors */
.sponsor-item {
    padding: 5px;
    margin: 5px 0;
    box-shadow: 0 2px 4px rgba(218, 255, 251, 0.1);
    color: #333333; 
}

#secondarySponsors {
    background-image: url("/bato.webp");
    background-size: cover;
    background-attachment: fixed;
    -webkit-background-size: cover;
}
@media (max-width: 768px) {
    #secondarySponsors,#family {
      background-position: center center; /* Ensures image stays centered */
    }
  }

.motifContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.circle {
    width: 50px;
    height: 50px;
    background-color: blue;
    border-radius: 50%;
    margin: 0 5px;
}
.bMarginTop {
    margin-top: 50px;
}
.circle:nth-child(1) { background-color: #adebb3; }
.circle:nth-child(2) { background-color: #50C878; }
.circle:nth-child(3) { background-color: #00bb77; }
.circle:nth-child(4) { background-color: #88e788; }
.circle:nth-child(5) { background-color: #228c22; }
.circle:nth-child(6) { background-color: #0BDA51; }
.circle:nth-child(7) { background-color: #90FCCF; }
.circle:nth-child(8) { background-color: #06402b; }
.circle:nth-child(9) { background-color: #84b067; }
.circle:nth-child(10) { background-color: #5d6532; }

.text-border {
    font-size: 40px;
    font-weight: bold;
    color: white; /* Text color */
    -webkit-text-stroke: 1px black; /* Border around the text */
  }
  .hash{
    font-style: italic;
  }