.hero-content {
  position: relative;
  z-index: 2;
}
.fw-100 {
  font-weight: 100 !important;
}
.fw-200 {
  font-weight: 200 !important;
}
.fw-300 {
  font-weight: 350 !important;
}
.fw-400 {
  font-weight: 400 !important;
}
.fw-500 {
  font-weight: 500 !important;
}
.fw-600 {
  font-weight: 600 !important;
}
.fw-bold {
  font-weight: 700 !important;
}
.fw-800 {
  font-weight: 800 !important;
}
#contact-form {
  scroll-margin-top: 120px; /* navbar height + spacing */
}
.hero-section {
  margin-top: 84px;
}


.hero-content {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
}

.hero-subtitle {
  font-size: 28.5px;
  margin-top: 23px;
  margin-bottom: 18px;
  /* display: flex; */
  align-items: center;
  gap: 6px;
  font-weight: 700;
}
/* icon beside "nationwide" */
.inline-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.hero-description {
  font-size: 17.5px;
  line-height: 1.6;
  max-width: 680px;
  font-weight: 400;
}
/* Base outline button */
.hero-btn-outline {
  padding: 12px 28px;
  border-radius: 50px;
  font-size: 16px;
  border: 2px solid #edc729;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.3s ease;
}

/* Yellow fill animation (bottom → top) */
.hero-btn-outline::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: #edc729;
  z-index: -1;
  transition: height 0.4s ease-in-out;
}

/* On Hover: fill fully from bottom to top */
.hero-btn-outline:hover::before {
  height: 100%;
}

/* Text change to dark when background fills */
.hero-btn-outline:hover {
  color: #230756;
}

/* 2nd block starts */
.contact-title {
    font-size: 28px;
    font-weight: 700;
    color: #2B1459;
}

.contact-subtitle {
    font-weight:500;
    margin: 0 auto;
    color: #1A1A1C;
    font-size: 16px;
    line-height: 1.6;
}


/* Contact Cards */
.contact-card {
    background: #F7F3FF;
    padding: 40px 25px 25px 25px;
    border-radius: 15px;
    text-align: center;
    min-height: 230px;
    transition: 0.3s ease;
}

/* Icons inside cards */
.contact-img {
    width: auto;
    height: 30px;
    margin-bottom: 8px;
}

/* Card Title */
.contact-heading {
    font-size: 22px;
    font-weight: 700;
    color: #2B1459;
}

/* Card text */
.contact-text {
    color: #1A1A1C;
    font-size: 16px;
    line-height: 1.4;
    font-weight:500;
}

/* Social Icons */
.social-title {
    color: #1A1A1C;
    font-size: 16px;
    font-weight:500;
}

/* Decorative Lines beside title */
.title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    margin-bottom: 15px;
}

.title-line {
    flex: 1;
    height: 5px;
    background: #F3F0F6;
    position: relative;
    border-radius: 50px;
}


/* Circle on the RIGHT end of left line */
.title-line.left::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 50%;
    width: 40px;
    height:40px;
    background: #F3F0F6;
    border-radius: 50%;
    transform: translateY(-50%);
}

/* Circle on the LEFT end of right line */
.title-line.right::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    width: 40px;
    height: 40px;
    background: #F3F0F6;
    border-radius: 50%;
    transform: translateY(-50%);
}
/* Social Icons Flex Alignment */
.social-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.social-icons {
    display: flex;
    align-items: center;
}

.social-img {
    width: 22px;
    margin: 0 8px;
    cursor: pointer;
    transition: 0.2s;
}

.social-img:hover {
    transform: scale(1.1);
}
/* 2nd block ends */

/* 3rd block starts */


/* ================= HEADING LINE ================= */
.contact-header {
  display: flex;
  align-items: center;
  gap: 20px;
}


.heading-right {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-end;
  gap: 12px;
}

.heading-line {
  flex-grow: 1;
  height: 2px;
  background-color: #F3F0F6;
}

.heading-icon {
  width: 26px;
  height: auto;
}

/* ================= MAP ================= */
.map-box {
  border-radius: 14px;
  overflow: hidden;
}

.map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ================= FORM CARD ================= */
.form-wrapper {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 0 15px 0 rgba(146, 115, 201, 0.25);
}

/* ================= INPUT FIELDS ================= */
.custom-input {
  height: 52px;
  border-radius: 12px;
  border: 1px solid #eceaf3;
  background-color: #f7f6fb;
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
}

/* textarea height */
textarea.custom-input {
  height: 120px;
  resize: none;
}

/* REMOVE FOCUS */
.custom-input:focus,
.form-select:focus {
  outline: none !important;
  box-shadow: none !important;
  border-color: #eceaf3 !important;
  background-color: #f7f6fb !important;
}

