@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500&family=Kaushan+Script&family=Roboto:ital,wght@0,100;0,400;0,500;1,100;1,400;1,500&display=swap');

:root {
    --color-neutral-0: #1764bd; /* cor de fundo do footer*/
    --color-neutral-10: #171717;
    --color-neutral-30: #a8a29e;
    --color-neutral-40: #f5f5f5;
}


body{
    background-color: rgb(255,255,255);
    overflow-x: hidden !important; /* evita a barra de rolagem horizontal*/
    margin: 0;
    padding:0;
    height: 100vh;
    width: 100vw;
  }

*{
    margin: 0; padding: 0;
    box-sizing: border-box;
    font-family: "inter", sans serif;
    text-decoration: none;
    letter-spacing: 1px;
}

main{
    height: 80vh;

}

/*  SECTIONS  */
.section {
	clear: both;
  padding: 0px;
	margin: 1px;
}



header{
    position: fixed;
    top: 0; left: 0; right: 0;
    background:  #ffffff;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    padding:  0px 7%;
    display:  flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

header img{
    width: 23%;
    position:relative;

}

header .logo{
    font-weight: bolder;
    font-size: 25px;
    color: #333;
    align-items: left;
    justify-content: space-between;
    z-index: 1000;
}

header .navbarx ul{
    list-style: none;
}

header .navbarx ul li{
    position: relative;
    float: left;
  
}

header .navbarx ul li a{
    font-size: 17px;
    padding: 20px;
    color: #000000; /* cor da fonte menu principal*/
    display: block;
    
}

header .navbarx ul li a:hover{
    background: #00bcd4;
    color: #fff;
    
}


header .navbarx ul li ul{
    position: absolute;
    left: 0;
    width:  200px;
    background:  #2c72da; /* cor de fundo submenu */
    display: none;
    z-index: 1000;
}

header .navbarx ul li ul a{
    font-size: 17px;
    padding: 20px;
    color: #fcf9f9; /* cor da fonte menu principal*/
    display: block;
}

header .navbarx ul li ul li{
    width:  100%;
    border-top: 1px solid rgb(0, 0, 0, .1);
    
}

 
header .navbarx ul li ul li ul{
    left: 200px;
    top:0;
}

header .navbarx a::after{
    content: " ";
    width: 0%;
    height: 4px;
    background-color: #2926d6;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.5s ease-in-out;
}

header .navbarx a:hover::after{
    width:100%;
}




header .navbarx ul li:focus-within > ul,
header .navbarx ul li:hover > ul{
    display: initial;
}


#menu-bar {
    display: none;
font-size: 10px;
color: #00ff00;
}

header label{
    	font-size: 20px;
	color: #000;
	cursor:pointer;
	display: none; /* esconde o nome menu no modo normal */
    
}

.navigation {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
  }

 




/*  COLUMN SETUP  */
.col {
	display: block;
	float: left;
  padding: 22px;
	margin: 1% 0 1% 0.8%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}




section.slider{
  margin: 0 auto;
  height: 50%px;
  width:785px;
  
  
  padding:  0px !important;
  overflow: hidden;
}

.slider-content {
  width: 400%;
  height: auto;
  display: flex;
}

.slider-content input, .img-mobile{
  display: none;
}

.slide-box{
  width: 25%;
  height: auto;
  position: relative;
  text-align: center;
  transition: 1s;

}

.slide-box img{
  margin-top: 9%;
  width: 100%;
  height: 100%;
  object-fit: contain;

}

.mobile-menu{
	cursor: pointer;
}

.mobile-menu div{
	width: 32px;
	height: 2px;
	background: #000;
	margin: 8px;
}

.nav-manual, .nav-auto {
    position: absolute;
    width: 59.45%;
    margin-top: 24%;
    display: flex;
    justify-content: center;
}

.nav-manual .manual-btn, .nav-auto div{
  border: 1px solid #fbfcfb;
  padding: 5px;
  border-radius: 20%;
  cursor: pointer;
  transition: 0.3s;
}


.nav-manual .manual-btn:not(:last-child), .nav-auto div:not(:last-child){
  margin-right: 10px;
}

