@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Protest+Revolution&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*
{
padding:0;margin:0;
text-decoration:none;
list-style:none;
box-sizing:border-box;
font-family:"Lora";
}

html 
{
scroll-behavior:smooth
}

/******************
Topo da Navegação*/
.Topo-Header
{
width:100%;
padding:15px 0;
background:#44DDCC;
display:flex;
}

.Topo-Header 
.Secondary-Header
{
display:flex; 
justify-content:space-between;
align-items:center;
flex-wrap:wrap; 
width:1024px;
margin:0 auto;  
gap:15px;
}

.Topo-Header 
.Secondary-Header
.Navigation
{
display:flex;
}

.Topo-Header 
.Secondary-Header 
.Navigation 
.list-item 
{
padding:10px;
margin:0 10px;
}

.Topo-Header
.Secondary-Header 
.Navigation 
.list-item 
.item
{
color:#fff;
font-style:italic;
position:relative;
padding:6px 0;
}

.Topo-Header
.Secondary-Header 
.Navigation 
.list-item 
.item::before
{
content:"";
position:absolute;
height:1px; 
width:3px;
background:#fff;
bottom:0;
}

.Topo-Header
.Secondary-Header 
.Navigation 
.list-item 
.item:hover::before
{
width:100%;
transition:.2s ease-in; 
}

/********************
Fim da Navegação*/

.color-dark
{
color:#111;
}

h2
{
padding:10px;
display:flex;
align-items:center;
}

h2 
img 
{
width:30px;    
}

span
{
color:#fff;
}

.Container-Content 
{
display:flex;
align-items:center;
width:100%;
height:80vh;
background:url(../assets/recepcao.png);
background-attachment:fixed;
background-size:cover;
}

.Container-Content 
.Content 
{
width:100%;    
max-width:1024px;
margin:0 auto;
display:flex;
}

.Container-Content 
.Content 
h3
{
color:#fff;
font-size:40px;
font-weight:normal;
max-width:512px;
width:100%;
}

.Container-Central
{
width:100%;
max-width:1300px;
padding:40px 0;
margin:0 auto;
}

.Container-Central 
.Container 
{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
margin:20px 0 0 0; 
}

.Container-Central 
.Container 
p 
{
color:#575757;
font-size:17px;
}

.Container-Central 
.flexible
{
display:flex;
flex-direction:row;
}

.heading-style 
{
font-size:30px;       
}

.Heading-CamelCase
{
text-transform:uppercase;
font-weight:normal;
}

.Container-Central .Container h2,
.Container-Central .Container div ul li 
{
color: #575757;
padding:5px;
list-style:disc;
margin:10px 0 0 0;
}
 
iframe
{
margin:12px 0;    
width:100%;
}

.Container-Cards 
{
display:flex;
margin:12px 0;
width:100%;
justify-content:center;
flex-wrap:wrap;
padding:10px;
gap:12px;
}

.Container-Cards 
.Cards
{
box-shadow:2px 3px 2px #e7e7e7;  
margin:0 5px; 
text-align:center;
border-radius:10px;
width:300px;
}

.Container-Cards 
.Cards 
img 
{
width:100%;
}

.Container-Cards 
.Cards 
p 
{
padding:10px;
text-transform:uppercase;
}

.Container 
.paragraph-contact
{
margin:10px 0;
color:#8d8d8d !important;
}

button{
border:none;
background:transparent;
}

button 
a
{
border:none;    
padding:12px;
background:#44DCCC;
cursor:pointer;
width:170px;
font-size:17px;
display:block;
margin:10px 0;
}

button 
a 
{
color:#fff;
}

button a:hover  
{
color:#44DCCC;
transition:.1s linear;
background:#fff;
box-shadow:3px 2px 3px inset #c7c7c7;
}
 
.font-fort
{
color:gray;
font-weight:bold;    
}

.Rodape-Contact
{
background:#376365;
padding:10px;
text-align:center;
}

.Rodape-Contact 
p
{
color:#fff;
margin:15px 0;
font-size:17px;
}

.Rodape-Contact h2
{
justify-content:center;
}


@media only screen and 
(min-width:280px) and (max-width:468px)
{

.Container-Content 
{
height:350px;    
background-position:center;
}    

.Topo-Header
.Secondary-Header
.Navigation 
.list-item 
{
margin:0 12px;
padding:0;
}        

.Topo-Header,
.Secondary-Header
{
justify-content:center !important;    
} 

.Topo-Header 
.Secondary-Header 
.Navigation
{
border-top:1px outset #fff;
width:100%;
justify-content:center;
margin:0 10px;
padding:15px; 
}

.flexible
img 
{
display:none;
}    

.Container-Cards 
.Cards
img 
{
width:100%;
height:250px
}

.Container 
div 
ul
{
display:flex;
flex-direction:column;
padding:0 50px;
}

.Container div 
ul 
li 
{
font-size:18px;
margin:0;
}

h2,
p 
{
line-height:35px;    
text-align:center;
}

.Container-Cards .Cards{
width:300px;
height:300px;
}

h3 
{
font-size:35px !important; 
}

.Container-Cards 
.Cards 
p
{
font-size:16px;
padding:5px;
}

}

@media only screen and (min-width:469px) and (max-width:768px)
{

.Container-Content 
{
background-position: right;
height:438px;    
}    

.Container
{
padding:10px;
}

.Container-Cards 
{
height:100%;
}

.font-fort
{
color:#5bb4b7;
}

h2
{
font-weight:normal;
text-transform:uppercase;
}

h2,
p
{
text-align:center;
}

.Heading-CamelCase
{
text-align:left;    
}

}


@media only screen and (min-width:769px) and (max-width:1024px)
{

.Topo-Header 
{
border-bottom:1px solid #fff;    
}    

.Container
{
padding:10px;
}  

.RodapeParagraph
{
display:flex;
}

.RodapeParagraph 
p 
{
box-shadow:2px 3px 3px #185353;
padding:10px;
margin:0 5px;   
}

}

@media not screen{

.Topo-Header,
.Rodape-Contact{
background:transparent
}  
  
.Topo-Header .Navegação 
.list-item   .item 
{
color:#111;    
}

h2,
h3,
p,
span
,
ul 
li,
ul 
li 
a
{
color:#111;
}

.paragraph-contact 
{
color:#111;
}

}