/* Main Content Styles */
#main {
  /* Hero Section */
  .heroSection {
    background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
    color: #333;
    padding: 0;
    margin-top: -120px;
    padding-top: 120px;
    position: relative;
    overflow: hidden;
    
    .heroContent {
      position: relative;
      
      .heroImage {
        position: relative;
        
        img {
          width: 100%;
          height: auto;
          object-fit: cover;
          object-position: center top;
          transform: scale(1.1);
          opacity: 0.8;
          filter: contrast(1.1) saturate(0.9);
        }
        
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 100%);
        }
      }
      
      .heroText {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;
        
        h2 {
          font-size: 3rem;
          margin-bottom: 24px;
          font-weight: 100;
          color: white;
          letter-spacing: 0.1em;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        p {
          font-size: 1.25rem;
          opacity: 0.9;
          margin-bottom: 0;
          color: white;
          font-weight: 300;
          letter-spacing: 0.05em;
          text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
        }
      }
    }
  }
  
  /* Greeting Section */
  .greetingSection {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
    }
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .greetingContent {
        display: grid;
        grid-template-columns: 400px 1fr;
        gap: 48px;
        align-items: start;
        
        .priestImage {
          img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            transition: all 0.3s ease;
            
            &:hover {
              transform: translateY(-4px);
              box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            }
          }
        }
        
        .greetingText {
          h3 {
            color: #333;
            margin-bottom: 32px;
            font-size: 1.5rem;
            font-weight: 300;
            letter-spacing: 0.05em;
          }
          
          p {
            font-size: 1.1rem;
            line-height: 1.3;
            margin-bottom: 12px;
            font-weight: 300;
            letter-spacing: 0.02em;
          }
        }
      }
    }
  }
  
  /* About Section */
  .aboutSection {
    background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
    }
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .aboutContent {
        display: grid;
        grid-template-columns: 1fr 600px;
        gap: 48px;
        align-items: center;
        
        .aboutText {
          max-width: 600px;
          
          p {
            font-size: 1.1rem;
            line-height: 1.3;
            margin-bottom: 12px;
            font-weight: 300;
            letter-spacing: 0.02em;
          }
        }
        
        .templeImage {
          img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            transition: all 0.3s ease;
            
            &:hover {
              transform: translateY(-4px);
              box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
            }
          }
        }
      }
    }
  }
  
  /* News Section */
  .newsSection {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .newsContent {
        max-width: 800px;
        margin: 0 auto;
        
        .newsItem {
          background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
          padding: 32px;
          border-radius: 8px;
          border-left: 4px solid transparent;
          border-image: linear-gradient(135deg, #333 0%, #666 100%) 1;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
          transition: all 0.3s ease;
          
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
          }
          
          time {
            color: #333;
            font-weight: 400;
            font-size: 0.9rem;
            letter-spacing: 0.05em;
          }
          
          h3 {
            color: #333;
            margin: 16px 0;
            font-weight: 300;
            letter-spacing: 0.05em;
          }
          
          p {
            margin-bottom: 0;
            line-height: 1.6;
            font-weight: 300;
            letter-spacing: 0.02em;
          }
        }
      }
    }
  }
  
  /* Funeral Section */
  .funeralSection {
    background: #f9f9f9;
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .funeralContent {
        display: grid;
        grid-template-columns: 1fr 500px;
        gap: 48px;
        align-items: center;
        
        .funeralText {
          p {
            font-size: 1.1rem;
            line-height: 1.4;
            margin-bottom: 16px;
          }
          
          ul {
            background: white;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            
            li {
              font-size: 1.1rem;
              padding: 8px 0;
              border-bottom: 1px solid #eee;
              
              &:last-child {
                border-bottom: none;
              }
            }
          }
        }
        
        .funeralImage {
          img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
  }
  
  /* Memorial Section */
  .memorialSection {
    background: white;
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .memorialContent {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 48px;
        align-items: center;
        
        .memorialText {
          .concerns {
            background: #f9f9f9;
            padding: 24px;
            border-radius: 8px;
            border-left: 4px solid #333;
            margin-bottom: 24px;
            
            p {
              font-size: 1.1rem;
              color: #333;
              font-weight: 500;
              margin-bottom: 12px;
              
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
          
          p {
            font-size: 1.1rem;
            line-height: 1.5;
            margin-bottom: 0;
          }
        }
        
        .memorialImage {
          img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
  }
  
  /* Goshudai Section */
  .goshudaiSection {
    background: #f9f9f9;
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .goshudaiContent {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 48px;
        align-items: center;
        
        .goshudaiImage {
          img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          }
        }
        
        .goshudaiText {
          p {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 16px;
          }
          
          ul {
            background: white;
            padding: 24px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            
            li {
              font-size: 1.1rem;
              padding: 8px 0;
              border-bottom: 1px solid #eee;
              
              &:last-child {
                border-bottom: none;
              }
            }
          }
        }
      }
    }
  }
  
  /* Events Section */
  .eventsSection {
    background: white;
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .eventsContent {
        max-width: 800px;
        margin: 0 auto;
        
        .eventsList {
          display: grid;
          gap: 24px;
          margin-bottom: 32px;
          
          .eventItem {
            background: #f9f9f9;
            padding: 24px;
            border-radius: 8px;
            border-left: 4px solid #333;
            display: flex;
            align-items: center;
            gap: 32px;
            
            time {
              color: #333;
              font-weight: 600;
              font-size: 1.1rem;
              min-width: 120px;
            }
            
            div {
              flex: 1;
              
              h3 {
                color: #333;
                margin-bottom: 8px;
              }
              
              p {
                margin-bottom: 0;
                font-size: 0.9rem;
                color: #666;
              }
            }
          }
        }
        
        .eventsNote {
          text-align: center;
          color: #666;
          font-style: italic;
          margin-bottom: 0;
        }
      }
    }
  }
  
  /* FAQ Section */
  .faqSection {
    background: #f9f9f9;
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .faqContent {
        max-width: 800px;
        margin: 0 auto;
        
        .faqItem {
          background: white;
          padding: 32px;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          
          h3 {
            color: #333;
            margin-bottom: 16px;
            font-size: 1.2rem;
          }
          
          p {
            margin-bottom: 0;
            line-height: 1.6;
          }
        }
      }
    }
  }
  
  /* Access Section */
  .accessSection {
    background: white;
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .accessContent {
        display: grid;
        grid-template-columns: 1fr 600px;
        gap: 48px;
        align-items: center;
        
        .accessInfo {
          .addressInfo {
            background: #f9f9f9;
            padding: 24px;
            border-radius: 8px;
            margin-bottom: 24px;
            
            h3 {
              color: #333;
             margin-bottom: 8px;
             font-size: 0.95rem;
            }
            
            p {
             margin-bottom: 8px;
             line-height: 1.3;
             font-size: 0.85rem;
              
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
          
          .transportInfo {
            h3 {
              color: #333;
             margin-bottom: 8px;
             margin-top: 16px;
             font-size: 0.95rem;
              
              &:first-child {
                margin-top: 0;
              }
            }
            
            ul {
              background: #f9f9f9;
             padding: 16px;
              border-radius: 8px;
             margin-bottom: 12px;
              
              &:last-child {
                margin-bottom: 0;
              }
              
              li {
               padding: 4px 0;
                border-bottom: 1px solid #e0e0e0;
               font-size: 0.8rem;
               line-height: 1.3;
                
                &:last-child {
                  border-bottom: none;
                }
              }
            }
          }
        }
        
        .accessMap {
          img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          }
        }
      }
    }
  }
  
  /* Contact Section */
  .contactSection {
    background: #f9f9f9;
    
    .container {
      h2 {
        text-align: center;
        color: #333;
        margin-bottom: 48px;
        font-size: 2.5rem;
        font-weight: 200;
        letter-spacing: 0.1em;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -16px;
          left: 50%;
          width: 80px;
          height: 2px;
          background: linear-gradient(135deg, #4A90E2 0%, #7BB3F0 100%);
          transform: translateX(-50%);
        }
      }
      
      .contactContent {
        max-width: 600px;
        margin: 0 auto;
        
        .contactInfo {
          background: white;
          padding: 40px;
          border-radius: 8px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
          text-align: center;
          
          h3 {
            color: #333;
            margin-bottom: 24px;
            font-size: 1.5rem;
          }
          
          p {
            line-height: 1.6;
            margin-bottom: 24px;
          }
          
          .contactDetails {
            background: #f9f9f9;
            padding: 24px;
            border-radius: 8px;
            margin-top: 32px;
            
            p {
              margin-bottom: 16px;
              font-size: 1.1rem;
              
              &:first-child {
                font-size: 1.5rem;
                font-weight: 600;
                color: #333;
              }
              
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }
      }
    }
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  #main {
    .heroSection {
      margin-top: -160px;
      padding-top: 160px;
      
      .heroContent {
        .heroImage {
          img {
            height: 70vh;
            min-height: 500px;
            object-fit: cover;
            object-position: center top;
            transform: scale(1.0);
          }
        }
        
        .heroText {
          h2 {
            font-size: 1.8rem;
            margin-bottom: 16px;
            white-space: nowrap;
          }
          
          p {
            font-size: 1rem;
            padding: 0 16px;
          }
            width: 100%;
        }
      }
    }
    
    .greetingSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .greetingContent {
          grid-template-columns: 1fr;
          gap: 24px;
          text-align: left;
          align-items: center;
          
          .priestImage {
            width: 300px;
            margin: 0 auto;
            
            img {
              width: 100%;
              height: auto;
            }
          }
          
          .greetingText {
            width: 300px;
            margin: 0 auto;
            
            h3 {
              font-size: 1.3rem;
              margin-bottom: 20px;
             white-space: normal;
             line-height: 1.4;
            }
            
            p {
              font-size: 1rem;
              line-height: 1.7;
              margin-bottom: 20px;
             width: 100%;
            }
          }
        }
      }
    }
    
    .aboutSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .aboutContent {
          grid-template-columns: 1fr;
          gap: 24px;
          
          .templeImage {
            order: -1;
            width: 300px;
            margin: 0 auto;
            
            img {
              width: 100%;
              height: auto;
            }
          }
          
          .aboutText {
            p {
              font-size: 1rem;
              line-height: 1.7;
              margin-bottom: 20px;
             width: 300px;
             margin-left: auto;
             margin-right: auto;
            }
          }
        }
      }
    }
    
    .newsSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .newsContent {
          .newsItem {
            padding: 24px 20px;
            
            h3 {
              font-size: 1.2rem;
            }
            
            p {
              font-size: 0.95rem;
              line-height: 1.6;
            }
          }
        }
      }
    }
    
    .funeralSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .funeralContent {
          grid-template-columns: 1fr;
          gap: 24px;
          
          .funeralImage {
            order: 1;
            width: 300px;
            margin: 0 auto;
            
            img {
              width: 100%;
              height: auto;
            }
          }
          
          .funeralText {
            order: 2;
            width: 300px;
            margin: 0 auto;
            
            p {
              font-size: 1rem;
              line-height: 1.7;
              margin-bottom: 20px;
              width: 100%;
            }
            
            ul {
              padding: 20px;
              
              li {
                font-size: 1rem;
                padding: 6px 0;
              }
            }
          }
        }
      }
    }
    
    .memorialSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .memorialContent {
          grid-template-columns: 1fr;
          gap: 24px;
          
          .memorialImage {
            order: 2;
            width: 300px;
            margin: 0 auto;
            
            img {
              width: 100%;
              height: auto;
            }
          }
          
          .memorialText {
            width: 300px;
            margin: 0 auto;
            order: 1;
            
            .concerns {
              padding: 20px;
              margin-bottom: 24px;
              
              p {
                font-size: 1rem;
                margin-bottom: 12px;
                width: 100%;
              }
            }
            
            p {
              font-size: 1rem;
              line-height: 1.7;
              width: 100%;
            }
          }
        }
      }
    }
    
    .goshudaiSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .goshudaiContent {
          grid-template-columns: 1fr;
          gap: 24px;
          text-align: center;
          
          .goshudaiImage {
            width: 300px;
            margin: 0 auto;
            
            img {
              width: 100%;
              height: auto;
            }
          }
          
          .goshudaiText {
            width: 300px;
            margin: 0 auto;
            
            p {
              font-size: 1rem;
              line-height: 1.7;
              margin-bottom: 20px;
              width: 100%;
            }
            
            ul {
              padding: 20px;
              
              li {
                font-size: 1rem;
                padding: 6px 0;
              }
            }
          }
        }
      }
    }
    
    .eventsSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .eventsContent {
          .eventsList {
            .eventItem {
              flex-direction: column;
              text-align: center;
              gap: 12px;
              padding: 20px;
              
              time {
                min-width: auto;
                font-size: 1rem;
              }
              
              div {
                h3 {
                  font-size: 1.2rem;
                  margin-bottom: 6px;
                }
                
                p {
                  font-size: 0.9rem;
                }
              }
            }
          }
          
          .eventsNote {
            font-size: 0.9rem;
          }
        }
      }
    }
    
    .faqSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .faqContent {
          .faqItem {
            padding: 24px 20px;
            
            h3 {
              font-size: 1.1rem;
              margin-bottom: 12px;
            }
            
            p {
              font-size: 1rem;
              line-height: 1.6;
            }
          }
        }
      }
    }
    
    .accessSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .accessContent {
          grid-template-columns: 1fr;
          gap: 24px;
          
          .accessMap {
            order: 1;
            width: 300px;
            margin: 0 auto;
            
            img {
              width: 100%;
              height: auto;
            }
          }
          
          .accessInfo {
            width: 300px;
            margin: 0 auto;
            
            .addressInfo {
              padding: 20px;
              
              h3 {
                font-size: 1.2rem;
                margin-bottom: 12px;
              }
              
              p {
                font-size: 1rem;
                line-height: 1.6;
                margin-bottom: 12px;
                width: 100%;
              }
            }
            
            .transportInfo {
              h3 {
                font-size: 1.2rem;
                margin-bottom: 12px;
                margin-top: 24px;
              }
              
              ul {
                padding: 20px;
                width: 100%;
                
                li {
                  font-size: 1rem;
                  padding: 6px 0;
                }
              }
            }
          }
        }
      }
    }
    
    .contactSection {
      .container {
        h2 {
          font-size: 2rem;
          margin-bottom: 32px;
        }
        
        .contactContent {
          .contactInfo {
            padding: 30px 20px;
            
            h3 {
              font-size: 1.3rem;
              margin-bottom: 20px;
            }
            
            p {
              font-size: 1rem;
              line-height: 1.6;
              margin-bottom: 20px;
            }
            
            .contactDetails {
              padding: 20px;
              margin-top: 24px;
              
              p {
                font-size: 1rem;
                margin-bottom: 12px;
                
                &:first-child {
                  font-size: 1.3rem;
                }
              }
            }
          }
        }
      }
    }
  }
}