.nav-manual .manual-btn:hover{
  background-color: #1c81df;
}


#radio1a:checked ~ .nav-auto .auto-btn1{
  background-color: #080ba5;
}


#radio2a:checked ~ .nav-auto .auto-btn2{
  background-color: #080ba5;
}


#radio3a:checked ~ .nav-auto .auto-btn3{
  background-color: #080ba5;
}

#radio1a:checked ~ .primeiro{
  margin-left: 0%;
}

#radio2a:checked ~ .primeiro{
  margin-left: -25%;
}

#radio3a:checked ~ .primeiro{
  margin-left: -50%;
}

footern{
    width: 100%;
    
    background-color: #fff;
    
 }

article{
    width: 100%;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}



#article-subtitulo h2{
  padding: 5px;
  text-align: center;
color: #00bcd4;
  
}

h1{
  font: 3rem 'Roboto';
  color: #00bcd4;
  text-align: center;
  margin-bottom: 1px; /* distancia do h1 pra o que vem a seguir*/
 

}

p{
  font: 1.2rem 'Roboto', sans-serife;
  color: #000;
  text-align: justify;
  line-height: 25px;

}
/*
p.caption {text-indent: 0}

p.stb{
	text-indent: 0;
	margin-top: 0.83em;
}

#p.mtb{
	text-indent: 0;
	margin-top: 2.17em;
}

#p.ltb{
	text-indent: 0;
	margin-top: 3.08em;
}
*/	

#txt-preto{
  color: #000;
}

section{
  padding: 20px;
}

#pag-beneficios{
  background-color: #00bcd4;
}

#pag-modalidades h2{
  font: 3rem 'Roboto', cursive;
  color: #fff;
  text-align: center;
  /* distancia do h1 pra o que vem a seguir*/
}

#pag-modalidades-portfolio h3{
  font: 1rem 'Roboto', cursive;
  color: #00bcd4;
  text-align: center;
  padding: 1px;
  /* distancia do h1 pra o que vem a seguir*/
}


#pag-modalidades-index p{
  color: #fff;
  text-align: justify;
  padding: 20px;
  
}

.img-modalidades-index{
  width: 100%;
  height: 20%;
}

.img-modalidades-portfolio{
  width: 100%;
  height: 100%;
}

#pag-modalidades-portfolio{
  background-color: #00bcd4;
}

#pag-modalidades-portfolio p{
  color: #fff;
  text-align: justify;
  padding: 20px;
  
}

.img-modalidades-portfolio{
  width: 100%;
  height: 100%;
}

.card-modalidades{
  background-color: #fff;
  margin: 6px;
  width: 25%;
  
  border-radius:  10px 10px 10px 10px;
  box-shadow: 5px 5px 5px #777;
  transition: 0.5s;
}



#pag-modalidades {
  background-color: #00bcd4;
}


.card {
  background-color: #fff;
  margin: 1px;
  width: 25%;

  border-radius:  10px 10px 10px 10px;
  box-shadow: 5px 5px 5px #777;
  transition: 0.5s;
}

/* aqui trata das imagens da pagina index */
.img-modalidades{
  width: 50%;
  height: 50%;
  padding: 5px;
  border-radius:  10px 10px 0px 0px;
}

.card-ult {
 background-color: #fff;
  margin: 1px;
  width: 25%;

  border-radius:  10px 10px 10px 10px;
  box-shadow: 5px 5px 5px #777;
  transition: 0.5s;
  
}

.card-modalidades:hover{
  box-shadow: 0 8px 16px #ccc;
}


#pag-modalidades p{
  color: #000;
  text-align: justify;
  padding: 10px;
  
}

#container{
	display:flex;
}

#container-card{
  display: flex;
  margin-top: 10px;
  margin-bottom:20px;
}

#container-card p{
    color: #000;
}

}
.card img {
  height: 90%;
  padding: 5px;
  border-radius: 10px 10px 0px 0px;
}



.card-galeria img {
  height: 80%;
  border-radius: 10px 10px 10px 10px;
}
.card:hover{
  box-shadow: 0 8px 16px #ccc;
}

.card-content{
    padding: 5px;
}

