/* Define styles for the container div */
        .heroPicture {
            position: relative;
            text-align: center;
            background-color: rgba(255, 255, 255, 0.5); /* Light semi-transparent white */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Text shadow */
            color: rgb(255, 255, 255);
            margin-bottom: 10%;
        }
        .breadcrumb{
            position: absolute;
            top: 8vh;
            left: 50%;
            transform: translateX(-50%);
            }

        /* Style for the blurred image */
        .background-image {
            filter: blur(5px); /* Adjust the blur level as needed */
            height: 36vh; /* Adjust the height as needed */
            background-size: cover;
            background-position: center;
        }

        /* Style for the restaurant name */
        .restaurant-name {
            position: absolute;
            top: 14vh;
            left: 50%;
            transform: translateX(-50%);
            font-size: 40px;
            font-weight: bold;
            }

        /* Style for the restaurant description */
        .description {
            font-weight: bold;
            position: absolute;
            top: 26vh;
            width: 70%; /* Allow 20% margin */
            margin-left: 15%;
            }

        .narration{
            margin-top: 4%;
            width: 66%; /* Allow 20% margin */
            margin-left: 17%; /* Force 10% on the one side, and the rest on the other */
        }
        li {
            padding: 3%;
        }

        li:last-child {
            padding-top:8%;
        }

        /* Style for the torn paper image */
        .torn-image {
            margin-top: 4%;
            width:70vw; /* Adjust the width of the torn image */
            border: 1vh solid #fff; /* White border around the torn image */
            border-radius: 1vh; /* Rounded corners for the border */
            height:  36vh;
            object-fit:cover;
            box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1), 0px 5px 15px rgba(0, 0, 0, 0.1);
        }

        .banner {
            text-align: center;
            background-color: rgba(204, 193, 193, 0.5);
            color: #050505;
            padding: 4%;
            margin-bottom: 6%;
            background-color: var(--second-color);
            box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1), 0px 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .rating-container {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            width:90%; /* Adjust the width of the torn image */
            margin-left: 5%;
            padding: 3%;
        }
        .rating-container:last-child{
            margin-top: -2%;}
        .rating-container hr {
            margin-left: 25%;
            margin-right: 25%;
        }
        .category {
            font-weight: bold;
            font-style: italic;
            display: flex;
            flex-direction: column;
            flex: 0.8;
            position: relative;
        }
        .rating-container:last-child .category:nth-last-child(3){
        font-size: 0.88rem;}
        .category:nth-last-child(1){
            font-size: 1.1rem;
            margin-left: -5%;}


 /* Disqus Comments Customization */
 #disqus_thread {
    width: 80%; /* Adjust the width of the torn image */
    margin-left: 10%;
  }