:root{
  --bg: #f7e1df;        /* e7d8d9 roz pal (fundal) */
  --accent: #cb5d3f;    /* cd4d31 caramiziu (culoare principala) */
  --muted: #a7645b;     /* a7645b nuanta pentru text secundar */
  --white: #ffffff;
}

@font-face {
  font-family: "Sloop"; /* numele pe care îl vei folosi în CSS */
  src: url("fonts/Sloop-ScriptThree.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Cormorantlight"; /* numele pe care îl vei folosi în CSS */
  src: url("fonts/CormorantGaramond-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Cormorant"; /* numele pe care îl vei folosi în CSS */
  src: url("fonts/CormorantGaramond-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}







*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{/*
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial; */
  font-family: "Cormorant", cursive;
  background: var(--bg);
  color: var(--accent);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* container principal */
.page{
  max-width: 1180px;
  margin: 32px auto;
  padding: 35px; /*distanta dintre text si poza btf 18*/
}

/* Hero: stânga (poză) / dreapta (text) */
.hero{
  display: grid;
  grid-template-columns: 410px 1fr; /* latime imagine*/
  gap: 44px;
  align-items: center;
  min-height: 520px;
}

/* fotografie ovală cu chenar */


.photo-wrap{
  width:100%;
  height: 550px;                   /* 580 mai nou 620btf înălțime mare pentru efectul vertical */
  overflow: hidden;
  border-radius: 50% / 35%;        /* oval vertical */
  border: 1px solid var(--accent);
  box-shadow: 0 8px 20px rgba(169,61,45,0.10);
  background: var(--white);
  transition: all .18s ease;

}


.photo-wrap img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: translateY(0%); /* incadrare poza oval vertical */


}

.play .photo-wrap {
  animation: slideInLeft 0.8s cubic-bezier(.2,.9,.2,1) both;
}

.photo-wrap:hover{
   transform: translateY(-5px);
}

/* partea dreaptă */
.hero-right{
  padding-right: 150px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;   /* toate elementele aliniate la dreapta */
}

/* numele mare, cursiv, aliniat dreapta */
.name{
  font-family: "Sloop", cursive;
  font-size: 100px;
  font-weight: 300; /* subierea literelor */
  line-height: 0.86; /* distanta dintre Ioanitescu si Beatrice */
  margin: -1;
  color: var(--accent);
  text-align: right;
  letter-spacing: 4px;
}
.name span{display:block}

/* meta (descrieri) sub nume, culoare mai estompată, aliniere dreapta */
.meta{
  margin-top: 0px;
  text-align: right;
  color: var(--muted);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 3px;
}
.meta .role{
  margin-bottom:15px;
  color: var(--muted);
  font-weight: 400;
}

/* social icons imediat sub descrieri */
.socials{
  margin-top: 14px;
  display:flex;
  gap:15px;
  justify-content:flex-end;
}
.socials a{
  width:43px; /* marime butoane social media */
  height:43px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(169,61,45,0.12);
  color: var(--accent);
  text-decoration:none;
  font-size:20px;
  background: transparent;
  transition: all .18s ease;
}
.socials a:hover{
  background: var(--accent);
  color: white;
  transform: translateY(-3px);
}

/* butoanele sub nume (pill buttons) */
.ctas{
  margin-top: 16px;
  display:flex;
  gap:12px;
  justify-content:flex-end;
}
.btn{
  padding:10px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  font-family: inherit;
  font-size: 15px;
  transition: all .18s ease;
  letter-spacing: 1px;
}
.btn-outline{
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
}
.btn-outline:hover{
  background: rgba(169,61,45,0.08);
  transform: translateY(-3px);
}
.btn-solid{
  background: var(--accent);
  color: white;
  border: 2px solid var(--accent);
  box-shadow: 0 8px 18px rgba(169,61,45,0.12);
}
.btn-solid:hover{
  transform: translateY(-3px);
}

/* linkurile (Read my blog / Send me an email etc.) aranjate în două coloane la dreapta
.links{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 72px;
  justify-content: end;
  align-items: start;
}
.links a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(169,61,45,0.12);
  padding-bottom: 3px;
  font-weight: 500;
  font-size: 14px;
}  */

/* secțiuni Diplome Meditatii jos */
.section{
  padding: 80px 100px; /* distanta dintre partea de sus si sectiunea diplome servicii etc*/
  text-align:center;
  margin-top: 148px;
  line-height: 1.5;
  letter-spacing: 1.1px;
}
.section-inner h2{ font-size:28px; margin-bottom:8px;}
.section-inner p { font-size:21px; text-indent: 30px; color: var(--muted); }





/* social icons de jos de la contact */
.socialscontact{
  margin-top: 14px;
  margin-bottom: -10px;
  display:flex;
  gap:15px;
  justify-content:center;
}
.socialscontact a{
  width:45px; /* marime butoane social media */
  height:45px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(169,61,45,0.12);
  color: var(--accent);
  text-decoration:none;
  font-size:21px;
  background: transparent;
  transition: all .18s ease;
}
.socialscontact a:hover{
  background: var(--accent);
  color: white;
  transform: translateY(-3px);
}


.footer {
  background: var(--accent);      /* culoare de fundal (caramiziu din paleta ta) */
  color: var(--white);           /* text alb */
  padding: 5px 0;               /* spațiu sus/jos */
  text-align: center;            /* centrat pe mijloc */
  font-size: 14px;               /* text mic */
  margin-top: 48px;              /* spațiu față de secțiunea de sus */
}

.footer-inner p {
  margin: 0;                     /* elimină spațiile default */
}


 #p1 span.responsive2 {  text-indent: 30px; text-align:left; }

/* responsive pentru ecrane mici */
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; gap:28px; padding-bottom: 12px; }
  .photo-wrap{ height: 260px; max-width: 200px; margin: 0 auto; }
  .hero-right{ align-items:center; text-align:center; padding:0 0px; }
  .name{ font-size:65px; margin-bottom:7px;}
  .meta{ text-align:center; margin-bottom:5px; }
  .socials a{ justify-content:center; font-size:20px; width:43px; /* marime butoane social media */  height:43px;}
  .ctas{ justify-content:center; }
  .links{ justify-content:center; grid-template-columns: repeat(2, max-content); gap:12px 28px; }
  .btn{ padding:10px 20px;font-size: 16px;}
  .photo-wrap:hover{transform: none;}
  .btn-solid:hover{transform: none;}
  .btn-outline:hover{transform: none;}
  
  .section {
    padding: 40px 10px;   /* mai puțin spațiu pe lateral */
    margin-top: 80px;     /* micșorăm distanța de sus */
  }

  .section-inner h2 {
    font-size: 22px;      /* text mai mic, se rupe frumos pe mobil */
  }

  .section-inner p {
    font-size: 19px;
  }
   
  
}
@media (max-width: 520px){
  .photo-wrap{ height:260px; }
  .name{ font-size:65px; margin-bottom:8px;}
  .links{ grid-template-columns: 1fr; gap:15px 0; }
  .socials a{ justify-content:center; margin-bottom:5px; font-size:21px; width:45px; /* marime butoane social media */  height:45px;}
  .btn{ padding:10px 20px;font-size: 16px;}
  .photo-wrap:hover{transform: none;}
  .btn-solid:hover{transform: none;}
  .btn-outline:hover{transform: none;}
 
  
  .section {
    padding: 40px 0px; /* distanta laterala text */
    margin-top: 60px;
  }

  .section-inner h2 {
    font-size: 20px;
  }

  .section-inner p {
    font-size: 19px;
	
  }
  
  #p1 span.responsive {  text-indent: 0px; }
  #p1 span.responsive2 {  text-indent: 0px; text-align:center; }
  



}