.card-content p{
    font: 1rem 'Roboto', sans-serife;
    color: #04880f;
    text-align: justify;
    line-height: 20px;
   

}


/*  ------- estilo pagina parceiros -------- */


#pag-modalidades-parceiro{
  background-color: #00bcd4;
}

#pag-modalidades-parceiro{
  color: #fff;
  text-align: justify;
  padding: 20px;
  
}

.img-modalidades-parceiro{
  width: 90%;
  height: 90%;
}

.card-parceiro{
  background-color: #fff;
  margin: 6px;
  width: 25%;
  
  border-radius:  10px 10px 10px 10px;
  box-shadow: 5px 5px 5px #777;
  transition: 0.5s;
}

.card-content-parceiro{
    padding: 5px;
}

#pag-parceiro {
  background-color: #00bcd4;
}

#article-paragrafo-andaime p{
  text-align: justify;
  padding: 20px;

}

#article-paragrafo-andaime h2{
  text-align: center;
  padding: 20px;

}

/* --------- fim estilo pagina parceiros --- */



#pag-treinos ul,li{
	color: #fff;
	list-style-type: circle;

}

#pag-treinos{
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom:10px;
  background-color: #00bcd4;
}
#pag-treinos p{
	text-align: justify;
	color: #fff;
}

#pag-treinos h2{
	font: 2rem 'Roboto', sans-serife;
	color: #fff;
	text-align: left;
	margin-bottom: 10px;	
}


#container-treinos{
 display: flex;
}


.treinos-img{
  padding: 5px;
  background-color: #fff;
  margin-left: 5px;
  width: 400px;
  border-radius:  10px 10px 10px 10px;
  
}
.treinos-img-2{
  padding: 5px;
  background-color: #fff;
  margin-left: 5px;
  width: 400px;
height: 80%;
  border-radius:  10px 10px 10px 10px;
  
}


.coluna-andaime{
	padding: 20px;
	color: #000;
}



.coluna-treinos{
	padding: 20px;
}

.noticias img{
  padding: 20px;
  background-color: #000;
  margin-left: 200px;
  width: 20%;
  border-radius:  10px 10px 10px 10px;
  
}



.noticias div {
  padding: 10px;
  color: #fff;
  margin-left: 130px;
  width:50%;
}

.noticias p{
  color: #000;
}

.negrito p{
  font-weight: bold;
}

.noticias-2{
  display: flex;
  justify-content: flex-start;
  margin-top: 20px;
  margin-bottom:20px;
  background-color: #00bcd4;
}
.noticias-2 img{
  padding: 30px;
  background-color: #000;
  margin-left: 200px;
  width: 20%;
  border-radius:  10px 10px 10px 10px;
  
}

.noticias-2 div {
  padding: 10px;
  color: #fff;
  margin-left: 500px;
  width:50%;
}

.noticias h2{
  color: #fff;
  margin-left: 0px;
}
.noticias-2 h2{
  color: #fff;
  margin-left: 0px;
}

.noticias-2 p{
  color: #fff;
}

/* pagina de estilos pra 
formulario( embora o nome seja agendamento*/
#pag-agendamentos p{
  text-align: center;
  margin-bottom: 20px;
}

form {
  width: 405px;
  margin: 0 auto;
 background-color: #fff;


}
form input, select, textarea{
  width:100%;
  height: 30px;
  margin-bottom: 10px;
  padding-left: 5px;
  box-sizing: border-box;
  border: 1px solid #23238E;
  color: #000;
}

form label, fieldset, input, select, textarea{
  font: 1rem 'Roboto', cursive;
  color: #00009C;

}
fieldset {
    border: 1px solid #FFFF00;
}

#botoes-form{
  display: flex;
}

input[type="submit"],input[type="reset"]{
  margin: 20px;
  background-color: #8bc34a;
  color: #fff;
  border: 0px;
  border-radius: 5px;
}
input[type="submit"]:hover{

  background-color: #076917;

}


input[type="reset"]{
  background-color: #c52424;
}                      
input[type="reset"]:hover{
    background-color: #a35151;
  }





