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


    html {  
        font-family: sans-serif;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
        /*-ms-overflow-style: scrollbar;
        -webkit-tap-highlight-color: transparent;
        line-height: 1.1s;*/
         scroll-padding-top: 70px;
         scroll-behavior: smooth;
    }
    
    
    body{
        margin: 0;
        padding: 0;
        background: #fff;
        min-height: 1000px;
}

    header{
        position: fixed;
        background: rgb(172, 142, 142);
        top:0;
        left:0;
        width: 100%;
        height:100vh;
        display: inline-flex;
        justify-content:flex-end;
        align-items: center;
        transition: 1s;
    }

    header.sticky{
        height: 85px;
    }
    
    header .banner{
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 1s;
           opacity: 0.89;
    }
    
    header.sticky .banner{
    opacity: 0.5;
    } 
    
    header .name{
        position: absolute;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
        font-size: 15vw;
        color: #428EBB;
        font-weight: 700;
        transition: 1s;
        display: inline-flex;
        text-decoration: none;
        z-index: 1;
    }
    
    header.sticky .name{
    position: absolute;
    font-size: 2.5em;
    left: 100px;
    transform: translate(0,-50%);
    }

    header .logo{
    width:50px;
    height: 50px;
    }
    
    nav{
        padding: relative;
        display:flex;
        z-index: 1;
    }
    
    nav ul{
        position: relative;
        display: flex;
        transition: 0.25s;
        transform: translateY(90px);
    }
    
    header.sticky nav ul  {
        transform: translateX(0);
        opacity: 1;
        transition-delay: 0.75s;
    }
    
    nav ul li{
        list-style: none; 
    }

    .nav-right img{
        width: 50px;
        margin-right: 25px;
    }
    
    .nav-middle {
        width:500px;
        display:flex;
    }
    
    .nav-middle ul{
        position: relative;
        display:flex;
        justify-content: center;
        align-items: center;
    }
    
    .nav-middle ul li{
        text-decoration: none;
        list-style: none;
        font-size: 27px;
        display: inline-block;
        padding: 10px 25px;
    }
    
    .nav-middle ul li a{
        color: #0B5079;
        display: inline-block;
        padding: 10px 15px;
        text-decoration: none;
    }
    
    .nav-middle ul li a:hover{
       color:#47847C;
    }
    
    .nav-right img{
        width: 50px;
        margin-right: 25px;
    }
    
    .nav-right{ transform: translate(-50px,80px);
         position: relative;
        transition: 0.25s;
    }

    header.sticky .nav-right{
         max-width: 300px;
        transform: translateX(0);
        opacity: 1;
        transition-delay: 0.75s;
        margin-left: 160px;
        right: 80px;
        
    }
    .nav-right .search-box{
        border:1px solid #ccc;
        padding: 2px 8px;
        border-radius: 25px;
        display: flex;
        font-size: 20px;
        align-items: center;
    }
    
    .nav-right .search-box input{
        width: 400px;
        font-size: 20px;
        border:0;
        outline: 0;
        background-color: transparent;
    }
    
    .nav-right .search-box img{
        width: 20px;
    }
    
    nav img{
        width: 5%;
        height: 4%;
        margin: 20px 0 20px 20px;
    }