*{padding: 0;
    margin: 0;}
    body{
        display: grid;
        justify-items: center;
    }

    #page
    {width: 90%;}
    header{
        display: grid;
        grid-template-columns: auto 4fr auto auto auto auto;
        /* grid-template-areas:" logo logo logo" "nav nav nav nav nav nav nav nav" "Hright Hright" ""; */
        /* grid-template-columns: auto; */
        
    }
    #logo{
        grid-area:"logo";
        /* border: 1px solid red; */
       
        height: 27px;
        padding: 13px 12px;
        display: grid;
        
        /* grid-area: 1/1/1/2; */
        /* grid-column: 1/2 */
        /* float:left; */
        /* margin-top:15px; */
        /* margin-left: 5px; */
        /* display: flex; */
    }
    header nav{
        /* border:1px solid blue; */
        /* float: left; */
        /* display: flex; */
        /* width:60%; */
        /* display: grid; */
        grid-area: "nav";
        /* grid-area: 1/1/1/8; */
        /* grid-template-columns:auto; */
        /* flex-flow: row nowrap; */
        /* justify-content: flex-end;
        align-content: flex-end; */
        /* align-self: flex-end; */
        height: 54px;
        /* position: relative;
        box-sizing: inherit; */
    }
    header nav ul{
    /* border: 1px solid red; */
    display: flex;
     list-style: none;
     align-items: flex-end;
        /* float:left; */
        /* display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: flex-end;
        align-self: flex-end;
        margin-top: 1%;
        list-style: none;
        padding: 0%;
        position: relative; */
    }
    header nav ul li{
        /* display: flex;
        flex-flow: row wrap;
        justify-content: flex-start; */
         /* float:left;  */
         /* border: blue; */
         font-size: 13px; 
         font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;     
    } 
    header nav ul li a{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        /* float:left; */
        /* border: 1px solid red; */
        padding:15px 10px;
        text-decoration: none;
        color: #262626;
        position: relative;
    }
    #Hright{
        /* grid-area: 1/1/1/4; */
        /* border: 1px solid red; */
        /* float: right; */
        display: grid;
        grid-area: "Hright";
         /* display: flex; */

         /* width: 12%; */
         padding: 17px 10px;
         justify-content: space-around;
        /* justify-content: flex-start; */
        /* align-self: flex-end; */ 
        /* flex-flow: row nowrap;
        justify-content: flex-end;
        align-content: flex-end; */
    }
    #fright{
        display: grid;
        /* grid-area: 1/3/1/6; */
        display: flex;
        /* width: 12%; */
        padding: 17px 10px;
        justify-content: space-around;
    }
    #gright{
        display: grid;
        /* grid-area:1/7/1/10 ; */
        display: flex;
        /* width: 12%; */
        padding: 17px 10px;
        justify-content: space-around;
    }
    #tright{
        display: grid;
        /* grid-area: 1/8/1/11; */
        display: flex;
        /* width: 12%; */
        padding: 17px 10px;
        justify-content: space-around;
    }
    .item {
    
        /* float: left; */
        font-size: 13px;
        font-family:Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif ;
        /* border:1px solid blue; */
        /* padding: 15px 10px; */
        color: #262626;
        display: flex;
        /* justify-content: space-between; */
        /* justify-content: space-between; */
        /* flex-flow: row nowrap;
        justify-content: flex-end; */
    }
    .item div{
        /* float: left; */
        display: flex;
        /* flex-flow: row wrap; */
        /* justify-content: space-between; */
        /* align-content: flex-end; */
    }
    .icon{
        margin-left: 10px;
        display: flex;
        /* flex-flow: row nowrap; */
        justify-content: flex-end;
        
    }
    header nav ul li a span:hover{
        border-bottom: 3px solid black;
    }
    div span:hover{
        border-bottom: 3px solid black;
    }
    .ag
    { 
        width: 100%;
        
        border: solid red;
    }
    .mid
    {
        text-align: center;
    }
    div .pic
    {
        padding-top: 10px;
        width: 100%;
        height: 100%;
    }
    #panner
    {   width: 100%;
        height: 511px;
        padding: 0;
        margin: 0;
        /* border: 1px solid blue; */
        /* float: left; */
        display: flex;
        background-image:url(../images/laptop);
        background-repeat: no-repeat;
        background-size:100%;
        
    }
    #surface
    { 
        height: 183px;
        display: grid;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        /* align-items: center; */
        align-content: flex-start;
        font-size: 18px;
        width: 473px;
        margin-left: 50px;
        /* width: 100% !important; */
        font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
    }
    .butt{
        background-color: #000;
        color: white;
        padding: 8px 20px;
        width: 120px ;
        height: 20;
    }
    .butt:hover span
    {
        border-bottom: 3px solid white;
        margin-left: -4px;
        margin-right: 8px;
    }
    #bar
    {
        /* width: auto; */
        /* border: 1px solid red;  */
        /* margin-left: 5%; */
        /* margin-top: 1%; */
        /* float: left ; */
        /* text-align: center; */
        /* padding:20px 15px; */
        /* margin-top: 2%; */
        display: flex;
        display: grid;
        gap: 10px 10px;
        grid-template-columns: 150px 150px 150px 150px 150px 150px;
        justify-content: center;
        align-items: center;
    }
    .box
    {
        /* width: 145px; */
        /* height:112px; */
        /* border: 1px solid blueviolet; */
        text-align: center;
        /* float: left;
         */
         padding: 15px;
         /* justify-content: center; */
         /* display: flex; */
        font-size: 20px;
    }
    .nii img{width: 100%;
    }
    .box a{
        font-size: 15px;
        color: black;
        text-decoration: none;
        display: block;
        width: 150x;
    }
    .box a:hover{
        text-decoration: underline;
       /* border-bottom:3px solid black;  */
    }
    /* .box:nth-child(1)
    {
        margin:3px;
    } */
    #bun
    {
        width: 100%;
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px 10px;
        /* border: 1px solid blue; */
        /* float: left; */
        /* display: flex; */
        margin-bottom: 2%;
        
    }
    .shop
    {
        display: flex;
        flex-direction: column;
        justify-content:space-evenly;
        /* width: 25%; */
        height: 351px;
        /* float: left; */
        margin-right:40px;
    }
    .shop a {
        text-decoration: none;
        color: #005293;
        
    
        height: 20;
    }
    /* .shop a:hover{
        border-bottom: 3px solid #005293;
        margin-left: -4px;
        margin-right: 8px;
    } */
    .but:hover span{
        border-bottom:1px solid #005293; 
        /* padding-left: 10px; */
        color: #005293;
        margin-right: 8px;
        /* font-size: 15px; */
    }
    /* .shop:nth-child(1)
    {
        margin:3px;
    } */
    .pho{
        
        width: 100%;
        height: 100%;
    }
    #cur
    {
        width: 100%;
        height: 511px;
        border: 1px solid blue;
        display: flex;
        /* float: left; */
        background-image: url(../images/immii.jfif);
        background-size: cover;
        margin-bottom: 2%;
        align-content: space-between;
        align-items: center;
    
    }
    #mov
    {display: flex;
        flex-direction: column;
        width: 49%;
        height: 195px;
        /* padding: 150px 100px; */
        /* font-size: 18px; */
        font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
        color: aliceblue;
        margin-bottom: 2%;
        margin-left: 50px;
    }
    .b1 {
        width: 160px;
        height:50px;
        color: black;
        background-color: white;
        font-weight: bold;
    }
    .b1:hover span{
        border-bottom: 3px solid black;
        margin-left: -4px;
        margin-right: 8px;
    }
    .b2
    {
        width: 200px;
        height:50px;
        color:white ;
        background-color: inherit;
        font-weight: bold;
    }
    .b2:hover span{
        border-bottom: 3px solid white;
        margin-left: -4px;
        margin-right: 8px;
    }
    #is{
        /* width:100%; */
        /* border: 1px solid blueviolet; */
        /* float: left;
         */
         /* justify-content: center; */
         /* display: flex; */
         /* flex-wrap: wrap; */
         display: grid;
         grid-template-columns: auto auto auto auto;
         gap: 10px 10px;
        margin-top: 1%;
    }
    .work{
        /* float:left; */
        flex-direction: column;
        /* justify-content:space-around; */
        /* align-items: center; */
        align-self: baseline;
        display: flex;
        /* width: 23%; */
        height: 397px;
        margin-right: 3px;
        margin-top: 12px;
        margin-bottom: 3%;
    }
    .work a{
        display: flex;
    
        text-decoration: none;
        color: #005293;
    
    }
    .toop
    {
        margin-top: 25px;
    }
    .work a:hover span{
        border-bottom: 1px solid #005293;
        margin-left: -4px;
        margin-right: 8px;
    }
    .bc{
    width: 100%;
    height: 181px;
    }
    #cov{
        width:100%;
        /* border: 1px solid blue; */
        /* text-align: center; */
        /* margin: 1px; */
        /* float: left; */
        display: flex;
        justify-content: center;
        align-content: center;
        background-color: #e6e6e6;
        margin-bottom: 2%;
        margin-top: 1%;
    }
    #ger{
        /* border: 1px solid green; */
        padding: 15px 20px ;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* width: 120px;
        height: 20; */
    }
    #ger a {
        text-decoration: none;
        color: black;
        width: 120px;
        height: 20;
    }
    #ger a:hover span{
        border-bottom: 1px solid black;
        margin-left: -4px;
        margin-right: 8px;
    }
    #mon{
        width: 100%;
        height: 511px;
         border: 1px solid blue; 
        /* float: left; */
        display: flex;
        background-image:url(../images/voz.jfif);
        background-size: cover;
    }
    #voi{
        /* width: 520px; */
        /* height: 195px; */
        padding: 150px 100px;
        display: flex;
        flex-direction:column ;
        justify-content: center;
        /* align-content: center; */
        font-size: 18px;
        font-family: Segoe UI,SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
        color: aliceblue;
        
    
    }
    .bul{
        width: 160px;
        height:50px;
        color: black;
        background-color: white;
        font-weight: bold;
    }
    .bul:hover span{
        
        border-bottom: 3px solid black;
        margin-left: -4px;
        margin-right: 8px;
    }
    #foll{ 
        background-color: white;
        width:100%;
        /* border: 1px solid red; */
        /* float: left;  */
        display: flex;
        /* justify-content: center; */
        margin-top: 2%;
        margin-bottom: 1%;
    }
    .micro{
        /* float:left; */
        display: flex;
        
    }
    .micro ul{
        /* float:left; */
        display:flex;
        flex-direction: row;
        list-style: none;
    }
    .micro ul li{
        /* float: left; */
        padding-left: 10px;
    }
    #footer{
        /* width: 100%; */
        /* border: 1px solid red; */
        background-color: #e6e6e6;
        /* float: left; */
        /* display: flex; */
        display: grid;
        grid-template-columns: auto auto auto auto auto auto;
        padding-top: 30px;
        color: #616161;
       
    }
    .contain1{
        /* float: left; */
       /* width: 227px; */
        height: 324px; 
        text-decoration: none;
     margin-left:100px;
    }
    .contain1 ul{
        /* float: left; */
        list-style: none;
        padding: 1px;
        text-decoration: none;
    }
    .contain1 ul li{
        padding: 5px;
        font-size: 15px;
        text-decoration: none;
        
    }
    .contain1 ul li a{ text-decoration: none;
        color: #616161;
        font-size: 12px;
    }
    .contain1 ul li a:hover{
    border-bottom: 1px solid #616161;
    }
    .contain2{
        /* float: left; */
        /* width: 227px; */
        height: 324px;
    }
    .contain2 ul{
        /* float: left; */
        list-style: none;
        padding: 1px;
    }
    .contain2 ul li{
    padding: 5px;
    font-size: 15px;
    }
    .contain2 ul li a{ text-decoration: none;
        color: #616161;
        font-size: 12px;}
    .contain2 ul li a:hover{
            border-bottom: 1px solid #616161;
            }
    .contain3{
        /* float: left; */
        /* width: 227px; */
        height: 324px;
    }
    .contain3 ul{
        /* float: left; */
        list-style: none;
        padding: 1px;
    }
    .contain3 ul li{
        font-size: 15px;
        padding: 5px;
    }
    .contain3 ul li a{ text-decoration: none;
        color: #616161;
        font-size: 12px;}
    .contain3 ul li a:hover{
    border-bottom: 1px solid #616161;
    }
    .contain4{
        /* float: left; */
        /* width: 227px; */
        height: 324px;
    }
    .contain4 ul{
        /* float: left; */
        list-style: none;
        padding: 1px;
    }
    .contain4 ul li{
        font-size: 15px;
        padding:5px;
    }
    .contain4 ul li a{ text-decoration: none;
        color: #616161;
        font-size: 12px;}
    .contain4 ul li a:hover{
            border-bottom: 1px solid #616161;
            }
    .contain5{
        /* float: left; */
        /* width: 227px; */
        height: 324px;
    }
    .contain5 ul{
        /* float: left; */
        list-style: none;
        padding: 1px;
    }
    .contain5 ul li{
        font-size: 15px;
        padding:5px;
    }
    .contain5 ul li a{ text-decoration: none;
        color: #616161;
        font-size: 12px;}
    .contain5 ul li a:hover{
            border-bottom: 1px solid #616161;
            }
    
    .contain6{
        /* float: left; */
        /* width: 227px; */
        height: 324px;
    }
    .contain6 ul{
        /* float: left; */
        list-style: none;
        padding: 1px;
    }
    .contain6 ul li{
        font-size: 15px;
        padding:5px;
    }
    .contain6 ul li a{ text-decoration: none;
        color: #616161;
        font-size: 12px;}
    .contain6 ul li a:hover{
            border-bottom: 1px solid #616161;
            }
    #eng
    {
        display: grid;
        column-gap: 5px;
        grid-template-columns: auto ;
        /* border: 1px solid blue; */
        width: 100%;
        /* float: left; */
        margin-top: 20px;
        background-color: #e6e6e6;
        display: flex;
        padding-bottom: 20px;
        
    }
    #eng a{
        text-decoration: none;
        /* float: left; */
        display: flex;
        
        margin-left: 35px;
        /* margin-left:50px; */
        font-size: 15px;
        color: #616161;
    }
    #eng a:hover{
        border-bottom: 1px solid #616161;
    }
    #contain7{
    width: 80%;
    /* float: right; */
    display: flex;
    justify-content: flex-end;
    /* border: 1px solid red; */
    /* margin-top: 5px; */
    font-size: 11px;
    
    }
    #contain7 ul{
        /* float: left; */
        display: flex;
        list-style: none;
    }
    #contain7 ul li{
        font-size: 10px;
        /* float: left; */display: flex;
        /* padding-left:5px; */
        color: #616161;
    
    }
    .contain7 ul li a{ text-decoration: none;
        font-size: 10px;}
    .contain7 ul li a:hover{
            border-bottom: 1px solid #616161;
            }
    #fual{
        float: left;
        background-color: #e6e6e6;
        width: 100%;
    }
    @media only screen and (max-width:1200px) {
        #page{
            
            width: 100%;
            margin-left: 0;
        }
        nav{
            display: none;
        }
    }