@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: "Poppins", sans-serif;
}

a {
  text-decoration: none !important;
  display: block !important;
}
img {
  width: 100%;
  display: block;
}
ul {
  padding: 0;
  margin: 0;
}
p {
  font-size: 16px;
  padding: 0;
  margin: 0;
  line-height: 26px;
  font-family: var(--f3);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}

:root {
  --c1: #000; /* Black */
  --c2: #fff; /* White */
  --c3: #4092ac; /* Red */
  --c4: rgba(247, 235, 215, 1); /* Background Color */
  --c5: #6b6b6b; /* Background Color */
  --c6: #8e8e8e;
  --f1: "Poppins", sans-serif;
  --f2: "Libre Caslon Text", serif;
  --f3: "Josefin Sans", sans-serif;
  --f4: "EB Garamond", serif;
  
}
::selection {
  background: var(--c5);
}
.spacing {
  padding: 100px 0;
  position: relative;
}

.spacing-bottom {
  padding-bottom: 100px;
  position: relative;
}
.spacing-top {
  padding-top: 100px;
  position: relative;
}



/* inner-wrapper */

.inner-header {
  height: 400px;
  background-position: bottom !important;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
}
.inner-header:before {
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}
.inner-header .container {
  position: relative;
}
.inner-header .inner-header-title h2 {
  color: vaR(--c1);
  font-size: 50px;
  font-weight: 700;
  text-align: start;
  font-family: var(--f2);
  text-decoration: underline;
  text-shadow: 0px 0px 10px #00000029;
}

/* end inner-wrapper */

/* ===============================
   Header CSS Start
================================== */

.top-bar {
  background: var(--c4);
  padding: 10px 0;
  border-top: 3px solid var(--c1);
}

.top-bar p {
  font-size: 14px;
  color: var(--c3);
  font-family: var(--f2);
  font-style: italic;
}

.top-bar p i {
  margin-right: 6px;
  color: var(--c3);
}

.top-bar .top-center-text {
  text-align: center;
}

.top-bar .top-center-text p {
  color: var(--c3);
  font-style: italic;
  font-family: "Libre Caslon Text", serif;
}

.main-header {
  padding: 18px 0;
  background: var(--c2);
  position: relative;
  z-index: 99;
}

.logo a {
  font-size: 42px;
  line-height: normal;
  color: var(--c1);
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
}

.main-menu ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 30px;
}

.main-menu ul li a {
  font-size: 17px;
  color: var(--c1);
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  font-family: var(--f3);
  position: relative;
  padding: 2px 10px;
}

.main-menu ul li a:hover,
.main-menu ul li a.active {
  color: var(--c3);
}

.theme-btn {
  width: max-content;
  padding: 14px 32px;
  background: var(--c3);
  border-radius: 50px;
  color: var(--c2) !important;
  font-size: 14px;
  line-height: normal;
  transition: 0.4s ease;
  border: 1px solid transparent;
}

.theme-btn:hover {
  background: transparent;
  border-color: var(--c3);
  color: var(--c3) !important;
}

/* ===============================
   Header CSS End
================================== */

/* ===============================
   Banner CSS Start
================================== */

.home-banner {
  position: relative;
  background: url("../images/banner.webp") no-repeat center center/cover;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
}

.banner-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.banner-content h1 {
  font-size: 50px;
  line-height: 70px;
  color: var(--c1);
  font-family: var(--f2);
  margin-bottom: 8px;
  text-shadow: 2px 1px 0px #a7a7a7;
}

.banner-content h4 {
  font-size: 30px;
  line-height: 44px;
  color: var(--c1);
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
  text-shadow: 0px 2px 0px #a7a7a7;
}

.banner-content p {
  margin-bottom: 30px;
}

.banner-btn-main {
  display: flex;
  align-items: center;
  gap: 15px;
}

.border-btn {
  width: max-content;
  padding: 14px 30px;
  border: 1px solid var(--c1);
  border-radius: 50px;
  color: var(--c1);
  transition: 0.4s ease;
  font-size: 14px;
  line-height: normal;
}

.border-btn:hover {
  background: var(--c1);
  color: var(--c2);
}

/* ===============================
   Banner CSS End
================================== */

/* ===============================
   About Section CSS Start
================================== */

.about-sec {
  overflow: hidden;
}

.about-img-main {
  position: relative;
  padding-left: 30px;
  padding-top: 30px;
}

.about-shape {
  width: 430px;
  height: 580px;
  background: var(--c3);
  border-radius: 15px;
  position: absolute;
  top: 0;
  left: 0;
}

.about-img {
  position: relative;
  z-index: 2;
}

.about-img img {
  border-radius: 20px;
  height: 630px;
  object-fit: cover;
  width: 90%;
}

.about-dots {
  position: absolute;
  right: -30px;
  top: 120px;
  z-index: 3;
}

.about-dots span {
  width: 8px;
  height: 8px;
  background: var(--c3);
  border-radius: 50%;
  display: block;
  margin-bottom: 22px;
}

.about-content {
  position: relative;
  padding-left: 40px;
}

.about-line {
  width: 3px;
  height: 100%;
  background: var(--c3);
  position: absolute;
  left: 0;
  top: 0;
}

.about-content h2 {
  font-size: 50px;
  line-height: 68px;
  color: var(--c1);
  font-family: var(--f2);
  margin-bottom: 25px;
  font-weight: 500;
  line-height: 53px;
}

.about-content h2 span {
  display: block;
  font-style: italic;
  font-size: inherit;
  font-family: var(--f4);
  font-weight: 100;
}

.about-content p {
  color: var(--c5);
  margin-bottom: 10px;
}

.about-bottom-main {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-top: 40px;
}

/* ===============================
   Email Box CSS
================================== */

.about-email-main {
  display: flex;
  align-items: center;
  gap: 15px;
}