/* botoes --- leia mais --- */
.button {
  background-color: #00bcd4; /* Green */
  
  color: #fff;
  
}



h3{
  font: 1rem 'Roboto', cursive;
  color: #00bcd4;
  text-align: center;
  margin-bottom: 10px;

}

.img-modalidades{
  width: 100%;
  height: 240px;
}

#linha {
  width: 100%;
  border-bottom: 0.5px solid #00bcd4;
}

hr{
  padding: 0px;
  border-color: #00bcd4;
  box-sizing:border-box;
  width:100%;  
}

#footern_content {
    color: #00bcd4; /* cor do texto da footer*/
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1rem 5.5rem;
 }

 /* cor do texto da footer*/
#footern_content h3{
  color: #000; 
 
}



#footern_contacts h1{
    margin-bottom: .1rem;
    font-family: "inter", sans serif;
  
}

#centralizar {
     
    width: 100%;
    height: 100px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
text-align: center;
}

.div a {
  line-height: 1.6;
  text-align: center;
}
.div b {
  line-height: 1.6;

}




.footern_list h1{
   font-family: "inter", sans serif;
}

#footern_Subscrib h1{
  margin-bottom: .1rem;
  font-family: "inter", sans serif;
  
}

#footern_social_media {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

#footern_social_media .footern_link {
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 2.5rem;
    width: 2.5rem; 
    color: var(--color-neutral-40);
    border-radius: 50%;
    transition: all 0.4s;

}

#footern_social_media .footern_link{
    font-size: 1.25rem;
}

#footern_social_media .footern_link:hover{

opacity: 0.8;
}


#instagram {
    background: linear-gradient(#7f37c5, #ff2992, #ff9807);
    
}

#facebook {
    background-color: #4267d3;
    
}

#linkedin {
  background-color: #0e1bc4
  
}


#whatsapp {
    background-color: #25d366
    
}

#email {
  background-color: #259cd3
  
}

.footern_list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
}


#footern_Subscribe{
    padding: 5px;
    display: flex;
    font-size: 1.5rem;
    flex-direction: column;
    gap: 1.5rem;
    font-family: "inter", sans serif;
    
}

#footern_Subscribe{
    color: var(--color-neutral-30);
    
}




#footern_copyright {
    display: flex;
    justify-content: center;
    color: #000;
    background-color: #e1e4e9;
    font-size: 1rem;
    padding: .3em;
    font-weight: 100%;
}


/*  ************************    media screen  **************  */
 
@media screen and (max-width: 1024px) {
header .navbarx ul li a{
    font-size: 15px;
    padding: 15px;
    color: #000000; /* cor da fonte menu principal*/
    display: block;
    
}

header .navbarx ul li ul a{
    font-size: 15px;
    padding: 15px;
    color: #fcf9f9; /* cor da fonte menu principal*/
    display: block;
}
  #footern_copyright {
    font-size: 0.8rem;
color: #000;
  }


}



/* ---------------------verde limao 768 -------------------- */
@media screen and (max-width: 768px) {



.img-desktop{
      display: none;
  }
.img-mobile{
    display: block;
  }
.nav-auto, .nav-manual{
     margin-top: 50%;
  }
  
header{
        padding: 5px;
    }

    header img{
        width: 35%;
        position:relative;
	padding: 10px;
    
    }

header label{
        display: initial;
    }
    
header .navbarx {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid rgba(54, 7, 7, 0.1);
        display: none;
    }

header .navbarx ul li {
        width: 100%;
    }

header .navbarx ul li ul {
        position: relative;
        width: 100%;
    }

header .navbarx ul li ul li {
        background: #2687d6;
    }
    
header .navbarx ul li ul{
    position: absolute;
    right: 0;
    width:  200px;
    background:  #2c72da; /* cor de fundo submenu */
    display: none;
    z-index: 1000;
}
header .navbarx ul li ul li ul {
       width: 100%;
       left: 0;
    }



#menu-bar:checked ~ .navbarx {
        display: initial;
    }

section.slider{
  margin: 0 auto;
  height: 50%px;
  width:720px;
  
  
  padding:  0px !important;
  overflow: hidden;
}
      

.slider-content {
  width: 285%;
  height: auto;
  display: flex;
}

