/* =========================================================
   CONTACT PAGE
   Prof. Dr. Alim Al Ayub Ahmed
   Compact Aligned Layout
   ========================================================= */

.contact-page { width:100%; margin:0; padding:0 0 1.2rem; color:#2f3542; box-sizing:border-box; }
.contact-page *, .contact-page *::before, .contact-page *::after { box-sizing:border-box; }


/* =========================================================
   INTRODUCTION
   ========================================================= */

.contact-intro { width:80%; margin:0 0 1.15rem; padding:.78rem .95rem; border-left:3px solid #1f5f99; border-radius:0 7px 7px 0; background:#f5f8fb; }
.contact-intro p { margin:0; font-size:.82rem; line-height:1.48; color:#46515c; }


/* =========================================================
   MAIN CONTACT GRID
   Entire grid width = 80%
   ========================================================= */

.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; width:80%; margin:0 0 1rem; }

.contact-card { position:relative; display:flex; gap:.7rem; min-height:170px; margin:0; padding:.85rem; border:1px solid #dce3e9; border-radius:9px; background:#fff; box-shadow:0 2px 8px rgba(24,45,66,.05); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.contact-card:hover { transform:translateY(-2px); border-color:#b9ccdd; box-shadow:0 5px 14px rgba(24,45,66,.08); }

.contact-icon { flex:0 0 34px; display:flex; align-items:center; justify-content:center; width:34px; height:34px; margin-top:.02rem; border-radius:50%; background:#eef5fb; color:#1f5f99; font-size:.82rem; }

.contact-card-content { flex:1; display:flex; flex-direction:column; min-width:0; }

.contact-card h2 { margin:0 0 .38rem; padding:0; border:0; font-size:.84rem; line-height:1.26; color:#183b5b; }

.contact-description { min-height:3.15rem; margin:0 0 .45rem !important; font-size:.71rem !important; line-height:1.42 !important; color:#596673 !important; }


/* =========================================================
   CONTACT DETAILS
   ========================================================= */

.contact-detail { display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .32rem; margin:.12rem 0; font-size:.7rem; }
.contact-label { min-width:46px; font-weight:700; color:#354250; }
.contact-detail a { color:#1769a8; text-decoration:none; overflow-wrap:anywhere; }
.contact-detail a:hover { color:#0f4f82; text-decoration:underline; }


/* =========================================================
   CONTACT BUTTONS
   ========================================================= */

.contact-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.38rem; margin-top:auto; padding-top:.48rem; }

.contact-button { display:inline-flex; align-items:center; justify-content:center; gap:.28rem; padding:.34rem .58rem; border:1px solid #1f5f99; border-radius:5px; background:#1f5f99; color:#fff !important; font-size:.65rem; font-weight:600; line-height:1.1; text-decoration:none !important; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.contact-button:hover { transform:translateY(-1px); border-color:#174b79; background:#174b79; color:#fff !important; }

.contact-button-secondary { border-color:#477c68; background:#477c68; }
.contact-button-secondary:hover { border-color:#365f50; background:#365f50; }


/* =========================================================
   PRESENT PROFESSIONAL LOCATION
   ========================================================= */

.contact-office { display:flex; align-items:center; gap:.65rem; width:80%; margin:0 0 .9rem; padding:.7rem .85rem; border:1px solid #dce3e9; border-radius:8px; background:#fafbfc; }

.contact-office-icon { flex:0 0 34px; display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:7px; background:#edf2f6; color:#506274; font-size:.82rem; text-decoration:none !important; transition:background .18s ease,color .18s ease,transform .18s ease; }
.contact-office-icon:hover { background:#e0ebf4; color:#1f5f99; transform:translateY(-1px); }

.contact-office-content { min-width:0; }

.contact-office h2 { margin:0 0 .1rem; padding:0; border:0; font-size:.77rem; line-height:1.25; color:#243d53; }
.contact-office-role { margin:0 0 .04rem; font-size:.67rem; font-weight:600; color:#64717e; }
.contact-office-name { margin:0 0 .06rem; font-size:.7rem; font-weight:700; color:#384956; }
.contact-office-location { margin:0; font-size:.66rem; color:#67737e; }

.contact-office-location a { color:#67737e; text-decoration:none; }
.contact-office-location a:hover { color:#1f5f99; text-decoration:underline; }
.contact-office-location i { margin-right:.2rem; color:#748390; }


/* =========================================================
   CLOSING NOTE
   ========================================================= */

.contact-note { display:flex; align-items:flex-start; gap:.42rem; width:80%; margin:0 0 .9rem; padding:.58rem .75rem; border-radius:7px; background:#f5f8fb; color:#53606c; }

.contact-note > i { margin-top:.12rem; color:#1f5f99; font-size:.7rem; }
.contact-note p { margin:0; font-size:.67rem; line-height:1.4; }


/* =========================================================
   ACADEMIC & PROFESSIONAL PROFILES
   ========================================================= */

.contact-profiles { width:80%; margin:0; padding:.78rem .85rem .85rem; border:1px solid #dce3e9; border-radius:8px; background:#fff; }

.contact-profiles-heading { margin-bottom:.6rem; }

.contact-profiles-heading h2 { margin:0 0 .1rem; padding:0; border:0; font-size:.77rem; line-height:1.25; color:#243d53; }
.contact-profiles-heading p { margin:0; font-size:.65rem; line-height:1.36; color:#6a7681; }


/* =========================================================
   PROFILE LOGO GRID
   ========================================================= */

.contact-profile-icons { display:grid; grid-template-columns:repeat(10,44px); justify-content:start; align-items:center; column-gap:.62rem; row-gap:.38rem; }


/* =========================================================
   PROFILE LOGOS
   ========================================================= */

.profile-logo { display:block; width:44px; height:44px; margin:0; padding:0; overflow:hidden; border:1px solid #d9e1e7; border-radius:50%; background:#fff; text-decoration:none !important; box-shadow:0 2px 5px rgba(24,45,66,.05); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }

.profile-logo:hover { transform:translateY(-2px) scale(1.04); border-color:#adc5d9; box-shadow:0 5px 10px rgba(24,45,66,.11); }

.profile-logo img { display:block; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:50%; object-fit:cover; }


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

@media (max-width:1000px) {
  .contact-intro, .contact-grid, .contact-office, .contact-note, .contact-profiles { width:90%; }
  .contact-profile-icons { grid-template-columns:repeat(8,44px); }
}

@media (max-width:820px) {
  .contact-intro, .contact-grid, .contact-office, .contact-note, .contact-profiles { width:100%; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-card { min-height:auto; }
  .contact-description { min-height:auto; }
  .contact-profile-icons { grid-template-columns:repeat(6,44px); }
}

@media (max-width:650px) {
  .contact-profile-icons { grid-template-columns:repeat(5,42px); column-gap:.4rem; row-gap:.36rem; }
  .profile-logo { width:42px; height:42px; }
}

@media (max-width:520px) {
  .contact-intro { padding:.68rem .76rem; }
  .contact-card { gap:.58rem; padding:.72rem; }
  .contact-icon { flex-basis:31px; width:31px; height:31px; font-size:.75rem; }
  .contact-card h2 { font-size:.79rem; }
  .contact-description { font-size:.69rem !important; }
  .contact-detail { display:block; }
  .contact-label { display:block; min-width:0; margin-bottom:.04rem; }
  .contact-actions { margin-top:.5rem; padding-top:0; }
  .contact-office { align-items:flex-start; padding:.68rem .75rem; }
  .contact-office-icon { flex-basis:32px; width:32px; height:32px; }
  .contact-profiles { padding:.72rem .75rem; }
  .contact-profile-icons { grid-template-columns:repeat(4,40px); column-gap:.35rem; row-gap:.34rem; }
  .profile-logo { width:40px; height:40px; }
}

@media (max-width:380px) {
  .contact-profile-icons { grid-template-columns:repeat(3,40px); }
}