/* =========================================================
   CONTACT HERO SECTION
========================================================= */
:root{
    --bg:#080807;
    --bg-soft:#11110f;
  
    --panel:rgba(20,20,18,.74);
  
    --line:rgba(255,255,255,.08);
  
    --text:#f5f1e9;
    --muted:#b9b0a2;
  
    --gold:#d9af52;
    --gold-bright:#ffe4a3;
  
    --shadow:
    0 20px 60px rgba(0,0,0,.42);
  }

.contact-hero{
    position:relative;
  
    width:100%;
    min-height:100vh;
  
    overflow:hidden;
  
    display:flex;
    align-items:center;
  
    padding:150px 5% 110px;
  
    background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.52),
      rgba(0,0,0,0.64)
    ),
  
    url("/assets/bb-CA.png");
  
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
  
    border-bottom:1px solid rgba(255,255,255,0.05);
  }
  
  /* =========================================================
     OVERLAY
  ========================================================= */
  
  .contact-hero-overlay{
    position:absolute;
    inset:0;
  
    background:
    radial-gradient(
      circle at top left,
      rgba(212,161,74,0.14),
      transparent 28%
    ),
  
    radial-gradient(
      circle at bottom right,
      rgba(212,161,74,0.10),
      transparent 30%
    );
  
    z-index:1;
  }
  
  /* =========================================================
     GLOW
  ========================================================= */
  
  .contact-hero-glow{
    position:absolute;
  
    border-radius:50%;
  
    filter:blur(100px);
  
    opacity:.14;
  
    z-index:1;
  }
  
  .contact-hero-glow-1{
    top:-100px;
    left:-120px;
  
    width:260px;
    height:260px;
  
    background:#d4a14a;
  }
  
  .contact-hero-glow-2{
    bottom:-120px;
    right:-120px;
  
    width:240px;
    height:240px;
  
    background:#b98534;
  }
  
  /* =========================================================
     CONTAINER
  ========================================================= */
  
  .contact-hero-container{
    position:relative;
    z-index:2;
  
    width:100%;
    max-width:2560px;
  
    margin:auto;
  
    display:grid;
    grid-template-columns:1.08fr .72fr;
    gap:60px;
  
    align-items:center;
  }
  
  /* =========================================================
     LEFT CONTENT
  ========================================================= */
  
  .contact-mini-title{
    display:inline-flex;
    align-items:center;
    gap:10px;
  
    margin-bottom:25px;
  
    color:var(--gold-bright);
  
    font-size:.80rem;
    font-weight:800;
  
    text-transform:uppercase;
    letter-spacing:.18em;
  }
  
  .contact-hero-content h1{
    margin:0 0 22px;
  
    max-width:720px;
  
    color:#f7f2ea;
  
    font-size:clamp(48px,5vw,76px);
    line-height:1;
    letter-spacing:-1.5px;
    font-weight:700;
  
    font-family:Georgia, serif;
  }
  
  .contact-hero-content h1 span{
    color:#d6a24d;
  }
  
  .contact-hero-content p{
    max-width:600px;
  
    color:rgba(255,255,255,0.72);
  
    font-size:15px;
    line-height:1.9;
  
    margin-bottom:34px;
  }
  
  /* =========================================================
     BUTTONS
  ========================================================= */
  
  .contact-hero-buttons{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
  }
  
  .contact-btn-primary,
  .contact-btn-secondary{
    height:50px;
  
    padding:0 24px;
  
    display:inline-flex;
    align-items:center;
    justify-content:center;
  
    border-radius:999px;
  
    text-decoration:none;
  
    font-size:1rem;
    font-weight:800;
  
    transition:.35s ease;
  }
  
  .contact-btn-primary{
    background:
    linear-gradient(
      135deg,
      #f0c77c,
      #b78633
    );
  
    color:#111;
  
    box-shadow:
    0 10px 28px rgba(212,161,74,.22);
  }
  
  .contact-btn-primary:hover{
    transform:translateY(-3px);
  }
  
  .contact-btn-secondary{
    border:1px solid rgba(255,255,255,0.12);
  
    background:rgba(255,255,255,0.04);
  
    backdrop-filter:blur(12px);
  
    color:#fff;
  }
  
  .contact-btn-secondary:hover{
    border-color:rgba(212,161,74,0.35);
  
    background:rgba(212,161,74,0.08);
  }
  
  /* =========================================================
     RIGHT CARD
  ========================================================= */
  
  .contact-hero-card{
    padding:34px;
  
    border-radius:28px;
  
    background:
    linear-gradient(
      180deg,
      rgba(255,255,255,0.10),
      rgba(255,255,255,0.03)
    );
  
    border:1px solid rgba(255,255,255,0.08);
  
    backdrop-filter:blur(20px);
  
    box-shadow:
    0 18px 60px rgba(0,0,0,0.42);
  }
  
  .contact-card-top{
    margin-bottom:18px;
  }
  
  .contact-card-top span{
    color:#d6a24d;
  
    font-size:11px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
  }
  
  .contact-hero-card h3{
    margin:0 0 18px;
  
    color:#fff;
  
    font-size:36px;
    line-height:1.1;
  
    font-family:Georgia, serif;
  }
  
  .contact-hero-card p{
    color:rgba(255,255,255,0.70);
  
    font-size:14px;
    line-height:1.85;
  
    margin-bottom:28px;
  }
  
  /* =========================================================
     DETAILS
  ========================================================= */
  
  .contact-card-details{
    display:flex;
    flex-direction:column;
    gap:18px;
  }
  
  .contact-detail{
    display:flex;
    align-items:flex-start;
    gap:16px;
  }
  
  .contact-detail i{
    width:46px;
    height:46px;
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    border-radius:16px;
  
    background:
    linear-gradient(
      135deg,
      rgba(212,161,74,0.20),
      rgba(212,161,74,0.06)
    );
  
    border:1px solid rgba(212,161,74,0.14);
  
    color:#e3b35d;
  
    font-size:20px;
  }
  
  .contact-detail strong{
    display:block;
  
    margin-bottom:4px;
  
    color:#fff;
  
    font-size:14px;
  }
  
  .contact-detail span{
    color:rgba(255,255,255,0.68);
  
    font-size:13px;
  }
  
  /* =========================================================
     RESPONSIVE
  ========================================================= */
  
  @media(max-width:992px){
  
    .contact-hero{
      min-height:auto;
    }
  
    .contact-hero-container{
      grid-template-columns:1fr;
    }
  
  }
  
  @media(max-width:768px){
  
    .contact-hero{
      padding:130px 6% 90px;
    }
  
    .contact-hero-content h1{
      font-size:44px;
    }
  
    .contact-hero-card{
      padding:28px;
    }
  
  }
  
  @media(max-width:480px){
  
    .contact-hero-content h1{
      font-size:38px;
    }
  
    .contact-hero-buttons{
      flex-direction:column;
    }
  
    .contact-btn-primary,
    .contact-btn-secondary{
      width:100%;
    }
  
  }

  /* =========================
   PREMIUM SMALL DIVIDER
========================= */

