*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

body{
transform-origin: 0 0; 
margin: 0;
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* TOP BAR */
.topbar{
height:64px;
border-bottom:1px solid #e0e0e0;
display:flex;
align-items:center;
padding:0 24px;
gap:20px;
}

.logo_texto{
font-size:18px;
 font-family: 'Roboto', sans-serif;
   font-weight: 500;
color:#5f6368;
}



.img_logo
{

    width: 30px;
    height: 30px;
}

.menu{
  display: flex;
  justify-content: center;
  height: 30px;
  padding: 6px;
  

}
.menu_container
{
display:flex;
justify-content: space-between;
color:#5f6368;
font-size:12px;
font-family: 'Roboto', sans-serif;
   font-weight: 500;
  width: 270px;

}


.menu span{
cursor:pointer;
height: 30px;
}

.container-logo {
  display: flex;
  justify-content: center; /* centraliza horizontal */
  align-items: center;     /* centraliza vertical */
  gap: 10px;    
  height: 30px;   
  padding: 15px;
  
}

.menu span.active{
color:#188038;
font-weight:500;
border-bottom:3px solid #188038;

}
.app_texto
{
    font-weight: 600;
    font-size: 60px;
}



.img_app_desktop
{
    border-radius: 25px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-size: 30px;
    width: 250px;
    height: 250px;
}
.img_app_mobile
{
    border-radius: 25px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-size: 30px;
    width: 250px;
    height: 250px;
    display: none;
}

.app-header{
display:flex;
justify-content: space-between;

}








.dev{
color:#0D8D67;
margin-top:6px;
font-size:16px;
font-weight: 550;
}
.install-btn{
background:#0D8D67;
border:none;
color:white;
padding:12px 38px;
 font-family: 'Roboto', sans-serif;
   font-weight: 500;
border-radius:8px;
cursor:pointer;
}

.install-btn:hover{
background:#0a6449;
}

.app_btn
{

  display: flex;
  justify-content: flex-start;
}
.texto_descricao
{

      font-family: 'Roboto', sans-serif;
   font-weight: 400;
   font-size: 12px;
   padding-bottom: 20px;
   padding-top: 20px;
   color:#5f6368;
}
.texto_negrito
{

  
      font-family: 'Roboto', sans-serif;
   font-weight: 500;
   font-size: 20px;
   
   
   color:black;
}
.texto_negrito2

{

 font-family: 'Roboto', sans-serif;
   font-weight: 500;
   font-size: 13px;
   color:black;


}


.texto_descricao2
{

      font-family: 'Roboto', sans-serif;
   font-weight: 400;
   font-size: 12px;
   padding-bottom: 10px;
   padding-top: 5px;
   color:#5f6368;
}



.btn_container
{

  display: flex;
  
  
}

.img_icon
{

  width: 15px;
  height: 15px;
  margin: 5px;
}
.btn_container button
{

  background-color: transparent;
   color:#0D8D67 ;
   border: none;
   font-size: 12px;
   padding:12px 38px;
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
   display: flex;
   justify-content: space-between;
   align-items: center;
}


/* SCREENSHOTS */
.galeria_main{
display:flex;
gap:16px;
margin-top:40px;
 overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* scroll suave no iPhone */
    touch-action: pan-x;

    
    scrollbar-width: none; /* Firefox */
}

/* Chrome, Edge, Safari */
.galeria_main::-webkit-scrollbar{
    display: none;
}



.phone{
width:160px;
height:300px;
background:#1a73e8;
border-radius:14px;
}
.img_galeria
{
   width:160px;
height:300px;
border-radius:14px;
}


/* SIDEBAR */
.sidebar-title{
font-size:16px;
font-weight:500;
margin-bottom:20px;
}

.similar{
display:flex;
flex-direction:column;
gap:18px;
}

.similar-app{
display:flex;
align-items:center;
gap:12px;
}



.img_icone
{
  border-radius:10px;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
width:50px;
height:50px;

}


.similar-name{
font-size:14px;
}

.rating{
font-size:12px;
color:#5f6368;
}


.apps_container2
{

    margin: 10px;
    display: block;
    justify-content: space-between;
}
.btn_comunicacao
{

    display: flex;
    gap: 10px;
}

.btn_comunicacao button
{
    
    border-radius: 25px;
    padding: 10px;
    color: #504f4f;
    border: solid 1px #b6b6b6;
    margin-top: 10px;
    margin-bottom: 10px;
    
    background-color: white;
     font-family: 'Roboto', sans-serif;
   font-weight: 500;
}

/* DATA SAFETY CARD */
.card{
margin-top:16px;
border:1px solid #dadce0;
border-radius:12px;
padding:18px;
background:white;
}



.card-row{
display:flex;
gap:14px;
margin-bottom:14px;
font-size:12px;
color:#5f6368;
 font-family: 'Roboto', sans-serif;
   font-weight: 400;
}

.icon{
width:24px;
height:24px;
border-radius:6px;
background:transparent
}


/*comentarios===========*/
.comentarios_container {
  width: 100%;
  
}

.comentarios {
  background: #fff;
  padding: 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  width: 100%;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
   font-size: 12px;

}

.header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}

.header h4 {
  margin: 0;
  font-size: 14px;
}

.stars {
  color: #34a853;
  font-size: 14px;
}

.stars span {
  color: #777;
  margin-left: 8px;
  font-size: 12px;
}

