/* Hamburger Styles */

.hamburger {
    display: none;
    /* Desktop view mein hidden hoga */
    font-size: 24px;
    cursor: pointer;
}

.auth-links a {
    margin: 0px;
}









/* Jab "active" class add ho to sidebar dikhai de */

/* Hamburger icon ko center karna (mobile pe) */
.Dashboardhamburger {
    display: block;
    font-size: 30px;
    color: #333;
    cursor: pointer;
    /* Mobile pe display karna */
}




.dash-main-heading {


    background-image: url(../images/dash-bg-logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 350px;
    width: 600px;
    padding-top: 100px;
    margin-left: 200px;
}
















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

    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    .form-container {
        width: 100%;
        padding: 0px 30px 0px 30px;
    }

    .prd-sub-btn {
        padding: 15px 30px 15px 30px;
    }

    .faqs-section {
        margin: 0;
    }

    .article {
        width: 100%;
    }

    .related-products {


        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .pro-discrpt {
        padding: 5px;
    }

    .auth-links {
        margin-right: 8px;
    }

    .auth-links a {
        padding: 9px 16px;
        font-size: 12px;
    }

    .stay-connected-heading {
        padding-top: 30px;
    }


    /* Home Page Responsive */


    .logo img {
        width: 100px;
        margin-left: 0px;
    }

    /* header sessin */
    .hamburger {
        display: block;

    }

    .nav-links {

        display: flex;
        gap: 10px;
    }



    .nav-links {
        display: none;

        flex-direction: column;
        position: absolute;
        top: 121px;
        right: 0;
        background-color: #ffffff;
        width: 100%;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        padding: 20px 0;
    }

    .nav-links.active {
        display: flex;
        z-index: 2;
        width: 70%;
        align-items: center;
    }

    .nav-links li {
        text-align: right;
        margin: 10px 0;
        padding-right: 10px;
    }




    .form-box {
        padding: 10px;
        width: 100% !important;
    }

    .two-inputs {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .two-inputs input {
        width: 100%;
    }

    .custom-contact-form {
        display: flex;
        flex-direction: column;



    }

    .custom-form-group {
        width: 100%;
    }

    /* .two-inputs {
        display: flex;
        flex-direction: column;

        gap: 10px;
    } */

    .footerInput,
    .footerMessage {
        width: 100%;

        padding: 10px;

        font-size: 14px;

        border: 1px solid black
    }

    .footerMessage {
        height: 100px;

        resize: none;

    }

    .custom-submit-btn {
        width: 50%;
        border-radius: 100px !important;
        padding: 10px;
        margin-left: 0px;
        font-size: 16px;
        background-color: #000000;

        color: white;

        border: none;
        border-radius: 5px;

        cursor: pointer;
    }

    .custom-submit-btn:hover {
        background-color: #5e6061;

    }


    .custom-submit-btn:hover {
        background-color: #0056b3;

    }

    /* end header session */



    /* hero session */

    .banner {
        padding: 30px 15px;
        height: 600px;

    }

    .banner-content h1 {
        font-size: 1.5rem;

    }

    .banner-content p {
        font-size: 0.9rem;

    }

    .search-container {
        max-width: 300px;

    }

    .search-input,
    .search-button {
        font-size: 0.9rem;

        padding: 8px;

    }

    /* end hero session */

    /* under hero boxes session */
    .boxes-section {
        flex-direction: column;

        gap: 15px;

        padding: 10px;
    }

    .box {
        flex: 1 1 100%;

    }

    .box h2 {
        font-size: 1.2rem;

    }

    .box-btn {
        font-size: 0.9rem;

        padding: 8px 16px;
    }

    /* end under hero boxes session */

    /* two boxes session  */

    .flex-boxes-section {
        flex-direction: column;

        gap: 15px;

        padding: 30px 15px;

    }

    .flex-box {
        flex: 1 1 100%;

        max-width: 100%;
        padding: 15px;

    }

    .flex-box h2 {
        font-size: 30px;

        margin-bottom: 20px;
    }

    .flex-box ul li {
        font-size: 16px;

    }

    .flex-btn {
        font-size: 16px;

        padding: 10px 20px;
    }

    /* end two boxes session */


    /* Advertise with Us */


    .boxes-container {
        flex-direction: column;
        align-items: center;
    }


    .left-box,
    .right-box {
        max-width: 100%;
    }


    .nested-boxes {
        flex-direction: column;
        gap: 20px;
    }


    .nested-box {
        max-width: 100%;
    }


    .section-heading {
        font-size: 30px;
    }


    .nested-box h3 {
        font-size: 20px;
    }


    .nested-box p {
        font-size: 14px;
    }

    .nested-box li {
        font-size: 14px;
    }

    /* End Advertise with Us */


    /* footer session */


    .footer-container {
        flex-direction: column;
        /* align-items: center; */
        text-align: center;
    }

    /* Form Box Styling */
    .form-box {
        width: 100%;
        padding: 15px;
    }

    .custom-contact-form {
        width: 100%;
    }


    /* Quick Links */
    .footer-quick-links,
    .footer-services,
    .footer-info {
        flex: 1;
        max-width: 100%;
        margin-top: 20px;
    }

    .footer-heading {
        font-size: 20px;
    }

    .footer-links-list li,
    .footer-info-list li {
        font-size: 16px;
    }

    /* Social Media Icons */
    .footer-social-media-icons {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 15px;
    }

    .social-icon {
        margin: 5px;
    }

    .social-icon img {
        width: 25px;
        height: 25px;
    }

    /* end footer session */


    /* Directory page Responsive */

    .stay-connected-heading p1 {
        font-size: 35px;
    }

    .stay-connected-heading p2 {
        font-size: 20px;
        letter-spacing: 0px;
    }

    .toggle-btn {
        width: 60%;
        margin-bottom: 10px;
    }

    .search-options {
        flex-direction: column;
        align-items: center;
    }

    .select-field,
    .text-input {
        margin-bottom: 5px;

    }

    .search-btn {
        display: block;
    }

    .search-category-fields {
        display: flex;
        justify-content: center;
        padding: 20px;

    }


    .directory-body {
        width: 100%;
        /* Take up more width on smaller screens */
        padding: 15px;
    }



    .toggle-btn {
        width: 100%;
        /* Full width for mobile */
    }

    .search-category-fields {
        gap: 15px;
        /* Increase spacing between fields */
    }

    .select-field,
    .text-input {
        width: 100%;
        /* Full width for mobile */
    }

    .search-btn {
        width: 100%;
        /* Full width for mobile */
        margin-top: 20px;
        /* Ensure proper spacing from fields */
    }

    .container {
        display: flex;
        flex-direction: column;

    }


    .sidebar {
        width: 65%;
        margin-bottom: 15px;
        /* Add space below sidebar */
    }

    .sidebarimg {
        width: 100%;
        /* Full width of the container */
        height: auto;
        /* Maintains aspect ratio */
    }

    .rate-section,
    .location {
        margin-bottom: 15px;
        /* Add space between elements */
    }

    .main-content {
        width: 100%;
        /* Main content also takes full width */
    }



    .company {
        flex-direction: column;
        /* Vertically stack karna */
        align-items: center;
        /* Sabko center align karna */
        text-align: center;
        /* Text ko bhi center karna */
    }

    .company-logo {
        margin-bottom: 20px;
        /* Image aur baaki info ke beech space */
    }

    .company-info h3 {
        font-size: 1.5em;
        /* Business name ko thoda bada karna */
        margin-bottom: 10px;
    }

    .company-info a {
        font-size: 1em;
        color: #007BFF;
        margin-top: 5px;
    }

    .company-category,
    .company-info a {
        font-size: 0.9em;
        margin-top: 10px;
        text-align: center;
    }

    .company-reviews {
        margin-top: 20px;
    }

    .most-relevant {
        font-size: 0.9em;
        margin-top: 20px;
    }

    .review-link {
        padding: 10px 20px;
        background-color: #000000;
        color: white !important;
        text-decoration: none;
        border-radius: 5px;

        margin-left: 0px !important;
    }

    .review-link:hover {
        background-color: #525455;
    }

    /* .trust-score img {
        display: block;
        width: 20%;
    } */
    .trust-score {
        flex-direction: column;
        /* Stack the image and text vertically on smaller screens */
        align-items: flex-start;
        /* Align the items to the left */
        gap: 5px;
        /* Adjust the gap between image and text */
        margin-left: 30px;
    }

    .trust-score img {
        width: 80px;
        /* Optionally, reduce the image size on mobile */
    }

    .company-category {
        display: flex;
        flex-direction: column;



    }

    .icon-text-row {
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: baseline;
        justify-content: center;


        /* Mobile view mein har row ko full width dena */
        justify-content: flex-start;
        /* Text ko left align karna */
    }

    .icon-text-row svg {
        margin-bottom: 5px;
        /* SVG icon ke neeche space dena */
    }






    /* shop page responsive */
    .main-both-sec {
        flex-direction: column;
        /* Stack the sections vertically */
    }

    .cat-sec {

        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
        /* Add some space below categories */
    }

    .category-list {
        list-style: none;
        /* Remove default list styling */

        /* Make the list items appear in a row */
        justify-content: center;
        /* Center align the list items */
        padding: 0;
        margin: 0;
        gap: 1rem;
        /* Add space between items */
        border: 1px solid #0000005e;
    }


    .prod-sec {
        max-width: 100%;
    }



    .container_product {
        display: flex;
        flex-direction: column;
        /* Stack all products in rows */
        gap: 1rem;
        /* Add space between rows */
        width: 100%;
        /* Full width for the container */
    }

    .article_product {
        display: flex;
        flex-direction: column;
        /* Stack product details vertically */
        align-items: center;
        /* Center align items horizontally */
        padding: 1rem;
        border: 1px solid #0000005e;
        border-radius: 10px;
        /* Add border for visual separation */
        border-radius: 5px;
        /* Rounded corners */
        background-color: #f9f9f9;
        /* Light background color */
        transition: box-shadow 0.3s;
        /* Smooth hover effect */
    }

    .article_product:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        /* Subtle shadow on hover */
    }

    .article_product img {
        width: 150px;
        /* Fixed width for the product image */
        height: auto;
        /* Maintain aspect ratio */
        object-fit: cover;
        /* Ensure image is cropped properly if needed */
        margin-bottom: 1rem;
        /* Add space below the image */
    }

    .article-l {
        margin-bottom: 0.5rem;
        /* Space below the title */
        font-size: 1.2rem;
        /* Slightly larger font for the title */
        font-weight: bold;
        text-align: center;
        /* Center align title */
    }

    .article-p {
        margin-bottom: 1rem;
        /* Space below the price */
        font-size: 1rem;
        /* Regular font size for price */
        color: #333;
        /* Darker text for better visibility */
        text-align: center;
        /* Center align price */
    }

    .btn-primary {
        padding: 0.5rem 1rem;
        /* Add padding for the button */
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        text-decoration: none;
        /* Remove underline */
        font-size: 1rem;
        transition: background-color 0.3s;
    }

    .btn-primary:hover {
        background-color: #0056b3;
        /* Darker blue on hover */
    }

    .btn-primary:disabled {
        background-color: #ddd;
        /* Gray background for disabled buttons */
        color: #aaa;
        /* Light gray text for disabled buttons */
        cursor: not-allowed;
    }



    /* readmore page responsive */
    /* .pageheader {
        flex-direction: column;
        align-items: center;
    }

    .ph-info {
        flex-direction: column;
        align-items: center;
    }

    .ph-info-details,
    .ph-info-image {
        width: 100%;
    }

    .readmore-content {
        flex-direction: column;
    }

    .readmore-left,
    .readmore-right {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }

    .review-stars img {
        height: 20px;
    }

    .review-description {
        font-size: 14px;
    }

    .review-title {
        font-size: 16px;
    }
    



} */

    /* pageheader */

    .pageheader {
        flex-direction: column;
        /* Stack elements vertically */
        padding: 15px;
        gap: 200px;
        align-items: center;
        margin-bottom: 295px;



    }

    .user-url {
        padding: 20px 20px;
        margin-left: -9px;
        margin-top: -24px;
    }

    .ph-info-btn {
        width: 100%;
        display: flex;

    }

    .verified-company {
        width: 226px;
        margin-left: -25px;

    }


    .ph-info {
        flex-direction: column;
        /* Stack image and details */
        text-align: center;
        gap: 10px;
    }

    .ph-info-image div {
        width: 170px;
        height: 170px;

    }

    .ph-info-image {
        flex: none;
        width: 170px;
        height: 170px;
        /* Center the image */
    }

    .ph-info-details {
        text-align: center;
        /* Center align details */
    }

    .ph-heading {
        font-size: 30px;
        /* Smaller heading */
    }

    .ph-rating {
        font-size: 20px;
    }

    .ph-stars img {
        width: 15px;
        height: 15px;
        /* Smaller stars */
    }

    .ph-info-btn {
        text-align: center;
        /* Center align button */
        margin-top: 15px;
    }

    .verified-company {
        font-size: 0.8rem;
    }

    .ph-info-details {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* Reduced gap for smaller screens */
    }

    .detail-row {
        display: flex;
        flex-direction: column;
        /* Stack data vertically */
        width: 100%;
        /* Full width for each row */
    }

    .detail-row span,
    .detail-row p {

        /* Align text properly */
    }

    /* end pageheader */
    .readmore-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 10px;



    }

    .readmore-right,
    .readmore-left {
        width: 100%;

    }

    .readmore-right h3,
    .readmore-left h3,
    .readmore-right p,
    .readmore-left p {

        /* text-align: center; */
        /* Optional: Adjust alignment for better readability */

    }


    .custom-box {
        display: flex;
        flex-direction: column;
    }

    .share-popup {
        position: absolute;
        display: flex;
        gap: 10px;
        left: 0px;
        top: 58px;
        flex-direction: column;

    }

    .share-button {
        width: 35%;
    }

    .readmore-upper,
    .readmore-lower {
        margin-bottom: 44px;

    }

    .readmore-upper {
        padding: 0px
    }

    .readmore-left {
        margin-top: 20px;


    }

    .custom-footer {
        padding: 0px;
    }

    .login-box {
        width: 90%;
    }

    .login-box h2 {
        font-size: 20px !important;
    }

    .reg-form-heading {
        font-size: 25px;
    }

    .reg-form-content {
        display: block;
        padding: 5px 5px;

    }

    .reg-form-container {
        padding: 15px;
    }




    /* vendor dashboard */


    .leftside-menu {
        position: absolute;
        top: 0;
        left: -250px;
        /* Sidebar ko left side se hide karna */
        width: 250px;
        height: 100%;
        background-color: #333;
        transition: all 0.3s ease;
    }

    .leftside-menu.active {
        left: 0;
        /* Active hone par sidebar ko dikhana */
    }

    .leftside-menu.open {
        transform: translateX(0);
    }

    .content-page {
        margin-left: 0;
    }

    .Dashboardhamburger {
        display: block;
    }

    .container-fluid {
        padding: 15px;
    }

    /* Adjust the header */
    .page-title-box {
        padding: 10px;
    }


    /* Adjust the dashboard heading */
    .Dash-main-heading {
        background-image: url(./assets/images/dash-bg-logo.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        height: 350px;
        width: 100%;
        padding-top: 100px;
        margin-left: 0;
        text-align: center;
    }

    /* Adjust content for smaller screens */
    .dash-detail {
        padding: 20px;
    }

    /* Sidebar Toggle */
    .side-nav {
        display: flex;
        flex-direction: column;
    }

    .side-nav-item {
        padding: 10px 20px;
        font-size: 16px;
    }


    .leftside-menu {
        display: none;
        /* Initially hidden */
        position: fixed;
        /* To stay fixed on mobile */
        top: 0;
        left: 0;
        height: 100%;
        width: 250px;
        /* Adjust according to your design */
        background: #333;
        /* Sidebar color */
        z-index: 1000;
        transition: transform 0.3s ease;
        /* Animation */
    }

    .leftside-menu.active {
        display: block;
        /* Show sidebar when 'active' class is added */
        transform: translateX(0);
        /* Slide into view */
    }

    .Dashboardhamburger {
        display: block;
        /* Make the hamburger visible */
        font-size: 30px;
        /* Adjust size */
        cursor: pointer;
        z-index: 1001;
        /* Make sure it is clickable above the menu */
    }


    .search-text-field {
        padding: 20px;
        display: block;
        margin-left: -27px;
    }

    .description-box {
        height: 53px;
    }


    /* end vender dashboard */
    .description-box p {
        font-size: 19px;
    }



    /*admin dashboard*/


    .dashboard-content {
        padding-left: 0px;
    }

    .left-column {
        width: 100%;
    }

    .right-column {
        width: 40%;
    }

    .dashboard-box {
        padding: 50px 30px 50px 10px;
        position: absolute;
        top: 200px;

    }

    .logout-box {
        top: 144px;
    }

    .dashboard-box-content {
        height: auto;
    }

    .password-change-btn {
        width: 60%;
    }

    .dashboard-box-content h1 {
        font-size: 40px;
    }

    .profile-details {
        display: grid;
        grid-template-columns: none;
        gap: 15px;
    }




    /*Single page product*/



    .main-product-container {
        flex-direction: column;
        padding: 10px;
    }

    .product-section,
    .content-section {
        padding: 5px;
        width: 100%;
        text-align: center;
    }

    #product-image,
    #product-image1 {
        max-width: 100%;
    }

    .price-div {
        flex-direction: column;
        align-items: center;
    }

    .view-all-btn1 {
        width: 90%;
    }

    .quantity-div {
        justify-content: center;
    }

    .filter-section {
        text-align: center;
    }

    .size-btn,
    .color-option {
        display: inline-block;
        width: auto;
        margin: 5px auto;
    }


    /*about us */
    .faqs-section {
        margin: 0;
    }

    .about-section {
        margin: 0px 10px 80px 10px;
    }

    .service-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

    }

    .service-item h2 {
        font-size: 35px !important;
    }

    .about-row {
        padding: 0px 10px 0px 10px !important;
    }

    .about-des {
        padding: 5px !important;
    }

    .management-row {
        display: flex;
        flex-direction: column;
    }

    .management-col-img {
        width: 100% !important;
    }

    .management-col-des {
        width: 100% !important;
    }

    .about-heading {
        font-size: 25px !important;
    }

    .management-col-heading {
        font-size: 35px !important;

    }

    .management-col-img img {
        width: 100% !important;
    }

    .service-item .service-image img {
        width: 100% !important;
    }



    /*Read more page*/

    .business-details-header {
        display: flex;
        flex-direction: column;
        padding-top: 80px !important;
    }

    .business-profile-img {
        width: 100px !important;
        height: 100px !important;
    }

    .business-letter {
        font-size: 90px !important;
    }

    .business-heading {
        font-size: 30px !important;
        text-align: center;
    }

    .business-n-col {
        display: flex !important;
        gap: 8px !important;
        justify-content: center !important;
        align-items: center !important;
        margin-top: 14px !important;
    }

    .business-rating {
        font-size: 20px !important;
        text-align: center;
    }

    .business-verified-company {
        display: flex;
        justify-content: center;
    }

    .business-verified-company i {
        font-size: 20px !important;
    }

    .business-wesite p a {
        font-size: 15px !important;
    }

    .stars {
        display: flex;
        justify-content: center;
    }

    .bussiness-mai-caed {
        padding: 0px !important;
        ;
        display: flex !important;
        ;
        flex-direction: column !important;
        justify-content: center !important;

    }

    .share-button {
        width: 33% !important;
    }

    .right-card {
        width: 100% !important;
        ;
    }

    .row-inner {
        display: flex !important;
        flex-direction: column !important;
    }

    .col1-business-detail {
        width: 100% !important;
        ;
    }

    .row-bussiness-heading h1 {
        font-size: 30px !important;
    }

    .col2-business-detail {
        width: 100% !important;
    }

    .left-card {
        width: 100% !important;
        margin-top: 0px !important;
    }

    .business-details-header,
    .bussiness-mai-caed {
        z-index: 0 !important;
    }




    /*Services page*/
    .hero-section {
        height: 200px !important;
    }






    /*custome page*/


    .main-section {
        display: flex !important;
        flex-direction: column !important;
        height: 1200px !important;
        ;

    }

    .left-section {
        width: 100% !important;
    }

    .right-section {
        width: 100% !important;
    }

    #selected-shirt {
        width: 250px;
    }

    .item-display {
        position: relative !important;
        top: 20px !important;
    }

    .flex-form {
        width: 100% !important;
        margin-left: 0px !important;
        padding: 5px 20px 5px 20px !important;
    }

    .form-column {
        width: 100% !important;
    }

    .team-form-container {
        margin-left: 0px !important;
        width: 100%
    }

    .login-btn {
        border-radius: 23px !important;
    }

    .business-details-header::before {
        background-size: 360px !important;
    }















    /*user dashboard*/
    .dashboard-box {
        padding: 0px !important;
    }

    .password-change-box {
        padding: 19px;
        width: 100%;
    }




    .wrapper {
        flex-direction: column;
    }

    .leftside-menu {
        width: 100%;
        order: 2;
    }

    .content-page {
        order: 1;
    }

    .form-row {
        flex-direction: column;
    }

    .form-group {
        flex: 1 1 100%;
    }

    .leftside-menu a {
        text-align: center;
        padding: 15px;
    }

    .logo img {
        height: 80px;
    }

    .form-btn {
        width: 40% !important;
    }


    .leftside-menu {
        transform: translateX(-100%) !important;
        ;
    }

    .leftside-menu.open {
        transform: translateX(0) !important;
        ;
    }

    .dashboard-hamburger {
        display: block !important;
        ;
    }

    /*user dashboard end*/




}





