body{
font-family: Arial, sans-serif;
margin:0;
background:#f7f7f7;
color:#222;
}

.container{
max-width:1200px;
margin:auto;
padding:20px;
}

/* HEADER */
.header{
position:sticky;
top:0;
background:#f7f7f7;
z-index:100;
transition:all 0.3s ease;
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
height:55px;
transition:all 0.3s ease;
}

.logo img{
height:28px;
transition:all 0.3s ease;
}

/* SHRINK STATE */
.header.shrink .header-inner{
height:35px;
}

.header.shrink .logo img{
height:24px;
}

.header.shrink{
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.hero{
background:#ffffff;
padding:80px 0 90px 0;
text-align:left;
}

.hero-text{
max-width:800px;
}

.btn-primary{
background:#2b5fb8;
color:white;
border:none;
padding:12px 24px;
border-radius:6px;
cursor:pointer;
font-size:16px;
}

.hero{
padding:80px 0 90px 0;
}

.hero-inner{
max-width:1100px;
margin:auto;
display:flex;
}

.hero h1{
font-size:42px;
margin-bottom: 40px;
margin-top: 20px;
}

.hero p{
font-size:22px;
color:#161616;
font-weight:400;
margin-bottom:30px;
}

.hero-features{
list-style:none;
padding:0;
margin-bottom:32px;
}

.hero ul{
margin-bottom:30px;
}

.hero-list li{
margin-bottom:8px;
list-style:none;
}

.hero-list li::before{
content:"✓";
color:#2f5fd0;
margin-right:8px;
}

.hero-features li{
margin-bottom:8px;
}

.hero-buttons {
  margin-top: 40px;
  align-items: center;
}

/* BASE */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0 22px;     /* 🔥 remove vertical padding */
  height: 48px;        /* 🔥 force equal height */
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
}

/* PRIMARY */
.btn-primary {
  background: #2b5fb8;
  color: white;
  border: 1px solid transparent;
}

.btn-primary:hover {
  background: #1f4fa3;
  transform: translateY(-2px);
}

.hero-buttons a {
  margin-right: 40px;
}

.hero-buttons a:last-child {
  margin-right: 0;
}

/* SECONDARY */
.btn-secondary {
  background: white;
  color: #222;
  border: 1px solid #ccc;
}

.btn-secondary:hover {
  background: #f3f4f6;
}

.hero-note{
margin-top:35px;
font-size:14px;
font-weight:200;
color:#535353;
}

.categories{
padding:70px 0 90px 0;
background:#f7f7f7;
}

.categories h2{
font-size:28px;
margin-bottom:40px;
}

.categories-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

.category-card{
background:white;
padding:24px;
border-radius:8px;
border:1px solid #e6e6e6;
transition:all 0.25s ease;
}

.category-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 28px rgba(0,0,0,0.08);
}

.category-card h3{
margin-bottom:10px;
}

.category-card p{
margin-bottom:15px;
color:#555;
}

.category-card a{
color:#2f5fd0;
font-weight:500;
text-decoration:underline;
}

.coming{
color:#888;
font-size:14px;
}

section{
padding:80px 0;
}

.standard{
padding:80px 0;
background:#ffffff;
}

.standard-inner{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:80px;
}

.standard-text h2{
margin-bottom:10px;
}

.standard-text p{
color:#555;
}

.standard-list{
border-left:3px solid #e5e7eb;
padding-left:30px;
}

.standard-list ul{
list-style:none;
padding:0;
}

.standard-list li{
margin-bottom:12px;
}

.professionals{
background:#f7f7f7;
padding:80px 0;
}

.professionals h2{
margin-bottom:20px;
}

.professionals p{
max-width:520px;
margin-bottom:30px;
color:#555;
line-height:1.6;
}

.footer{
background:#0b0f14;
color:#cbd5e1;
padding:60px 0 30px;
}

.footer-inner{
display:flex;
justify-content:space-between;
align-items:flex-start;
}

.footer-left{
max-width:220px;
text-decoration: none;
}

.footer-left a {
  text-decoration: none;  /* ❌ remove underline */
  color: #94a3b8;         /* match your paragraph color */
}