.about-icon {
  width: 55px;
  height: 55px;
  background: var(--c3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-icon i {
  color: var(--c2);
  font-size: 20px;
}

.about-email-text h6 {
  font-size: 18px;
  line-height: normal;
  color: var(--c1);
  margin-bottom: 4px;
}

.about-email-text a {
  font-size: 15px;
  line-height: normal;
  color: var(--c5);
}

/* ===============================
   About Section CSS End
================================== */

/* ===============================
   Specialties Section CSS Start
================================== */

.specialties-sec {
  background: var(--c2);
}

.section-heading h2 {
  font-size: 60px;
  line-height: 56px;
  color: var(--c1);
  font-family: var(--f4);
  font-weight: 500;
  margin-bottom: 20px;
}

.specialties-top-main {
  border-bottom: 1px solid var(--c1);
  padding-bottom: 50px;
}

.specialties-title h3,
.expertise-title h3 {
  font-size: 32px;
  line-height: 45px;
  color: var(--c3);
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-weight: 400;
}

.specialty-card {
  background: rgba(64, 146, 172, 0.1);
  border-radius: 14px;
  min-height: 150px;
  padding: 25px 20px;
  text-align: center;
  transition: 0.4s ease;
}

.specialty-card.active,
.specialty-card:hover {
  background: var(--c3);
}

.specialty-icon {
  width: 75px;
  height: 75px;
  background: var(--c3);
  border-radius: 50%;
  border: 1px solid var(--c2);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.specialty-card.active .specialty-icon,
.specialty-card:hover .specialty-icon {
  background: var(--c2);
}

.specialty-icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.specialty-card h4 {
  font-size: 18px;
  line-height: 28px;
  color: var(--c3);
  font-weight: 500;
  font-family: var(--f1);
}

.specialty-card.active h4,
.specialty-card:hover h4 {
  color: var(--c2);
}

.specialties-bottom-main {
  padding-top: 50px;
}

.expertise-list-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}

.expertise-list-main ul li {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f3);
}

.expertise-list-main ul li i {
  color: var(--c3);
  font-size: 15px;
}

.expertise-title {
  padding-left: 35px;
}

.expertise-title span {
  width: 330px;
  height: 3px;
  background: var(--c3);
  display: block;
  margin-top: 45px;
}

/* ===============================
   Specialties Section CSS End
================================== */
/********************************/
/************  Footer  **********/
/********************************/


footer.footer {
    padding-top: 100px;
    background: rgba(64, 146, 172, 0.1);
}

h3.f-title {
    position: relative;
    text-transform: capitalize;
    font-size: 22px;
    font-family: var(--f2);
    margin-bottom: 30px;
}

h3.f-title::before {
    content: '';
    position: absolute;
    background: var(--c3);
    width: 42px;
    height: 3px;
    bottom: -4px;
    border-radius: 30px;
}

.f-about p {
    padding-right: 190px;
    padding-bottom: 25px;
}

.f-links ul li {list-style: disc !important;margin-left: 20px;line-height: 50px;}

.f-links ul li a {
    text-transform: capitalize;
    color: var(--c1);
    font-family: var(--f3);
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.f-links span {
    color: var(--c3);
    font-weight: 700;
    font-family: var(--f3);
    letter-spacing: 1px;
}

.f-links p {
    padding-bottom: 10px;
}

.footer-bottom {
    background: var(--c3);
    padding: 10px 0px;
    margin-top: 50px;
}

.footer-bottom p {
    color: var(--c2);
    text-transform: capitalize;
}

.footer-bottom img {
    width: 180px;
    margin-left: auto;
}
ul.f-social {
    display: flex;
    gap: 10px;
}

.f-social li a {
    border: 1px solid var(--c3);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    font-size: 22px;
    color: var(--c3);
}


/*  */
.primary-btn a {
    font-size: 17px;
    line-height: 16px;
    color: #fff;
    font-family: var(--f3);
    letter-spacing: 0.025em;
    background: var(
    --c3);
    padding: 14px 29px;
    border-radius: 23px;
    border: 0;
    overflow: hidden;
    position: relative;
    display: block !important;
    text-align: center;
    border: 1px solid transparent;
    transition: all 0.3s ease-in-out;
    width: max-content;
}
.primary-btn a div {
    display: block;
    position: relative;
    z-index: 10;
    font-size: 16px;
    transition: color 0.8s ease-in-out;
}.primary-btn a:before {
    background: var(--c4);
    z-index: 5;
    transition: left 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.primary-btn a:after, .primary-btn a:before {
    padding: 18px 0 11px;
    content: '';
    position: absolute;
    top: 0;
    left: calc(-100% - 30px);
    height: calc(100%);
    width: calc(100% + 20px);
    color: #fff;
    border-radius: 2px;
    transform: skew(-25deg);
}.primary-btn a:after {
    background: #fff;
    transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1) 0.2s;
    z-index: 0;
    opacity: 1;
}
.primary-btn a:hover:before {
    left: calc(0% - 10px);
    transition: left 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.primary-btn a:hover:after {
    left: calc(0% - 10px);
    transition: left 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}
.drop-down-menu-title h3 {
    color: var(--c2);
    font-family: var(--f2);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 1px;
    padding-bottom: 10px;
}

.dropdown-content p {
    color: #b5dffe;
    font-size: 14px;
    line-height: 20px;
    font-family: var(--f3);
    text-transform: capitalize;
    font-weight: 400;
}

.dd-manu-tab span {
    color: var(--c2);
    font-size: 16px;
    font-family: var(--f3);
    text-transform: capitalize;
    font-weight: 500;
}

.dd-manu-tab span i {
    color: var(--c4);
    padding-left: 5px;
}

.dd-manu-tab {
    padding-bottom: 25px;
}
.dd-manu-tab:hover span {
    color: #b5905d;
}   .h-contact a {
    color: var(--c1);
    font-family: var(--f2);
    font-size: 17px;
}

.h-contact a i {
    color: var(--c3);
    font-size: 22px;
    padding-right: 4px;
}

.top-bar-row {
    display: flex;
    justify-content: space-between;
}

nav.main-menu {
    display: flex;
    justify-content: end;
    gap: 40px;
}
.primary-btn a:hover div {
    color: var(--c3);
}

.logo a img {
    width: 300px;
}
.banner-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}
a.outline-btn {
    background: transparent;
    border: 1px solid var(--c1);
    color: var(--c1);
    backdrop-filter: blur(1px);
}
.about-bubbles-shape {
    position: absolute;
    right: -20px;
}
.specialty-card:hover .specialty-icon img {
    filter: invert(53%) sepia(48%) saturate(601%) hue-rotate(151deg) brightness(91%) contrast(89%);
}
.therapy-assessments .shape-1 {
    position: absolute;
    right: 80px;
    width: 250px;
    top: 160px;
}
.therapy-assessments .shape-2 {
    position: absolute;
    left: 40px;
    top: 43%;
    width: 340px;
}

.therapy-assessments-title h2 {
    text-align: center;
}

.section-heading h2 span {
    font-style: italic;
    font-family: var(--f4);
    font-weight: 100;
    letter-spacing: -1px;
    color: #232323;
}

.therapy-assessments-content h3 img {
    width: 30px;
}


.therapy-assessments-content h3 {
    display: flex;
    gap: 10px;
    font-family: var(--f2);
    padding-bottom: 15px;
    font-size: 34px;
}

.therapy-assessments-content {
    background: var(--c2);
    box-shadow: 0px 0px 15px #0000001c;
    padding: 50px 60px;
    border-radius: 20px;
    /* margin-right: -70px; */
    transform: translateX(20px);
    position: relative;
    z-index: 2;
}

.therapy-assessments-content span {
    font-style: italic;
}

.therapy-assessments-content .primary-btn a {
    width: max-content;
}

.contact-form-main .primary-btn input {background: var(--c3);color: var(--c2);display: block;width: 100%;border: none;padding: 12px 10px;border-radius: 70px;}
.therapy-assessments-image {
    margin-left: -110px;
    position: relative;
    animation: move-x 2s ease-in-out 0.5s infinite alternate;
}
.therapy-assessments-image-2 {
    margin-right: -170px;
    position: relative;
    animation: move-x 2s ease-in-out infinite alternate;
}
section.therapy-assessments {
    background: #4092ac2b;
}

/* ===============================
   Testimonial Section CSS Start
================================== */

.testimonial-sec {
  background: var(--c2);
  overflow: hidden;
}

.testimonial-shape {
  position: absolute;
  right: 0;
  top: 220px;
  width: 80px;
}

.testimonial-heading {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.testimonial-heading > span {
  width: 160px;
  height: 3px;
  background: var(--c3);
  display: block;
  margin-top: 28px;
  margin-left: -160px;
}

.testimonial-heading h2 {
  /* font-size: 44px; */
  /* line-height: 50px; */
  /* color: var(--c1); */
  /* font-family: "Libre Caslon Text", serif; */
}

.testimonial-heading h2 em {
  font-style: italic;
  font-weight: 400;
}

.testimonial-arrow-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.testimonial-arrow-main button {
  border: none;
  background: transparent;
  color: var(--c1);
  font-size: 40px;
  padding: 0;
  transition: 0.2s ease-out;
}

.testimonial-arrow-main button:hover {
  color: var(--c3);
}

.testimonial-slider-main {
  margin-top: 35px;
}

.testimonial-slider .slick-slide {
  padding: 0 15px;
}

.testimonial-card {
  background: var(--c2);
  border-radius: 15px;
  padding: 35px 30px;
  min-height: 380px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.06);
  transition: 0.4s ease;
}

.testimonial-card.active,
.testimonial-card:hover {
  background: var(--c3);
  box-shadow: 0px 0px 10px var(--c3);
  transform: translateY(-10px);
}

.testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--c1);
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.testimonial-card.active .testimonial-top,
.testimonial-card:hover .testimonial-top {
  border-color: var(--c2);
}

.stars {
  display: flex;
  align-items: center;
  gap: 4px;
}

.stars i {
  width: 26px;
  height: 26px;
  background: #e99a25;
  color: var(--c2);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-icon i {
  font-size: 60px;
  color: var(--c3);
}

.testimonial-card.active .quote-icon i,
.testimonial-card:hover .quote-icon i {
  color: var(--c2);
}

.testimonial-card p {
  margin-bottom: 25px;
  height: 180px;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.testimonial-card.active p,
.testimonial-card:hover p {
  color: var(--c2);
}

.testimonial-card h4 {
  font-size: 26px;
  line-height: normal;
  color: var(--c1);
  font-family: var(--f1);
  font-weight: 500;
}

.testimonial-card.active h4,
.testimonial-card:hover h4 {
  color: var(--c2);
}

/* ===============================
   Testimonial Section CSS End
================================== */
.testimonial-slider .slick-track {
    padding: 20px 0px;
}
.testimonial-card:hover .quote-icon img {
    filter: brightness(4);
}


/* ===============================
   FAQ Section CSS Start
================================== */

.faq-sec {
  background: var(--c4);
  overflow: hidden;
}

.faq-shape {
  width: 150px;
  height: 35px;
  background: #8ab9cd;
  position: absolute;
  z-index: 1;
}

.faq-shape-left {
  left: -35px;
  bottom: 200px;
  transform: skewY(-22deg);
}

.faq-shape-right {
  right: -35px;
  bottom: 220px;
  transform: skewY(22deg);
}

.faq-left h3 {
  font-size: 34px;
  line-height: 44px;
  color: #8ab9cd;
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
  font-weight: 400;
  padding-bottom: 20px;
  border-bottom: 2px solid #d1d1d18c;
}

.faq-accordion .accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 0;
}

.faq-accordion .accordion-button {
  background: transparent;
  box-shadow: none;
  padding: 22px 0;
  font-size: 23px;
  line-height: 32px;
  color: var(--c1);
  font-family: "Libre Caslon Text", serif;
  border-bottom: 2px solid transparent;
}

.faq-accordion .accordion-button::after {
  display: none;
}

.faq-accordion .accordion-button::before {
  content: "\f067";
  width: 44px;
  height: 44px;
  background: var(--c2);
  border-radius: 50%;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.12), inset 2px 2px 2px rgba(0, 0, 0, 0.12);
  color: var(--c3);
  font-size: 22px;
  line-height: 44px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 0;
  top: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-accordion .accordion-button:not(.collapsed)::before {
  content: "\f068";
}

.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--c1);
}

