/* About Page Specific Styles */

.aboutus {
    align-items: flex-end;
}

/* Introduction Section */
.intro-section {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(../images/intro_bg.jpg);
    mix-blend-mode: multiply;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    background-size: 100% auto;
	margin: 0 0 100px 0;
}

.intro-container {
    max-width: 1170px;
    width: 100%;
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    text-align: center;
    color: var(--text-color);
}

.intro-container h2 {
    font-family: var(--font-zen-old-mincho);
    font-size: 2.11rem; /* 38px ÷ 18px = 2.11rem */
    font-weight: 500;
    line-height: 1.4;
    width: 100%;
}

.intro-text {
    font-family: var(--font-zen-old-mincho);
    font-size: var(--text-base);
    line-height: 1.8;
    width: 100%;
}
.intro-text p {
    margin-bottom: 1em;
}

/* Text and Image Sections */
.text-and-image-container {
    max-width: 1170px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    gap: 30px;
}

.text-and-image-container.reverse {
    flex-direction: row-reverse;
}

.text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 611px;
}

.text-content h2 {
    font-family: var(--font-zen-old-mincho);
    font-size: var(--text-4xl);
    font-weight: 500;
    color: var(--primary-brown);
    line-height: 1.4;
}

.text-body h3 {
    font-family: var(--font-zen-old-mincho);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.4;
    margin-bottom: 30px;
}

.text-body p {
    font-family: var(--font-zen-old-mincho);
    font-size: var(--text-base);
    color: var(--text-color);
    line-height: 1.8;
    margin-bottom: 1em;
}

.image-content {
    flex: 1;
    max-width: 500px;
	mix-blend-mode: multiply;
}



/* Section Layouts */
.representative-section,
.name-meaning-section,
.community-section {
    width: 100%;
    display: flex;
    gap: 21px;
    align-items: flex-start;
    justify-content: center;
	margin: 0 0 100px 0;
}
.community-section {
    width: 100%;
    display: flex;
    gap: 21px;
    align-items: flex-start;
    justify-content: center;
	margin: 0;
}



/* About Page Responsive Design */
@media (max-width: 1200px) {

}

@media (max-width: 768px) {
    .aboutus {
        align-items: center;
    }
    
    .intro-container h2 {
        font-size: var(--text-3xl);
    }
    

    

    
    .text-content {
        max-width: none;
    }
    
    .text-content h2 {
        font-size: var(--text-3xl);
    }
    
    .text-body h3 {
        font-size: var(--text-xl);
    }
    
    .image-content {
        max-width: none;
        width: 100%;
    }
    
    .representative-image,
    .name-meaning-image,
    .community-image {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .community-image {
        height: 300px;
    }
    .intro-text {
  text-align: left;
}
.text-and-image-container {
  align-items: flex-start;
}
	  .image-content {
    padding-top: 15vw;
  }
}

@media (max-width: 480px) {
	.page-header-content {
  padding: 0 20px;
}
	.intro-section,.representative-section {
  margin: 0 0 60px 0;
}
	.intro-container,.text-and-image-container {
  padding: 0 20px;
}
	  .image-content {
    padding-top: 0vw;
  }
    .intro-container h2 {
        font-size: var(--text-xl);
    }
    
    .text-content h2 {
        font-size: var(--text-xl);
    }
    
    .text-body h3 {
        font-size: var(--text-lg);
    }
    
    .text-body p,
    .intro-text {
        font-size: var(--text-sm);
    }
	    .text-and-image-container {
        flex-direction: column;
        gap: 30px;
    }
	    .text-and-image-container.reverse {
        flex-direction: column;
    }
}
@media (min-width: 481px) {
	.md-br{
		display: none;
	}
}