/*========================================================
	Main Style for Naples Vision Of Beauty 2022
=========================================================*/
/* colors declaration */
:root{
  --main-text: #686868;
  --nav-hover: #89f2e9;
  --white: #fff;
  --h1-color: #39b5b3;
  --btn-core-pink: #dd6895;
  --btn-pink-bord: rgba(222, 104, 149, .5);
  --main-green: #3ab6b4;
  --happyBox-green: #89f2e9;
  --footer-bg: #c0f6f8;
  --fooCopy-text: #c5f9f4;
}

/* fonts declaration */
@font-face { font-family: georgiab; src: url('../fonts/georgiab.ttf'); }

/* reset */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, abbr, address, em, img, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, figcaption, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
*:focus {outline: none;}
* {box-sizing: border-box;}
input[type='submit']
{
   -webkit-appearance: none;
   border-radius: 0;
}
/* end reset */

/***********************************************************************************************/

/* common layout sections  - ALL common layouts for frame exist in this section */
body {
  font-size: 21px;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
   color: var(--main-text);
}
p {
    line-height: 1.5;
    font-family: 'Roboto',arial,sans-serif;
    color: var(--main-text);
}


/***********************************************************************************************/

/* common styling */
h1, h2, h3{
  font-family: 'Roboto', arial, sans-serif;
  text-transform: capitalize;
}
h1 {
    text-transform: uppercase;
    font-size: 38px;
    font-weight: 400;
}

h2  {
    font-size: 55px;
    color: var(--main-green);
    font-weight: 500;
}