/* ================= BUTTON ================= */
.submit-btn {
  position: relative;
  background: #230756 !important;
  color: #fff !important;
  padding: 12px 32px !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  border: none !important;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
  box-shadow: none !important;
}

/* Hover background animation */
.submit-btn::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 100%;
  background: #edc729;
  z-index: -1;
  transition: bottom 0.4s ease;
}

/* Hover state */
.submit-btn:hover::before {
  bottom: 0;
}

.submit-btn:hover {
  color: #230756 !important;
}

/* Remove Bootstrap focus/active border & glow */
.submit-btn:focus,
.submit-btn:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}


/* FORCE INPUT BACKGROUND – NORMAL STATE */
.form-control.custom-input,
.form-select.custom-input {
  background-color: #f7f6fb !important;
  border: 1px solid #eceaf3 !important;
  color: #6F6F6F !important;
}

/* PLACEHOLDER COLOR (matches screenshot look) */
.form-control.custom-input::placeholder,
textarea.custom-input::placeholder {
  color: #9b97b0;
  opacity: 1;
}
.captcha-submit-container {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Push button to the far right */
.captcha-submit-container .submit-btn {
  margin-left: auto;
}

/* Keep recaptcha from shrinking */
.captcha-submit-container .g-recaptcha {
  flex-shrink: 0;
}


/* 3rd block ends */
@media screen and (min-width: 320px) and (max-width: 375px) {
  .hero-section {
      position: relative;
        /* background-image: url("../images/contact_sm_bg.webp") !important; */
        background-size: cover;
        background-position:top center;
        color: #fff;
        padding: 50px 0;
  }
   .captcha-submit-container {
    flex-direction: column;
    align-items: center;
  }
  .hero-title {
    font-size: 32px;
  }
.hero-subtitle {
    font-size: 22.5px;
}
  .captcha-submit-container .submit-btn {
    margin-left: 0;
  }
  .contact-section1{
    margin-bottom:15rem !important;
  }
  .expert-bar {
    background: #2b0e67;
    border-radius: 12px;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 10px 23px;
  }
  .title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px !important;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 320px) and (max-width: 395px) {
  .hero-section {
     position: relative;
        /* background-image: url("../images/contact_sm_bg.webp") !important; */
        background-size: cover;
        background-position:top center;
        color: #fff;
        padding: 50px 0;
  }
   .captcha-submit-container {
    flex-direction: column;
    align-items: center;
  }
  .hero-subtitle {
    font-size: 22.5px;
  }
  .hero-title {
    font-size: 32px;
  }

  .captcha-submit-container .submit-btn {
    margin-left: 0;
  }
  .contact-section1{
    margin-bottom:10rem !important;
  }
   .expert-bar {
    background: #2b0e67;
    border-radius: 12px;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 10px 23px !important;
  }
   .title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 23px !important;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 396px) and (max-width: 768px) {
  .hero-section {
      position: relative;
        /* background-image: url("../images/contact_sm_bg.webp") !important; */
        background-size: cover;
        background-position:top center;
        color: #fff;
        padding: 60px 0;
  }
   .captcha-submit-container {
    flex-direction: column;
    align-items: center;
  }
  .hero-title {
    font-size: 32px;
  }
  .captcha-submit-container .submit-btn {
    margin-left: 0;
  }
    .contact-section1 {
        margin-bottom:10rem !important;
    }
 .title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px !important;
    margin-bottom: 15px;
  }
  .hero-subtitle {
    font-size: 22.5px;
}
}

@media screen and (min-width: 768px) and (max-width: 991.95px) {
    .hero-section {
        position: relative;
        /* background-image: url("../images/contact_sm_bg.webp") !important; */
        background-size: cover;
        background-position:top center;
        color: #fff;
        padding: 50px 0;
    }
    /* CAPTCHA + BUTTON SAME LINE */
    .captcha-submit-container {
    display: flex;
    align-items: center;
    gap: 20px;
    }
    .hero-title {
      font-size: 32px;
    }
    /* Push button to the far right */
    .captcha-submit-container .submit-btn {
    margin-left: auto;
    }

    /* Keep recaptcha from shrinking */
    .captcha-submit-container .g-recaptcha {
    flex-shrink: 0;
    }
    .contact-section1 {
        margin-bottom:6.5rem !important;
    }
}
@media screen and (min-width: 992px) {
  .common-padding {
    padding: 0px 70px !important;
    max-width: 1500px;
  }
  
  .navbar-nav .nav-link {
    color: #1a1a1c;
    font-weight: 400;
    padding: 10px 18px;
    font-size: 16px;
  }
  .hero-section {
    position: relative;
    /* background-image: url("../images/contact_bg.webp") !important; */
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 180px 0 !important;
  }
  .contact-section1 {
    margin-bottom:6.5rem !important;
  }
}