#services {
  scroll-margin-top: 110px;   /* adjust to your navbar height (90–120px) */
}



:root{
  --puj-blue:#005c99;
  --puj-teal:#00a4a6;
  --puj-soft:#f9fbff;
  --puj-pink:#f8c6e7;
  --puj-orange:#ff9f43;
  --puj-text:#29323f;
}


.puj-hero{
  min-height: calc(100vh - 80px);
  padding-top: 6.5rem;
  padding-bottom: 3rem;
  position: relative;
  overflow: hidden;

  /* 5‑color animated gradient with lighter pink */
  background: linear-gradient(
    -45deg,
    #ffe6f5,   /* light pink */
    #fde3ff,   /* lilac pink */
    #e0f6ff,   /* light blue */
    #fff6e3,   /* warm light */
    #f3e5ff    /* soft violet */
  );
  background-size: 350% 350%;
  animation: heroGradient 9s ease-in-out infinite; /* faster */
}


/* smooth gradient movement */
@keyframes heroGradient{
  0%   { background-position: 0% 50%; }
  25%  { background-position: 50% 0%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 50% 100%; }
  100% { background-position: 0% 50%; }
}


/* left content */
.puj-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .8rem;
  border-radius:999px;
  background:rgba(0,164,166,.08);
  color:var(--puj-blue);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.puj-hero-badge .dot{
  width:9px;height:9px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--puj-teal),var(--puj-blue));
  box-shadow:0 0 0 6px rgba(0,164,166,.25);
  animation: pulseDot 2s infinite;
}

.puj-hero-title{
  font-size:2.4rem;
  font-weight:800;
  color:var(--puj-text);
  line-height:1.15;
}

.puj-hero-title span{
  background:linear-gradient(90deg,var(--puj-blue),var(--puj-teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.puj-hero-sub{
  max-width:32rem;
  color:#5c6473;
  font-size:.98rem;
}

/* buttons */

.puj-hero .puj-hero-primary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#ff9f43,#ffb866);
  color:#fff;
  border-radius:999px;
  padding:.65rem 1.9rem;
  font-weight:700;
  font-size:.95rem;
  border:none;
  box-shadow:0 14px 30px rgba(255,159,67,.45);
  letter-spacing:.04em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:transform .22s ease, box-shadow .22s ease;
}

.puj-hero .puj-hero-primary::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0,
                                       rgba(255,255,255,.7) 40%,
                                       rgba(255,255,255,0) 80%);
  transform:translateX(-120%);
  transition:transform .45s ease-out;
}

.puj-hero .puj-hero-primary:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 20px 40px rgba(255,159,67,.65);
}

.puj-hero .puj-hero-primary:hover::before{
  transform:translateX(120%);
}

.puj-hero .puj-hero-ghost{
  position:relative;
  border-radius:999px;
  padding:.65rem 1.7rem;
  border:1px solid rgba(0,92,153,.3);
  background:rgba(255,255,255,.9);
  color:#005c99;
  font-weight:600;
  font-size:.9rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  overflow:hidden;
  transition:color .22s, border-color .22s,
             box-shadow .22s, transform .22s,
             background .22s;
}

.puj-hero .puj-hero-ghost::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,92,153,.12),rgba(0,164,166,.02));
  opacity:0;
  transform:scaleX(0.7);
  transform-origin:left;
  transition:opacity .22s, transform .22s;
}

.puj-hero .puj-hero-ghost span{
  position:relative;
  z-index:1;
}

.puj-hero .puj-hero-ghost:hover{
  color:#005c99;
  border-color:rgba(0,92,153,.55);
  box-shadow:0 12px 26px rgba(0,0,0,.12);
  transform:translateY(-2px);
  background:#fff;
}

.puj-hero .puj-hero-ghost:hover::before{
  opacity:1;
  transform:scaleX(1);
}


/* right visual area */
.puj-hero-visual{
  position:relative;
  min-height:320px;
}

.puj-hero-main-img{
  position:relative;
  z-index:3;
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.28);
  animation: floatMain 6s ease-in-out infinite;
}

.puj-hero-main-img img{
  width:100%;
  display:block;
}

/* background blobs */
.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(0);
  opacity:.65;
  mix-blend-mode:screen;
  z-index:0;
}

