/* 1. Base, variáveis e elementos compartilhados */
:root{
  --navy:#102f59;
  --deep:#071f3c;
  --blue:#3973a8;
  --sky:#e7f5f7;
  --cream:#fff8e9;
  --paper:#fffdf8;
  --gold:#f2bd55;
  --gold2:#ffe3a0;
  --coral:#e98270;
  --mint:#8cc5bb;
  --ink:#17324d;
  --muted:#657789;
  --shadow:0 24px 70px #102f5921
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:90px;
  overflow-x:hidden
}

body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"DM Sans",sans-serif;
  line-height:1.6;
  overflow-x:hidden
}

body.lock{
  overflow:hidden
}

a{
  color:inherit;
  text-decoration:none
}

button{
  font:inherit
}

svg{
  display:block
}

.container{
  width:min(1160px,calc(100% - 40px));
  margin:auto
}

h1,h2,h3,p{
  margin-top:0
}

h1,h2,h3{
  font-family:"DM Serif Display",serif;
  font-weight:400;
  line-height:1.08
}

h2{
  margin-bottom:20px;
  color:var(--navy);
  font-size:clamp(2.25rem,4.4vw,4.3rem);
  letter-spacing:-.04em
}

.lead{
  max-width:590px;
  color:var(--muted);
  font-size:1.06rem
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  color:var(--blue);
  font-size:.77rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase
}

.eyebrow:before{
  content:"";
  width:22px;
  height:1px;
  background:currentColor
}

.btn{
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 23px;
  border:1px solid transparent;
  border-radius:99px;
  font-weight:700;
  transition:.25s
}

.btn:hover{
  transform:translateY(-3px)
}

.btn:focus-visible,a:focus-visible,button:focus-visible{
  outline:3px solid #f2bd5588;
  outline-offset:4px
}

.primary{
  color:var(--deep);
  background:var(--gold);
  box-shadow:0 12px 30px #f2bd5540
}

.ghost{
  color:white;
  border-color:#ffffff50;
  background:#ffffff10
}

.arrow{
  width:18px
}

/* 2. Cabeçalho e navegação */
header{
  position:fixed;
  z-index:50;
  top:0;
  width:100%;
  padding:18px 0;
  color:white;
  transition:.25s
}

header.scrolled{
  padding:10px 0;
  color:var(--navy);
  box-shadow:0 8px 30px #09203f12
}

header.scrolled:before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:#fffdf8ed;
  backdrop-filter:blur(14px)
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0
}

.mark{
  width:45px;
  height:45px;
  position:relative;
  display:grid;
  place-items:center;
  color:var(--navy);
  background:var(--gold);
  border-radius:50%;
  box-shadow:inset -5px -4px #c9852b25
}

.mark:after{
  content:"✦";
  position:absolute;
  top:-8px;
  right:-5px;
  color:var(--gold2);
  font-size:.9rem
}

.mark svg{
  width:24px
}

.brand-copy{
  display:grid;
  line-height:1.05
}

.brand-copy strong{
  font:400 1.23rem "DM Serif Display",serif
}

.brand-copy small{
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  opacity:.75
}

.links{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.5vw,34px)
}

.links>a:not(.nav-cta){
  position:relative;
  font-size:.88rem;
  font-weight:600
}

.links>a:not(.nav-cta):after{
  content:"";
  position:absolute;
  right:0;
  bottom:-7px;
  left:0;
  height:2px;
  background:var(--gold);
  transform:scaleX(0);
  transition:.25s
}

.links>a:hover:after{
  transform:scaleX(1)
}

.nav-cta{
  padding:11px 18px;
  color:var(--deep);
  background:var(--gold);
  border-radius:99px;
  font-size:.84rem;
  font-weight:700
}

.menu{
  width:44px;
  height:44px;
  display:none;
  border:0;
  color:inherit;
  background:none;
  cursor:pointer
}

.menu span,.menu:before,.menu:after{
  content:"";
  width:25px;
  height:2px;
  display:block;
  margin:5px auto;
  background:currentColor;
  transition:.25s
}

.menu.active span{
  opacity:0
}

.menu.active:before{
  transform:translateY(7px) rotate(45deg)
}

.menu.active:after{
  transform:translateY(-7px) rotate(-45deg)
}