/*for tab*/

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

    /*header*/
    .logo img {
        margin-left: 17px;
        margin-right: 10px;

    }

    .auth-links a {
        padding: 8px 15px;
    }

    .nav-links {
        gap: 26px;

    }

    .auth-links {
        margin: 0px;
    }

    /*end header*/

    /*Home page*/

    .textwidth {
        width: 701px;
    }

    .directory-body {
        padding-bottom: 288px;
    }

    .stay-connected-heading {
        padding-top: 251px;

    }

    .custom-submit-btn {
        width: 60%;

    }

    /*End Home Page*/

    /*readmore*/
    .bussiness-mai-caed {
        padding: 10px 25px 10px 25px !important;
    }

    .right-card {
        padding: 5px !important;

    }

    .business-box {
        overflow-wrap: anywhere;


    }

    /*end readmore*/
    .share-button {
        width: 28% !important;
    }

    .team-roster-table th {
        font-size: 10px;
        width: 100%;
    }

    .Quantity-input {
        width: 33px;
        height: 40px
    }


}

@media screen and (min-width: 820px) {

    .footer-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 0px;

    }

    .directory-body {
        padding-bottom: 486 !important;
    }

    .login-box h2 {
        font-size: 20px;
    }

    .login-box {
        margin-bottom: 191px;
    }


}












@media (max-width: 820px) and (max-height: 1180px) {
    .footer-quick-links {}
}