.faq-accordion .accordion-body {
  padding: 0 70px 20px 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--c1);
  font-weight: 500;
}

.faq-right {
  border: 2px solid #8ab9cd;
  border-left: none;
  padding: 55px 40px 30px;
  margin-left: 35px;
  position: relative;
}

.faq-right::before {
  content: "";
  width: 55px;
  height: 2px;
  background: #8ab9cd;
  position: absolute;
  left: 0;
  top: -2px;
}

.faq-right::after {
  content: "";
  width: 55px;
  height: 2px;
  background: #8ab9cd;
  position: absolute;
  left: 0;
  bottom: -2px;
}

.faq-right h2 {
  font-size: 42px;
  line-height: 48px;
  color: var(--c1);
  font-family: "Libre Caslon Text", serif;
  margin-bottom: 20px;
}

.faq-right h2 span {
  display: inline;
  font-style: italic;
  font-weight: 400;
}

.faq-right p {
  font-size: 14px;
  line-height: 22px;
  color: var(--c1);
  margin-bottom: 25px;
}

.faq-search {
  position: relative;
  margin-bottom: 18px;
}

.faq-search input {
  width: 100%;
  height: 46px;
  border: 1px solid #d2d2d2;
  background: var(--c2);
  border-radius: 50px;
  padding: 0 45px 0 25px;
  font-size: 14px;
  color: var(--c1);
  outline: none;
}

.faq-search button {
  border: none;
  background: transparent;
  color: var(--c5);
  position: absolute;
  right: 17px;
  top: 8px;
  font-size: 18px;
}

.faq-right .primary-btn a div {
}

.faq-img {
  position: relative;
  z-index: 2;
  margin-top: 55px;
}

.faq-img img {
  height: 435px;
  object-fit: cover;
  border-radius: 10px;
}

/* ===============================
   FAQ Section CSS End
================================== */
.primary-btn a:hover {
    box-shadow: 0px 0px 4px var(--c3);
}

/* ===============================
   Organizations Section CSS Start
================================== */

.organization-sec {
  background: url("../images/organization-bg.webp") no-repeat center center/cover;
  position: relative;
  overflow: hidden;
}

.organization-overlay {
  background: rgba(64, 146, 172, 0.88);
  padding: 85px 0;
  position: relative;
}

.organization-overlay::before,
.organization-overlay::after {
}

.organization-overlay::before {
  right: 310px;
}

.organization-overlay::after {
  right: 85px;
}

.organization-heading h2 {
  font-size: 49px;
  line-height: 54px;
  color: var(--c2);
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
}

.organization-heading h2 span {
  display: block;
  font-size: 38px;
  line-height: 42px;
}

.organization-heading h2 em {
  font-style: italic;
  font-weight: 400;
}

.organization-logo-main {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 45px;
  position: relative;
  z-index: 2;
}

.organization-logo {position: relative;height: 110px;width: 110px;}

.organization-logo.active {
}

.organization-logo.active::before {
}

.organization-logo .main-image img{
  width: 110px;
  height: 110px;
  object-fit: cover;
}

/* ===============================
   Organizations Section CSS End
================================== */
.organization-shape-image {
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    width: 100px;
}

.organization-logo:hover .organization-shape-image {
    width: 155px;
}

.main-image {
    position: relative;
    z-index: 2;
    width: inherit;
}

.organization-shape-image img {
    width: 100%;
    object-fit: contain;
}

.organization-logo.shape-down::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 400%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 70px 70px 0px 0px;
    transition: all 0.7s ease-in-out;
}

.organization-logo.shape-up::before {
    transition: all 0.7s ease-in-out;
    content: '';
    position: absolute;
    width: 100%;
    height: 400%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    bottom: 0;
    border-radius: 0px 0px 70px 70px;
}
.organization-title h2, .organization-title h2 span {
    color: vaR(--c2);
}
.organization-logo.shape-up:hover::before, .organization-logo.shape-down:hover::before {
    background: #ffffff33;
}

/* ===============================
   Contact Section CSS Start
================================== */

.contact-sec {
  background: var(--c2);
}