.comentarios p {
  font-size: 14px;
  color: #333;
  margin: 12px 0;
}

.footer {
  font-size: 12px;
  color: #777;
}

.buttons {
  margin-top: 8px;
}

.buttons button {
  border: 1px solid #ddd;
  background: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  margin-right: 8px;
  cursor: pointer;
}

.buttons button:hover {
  background: #f1f3f4;
}


/*FOOOTER*/
.container_footer {
  
  padding: 40px 20px;
  font-family: Arial, sans-serif;
  color: #5f6368;
}

.footer-top {
  display: flex;
  gap: 80px;
  max-width: 900px;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
  margin: auto;
}

.col {
  display: flex;
  flex-direction: column;
}

.col h4 {
  font-size: 14px;
  color: #202124;
  margin-bottom: 10px;
}

.col a {
  text-decoration: none;
  color: #5f6368;
  font-size: 13px;
  margin: 4px 0;
}

.col a:hover {
  text-decoration: underline;
}

.footer hr {
  margin: 30px auto;
  max-width: 900px;
  border: none;
  border-top: 1px solid #dadce0;
}

.footer-bottom {
  max-width: 900px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.links a {
  margin-right: 15px;
  text-decoration: none;
  font-size: 12px;
  color: #5f6368;
}

.links a:hover {
  text-decoration: underline;
}

.country {
  font-size: 12px;
}
.texto
{
  color: #636363;
  font-size: 14px;
}


/*
.app_info_container
{

    display: block;
    
}
*/

.container {
  max-width: 1100px;
  margin: auto;
  padding: 20px;
}

/* HEADER */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

/* LADO ESQUERDO */
.app-header > div {
  flex: 1;
}
.app_texto {
  font-size: 28px;
  font-weight: bold;
}

.dev {
  color: #0f9d58;
  margin: 5px 0;
}

.texto {
  color: #666;
  margin-bottom: 10px;
}

/* STATS */
.stats {
  display: flex;
  gap: 20px;
  font-size: 12px;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
color:#5f6368;
  margin: 15px 0;
}
.texto_clas
{

   font-size: 12px;
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
   color: #202124;
}
.app_main
{

  display: flex;
  gap: 10px;
}
.classificacao
{
    display: block;
    text-align: center;
    
}
.img_iconclas
{

  width: 10px;
  height: 10px;
}
.container_galeria
{

  display: flex;
  justify-content: start;
  gap: 5px;
}


@media (max-width: 768px) {
.apps_container2
{

    margin: 10px;
    display: flex;
    justify-content: space-between;
}

.container_galeria
{

  display: block;
  justify-content: start;
}

.footer-top {
  display: flex;
  gap: 80px;
  max-width: 100%;
   font-family: 'Roboto', sans-serif;
   font-weight: 400;
  margin: 0;
}
.container {
  width: 100%;
  margin: 0px;
  padding: 0px;
}



.img_app_desktop
{
    border-radius: 25px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-size: 30px;
    width: 250px;
    height: 250px;
    display: none;
}
.img_app_mobile
{
    border-radius: 25px;
     box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    font-size: 30px;
    width: 90px;
    height: 90px;
    display: flex;
}
.app_texto
{
    font-weight: 600;
    font-size: 25px;
}


.app-header{
display:flex;
justify-content: space-between;
gap:10px;
}
.stats{
display:flex;
justify-content: space-between;
gap:10px;
margin-top:0px;
color:#5f6368;
font-size:12px;
}
.img_iconclas
{

  width: 10px;
  height: 10px;
}



.dev{
color:#0D8D67;
margin-top:0px;
font-size:16px;
font-weight: 550;
}

.container{
max-width:1200px;
margin:auto;
padding:40px 24px;
gap:60px;
}

.logo_texto{
font-size:15px;
font-weight:600;
color:#5f6368;
}
.img_logo
{
   width: 30px;
   height: 30px;

}


.menu{
  display: flex;
  justify-content: center;

}
.menu_container
{
display:flex;
justify-content: space-between;
color:#5f6368;
font-size:13px;
font-weight: 550;
  width: 270px;
}

.topbar{
height:75px;
border-bottom:1px solid #e0e0e0;
display:block;
padding: 5px;
align-items:center;
}

.container-logo {
  display: flex;
  justify-content: left; 
  align-items: center;     /* centraliza vertical */
  gap: 10px;    
  height: 30px;   
  padding: 15px;
  
}

.app_btn
{

  display: block;
  justify-content: space-between;
}
.container{
width:100%;
margin:0;


}

.app-header{
display:block;
justify-content: space-between;

}


 .app-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .img_app_desktop {
    display: none;
  }

 
  .app_texto {
    font-size: 22px;
  }


  .install-btn {
    width: 100%;
    margin-bottom: 10px;
  }

  .btn_compartilhar,
  .btn_add {
    display: block;
    margin: 5px 0;
  }
.galeria_main{
display:flex;
gap:16px;
margin-top:40px;
 overflow-x: auto;
    -webkit-overflow-scrolling: touch; 
    touch-action: pan-x;

    
    scrollbar-width: none; 

}

.btn_container
{

  display: flex;
  justify-content: flex-end;
    gap: 10px;
}
.btn_container img
{

  width: 20px;
  height: 20px;
}


.btn_container button
{

  background-color: transparent;
   color:#0D8D67 ;
   border: none;
   font-size: 11px;
   font-weight: 550;
   padding:12px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 

}

}