.blob-1{
  width:320px;height:320px;
  background:radial-gradient(circle at 0 0,#ff9fcb 0,rgba(255,159,203,0) 70%);
  top:-80px;right:-40px;
  animation: blobMove1 14s ease-in-out infinite;
}

.blob-2{
  width:260px;height:260px;
  background:radial-gradient(circle at 100% 100%,#7be9ff 0,rgba(123,233,255,0) 70%);
  bottom:-60px;left:-30px;
  animation: blobMove2 18s ease-in-out infinite;
}

@keyframes blobMove1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-22px,16px) scale(1.05); }
}

@keyframes blobMove2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(20px,-18px) scale(1.08); }
}


/* floating service tags */
.puj-hero-tags{
  margin-top:.5rem;
}

.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .85rem;
  border-radius:999px;
  background:#ffffffee;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(0,0,0,.12);
  font-size:.8rem;
  font-weight:600;
  color:#29323f;
  animation: heroTagFloat 5s ease-in-out infinite;
}

.hero-tag i{
  color:var(--puj-teal);
}

/* slight stagger if you want */
.hero-tag:nth-child(2){ animation-delay:.4s; }
.hero-tag:nth-child(3){ animation-delay:.8s; }

@keyframes heroTagFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

/* mobile */
@media (max-width: 575.98px){
  .puj-hero-tags{
    justify-content:flex-start;
    gap:.5rem;
  }

  

}


/* responsive */
@media (max-width:991.98px){
  .puj-hero{
    padding-top:6rem;
    text-align:center;
  }
  .puj-hero-sub,
  .puj-hero-stats{
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
  }
  .puj-hero-visual{
    margin-top:1.5rem;
  }
}


/* desktop/tablet already set above */

/* mobile tweaks */
@media (max-width: 575.98px){          /* up to ~576px width */
  .puj-hero{
    padding-top:5.5rem;
    padding-bottom:3rem;
    margin-top: 45px;
  }

  .puj-hero .container{
    padding-left:1.25rem;
    padding-right:1.25rem;            /* side margin on mobile */
  }

  .puj-hero-title{
    font-size:1.8rem;
  }

  .puj-hero-sub{
    margin-bottom:1.5rem;
  }

  .puj-hero .d-flex.gap-3{
    gap:0.9rem;
  }

  .puj-hero-primary,
  .puj-hero-ghost{
    width:100%;                       /* full-width buttons if you like */
    justify-content:center;
  }
}




.puj-about-home{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#ffe6f5,#f4ecff,#e1f7ff);
}

.puj-about-home::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0 0,rgba(255,159,203,.35),transparent 60%),
    radial-gradient(circle at 100% 100%,rgba(0,164,166,.28),transparent 60%);
  opacity:.7;
  mix-blend-mode:screen;
  animation: aboutBgMove 14s ease-in-out infinite;
  pointer-events:none;
}

@keyframes aboutBgMove{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(-25px,18px,0) scale(1.06); }
}

.puj-about-home .container{
  position:relative;
  z-index:2;
}

/* doctor photo with blobs */
.puj-about-photo-wrap{
  position:relative;
  max-width:360px;
  margin-left:auto;
  margin-right:auto;
}

.about-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(0);
  opacity:.7;
  mix-blend-mode:screen;
  z-index:0;
}

.about-blob-1{
  width:220px;height:220px;
  background:radial-gradient(circle at 0 0,#ffb3d7 0,rgba(255,179,215,0) 70%);
  top:-40px;left:-40px;
  animation: aboutBlob1 16s ease-in-out infinite;
}

.about-blob-2{
  width:200px;height:200px;
  background:radial-gradient(circle at 100% 100%,#9af2ff 0,rgba(154,242,255,0) 70%);
  bottom:-45px;right:-35px;
  animation: aboutBlob2 18s ease-in-out infinite;
}

@keyframes aboutBlob1{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(18px,10px); }
}
@keyframes aboutBlob2{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-16px,-12px); }
}

.puj-about-photo-card{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.28);
  animation: aboutPhotoFloat 7s ease-in-out infinite;
  height: 400px;
  width:350px;
}

@keyframes aboutPhotoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.puj-about-photo{
  width:100%;
  display:block;
}

.puj-about-mini-tag{
  position:absolute;
  left:10%;
  bottom:8%;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .8rem;
  border-radius:999px;
  background:#ffffffee;
  backdrop-filter:blur(10px);
  font-size:.78rem;
  font-weight:600;
  color:#29323f;
  box-shadow:0 14px 30px rgba(0,0,0,.22);
}