/* 3. Seção principal (hero) */
.hero{
  min-height:790px;
  position:relative;
  display:flex;
  align-items:center;
  color:white;
  background:radial-gradient(circle at 77% 32%,#3c76a86e,transparent 27%),radial-gradient(circle at 15% 90%,#4d91b630,transparent 22%),linear-gradient(135deg,var(--deep),var(--navy) 60%,#26547e);
  overflow:hidden
}

.hero:after{
  content:"";
  position:absolute;
  z-index:3;
  right:-5%;
  bottom:-80px;
  left:-5%;
  height:150px;
  background:var(--paper);
  border-radius:50% 50% 0 0
}

.stars,.stars:before,.stars:after{
  position:absolute;
  inset:0;
  content:"";
  pointer-events:none;
  background-image:radial-gradient(circle,#ffe3a0e6 0 1px,transparent 1.6px),radial-gradient(circle,#ffffffb5 0 1px,transparent 1.5px);
  background-position:0 0,42px 58px;
  background-size:120px 120px,165px 165px;
  opacity:.43
}

.stars:before{
  transform:scale(.7) rotate(10deg);
  opacity:.7
}

.stars:after{
  transform:translate(34px,24px) scale(1.2);
  opacity:.18
}

.hero-grid{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:60px;
  padding:140px 0 155px
}

.hero .eyebrow{
  color:var(--gold2)
}

.hero h1{
  max-width:690px;
  margin-bottom:25px;
  font-size:clamp(3.7rem,6.9vw,6.8rem);
  letter-spacing:-.055em
}

.hero h1 em{
  color:var(--gold);
  font-weight:400
}

.hero-copy>p:not(.eyebrow){
  max-width:565px;
  margin-bottom:34px;
  color:#ffffffc7;
  font-size:1.1rem
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:13px
}

.note{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:30px;
  color:#ffffffa8;
  font-size:.85rem
}

.note b{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  color:var(--navy);
  background:var(--mint);
  border-radius:50%
}

/* 4. Ilustração do planeta */
.visual{
  min-height:520px;
  position:relative;
  display:grid;
  place-items:center
}

.orbit{
  width:min(480px,100%);
  aspect-ratio:1;
  position:absolute;
  border:1px solid #ffffff31;
  border-radius:50%;
  transform:rotate(-15deg)
}

.orbit:before{
  content:"✦";
  width:34px;
  height:34px;
  position:absolute;
  top:54px;
  right:50px;
  display:grid;
  place-items:center;
  color:var(--navy);
  background:var(--gold);
  border-radius:50%;
  transform:rotate(15deg);
  box-shadow:0 0 0 8px #f2bd5518
}

.moon{
  width:68px;
  height:68px;
  position:absolute;
  top:20px;
  left:5px;
  background:var(--gold2);
  border-radius:50%;
  box-shadow:inset -13px -8px var(--gold),0 0 30px #ffe3a03b;
  animation:float 5s ease-in-out infinite
}

.planet{
  width:350px;
  height:350px;
  position:relative;
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 30% 25%,#ffffffa0,transparent 17%),linear-gradient(145deg,#aad8cf,#78b8b0);
  border-radius:50%;
  box-shadow:inset -35px -28px #2e73761f,0 35px 80px #04132859
}

.ring{
  width:460px;
  height:115px;
  position:absolute;
  top:47%;
  left:50%;
  border:17px solid var(--gold2);
  border-right-color:#f2bd5560;
  border-left-color:#f2bd55a5;
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-13deg);
  box-shadow:0 9px #aa67251f
}

.clinic{
  width:185px;
  height:156px;
  position:relative;
  z-index:2;
  margin-top:-58px;
  background:var(--cream);
  border-radius:18px 18px 10px 10px;
  box-shadow:0 13px #102f5919
}

.clinic:before{
  content:"";
  width:210px;
  height:55px;
  position:absolute;
  top:-32px;
  left:-12px;
  background:var(--coral);
  clip-path:polygon(50% 0,100% 100%,0 100%)
}

.sign{
  width:51px;
  height:51px;
  position:absolute;
  z-index:3;
  top:30px;
  left:67px;
  display:grid;
  place-items:center;
  color:var(--navy);
  background:var(--gold);
  border:5px solid var(--cream);
  border-radius:50%
}

.sign svg{
  width:25px
}

.door{
  width:40px;
  height:60px;
  position:absolute;
  bottom:0;
  left:72px;
  background:var(--blue);
  border-radius:20px 20px 0 0
}

.door:after{
  content:"";
  width:5px;
  height:5px;
  position:absolute;
  top:31px;
  right:7px;
  background:var(--gold2);
  border-radius:50%
}

.window{
  width:32px;
  height:35px;
  position:absolute;
  bottom:29px;
  background:#9fd6e1;
  border:5px solid white;
  border-radius:14px 14px 3px 3px
}

.window:first-of-type{
  left:22px
}

.window:nth-of-type(2){
  right:22px
}

.flag{
  width:2px;
  height:75px;
  position:absolute;
  z-index:4;
  top:-100px;
  left:91px;
  background:var(--navy)
}

.flag:after{
  content:"";
  width:43px;
  height:25px;
  position:absolute;
  left:2px;
  background:var(--gold);
  clip-path:polygon(0 0,100% 15%,78% 53%,100% 100%,0 85%)
}

/* 5. Sobre a profissional */
.about{
  padding:105px 0 120px
}

.about-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:clamp(55px,9vw,115px)
}

