*{
    text-decoration: none;
}



/*This id Header */
header {
   
    margin: 0;
    padding: 0;
  }






body{
    animation: animationsite 3s;
    background-color: rgb(95, 91, 91);;
    margin: 0;
  }


  @keyframes animationsite  {
    from {
        opacity: 0;
        background-color: rgb(0, 0, 0);
    }
    to {
        opacity: 1;
       background-color: rgb(95, 91, 91);
    }
}











  .fatherNavigation2{
    animation: Intro 1s;
  }


  @keyframes Intro {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}











.fatherNavigation3{
    animation: Intro 1s;
  }


  @keyframes Intro {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



.Text-Navigation-type-1:hover{
    color: rgb(255, 255, 255);
    transition: 500ms;
    cursor: pointer;
}


.Text-Navigation-type-2:hover{
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: 500ms;
}


.Text-Navigation-type-3:hover{
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: 500ms;
}



.FatherNavigation-two p{
    margin-left: 80px;
}



.FatherNavigation-two{
    animation: Intro2 1s;
    margin-right: 110px;
  }


  @keyframes Intro2 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*This id Header */















/* navigation */







.Navigation-For-Model-Class{
    animation: animationForNavigation 1s;
    display: none;
    height: 500px; 
    width: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.54);
}




@keyframes animationForNavigation{
    from{
        opacity: 0;
        height: 0px;
    }to{
        opacity: 1;
        height: 500px;
    }
}




















#Class-Model-Text{
    text-align: center; 
    font-size: 50px; 
    color: white; 
    display: none; 
    animation: NavText 1s;
}


@keyframes NavText {
    from{
        transform: translateY(-30px);
        opacity: 0;
    }to{
        transform: translateY(0px);
        opacity: 1;
    }
}




.Container-For-Input{
    display: none;
}


.Container-For-InputSearchModel{
    padding-left: 50px;
    padding-right: 50px;
    animation: animationNavButtons 1s ;
   
}

@keyframes animationNavButtons {
    from{
        opacity: 0;
        margin-left: 100%;
        
    }to{
        opacity: 1;
        
    }
}

.Container-For-InputSearchModel p{
    margin-left: 5px;
}

.ButtonForModel{
    font-size: 30px;
    color: white;
    
}

.ButtonForModel {
    transition: color 0.9s;
}





/* Close nav */
.Navigation-For-Model-Class {
    transition: max-height 0.5s ease-in-out;
    max-height: 500px;
    overflow: hidden;
}

.Navigation-For-Model-Class.closed {
    max-height: 0;
}






/* Close nav */