.footer-left a:hover {
  color: #cbd5e1;         /* optional hover (same tone as footer) */
}

.footer-logo{
height:16px;
margin-bottom:15px;
}

.footer-left p{
color:#94a3b8;
line-height:1.5;
}

.footer-right{
text-decoration: none;
display:flex;
flex-direction:column;
gap:10px;
}

.footer-title{
color:#e2e8f0;
font-weight:600;
margin-bottom:10px;
}

.footer-right a{
color:#94a3b8;
text-decoration:none;
transition:color .2s ease;
}

.footer-right a:hover{
color:white;
}

.footer-bottom{
margin-top:40px;
}

.footer-line{
height:1px;
background:#1f2937;
margin-bottom:20px;
}

.footer-bottom p{
text-align:right;
font-size:14px;
color:#6b7280;
}

.specialist-card hr{
margin:15px 0;
border:none;
border-top:1px solid #e5e7eb;
}

.specialist-card a{
color:#2b5fb8;
text-decoration:none;
font-weight:500;
}

.load-more{
text-align:center;
margin-top:150px;
}

.nannies-page{
background:#f7f7f7;
padding:80px 0;
}


.list-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:40px;
}


.sort-box{
text-align:right;
}


.sort-btn{
border:1px solid #ccc;
background:white;
padding:6px 12px;
border-radius:4px;
margin-bottom:5px;
}


.nannies-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}


.nanny-card{
background:white;
border:1px solid #e5e7eb;
border-radius:10px;
padding:20px;
display:flex;
gap:15px;
transition:all .25s ease;
}


.nanny-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 20px rgba(0,0,0,0.06);
}


.nanny-card img{
width:70px;
height:70px;
border-radius:8px;
object-fit:cover;
}


.nanny-info h3{
margin-bottom:6px;
}


.nanny-info p{
color:#555;
margin-bottom:6px;
}


.location{
font-size:14px;
color:#777;
}


.nanny-info a{
color:#2b5fb8;
text-decoration:none;
font-weight:500;
}


.load-more{
text-align:center;
margin-top:50px;
}

/* NANNIES INTRO */

.nannies-intro{
background:#ffffff;
padding:80px 0 70px 0;
}

.nannies-intro h1{
margin-bottom:15px;
}

.intro-sub{
max-width:520px;
color:#555;
margin-bottom:30px;
}

.intro-list{
padding-left:18px;
color:#444;
line-height:1.8;
}


/* PROFESSIONALS LIST */

.nannies-page{
background:#f7f7f7;
padding:80px 0;
}

.list-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:40px;
}

.sort-dropdown{
position:relative;
display:inline-block;
}

.sort-btn{
border:1px solid #ccc;
background:white;
padding:12px 70px;
border-radius:10px;
cursor:pointer;
font-size:15px;
display:flex;
align-items:center;
gap:8px;
transition:all .2s ease;
}

.sort-btn:hover{
border-color:#999;
}

.arrow{
font-size:12px;
}

/* Dropdown menu */
.sort-menu{
position:absolute;
top:110%;
left:0;
background:white;
border:1px solid #ddd;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,0.08);
padding:10px 0;
display:none;
min-width:180px;
z-index:100;
}

.sort-menu.active{
display:block;
}

.sort-item{
padding:10px 15px;
cursor:pointer;
font-size:14px;
}

.sort-item:hover{
background:#f3f4f6;
}

/* GRID */

.nannies-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
align-items:stretch;
}

/* CARD */

.nanny-card{
background:white;
border:1px solid #e5e7eb;
border-radius:12px;
padding:20px;

display:flex;
flex-direction:column;
justify-content:space-between;

height:100%;
}

.nanny-card:hover{
transform:translateY(-3px);
box-shadow:0 10px 20px rgba(0,0,0,0.06);
}

/* TOP SECTION */

.card-top{
display:flex;
gap:16px;
align-items:center;
}

.card-top img{
width:100px;
height:100px;
border-radius:10px;
object-fit:cover;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}

/* TEXT */

.card-info h3{
margin-bottom:4px;
font-size:16px;
}

.experience{
font-size:13px;
color:#777;
margin-bottom:3px;
}