.portrait-wrap{
  min-height:555px;
  position:relative;
  display:grid;
  place-items:center
}

.portrait{
  width:min(415px,92%);
  height:500px;
  position:relative;
  background:linear-gradient(160deg,#cde8e3,#89beb5);
  border:12px solid white;
  border-radius:210px 210px 30px 30px;
  box-shadow:var(--shadow);
  overflow:hidden
}

.portrait:before{
  content:"✦";
  position:absolute;
  top:55px;
  left:48px;
  color:#ffffffa5;
  font-size:2.2rem
}

.portrait:after{
  content:"";
  width:340px;
  height:340px;
  position:absolute;
  right:-100px;
  bottom:-110px;
  border:55px solid #ffffff3c;
  border-radius:50%
}

.doc{
  position:absolute;
  inset:80px 0 0
}

.hair{
  width:160px;
  height:195px;
  position:absolute;
  z-index:1;
  top:18px;
  left:calc(50% - 80px);
  background:#3c2c34;
  border-radius:80px 80px 50px 50px
}

.head{
  width:130px;
  height:154px;
  position:absolute;
  z-index:2;
  top:42px;
  left:calc(50% - 65px);
  background:#efbd91;
  border-radius:50% 50% 44% 44%
}

.head:before{
  content:"⌣";
  position:absolute;
  top:74px;
  left:49px;
  color:#ad5e55;
  font:bold 35px sans-serif;
  transform:rotate(180deg)
}

.head:after{
  content:"•   •";
  position:absolute;
  top:43px;
  left:36px;
  color:#463532;
  font-size:18px;
  letter-spacing:17px
}

.coat{
  width:285px;
  height:265px;
  position:absolute;
  z-index:1;
  top:185px;
  left:calc(50% - 142px);
  background:white;
  border-radius:100px 100px 0 0;
  box-shadow:inset -18px 0 #4a8ba20f
}

.coat:before{
  content:"";
  width:85px;
  height:85px;
  position:absolute;
  top:24px;
  left:100px;
  border:7px solid var(--blue);
  border-top-color:transparent;
  border-radius:50%
}

.coat:after{
  content:"♥";
  position:absolute;
  top:130px;
  right:48px;
  color:var(--coral);
  font-size:1.5rem
}

.float-card{
  position:absolute;
  z-index:5;
  right:-5px;
  bottom:42px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  background:white;
  border-radius:17px;
  box-shadow:0 16px 40px #102f5926;
  font-size:.84rem;
  font-weight:700;
  line-height:1.25
}

.float-card b{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:var(--navy);
  background:var(--gold2);
  border-radius:13px;
  font-size:1.25rem
}

.signature{
  margin:30px 0 5px;
  color:var(--navy);
  font:italic 1.7rem "DM Serif Display",serif
}

.role{
  color:var(--muted);
  font-size:.84rem
}

/* 6. Serviços */
.services{
  position:relative;
  padding:115px 0 125px;
  background:var(--sky);
  overflow:hidden
}

.services:before{
  content:"";
  width:420px;
  height:420px;
  position:absolute;
  top:-190px;
  right:-120px;
  border:75px solid #ffffff73;
  border-radius:50%
}

.heading{
  position:relative;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:58px
}

.heading h2{
  max-width:640px;
  margin-bottom:0
}

.heading p{
  max-width:430px;
  margin-bottom:7px
}

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

.card{
  min-height:345px;
  position:relative;
  padding:34px;
  background:#ffffffc7;
  border:1px solid white;
  border-radius:23px;
  box-shadow:0 15px 35px #102f590f;
  overflow:hidden;
  transition:.3s
}

.card:hover{
  transform:translateY(-8px);
  box-shadow:0 22px 45px #102f591c
}

.card:after{
  content:attr(data-n);
  position:absolute;
  right:21px;
  bottom:-30px;
  color:#102f590a;
  font:8rem/1 "DM Serif Display",serif
}

.card-icon{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  margin-bottom:30px;
  color:var(--navy);
  background:var(--gold2);
  border-radius:22px;
  transform:rotate(-4deg)
}

.card:nth-child(2) .card-icon{
  background:#bfe3dd;
  transform:rotate(4deg)
}

.card:nth-child(3) .card-icon{
  background:#f7c4ba
}

.card-icon svg{
  width:34px
}

.card h3{
  margin-bottom:14px;
  color:var(--navy);
  font-size:1.55rem
}

.card p{
  margin:0;
  color:var(--muted);
  font-size:.94rem
}

/* 7. Jornada de atendimento */
.journey{
  padding:125px 0
}

.journey-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(55px,8vw,105px)
}

