@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:banner-principal-interna0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}

* {    margin: 0;    padding: 0;font-family: 'Roboto', sans-serif;    box-sizing: border-box; }
p{font-size: 18px; line-height: 140%; font-weight: 300; }
h3{font-weight: 500;}
.alinha{ max-width: 1280px;   margin: 0 auto;   width: 100%;}
body {  }
header {  position: absolute;  top: 0;  left: 0;  width: 100%;  z-index: 1;  display: flex; flex-direction: column;  justify-content: center;  align-items: center; background-color: #003584; }
header div {  background-color: #003584;  width: 100%;  max-width: 1280px;	min-height: 85px;  display: flex;flex-direction: column;  justify-content:space-between;  align-items: center; }
nav ul{ display: flex; flex-direction:column; list-style: none;  }
nav ul li{ margin:0px 10px; width: 100%;  }
nav ul li:hover{}
header nav ul li a:link{text-decoration:none; font-size: 1.0em;color: #fff;padding: 10px 20px;   }
header nav ul li a:visited{text-decoration:none; color:#fff;}
header nav ul li a:hover{text-decoration:none; color:#000; background-color: #fef002; }
header nav ul li a:active{text-decoration:none; color:#fff;}
header div img{ width: 100%; height: auto; display: block; max-width: 250px}

.banner-principal {position: relative; display: flex; justify-content: flex-start; align-items: center;  width: 100%; height: 700px; background-image: url("../imagens/limpeza-e-faxina-florianopolis-celular.jpg"); background-position: right center;background-size: cover;}
.banner-principal h1{  font-size: 2em; text-transform: uppercase; margin-bottom: 20px; line-height: 100%;color: #000 }
.banner-principal p{  font-weight: 500; color: #000; }
.banner-principal {    position: relative;    width: 100%;    height: 750px;    overflow: hidden; color: #000 }
.banner-principal img {	width: 100%; height: auto;}
.banner-principal > div div { max-width: 650px; margin: 30px;}
.banner-interna {position: relative; display: flex; justify-content: flex-start; align-items: center;  width: 100%; height: 300px; background-image: url("../imagens/limpeza-e-faxina-florianopolis-celular.jpg"); background-position: right center;background-size: cover;}

.logo{padding: 15px; max-width: 250px;}
.logo img{width: 100%; height: auto}

.box-home{ position:relative;  margin-top: -50px; }
.box-home ul{display: flex; flex-direction: column; background-color: #fff;   width: 96%; max-width: 1250px; list-style: none; margin:-70px 2% 0; border-radius: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);padding: 10px  }
.box-home ul li{ margin: 1%; padding:40px 20px; width: 99%; background-color: #003584;border-radius: 10px;}
.box-home ul li:hover{  background-color: #fef002;}
.box-home ul li:hover h3{  color: #000; }
.box-home ul li:hover p{  color: #000; }
.box-home ul li h3{ color: #fef002;margin-bottom: 10px;   }
.box-home ul li p{ color: #fff;}

.servicos-home{display: flex; flex-direction: column; padding: 60px 0;}
.servicos-home > div{width: 100%; text-align: right;display: flex; align-items: center; justify-content: flex-end}
.servicos-home div > img{width: 100%; height: auto; max-width: 500px; }
.servicos-home ul li{ padding:20px 30px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); margin: 2%;max-width: 500px;border-radius: 10px;}
.servicos-home ul{ list-style: none; width: 100%;text-align: left}
.servicos-home ul li h3{  margin-bottom: 10px; font-size: 1.52em; font-weight: 400; color: #003584;}

.servicos-home ul li p{  display: flex; flex-direction: row; align-items: center; justify-content: flex-start}
.servicos-home ul li p img{  margin-right: 8px;}

.frase{background-color: #fef002; display: flex; flex-direction: column; padding:40px 20px 0; align-items: center; justify-content: center}
.frase h2{font-family: 'Roboto', sans-serif;  font-size: 28px;   font-weight: 300;  font-style: normal; text-align: center}
.frase p{ text-align: center}

.rodape{ display: flex; flex-direction: column; justify-content: space-around;   min-height: 350px;padding: 60px 20px; color: #fff; }
.rodape > div {width:96%; margin: 2%;}
.rodape > div ul li { padding: 6px 0;}
.rodape > div h3 { padding: 0px 0 10px; font-size: 2em;}

footer {  background-color: #003584;}
footer h3 { color: #fef002;}
footer a:link{text-decoration:none; position: relative;   width: 100%; height: 50px; text-align: center; padding: 10px 0; color: #fff; text-transform: uppercase}
footer a:visited{text-decoration:none; position: relative;color: #fff;}
footer a:hover{ text-decoration:none;position: relative;   color: #fef002;}
footer a:active{text-decoration:none; position: relative; color: #fff;}
footer ul{ list-style: none}
.direitos{ text-align: center; padding: 10px;background-color: #fef002;}

a.lerMais:link{ position: relative;   width: 100%; height: 50px; text-align: center; padding: 10px 30px; border-radius: 30px; color: #fff; text-transform: uppercase; background-color: #003584; top: 20px; text-decoration: none; font-size: 14px;}
a.lerMais:visited{ position: relative;color: #fff;}
a.lerMais:hover{ position: relative;   color: #fef002;}
a.lerMais:active{ position: relative; color: #fff;}

a.vejaMais:link{ position: relative;   width: 200px; height: 40px; text-align: center; padding: 10px 30px; border-radius: 30px; color: #fff; text-transform: uppercase; background-color: #003584; top: 20px; text-decoration: none; font-size: 14px;}
a.vejaMais:visited{ position: relative;color: #fff;}
a.vejaMais:hover{ position: relative;   color: #fef002;}
a.vejaMais:active{ position: relative; color: #fff;}

a.linkCanvas:link{ position: relative;   width: 200px; height: 40px; text-align: center; padding: 5px 10px; border-radius: 30px; color: #fff; text-transform: uppercase; background-color: #003584;  text-decoration: none; font-size: 14px;}
a.linkCanvas:visited{ position: relative;color: #fff;}
a.linkCanvas:hover{ position: relative;   color: #fef002;}
a.linkCanvas:active{ position: relative; color: #fff;}

a.telefone-rodape:link{ position: relative;   color: #fef002; font-size: 36px; padding: 20px 0;display: block; text-align: left}
a.telefone-rodape:visited{ position: relative;color: #fef002;}
a.telefone-rodape:hover{ position: relative;   color: #fff;}
a.telefone-rodape:active{ position: relative; color: #fef002;}
.midias{ display: flex; flex-direction: row;  margin-top: 20px; }
.midias li{ position: relative; display: block;  margin-right: 20px; margin-top: 10px; }

.whats{position: fixed; right: 20px; bottom: 20px; background-color: #25d366; border-radius: 50%; padding: 10px;}
.menu-toggle .material-icons {  font-size: 40px;   color: #fff;  }
.menu-toggle {display:block;background:none;border:none;font-size:48px;color:#003584;position:absolute;right:20px;top:20px;z-index:999;cursor:pointer;}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 40px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  color: #003584; /* ajuste se o fundo for azul escuro */
}
@media (max-width: 1024px) {
  .menu-toggle {    display: block;  }
  nav ul {display: block;flex-direction: column;background-color: #003584;width: 100%;position: absolute;top: 85px;left: 0;box-shadow: 0 4px 8px rgba(0,0,0,0.1);  }
  nav ul.active {    display: flex;  }
  nav ul {display: none;flex-direction: column;width: 100%;position: absolute;top: 85px;left: 0;box-shadow: 0 4px 8px rgba(0,0,0,0.1);align-items: center;   }
  nav ul li {    text-align: center;    width: 100%;   }
  header nav ul li a:link {    display: block;    width: 100%;    padding: 15px 0;  }
}

.sobre{ padding: 30px 20px; text-align: center}
.sobre h1{ font-size: 2.5em; margin-bottom: 30px; line-height: 100%; color: #003584;}
.sobre p{  margin-bottom: 10px;}
.sobre h2{ font-size: 2em; margin: 20px 0; line-height: 100%; color: #003584;}

.como{ padding: 50px 20px;}
.como  ul{ list-style: none;  display: flex; flex-direction: row; flex-wrap: wrap; text-align: center}
.como  ul li{  display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin: 10px 2%; width: 96%; background-color: #f9f9f9; padding: 30px 20px;}
.como  ul li img{ margin-right: 10px;}
.como  h2{ font-size: 3em; margin-bottom: 10px; color: #003584; font-weight: 300; text-align: center;  }

.planos{ padding: 50px 20px;display:flex; background-color:#f9f9f9; flex-direction:column; justify-content:center; align-items:center; }
.planos h2{ font-size: 3em; margin-bottom:20px; text-align: center }
.planos > ul > li{position: relative;  background-color: #003584; color: #fff; padding: 50px 20px;  margin: 15px; width: 320px;   }
.planos > ul{ list-style: none; display: flex; flex-direction: column }
.planos > ul  h3{  margin-bottom: 15px;    }
.planos > ul ul { list-style: none;}
.planos > ul ul li {  border-bottom: solid thin #c1b705; padding: 8px 0;}
.planos > ul ul li:last-child {  border-bottom:none; }
.preco{  padding: 10px; }
.preco span{ font-weight: 700; font-size: 1.6em;  color:#fef002; }

.diferenciais{ padding: 50px 20px;background-color: #f9f9f9;display: flex; flex-direction: column; justify-content: center; align-items: center; }
.diferenciais div > ul{ list-style: none; }
.diferenciais div > ul li{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; margin-bottom: 10px; }
.diferenciais div > ul li img{ margin-right: 10px;}
.diferenciais  h2{ font-size: 3em; margin-bottom: 10px; color: #003584; font-weight: 300; text-align: center;  }
.diferenciais > div > img{ width: 100%; height: auto; max-width: 500px;}


.intro-servico{ padding: 20px 20px;background-color: #f9f9f9; }
.intro-servico div div h1{ font-size: 2.5em; margin-bottom: 10px; line-height: 100%; color: #003584; }
.intro-servico div div h2{ font-size: 1.5em; margin-bottom: 10px;   }
.intro-servico > div{ display: flex; flex-direction: column; align-items: center; }
.intro-servico > div div{ padding: 20px; width: 100%;}
.intro-servico > div div img{ width: 100%; height: auto;}

.servicos {padding: 30px 20px;}
.servicos > div{display: flex; flex-direction: column; flex-wrap: wrap;}
.servicos > div div{ width: 96%; margin: 2%; padding: 40px 20px;background-color: #fef002; }
.servicos > div h3{ margin-bottom: 20px; color: #003584; font-size: 2em; }
.servicos  h2{ text-align: center; font-size: 2em; max-width: 650px; margin:20px auto;color: #003584; font-weight: 300; }
.servicos > div ul{ list-style: none}

.box-serv ul li{display: flex; flex-direction: row; align-items: center; justify-content: flex-start }
.box-serv ul li img{margin-right: 10px; }
.box-serv p{margin-top: 10px; }

.box-airbnb{ padding: 40px 10px 40px;background-color: #f9f9f9; background-image: url("../imagens/limpeza-florianopolis.png"); background-position: bottom right; background-repeat: no-repeat;}
.box-airbnb > div{ width: 100%;background-color:rgba(255,255,255,0.93); padding: 80px 20px 90px; margin: auto}
.box-airbnb > div h2{ text-align:left; font-size:2em; max-width:650px;  color:#003584; font-weight:300; margin-bottom:30px; }
.ulAirbnb{ margin: 15px 0; }
.ulAirbnb li img{margin-right: 10px; }
.ulAirbnb li{display: flex; flex-direction: row; align-items: center; margin: 5px 0; }

/* MEDIA QUERIES */
/* Mobile */
@media (max-width: 767px) {
    /* Estilos para dispositivos móveis */
}
/* Tablets Portrait */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Estilos para tablets em modo retrato */
}
/* Tablets Landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* Estilos para tablets em modo paisagem */
}
/* Desktop */
@media (min-width: 1025px) {
    /* Estilos para desktops */
	.box-home ul{ flex-direction: row;   width: 100%; max-width: 1250px;margin:-70px auto 0;  }
    .box-home ul li{ margin: 1%; padding:40px 20px; width: 32%;  }
	.servicos-home{flex-direction: row; padding: 60px 0;}
    .servicos-home > div{width: 50%; text-align: right; align-items: center; justify-content: flex-end}
    .rodape{  flex-direction: row;  min-height: 350px;padding: 60px 20px;  }
    .rodape > div {width:29%;}
    .frase{  flex-direction: row; padding: 0;  }
	.frase h2{font-size: 48px;  }
	.banner-principal { background-image: url("../imagens/limpeza-e-faxina-florianopolis.jpg");}
	.banner-principal h1{  font-size: 3em;  }
	nav ul{  flex-direction: row;  }
	header div { flex-direction: row;  }
    header nav ul li a:link{padding: 30px 20px;   }

	.servicos > div{ flex-direction: row; }
    .servicos > div div{ width: 46%;  }
	.servicos {padding: 70px 20px;}
	.servicos  h2{  font-size: 2.8em;  }
	.intro-servico div div h1{ font-size: 3.5em; margin-bottom: 10px;  }
    .intro-servico div div h2{ font-size: 2em; margin-bottom: 10px;   }
    .intro-servico{ padding: 50px 20px;background-color: #f9f9f9; }
	.intro-servico > div{  flex-direction: row; align-items: center;}
	.intro-servico > div div{   width: 50%;}
	.intro-servico div div h1{ font-size: 4.5em;  }
    .intro-servico div div h2{ font-size: 2em;    }
    .diferenciais{  flex-direction: row;  }
    .como  ul li{   flex-direction: row;  margin: 10px 2%; width: 46%;  padding: 30px 20px;}
	.box-airbnb > div{ width: 70%; padding: 80px 40px 90px; margin: auto}
	.sobre{ padding: 80px 20px; }
	.box-airbnb > div h2{  font-size:2.8em; margin-bottom:30px; }
	.box-airbnb{ padding: 40px 20px 40px;}
	.box-airbnb > div{ padding: 80px 40px 90px;}
	a.lerMais:link{font-size: 18px;}
	.planos{ padding: 80px 20px;   }
	.planos > ul {  flex-direction: row}
    .menu-toggle {display:none;}
}