*{
    /* outline: 1px solid red; */
}

body{
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #141414;
    color: white;


}

nav{
    height: 60px;
    width: 100%;
    position:fixed;
    z-index: 1;
    top:0;
    display: flex;
    background-color: #141414;
    color: white;

    a{
        color: #FFFFFF;
        text-decoration: none;
    }

    .logo{
        margin: 15px;
        font-size: 20pt;
        flex-grow: 1;
        align-items: center;

       
    }

    .navbar{
        margin: 10px;
        padding: 0;
        margin: 0;
        /* width: 30%; */

        
        ul{
            list-style: none;
            display: flex;
            justify-content: center;
            padding-right: 50px;

            a{
                padding: 5px;
                padding-left: 30px;
                padding-right: 30px;

                
            }

            a:hover{
                background-color: #FFFFFF;
                color: #141414;

/* 
                a{

                } */
            }

            

        }
    }

    .actions{
        /* width: 100px; */
        margin: 20px;

        a{
            padding: 5px;
            padding-left: 30px;
            padding-right: 30px;

            
        }

        a:hover{
            background-color: #FFFFFF;
            color: #141414;

/* 
            a{

            } */
        }
      
    }

}

section {
    height: 100vh;
    background-color: #141414;
}

#banner{
    background-image: url("assets/banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px;

    .text{
        position: relative;
        top: 190px;
        width: 600px;
        color: white;

        .title{
            font-size: 40pt;
            font-weight: 400;

        }

        .subtitle{
            position: relative;
        }
    }

   
}

#about-us{
    padding: 100px;
    align-items: center;
    display: flex;

    img{
        height: 500px;

    };

    .text{
        margin: 50px;
        height: 400px;
        .title{
            font-size: 40pt;
            font-weight: 400;

        }

        .subtitle{
            position: relative;
        };

    }

}

#layanan{
    text-align: center;
    height: auto;
   


    .title{
        color: #FFFFFF;
        font-size: 40pt;
        font-weight: 400;
    }

    .main{
        margin: 40px 120px;
   
        display: grid;
        grid-template-columns: auto auto auto;
        /* margin-left : ; */

        .card{
            width: 350px;
            height: 300px;
            margin: 20px;

            img{
                height: inherit;
                width: inherit;
            }
        }

        .card:hover{
            outline:1px solid #FFFFFF;
        }

    }
   
}

#detail-product{
    margin: 90px;
    padding: 23px;
    display: flex;
    height: 100%;
    /* background-color: white; */
    color: white;
    border-radius: 10px;

    img{
        width: 100px;
        height: 440px;
        width: auto;
        border: 10px solid #FFFFFF;
    }

    .detail{
        margin-left: 70px;
        height: 60%;

        
        .text{
            margin: 0 20px;

            .title{
                font-size: 40pt;
                font-weight: 600;
                margin: 10px 0;

    
            }
    
         
        }

        ul{
            font-size: 20pt;
            font-weight: 600;


            li{
                margin-left: 50px;
                font-size: 14pt;
                padding: 8px

            };
        }

        .price{
            border: 1px solid #141414;
            padding: 10px;
            font-size: 32pt;
            font-weight: 600;
            margin: 15px;
        }

    }


}

*{
    /* outline: 1px solid red; */
}

#detail-user{
    margin: 90px;
    padding: 23px;
    display: flex;
    height: fit-content;
    /* background-color: white; */
    color: white;
    border-radius: 10px;


    img{
        height: 400px;
        width: 300px;
        border: 10px solid #FFFFFF;
    }

    .detail{
        margin-left: 50px;
        height: 60%;

        
        .text{
            margin: 0 20px;

            .title{
                font-size: 40pt;
                font-weight: 600;
                margin: 10px 0;

    
            }
    
         
        }

        ul{
            font-size: 20pt;
            font-weight: 600;


            li{
                margin-left: 50px;
                font-size: 14pt;
                padding: 12px 0;
                display: grid;
                grid-template-columns: 200px auto

            };
        }

        .price{
            border: 1px solid #141414;
            padding: 10px;
            font-size: 32pt;
            font-weight: 600;
            margin: 15px;
        }

    }


}


#reservasi{
    margin: 90px;
    display: grid;
    grid-template-columns: 50% auto;

    img{
        /* align-self: center; */
        margin: 10px 180px;
        height: 500px;
    }


    .input-form{
        padding: 20px;

        #harga{
            font-weight: bolder;
            font-size: 30pt;
            height: fit-content;
        }


        p{
            padding: 0;
            margin: 0 2px;
            font-size: 20px;
            width: 100%;
        }

        input{
            font-size: 14pt;
            padding: 10px;
            width: 100%;
            height: 20px;
            border-radius: 5px;
        }

        .deskripsi{
            width: 102.3%;
        }

        button{
            font-size: 13pt;
            padding: 7px;
            border-radius: 5px;
            background-color: #24a0ed ;
            color: #FFFFFF;
        }
    }

    .divide-input{
        display: flex;

        .input-form{
            flex:1;
            
        }

       
    }
}

#jadwal{
    margin: 90px;
    padding: 23px;
    border: 2px solid white;
    height: fit-content;

    *{
        /* outline: 1px solid red; */
    }

    .header{
        font-size: 24pt;
        font-weight: bolder;
        margin: 0;
    }

    table{

        th{
            background-color: #FFFFFF;
            color: #141414;
            font-size: 14pt;
            font-weight: bolder;
        }

        td{
            padding: 20px 4px;
            font-weight: bolder;

        }

        tr:hover{
            background-color: #646464;
            color: #141414;
        }
    }
}


footer{
    color: #FFFFFF; 
}

.product-slider{
    margin: 0 90px;
    padding: 0px;  
    height: 250px;
    width: auto;
    border: 2px solid white;
    display: flex;
    overflow-y: hidden;
    overflow-x: scroll;


    img{
    border: 2px solid white;

        width: 250px;
        height: 250px;
    }
}