h3  {
    color: var(--main-green);
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
}
/* end common styling */
@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  h2{
    font-size: 50px;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  h2{
    font-size: 46px;
      font-weight: 400;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  h2 {
  	font-size: 30px;
      font-weight: 400;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  h2 {
  	font-size: 30px;
      font-weight: 400;
  }
}
@media only screen and (max-width: 767px) {
  h2 {
  	font-size: 30px;
      font-weight: 400;
  }
}
@media only screen and (max-width: 479px) {
    h2 {
        font-size: 26px;
    }
}
/*========================================================
									TOP & NAVIGATION
=========================================================*/
/* not display on large screen */
.smobitrigger,
.mnuclose,
.menu ul li.mlogo,
.phoneMob,
.logoMob,
.telMob,
.menu ul li.mphone,
.menu ul li.madr,
.menu ul li.mhours,
.menu ul li.msocial,
.menu ul li.mmlink,
.fooList ul li.mlogo,
.fooList ul li.mphone,
.fooList ul li.madr,
.fooList ul li.mhours,
.fooList ul li.msocial,
.fooList ul li.mmlink,
.scrollinglogosMob,
.bannerTopMobWrap,
.bannerTypesMob,
.mh1Mob {
	display: none;
}
/* end not display */

.pageFull{
  width: 100%;
}
.centerSize{
  width: 69%;
  margin: 0 auto;
}

@media only screen and (min-width: 1920px) and (max-width: 2559px) {
  .centerSize{
    width: 92%;
  }
}
@media only screen and (min-width: 1301px) and (max-width: 1919px) {
  .centerSize{
    width: 85%;
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1300px) {
  .centerSize{
    width: 90%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .centerSize{
    width: 90%;
  }
}
@media only screen and (max-width: 767px) {
  .centerSize{
    width: 90%;
  }
}

/* top section  */
.top {
    width: 100%;
    display: block;
    position: static;
    background: #fff;
}
.boxesWrap {
    width: 96%;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.one {
    width: 5%;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 120px;
}
.two {
   width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;

}
.one img {
    width: 80px;
    display: block;
}
.three {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    height: 120px;
}

.threeDivs{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.thPhone,
.thAddr,
.thHours{
  background-repeat: no-repeat;
  background-size: 36px 36px;
  background-position: left 15px center;
  border-left: 4px solid var(--main-green);
  line-height: 1.2;
  padding-left: 65px;
  text-align: left;
  display: flex;
  align-items: center;
}
.thPhone{
  background-image: url('../images/top-and-footer/icon-top-phone.png');
}
.thAddr{
  background-image: url('../images/top-and-footer/icon-top-location.png');
}
.thHours{
  background-image: url('../images/top-and-footer/icon-top-clock.png');
}
.thPhone a,
.thHours p{
  line-height: 1.2;
}
.thPhone,
.thAddr{
  margin-right: 20px;
}
.thAddr .firSpan{
  display: block;
}
.thHours p span{
  display: block;
}
/*** menu section ***/
.menu ul li.mlink,
.menu ul li.m1link,
.menu ul li.m2link,
.menu ul li.m3link,
.menu ul li.mmlinks {
    display: none;
}

.menu ul li.dlink {
    font-size: 21px;
    line-height: 1;
    display: inline-block;
    text-transform: capitalize;
    padding: 10px 12px;
    font-weight: 400;
    border: 3px solid var(--white);
}
.menu ul li.dlink:hover{
  border-radius: 40px;
  border: 3px solid var(--nav-hover);
}
.menu ul li.dlink a {
    color: var(--main-text);
}
/*** end menu section ***/
/* end top section  */



/*========================================================
									Buttons
=========================================================*/
.shopNowBtn {
  background: var(--btn-core-pink);
	display: inline-block;
	text-align: center;
	cursor: pointer;
	color: var(--white);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
	border: 15px solid var(--btn-pink-bord);
	border-radius: 50px;
  padding: 15px 30px;
}
.naplesBtn {
  background: var(--btn-pink-bord);
	display: inline-block;
	text-align: center;
	cursor: pointer;
	padding: 8px;
	color: var(--btn-white);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
	border-radius: 50px;
}
.naplesBtn span{
  background: var(--btn-core-pink);
  display: block;
  border-radius: 50px;
  padding: 20px 30px;
  color: var(--white);
}
.serviBtnPlace .naplesBtn,
.forComLeft .naplesBtn,
.obaRight .naplesBtn,
.speOffBtnPlace .naplesBtn,
.skinBetBtnPlace .naplesBtn,
.healSecBtnPlace .naplesBtn,
.happySecBtnPlace .naplesBtn{
  width: 240px;
}

/*========================================================
		INDEX BANNER
=========================================================*/
.banNaples {
    background: url('../images/index/banner-top-with-girl.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 700px;
}
.centerNaples{
  width: 95%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 106%;
}
.banNaples h1 {
    color: var(--h1-color);
    text-transform: uppercase;
    font-size: 75px;
    font-weight: 300;
    line-height: 1.1;
}
.banNaples h1 span{
  display: block;
  font-size: 120px;
  font-weight: 400;
}
.banNaplesBtnsPlace{
  margin-top: 120px;
  padding-left: 90px;
}

/*========================================================
		serviWe Index
=========================================================*/
.serviWe{
  padding: 100px 0 140px;
}
.serviWe .centerSize{
  position: relative;
}
.petalImg{
  position: absolute;
  left: 0;
  top: -50px;
}
.petalImg2{
  position: absolute;
  right: 0;
  bottom: -80px;
}
.serviWe h2{
  text-align: center;
}
.serviWeLine{
  width: 145px;
  height: 10px;
  border-top: 10px solid var(--main-green);
  border-radius: 40px;
  margin: 20px auto 0;
}
.serviWeWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 80px;
}
.serviWeBox{
  width: 31%;
}
.serviWeImg{
  position: relative;
}
.serviWeImg img{
  width: 100%;
  height: auto;
}
.serviWeImgTitle{
  background: var(--main-green);
  color: var(--white);
  font-size: 28px;
  font-weight: 500;
  padding: 20px 25px 20px 50px;
  min-width: 310px;
  max-width: 310px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  position: absolute;
  bottom: 4px;
  left: 0;
}
.serviWeList{
  padding: 30px 20px 50px 50px;
  min-height: 392px;
}
.serviWeList ul li {
	font-size: 21px;
	text-align: left;
	line-height: 1.2;
	background: url('../images/index/pic-services-mark-list.png');
	background-position: left top 4px;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	padding: 0 0 16px 50px;
	max-width: 430px;
	margin-bottom: 10px;
}
.serviBtnPlace{
  text-align: center;
}
.serviTitleGr{
  color: var(--main-green);
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 30px;
  text-transform: uppercase;
}
.serviTitleGr span{
  color: var(--main-text);
  font-size: 21px;
  font-weight: 400;
  display: block;
  margin-top: 30px;
  text-transform: none;
}

/*========================================================
		forCom Index
=========================================================*/
.forComWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.forComLeft,
.forComRight{
  width: 50%;
  height: 834px;
}
.forComLeft,
.forComRight{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.forComLeft{
  background-image: url('../images/index/pic-bg-naples-vision.jpg');
}
.forComRight{
  background-image: url('../images/index/pic-naples-vision.jpg');
}
.forComLeft{
  padding: 170px 115px 105px 5%;
}
.forComLeft h2,
.forComLeft p{
  color: var(--white);
}
.whiteLine{
  width: 145px;
  height: 10px;
  border-top: 10px solid var(--white);
  border-radius: 40px;
  margin: 40px 0 50px;
}
.forComLeft p{
  font-size: 27px;
  line-height: 1.5;
}
.forComBtnPlace{
  margin-top: 80px;
  text-align: center;
}

/*========================================================
		obaProd Index
=========================================================*/
.obaWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.obaLeft,
.obaRight{
  width: 50%;
  height: 1000px;
}
.obaLeft{
  background-image: url('../images/index/pic-obagi.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}
.obaRight{
  padding: 175px 10% 120px 95px;
}
.obaLine{
  width: 145px;
  height: 10px;
  border-top: 10px solid var(--main-green);
  border-radius: 40px;
  margin: 40px 0 50px;
}
.obaRight ul li {
	font-size: 27px;
	text-align: left;
	line-height: 1.5;
	background: url('../images/index/pic-circle-bg.png');
	background-position: left top 10px;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	padding: 0 0 16px 50px;
	margin-bottom: 20px;
}
.obaBtnPlace{
  margin-top: 100px;
  text-align: center;
}

/*========================================================
		speOff Index
=========================================================*/
.speOff{
  padding: 140px 0 105px;
}
.speOff .centerSize{
  position: relative;
}
.petal3{
  position: absolute;
  right: 70px;
  top: 70px;
}
.speOff h2{
  text-align: center;
}
.speOffText{
  font-size: 27px;
  line-height: 1.5;
  max-width: 60%;
  margin: 40px auto 0;
  text-align: center;
}
.speOffWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 210px;
}
.speOffBox{
  width: 29%;
  padding: 140px 60px 50px 60px;
  border: 8px solid var(--nav-hover);
  border-radius: 80px;
  position: relative;
}
.speOffImg{
  width: 200px;
  height: 200px;
  padding: 30px;
  border-radius: 50%;
  background: var(--main-green);
  position: absolute;
  top: -105px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.speOffImg img{
  width: 100%;
}
.speOffBox p{
  color: var(--main-green);
  font-size: 37px;
  font-weight: 700;
  text-align: center;
}
.speOffBox p span{
  display: block;
}
.speOffPrice{
  color: var(--btn-core-pink);
  font-family: georgiab, arial, sans-serif;
  font-size: 80px;
}
.speOffNew{
  font-size: 32px;
}
.speOffBox ul{
  margin: 30px 0 20px;
  min-height: 269px;
}
.speOffBox ul li {
	font-size: 27px;
	text-align: left;
	line-height: 1.4;
	background: url('../images/index/pic-circle-bg.png');
	background-position: left top 10px;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	padding: 0 0 16px 40px;
}
.speOffBtnPlace{
  text-align: center;
}


/*========================================================
		skinBet Index
=========================================================*/
.skinBet{
  padding: 0 0 100px;
}
.skinBetWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.skinBetLeft,
.skinBetRight{
  height: 856px;
}
.skinBetLeft{
  width: 46%;
  padding: 160px 95px 130px 10%;
}
.skinBetLeft p{
  font-size: 27px;
  line-height: 1.5;
}
.skinBetBtnPlace{
  margin-top: 150px;
  text-align: center;
}
.skinBetRight{
  width: 54%;
  background-image: url('../images/index/pic-skinbetter.png');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
}

/*========================================================
		healSec Index
=========================================================*/
.healSec{
  background-image: url('../images/index/banner-middle-bg.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 860px;
  padding: 150px 0 100px;
}
.healSecWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.healSec h2{
  color: var(--white);
  font-weight: 700;
}
.healSec h2,
.healSec p{
  text-align: center;
}
.healSecLeft,
.healSecRight{
  width: 36%;
}
.healSecLine{
  width: 145px;
  height: 10px;
  border-top: 10px solid var(--white);
  border-radius: 40px;
  margin: 40px auto 50px;
}
.healSec p{
  font-size: 27px;
  line-height: 1.5;
  color: var(--white);
}
.healSecBtnPlace{
  margin-top: 180px;
  text-align: center;
}

/*========================================================
		happySec Index
=========================================================*/
.happySec{
  padding: 110px 0 120px;
}
.happySec .centerSize{
  position: relative;
}
.petal4{
  position: absolute;
  top: 0;
  left: 300px;
}
.happySec h2{
  text-align: center;
}
.happyLine{
  width: 105px;
  height: 10px;
  border-top: 10px solid var(--main-green);
  border-radius: 40px;
  margin: 20px auto 0;
}
.happySecWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 150px;
}
.happyBox{
  width: 29%;
  padding: 80px 40px 40px 40px;
  border: 8px solid var(--happyBox-green);
  border-radius: 80px;
  position: relative;
  text-align: center;
}
.happyQuote{
  padding: 30px;
  border-radius: 50%;
  position: absolute;
  top: -95px;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.happyRegP,
.happyNameP{
  font-size: 21px;
  line-height: 1.5;
}
.happyNameP{
  color: var(--main-green);
  margin-top: 25px;
  font-weight: 500;
  text-transform: uppercase;
}
.happySecBtnPlace{
  margin-top: 85px;
  text-align: center;
}

/*========================================================
		Footer
=========================================================*/
.footer{
  background: var(--footer-bg);
  padding: 70px 0 90px;
}
.footer .centerSize{
  position: relative;
}
.fooWrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.fooCol1{
  width: 35%;
  margin-right: 100px;
}
.logoFoo{
  margin-bottom: 30px;
}
.logoFoo img{
  width: 100%;
}
.fooCol1BtnPlace{
  margin: 75px 0;
  text-align: center;
}
.socialSectionNew{
  display: flex;
  justify-content: center;
}
.socialSectionNew img{
  width: 85px;
  margin: 0 15px;
}
.fooLine{
  width: 80px;
  height: 10px;
  border-top: 10px solid var(--main-green);
  border-radius: 40px;
  margin: 30px 0 35px;
}
.fooCol2{
  width: 15%;
}
.fooCol3{
  width: 15%;
}
.fooCol4{
  width: 20%;
}
.fooCol2,
.fooCol3,
.fooCol4{
  margin-top: 40px;
}
.fooCol2 ul li{
  text-transform: capitalize;
  margin-bottom: 15px;
}
.fooAddr{
  margin-bottom: 30px;
}
.fooAddr p span{
  display: block;
}
.hoursFoo{
  margin-bottom: 30px;
}
.saturFoo p{
  text-transform: capitalize;
}
.saturFoo p span{
  display: block;
}
.pentalsFoo{
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 700px;
}
.fooCopy{
  background: var(--main-green);
  padding: 40px 0;
  text-align: center;
}
.fooCopy p{
  color: var(--fooCopy-text);
}