/*
Comecando a estelizar o meu Css
*/

*{
    margin: 0px;
    padding: 0px;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
}

.body {
    background-color: #f4f6f8;
}
.navbar {
    background-color: #ffffffa4;
    box-shadow: 0 2px 4px rgb(0, 0, 0, 0,1);
    
    
}

.login-button{
    background-color: #32669F;
    color: #fff;
    font-size: 14px;
    padding: 8px 20px ;
    border-radius: 50px;
    text-decoration: none;
    margin-right: 2rem;
}

.navbar-toggler {
    border: none;
    font-size: 1.25rem;
   
    top: 0;
    right: 0;
    bottom: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.nav-link {
    color: black;

}

/*
Estelizando o meu carrousel
coloquei o max-widht pra questoes de responsividade
*/

.custum-carousel-height {
    max-height: 800px;
    overflow: hidden;
}

.custom-img{
    height: 40rem;
    object-fit: cover;
}

h4 {
    font-size: center;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-bottom: 1rem;
    padding: 3rem;
    color: black;
    font-weight: bolder;

}

p {
  font-size: 1.2rem;
}

/*
Estelizanda os meus botoes 
*/

.saiba-button{
    background: linear-gradient(to right,#9294C4,#f5f5f5);
    color: #fff;
    font-size: 14px;
    padding: 8px 20px ;
    border-radius: 50px;
    text-decoration: none;
    margin-right: 2rem;
}

.saiba-button:hover {
    animation-name: botao;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    box-shadow: 0 0 90px 20px  #32669F;
    font-size: 1.2rem;
    
}

@keyframes botao{
    0%{
        transform: scale(1);
    }

    10%{
        transform: scale(1.05);
    }
}

/*
Personalizando asn cards que constam no meu site
*/

.card {
    border-radius:10px;
    box-shadow:4px 1px  #00000034 ;
   
}

.card:hover{
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    box-shadow: 0 0 90px 20px  #00000034;
}

/*
Estelizando o meu footer com css deve paracer profisinal
*/
.container{
    max-width: 1170px;
    margin: auto;
    
}

.footer{
    background: #24262b;
    padding: 70px 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/*
o display flex usei 
para que os links que estao no meu saite possam ficar um ao lado do outro
mas depos usei o flex1 e o flex direction colum para ficar 100% ao lado do o
*/

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

.footer-col h3{
    font-size: 14px;
    color: white;
   margin-bottom: 15px;
    font-weight: 500;
    position: relative;
}

.footer-col h3::before{
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    background: #32669F;
    height: 2px;
    box-sizing: border-box;
    width: 50px;
    text-align: center;
}

.footer-col ul{
    list-style: none;
    padding: 0;
}

.footer-col ul li a{
   font-size: 16px;
   text-decoration: none;
   color: #bbbbbb;
   display: block;
   
   
}

.footer-col .social-link{
    display: inline-block;
}