.premium-divider{
    position:relative;
  
    width:100%;
    height:70px;
  
    display:flex;
    align-items:center;
    justify-content:center;
  
    overflow:hidden;
  }
  
  .premium-divider::before{
    content:"";
  
    position:absolute;
    left:0;
    top:50%;
  
    width:100%;
    height:1px;
  
    background:
    linear-gradient(
      90deg,
      transparent,
      rgba(201,164,92,.16),
      rgba(201,164,92,.55),
      rgba(201,164,92,.16),
      transparent
    );
  
    transform:translateY(-50%);
  }
  
  .premium-divider span{
    position:relative;
  
    width:90px;
    height:28px;
  
    border-radius:999px;
  
    background:
    radial-gradient(
      circle,
      rgba(201,164,92,.38),
      rgba(201,164,92,.08),
      transparent 72%
    );
  
    filter:blur(10px);
  }

  /* =========================================================
   ATTENDANCE SECTION — FUTURISTIC PREMIUM UI
========================================================= */

.attendance-section{
  position:relative;

  overflow:hidden;

  padding:110px 5%;

  background:
  radial-gradient(circle at top left, rgba(212,161,74,0.10), transparent 26%),
  radial-gradient(circle at bottom right, rgba(212,161,74,0.08), transparent 28%),
  linear-gradient(
    180deg,
    #050505,
    #090909 45%,
    #050505
  );

  border-top:1px solid rgba(255,255,255,0.04);
  border-bottom:1px solid rgba(255,255,255,0.04);
}