.contact-heading {
  margin-bottom: 50px;
}

.contact-heading h2 {
}

.contact-heading h2 em {
  font-style: italic;
}

.contact-heading p {
  max-width: 880px;
  margin: 0 auto;
  line-height: 20px;
}

.contact-form-main {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--c2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.contact-form-title {
  text-align: center;
  padding: 48px 20px;
  border-bottom: 1px solid #e5e5e5;
}

.contact-form-title h3 {
  font-size: 41px;
  line-height: 40px;
  color: var(--c1);
  font-family: var(--f4);
  font-weight: 500;
}

.contact-form-title h3 span {
  display: block;
  font-style: italic;
  font-family: var(--c3);
  font-weight: 100;
}

.contact-form-main form {
  padding: 35px 25px 25px;
}

.input-main {
  margin-bottom: 16px;
}

.input-main label {
  font-size: 14px;
  line-height: normal;
  color: var(--c1);
  margin-bottom: 6px;
  display: block;
}

.input-main input,
.input-main textarea {
  width: 100%;
  height: 32px;
  border: 1px solid #cfd8df;
  border-radius: 4px;
  outline: none;
  padding: 5px 10px;
  font-size: 13px;
  color: var(--c1);
  background: var(--c2);
  transition: all 0.2s ease-in-out;
}

.input-main textarea {
  height: 120px;
  resize: none;
}

.checkbox-main {
  margin-bottom: 18px;
}

.checkbox-main p {
  font-size: 13px;
  line-height: 16px;
  color: var(--c1);
  margin-bottom: 15px;
}

.checkbox-main .wpcf7-checkbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-main .wpcf7-list-item {
  margin: 0;
  display: flex;
}

.checkbox-main .wpcf7-list-item label {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.checkbox-main input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 31px;
  min-width: 31px;
  height: 17px;
  background: #b8c4cb;
  border-radius: 30px;
  position: relative;
  cursor: pointer;
  transition: 0.3s ease;
  margin: 0 10px 0 0;
}

/* Circle */
.checkbox-main input[type="checkbox"]::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--c2);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: 0.3s ease;
}

/* Active */
.checkbox-main input[type="checkbox"]:checked {
  background: var(--c3);
}

.checkbox-main input[type="checkbox"]:checked::before {
  left: 16px;
}
.contact-form-main br {
    display: none;
}

.checkbox-main .wpcf7-list-item-label {
  font-size: 14px;
  line-height: 18px;
  color: var(--c1);
}

.contact-info-card {
  background: var(--c4);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.contact-map img {
  height: 360px;
  object-fit: cover;
}

.office-info {
  padding: 14px 35px 35px;
  position: relative;
  z-index: 99;
  background: var(--c4);
}

.office-info::before {
  content: "";
  width: 100%;
  height: 125px;
  background: var(--c4);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: -60px;
}

.office-info h3 {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 30px;
  line-height: 38px;
  color: var(--c1);
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  margin-bottom: 25px;
}

.office-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 25px;
}

.office-icon {
  width: 36px;
  height: 36px;
  background: var(--c3);
  color: var(--c2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  transition: all 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.office-icon i {
  font-size: 15px;
}

.office-box h6 {
  font-size: 12px;
  color: var(--c3);
  margin-bottom: 4px;
  font-family: var(--f3);
}

.office-box p {
  font-size: 14px;
  color: var(--c1);
  font-weight: 600;
  line-height: 20px;
}

.contact-building-img {
  margin-top: 30px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: -15px 14px 0px var(--c3);
  margin-left: 15px;
}

.contact-building-img img {
  height: 345px;
  object-fit: cover;
}
.contact-map {
    border: 10px solid var(--c3);
}

/* ===============================
   Contact Section CSS End
================================== */
.contact-building-img img {
    height: 500px;
    object-fit: cover;
}
.office-box:hover .office-icon {
    background: var(--c2);
    color: var(--c3);
    box-shadow: 0px 0px 10px var(--c3);
}
.image-anime {
  position: relative;
  overflow: hidden;
}
.image-anime:after {
      content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}
.image-anime:hover:after {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}
.input-main input:hover , .input-main textarea:hover {
    box-shadow: 1px 1px 1px var(--c3);
}
button.accordion-button.collapsed:hover {
    border-color: var(--c3);
}

@keyframes move-x {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateX(-10px);
  }
}
.therapy-assessments-content .primary-btn {
    margin-top: 12px;
}
.banner-shape {
    position: absolute;
    left: -266px;
    width: 90%;
    top: -30px;
}
.f-links ul li a:hover {
    margin-left: 8px;
}
.main-menu ul li a::before {
    content: '';
    position: absolute;
    background: var(--c3);
    height: 2px;
    width: 100%;
    bottom: 0px;
    left: -100%;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.main-menu ul li a:hover::before {
    left: 0;
}

.main-menu ul li {
    overflow: hidden;
}
/* ===============================
   Loader CSS Start
================================== */

.site-loader {
  width: 100%;
  height: 100vh;
  background: var(--c4);
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.6s ease;
}

.site-loader.loader-hide {
  opacity: 0;
  visibility: hidden;
}

.loader-main {
  text-align: center;
}

.loader-circle {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto 25px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-circle span {
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  border-top-color: var(--c3);
  border-radius: 50%;
  position: absolute;
  animation: loaderRotate 1.4s linear infinite;
}

.loader-circle span:nth-child(2) {
  width: 105px;
  height: 105px;
  border-top-color: var(--c1);
  animation-duration: 1.9s;
  animation-direction: reverse;
}

.loader-circle span:nth-child(3) {
  width: 78px;
  height: 78px;
  border-top-color: var(--c3);
  animation-duration: 1.2s;
}

.loader-inner {
  width: 62px;
  height: 62px;
  background: var(--c3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loaderPulse 1.8s ease-in-out infinite;
}

.loader-inner h4 {
  font-size: 24px;
  line-height: normal;
  color: var(--c2);
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
}

.loader-main h3 {
  font-size: 34px;
  line-height: 42px;
  color: var(--c1);
  font-family: "Libre Caslon Text", serif;
  font-weight: 700;
  margin-bottom: 8px;
}

.loader-main p {
  font-size: 16px;
  line-height: 24px;
  color: var(--c3);
  font-family: "Libre Caslon Text", serif;
  font-style: italic;
}

@keyframes loaderRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes loaderPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(64, 146, 172, 0.35);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 18px rgba(64, 146, 172, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(64, 146, 172, 0);
  }
}

/* ===============================
   Loader CSS End
================================== */

.scroll-down-btn {
    position: absolute;
    left: 50%;
    bottom: -65px;
    transform: translateX(-50%);
    width: 350px;
    height: 120px;
    border: 0;
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
    /* gap: 8px; */
    cursor: pointer;
    z-index: 5;
}

.scroll-down-btn span {
    font-size: 12px;
    letter-spacing: 10px;
    text-transform: uppercase;
    color: #111;
    transform: rotate(-12deg);
    margin-left: 15px;
    position:relative;
}

.scroll-down-btn i {
    enter;
}
.scroll-down-btn span{
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    font-size: 14px;
    letter-spacing: 12px;
    text-transform: uppercase;
    color: #000;
    white-space: nowrap;
    width: 100%;
    text-align: center;
}

/* curve effect */
.scroll-down-btn span::before{
    content: "";
    position: absolute;
    left: 50%;
    top: -18px;
    transform: translateX(-50%);
    width: 220px;
    height: 120px;
    border-top: 2px solid transparent;
    border-radius: 50%;
}

.scroll-down-btn i{
    position: absolute;
    bottom: 18px;
    font-size: 16px;
    color: #000;
    animation: bounce 1.5s infinite;
    border: 2px solid #000;
    border-radius: 30px;
    padding: 2px 6px 14px;
}

@keyframes bounce{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(8px);
    }
}
.scroll-down-btn img {
    width: 200px;
}

.harbor-about-team-sec {
    padding: 20px 0 85px;
    background: #fff;
}

.harbor-about-team-sec .container {
}

.harbor-about-main-row {
    margin-bottom: 55px;
}

.harbor-about-img img {
    width: 100%;
    height: 405px;
    object-fit: cover;
    border-radius: 10px;
}

.harbor-about-content {
    padding-right: 30px;
}

.harbor-about-content p,
.harbor-family-content p {
}

.harbor-family-row {
    row-gap: 35px;
}

.harbor-family-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.harbor-family-left {
    /* max-width: 500px; */
}

.harbor-family-right {
}

.harbor-family-img {
    flex: 0 0 205px;
}

.harbor-family-img img {
    width: 305px;
    height: 370px;
    object-fit: cover;
    border-radius: 9px;
}

.harbor-family-content h2 {
    font-family: var(--f2);
    font-size: 32px;
    line-height: 1;
    color: #000;
    margin-bottom: 16px;
}

.harbor-family-content p {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .harbor-about-content {
        padding-left: 0;
        margin-top: 30px;
    }

    .harbor-family-box {
        max-width: 100%;
    }

    .harbor-family-right {
        margin-left: 0;
    }
}

@media (max-width: 575px) {
    .harbor-family-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .harbor-family-img {
        flex: 0 0 auto;
    }

    .harbor-family-img img {
        width: 100%;
        height: auto;
    }

    .harbor-family-content h2 {
        font-size: 28px;
    }
}
.faqs-page-sec-title {
    text-align: center;
    padding: 0px 170px;
}
.faqs-page-sec-content {
    padding-top: 50px;
}
/* ===============================
   Service Detail Section CSS Start
================================== */

.service-detail-sec {
  background: var(--c2);
  overflow: hidden;
}

.service-shape {
  width: 330px;
  height: 570px;
  background: var(--c3);
  position: absolute;
  right: -15px;
  top: 0;
  clip-path: polygon(100% 0, 100% 100%, -10% 100%);
}

.service-detail-main {
  background: var(--c2);
  border-radius: 8px;
  padding: 55px 40px;
  box-shadow: 0px -15px 40px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}

.service-title-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-title-main span {
  width: 470px;
  height: 2px;
  background: var(--c3);
  display: block;
  position: relative;
}

.service-title-main span::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c3);
  border-radius: 50%;
  position: absolute;
  right: -4px;
  top: -3px;
}