.slide-box{
  width: 35%;
  height: auto;
  position: relative;
  text-align: center;
  

}
.slide-box img{
  margin-top: 15%;
  width: 100%;
  height: 100%;
  object-fit: contain;

}



#centralizar{
     
    width: 100%;
    height: 100px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}    

.img-modalidades{
  width: 100%;
  height: 130px;
}



#footern_content {
    background-color: #FFF;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    }

#footern_Subscrib h1{
    justify-content: center;
      
  }

#footern_Subscribe{
    padding: 5px;
    display: flex;
    font-size: 0.7rem;
    flex-direction: column;
    gap: 1rem;
    font-family: "inter", sans serif;
    font-size: 0.6rem;

}
#footern_Products h1{
    justify-content: center;
    font-size: 1.2rem;
  }
  #footern_copyright {
    font-size: 0.8rem;
color: #000;
  }

}

/* ---------------------magenta 600 px-------------------- */
@media screen and (max-width: 600px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 50%; }
  header img{
        width: 40%;
        position:relative;
	padding: 10px;
    
    }
header .navbarx ul li ul{
    position: absolute;
    right: 0;
    width:  200px;
    background:  #2c72da; /* cor de fundo submenu */
    display: none;
    z-index: 1000;
}

section.slider{
  margin: 0 auto;
  height: 45%;/* distancia do banner pra bem vindos */
  width: 390px;
  
  
  padding:  0px !important;
  overflow: hidden;
}
      

.slider-content {
  width: 200%;
  height: auto;
  display: flex;
}

.slide-box{
  width: 20%;
  height: auto;
  position: relative;
  text-align: center;
  

}
.slide-box img{
  margin-top: 40%;
  width: 250%;
  height: 100%;
  object-fit: contain;

}
#pag-treinos ul,li{
	color: #fff;
	list-style-type: circle;

}





#container-treinos{
 display: grid;
}

.coluna-treinos{
	padding: 20px;
}


.treinos-img{
  padding: 5px;
  background-color: #fff;
  margin-left: 5px;
  width: 400px;
  border-radius:  10px 10px 10px 10px;
  }
#pag-treinos{
  display: grid;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom:10px;
  background-color: #00bcd4;
}
#pag-treinos p{
	text-align: justify;
	color: #fff;
}

#pag-treinos h2{
	font: 2rem 'Roboto', sans-serife;
	color: #fff;
	text-align: left;
	margin-bottom: 10px;	
}






#pag-modalidades {
  gap: 1rem;
  margin-bottom: -25px;

}

#pag-modalidades-parceiro{

  display: grid;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom:10px;
  background-color: #00bcd4;

	
  color: #fff;
  text-align: justify;
  padding: 20px;
  
}

.card {
  background-color: #fff;
  margin-bottom: 30px; /* insere um espaço na base externa em px entre cada card */
  width: 60%;
  font-size: 0.90rem;
  border-radius:  10px 10px 10px 10px;
  box-shadow: 5px 5px 5px #777;
  transition: 0.5s;
  gap: 1rem;
/* ****  usado pra centralizar card na div **** */
top: 10%;
left: 40%;
transform: translate(30%, 0%);
}

.card-ult {
  background-color: #fff;
  margin-bottom: 0.1px; /* insere um espaço na base externa em px no última card ( o 4o. de cada linha) */
  width: 60%;
  font-size: 0.90rem;
  border-radius:  10px 10px 10px 10px;
  box-shadow: 5px 5px 5px #777;
  transition: 0.5s;
  gap: 1rem;
/* ****  usado pra centralizar card na div **** */
top: 10%;
left: 40%;
transform: translate(30%, 0%);
}

#container-card{
  display: grid;
  grid-template-columns: repeat(1, 1fr);

  margin-top: 0px;
  font-size: .50rem;


  
}

.card-content p{
    font: 0.72rem 'Roboto', sans-serife;
    color: #04880f;
    text-align: justify;
    line-height: 15px;
}


    #footern_content {

	background:color: #fff;
        grid-template-columns: repeat(1, 1fr);
        padding: 2rem 1rem;
       }

       #footern_Subscrib h1{
        justify-content: center;
}