/* =========================================================
   GRID LINES
========================================================= */

.attendance-section::before{
  content:"";

  position:absolute;
  inset:0;

  background-image:
  linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);

  background-size:80px 80px;

  opacity:.18;

  pointer-events:none;
}

/* =========================================================
   GOLD GLOW
========================================================= */

.attendance-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:.12;

  pointer-events:none;
}

.attendance-glow-1{
  top:-120px;
  left:-120px;

  width:320px;
  height:320px;

  background:#d4a14a;
}

.attendance-glow-2{
  bottom:-140px;
  right:-120px;

  width:300px;
  height:300px;

  background:#b98534;
}

/* =========================================================
   CONTAINER
========================================================= */

.attendance-container{
  position:relative;
  z-index:2;

  max-width:2560px;
  margin:auto;

  display:grid;
  grid-template-columns:1fr .42fr;
  gap:28px;

  align-items:start;
}

/* =========================================================
   LEFT FORM PANEL
========================================================= */

.attendance-form-wrap{
  position:relative;

  overflow:hidden;

  padding:42px;

  border-radius:34px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.03)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);

  box-shadow:
  0 30px 80px rgba(0,0,0,0.52),
  inset 0 1px 0 rgba(255,255,255,0.05);
}

/* GOLD AMBIENT */

.attendance-form-wrap::before{
  content:"";

  position:absolute;

  top:-180px;
  right:-100px;

  width:320px;
  height:320px;

  background:
  radial-gradient(
    circle,
    rgba(212,161,74,0.18),
    transparent 70%
  );

  pointer-events:none;
}

/* =========================================================
   LABEL
========================================================= */

.attendance-label{
  display:inline-flex;
  align-items:center;
  gap:10px;

  margin-bottom:18px;

  color:#d6a24d;

  font-size:13px;
  font-weight:800;
  letter-spacing:2.2px;
  text-transform:uppercase;
}

/* =========================================================
   HEADING
========================================================= */

.attendance-form-wrap h2{
  margin:0 0 14px;

  max-width:700px;

  color:#f6f1e8;

  font-size:clamp(30px,3.6vw,48px);
  line-height:1.02;
  letter-spacing:-1px;

  font-family:Georgia, serif;
}

.attendance-form-wrap p{
  max-width:590px;

  color:rgba(255,255,255,0.64);

  font-size:13px;
  line-height:1.8;

  margin-bottom:30px;
}

/* =========================================================
   FORM
========================================================= */

.attendance-form{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.attendance-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

/* =========================================================
   INPUTS
========================================================= */

.attendance-input{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.attendance-input label{
  color:var(--gold-bright);

  font-size:15px;
  font-weight:700;

  letter-spacing:.2px;
}

.attendance-input input{
  width:100%;
  height:56px;

  padding:0 20px;

  border:none;
  outline:none;

  border-radius:18px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.03)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(12px);

  color:#fff;

  font-size:14px;

  transition:
  border-color .35s ease,
  background .35s ease,
  transform .35s ease,
  box-shadow .35s ease;
}

.attendance-input input::placeholder{
  color:rgba(255,255,255,0.34);

  font-size:14px;
}

.attendance-input input:focus{
  border-color:rgba(212,161,74,0.38);

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.04)
  );

  transform:translateY(-2px);

  box-shadow:
  0 0 0 4px rgba(212,161,74,0.08),
  0 14px 34px rgba(0,0,0,0.34);
}

/* =========================================================
   BUTTON
========================================================= */

.attendance-submit{
  position:relative;

  overflow:hidden;

  width:fit-content;

  height:52px;

  padding:0 28px;

  border:none;
  outline:none;

  border-radius:999px;

  background:
  linear-gradient(
    135deg,
    #f0c77c,
    #b78633
  );

  color:#111;

  font-size:14px;
  font-weight:700;
  letter-spacing:.4px;

  cursor:pointer;

  transition:
  transform .35s ease,
  box-shadow .35s ease;

  box-shadow:
  0 18px 40px rgba(212,161,74,.24);
}