.puj-about-mini-tag i{
  color:#00a4a6;
}

/* text side (reuse earlier styles) */
.puj-about-badge{ /* from previous answer, keep or tweak */ }
.puj-about-title{ /* from previous answer */ }
.puj-about-text{ /* from previous answer */ }

/* small animated pills */
.puj-about-pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.puj-about-pill-row .pill{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.78rem;
  padding:.25rem .7rem;
  border-radius:999px;
  background:#ffffffcc;
  color:#005c99;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
}

.puj-about-pill-row i{
  color:#c4328d;
}

/* icon cards (keep from previous, with slight color tweak) */
.puj-about-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
  margin-top:1.2rem;
}

.about-card{
  position:relative;
  padding:.85rem 1rem;
  border-radius:1.2rem;
  background:#ffffffee;
  backdrop-filter:blur(12px);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
  overflow:hidden;
  transform:translateY(0);
  transition:transform .25s, box-shadow .25s;
}

.about-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 0 0, rgba(196,50,141,.16), transparent 60%);
  opacity:0;
  transform:translate3d(-20px,-18px,0);
  transition:opacity .3s, transform .3s;
}

.about-card i{
  font-size:1.3rem;
  color:#00a4a6;
  margin-bottom:.35rem;
}

.about-card h5{
  font-size:.92rem;
  font-weight:700;
  color:#29323f;
  margin-bottom:.1rem;
}

.about-card p{
  font-size:.8rem;
  color:#616b7b;
  margin:0;
}

.about-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 52px rgba(0,0,0,.2);
}

.about-card:hover::before{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* staggered float */
.ac-1{ animation: aboutFloat 6s ease-in-out infinite; }
.ac-2{ animation: aboutFloat 6.5s ease-in-out infinite; }
.ac-3{ animation: aboutFloat 7s ease-in-out infinite; }
.ac-4{ animation: aboutFloat 7.5s ease-in-out infinite; }

@keyframes aboutFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

/* read more button (reuse from previous) */

/* responsive */
@media (max-width:991.98px){
  .puj-about-home{
    text-align:center;
  }
  .puj-about-photo-wrap{
    margin-bottom:1.5rem;
  }
  .puj-about-grid{
    margin-top:1rem;
  }
  .puj-about-pill-row{
    justify-content:center;
  }
}


.puj-about-head{
  max-width: 560px;
}

/* pill badge */
.puj-about-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.25rem .9rem;
  border-radius:999px;
  background:rgba(0,92,153,.07);
  color:#005c99;
  font-size:.8rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.09em;
  animation: badgePop .7s ease-out;
}

.puj-about-badge i{
  color:#00a4a6;
}

/* heading */
.puj-about-title{
  font-size:1.9rem;
  font-weight:800;
  color:#29323f;
  line-height:1.2;
  position:relative;
}

.puj-about-title span{
  background:linear-gradient(90deg,#c4328d,#00a4a6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/* text */
.puj-about-text{
  margin-top:1.1rem;
  font-size:.98rem;
  color:#555f70;
}

/* read more button */
/* stronger: inside .puj-about-home and with .btn + .puj-about-btn */
.puj-about-home .btn.puj-about-btn{
  position:relative;
  overflow:hidden;
  border-radius:999px;
  padding:.55rem 1.6rem;
  background:#ffffff;
  color:#005c99;
  border:1px solid rgba(0,92,153,.3);
  font-weight:600;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  box-shadow:0 12px 26px rgba(0,0,0,.08);
  transition:color .22s, border-color .22s,
             box-shadow .22s, transform .22s;
}

.puj-about-home .btn.puj-about-btn::before{  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,92,153,.18),rgba(196,50,141,.14));
  opacity:0;
  transform:translateX(-30%);
  transition:opacity .25s, transform .25s; }
.puj-about-home .btn.puj-about-btn:hover{  color:#005c99;
  border-color:rgba(0,92,153,.7);
  box-shadow:0 18px 36px rgba(0,0,0,.16);
  transform:translateY(-2px);
   
}
.puj-about-home .btn.puj-about-btn:hover::before{opacity:1;
  transform:translateX(0);}
.puj-about-home .btn.puj-about-btn .arrow{ transform:translateX(4px);}



.puj-about-btn span{
  position:relative;
  z-index:1;
}

