/* ==========================================================================
   Psychological Wellbeing — Blog Page Styles
   Fonts: Fraunces (display) + Nunito (body) — kept consistent with site nav
   Palette: Pink #e3375f (brand), Teal #0d6b74 (secondary), Cream #fdf6f4 (bg)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&display=swap');

:root{
  --pink: #e3375f;
  --pink-dark: #c72055;
  --ink: #221d1c;
  /* --ink-soft: #6b615e;
  --ink-faint: #948a86;
  --cream: #faf6f2;
  --white: #ffffff;
  --rule: #e6dcd6; */
  --shadow-soft: 0 .3rem 1rem rgba(34, 29, 28, 0.05);
}

/*=============== BASE ===============*/
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: none;
  border: none;
  text-decoration: none;
}

html{
  font-size: 62.5%;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

html::-webkit-scrollbar{ width: 1rem; }
html::-webkit-scrollbar-track{ background: transparent; }
html::-webkit-scrollbar-thumb{ background: var(--pink); border-radius: 5rem; }

body{
  font-family: 'Nunito', sans-serif;
  background-color: var(--cream);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1.7;
}

ul{ list-style: none; }
a{ text-decoration: none; }
img{ max-width: 100%; display: block; }

/*=============== HEADER (kept as original) ===============*/
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 100px;
  z-index: 1000;
  align-content: center;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

.nav-container{
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  flex-direction: row;
  padding: 2rem 9%;
}

.nav__data{
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo, .nav-photo{ height: 70px; width: auto; }
.logo{ width: 90px; }

.nav__toggle{ position: relative; width: 32px; height: 32px; }
.nav__toggle-menu, .nav__toggle-close{
  font-size: 2.25rem;
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  cursor: pointer;
  transition: opacity .1s, transform .4s;
}
.nav__toggle-close{ opacity: 0; }

.nav__link{
  text-decoration: none;
  color: #333;
  padding: 10px 15px;
  font-weight: bold;
  font-size: 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color .3s, color .3s;
}
.nav__link:hover{ color: #816bff; }

.dropdown__button{ cursor: pointer; }
.dropdown__arrow{ font-size: 1.6rem; font-weight: initial; transition: transform .4s; }
.dropdown__content, .dropdown__group, .dropdown__list{ display: grid; }

.dropdown__group{
  padding: 2rem;
  padding-left: 2.5rem;
  row-gap: .5rem;
  background-color: var(--pink);
  border: 3px solid rgb(231,189,198);
  border-radius: 5px;
}
.dropdown__group:first-child{ margin-top: 1.25rem; }
.dropdown__group:last-child{ margin-bottom: 1.25rem; }

.dropdown__title{
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #000;
  padding-bottom: 10px;
  width: 250px;
  display: inline;
}
.dropdown__list{ row-gap: .25rem; }
.dropdown__link{ color: #252323; text-decoration: none; display: block; padding: 5px 0; }
.dropdown__link:hover{ background-color: rgb(228,82,107); border: solid #000 .5px; padding: 1rem; border-radius: 10px; color: #fff; }
.show-dropdown .dropdown__arrow{ transform: rotate(180deg); }

.btn{
  display: inline-block;
  background-color: var(--pink);
  color: #fff;
  padding: .8rem 3rem;
  border: .2rem solid rgb(215,36,90);
  cursor: pointer;
  font-size: 1.7rem;
  border-radius: .5rem;
  text-transform: capitalize;
}
.btn:hover{ background: rgb(188,68,104); }

@media screen and (max-width: 1079px){
  .header{ background-color: #fff; height: 70px; }
  .logo{ height: 45px; width: 80px; border-radius: 15px; }
  .nav__menu{
    position: absolute; left: 0; top: 6.5rem; width: 329px;
    height: calc(90vh - 3.5rem); overflow: auto; padding-block: 1.5rem 4rem;
    pointer-events: none; opacity: 0; transition: top .4s, opacity .3s;
    display: flex; flex-direction: column; border-radius: 5px;
  }
  .nav__list{
    font-size: 1.5rem; width: 320px; background-color: rgb(216,238,244);
    margin-top: -20px; box-shadow: 0 2px 5px rgba(0,0,0,.1);
  }
  .dropdown__group{ row-gap: .5rem; background-color: var(--pink); border: 3px solid rgb(161,37,12); border-radius: 5px; width: 95%; }
  .dropdown__content{ margin-left: 24px; width: 90%; }
  .nav__menu::-webkit-scrollbar{ width: .5rem; }
  .nav__menu::-webkit-scrollbar-thumb{ background-color: hsl(341,89%,38%); }
  .dropdown__container{ background-color: rgb(239,226,228); height: 0; overflow: hidden; transition: height .4s; }
  .nav__link{ color: #252323; margin-left: 25px; padding: 10px 15px; }
  .nav__link:hover{ color: #816bff; }
  .show-menu{ opacity: 1; top: 7rem; pointer-events: initial; }
  .show-icon .nav__toggle-menu{ opacity: 0; transform: rotate(90deg); }
  .show-icon .nav__toggle-close{ opacity: 1; transform: rotate(90deg); }
  .dropdown__group{ padding-left: 1.5rem; }
  .nav__data{ width: 100%; }
  .button{ display: none; }
}

@media screen and (min-width: 1080px){
  .nav{ display: flex; justify-content: space-between; }
  .nav__toggle{ display: none; }
  .nav__list{ display: flex; column-gap: 3rem; height: 100%; }
  .nav__link{ padding: 0; color: #252323; }
  .nav__link:hover{ background-color: initial; }
  .dropdown__button{ column-gap: .25rem; pointer-events: none; }
  .dropdown__container{
    height: max-content; position: absolute; left: 0; right: 0; top: 6.5rem;
    box-shadow: 0 6px 8px hsla(220,68%,12%,.05); pointer-events: none; opacity: 0;
    transition: top .4s, opacity .3s;
  }
  .dropdown__content{ display: flex; justify-content: center; gap: 6rem; max-width: 600px; margin-inline: auto; border-radius: 10px; margin-top: 43px; }
  .dropdown__title{ font-weight: bold; border-bottom: 2px solid #000; padding-bottom: 10px; width: 250px; display: inline; }
  .dropdown__group{ margin-left: 10px; align-content: baseline; row-gap: 1.25rem; }
  .dropdown__group:first-child, .dropdown__group:last-child{ margin: 0; }
  .dropdown__list{ row-gap: .5rem; }
  .dropdown__item{ cursor: pointer; }
  .dropdown__item:hover .dropdown__arrow{ transform: rotate(180deg); }
  .dropdown__item:hover > .dropdown__container{ top: 5.5rem; opacity: 1; pointer-events: initial; cursor: initial; }
}

/* ==========================================================================
   BLOG PAGE — editorial design
   A restrained, long-form reading layout. Pink is used only as a small
   accent (labels, links, one button) — the page otherwise reads in ink,
   cream and hairline rules, like a printed magazine feature.
   ========================================================================== */

/* Breadcrumb strip */
.breadcrumb-bar{
  margin-top: 100px;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: 1.4rem 7%;
}
.breadcrumb-bar ol{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: 1.2rem;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.breadcrumb-bar a{ color: var(--ink-soft); font-weight: 700; }
.breadcrumb-bar a:hover{ color: var(--pink-dark); }
.breadcrumb-bar li:not(:last-child)::after{ content: '/'; margin-left: .6rem; color: var(--rule); }
.breadcrumb-bar li[aria-current]{ color: var(--ink-faint); }

/* Article hero */
.post-hero{
  padding: 5.5rem 7% 3rem;
  max-width: 1400px;
  margin: 0 auto;
  margin-top: 80px;
}
.post-hero__eyebrow{
  display: block;
  color: var(--pink-dark);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.8rem;
}
.post-hero h1{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(3.2rem, 4.6vw, 5rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--ink);
  margin-bottom: 2.4rem;
}
.post-hero__dek{
  font-size: 1.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 1000px;
  margin-bottom: 3rem;
  font-family: 'Fraunces', serif;
  font-style: italic;
}
.post-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem;
  padding-top: 2.6rem;
  padding-bottom: 2.6rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3.2rem;
}
.post-meta__author{
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.post-meta__author img{
  width: 4.4rem; height: 4.4rem; border-radius: 50%; object-fit: cover;
}
.post-meta__author .name{ display: block; font-weight: 700; color: var(--ink); font-size: 1.45rem; }
.post-meta__author .role{ display: block; font-size: 1.25rem; color: var(--ink-faint); }
.post-meta__date{
  font-size: 1.3rem;
  color: var(--ink-faint);
  margin-left: auto;
  padding-left: 1.4rem;
  border-left: 1px solid var(--rule);
}
.post-meta__date strong{ color: var(--ink-soft); font-weight: 700; }

.post-hero__image{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 7%;
}
.post-hero__image img{ width: 100%; max-height: 460px; object-fit: cover; }
.post-hero__caption{
  max-width: 880px;
  margin: 1rem auto 0;
  padding: 0 7%;
  font-size: 1.25rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* Layout: article + sidebar */
.blog-layout{
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 7% 5rem;
  display: grid;
  grid-template-columns: minmax(0, 68rem) 1fr;
  gap: 6rem;
  align-items: start;
}

.article-body{ min-width: 0; max-width: 68rem; }
.article-body h2{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 2.8rem;
  color: var(--ink);
  margin-top: 4.4rem;
  margin-bottom: 1.6rem;
}
.article-body h2:first-child{ margin-top: 0; }
.article-body h3{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 2.1rem;
  color: var(--ink);
  margin-top: 2.8rem;
  margin-bottom: 1rem;
}
.article-body p{ margin-bottom: 1.8rem; color: var(--ink); font-size: 1.65rem; line-height: 1.75; }
.article-body p a{ color: var(--pink-dark); font-weight: 700; text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.article-body p a:hover{ text-decoration-color: var(--pink-dark); }
.article-body ul{
  margin: 0 0 2.2rem 0;
  padding-left: 0;
}
.article-body ul li{
  list-style: none;
  position: relative;
  padding: .7rem 0 .7rem 2rem;
  font-size: 1.6rem;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.article-body ul li:first-child{ border-top: 1px solid var(--rule); }
.article-body ul li::before{
  content: '—';
  position: absolute;
  left: 0;
  color: var(--pink-dark);
}

.pull-note{
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 3.4rem 3rem;
  margin: 4rem 0;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-size: 2.4rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}

/* Credentials — plain definition rows, not icon cards */
.credentials-list{
  margin: 2.4rem 0 2.8rem;
  border-top: 1px solid var(--rule);
}
.credentials-list__row{
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}
.credentials-list__row h3{
  font-family: 'Fraunces', serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--pink-dark);
  margin: 0;
}
.credentials-list__row p{ margin: 0; font-size: 1.5rem; color: var(--ink-soft); }
@media screen and (max-width: 560px){
  .credentials-list__row{ grid-template-columns: 1fr; gap: .6rem; }
}

/* Team — simple bylines, no boxed cards */
.team-mini{
  margin: 2.4rem 0 2.8rem;
  display: grid;
  gap: 2.4rem;
}
.team-mini__row{
  display: flex;
  gap: 1.8rem;
  align-items: flex-start;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid var(--rule);
}
.team-mini__row:last-child{ border-bottom: none; padding-bottom: 0; }
.team-mini__row img{
  width: 6.4rem; height: 6.4rem; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.team-mini__row h3{ font-family: 'Fraunces', serif; font-size: 1.8rem; color: var(--ink); margin-bottom: .2rem; }
.team-mini__row span{ display: block; font-size: 1.25rem; color: var(--pink-dark); font-weight: 700; margin-bottom: .6rem; }
.team-mini__row p{ font-size: 1.4rem; color: var(--ink-soft); margin: 0; }

.final-cta{
  margin-top: 4.4rem;
  border-top: 2px solid var(--ink);
  padding-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.final-cta h3{ font-family: 'Fraunces', serif; font-weight: 500; font-size: 2.4rem; color: var(--ink); margin-bottom: .5rem; }
.final-cta p{ color: var(--ink-soft); font-size: 1.4rem; margin: 0; max-width: 440px; }

.btn-pink{
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  background: var(--pink);
  color: #fff;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: .02em;
  padding: 1.3rem 2.6rem;
  border-radius: .3rem;
  flex-shrink: 0;
  transition: background .2s;
}
.btn-pink:hover{ background: var(--pink-dark); }
.btn-outline{
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  font-weight: 700;
  font-size: 1.4rem;
  padding: 1.2rem 2.4rem;
  border-radius: .3rem;
  transition: background .2s, color .2s;
}
.btn-outline:hover{ background: var(--ink); color: #fff; }

/* Sidebar — boxed panels, sticky on desktop, positioned after the
   article (not before it) on mobile so reading isn't interrupted */
.sidebar{
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  position: sticky;
  top: 12rem;
}

.side-block{
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: .8rem;
  padding: 2.4rem;
  box-shadow: var(--shadow-soft);
}

.side-block h3{
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.6rem;
}

.side-cta{ border-top: 3px solid var(--pink); }
.side-cta p{ font-size: 1.45rem; color: var(--ink-soft); margin-bottom: 1.8rem; line-height: 1.6; }
.side-cta .btn-pink{ width: 100%; justify-content: center; }
.side-cta .whatsapp-link{
  display: block;
  margin-top: 1.4rem;
  font-size: 1.3rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-align: center;
}
.side-cta .whatsapp-link:hover{ color: var(--pink-dark); }

.side-author{ display: flex; gap: 1.4rem; align-items: flex-start; }
.side-author img{ width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.side-author h4{ font-family: 'Fraunces', serif; font-size: 1.7rem; color: var(--ink); margin-bottom: .2rem; }
.side-author .role{ display: block; color: var(--pink-dark); font-weight: 700; font-size: 1.2rem; margin-bottom: .8rem; }
.side-author p{ font-size: 1.3rem; color: var(--ink-soft); margin: 0 0 .8rem; }
.side-author a{ font-size: 1.3rem; font-weight: 700; color: var(--ink); text-decoration: underline; }

.side-badges ul{ display: grid; gap: 1.2rem; }
.side-badges li{
  font-size: 1.35rem;
  color: var(--ink-soft);
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.side-badges li:last-child{ border-bottom: none; padding-bottom: 0; }
.side-badges li strong{ display: block; color: var(--ink); font-weight: 700; margin-bottom: .3rem; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; }

.side-topics{ background: var(--cream); }
.side-topics ul{ display: grid; gap: .8rem; }
.side-topics a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.4rem;
  color: var(--ink);
  font-weight: 700;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: .5rem;
  padding: 1.1rem 1.4rem;
  transition: border-color .2s, color .2s, transform .2s;
}
.side-topics a::after{
  content: '→';
  color: var(--pink-dark);
  flex-shrink: 0;
  transition: transform .2s;
}
.side-topics a:hover{ color: var(--pink-dark); border-color: var(--pink); transform: translateX(2px); }
.side-topics a:hover::after{ transform: translateX(3px); }

/* Related blogs */
.our-blogs-section{
  background: var(--white);
  border-top: 1px solid var(--rule);
  padding: 6rem 7%;
  text-align: center;
}
.our-blogs-section .section-eyebrow{
  color: var(--pink-dark);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 1.2rem;
}
.our-blogs-section h2{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 3.2rem;
  color: var(--ink);
  margin: 1rem 0 1rem;
}
.our-blogs-section > p{
  max-width: 560px;
  margin: 0 auto 4.4rem;
  color: var(--ink-soft);
  font-size: 1.5rem;
}
.container-blogs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 3rem;
  max-width: 1180px;
  margin: 0 auto;
}
.card{
  text-align: left;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
}
.card-header{ height: 190px; overflow: hidden; margin-bottom: 1.8rem; }
.card-header img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card-header img{ transform: scale(1.03); }
.card-body{ padding: 0; }
.tag{ font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tag-teal{ color: var(--pink-dark); margin-bottom: 1.2rem; display: inline-block; }
.spns a{ text-decoration: none; }
.card-body h2{
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.9rem;
  color: var(--ink);
  margin-bottom: 1rem;
  line-height: 1.35;
}
.card-body p{ font-size: 1.4rem; color: var(--ink-soft); margin-bottom: 1.8rem; }
.user{ display: flex; align-items: center; margin-top: 1rem; }
.user img{ width: 3.6rem; height: 3.6rem; border-radius: 50%; margin-right: 1rem; object-fit: cover; }
.user-info h3{ margin: 0; font-size: 1.35rem; color: var(--ink); font-weight: 700; }
.user-info small{ color: var(--ink-faint); font-size: 1.2rem; }

.btn-container{ display: flex; justify-content: center; margin-top: 4.4rem; }
.btn-read-all{
  padding: 1.3rem 3rem;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  border-radius: .3rem;
  font-weight: 700;
  font-size: 1.4rem;
  transition: background-color .2s, color .2s;
}
.btn-read-all:hover{ background-color: var(--ink); color: #fff; }

@media screen and (max-width: 1150px){
  .blog-layout{ grid-template-columns: 1fr; }
  .sidebar{
    position: static;
    margin-top: 4.4rem;
    padding-top: 3.6rem;
    border-top: 1px solid var(--rule);
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2.4rem;
  }
  .side-block{ flex: 1 1 260px; }
}
@media screen and (max-width: 640px){
  .sidebar{ flex-direction: column; }
  .side-block{ flex: 1 1 auto; }
}
@media screen and (max-width: 640px){
  .post-hero{ padding: 3.6rem 5% 2rem; }
  .post-hero__image{ padding: 0 5%; }
  .post-hero__caption{ padding: 0 5%; }
  .blog-layout{ padding: 2rem 5% 3.6rem; gap: 3rem; }
  .final-cta{ flex-direction: column; align-items: flex-start; text-align: left; }
  .our-blogs-section{ padding: 4.4rem 5%; }
  .breadcrumb-bar{ padding: 1.2rem 5%; }
  .post-meta__date{ margin-left: 0; padding-left: 0; border-left: none; }
}


.trust-us-para{
font-size: 1.2rem;
margin-bottom: 10px;
}
/* =========================================================
   CONTACT FORM
   ========================================================= */

.contact-section{
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: #0762C8; */
}
/* blogs ends */
/* contact form start*/
.my-contact-form{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  /* background-color: #ec3a6c; */
 /* color: rgb(255, 255, 255); */
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
/* background-color: #0762C8; */
  max-width: 1440px;

}

.contact-left,
.contact-right {
  flex-basis: 45%;
  padding: 20px;
  /* border-radius: 10px; */
}

.contact-left {
  /* background: linear-gradient(to bottom, #e3375f, #f5d2da); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* border-left:solid 10px #c72055;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px; */
}

.contact-heading {
  color: #e3375f;
  margin-bottom: 2rem;
 text-align: center;
 font-size: 3rem;
}

.contact-left form input,
.contact-left form textarea,
.contact-left form button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #110d0d;
  border-radius: 5px;
  background-color: #fff;
  transition: border-color 0.3s ease;
}
form{
  /* background-color: aquamarine; */
  width: 80%;
  
}

.contact-left form input:focus,
.contact-left form textarea:focus {
  outline: none;
  border-color:#e3375f;
}

.contact-left form textarea {
  height: 100px;
}

.contact-left form button {
  background-color: #e3375f;
  border: solid rgb(238, 237, 234);
  color: #fff;
  font-size: 1.7rem;
  /* font-weight: bold; */
  /* border: none; */
  cursor: pointer;
}

.contact-left form button:hover {
  background-color: #c72055;
}

.contact-right {
  /* background: linear-gradient(to bottom, #e3375f, #dba9b4); */
  color: #252323;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  flex-direction: column;
 /* background-color: #0b7787; */
  /* border-right:solid 5px #c72055;
  border-bottom-right-radius: 80px;
  border-top-right-radius: 80px; */
}


.contact-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80%;
}
.contact-center{
  margin-top: 20px;
}

.span-detail {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-weight: bold;
 
}

.span-detail, .frame {
  font-size: 30px;
  margin-right: 10px;
}

.span-detail, .span-details {
  font-size: 16px;
}
.my-map{
  color: #087408;

}
.my-clock{
  color: #0b7787;
}
.my-envelope{
  color: #2286de;
}
.my-whatsapp{
  color: #25D366;
  

}
/* Base styles remain unchanged */

/* Responsive styles */
@media only screen and (max-width: 768px) {
  .contact-section {
    flex-direction: column;
    border-radius: 0;
  }

  .contact-left,
  .contact-right {
    flex-basis: 100%;
  }

  .contact-left,
  .contact-right {
    padding: 20px;
  }

 
}

@media only screen and (max-width: 500px){
  form{
      width: 100% ;
  }
  .contact-details{
      width: 100%;
  }
}
/* contact form ends */

/* =========================================================
   FOOTER
   ========================================================= */

/* footer */

footer{
  background-color: #faf5f7;
  /* padding: 30px 0; */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 20px;
}

.footer-container {
 
  max-width: 90%;
   margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  /* background-color: #0762C8; */
  
}

.footer-logo {
  margin-bottom: 10px;
}

.footer-logo img {
  width: 100px;
  height: auto;
}

.footer-info {
  flex: 1;
  margin-bottom: 20px;
  font-weight: bold;
  color: #252323;
 
}
.my-footer{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-contact,
.footer-links,.footer-info {
  flex: 1;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 
}
.footer-links{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* background-color: #0762C8; */
}
.footer-links p{
  text-align: center;
  width: 100%;
}
.footer-links ul {
  list-style: none;
  padding: 0;
  margin-top: 28px;
  font-size: 17PX;
}

.footer-links ul li {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 17px;
}

.footer-links ul li a {
  text-decoration: none;
  color:#252323;
  font-size: 17px;
}
/* Social Icons */
.footer-social {
  text-align: center;
  margin-bottom: 30px;
}
.footerr h3{
  font-size: 2.5rem;
  color: #e3375f;
}
.social-icons a {
  display: inline-block;
  margin-right: 10px;
  
  
  transition: transform 0.3s ease;
}
.ab{
  font-size: 3rem;
  /* margin-top: 30px; */
  color: rgb(51, 62, 186);
}

.social-icons a:hover {
  transform: translateY(-5px);
}
 .fa-facebook-f:hover{ 
  color: #1877F2;
}
.fa-twitter:hover{
  color: #1DA1F2;
}
.fa-instagram:hover{
  color: #8a49a1;
}
.fa-linkedin-in:hover{
  color:  #0762C8;
} 
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.footer .footer-social {
  animation: fadeInUp 1s ease;
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
}

@media (max-width: 768px) {

  .heading{
    text-align: center;
    font-size: 3rem;
    margin: 2rem 0;
    color:#e3375f;
  
  }
  .footer-container {
      flex-direction: column;
      align-items: center;
  }

  .footer-info,
  .footer-contact,
  .footer-links,
  .footer-social {
      flex: none;
      width: 100%;
      text-align: center;
  }

  .footer-logo img {
      width: 120px;
  }
}
.footer-social h3{
  margin-bottom: 20px;
}


.whatsapp-icon{
  position: fixed; top: 50%; left: 10px; transform: translateY(-50%); z-index: 1000;
  animation: whatsapp-bounce 1s infinite alternate;
}
@keyframes whatsapp-bounce{
  0%{ transform: translateY(-50%) scale(1.5); }
  100%{ transform: translateY(-50%) scale(1.1); }
}
.whatsapp-icon img{ width: 40px; height: auto; }

/* Accessibility */
a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}