.service-title-main h2 {
  font-size: 38px;
  line-height: 46px;
  color: var(--c1);
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-title-main h2 em {
  font-style: italic;
}

.service-title-main h2 i {
  color: var(--c3);
  font-size: 24px;
}

.service-content-main {
  display: flex;
  align-items: center;
  margin-top: 35px;
}

.service-text-box {
  width: 48%;
  background: var(--c4);
  padding: 45px 38px;
  text-align: center;
  position: relative;
  z-index: 1;
  border-left: 16px solid #fff;
  box-shadow: 17px 0px 14px #00000012;
}

.service-text-box p {margin-bottom: 16px;}

.service-text-box .primary-btn a {
}

.service-text-box .primary-btn a div {
}

.service-img {
  width: 55%;
  margin-left: -30px;
  position: relative;
  z-index: 2;
}

.service-img img {
  height: 420px;
  object-fit: cover;
  border-radius: 10px;
}

.service-bottom-line {
  width: 470px;
  height: 2px;
  background: var(--c3);
  margin-top: 35px;
  position: relative;
  margin-left: 20px;
}

.service-bottom-line span {
  width: 8px;
  height: 8px;
  background: var(--c3);
  border-radius: 50%;
  position: absolute;
  left: -4px;
  top: -3px;
}

/* ===============================
   Service Detail Section CSS End
================================== */
.service-text-box::before {
    content: '';
    position: absolute;
    left: -16px;
    width: 16px;
    height: 85%;
    background: var(--c3);
    top: 25px;
}

.service-text-box .primary-btn a {
    margin: 0 auto;
}
.service-title-main h2 img, .assessment-title-main h2 img {
    width: 40px;
}

/* ===============================
   Service Assessment Section CSS Start
================================== */

.service-assessment-sec {
  background: var(--c2);
}

.assessment-shape {
  width: 280px;
  height: 410px;
  background: var(--c3);
  position: absolute;
  left: -80px;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 0 100%);
}

.assessment-main {
  background: var(--c2);
  border-radius: 8px;
  padding: 55px 65px 70px;
  box-shadow: 0px -10px 45px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}

.assessment-title-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.assessment-title-main h2 {
  font-size: 38px;
  line-height: 46px;
  color: var(--c1);
  font-family: "Libre Caslon Text", serif;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 8px;
}

.assessment-title-main h2 em {
  font-style: italic;
}

.assessment-title-main h2 i {
  color: var(--c3);
  font-size: 24px;
}

.assessment-title-main span {
  width: 470px;
  height: 2px;
  background: var(--c3);
  display: block;
  position: relative;
}

.assessment-title-main span::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--c3);
  border-radius: 50%;
  position: absolute;
  left: -4px;
  top: -3px;
}

.assessment-content-main {
  display: flex;
  align-items: center;
  margin-top: 35px;
}

.assessment-img {
  width: 58%;
  position: relative;
  z-index: 2;
  margin-bottom: -80px;
}

.assessment-img img {
  height: 600px;
  object-fit: cover;
  border-radius: 10px;
}

.assessment-text-box {
  width: 48%;
  background: var(--c4);
  padding: 55px 45px;
  border-right: 12px solid var(--c3);
  margin-left: -20px;
  position: relative;
  z-index: 1;
  border-radius: 4px 0px 0px 4px;
  box-shadow: 17px 0px 14px #00000012;
}

.assessment-text-box p {padding-bottom: 12px;}

.assessment-text-box p:last-child {
  margin-bottom: 0;
}

.assessment-bottom-line {
  width: 470px;
  height: 2px;
  background: var(--c3);
  margin-top: 45px;
  margin-left: auto;
  position: relative;
}

.assessment-bottom-line span {
  width: 8px;
  height: 8px;
  background: var(--c3);
  border-radius: 50%;
  position: absolute;
  right: -4px;
  top: -3px;
}

/* ===============================
   Service Assessment Section CSS End
================================== */
.therapy-assessments-title {
    padding: 0px 170px;
    padding-bottom: 30px;
}

.specialties-sec .section-heading {
    padding-bottom: 40px;
}
.organization-title h2 span {
    margin-top: 10px;
    display: inline-block;
}
.banner-content h4::before {
    content: '';
    position: absolute;
    background: var(--c3);
    bottom: -4px;
    height: 7px;
    width: 100%;
    left: 0;
    border-radius: 20px;
}

.contact-info-card::before {
    content: '';
    position: absolute;
    background: var(--c3);
    height: 200px;
    width: 100%;
    top: 286px;
    border-radius: 50%;
}

.contact-info-card.aos-init.aos-animate {}
.testimonial-card p::-webkit-scrollbar-track {
    background: var(--c3);
}

