/* Contact + Map Upgrade */

.contact-section{
  position:relative;
  overflow:hidden;
  padding-top:110px;
}

.contact-section::before{
  content:"";
  position:absolute;
  width:480px;
  height:480px;
  left:-160px;
  top:40px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(77,231,243,.24),transparent 68%);
  animation:contactGlowOne 7s ease-in-out infinite alternate;
  pointer-events:none;
}

.contact-section::after{
  content:"";
  position:absolute;
  width:460px;
  height:460px;
  right:-160px;
  bottom:40px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(239,93,168,.16),transparent 68%);
  animation:contactGlowTwo 8s ease-in-out infinite alternate-reverse;
  pointer-events:none;
}

@keyframes contactGlowOne{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(24px,20px,0) scale(1.08);}
}

@keyframes contactGlowTwo{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(-22px,-18px,0) scale(1.07);}
}

.contact-section .container{
  position:relative;
  z-index:2;
}

.contact-card{
  position:relative;
  overflow:hidden;
  border-radius:44px !important;
  background:
    radial-gradient(circle at 18% 12%,rgba(77,231,243,.15),transparent 34%),
    radial-gradient(circle at 90% 20%,rgba(239,93,168,.14),transparent 36%),
    linear-gradient(135deg,#08172b 0%,#07111f 54%,#02050a 100%) !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 120px rgba(15,23,42,.24) !important;
}

.contact-card::before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:34px;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
  z-index:3;
}

.map-box{
  position:relative;
  padding:18px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03));
}

.map-box::before{
  content:"Visit our academy";
  position:absolute;
  left:34px;
  top:34px;
  z-index:5;
  padding:11px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#07111f;
  font-weight:900;
  font-size:13px;
  box-shadow:0 16px 42px rgba(15,23,42,.18);
  backdrop-filter:blur(14px);
}

.map-box::after{
  content:"College de la Sainte Famille Francaise, Fanar";
  position:absolute;
  left:34px;
  right:34px;
  bottom:34px;
  z-index:5;
  padding:16px 18px;
  border-radius:24px;
  background:rgba(7,17,31,.78);
  color:#fff;
  font-weight:800;
  line-height:1.45;
  box-shadow:0 18px 48px rgba(0,0,0,.22);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.12);
}

.map-box iframe{
  display:block;
  width:100% !important;
  min-height:590px !important;
  border-radius:30px;
  filter:saturate(1.15) contrast(1.04) brightness(.94);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

.form-box{
  position:relative;
  padding:58px 50px !important;
  background:
    radial-gradient(circle at 88% 8%,rgba(77,231,243,.16),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
}

.form-box::before{
  content:"Fast response";
  display:inline-flex;
  align-items:center;
  gap:9px;
  position:absolute;
  right:34px;
  top:34px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(77,231,243,.14);
  border:1px solid rgba(77,231,243,.26);
  color:#4de7f3;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.form-box::after{
  content:"";
  position:absolute;
  right:42px;
  top:50px;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#4de7f3;
  box-shadow:0 0 18px #4de7f3;
}

.form-box .section-kicker{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:#fff !important;
}

.form-box h2{
  max-width:440px;
  margin-top:20px !important;
  margin-bottom:28px !important;
}

.form-box form{
  position:relative;
  z-index:2;
  padding:24px;
  border-radius:28px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.11);
  backdrop-filter:blur(16px);
}

.form-control{
  margin-top:18px !important;
}

.form-control input,
.form-control textarea,
.form-control select{
  padding:16px 4px !important;
  font-size:15px;
}

.form-control input:focus,
.form-control textarea:focus,
.form-control select:focus{
  border-bottom-color:#4de7f3 !important;
  box-shadow:0 14px 28px rgba(77,231,243,.09);
}

.form-box .mnbtn,
.form-box .btn{
  width:100%;
  margin-top:10px;
  justify-content:center;
}

.main-frm-response,
.main-frm-response2{
  margin-top:14px;
  min-height:22px;
}

.main-frm-response .success,
.main-frm-response2 .success{
  color:#4de7f3 !important;
  font-weight:800;
}

.main-frm-response .error,
.main-frm-response2 .error{
  color:#ff7b7b !important;
  font-weight:800;
}

/* legacy contact fallback if old classes appear */
.mapflx{
  border-radius:44px !important;
  background:
    radial-gradient(circle at 18% 12%,rgba(77,231,243,.15),transparent 34%),
    linear-gradient(135deg,#08172b,#02050a) !important;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 120px rgba(15,23,42,.24) !important;
}

.mapflx .frm_dv{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
}

.mapflx .map_img iframe{
  filter:saturate(1.15) contrast(1.04) brightness(.94);
}

/* Mobile */
@media(max-width:980px){
  .contact-section{
    padding-top:78px;
  }

  .contact-card{
    grid-template-columns:1fr !important;
    border-radius:34px !important;
  }

  .map-box{
    order:2;
    padding:14px;
  }

  .form-box{
    order:1;
    padding:38px 26px !important;
  }

  .form-box::before{
    position:static;
    margin-bottom:16px;
  }

  .form-box::after{
    display:none;
  }

  .map-box iframe{
    min-height:390px !important;
    border-radius:24px;
  }

  .map-box::before{
    left:28px;
    top:28px;
  }

  .map-box::after{
    left:28px;
    right:28px;
    bottom:28px;
  }
}

@media(max-width:640px){
  .contact-section{
    padding-top:64px;
  }

  .contact-card{
    border-radius:28px !important;
  }

  .contact-card::before{
    display:none;
  }

  .form-box{
    padding:28px 18px !important;
  }

  .form-box h2{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    font-size:34px !important;
  }

  .form-box .section-kicker{
    margin-left:auto;
    margin-right:auto;
  }

  .form-box form{
    padding:18px;
    border-radius:22px;
  }

  .map-box{
    padding:10px;
  }

  .map-box iframe{
    min-height:310px !important;
    border-radius:22px;
  }

  .map-box::before{
    left:20px;
    top:20px;
    font-size:11px;
    padding:9px 12px;
  }

  .map-box::after{
    left:20px;
    right:20px;
    bottom:20px;
    padding:13px 14px;
    border-radius:18px;
    font-size:12px;
  }
}