.steps{
  position:relative;
  display:grid;
  gap:10px;
  margin-top:35px
}

.steps:before{
  content:"";
  width:1px;
  position:absolute;
  top:30px;
  bottom:30px;
  left:25px;
  background:#3973a82e
}

.step{
  position:relative;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:20px;
  padding:14px 0
}

.step>span{
  width:52px;
  height:52px;
  z-index:1;
  display:grid;
  place-items:center;
  color:var(--navy);
  background:var(--gold2);
  border:6px solid var(--paper);
  border-radius:50%;
  font-weight:700
}

.step h3{
  margin:3px 0 5px;
  color:var(--navy);
  font-size:1.2rem
}

.step p{
  margin:0;
  color:var(--muted);
  font-size:.92rem
}

.space-card{
  min-height:560px;
  position:relative;
  padding:55px 50px;
  color:white;
  background:radial-gradient(circle at 75% 20%,#3973a8cc,transparent 25%),linear-gradient(150deg,#153d6b,var(--deep));
  border-radius:220px 220px 36px 36px;
  box-shadow:var(--shadow);
  overflow:hidden
}

.space-card .stars{
  opacity:.3
}

.quote{
  position:relative;
  z-index:2;
  color:var(--gold);
  font:6rem/.8 "DM Serif Display",serif
}

.space-card blockquote{
  position:relative;
  z-index:2;
  margin:30px 0 38px;
  font:clamp(1.8rem,3vw,2.75rem)/1.25 "DM Serif Display",serif
}

.space-card cite{
  position:relative;
  z-index:2;
  color:#ffffffa0;
  font-size:.85rem;
  font-style:normal
}

.small-planet{
  width:155px;
  height:155px;
  position:absolute;
  right:-24px;
  bottom:-35px;
  background:var(--coral);
  border-radius:50%;
  box-shadow:inset -25px -18px #95483e29
}

.small-planet:before{
  content:"";
  width:205px;
  height:52px;
  position:absolute;
  top:44px;
  left:-28px;
  border:10px solid var(--gold2);
  border-radius:50%;
  transform:rotate(-17deg)
}

/* 8. Contato */
.contact{
  padding:110px 0
}

.contact-box{
  position:relative;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  align-items:center;
  gap:60px;
  padding:clamp(42px,7vw,82px);
  color:white;
  background:var(--navy);
  border-radius:32px;
  box-shadow:var(--shadow);
  overflow:hidden
}

.contact-box:after{
  content:"";
  width:290px;
  height:290px;
  position:absolute;
  right:-70px;
  bottom:-145px;
  border:48px solid #ffffff0f;
  border-radius:50%
}

.contact-box .eyebrow{
  color:var(--gold2)
}

.contact-box h2{
  color:white
}

.contact-box p{
  max-width:600px;
  margin:0;
  color:#ffffffad
}

.contact-action{
  position:relative;
  z-index:2;
  display:grid;
  gap:14px
}

.contact-action .btn{
  width:100%
}

.contact-action small{
  color:#ffffff8f;
  font-size:.75rem;
  text-align:center
}

/* 9. Botão flutuante do WhatsApp */
.whatsapp-float{
  min-width:62px;
  height:62px;
  position:fixed;
  z-index:40;
  right:24px;
  bottom:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 19px;
  color:white;
  background:#25d366;
  border:3px solid white;
  border-radius:999px;
  box-shadow:0 12px 32px #102f5940;
  touch-action:manipulation;
  transition:transform .25s,box-shadow .25s
}

.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 16px 38px #102f5950
}

.whatsapp-float svg{
  width:30px;
  height:30px;
  flex:0 0 auto;
  fill:currentColor
}

.whatsapp-float span{
  font-size:.84rem;
  font-weight:700;
  white-space:nowrap
}

/* 10. Rodapé */
footer{
  padding:68px 0 28px;
  color:#ffffffb5;
  background:var(--deep)
}

.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .7fr .9fr;
  gap:60px;
  padding-bottom:48px
}

