/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */
        @media only screen and (max-device-width: 1366px) {
            .parallax {
                background-attachment: scroll;
            }
        }

        .calendar-box {
            text-align: center;
            /*padding: 20px;*/
            /*border: 1px solid #ccc;*/
            /*border-radius: 10px;*/
            /*background-color: white;*/
            /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
            width: 300px;
        }

        .calendar-title {
            /*font-size: 18px;
           margin-bottom: 10px;
           color: #333;*/
            width: auto;
        }

        .calendar {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 300px;
            position: absolute;
            z-index: 1;
            display: none;
            top: 50px;
        }

        .header {
            background-color: #3498db;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

        #prevBtn,
        #nextBtn {
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }

        #monthYear {
            font-size: 18px;
            font-weight: bold;
        }

        .days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
            padding: 10px;
        }

        .day {
            padding: 10px;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
        }

        .day.current {
            background-color: #3498db;
            color: white;
        }

        .day.selected {
            background-color: #2ecc71;
            color: white;
        }

        #dateInput {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
            outline: none;
            cursor: pointer;
        }

        .day.disabled {
            color: #ccc;
            pointer-events: none;
            /* Prevent clicking */
            opacity: 0.5;
        }

        /* Delivery Section */
        .delivery-section {
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .delivery-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .calendar-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 15px;
            font-size: 16px;
            color: #555;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            width: 100%;
        }

        .calendar-button i {
            margin-right: 8px;
        }

        .calendar-container {
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #fff;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .calendar-nav {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
        }

        .calendar-month-year {
            font-size: 16px;
            font-weight: bold;
        }

        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
        }

        .calendar-days .day {
            padding: 10px;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
        }

        .calendar-days .day:hover {
            background-color: #e0e0e0;
        }

        .calendar-days .day.current {
            background-color: #3498db;
            color: #fff;
        }

        .calendar-days .day.selected {
            background-color: #2ecc71;
            color: #fff;
        }

        .calendar-days .day.disabled {
            color: #ccc;
            pointer-events: none;
        }

        .time-slot-container {
            margin-top: 20px;
        }

        .time-slot-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .time-slots {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .time-slot {
            display: flex;
            align-items: center;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            background-color: #f9f9f9;
        }

        .time-slot input {
            margin-right: 10px;
        }

        .time-slot:hover {
            background-color: #e0e0e0;
        }