/* ===== CONTACT HERO SECTION ===== */

.hero-section{
  position: relative;
  width: 100%;
  height: 560px;

  /* === IMPORTANT: APNA PATH YAHA SET KARO === */
  background-image: url("./assets/contactbanner.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Dark overlay for readability */
.hero-overlay{
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.65)
  );
}

/* CENTER CONTENT WITH FLEX (most reliable) */
.hero-content{
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  z-index: 2;
  padding: 0 20px;
}

/* HEADING */
.hero-content h1{
  margin: 0;
  color: #ffffff;

  font-size: 54px;
  font-weight: 900;
  letter-spacing: 1px;

  text-transform: uppercase;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 992px){
  .hero-section{
    height: 460px;
  }

  .hero-content h1{
    font-size: 40px;
  }
}

@media (max-width: 576px){
  .hero-section{
    height: 380px;
  }

  .hero-content h1{
    font-size: 30px;
  }
}



/* ===== Assistance / CTA Band ===== */
.assist-band{
  padding: 28px 18px;
  background: #ffffff;              /* clean look */
}

.assist-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  border: 1px solid rgba(10, 42, 77, 0.12);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

.assist-text{
  flex: 1;
  min-width: 240px;
}

.assist-lead{
  margin: 0 0 10px;
  font-size: 16.5px;
  line-height: 1.7;
  color: #1c2b3a;
}

.assist-sub{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(28, 43, 58, 0.80);
}

.assist-actions{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.assist-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  user-select: none;
  white-space: nowrap;
}

.assist-btn.primary{
  background: #0b5ed7;
  color: #fff;
  box-shadow: 0 12px 22px rgba(11, 94, 215, 0.28);
}

.assist-btn.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 26px rgba(11, 94, 215, 0.35);
}

.assist-btn.outline{
  background: transparent;
  color: #0b5ed7;
  border: 1px solid rgba(11, 94, 215, 0.35);
}

.assist-btn.outline:hover{
  transform: translateY(-2px);
  border-color: rgba(11, 94, 215, 0.6);
  box-shadow: 0 10px 18px rgba(11, 94, 215, 0.12);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .assist-wrap{
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 18px;
  }

  .assist-actions{
    width: 100%;
  }

  .assist-btn{
    width: 100%;
  }
}



/* ===== Section Wrapper ===== */
.contact-hours-section{
  padding: 70px 18px;
  background: #fff;
}

.contact-hours-wrap{
  max-width: 1200px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 0.95fr 1.05fr; /* left slightly smaller, form slightly wider */
  gap: 24px;
  align-items: start;
}

/* ===== Desktop order (default) ===== */
.left-stack{ order: 1; }
.form-card{ order: 2; }

/* ===== Left Stack ===== */
.left-stack{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ----- Plain help text (NO card) ----- */
.help-plain{
  padding: 4px 2px; /* just spacing */
}

.help-title{
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 900;
  color: #0a2a4d;
}

.help-text{
  margin: 0 0 10px;
  font-size: 15.5px;
  color: #1c2b3a;
}

.help-list{
  margin: 0 0 12px 18px;
  padding: 0;
}

.help-list li{
  margin-bottom: 7px;
  font-size: 15px;
  line-height: 1.55;
}

.help-footer{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(28, 43, 58, 0.82);
}

/* ----- Business Hours Card ----- */
.hours-card{
  background: #ffffff;
  border: 1px solid rgba(10, 42, 77, 0.12);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.06);
  padding: 22px 22px;
}

.hours-title{
  margin: 0 0 14px;
  font-size: 28px;
  font-weight: 900;
  color: #0a2a4d;
}

.hours-text{
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: #1c2b3a;
}

.hours-note{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(28, 43, 58, 0.78);
}

/* ===== Form Card ===== */
.form-card{
  background: #ffffff;
  border: 1px solid rgba(10, 42, 77, 0.12);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.06);
  padding: 22px 22px;
}

.form-title{
  margin: 0 0 14px;
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  color: #0a2a4d;
  letter-spacing: 0.5px;

  /* ✅ subtle animation */
  display: inline-block;
  width: 100%;
  animation: titleFloat 3.5s ease-in-out infinite;
}

@keyframes titleFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); }
  100% { transform: translateY(0); }
}

/* Message box (JS uses this) */
.form-msg{
  display: none;
  margin: 0 0 14px;
  padding: 12px 12px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
}

