@import url("buttons.css");
 @import url("common.css");
 @import url("sub-page-hero.css");
 @import url("../Pages/section-title.css");

 /* ════════════════════════════════════════════
       MAIN LAYOUT
    ════════════════════════════════════════════ */

 .contact_wrapper {
     padding: 32px 0;
 }

 .contact-body {
     /* max-width: 1200px; */
     margin: 0 auto;
     /* display: grid;
     grid-template-columns: 1fr 1.55fr;
     gap: 48px;
     align-items: start; */
     position: relative;
     /* top: 111px; */
 }

 /* ════════════════════════════════════════════
       LEFT — OFFICE INFO
    ════════════════════════════════════════════ */
 /* .info-col {
     display: flex;
     flex-direction: column;
     gap: 28px;
 } */

 /* Section card */
 .info-card {
     background: white;
     border: 1px solid var(--grey-100);
     border-radius: 12px;
     overflow: hidden;
 }

 .info-card-head {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px 20px;
     border-bottom: 1px solid var(--grey-100);
 }

 .info-head-icon {
     width: 34px;
     height: 34px;
     border-radius: 8px;
     background: var(--grey-100);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 .info-head-icon svg {
     width: 16px;
     height: 16px;
     color: var(--orange-90);
 }

 .info-head-title {
     font-size: 15px;
     font-weight: 600;
     color: var(--color-muted);
     letter-spacing: -.01em;
 }

 .info-card-body {
     padding: 20px;
 }

 /* Detail rows */
 .detail-row {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 12px 0;
     border-bottom: 1px solid var(--grey-100);
 }

 .detail-row:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }

 .detail-row:first-child {
     padding-top: 0;
 }

 .detail-icon {
     width: 32px;
     height: 32px;
     border-radius: 7px;
     background: var(--grey-100);
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     margin-top: 1px;
 }

 .detail-icon svg {
     width: 14px;
     height: 14px;
     color: var(--grey-900);
 }

 .detail-label {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: .08em;
     text-transform: uppercase;
     color: var(--grey-900);
     margin-bottom: 3px;
 }

 .detail-val {
     font-size: 14px;
     font-weight: 500;
     color: var(--color-muted);
     line-height: 1.4;
 }

 .detail-val a {
     color: var(--color-muted);
     /* color: var(--mantra-orange); */
     transition: opacity .18s;
 }

 .detail-val a:hover {
     opacity: .75;
 }

 /* Map embed placeholder */
 .map-placeholder {
     max-height: 160px;
     background: var(--grey-100);
     border-radius: 2px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 16px;
     position: relative;
     overflow: hidden;
     cursor: pointer;
     border: 1px solid var(--grey-100);
     transition: border-color .2s;
 }

 .map-placeholder:hover {
     border-color: var(--mantra-orange);
 }

 /* Simple grid as map placeholder */
 .map-placeholder::before {
     content: '';
     position: absolute;
     inset: 0;
     background-image:
         linear-gradient(var(--grey-100) 1px, transparent 1px),
         linear-gradient(90deg, var(--grey-100) 1px, transparent 1px);
     background-size: 24px 24px;
 }

 .map-badge {
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 6px;
 }

 .map-pin {
     width: 36px;
     height: 36px;
     background: var(--mantra-orange);
     border-radius: 50% 50% 50% 0;
     transform: rotate(-45deg);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .map-pin::after {
     content: '';
     width: 14px;
     height: 14px;
     background: white;
     border-radius: 50%;
 }

 .map-label {
     font-size: 12px;
     font-weight: 500;
     color: var(--color-muted);
     background: white;
     padding: 4px 12px;
     border-radius: 20px;
     box-shadow: 0 2px 8px rgba(15, 20, 32, .12);
 }

 /* Social links */
 .social-row {
     display: flex;
     gap: 8px;
     margin-top: 16px;
 }

 .social-btn {
     width: 38px;
     height: 38px;
     border-radius: 8px;
     border: 1px solid var(--grey-100);
     background: white;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all .3s ease;
 }

 .social-btn i {
     width: 22px;
     height: 22px;
     transition: color .2s;

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

 .social-btn:hover {
     background: var(--mantra-blue);
     border-color: var(--mantra-blue);
 }

 .social-btn:hover i {
     color: white;
 }

 /* ════════════════════════════════════════════
       RIGHT — CONTACT FORM
    ════════════════════════════════════════════ */
 .form-card {
     background: white;
     border: 1px solid var(--grey-100);
     border-radius: 12px;
     overflow: hidden;
     position: sticky;
     top: 24px;
 }

 .form-card .form-group {
     margin-bottom: 8px;
 }

 .form-head {
     padding: 24px 28px;     
     background: var(--blue-90);
     position: relative;
     overflow: hidden;
 }

 /* glow on form head */
 .form-head::after {
     content: '';
     position: absolute;
     top: -40px;
     right: -40px;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(232, 100, 12, .2) 0%, transparent 70%);
     pointer-events: none;
 }

 .form-head-title {
     font-size: 20px;
     font-weight: 500;
     color: white;
     letter-spacing: -.02em;
 }

 .form-body {
     padding: 28px;
 }

 .captcha-box {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .captcha-box img {
     width: 70%;
 }

 .captcha-refresh {
     width: 36px;
     height: 36px;
     border-radius: 8px;
     background: var(--mantra-orange);
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background .2s, transform .3s;
     flex-shrink: 0;
 }

 .captcha-refresh:hover {
     background: var(--orange-90);
 }

 .captcha-refresh:active {
     transform: rotate(180deg);
 }

 .captcha-refresh svg {
     width: 16px;
     height: 16px;
     color: white;
 }

 /* Divider */
 .form-divider {
     height: 1px;
     background: var(--grey-100);
     margin: 16px 0;
 }

 /* Form footer */
 .form-footer {
     display: flex;
     align-items: center;
     justify-content: end;
     gap: 12px;
     flex-wrap: wrap;
 }

 /* =========================================
   CONTACT INFO SECTION
========================================= */

 .contact-info-section {
     padding: 46px 0 20px;
     position: relative;
     /* top: 111px; */
 }

 /* CONTENT WIDTH */

 .contact-info-content {
     max-width: 1100px;
 }

 .contact-info-title {
     font-size: 32px;
     line-height: 1.2;
     font-weight: 700;
     letter-spacing: -1px;
     color: #1d2939;
     margin-bottom: 12px;
 }

 /* HIGHLIGHT WORD */

 .contact-info-title span {
     color: #3958a7;
 }

 .contact-info-description {
     /* max-width: 850px; */
     font-size: 18px;
     line-height: 1.8;
     font-weight: 400;

     color: var(--grey-900);
 }

 @keyframes slideUp {
     from {
         transform: translateY(20px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 @media (max-width: 991.98px) {
    .form-head{
        padding: 18px;
    }
    .form-body{
        padding: 22px;
    }
     .contact-info-section {
         padding: 32px 0 20px;
     }

     .contact-info-title {
         font-size: 26px;
     }

     .contact-info-description {
         font-size: 18px;
     }

     .detail-val {
         font-size: 12px;
     }

     .contact-body {
         padding: 24px;
     }

     .hero-inner {
         grid-template-columns: 1fr;
     }

     .form-card {
         position: static;
     }

     .form-grid.cols-3 {
         grid-template-columns: 1fr 1fr;
     }
 }

 @media (max-width: 640px) {
     .form-grid {
         grid-template-columns: 1fr;
     }

     .form-grid.cols-3 {
         grid-template-columns: 1fr;
     }

     .contact-hero {
         padding: 44px 0 52px;
     }

     .captcha-row {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 575.98px) {

     .form-head {
         padding: 16px 12px;
     }

     .form-head-title {
         font-size: 14px;
     }

     .contact_wrapper {
         padding: 18px 0;
     }

     .info-card-body,
     .contact-body {
         padding: 12px !important;
     }

     .detail-row {
         gap: 6px;
         padding: 6px 0;
     }

     .form-body {
         padding: 18px 12px;
     }

     .contact-info-section {
         padding: 24px 0 12px;
     }

     .contact-info-description {
         font-size: 12px;
         line-height: 18px;
     }

     .contact-info-title {
         font-size: 18px;
     }
 }

 /* redesign by vigna - end */