/* [project]/src/app/about-us/page.scss.css [app-client] (css) */
.sappir-blog {
  color: #333;
  background-color: #fff;
  min-height: 100vh;
  font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.container .spafir-opener-title {
  color: #111f3a;
  border-bottom: 2px solid #111f3a;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.container .spafir-opener-title h2 {
  text-transform: uppercase;
}

.container .spafir-opener-title .year {
  font-size: 25px;
}

.blog-header {
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #f55f2a, #c93b09);
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  display: flex;
  position: relative;
  overflow: hidden;
}

.blog-header:before {
  content: "";
  z-index: 10;
  filter: grayscale() contrast(1.03) brightness(.45);
  will-change: transform, filter;
  background-image: url("https://images.prismic.io/element451/1379a91d-d771-4d2c-af88-1394902912a3_Student+Success.jpg?auto=format&ixlib=react-9.0.3&h=836&w=1254");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  inset: 0;
  transform: scale(1.02);
}

.blog-header:after {
  content: "";
  z-index: 20;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,    <svg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'>      <filter id='n'>        <feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>        <feColorMatrix type='saturate' values='0'/>      </filter>      <rect width='100%' height='100%' filter='url(%23n)' />    </svg>");
  background-repeat: repeat;
  background-size: 200px 200px;
  position: absolute;
  inset: 0;
}

.blog-header .container {
  z-index: 99;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
  position: relative;
}

.blog-header .container .logo img {
  width: 120px;
}

.blog-header .container .texts {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.blog-header .container .texts .school-name {
  text-transform: uppercase;
  flex-direction: column;
  align-items: flex-start;
  font-size: 50px;
  font-weight: 800;
  line-height: 1.1;
  display: flex;
}

.blog-main {
  padding: 3rem 0;
}

.blog-main section {
  margin-top: 20px;
  margin-bottom: 4rem;
}

.blog-main section h2 {
  color: #111f3a;
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  position: relative;
}

.blog-main section h2:after {
  content: "";
  background: #f55f2a;
  width: 60px;
  height: 3px;
  margin: 1rem auto;
  display: block;
}

.blog-main section h3 {
  color: #f55f2a;
  margin: 1.5rem 0 1rem;
  font-size: 1.4rem;
}

.blog-main section h4 {
  color: #333;
  margin: 1.2rem 0 .8rem;
  font-size: 1.2rem;
}

.blog-main section p {
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.blog-main section ul {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.blog-main section ul li {
  margin-bottom: .5rem;
  line-height: 1.6;
}

.about-section .content, .school-section .content {
  background: #f9f9f9;
  border-left: 4px solid #f55f2a;
  border-radius: 8px;
  padding: 2rem;
}

.about-section .content span, .school-section .content span {
  border-bottom: 2px solid #f55f2a;
}

.why-sapfir-section .content {
  background: #f9f9f9;
  border-left: 4px solid #f55f2a;
  border-radius: 8px;
  padding: 2rem;
  position: relative;
}

.why-sapfir-section .content p {
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.why-sapfir-section .content p span {
  border-bottom: 2px solid #f55f2a;
}

.why-sapfir-section .content .quote-box {
  color: #fff;
  background: #f55f2a;
  border-radius: 8px;
  width: 500px;
  margin: 2rem auto 0;
  padding: 1.5rem;
}

.why-sapfir-section .content .quote-box span {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  display: block;
}

.why-sapfir-section .content .quote-box h3 {
  text-align: center;
  color: #fff;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
}

.programs-section .content {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  display: grid;
}

.programs-section .program-card {
  text-align: center;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px #0000001a;
}

.programs-section .program-card h3 {
  color: #f55f2a;
  margin-bottom: 1rem;
}

.programs-section .program-card p {
  color: #666;
}

.values-section .content {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  display: grid;
}

.values-section .value-item {
  text-align: center;
  padding: 1.5rem;
}

.values-section .value-item h4 {
  color: #f55f2a;
  margin-bottom: .8rem;
}

@media (width <= 768px) {
  .blog-header {
    padding: 2rem 0;
  }

  .blog-header .logo {
    font-size: 2rem;
  }

  .blog-main {
    padding: 2rem 0;
  }

  .blog-main section h2 {
    font-size: 1.7rem;
  }

  .programs-section .content, .values-section .content {
    grid-template-columns: 1fr;
  }

  .about-section .content, .school-section .content {
    padding: 1.5rem;
  }
}

@media (width <= 600px) {
  .blog-header:after {
    background-size: 150px 150px;
  }
}


/*# sourceMappingURL=src_app_about-us_page_scss_7894280d.css.map*/