.puj-about-btn .arrow{
  transition:transform .25s;
}


/* small entrance animations */
@keyframes badgePop{
  0%{ transform:scale(.6); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}


/* section base */
.puj-services{
  position:relative;
  background:linear-gradient(180deg,#ffffff,#f4f6ff);
}

.puj-section-title{
  font-size:1.9rem;
  font-weight:800;
  color:#22293b;
}
.puj-section-title span{
  background:linear-gradient(90deg,#c4328d,#00a4a6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.puj-section-sub{
  color:#5e6677;
  font-size:.96rem;
}

/* service card */
.puj-services{
  background:linear-gradient(180deg,#ffffff,#f4f6ff);
}

/* card layout */
.svc-card{
  position:relative;
  border-radius:1.4rem;
  background:#ffffff;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  overflow:hidden;
  transform:translateY(0);
  transition:transform .25s ease, box-shadow .25s ease;
}

/* top image */
.svc-img{
  position:relative;
  overflow:hidden;
  border-radius:1.4rem 1.4rem 0 0;
}

.svc-img img{
  width:100%;
  display:block;
  transform:scale(1.04);
  transition:transform .35s ease;
}

/* small chip */
.svc-chip{
  position:absolute;
  left:1rem;
  bottom:.8rem;
  padding:.25rem .7rem;
  border-radius:999px;
  font-size:.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:#ffffffee;
  color:#005c99;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}

/* body */
.svc-body{
  padding:.9rem 1rem 1rem;
  position:relative;
}

/* icon bubble */
.svc-icon{
  width:44px;
  height:44px;
  border-radius:16px;
  background:linear-gradient(135deg,#ffe6f5,#e0f7ff);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c4328d;
  font-size:1.2rem;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  margin-top:-1.6rem;
  margin-bottom:.5rem;
  position:relative;
  z-index:2;
}

.svc-body h3{
  font-size:1rem;
  font-weight:700;
  color:#22293b;
  margin-bottom:.2rem;
}

.svc-body p{
  font-size:.86rem;
  color:#5b6477;
  margin:0;
}

/* hover animations */
/* add gradient border on hover */
.svc-title{
  font-size:1rem;
  font-weight:800;
  text-transform:none;
  letter-spacing:.04em;
  margin-bottom:.25rem;
  color:#22293b;
  position:relative;
}

.svc-title span{
  background:linear-gradient(90deg,#c4328d,#00a4a6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* small coloured underline */



/* coloured outline layer */
.svc-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:2px solid transparent;
  background:linear-gradient(135deg,#ffe6f5,#e0f7ff,#fff4d8) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity .3s ease;
}

/* overlay in image area */
.svc-img::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,92,153,.25),rgba(196,50,141,.18));
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity .35s ease;
}

/* hover state */
.svc-card:hover{
  transform:translateY(-10px) rotateX(4deg) rotateY(-3deg);
  box-shadow:0 26px 70px rgba(0,0,0,.22);
  background:linear-gradient(135deg,#ffffff,#fdf7ff);
}

.svc-card:hover::before{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* show border + overlay */
.svc-card:hover::after{
  opacity:1;
}

.svc-card:hover .svc-img img{
  transform:scale(1.12) translateY(-2px);
}

.svc-card:hover .svc-img::after{
  opacity:1;
}

/* icon + chip motion */
.svc-card:hover .svc-icon{
  animation:svcIconBounce .45s ease;
}

.svc-card:hover .svc-chip{
  transform:translateY(-2px);
  transition:transform .25s ease;
}

/* soft floating per card */
.sc-1,.sc-2,.sc-3,.sc-4,.sc-5,.sc-6,
.sc-7,.sc-8,.sc-9,.sc-10,.sc-11,.sc-12,
.sc-13,.sc-14,.sc-15,.sc-16{
  animation:svcFloat 7s ease-in-out infinite;
}

.svc-card:hover{
  animation:none;
}

.svc-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}
.svc-card-link:hover{
  text-decoration:none;
}


/* keyframes */
@keyframes svcFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}

@keyframes svcIconBounce{
  0%{ transform:translateY(0); }
  30%{ transform:translateY(-3px); }
  60%{ transform:translateY(1px); }
  100%{ transform:translateY(0); }
}

/* responsive */
@media (max-width:991.98px){
  .svc-card{
    height:100%;
  }
}


/* equal image height for all service cards */
.svc-card .svc-img {
  height: 260px;              /* adjust 240–280 based on your design */
  overflow: hidden;
}

.svc-card .svc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* crops while keeping proportions */
  display: block;
}



/* section background */
.puj-contact{
  position:relative;
  background:linear-gradient(180deg,#fdf3ff,#f1f8ff);
}

/* LEFT CARD */
.contact-info-card{
  position:relative;
  border-radius:1.6rem;
  padding:1.4rem 1.6rem;
  background:rgba(255,255,255,.9);
  box-shadow:0 20px 50px rgba(0,0,0,.12);
  overflow:hidden;
}

.contact-info-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0 0,rgba(196,50,141,.25),transparent 60%),
    radial-gradient(circle at 100% 100%,rgba(0,164,166,.22),transparent 60%);
  opacity:.9;
  mix-blend-mode:screen;
  animation: contactBgMove 14s ease-in-out infinite;
  pointer-events:none;
}

.contact-info-card > *{
  position:relative;
  z-index:1;
}

/* badge */
.contact-badge{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.25rem .8rem;
  border-radius:999px;
  background:rgba(0,92,153,.08);
  color:#005c99;
  font-size:.78rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.09em;
}

.contact-badge i{
  color:#00a4a6;
}

/* title */
.contact-title{
  margin-top:1rem;
  font-size:1.7rem;
  font-weight:800;
  color:#22293b;
}

.contact-title span{
  background:linear-gradient(90deg,#c4328d,#00a4a6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.contact-text{
  margin-top:.6rem;
  font-size:.94rem;
  color:#545e70;
}

/* contact list */
.contact-list{
  list-style:none;
  padding:0;
  margin:1rem 0 0;
}

.contact-list li{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  margin-bottom:.6rem;
}

.icon-circle{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:1.1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  animation: iconPulse 3.2s ease-in-out infinite;
}

.icon-circle.phone{ background:linear-gradient(135deg,#ff9f43,#ffb866); }
.icon-circle.whatsapp{ background:linear-gradient(135deg,#25d366,#128c7e); }
.icon-circle.location{ background:linear-gradient(135deg,#c4328d,#ff7bbf); }
.icon-circle.clock{ background:linear-gradient(135deg,#005c99,#00a4a6); }

.contact-list h6{
  font-size:.9rem;
  font-weight:700;
  color:#22293b;
  margin-bottom:.1rem;
}
.contact-list p{
  font-size:.84rem;
  color:#5b6475;
  margin:0;
}

/* tags */
.contact-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}

.contact-tags span{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  font-size:.78rem;
  padding:.3rem .7rem;
  border-radius:999px;
  background:#ffffffd9;
  color:#005c99;
}

.contact-tags i{
  color:#c4328d;
}

/* RIGHT: FORM */
.contact-form-wrap{
  position:relative;
  border-radius:1.8rem;
  padding:1.5rem 1.6rem 1.7rem;
  background:rgba(255,255,255,.95);
  box-shadow:0 24px 60px rgba(0,0,0,.16);
  overflow:hidden;
}

/* floating circles */
.contact-floating-circle{
  position:absolute;
  border-radius:50%;
  mix-blend-mode:screen;
  opacity:.7;
}

.cf-1{
  width:210px;
  height:210px;
  background:radial-gradient(circle,#ffb3d7,transparent 70%);
  top:-40px;
  right:-60px;
  animation: contactBubble1 14s ease-in-out infinite;
}
.cf-2{
  width:180px;
  height:180px;
  background:radial-gradient(circle,#9af2ff,transparent 70%);
  bottom:-40px;
  left:-40px;
  animation: contactBubble2 18s ease-in-out infinite;
}

/* form content above circles */
.contact-form{
  position:relative;
  z-index:2;
}

/* floating-label inputs */
.floating-group{
  position:relative;
}

.floating-group .form-control{
  border-radius:1rem;
  border:1px solid rgba(0,0,0,.08);
  padding:.65rem .9rem .55rem 2.3rem;
  font-size:.9rem;
  background:rgba(255,255,255,.92);
  transition:border-color .2s, box-shadow .2s, background .2s, transform .2s;
}

.floating-group.textarea-group .form-control{
  padding-top:1.1rem;
}

/* label */
.floating-group label{
  position:absolute;
  left:2.3rem;
  top:50%;
  transform:translateY(-50%);
  font-size:.82rem;
  color:#7a8292;
  pointer-events:none;
  transition:all .2s;
}

/* icon inside input */
.form-icon{
  position:absolute;
  left:.9rem;
  top:50%;
  transform:translateY(-50%);
  font-size:.9rem;
  color:#c4328d;
}

/* focus & filled states */
.floating-group .form-control:focus{
  outline:none;
  border-color:rgba(196,50,141,.7);
  box-shadow:0 0 0 3px rgba(196,50,141,.18);
  background:#ffffff;
  transform:translateY(-1px);
}

.floating-group .form-control:focus + label,
.floating-group .form-control:not(:placeholder-shown) + label{
  top:0.2rem;
  font-size:.7rem;
  color:#c4328d;
}

/* for textarea: adjust label position */
.textarea-group label{
  top:.8rem;
  transform:none;
}

/* button */
.btn.contact-btn{
  position:relative;
  overflow:hidden;
  border-radius:999px;
  padding:.6rem 1.7rem;
  background:linear-gradient(135deg,#ff9f43,#ffb866);
  color:#fff;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:none;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  box-shadow:0 18px 34px rgba(255,159,67,.55);
  transition:transform .22s, box-shadow .22s;
}

.contact-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,0) 0,
                                       rgba(255,255,255,.7) 40%,
                                       rgba(255,255,255,0) 80%);
  transform:translateX(-130%);
  transition:transform .55s ease-out;
}

.btn-arrow{
  position:relative;
  z-index:1;
  transition:transform .22s;
}

.contact-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 44px rgba(255,159,67,.7);
}

.contact-btn:hover::before{
  transform:translateX(130%);
}

.contact-btn:hover .btn-arrow{
  transform:translateX(4px);
}

/* note */
.contact-note{
  font-size:.8rem;
  color:#667085;
}
.contact-note i{
  color:#00a4a6;
  margin-right:.3rem;
}

.contact-link{
  color:inherit;
  text-decoration:none;
  font-weight:600;
}
.contact-link:hover{
  text-decoration:underline;
}

/* animations */
@keyframes contactBgMove{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-20px,14px,0); }
}

@keyframes iconPulse{
  0%,100%{ transform:scale(1); box-shadow:0 10px 24px rgba(0,0,0,.16); }
  50%{ transform:scale(1.07); box-shadow:0 14px 30px rgba(0,0,0,.24); }
}

@keyframes contactBubble1{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-16px,10px); }
}
@keyframes contactBubble2{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(14px,-12px); }
}

/* responsive */
@media (max-width:991.98px){
  .contact-info-card{
    margin-bottom:1.5rem;
  }
}






.puj-footer{
  background:linear-gradient(180deg,#f1f4ff,#ffe6f5);
  color:#273047;
  position:relative;
  overflow:hidden;
}

/* subtle animated background */
.puj-footer::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(circle at 0 0,rgba(196,50,141,.18),transparent 60%),
    radial-gradient(circle at 100% 100%,rgba(0,164,166,.18),transparent 60%);
  opacity:.9;
  mix-blend-mode:screen;
  animation: footerBgMove 18s ease-in-out infinite;
  pointer-events:none;
}

.puj-footer .container,
.footer-bottom{
  position:relative;
  z-index:1;
}

/* brand */
.footer-logo{
  height:48px;
}

.footer-brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.footer-brand-text .name{
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:1rem;
  color:#c4328d;
}

.footer-brand-text .sub{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#4f5870;
}

.footer-intro{
  margin-top:.6rem;
  font-size:.86rem;
  color:#4f5870;
  max-width:240px;
}

/* social */
.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:999px;
  background:#ffffffdd;
  color:#c4328d;
  font-size:.9rem;
  margin-right:.35rem;
  box-shadow:0 8px 20px rgba(0,0,0,.14);
  transition:transform .25s, box-shadow .25s, background .25s, color .25s;
}

.footer-social a:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
  background:linear-gradient(135deg,#c4328d,#00a4a6);
  color:#fff;
}

/* titles + lists */
.footer-title{
  font-size:.95rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#22293b;
  margin-bottom:.8rem;
}

.footer-list{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-list li{
  margin-bottom:.35rem;
}

.footer-list a{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.86rem;
  color:#4f5870;
  text-decoration:none;
  transition:color .2s, transform .2s;
}

.footer-list a::before{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#c4328d,#00a4a6);
  transition:width .25s;
}

.footer-list a:hover{
  color:#c4328d;
  transform:translateX(2px);
}

.footer-list a:hover::before{
  width:100%;
}

.footer-list i{
  color:#00a4a6;
}

/* address / contact */
.footer-address{
  font-size:.86rem;
  color:#4f5870;
  margin-bottom:.6rem;
}

.footer-contact{
  list-style:none;
  padding:0;
  margin:0 0 .7rem;
}

.footer-contact li{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  font-size:.84rem;
  color:#4f5870;
  margin-bottom:.3rem;
}

.footer-contact i{
  color:#c4328d;
  margin-top:.1rem;
}

.footer-contact a{
  color:inherit;
  text-decoration:none;
  transition:color .2s;
}

.footer-contact a:hover{
  color:#c4328d;
}

/* footer CTA button */
.footer-cta{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem 1.2rem;
  border-radius:999px;
  background:linear-gradient(135deg,#ff9f43,#ffb866);
  color:#fff;
  font-size:.82rem;
  font-weight:700;
  text-decoration:none;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 16px 34px rgba(255,159,67,.55);
  transition:transform .22s, box-shadow .22s;
}

.footer-cta i{
  font-size:.9rem;
}

.footer-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 44px rgba(255,159,67,.7);
}

/* bottom bar */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.6);
  color:#4f5870;
}

.footer-bottom i{
  color:#c4328d;
  margin:0 .15rem;
}

/* animation */
@keyframes footerBgMove{
  0%,100%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-20px,16px,0); }
}

/* responsive */
@media (max-width:767.98px){
  .footer-brand{
    text-align:left;
  }
  .footer-intro{
    max-width:none;
  }
}


/* Desktop-only footer alignment tweak (laptop view) */
@media (min-width: 992px) {
  .puj-footer .footer-center-col {
    display: flex;
    justify-content: left;
  }
  .puj-footer .footer-center-col > div {
    text-align: left;
  }
}






/* overlay container */
.appt-overlay {
  position: fixed;
  inset: 0;
  display: none;              /* hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.appt-overlay.show {
  display: flex;
}

.appt-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,0.55);
}

/* center card */
.appt-overlay-content {
  position: relative;
  z-index: 1;
}

/* modal card look */
.appt-modal-card {
  max-width: 900px;
  width: 100%;
  background: radial-gradient(circle at top left, #f5f7ff, #e6f0ff);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(15,23,42,0.5);
  padding: 20px 24px 22px;
  position: relative;
  overflow: hidden;
  animation: modalPop 0.6s ease-out;
}

/* header */
.appt-modal-header h3 {
  font-weight: 700;
  color: #0f172a;
}
.appt-close-btn {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.2s, color 0.2s;
}
.appt-close-btn:hover {
  transform: rotate(90deg);
  color: #0f172a;
}

/* labels & inputs */
.appt-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.25rem;
}
.appt-input-wrap { position: relative; }
.appt-input {
  border-radius: 999px;
  border: 1px solid #d4dbe8;
  background: rgba(255,255,255,0.9);
  padding-inline: 1rem;
  height: 48px;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}
textarea.appt-input {
  border-radius: 18px;
  height: auto;
}
.appt-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 0.16rem rgba(37,99,235,0.2);
  background: #ffffff;
}

/* right icons */
.appt-icon-right .appt-input { padding-right: 2.6rem; }
.appt-right-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
}

/* submit button */
button.btn.appt-submit-btn  {
  border-radius: 999px;
  padding: 0.9rem 1.2rem;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  box-shadow: 0 18px 40px rgba(37,99,235,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.appt-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(37,99,235,0.45);
}

/* entrance animation */
@keyframes modalPop {
  0%   { opacity: 0; transform: translateY(40px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { transform: translateY(0) scale(1); }
}


/* base: take most of screen, but not full, and auto height */
.appt-modal-card {
  width: 95vw;              /* 95% of viewport width */
  max-width: 900px;         /* big on desktop */
  max-height: 100vh;         /* never taller than screen */
  overflow-y: auto;         /* scroll inside if content is long */
}

/* extra tweak on very small screens */
@media (max-width: 576px) {
  .appt-modal-card {
    padding: 16px 16px 18px;
    border-radius: 18px;
  }
  .appt-modal-body .row > [class^="col-"] {
    margin-bottom: 0.35rem;
  }
}