.hookah-icon {
        display: inline-block;
        vertical-align: middle;
        transition: transform 0.2s;
    }

    .hookah-icon:hover {
        transform: scale(1.1);
    }

        .farsi-text {
        font-family: 'Vazirmatn', 'Tahoma', sans-serif;
        direction: rtl;
    }

        #main-content {
              padding-top: 30px; /* Adjust this value as needed */
              padding-bottom: 5px;
          }


        /* General styling for Farsi text */
        .farsi-content {
            font-family: 'Vazirmatn', 'Iran Sans', 'Tahoma', sans-serif;
            line-height: 1.6;
            direction: rtl;
            text-align: right;
        }

        /* Optimize font rendering */
        body {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Sticky navbar styles */



        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 100; /* Ensure navbar is on top */
        }

        .navbar-toggler {
            border: none; /* Remove default button border */
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        /* Responsive image adjustments */
        .navbar-brand img {
            max-height: 76px; /* Adjust as needed */
        }

        /* Custom styles for menu items */
        .navbar-nav .nav-link {
            color: black; /* Example color */
            margin-right: 20px; /* Add spacing between items */
        }

        /* Footer styles */
        footer {
            background-color: #212121;
            color: white ;
            color: white;
            padding: 20px 0;
        }

        .footer-logo {
            max-height: 80px; /* Adjust as needed */
        }

        .footer-menu {
            list-style: none;
            padding: 0;
        }

        .footer-menu li {
            margin-bottom: 10px;
        }
          footer {
      background-color: #333; /* Dark background for the footer */
      color: white; /* White text color for the footer */
      padding: 20px;
      text-align: center;
    }

        footer a {
          color: white; /* White link color in the footer */
          text-decoration: none;
          margin: 0 10px; /* Add some space between links */
        }

        .tagline { /* Style the tagline */
          font-style: italic;
          font-size: 0.8rem;
          color: #ddd; /* Slightly lighter gray for the tagline */
          margin-top: 5px; /* Add some space above the tagline */
        }

        .social-icon {
            font-size: 30px;
            color: #FFC107; 
        }
        /* Content styles */
        .content {
          padding-top: 80px; /* Adjust this value as needed */
          flex: 2;
        }

        .card-container {
          display: flex; 
          flex-direction: column; 
          align-items: flex-start; /* Align items to the left */
          gap: 10px; 
          width: 100%; 
        }

        .image-row { 
          display: flex;
          justify-content: flex-start; /* Align images to the left */
          gap: 10px;
          width: 100%; 
        }

        .card {
         width: 33.33%;
          border: 1px solid #ccc; 
          border-radius: 5px; 
          overflow: hidden; 
        }

        .card img {
          width: 100%; 
          height: auto; 
          display: block; 
        }
        .text-container {
            width: 85%;  /* Ensure text container takes full width */
            padding-right: 3px; 
        }

        /* for category on top of the cards in services section */  
        .category-buttons {
          display: flex;
          gap: 10px;
          margin-bottom: 20px;
          overflow-x: auto; /* Enable horizontal scrolling if needed */
          white-space: nowrap; /* Prevent buttons from wrapping */
        }

        .category-btn {
          background-color: #c0392b; /* Red background */
          color: white;
          border: none;
          padding: 10px 20px;
          border-radius: 20px;
          cursor: pointer;
          font-weight: bold;
          white-space: nowrap; /* Prevent button text from wrapping */
          transition: background-color 0.3s; /* Smooth transition for background color */
        }

        .category-btn.active {
          background-color: white; /* White background for active category */
          color: #c0392b; /* Red text for active category */
        }


        .shop-card-container { /* Updated */
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 20px;
            position: relative;
        }

        .shop-card { /* Updated */
            display: flex;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden; /* Keep image within card borders */
        }

        .shop-card-image { /* Updated */
            width: 120px; /* Adjust as needed */
            height: 120px; /* Adjust as needed */
        }

        .shop-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Maintain aspect ratio and cover the area */
        }

        .shop-card-content { /* Updated */
            padding: 15px;
            flex-grow: 1; /* Allow content to take up available space */
        }

        .shop-card-title { /* Updated */
            font-weight: bold;
            margin-bottom: 5px;
        }

        .shop-card-description { /* Updated */
            font-size: 0.9em;
            color: #555;
            margin-bottom: 10px;
        }
        .shop-card-like i {
              color: red; 
            }

        .shop-card-price { /* Updated */
            font-weight: bold;
            color: #c0392b; /* Red color for price */
        }

        /* You can also prepend 'menu-' to the 'go-to-top' styles if needed */
        .shop.menu-go-to-top {
          position: absolute; /* Change from fixed */
          bottom: 20px; 
          right: 20px; 
          background-color: #c0392b;
          color: white;
          border-radius: 50%;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          opacity: 0; /* Initially hidden */
          transition: opacity 0.3s;
        }

        shop.menu-go-to-top.show {
            opacity: 1; /* Show on scroll */
        }

        .shop.menu-go-to-top i {
            font-size: 24px;
        }


           /* About Us specific styles */
        .about-us-row {
            padding: 3rem 0;
        }

        .about-us-image-container {
            width: 90%;
            margin: 0 auto;
            transition: all 0.3s ease;
        }

        .about-us-image-container:hover {
            transform: scale(1.02);
        }

        .about-us-contact-section {
            direction: rtl;
        }

        .about-us-title {
            font-size: 1.8rem;
            color: #2c3e50;
        }

        .about-us-subtitle {
            font-size: 1.4rem;
            color: #34495e;
        }

        .about-us-contact-item {
            transition: all 0.3s ease;
            border: 1px solid rgba(0,0,0,0.1);
        }

        .about-us-contact-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .about-us-service-selection {
            border: 1px solid rgba(0,0,0,0.1);
        }

        .about-us-btn {
            padding: 0.5rem 1.5rem;
            transition: all 0.3s ease;
        }

        .about-us-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        /* Responsive styles */
        @media (max-width: 768px) {
            .about-us-image-container {
                width: 100%;
                margin-bottom: 2rem;
            }

            .about-us-title {
                font-size: 1.5rem;
            }

            .about-us-subtitle {
                font-size: 1.2rem;
            }

            .about-us-row {
                padding: 1.5rem 0;
            }

            .about-us-contact-item {
                margin-bottom: 1rem;
            }
        }

        /* hookah history */ 
        .hookah-history-image-container {
            padding-top: 0;
        }

        .hookah-history-content {
            padding-top: 0;
        }

        .hookah-history-row {
            align-items: flex-start;
        }

        .hookah-history-text-col {
            direction: rtl;
            text-align: right;
        }

        .hookah-history-image-col {
            display: flex;
            justify-content: center;
        }