.status{
font-size:13px;
font-weight:500;
}

.available{
color:#2b5fb8;
}

.nanny-info a:hover{
text-decoration:underline;
}

/* STATUS */

.status{
font-size:13px;
font-weight:500;
}

.available{
color:#2b5fb8;
}

.booked{
color:#666;
}

.unknown{
color:#9ca3af;
}

/* DIVIDER */

.card-divider{
border-top:2px solid #2b5fb8;
opacity:.3;
margin-top:10px;
}

/* FOOTER */

.card-footer{
margin-top:auto;
}

.profile-link{
color:#2b5fb8;
text-decoration:none;
font-weight:500;
font-size:14px;
}

.profile-link:hover{
text-decoration:underline;
}

/* LOAD MORE */

.load-more{
text-align:center;
margin: 100px;
}

/* TABLET */

@media (max-width: 900px){

.nannies-grid{
grid-template-columns:repeat(2,1fr);
}

}


/* MOBILE */

@media (max-width: 600px){

.nannies-grid{
grid-template-columns:1fr;
}

}

@media (max-width: 768px){

.footer-inner{
flex-direction:column;
gap:30px;
}

.footer-bottom p{
text-align:left;
}

}

/* PROFILE HERO */
.profile-hero{
background:#ffffff;
padding:60px 0;
}

.profile-top{
display:flex;
gap:40px;
align-items:center;
}

.profile-photo img{
width:220px;
border-radius:10px;
}

.profile-info h1{
margin-bottom:5px;
}

.role{
color:#666;
margin-bottom:15px;
}

.meta p{
margin-bottom:6px;
}

.available{
color:#2b5fb8;
font-weight:500;
}

.note{
font-size:14px;
color:#777;
margin-top:10px;
}

/* SECTIONS */
.profile-section{
padding:60px 0;
background:#ffffff;
}

.profile-section h2{
margin-bottom:20px;
}

.about-text{
max-width:700px;
color:#555;
}

/* GRID INFO */
.info-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
margin-top:20px;
}

.label{
font-size:14px;
color:#777;
margin-bottom:5px;
}

/* REVIEWS */
.profile-reviews{
background:#f7f7f7;
padding:60px 0;
}

.reviews-grid{
display:flex;
gap:40px;
margin-top:20px;
}

.review{
max-width:300px;
color:#555;
}

.review-btn{
margin-top:30px;
}

.review-btn a {
  margin-top: 20px;
}

  /* BACK BUTTON */
  .back-btn{
  text-align:center;
  margin-top:100px;
  }

@media (max-width:768px){

.profile-top{
flex-direction:column;
align-items:flex-start;
}

.info-grid{
grid-template-columns:1fr;
}

.reviews-grid{
flex-direction:column;
}

}

/* APPLY PAGE */
body{
background:#f7f7f7;
}

.apply-hero{
background:white;
padding:60px 0 30px;
text-align:center;
}

.subtitle{
color:#666;
margin:10px 0 20px;
}

.badge{
display:inline-block;
background:#eef2ff;
color:#2b5fb8;
padding:8px 16px;
border-radius:20px;
font-size:14px;
}

.form-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px; /* 🔥 MATCH THIS */
}

/* FORM */
.apply-form{
background:#f7f7f7;
padding:40px 0 80px;
}

.form-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.form-block{
background:white;
padding:28px; /* was 25 */
border-radius:12px; /* smoother */
margin-bottom:28px;
box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

input {
  margin-bottom: 0; /* 🔥 remove extra stacking conflict */
}

.phone-input {
  display: flex;
  gap: 8px;
}

.phone-input select {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: white;
}

.phone-input input {
  flex: 1;
}

.form-block h3 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 600;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px; /* 🔥 increase from 15 */
  margin-bottom: 18px;
}

.form-block input{
margin-bottom: 16px; /* was 15 / 10 mixed */
flex:1;
}

/*salary block*/
.salary-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
flex-wrap:wrap;
}

.salary-row input{
max-width:200px;
}

input, textarea{
width:95%;
padding:12px;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
background: #fff;
}

textarea{
width:95%;
padding:12px;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
min-height:140px;
resize:none;
}

