.checkbox-container{
            display: inline-flex;
        }   
                
        .opt{
            display: none;
        }

        #fProvince{
            display: none; 
        }

        .popup {
                display: flex;
                justify-content: center;
                align-items: center;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 1000;
            }

            .popup-content {
                background-color: #fff;
                padding: 20px;
                border-radius: 5px;
                width: 500px;
                text-align: center;
                cursor: pointer;
            }

            .popup-content:hover {
                    transform: scale(1.05); 
                }

            .close {
                cursor: pointer;
                float: right;
                font-size: 20px;
            }
            .hide {
                display: none;
            }

            #pack-details {
                text-align: left; 
                padding: 10px; 
            }

            .package-details:hover{
                transform: scale(1.05); 
            }

            #popular{
                color: #001549;
                font-weight: bold;
            }

            @media screen and (max-width: 1024px) {

                
                .popup {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: fixed;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(0, 0, 0, 0.5);
                        z-index: 1000;
            }

            .popup-content {
                background-color: #fff;
                padding: 20px;
                border-radius: 5px;
                width: 300px;
                text-align: center;
                cursor: pointer;
            }

            .popup-content:hover {
                    transform: scale(1.05); 
                    cursor: pointer;
                }

            .close {
                cursor: pointer;
                float: right;
                font-size: 20px;
            }
            .hide {
                display: none;
            }

            #pack-details {
                text-align: left; 
                padding: 10px; 
            }

            .package-details:hover{
                transform: scale(1.05); 
                cursor: pointer;
            }

            #popular{
                color: #001549;
                font-weight: bold;

            }
                
            }

            .subject-label {
                max-width: 250x; 
                overflow: hidden;
                text-overflow: ellipsis; 
                white-space: nowrap; 
                display: flex; 
                align-items: center; 
            }

            #tutorNameDisplay{
                font-size: 20px;
            }

            #termsCondition{

                  color: #02A552;
            }

            .welcome-hero-serch-box {
            background-color: #fff; 
            padding: 10px 15px; 
            border-radius: 8px; 
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
            max-width: 900px; 
            margin: 0 auto;
        }

        .welcome-hero-form {
            display: flex; /* Keeps input fields in a single line */
            align-items: center; /* Centers items vertically */
        }

        .single-welcome-hero-form {
            flex: 1; /* Allows forms to expand evenly */
            position: relative; /* Position for the separator */
        }

        /* Add separator line only to input fields except the last input */
        .single-welcome-hero-form:not(:last-child)::after {
            content: ""; /* Creates a separator line */
            position: absolute;
            right: 0; /* Aligns to the right of the input */
            top: 50%; /* Centers vertically */
            width: 1px; /* Width of the separator */
            height: 100%; /* Height of the separator */
            background-color: #ccc; /* Color of the separator */
            transform: translateY(-50%); /* Centering adjustment */
        }

        .single-welcome-hero-form input {
            width: 90%; /* Ensures input takes the full width */
            padding: 8px; /* Adds padding for better appearance */
            border: none; /* Removes the border */
            background-color: #fff; /* White background for input */
            outline: none; /* Prevents outline on focus */
            height: 20px;           
        }

        .single-welcome-hero-form h3 {
            margin: 0; /* Removes default margin */
            font-size: 14px; /* Adjusts font size */
        }

        .welcome-hero-serch {
            margin-left: 10px; /* Adds space between the inputs and the button */
            display: flex; /* Ensures the button is in line */
            background-color: #fff; /* White background for input */
            font-size: 18px;
        }

        /* Ensure the last input has no margin and proper space with button */
        .single-welcome-hero-form:last-child {
            margin-right: 0; /* Removes margin from the last input */
        }

        .welcome-hero-btn {
            padding: 10px 15px; /* Adds padding to the button */
            background-color: #001549; /* Button background color */
            color: white; /* Button text color */
            border: none; /* Removes default border */
            border-radius: 4px; /* Rounds the button corners */
            cursor: pointer; /* Changes cursor on hover */
            width: 100px;
        }

        .welcome-hero-btn:hover {
            background-color: #fff; /* Darkens button on hover */
            color: #00a550;
        }

        .engine-input::placeholder {
            font-size: 16px; /* Change this value to your desired font size */
            color: #001549; /* Optional: change the placeholder color */
        }

        .whatsapp-wrapper {
            position: fixed; /* Keeps the icon fixed on the screen */
            bottom: 20px; /* Distance from the bottom */
            right: 20px; /* Distance from the right */
            z-index: 1000; /* Ensure it stays on top of other content */
        }

        .whatsapp-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 60px; /* Adjust the size as needed */
            height: 60px; /* Adjust the size as needed */
            border-radius: 50%; /* Makes it circular */
            background-color: #25D366; /* Circle background color */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Optional shadow for better visibility */
            text-decoration: none; /* Remove underline */
        }


            body{
                
                background-color: #f6fffa;  
            }

   
	
	.paginat {
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    margin: 20px 0;
	}

	.paginat .prev, .paginat .next {
	   	background-color: #00a550;
	    color: #fff;
	    padding: 8px 16px;
	    border-radius: 4px;
	    text-decoration: none;
	    margin: 0 10px;
	}

	.paginat .prev.disabled, .paginat .next.disabled {
		background-color: #00a550;
	    color: #777;
	    cursor: not-allowed;
	}

	.paginat .prev:hover, .paginat .next:hover {
	   background-color: #00a550;
	}

	.paginat .page-number {
	    display: inline-block;
	    background-color: #f0f0f0;
	    color: #333;
	    border-radius: 50%;
	    width: 30px;
	    height: 30px;
	    text-align: center;
	    line-height: 30px;
	    margin: 0 5px;
	    text-decoration: none;
	    font-size: 16px;
	    transition: background-color 0.3s;
	}

	.paginat .page-number.current {
	 background-color: #00a550;
	    color: white;
	}

	.paginat .page-number:hover {
	background-color: #00a550;
	    color: white;
	}