.testimonial-card p::-webkit-scrollbar-thumb {
    background: var(--c4);
}

/*************************************************************************************************************************************/

/* --- CSS Variable Fallbacks (Will inherit from your site's main stylesheet) --- */
:root {
    --form-bg: #ffffff;
    --form-border: #e2e8f0;
    --input-border: #cbd5e1;
    --input-radius: 4px;
    
    /* Blue/Teal accents extracted from your screenshot */
    --header-teal: #4295b4; 
    --sub-card-blue: #cbeffc;
    --text-dark: #333333;
}

/* --- Global Section Structure --- */
.form-section {
    font-family: var(--font-family, 'Arial', sans-serif);
    color: var(--text-dark);
    /* max-width: 1200px; */
    margin: 40px auto;
    /* padding: 0 20px; */
}

/* Top Line Input */
.date-completed-wrapper {
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: 600;
}
.date-completed-wrapper label {
    margin-right: 10px;
}
.line-input {
    border: none;
    border-bottom: 1px solid var(--input-border);
    width: 250px;
    outline: none;
    background: transparent;
}

/* --- Container Block Layout --- */
.form-block {
    background: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: 4px;
    margin-bottom: 35px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.block-title {
    background-color: var(--primary-color, var(--header-teal));
    color: #ffffff;
    margin: 0;
    padding: 14px 20px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-family: var(--f2);
}

.block-content {
    padding: 25px 20px;
}

/* --- Standard Inputs Layout --- */
.grid-4-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px 20px;
}

.col-span-1 { grid-column: span 1; }
.col-span-2 { grid-column: span 2; }

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"] {
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
    background-color: #fefefe;
}

.form-group input:focus {
    border-color: var(--primary-color, var(--header-teal));
    background-color: #ffffff;
}

/* --- Nested Columns Layout (Section 2) --- */
.nested-flex {
    display: flex;
    gap: 25px;
}

.sub-card {
    flex: 1;
    border: 1px solid var(--form-border);
    border-radius: 4px;
    overflow: hidden;
}

.sub-card-title {
    background-color: var(--sub-card-blue);
    color: var(--primary-color, var(--header-teal));
    margin: 0;
    padding: 10px 15px;
    font-size: 17px;
    font-weight: 500;
    font-family: var(--f2);
}

.sub-card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 0px;
}

/* --- Concerns Checkbox Layout (Section 3) --- */
.concerns-instruction {
    color: var(--primary-color, var(--header-teal));
    font-style: italic;
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 20px;
    text-decoration: underline;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 0.9fr 1.3fr;
    gap: 15px;
}

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

.cb-label p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 25px;
    cursor: pointer;
    margin: 6px  0px;
}

.cb-label input[type="checkbox"] {
}

/* Inline Checkbox groupings */
.cb-inline-group {
    /* display: flex; */
    /* gap: 10px; */
    /* margin: 4px 0; */
}

.inline-wrap {
    flex-direction: column;
    gap: 6px;
}

.inline-wrap span {
    /* font-size: 12px; */
    /* font-weight: 600; */
}

.inline-wrap .cb-label {
    /* margin-left: 10px; */
    display: inline-block;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-4-col {
        grid-template-columns: 1fr;
    }
    .col-span-1, .col-span-2 {
        grid-column: span 1;
    }
    .nested-flex {
        flex-direction: column;
    }
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================
    Data Form Section Start
========================= */
.data-form-sec{
    padding: 80px 0;
    background: var(--white-color);
}

.data-form-wrapper{
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.form-box{
    border: 1px solid #d9d9d9;
    background: var(--white-color);
}

.form-title{
    background: var(--primary-color);
    padding: 12px 20px;
}

.form-title h3{
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: var(--white-color);
    font-family: var(--heading-font);
    font-weight: 600;
}

.form-body{
    padding: 30px 25px;
}

.form-group{
    margin-bottom: 22px;
}

.form-group label{
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--text-color);
    font-family: var(--f1);
    font-weight: 500;
}

.form-group input{
    width: 100%;
    height: 46px;
    border: 1px solid #d7d7d7;
    padding: 0 15px;
    outline: none;
    background: transparent;
    color: var(--text-color);
    font-size: 15px;
    font-family: var(--body-font);
    transition: all .3s ease;
}

.form-group input:focus{
    border-color: var(--primary-color);
}

.inner-contact-box{
    border: 1px solid #d9d9d9;
    height: 100%;
}

.inner-title{
    background: #bfe9f6;
    padding: 10px 18px;
}

.inner-title h4{
    margin: 0;
    font-size: 18px;
    color: var(--primary-color);
    font-family: var(--heading-font);
    font-weight: 600;
}

.inner-body{
    padding: 25px 20px;
}

.check-note{
    margin-bottom: 20px;
}

.check-note p{
    margin: 0;
    font-size: 14px;
    color: var(--primary-color);
    font-style: italic;
    font-family: var(--body-font);
}

.check-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.check-list label{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-color);
    font-family: var(--body-font);
    cursor: pointer;
}

.check-list input[type="checkbox"]{
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: var(--primary-color);
}

/* =========================
    Responsive
========================= */
@media (max-width: 991px){

    .data-form-sec{
        padding: 60px 0;
    }

    .form-title h3{
        font-size: 20px;
    }

    .form-body{
        padding: 25px 20px;
    }
}

@media (max-width: 767px){

    .data-form-sec{
        padding: 50px 0;
    }

    .form-title{
        padding: 10px 15px;
    }

    .form-title h3{
        font-size: 18px;
    }

    .form-body{
        padding: 20px 15px;
    }

    .inner-body{
        padding: 20px 15px;
    }

    .form-group input{
        height: 44px;
    }
}
/* =========================
    Data Form Section End
========================= */
/* --- Additional Layout Sub-Styles --- */

.table-sub-section {
    margin-bottom: 35px;
}

.table-sub-section:last-child {
    margin-bottom: 0;
}

/* Subtitles styling */
.sub-section-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--c1);
    margin: 0 0 18px 0;
    font-family: var(
    --f1);
}

/* Specific serif handling matching the lower headings in the layout screenshot */
.font-serif {
    font-family: Georgia, serif;
    font-size: 20px;
    /* font-weight: 600; */
}

