@font-face {
    font-family: myFirstNato;
    src: url(../fontz/NotoSans-Regular.ttf);

}

/* desktop */
@media only screen and (min-width: 1050px) {


    /* For desktop: */
    .body-product {
        width: 80%;
        margin: auto;
        /* box-shadow:2px 2px 2px 2px rgba(8, 8, 7,.5); */
    }
    #pro-main-img {
        width: 100%;

    }

    .top-bar {
        width: 80%;
        margin: auto;
        padding-left: 5px;
        margin-top: 3px;
        border-radius: 5px;

    }
    .top-bar-stick{
        width: 80%;
        margin: auto;
        padding-left: 5px;
        margin-top: 3px;
        border-radius: 5px;
    }

    /* pro-css */
    .pro-container {
        display: grid;
        width: 100%;
        height: 50vh;
        margin: auto;
        grid-auto-flow: row;
        grid-template-rows: 50% 50%;
        grid-template-columns: 40% 60%;
        /* background-image: linear-gradient(120deg,rgb(255,255,255),rgba(0,0,0,.3)); */
        background-color: white;


    }

    .line {
        height: 10px;
        /* color: red; */
        width: 200px;
        /* background-color: aqua; */
    }


    .pro-image {
        align-self: center;
        grid-column: 1;
        grid-row: 1 / span 2;

    }

    .pro-spec {
        align-self: flex-end;
        grid-column: 2;
        grid-row: 1;

        font-size: 24px;
    }

    .pro-buttons {
        align-self: flex-start;
        grid-column: 2;
        grid-row: 2;
        row-gap: 10px;
        column-gap: 10px;

    }


   

    .main-pro-banner {
        background-color: rgb(252, 252, 252);
        width: 80%;
        margin: auto;
        margin-top: 10px;
        padding: 5px 5px 5px 5px;
        border-radius: 10px;
        display: grid;
        grid-template-columns: 30% 35% 35%;
        
    }

    /* .lap-img{
        height: 300px;
    } */


    .lap-main-img{
        
        display: none;
    }

    .lap-main-img-2{
        display: block;
        
        margin: auto;
        height: 290px;
        width: 290px;
    }

    .lap-main-img-3{
        display: block;
        
        margin: auto;
        height: 290px;
        width: 290px;
    }

   

    

    .lap-img-tag-card {
        font-size: 16px;
        margin: 5px 5px 5px 5px;
        font-weight: bold;
        font-style: italic;
        padding: 5px 5px 5px 5px;

    }
    .button-ama {
        font-size: 16px;
        font-weight: bold;
        font-style: italic;
    }

    .myicon {
        margin-right: 5px;
        padding-right: 5px;
    }

    .lap-other {
        width: 50%;


    }



    .smry-table {
        margin: 10px 0px 10px 0px;
        background-color: white;
        width: 100%;
        font-family: myFirstNato;

    }

    .smry-table th {

        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;

        font-size: 18px;
        font-weight: bolder;

    }

    .smry-table td {
        padding: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        font-size: 14px;


    }

    .smry-table tr:hover {
        background-color: rgba(240, 240, 240, .8);
    }

    .smry-table tr {
        border-bottom: 1px solid black;
    }

    .table-head {
        width: 30%;
        font-weight: bold;
    }


}