.label {
  margin: 18px 0 12px;
  font-size: 13px;
  color: #666;
}

.tags{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:10px;
}

.tags span{
padding:8px 14px;
border:1px solid #ccc;
border-radius:8px;
cursor:pointer;
}

.tags-row{
display:flex;
gap:12px;
margin-top:10px;
}

.upload-box {
  border: 2px dashed #ccc;
  padding: 50px;
  text-align: center;
  border-radius: 12px;
  color: #666;
  background: white;
  cursor: pointer;
  transition: 0.2s;
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.upload-box:hover {
  border-color: #2b5fb8;
  background: #f9fbff;
}

.upload-box input {
  display: none;
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-content p {
  margin: 10px 0 5px;
  font-weight: 500;
}

.upload-content span {
  font-size: 12px;
  color: #888;
}

.upload-icon {
  font-size: 24px;
}

#previewImage {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.form-note{
text-align:center;
color:#777;
margin:20px 0;
}

.center{
text-align:center;
}

.tag{
padding:12px 18px;
border:1px solid #ddd;
border-radius:8px;
text-align:center;
cursor:pointer;
transition:all .2s ease;
background:white;
font-size:14px;
flex:unset; /* 🔥 important */
}

/* Hover */
.tag:hover{
border-color:#2b5fb8;
color:#2b5fb8;
}

/* Active */
.tag.active{
background:#2b5fb8;
color:white;
border-color:#2b5fb8;
}

.char-count{
text-align:right;
font-size:12px;
color:#888;
margin-top:5px;
}

input {
  margin-bottom: 10px;
}

input:focus, textarea:focus{
outline:none;
border-color:#2b5fb8;
box-shadow:0 0 0 2px rgba(43,95,184,0.1);
}

.btn-primary{
margin-top: 10px;
transition:all .2s ease;
}

.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

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

/* SUCCESS STATE */
.success-message{
display:none;
text-align:center;
padding:80px 20px;
}

.success-box{
background:white;
padding:40px;
border-radius:12px;
max-width:500px;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.success-icon{
font-size:32px;
color:#2b5fb8;
margin-bottom:20px;
}

.success-message{
display:none;
text-align:center;
padding:80px 20px;
animation:fadeIn 0.4s ease;
}

@keyframes fadeIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* HERO contact */
.contact-hero{
background:#f7f7f7;
padding:60px 0 30px;
}

.contact-sub{
margin-top:10px;
max-width:500px;
color:#555;
}

.contact-note{
margin-top:15px;
color:#666;
}

.contact-list{
margin-top:25px;
line-height:2;
color:#444;
}

/* CARDS */
.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:20px;
}

.contact-card{
background:white;
padding:20px;
border-radius:10px;
border:1px solid #e5e7eb;
transition:.25s ease;
}

.contact-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 20px rgba(0,0,0,0.05);
}

.card-divider{
margin:15px 0;
border-top:1px solid #e5e7eb;
}

.contact-link{
color:#2b5fb8;
text-decoration:none;
font-weight:500;
}

/* FORM */
.contact-form{
background:#f7f7f7;
padding:60px 0 60px;
}

.form-note{
margin-top:10px;
color:#666;
font-size:14px;
}

/* OVERLAY */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 999;
}

.menu {
  cursor: pointer;   /* 🔥 makes it feel clickable */
}

.menu:hover {
  opacity: 0.7;
}

/* MENU PANEL */
.side-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100%;

  background: #f7f7f7;           /* 🔥 light gray */
  border-left: 1px solid #e5e7eb; /* 🔥 subtle border */

  padding: 30px 20px;
  transition: 0.3s;
  z-index: 1000;

  display: flex;
  flex-direction: column;
}

/* ACTIVE STATE */
.side-menu.active {
  right: 0;
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* MENU CONTENT */
.menu-header {
  display: flex;
  justify-content: flex-end;
}

.close-btn {
  font-size: 24px;
  cursor: pointer;
  color: #222;
}

.menu-links {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-links a {
  color: #222;
  text-decoration: none;
  font-size: 18px;
  transition: 0.2s;
}

.menu-links a:hover {
  color: #2b5fb8;
}

html {
  scroll-behavior: smooth;
}