footer .brand{
  color:white;
  margin-bottom:19px
}

.footer-intro{
  max-width:380px;
  font-size:.9rem
}

footer h3{
  margin-bottom:17px;
  color:white;
  font:700 .77rem "DM Sans",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase
}

.footer-links{
  display:grid;
  gap:9px;
  font-size:.9rem
}

.footer-links a:hover{
  color:var(--gold2)
}

address{
  font-size:.9rem;
  font-style:normal
}

address p{
  margin-bottom:9px
}

.copyright{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-top:24px;
  border-top:1px solid #ffffff19;
  font-size:.74rem
}

.reveal{
  opacity:0;
  transform:translateY(25px);
  transition:opacity .7s,transform .7s
}

.reveal.visible{
  opacity:1;
  transform:none
}

@keyframes float{
  0%,100%{
  transform:translateY(0) rotate(-5deg)
}

50%{
  transform:translateY(-13px) rotate(3deg)
}

}

/* 11. Responsividade */
@media(max-width:960px){
  .menu{
  display:block;
  position:relative;
  z-index:2
}

.links{
  position:fixed;
  inset:0;
  flex-direction:column;
  justify-content:center;
  gap:28px;
  color:var(--navy);
  background:#fffdf8fa;
  transform:translateX(100%);
  transition:.35s
}

.links.open{
  transform:none
}

.links>a:not(.nav-cta){
  font:400 1.65rem "DM Serif Display",serif
}

.nav-cta{
  padding:14px 24px;
  font-size:1rem
}

header:not(.scrolled) .menu.active{
  color:var(--navy)
}

.hero-grid{
  grid-template-columns:1fr;
  padding-top:155px;
  text-align:center
}

.hero h1,.hero-copy>p:not(.eyebrow){
  margin-left:auto;
  margin-right:auto
}

.actions,.note{
  justify-content:center
}

.about-grid,.journey-grid{
  grid-template-columns:1fr
}

.about-copy{
  order:-1
}

.heading{
  align-items:start;
  flex-direction:column;
  gap:18px
}

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

.card:last-child{
  grid-column:1/-1
}

.contact-box{
  grid-template-columns:1fr
}

.contact-action{
  max-width:340px
}

}

@media(max-width:640px){
  .container{
  width:calc(100% - 28px)
}

h2{
  font-size:clamp(2.25rem,12vw,3.3rem)
}

.brand-copy small{
  display:none
}

/* Ajustes da apresentação em celulares */
.hero{
  min-height:auto
}

.hero-grid{
  gap:20px;
  padding-bottom:120px
}

.hero h1{
  font-size:clamp(3.2rem,17vw,4.8rem)
}

.actions{
  flex-direction:column
}

/* Ajustes da ilustração em celulares */
.visual{
  min-height:380px;
  transform:scale(.78);
  margin:-35px -55px -55px
}

.about,.services,.journey,.contact{
  padding:82px 0
}

.about-grid{
  gap:35px
}

.portrait-wrap{
  min-height:490px;
  transform:scale(.9);
  margin:0 -15px
}

.cards{
  grid-template-columns:1fr
}

.card:last-child{
  grid-column:auto
}

.card{
  min-height:auto;
  padding:28px
}

.space-card{
  min-height:500px;
  padding:42px 30px
}

.contact-box{
  padding:42px 28px;
  border-radius:25px
}

.footer-grid{
  grid-template-columns:1fr;
  gap:38px
}

.copyright{
  flex-direction:column
}

/* Ajustes do WhatsApp em celulares */
body > .whatsapp-float{
  position:fixed!important;
  z-index:9999;
  top:auto!important;
  right:16px!important;
  bottom:16px!important;
  left:auto!important;
  width:56px;
  min-width:56px;
  height:56px;
  margin:0;
  padding:0;
  border-radius:50%;
  transform:translateZ(0);
  -webkit-transform:translateZ(0)
}

body > .whatsapp-float svg{
  width:28px;
  height:28px
}

body > .whatsapp-float span{
  display:none
}

}

@media(max-width:360px){
  body > .whatsapp-float{
    right:10px!important;
    bottom:10px!important;
    width:50px;
    min-width:50px;
    height:50px
  }

  body > .whatsapp-float svg{
    width:25px;
    height:25px
  }

}

@media(prefers-reduced-motion:reduce){
  html{
  scroll-behavior:auto
}

*,*:before,*:after{
  animation-duration:.01ms!important;
  transition-duration:.01ms!important
}

.reveal{
  opacity:1;
  transform:none
}

}

  .portrait.photo:before,.portrait.photo:after{
  display:none
}

.portrait-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top
}