#footern_Subscribe{
    padding: 3px;
    display: flex;
    font-size: 0.5rem;
    flex-direction: column;
    gap: 1rem;
    font-family: "inter", sans serif;
    

}

        
    
    #footern_Products h1{
      justify-content: center;
      font-size: 10px;
    }
    #footern_copyright {
      font-size: 0.8rem;
color: #000;
    }

}

/* ---------------------azul 480 px-------------------- */

@media screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 50%; }
  header img{
        width: 40%;
        position:relative;
padding: 10px;
    
    }
header .navbarx ul li ul{
    position: absolute;
    right: 0;
    width:  200px;
    background:  #2c72da; /* cor de fundo submenu */
    display: none;
    z-index: 1000;
}


section.slider{
  margin: 0 auto;
  height: 40%;/* distancia do banner pra bem vindos */
  width: 300px;
  
  
  padding:  0px !important;
  overflow: hidden;
}
      

.slider-content {
  width: 200%;
  height: auto;
  display: flex;
}

.slide-box{
  width: 20%;
  height: auto;
  position: relative;
  text-align: center;
  

}
.slide-box img{
  margin-top: 50%;
  width: 250%;
  height: 100%;
  object-fit: contain;

}
#pag-treinos ul,li{
	color: #fff;
	list-style-type: circle;

}





#container-treinos{
 display: grid;
}

.coluna-treinos{
	padding: 20px;
}


.treinos-img{
  padding: 5px;
  background-color: #fff;
  margin-left: 5px;
  width: 400px;
  border-radius:  10px 10px 10px 10px;
  }
#pag-treinos{
  display: grid;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom:10px;
  background-color: #00bcd4;
}
#pag-treinos p{
	text-align: justify;
	color: #fff;
}

#pag-treinos h2{
	font: 2rem 'Roboto', sans-serife;
	color: #fff;
	text-align: left;
	margin-bottom: 10px;	
}






#pag-modalidades {
  gap: 1rem;
  margin-bottom: -25px;

}

#pag-modalidades-parceiro{

  display: grid;
  justify-content: flex-start;
  margin-top: 10px;
  margin-bottom:10px;
  background-color: #00bcd4;

	
  color: #fff;
  text-align: justify;
  padding: 20px;
  
}

.card {
  background-color: #fff;
  margin-bottom: 30px; /* insere um espaço na base externa em px entre cada card */
  width: 60%;
  font-size: 0.90rem;
  border-radius:  10px 10px 10px 10px;
  box-shadow: 5px 5px 5px #777;
  transition: 0.5s;
  gap: 1rem;
/* ****  usado pra centralizar card na div **** */
top: 10%;
left: 40%;
transform: translate(30%, 0%);
}

.card-ult {
  background-color: #fff;
  margin-bottom: 0.1px; /* insere um espaço na base externa em px no última card ( o 4o. de cada linha) */
  width: 60%;
  font-size: 0.90rem;
  border-radius:  10px 10px 10px 10px;
  box-shadow: 5px 5px 5px #777;
  transition: 0.5s;
  gap: 1rem;
/* ****  usado pra centralizar card na div **** */
top: 10%;
left: 40%;
transform: translate(30%, 0%);
}

#container-card{
  display: grid;
  grid-template-columns: repeat(1, 1fr);

  margin-top: 0px;
  font-size: .50rem;


  
}

.card-content p{
    font: 0.72rem 'Roboto', sans-serife;
    color: #04880f;
    text-align: justify;
    line-height: 15px;
}


    #footern_content {

	background:color: #fff;
        grid-template-columns: repeat(1, 1fr);
        padding: 2rem 1rem;
       }

       #footern_Subscrib h1{
        justify-content: center;
}

#footern_Subscribe{
    padding: 3px;
    display: flex;
    font-size: 0.5rem;
    flex-direction: column;
    gap: 1rem;
    font-family: "inter", sans serif;
    

}

        
    
    #footern_Products h1{
      justify-content: center;
      font-size: 10px;
    }
    #footern_copyright {
      font-size: 0.8rem;
color: #000;
    }

}