.attendance-submit::before{
  content:"";

  position:absolute;

  top:0;
  left:-120%;

  width:120%;
  height:100%;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );

  transition:.7s ease;
}

.attendance-submit:hover::before{
  left:120%;
}

.attendance-submit:hover{
  transform:
  translateY(-4px)
  scale(1.02);

  box-shadow:
  0 24px 50px rgba(212,161,74,.32);
}

/* =========================================================
   RIGHT INFO CARD
========================================================= */

.attendance-info-card{
  position:sticky;
  top:120px;

  overflow:hidden;

  padding:34px 28px;

  border-radius:34px;

  background:
  linear-gradient(
    180deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.03)
  );

  border:1px solid rgba(255,255,255,0.08);

  backdrop-filter:blur(24px);

  box-shadow:
  0 24px 70px rgba(0,0,0,0.44);
}

/* GOLD TOP LINE */

.attendance-info-card::before{
  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:1px;

  background:
  linear-gradient(
    90deg,
    transparent,
    rgba(212,161,74,0.95),
    transparent
  );
}

/* =========================================================
   INFO TOP
========================================================= */

.attendance-info-top{
  margin-bottom:30px;
}

.attendance-info-top span{
  color:#d6a24d;

  font-size:10px;
  font-weight:600;
  letter-spacing:2px;
  text-transform:uppercase;
}

.attendance-info-top h3{
  margin:14px 0 0;

  color:#fff;

  font-size:28px;
  line-height:1.05;

  letter-spacing:-1px;

  font-family:Georgia, serif;
}

/* =========================================================
   INFO LIST
========================================================= */

.attendance-info-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.attendance-info-item{
  display:flex;
  align-items:flex-start;
  gap:15px;

  padding:16px;

  border-radius:22px;

  background:
  rgba(255,255,255,0.03);

  border:1px solid rgba(255,255,255,0.05);

  transition:
  transform .35s ease,
  border-color .35s ease,
  background .35s ease;
}

.attendance-info-item:hover{
  transform:translateY(-4px);

  border-color:rgba(212,161,74,0.18);

  background:
  rgba(255,255,255,0.05);
}

/* =========================================================
   ICON
========================================================= */

.attendance-icon{
  flex-shrink:0;

  width:50px;
  height:50px;

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

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    rgba(212,161,74,0.22),
    rgba(212,161,74,0.06)
  );

  border:1px solid rgba(212,161,74,0.16);

  box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.06),
  0 12px 24px rgba(0,0,0,0.24);
}

.attendance-icon i{
  color:#e1b25d;

  font-size:20px;
}

/* =========================================================
   TEXT
========================================================= */

.attendance-info-item strong{
  display:block;

  margin-bottom:6px;

  color:#fff;

  font-size:15px;
  font-weight:600;
}

.attendance-info-item span,
.attendance-info-item a{
  color:rgba(255,255,255,0.66);

  font-size:12px;
  line-height:1.7;

  text-decoration:none;

  transition:.3s ease;
}

.attendance-info-item a:hover{
  color:#d6a24d;
}

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

@media(max-width:992px){

  .attendance-container{
    grid-template-columns:1fr;
  }

  .attendance-info-card{
    position:relative;
    top:auto;
  }

}

@media(max-width:768px){

  .attendance-section{
    padding:90px 6%;
  }

  .attendance-grid{
    grid-template-columns:1fr;
  }

  .attendance-form-wrap,
  .attendance-info-card{
    padding:30px 24px;
  }

  .attendance-form-wrap h2{
    font-size:38px;
  }

  .attendance-form-wrap p{
    font-size:12.5px;
  }

  .attendance-info-top h3{
    font-size:26px;
  }

  .attendance-input label{
    font-size:13px;
  }

}

@media(max-width:480px){

  .attendance-submit{
    width:100%;
  }

  .attendance-form-wrap h2{
    font-size:33px;
  }

}