.form-msg.success{
  display: block;
  border: 1px solid rgba(20, 180, 90, 0.35);
  background: rgba(20, 180, 90, 0.08);
  color: #0d6b36;
}

.form-msg.error{
  display: block;
  border: 1px solid rgba(220, 50, 50, 0.35);
  background: rgba(220, 50, 50, 0.08);
  color: #8c1f1f;
}

.contact-form{
  margin-top: 6px;
}

/* Inputs grid */
.form-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field{
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field.full{
  grid-column: 1 / -1;
}

.field label{
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(10, 42, 77, 0.92);
}

.field input,
.field select,
.field textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(10, 42, 77, 0.18);
  outline: none;
  font-size: 14.5px;
  color: #1c2b3a;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.field textarea{
  resize: vertical;
  min-height: 120px;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color: rgba(11, 94, 215, 0.6);
  box-shadow: 0 0 0 4px rgba(11, 94, 215, 0.12);
}

/* Submit Button */
.submit-btn{
  width: 100%;
  margin-top: 14px;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  background: #0b5ed7;
  color: #fff;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  box-shadow: 0 14px 22px rgba(11, 94, 215, 0.24);
}

.submit-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 26px rgba(11, 94, 215, 0.30);
}

.submit-btn:disabled{
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Quick links */
.quick-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quick-link{
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: rgba(10, 42, 77, 0.85);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(10, 42, 77, 0.12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.quick-link:hover{
  transform: translateY(-2px);
  border-color: rgba(11, 94, 215, 0.35);
  box-shadow: 0 10px 18px rgba(0,0,0,0.06);
}

/* ===== Responsive ===== */
@media (max-width: 950px){
  /* One column on small devices */
  .contact-hours-wrap{
    grid-template-columns: 1fr;
  }

  /* ✅ Mobile order: Form first, Left second */
  .form-card{ order: 1; }
  .left-stack{ order: 2; }

  /* One column fields */
  .form-grid{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px){
  .help-title{ font-size: 28px; }
  .hours-title{ font-size: 24px; }
  .form-title{ font-size: 23px; }
}


/* ==============================
   TEAM ID CARDS (Reference style)
============================== */

.teamid-section{
  padding: 70px 0;
  background: #f6f8fc;
}

.teamid-container{
  width: min(1200px, 92%);
  margin: 0 auto;
}

.teamid-head{
  text-align: center;
  margin-bottom: 26px;
}

.teamid-head h2{
  margin: 0 0 8px;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 900;
  color: #0b2a4a;
}

.teamid-head p{
  margin: 0 auto;
  max-width: 700px;
  color: #526b82;
  line-height: 1.7;
}

/* ✅ Desktop layout: [1][2][3] then centered [4][5] using 6-col grid */
.teamid-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

/* Row 1 */
.teamid-grid .teamid-card:nth-child(1){ grid-column: 1 / span 2; }
.teamid-grid .teamid-card:nth-child(2){ grid-column: 3 / span 2; }
.teamid-grid .teamid-card:nth-child(3){ grid-column: 5 / span 2; }

/* Row 2 centered */
.teamid-grid .teamid-card:nth-child(4){ grid-column: 2 / span 2; }
.teamid-grid .teamid-card:nth-child(5){ grid-column: 4 / span 2; }

/* Card */
.teamid-card{
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  border: 1px solid rgba(11,42,74,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.teamid-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

/* Top design like sample */
.teamid-top{
  position: relative;
  padding: 26px 16px 18px;
  background:
    linear-gradient(135deg, #0b4fb3 0%, #0b4fb3 52%, #1a73e8 52%, #1a73e8 100%);
}

.teamid-badge{
  width: 118px;
  height: 118px;
  border-radius: 50%;
  margin: 0 auto;
  background: #fff;
  padding: 5px;
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

.teamid-badge img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Body */
.teamid-body{
  padding: 16px 16px 18px;
  text-align: center;
}

.teamid-name{
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  color: #0b2a4a;
}

.teamid-role{
  margin: 6px 0 14px;
  font-weight: 900;
  color: #1a73e8;
  font-size: 13.5px;
}

/* Info box */
.teamid-info{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.teamid-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f1f6ff;
  border: 1px solid rgba(26,115,232,.14);
}

.teamid-row .k{
  font-weight: 900;
  color: #567087;
  font-size: 13px;
}

.teamid-row .v{
  font-weight: 950;
  color: #0b2a4a;
  font-size: 13px;
  text-decoration: none;
  word-break: break-word;
  text-align: right;
}

.teamid-row .v:hover{
  text-decoration: underline;
}

/* ✅ Controls (mobile only) */
.teamid-controls{
  display: none;
  margin-top: 14px;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.teamid-btn{
  border: 1px solid rgba(26,115,232,.22);
  background: #eaf2ff;
  color: #0b2a4a;
  font-weight: 950;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
}

.teamid-dots{
  display: flex;
  gap: 6px;
  align-items: center;
}

.teamid-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(11, 42, 74, .25);
}
.teamid-dot.active{
  background: #1a73e8;
}

/* ✅ Tablet: 2 columns */
@media (max-width: 900px){
  .teamid-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teamid-grid .teamid-card:nth-child(1),
  .teamid-grid .teamid-card:nth-child(2),
  .teamid-grid .teamid-card:nth-child(3),
  .teamid-grid .teamid-card:nth-child(4),
  .teamid-grid .teamid-card:nth-child(5){
    grid-column: auto;
  }
}

/* ✅ Mobile: slider mode + scrollbar hidden */
@media (max-width: 520px){
  .teamid-grid{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 6px 4px 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .teamid-grid::-webkit-scrollbar{ height: 0; }

  .teamid-card{
    min-width: 86%;
    scroll-snap-align: center;
  }

  .teamid-controls{
    display: flex;
  }
}


.team-section{ padding:60px 0; background:#fff; }
.team-container{ width:min(1200px,92%); margin:0 auto; }

.team-head{ text-align:center; margin-bottom:18px; }
.team-head h2{
  margin:0 0 6px;
  font-size:clamp(22px,3vw,34px);
  font-weight:900;
  color:#0b2a4a;
}
.team-head p{ margin:0; color:#50657a; }

/* Desktop layout: [1][2][3] then centered [4][5] */
.team-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.team-grid .team-card:nth-child(1){grid-column:1/span 2;}
.team-grid .team-card:nth-child(2){grid-column:3/span 2;}
.team-grid .team-card:nth-child(3){grid-column:5/span 2;}
.team-grid .team-card:nth-child(4){grid-column:2/span 2;}
.team-grid .team-card:nth-child(5){grid-column:4/span 2;}

/* Card: light blue */
.team-card{
  background:#eaf4ff;
  border:1px solid rgba(26,115,232,.18);
  border-radius:14px;
  padding:16px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.team-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 22px rgba(0,0,0,.10);
  border-color:rgba(26,115,232,.28);
}

/* ✅ Image size increased */
.team-avatar{
  width:92px;
  height:92px;
  border-radius:50%;
  object-fit:cover;
  display:block;
  margin:0 auto 10px;
  border:3px solid rgba(255,255,255,.95);
  background:#fff;
}

.team-name{
  margin:0;
  text-align:center;
  font-size:16px;
  font-weight:900;
  color:#0b2a4a;
}
.team-role{
  margin:6px 0 12px;
  text-align:center;
  font-size:13px;
  color:#1a73e8;
  font-weight:800;
}

.team-line{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid rgba(26,115,232,.16);
  background:rgba(255,255,255,.55);
  margin-top:10px;
}
.team-line span{ font-weight:900; font-size:13px; color:#50657a; }
.team-line a{
  font-weight:900;
  font-size:13px;
  text-decoration:none;
  color:#0b2a4a;
  word-break:break-word;
  text-align:right;
}
.team-line a:hover{ text-decoration:underline; }

/* Controls */
.team-controls{
  display:none;
  margin-top:12px;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.team-btn{
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(26,115,232,.25);
  background:#f5faff;
  cursor:pointer;
  font-size:22px;
  font-weight:900;
  line-height:1;
  color:#0b2a4a;
}

.team-dots{ display:flex; gap:6px; align-items:center; }
.team-dot{ width:7px; height:7px; border-radius:50%; background:rgba(11,42,74,.25); }
.team-dot.active{ background:#1a73e8; }

/* Tablet */
@media (max-width:900px){
  .team-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .team-grid .team-card:nth-child(1),
  .team-grid .team-card:nth-child(2),
  .team-grid .team-card:nth-child(3),
  .team-grid .team-card:nth-child(4),
  .team-grid .team-card:nth-child(5){ grid-column:auto; }
}

/* Mobile: slider */
@media (max-width:768px){
  .team-grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding:6px 2px 12px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .team-grid::-webkit-scrollbar{ height:0; }
  .team-card{ min-width:85%; scroll-snap-align:center; }
  .team-controls{ display:flex; }
}