:root{
  --orange: #e8720c;
  --orange-dark: #c65b03;
  --blue: #2d5f8a;
  --blue-light: #eaf2f9;
  --cream: #fdf6e9;
  --cream-dark: #f7e9c8;
}

body{
  font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
  background: var(--cream);
  color: #333;
}

/* ===== Top Header ===== */
.school-header{
  background: #fff;
  padding: 14px 30px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 4px solid var(--orange);
}
.school-header img.logo{
  width: 65px;
  height: 65px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--orange);
}
.school-header h1{
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--orange-dark);
  margin: 0;
}
.school-header p{
  margin: 2px 0 0;
  font-size: 0.85rem;
  color: #666;
}

/* ===== Sub tagline strip ===== */
.tagline-strip{
  background: var(--orange);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
}

/* ===== Banner ===== */
.contact-banner{
  background: linear-gradient(135deg, #cfe3d8, #f4e6c1);
  padding: 50px 30px;
  text-align: center;
  border-bottom: 3px solid var(--cream-dark);
}
.contact-banner h2{
  font-size: 2.4rem;
  font-weight: 700;
  color: #5a2d82;
  margin-bottom: 4px;
}
.contact-banner .sub{
  font-size: 1.3rem;
  color: #7a4b1c;
  letter-spacing: 2px;
}
.contact-banner hr{
  width: 160px;
  margin: 10px auto;
  border: 1px solid var(--orange);
}
.banner-img{
  width: 100%;
  max-width: 380px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
@media (max-width: 767px){
  .contact-banner .row{ text-align: center; }
  .banner-img{ max-width: 260px; }
}

/* ===== Section Cards ===== */
.section-wrap{
  max-width: 1200px;
  margin: 5vh auto 0;
  padding: 0 15px 40px;
}

/* Heading block (centered like reference design) */
.contact-heading{
  text-align: center;
  max-width: 700px;
  margin: 0 auto 10px;
}
.contact-heading h2{
  font-size: 2.4rem;
  font-weight: 700;
  color: #5a2d82;
  margin-bottom: 4px;
}
.contact-heading hr{
  width: 160px;
  margin: 10px auto;
  border: 1px solid var(--orange);
}
.contact-heading .sub{
  font-size: 1.3rem;
  color: #7a4b1c;
  letter-spacing: 2px;
}

.section-wrap .row.g-4{
  margin-top: 5vh;
}

.card-title-bar{
  text-align: center;
  padding: 14px;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  border-radius: 8px 8px 0 0;
  letter-spacing: 0.5px;
}
.info-card .card-title-bar{ background: var(--orange); }
.form-card .card-title-bar{ background: var(--blue); }

.info-card{
  background: linear-gradient(180deg, #fdf1d8, #fbe6c2);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.info-card .card-body{ padding: 25px; }
.info-card h6{
  color: var(--orange-dark);
  font-weight: 700;
  margin-bottom: 4px;
}
.info-card p{ margin-bottom: 18px; color: #4a4a4a; }
.info-card .icon-line{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  color: #4a4a4a;
}
.info-card .icon-line i{
  color: var(--orange);
  margin-top: 3px;
}

.form-card{
  background: var(--blue-light);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  overflow: hidden;

  height: 100%;
  display: flex;
  flex-direction: column;
}

.form-card .card-body{
  padding: 25px;
  flex: 1;
}

/* Social icons placed under Feedback card */
.social-inline{
  margin-top: 25px;
  text-align: center;
}
.social-inline h6{
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 1rem;
}
.social-inline .social-icons{
  gap: 25px;
}
.social-inline .circle{
  width: 48px;
  height: 48px;
  font-size: 1.2rem;
}
.form-card label{
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 6px;
}
.form-card .form-control{
  border-radius: 6px;
  border: 1px solid #c7d6e2;
  margin-bottom: 18px;
}
.btn-submit{
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  border: none;
  padding: 10px 40px;
  border-radius: 6px;
  letter-spacing: 1px;
}
.btn-submit:hover{ background: var(--orange-dark); color:#fff; }

/* ===== Social Section ===== */
.social-section{
  text-align: center;
  padding: 35px 15px;
}
.social-section h5{
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 25px;
}
.social-section h5::before,
.social-section h5::after{
  content: "‧‧‧‧‧‧‧‧‧‧‧‧";
  color: var(--orange);
  margin: 0 12px;
}
.social-icons{
  display: flex;
  justify-content: center;
  gap: 55px;
  flex-wrap: wrap;
}
.social-icons .item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.social-icons .circle{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.5rem;
  text-decoration: none;
  transition: transform 0.2s;
}
.social-icons .circle:hover{ transform: translateY(-4px); }
.fb{ background: #1877f2; }
.ig{ background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.yt{ background: #ff0000; }
.social-icons span{ font-weight: 600; color: #333; font-size: 0.9rem; }

/* ===== Footer quote ===== */
.footer-quote{
  background: #fff;
  text-align: center;
  padding: 20px 15px;
  font-weight: 600;
  color: var(--orange-dark);
  border-top: 2px dashed var(--cream-dark);
}
.footer-strip{
  height: 18px;
  background: repeating-linear-gradient(45deg, #a9744a, #a9744a 10px, #96633c 10px, #96633c 20px);
}

@media (max-width: 767px){
  .contact-banner h2{ font-size: 1.7rem; }
  .contact-banner .sub{ font-size: 1rem; }
  .contact-heading h2{ font-size: 1.7rem; }
  .contact-heading .sub{ font-size: 1rem; }
  .social-icons{ gap: 30px; }
}