/* =====================
   ROOT + RESET
===================== */
:root{
--primary:#ff6b8b;
--secondary:#6a5acd;
--dark:#333;
--light:#f9f9f9;
--shadow:0 5px 15px rgba(0,0,0,.1);
--transition:.3s ease;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
}

html{scroll-behavior:smooth}
body{
background:var(--light);
color:var(--dark);
line-height:1.6;
}

/* =====================
   GLOBAL
===================== */
.container{
width:90%;
max-width:1200px;
margin:auto;
}

section{padding:80px 0}

h1,h2,h3{
margin-bottom:20px;
color:var(--secondary);
}

p{margin-bottom:15px}

.text-center{text-align:center}
.text-justify{text-align:justify}

/* =====================
   BUTTON
===================== */
.btn{
display:inline-block;
padding:12px 30px;
background:var(--primary);
color:#fff;
border-radius:30px;
text-decoration:none;
font-weight:600;
transition:var(--transition);
box-shadow:var(--shadow);
}
.btn:hover{
background:var(--secondary);
transform:translateY(-3px);
}

/* =====================
   NAVBAR
===================== */
nav{
position:fixed;
top:0;
width:100%;
background:#fff;
box-shadow:var(--shadow);
z-index:1000;
}
.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 0;
}
.logo{
font-size:1.6rem;
font-weight:700;
color:var(--primary);
}
.nav-links{
display:flex;
list-style:none;
}
.nav-links li{margin-left:25px}
.nav-links a{
text-decoration:none;
color:var(--dark);
font-weight:500;
}
.nav-links a:hover{color:var(--primary)}

/* =====================
   HEADER
===================== */
header{
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
padding:100px 0;
text-align:center;
}
.header-content h1{
font-size:2rem;
color:#fff;
}
.header-content p{
max-width:1200px;
margin:auto;
}

/* =====================
   ABOUT
===================== */
.about-content{
display:flex;
gap:40px;
align-items:center;
}
.about-image{
border-radius:10px;
overflow:hidden;
box-shadow:var(--shadow);
}
.about-image img{
width:286px;
height:350px;
display:block;
transition:var(--transition);
}
.about-image:hover img{transform:scale(1.05)}

/* =====================
   GALLERY
===================== */
.gallery-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}
.gallery-item{
border-radius:10px;
overflow:hidden;
box-shadow:var(--shadow);
height:250px;
}
.gallery-item img{
width:100%;
height:100%;
object-fit:cover;
transition:var(--transition);
}
.gallery-item:hover img{transform:scale(1.1)}

/* =====================
   SOCIAL BUTTONS
===================== */
.social-links{
display:flex;
justify-content:center;
gap:20px;
padding:20px;
}

/* =====================
   FOOTER SOCIAL (FINAL)
===================== */
.footer-social{
display:flex;
justify-content:center;
align-items:center;
gap:18px;
margin-top:20px;
}

/* Shared button */
.social-btn{
width:56px;
height:56px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
color:#fff;
text-decoration:none;
box-shadow:0 8px 18px rgba(0,0,0,.25);
transition:transform .3s ease, box-shadow .3s ease;
}
.social-btn:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 12px 25px rgba(0,0,0,.35);
}

/* WhatsApp */
.whatsapp-btn{
background:linear-gradient(135deg,#25D366,#128C7E);
}

/* Instagram */
.instagram-btn{
background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}

/* SVG fix */
.social-btn svg{
width:26px;
height:26px;
fill:#fff;
}

/* =====================
   FOOTER
===================== */
footer{
background:var(--dark);
color:#fff;
padding:40px 0 20px;
}
.footer-content{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:30px;
}
.footer-logo{
font-size:1.4rem;
font-weight:700;
color:var(--primary);
}
.footer-links a{
color:#ccc;
text-decoration:none;
display:block;
margin-bottom:8px;
}
.footer-links a:hover{color:var(--primary)}
.copyright{
text-align:center;
border-top:1px solid #444;
padding-top:15px;
font-size:.9rem;
color:#aaa;
}

/* =====================
   MOBILE
===================== */
@media(max-width:768px){
.nav-links{display:none}
.about-content{flex-direction:column}
.footer-content{flex-direction:column}
}

/* =====================
   PULSE
===================== */
.pulse{
animation:pulse 2.2s infinite;
}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}
70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}
100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

/* =====================
   FEEDBACK SECTION
===================== */
/* GRID LAYOUT */
.feedback-grid{
  display:flex;
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:12px;
}

.feedback-grid::-webkit-scrollbar{
  height:6px;
}
.feedback-grid::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.25);
  border-radius:10px;
}

/* CARD */
.client-info{
  flex:0 0 220px;          /* CARD WIDTH */
  background:#fff;
  border-radius:16px;
  padding:14px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  text-align:center;
  scroll-snap-align:start;
  transition:transform .3s ease, box-shadow .3s ease;
}

.client-info:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
  border-color:rgba(106,90,205,.35); /* matches your theme */
}

/* CARD IMAGE (TOP FULL IMAGE) */
.client-avatar{
  width:100%;
  height:200px;
  border-radius:14px;
  overflow:hidden;
  margin-bottom:12px;
}

.client-avatar img{
  width:100%;
  height:100%;
  object-fit:contain;   /* IMPORTANT: no crop */
  background:#f4f4f4;   /* soft fill if image ratio differs */
  display:block;
}

/* NAME */
.client-info h3{
  font-size:1rem;
  margin:4px 0;
  color:#333;
  font-weight:600;
}

/* STARS */
.stars{
  color:#ffb400;
  font-size:.95rem;
  margin:4px 0;
}

/* EXPERIENCE LINE */
.client-info{
  background:#fff;
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  transition:transform .3s ease, box-shadow .3s ease;
  display:flex;
  flex-direction:column;
  height:100%;
}

/* =====================
   GALLERY (SCROLL SLIDER – CLEAN)
===================== */
.gallery-grid{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:10px;
}

.gallery-grid::-webkit-scrollbar{
  height:6px;
}
.gallery-grid::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.25);
  border-radius:10px;
}

.gallery-item{
  min-width:280px;
  height:220px;
  border-radius:16px;
  overflow:hidden;
  scroll-snap-align:start;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}

.gallery-item:hover img{
  transform:scale(1.08);
}