/* --- Shared Form Grid Tables --- */
.form-table {
    display: grid;
    border: 1px solid var(--form-border, #e2e8f0);
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
}

/* Dynamic Grid Column Breakdowns */
.grid-living {
    grid-template-columns: 1.2fr 1.2fr 1.5fr 1.2fr 1.5fr;
}

.grid-not-living {
    grid-template-columns: 2fr 1.5fr 1fr;
}

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

/* Cell Elements Structure */
.table-header {
    background-color: rgb(113 221 255 / 12%);
    color: var(--c3);
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(
    --form-border, #e2e8f0);
    border-right: 1px solid var(
    --form-border, #e2e8f0);
    display: flex;
    align-items: center;
}

.table-header:last-child {
    border-right: none;
}

.header-hint {
    font-weight: 400;
    font-size: 11px;
    font-style: italic;
    margin-left: 5px;
}

.table-cell {
    padding: 7px;
    border-bottom: 1px solid var(--form-border, #e2e8f0);
    border-right: 1px solid var(--form-border, #e2e8f0);
    background-color: #ffffff;
}

.table-cell:last-child {
    border-right: none;
}

/* Input alignments inside standard layout grid blocks */
.table-cell input[type="text"],
.table-cell input[type="email"],
.table-cell input[type="tel"],
.table-cell select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--input-radius, 4px);
    padding: 8px;
    font-size: 13px;
    outline: none;
    background-color: #ffffff;
    color: var(--text-dark, #333333);
}

.table-cell select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 30px;
    color: #777777;
}

.table-cell input::placeholder {
    color: #b0b8c4;
    font-size: 12px;
}

.table-cell input:focus,
.table-cell select:focus {
    border-color: var(--primary-color, #4295b4);
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .grid-living, .grid-not-living, .grid-activities {
        display: flex;
        flex-direction: column;
        gap: 10px;
        border: none;
        padding: 10px 0;
    }
    .table-header {
        display: none; /* Let fields act as single rows on small viewport layouts */
    }
    .table-cell {
        border: none;
        padding: 0;
    }
}

/* --- Global Styles Extensions for Developmental History --- */

.top-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 15px;
}

.top-checkbox-group .cb-label {
    font-size: 11px;
    color: #444444;
}

/* Specific Grid Implementations */
.grid-prenatal {
    grid-template-columns: 2.5fr 1.5fr 2.5fr 1.5fr;
}

.grid-onset {
    grid-template-columns: 2.5fr 1.5fr 2.5fr 1.5fr;
}

/* Structural Cell Layout Modifiers */
.cell-flex {
    display: flex;
    align-items: center;
    padding-left: 12px !important;
}

.cell-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-center {
    justify-content: center;
}

/* --- Trimester Circular Radio Button Styles --- */
.trimester-bubbles {
    display: flex;
    gap: 20px;
}

.trimester-bubbles .bubble {
    position: relative;
    cursor: pointer;
    display: block;
    width: 36px;
    height: 36px;
}

.trimester-bubbles .bubble input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 36px;
    height: 36px;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: 50%;
    outline: none;
    background-color: #ffffff;
    transition: all 0.2s ease;
    cursor: pointer;
}

.trimester-bubbles .bubble input[type="radio"]:checked {
    background-color: var(--primary-color, #4295b4);
    border-color: var(--primary-color, #4295b4);
}

.trimester-bubbles .bubble .wpcf7-list-item-label {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.2s ease;
}

.trimester-bubbles .bubble input[type="radio"]:checked + span {
    color: #ffffff;
}

/* Mobile Responsiveness Override */
@media (max-width: 768px) {
    .grid-prenatal, .grid-onset {
        grid-template-columns: 1fr;
    }
    .cell-center {
        justify-content: flex-start;
        padding: 5px 12px 15px 12px;
    }
}

/* Layout configurations for the precise grid alignments */

.grid-provider {
    display: grid;
    grid-template-columns: 1.5fr 2fr 1.2fr;
}

.grid-screening {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1.5fr 2fr;
}

.grid-diagnoses {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr repeat(4, 0.6fr);
}

.grid-medications {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 2fr;
}

.grid-outpatient {
    display: grid;
    grid-template-columns: 2.5fr 1.5fr 2fr;
}

/* Severity Nested Header Styles */
.span-row-header {
    grid-row: span 1;
    display: flex;
    align-items: center;
}

.table-header-group {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    background-color: var(--header-bg, #e6f4f8);
    border-bottom: 1px solid var(--border-color, #ccc);
}

.group-main-title {
    text-align: center;
    padding: 6px var(--pad-x, 12px);
    font-weight: bold;
    border-bottom: 1px solid var(--border-color, #ccc);
}

.group-sub-titles {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    text-align: center;
    font-size: 0.85em;
    padding: 6px 0;
    padding-right: 30px;
}

/* Component Modifiers */
.cell-disabled {
    background-color: #fafafa;
}

.input-readonly {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
    color: #333;
    font-weight: 500;
}

.cell-flex-wrap {
    display: flex;
    gap: var(--gap-x, 12px);
    align-items: center;
    flex-wrap: wrap;
}

.yn-checkbox-group {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

/* Layout configurations for the text input blocks */
.form-grid {
    display: grid;
    gap: 15px;
    /* margin-bottom: 15px; */
}
.grid-3-col {
    grid-template-columns: 2.2fr 1fr 1fr;
}
.grid-2-col {
    grid-template-columns: 1fr 1fr;
}

.input-group label {
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
    color: #333;
}

/* Question List block styling */
.question-list {
    margin: 0px 0 40px;
}
.question-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #333;
}
.question-options {
    display: flex;
    gap: 8px;
    white-space: nowrap;
}
.check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 16px;
}

/* Section divider rule */
.section-divider {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 25px 0;
}

/* Matrix Table configurations for the Schedule */
.schedule-title {
    color: var(--c3);
    font-size: 22px;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-weight: 500;
    font-family: var(--f2);
}
.grid-schedule {
    display: grid;
    /* Precise sizing columns matching the graphic breakdown */
    grid-template-columns: 0.6fr 2.5fr 2.5fr 2.8fr;
}
.num-label {
    font-weight: bold;
    color: #444;
}

.question-row .question-text p {
    font-size: 16px;
    font-family: var(--f1);
    font-weight: 500;
}

.trimester-bubbles p {
    display: inherit;
    gap: inherit;
}

.yn-checkbox-group label {
    font-size: 14px;
}

h3.section-subtitle {
    font-size: 17px;
    font-weight: 700;
    padding-bottom: 10px;
}
.checkbox-grid br {
    display: none !important;
}
.cb-label input[type="checkbox"] {
    transform: scale(1.4); /* Increases size by 30%. Change to 1.5 for larger, etc. */
    margin-right: 8px;    /* Adds space between the enlarged box and the text */
    vertical-align: middle; /* Keeps the box centered with the text */
    cursor: pointer;
}
.question-options span.wpcf7-list-item-label {
    display: inline-block;
    margin-left: 6px;
}.cb-label .wpcf7-list-item-label {
    font-size: 14px;
    font-weight: 500;
}

label.cb-label {}

label.cb-label {
    display: block;
    line-height: 32px;
}
.repeater-field-content > div {
    display: grid;
    padding-right: 33px;
}

.repeater-field-content {}

.repeater-layout-set {
    position: relative;
}

section.form-section br {
    display: none;
}

.repeater-field-footer a {
    position: absolute;
    right: 6px;
    top: 13px;
    width: 40px;
    height: 40px;
    padding: 0;
    text-align: center;
    line-height: 42px;
    font-size: 23px;
    background: var(--c3);
}

i.repeater-icon.icon-down-open {
    display: none;
}

.repeater-field-header-title {
    display: none;
}


.repeater-field-header {
    justify-content: end;
    position: absolute;
    right: 0px;
    top: 8px;
}
.repeater-field-item {
    position: relative;
}
.repeater-field-item {
    margin-bottom: 0 !important;
}
.repeater-field-button-add:hover {
    background: #70b9d0 !important;
    opacity: 1 !important;
    
}
.bubble span.wpcf7-list-item.first.last {
    margin: 0;
    position: relative;
}
.cell-flex-wrap p {
    display: inherit;
    gap: inherit;
}

.yn-checkbox-group p {
    gap: inherit;
    display: inherit;
    align-items: inherit;
    justify-content: inherit;
}
.question-options p {
    display: inherit;
    gap: inherit;
    white-space: inherit;
}

.question-options input {
    width: 17px;
    height: 17px;
}

.question-options .check-label {
    gap: 4px;
}
span.wpcf7-not-valid-tip {
    display: none;
}
.grid-extracurricular {
    display: grid;
    /* First column is wide for text, last two are evenly spaced for the select dropdowns */
    grid-template-columns: 2.4fr 1.1fr 1.1fr;
}
.Not-Living .repeater-field-content > div {
    display: grid;
    grid-template-columns: 2fr 1.5fr 0.9fr;
}
.Living-Client .repeater-field-content > div{
    grid-template-columns: 1.2fr 1.2fr 1.5fr 1.2fr 1.3fr;
}
.Free-Time .repeater-field-content > div, .Family-Act .repeater-field-content > div {
    grid-template-columns: 3fr 1fr 0.8fr;
}

/*****************************************************************************************************************/

/* Top Grid Sizing configurations */
.grid-college-top {
    display: grid;
    grid-template-columns: 3.5fr 1fr;
    gap: 20px;
    margin-bottom: 15px;
}
.grid-1-col {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 25px;
}

/* Status Checkbox Line styling */
.status-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.status-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}
.status-options {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
}

/* Matrix Table Layout for Majors/Minors */
.grid-college-matrix {
    display: grid;
    /* Precise column scaling for left label, middle text, and select box */
    grid-template-columns: 1.1fr 2.6fr 1.1fr;
    margin-bottom: 35px;
}
.type-label {
    font-size: 13px;
    color: #444;
}

/* Bottom Metrics Underline configuration */
.form-footer-metrics {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 25px;
    flex-wrap: wrap;
}
.underline-input-group {
    display: flex;
    align-items: flex-end;
    flex: 1;
    min-width: 200px;
}
.underline-input-group .label {
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    margin-right: 8px;
    margin-bottom: 4px;
}
.underline-input {
    border: none !important;
    border-bottom: 1px solid #333 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 2px 5px !important;
    flex: 1;
    outline: none;
    font-size: 14px;
}
.underline-input:focus {
    border-bottom-color: #5da2bb !important;
}
.status-options p {
    display: inherit;
    gap:inherit;
}
/* Columns breakdown for Current Class Schedule */
.grid-class-schedule {
    display: grid;
    /* Day and times are narrower, course is wide, grade is standard */
    grid-template-columns: 1fr 1fr 1fr 2.4fr 1.1fr;
}

/* Columns breakdown for Recreation & Hobbies */
.grid-recreation {
    display: grid;
    /* Clean 2-column layout emphasizing the left text area over the dropdown */
    grid-template-columns: 3.5fr 1.7fr;
}
.Current-Class .repeater-field-content > div {
    grid-template-columns: 1fr 1fr 1fr 2.5fr 0.9fr;
}


.Recreation-Col .repeater-field-content > div {
    grid-template-columns: 2.3fr 1fr;
}
.grid-college-family-member {
    grid-template-columns: 1fr 1fr 2fr 1.3fr;
}

.form-table.grid-college-family-member {}

.College-Family-Member .repeater-field-content > div {
    grid-template-columns: 1fr 1fr 2fr 1.1fr;
}
.grid-high-school {
    display: grid;
    /* Keeps the outer metric boxes tightly fit while opening up the center text areas */
    grid-template-columns: 1fr 1.7fr 2fr 1.3fr 1fr;
}

.input-center {
    text-align: center;
}
.High-School-His .repeater-field-content > div {
    grid-template-columns: 1fr 1.6fr 2fr 1.2fr 0.8fr;
}
/* Guide Text Spacing */
.info-text-wrapper {
    margin-bottom: 20px;
    font-size: 14px;
    color: #4a5568;
    line-height: 1.5;
}
.info-text-wrapper p {
    margin: 0 0 4px 0;
}

/* Custom Textarea styling */
.textarea-container {
    margin-bottom: 25px;
}
.textarea-container textarea {
    width: 100%;
    min-height: 220px;
    padding: 15px;
    border: 2px solid #5da2bb;
    border-radius: 4px;
    resize: vertical;
    font-size: 14px;
    outline: none;
    background-color: #fff;
    box-sizing: border-box;
}
.textarea-container textarea::placeholder {
    color: #a0aec0;
}

/* Upload Interface Alignment Bar */
.upload-action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    /* flex-wrap: wrap; */
}

/* Attach Document Button Component */
.btn-attach-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border: 1px solid #5da2bb;
    background-color: #fff;
    color: #5da2bb;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}
.btn-attach-outline:hover {
    background-color: #f7fafc;
}
.btn-attach-outline .plus-icon {
    font-size: 16px;
    margin-right: 6px;
    font-weight: 600;
}

/* Drag and Drop Zone Container Component */
.drag-drop-zone {
    width: 250px;
}
.drop-zone-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border: 1.5px dashed #a0aec0;
    border-radius: 4px;
    background-color: #fff;
    color: #4a5568;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s;
    user-select: none;
    box-sizing: border-box;
}
.drop-zone-label:hover {
    border-color: #5da2bb;
}
.cloud-icon {
    color: #4a5568;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Submit Action Button Block alignment */
.form-submit-row {
    display: flex;
    justify-content: flex-end;
}
.btn-submit-now {
    width: 220px;
    padding: 8px 0;
    background-color: #4592af;
    color: #fff;
    border: none;
    border-radius: 30px; /* Distinct Pill Shape */
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: block;
}
.btn-submit-now:hover {
    background-color: #387893;
}

.upload-trigger-btn input, .drag-drop-zone input {
    display : none;
}
.Current-Diagnoses .repeater-field-content > div {
    grid-template-columns: 2.7fr 1.7fr repeat(4, 0.6fr);
}
.All-Current-Med .repeater-field-content > div {
    grid-template-columns: 1.9fr 1fr 1.5fr 1.8fr;
}
.Outpatient-Treat .repeater-field-content > div {
    grid-template-columns: 2.5fr 1.5fr 1.8fr;
}
.Hospitalization .repeater-field-content > div {
    grid-template-columns: 2.7fr 1.7fr repeat(4, 0.6fr);
}
.Hospitalization .trimester-bubbles .bubble .wpcf7-list-item-label {
    opacity: 0;
}
.Extra-Curricular .repeater-field-content > div {
    grid-template-columns: 2.3fr 1.1fr 0.9fr;
}
.Current-Diagnoses .trimester-bubbles .bubble .wpcf7-list-item-label {
    opacity: 0;
}
.Concerns-College .checkbox-grid {
    grid-template-columns: 0.9fr 1fr 1fr 0.9fr;
}

.form-group.grid-1-col p {
    width: inherit;
}

.status-options .wpcf7-list-item input {
    width: 17px;
    height: 17px;
    margin-right: 2px;
}

.Provider-Info .repeater-field-content > div {
    grid-template-columns: 1.4fr 1.9fr 1fr;
}
.upload-flex {
    display: flex;
    gap: 15px;
    width: 50%;
    justify-content: flex-end;
}
.additional-title {
    font-family: var(--f2);
    font-size: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cdcdcd;
    margin-bottom: 20px;
}
.page-id-88 .inner-header .inner-header-title h2, .page-id-86 .inner-header .inner-header-title h2 {
    text-shadow: none;
    font-size: 40px;
    font-weight: 500;
    text-decoration: none;
    width: 500px;
    padding-bottom: 10px;
}

.inner-header-title span {
    display: block;
    text-align: start;
    font-size: 30px;
    font-weight: 500;
}
.education-title {
    font-family: var(--f2);
    font-size: 22px;
    padding-bottom: 20px;
}