@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
:root{  
     --purple-color: #9b59b6;
     --white-color: #fff;
     --font-weightOne: 600;
     --font-family: "Raleway", sans-serif;
     --transition: all 1.8s ease-in;
    --transition-body: all 5s ease-out;
     --text-shadow: 1px 1px 2px #c7c7c7;
     --box-shadow: 1px 1px 2px #0000;
}

html{
     scroll-behavior: smooth;
     transition: var(--transition-body);
}

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    overflow-x:hidden;
}

body{
     font-family: var(--font-family);
}

/*Header*/
header{  
    width:100vw;
    display:flex; 
}

.navigation{
     display:flex;
     background: var(--purple-color);
     width:100vw;
     height:6rem; 
     /* position: fixed; */
}

.navigation-logo{
     display: flex;
     flex: 1 0;
}

.navigation-menu{     
    display:flex;
    flex:  1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:6rem;   
}

.navigation-menu ul{
 list-style-type: none;
 display: flex;
 align-items: center; 
}
.navigation-menu ul li {
    display: flex;  
    justify-content:center;
    align-items: center;       
}

.navigation-menu ul li a{
    display: flex;
 justify-content:center;
    color: var(--white-color);
   text-decoration: none;
   font-size: 1.3rem;
   font-weight: var(--font-weightOne);     
   /* padding: 2.3rem 1.5rem; */
   padding: .9rem 1.5rem;
   transition: var(--transition);
   align-self: center;
         
}

.navigation-menu ul li a:hover{
    background: var(--white-color);
     color: var(--purple-color);

}

/* Banner */
.banner-bg{
  width:100vw;
  height:100vh;
  background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),  url("../images/bg-banner.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position: fixed;
  display:flex;
}

.banner-bg-title{
  display:flex;
  align-self:center;
  margin-left:150px;
  color:#fff;
  font-size: 2.8rem;
  text-shadow: var(--text-shadow);
}

.banner-link{
    display:flex;
    align-self: center;
    margin-top:250px; 
    padding: 25px 150px;
    color: var(--white-color);
    text-decoration:none;
    margin-right: 500px;
     margin-left: -440px;
    border-top-left-radius: 25px;
     border-bottom-right-radius: 25px;
    background-color: var(--purple-color);
    font-weight: var(--font-weightOne);
    transition:  var(--transition);
    box-shadow: var(--box-shadow);
}


.banner-link:hover{
    background: var(--white-color);
    color: var(--purple-color);
}


/*Section Violence*/

.section-violence, 
.violence-types{ 
     padding: 80px  0 2px 0 ;
     width: 80vw;
     text-align:center;
     margin: 0 auto;
    
}

.section-violence .violence-text-title 
 {
    text-align:center;
    color: var(--purple-color);
    font-size: 2.2rem;
    text-shadow: var(--text-shadow);
}



.violence-text-paragraph{
    padding: 15px 0 0 0; 
    font-size:1.4rem;

}

.violence-text-paragraph p{
     margin-top: 30px;
}


.violence-type-title{
    text-align:center;
    color: var(--purple-color);
    font-size: 1.5rem;
    text-shadow: var(--text-shadow);
}


/* Cards */
.cards{
     width:80vw;
     margin: auto;
     display:flex;

     margin-top:5rem;
    

}

.card{
     width: 25vw;
     margin-right: 2rem;
     padding-bottom: 5rem;

}

.card img{
     width:100%;
     height:15rem;
     box-shadow: var(--box-shadow);
}

.card h3{
    color: var(--purple-color);
    font-size: 1.3rem;
    margin: .8rem 0;
    text-shadow: var(--text-shadow);
}

.card p{
    text-align: left;
    font-size: 1.2rem;
}

/*Fight */
.fight-container{
     background-color: var(--purple-color);
      width:100vw;  
      padding: 1rem 0 5rem 0;
    
}

.fight{
     width:80vw;
     margin: auto;
     padding: 4rem 0  .5rem 0;
     display: flex;
}

 


.fight-title h3{
     color: var(--white-color);
        font-size: 1.5rem;
        margin-bottom: 2rem ;        
     text-align:center;
}


.fight-title  p{
     color: var(--white-color) ;
     font-size: 1.4rem;
}
.fight-container .card  h3, .fight-container .card p{
   color:var(--white-color);
}

.fight-container .card{
     margin-bottom: -5rem;
}


/*Button Fight*/
.button-fight{
     margin-top: 5rem;
      display:flex; 
       justify-content: center;
   
}

.button-fight .btn{
    
       text-decoration: none;
    padding: 25px 150px;
    background-color: #000;
    color:var(--white-color);
    border:0;
    border-bottom-left-radius: 2rem;
    border-top-right-radius: 2rem;
    font-size: 1.5rem;
     transition: var(--transition);
     font-weight: var(--font-weightOne);
}

.button-fight .btn:hover{
      background: var(--white-color);
      color:#000;
}

/*Contact Map */
/* .contact-map{ 
      padding: 4rem 0; 
      display:flex;
      background: #f2f2f2; 
            width:80vw;
            margin: auto;

   } */

   .contact-container{ 
     width:100vw;

}



.contact-title{ 
  margin-bottom: 6rem; 
  text-align:center;
      font-size:1.5rem;
      color:var(--purple-color);
      margin-top: 2rem;
      text-shadow:  var(--text-shadow);
}

.contact{
      display:flex;
      width:80vw;
      margin: auto;
      justify-content: space-between;
}

 
.contact-address { 
      display:block;
      width: 35vw;      
      
}
.contact-address span{
      display:block;
      width:30vw;
}
.contact-address iframe{
     width:100%; 
       height:40vh;
     margin-top: 2rem;

}
.map-address{
      display:flex;  
     
}
 
.contact-form{
      display:flex;
      justify-content: right; 
     }
.contact-form input, .contact-form textarea{
     display:block;
   border-color: var(--purple-color);
   border-width:  1px;
   text-transform: uppercase;
   padding: 0 .4rem; 
     justify-self: right;
}  

.contact-form input{
   width:40vw;  
       height: 3rem;
       margin-bottom: 1.2rem;
}

.contact-form textarea{
     width:40vw;
     height:20rem;
     padding-top: .3rem;
}

.submit-btn{
      margin-top: 1.5rem;
      background-color: var(--purple-color);
      color: var(--white-color);
      border:0;
      border-bottom-right-radius:25px;
      border-top-left-radius: 25px;
      height: 10rem;
      font-size:1.5rem;
      text-transform: capitalize!important;
}


/*Footer*/

.footer-rights{
     background: var(--purple-color);
     color: var(--white-color);
     text-align:center;
     padding: 2rem;
     margin-top: 2rem;
}