.navbar-expand-sm {
    background-color: #d1cfcf;
}

.navbar1 {
    background-color: #dbdbdb;
}

.navbar2 {
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 8px 12px;
}

.navbar3 {
    background-color: white;
}

.img-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 170px; /* Set a fixed height for the image container */
    overflow: hidden; /* Crop any overflow */
}

.img-fixed {
    width: auto; /* Keep the natural width */
    height: 100px; /* Set a fixed height for the image */
    object-fit: contain; /* Maintain aspect ratio */
}

.carousel.full-width {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw; /* Full viewport width */
}

/* Ensure images fit */
.carousel-inner img {
    height: auto;
    width: 100%;
    object-fit: cover;
}

.icon {
    color: #ffc000 !important;
}

.icon1 {
    color: #ffc000;
}

.btn1 {
    background-color: black;
    color: white;
}

.custom-btn {
    background-color: #2b65ea !important;
    color: white !important;
    border-color: #2b65ea !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
    width: 200px;
}

    .custom-btn:hover {
        background-color: #f09151 !important;
        color: white !important;
        border-color: #f09151 !important;
        transform: scale(1.05) !important;
        text-decoration: none !important;
    }

.info ul li {
    list-style: none;
}

    .info ul li a {
        text-decoration: none;
        color: black;
    }

.footer {
    background-color: #dae3f3 !important;
    width: 100% !important;
    padding: 10px 0 !important;
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: absolute;
}

.copyright {
    background-color: #002f34 !important;
    color: white !important;
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: absolute;
}

.location-search {
    width: 500px !important;
}

.copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
}

    .copyright p {
        margin: 0;
    }


.carousel-caption.c-caption {
    /*  position: absolute;*/
    /*top: 60%;*/
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white; /* Optional for readability */
    padding: 10px; /* Optional for spacing */
    border-radius: 5px; /* Optional for rounded corners */
}

/* Centered caption */
.carousel-caption.centered-caption {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white; /* Optional for readability */
    padding: 10px; /* Optional for spacing */
    border-radius: 5px; /* Optional for rounded corners */
}

.carousel-caption.centered-caption1 {
    position: absolute;
    top: 60%;
    left: 30%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white; /* Optional for readability */
    padding: 10px; /* Optional for spacing */
    border-radius: 5px; /* Optional for rounded corners */
}


/* Keyframes for sliding in from the left */
@keyframes slideInFromLeft {
    0% {
        transform: translate(-150%, -50%); /* Start off-screen to the left */
        opacity: 0; /* Fully transparent */
    }

    100% {
        transform: translate(-50%, -50%); /* End at the centered position */
        opacity: 1; /* Fully visible */
    }
}

/* Centered caption with slide animation */
.carousel-caption.centered-caption {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-150%, -50%); /* Initial position off-screen */
    text-align: center;
    color: white;
    padding: 10px;
    border-radius: 5px;
    animation: slideInFromLeft 1s ease-out forwards; /* Apply animation */
}

/* Keyframes for sliding in from the left */
@keyframes slideInFromFarLeft {
    0% {
        transform: translate(-150%, -50%); /* Start off-screen to the left */
        opacity: 0; /* Fully transparent */
    }

    100% {
        transform: translate(-50%, -50%); /* End at the specified position */
        opacity: 1; /* Fully visible */
    }
}

/* Centered caption1 with slide animation */
.carousel-caption.centered-caption1 {
    position: absolute;
    top: 60%;
    left: 30%; /* Adjusted for the new position */
    transform: translate(-150%, -50%); /* Initial position off-screen */
    text-align: center;
    color: white;
    padding: 10px;
    border-radius: 5px;
    animation: slideInFromFarLeft 1s ease-out forwards; /* Apply animation */
}

.carousel-caption.centered-caption2 {
    position: absolute;
    top: 60% !important;
    left: 25%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white; /* Optional for readability */
    padding: 10px; /* Optional for spacing */
    border-radius: 5px; /* Optional for rounded corners */
}


/* Keyframes for sliding in from the left */
@keyframes slideInFromFarLeft {
    0% {
        transform: translate(-150%, -50%); /* Start off-screen to the left */
        opacity: 0; /* Fully transparent */
    }

    100% {
        transform: translate(-50%, -50%); /* End at the specified position */
        opacity: 1; /* Fully visible */
    }
}

/* Centered caption1 with slide animation */
.carousel-caption.centered-caption2 {
    position: absolute;
    top: 55%;
    left: 25%; /* Adjusted for the new position */
    transform: translate(-150%, -50%); /* Initial position off-screen */
    text-align: center;
    color: white;
    padding: 10px;
    border-radius: 5px;
    animation: slideInFromFarLeft 1s ease-out forwards; /* Apply animation */
}

.position-relative {
    position: relative;
}

.top-0 {
    top: 10px;
}

.end-0 {
    right: 10px;
}

.p-2 {
    padding: 5px;
}

.rupee-icon {
    height: 15px !important;
    width: 15px !important;
    vertical-align: middle !important; /* Ensures proper alignment with text */
}



/* Ensures carousel slides contain 4 cards */
.carousel-inner {
    display: flex;
}



.card {
    height: 400px !important;
    display: flex !important;
    flex-direction: column !important;
}



.carousel-control-prev {
    left: -50px !important; /* Move the left arrow outside the card */
}

.carousel-control-next {
    right: -50px !important; /* Move the right arrow outside the card */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(30%) brightness(80%); /* Makes the arrow grey */
}

    .carousel-control-prev-icon:hover,
    .carousel-control-next-icon:hover {
        filter: invert(30%) brightness(60%); /* Darker grey on hover */
        transition: filter 0.3s ease; /* Smooth transition */
    }


.d-none {
    display: none !important;
}

.card-img-top {
    height: 200px !important;
    width: 100%;
    object-fit: contain;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0,0.5) !important; /* Reduce opacity of backdrop */
}

@media (max-width: 767.98px) {
    #signInModal .modal-dialog {
        max-width: 90%; /* Wider width for smaller screens */
    }
}

/* Medium screens (tablets) and larger */
@media (min-width: 768px) {
    #signInModal .modal-dialog {
        max-width: 30%; /* Narrower width for medium and larger screens */
    }
}
/*
.d-none {
    display: none !important;
}*/

body, html {
    overflow-x: hidden;
}

label {
    font-weight: bold;
}

.form-group {
    margin-bottom: 15px;
}


/* Mega Menu Styling */
.mega-menu {
    width: 98vw !important; /*Full width*/
    left: 0;
    right: 0;
    top: 100%;
    position: absolute;
    background: white;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: none; /*Hidden by default */
    z-index: 1000;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* Show Mega Menu on Click */
.nav-item.dropdown.show .mega-menu {
    display: block;
}

/* Make Links Look Good */
.mega-menu ul {
    padding-left: 0;
}

    .mega-menu ul li {
        list-style: none;
    }

        .mega-menu ul li a {
            text-decoration: none;
            color: black;
            display: block;
            padding: 5px 0;
            font-size: 14px;
        }

            .mega-menu ul li a:hover {
                text-decoration: underline;
                color: #007bff;
            }

/* Fix Alignment and Prevent Overlapping */
.navbar {
    position: relative;
    z-index: 1050;
}

/* Adjust Spacing */
.mega-menu .col-md-2 {
    padding: 10px;
}



.rotate {
    animation: rotate 5s infinite linear;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@media (max-width: 576px) {
    .modal-dialog {
        max-width: 90%;
        margin: auto;
    }
}

body.modal-open {
    padding-right: 0 !important;
}

.navbar2 {
    position: relative;
    z-index: 1000;
}

/* Remove padding/margin from Bootstrap containers and rows */
.custom-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden;
}

/* Make sure body & HTML don't add spacing */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Optional: Remove Bootstrap gutter spacing between columns */
.recommendation-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

    .recommendation-row > [class^="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }


@media (min-width: 768px) {
    .custom-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/*.hidden {
    display: none;
}*/

.profile-container {
    position: relative;
    /* display: inline-block;*/
}

.profile-icon {
    width: 40px;
    height: 40px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-weight: bold;
    justify-content: center;
}

.popup-box {
    display: none;
    /*position: absolute;*/
    top: 50px;
    right: 0;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-radius: 8px;
    width: 250px;
    padding: 15px;
    z-index: 1000;
}

    .popup-box h3 {
        margin-top: 0;
        margin-bottom: 5px;
    }

    .popup-box button {
        width: 100%;
        background-color: #002f6c;
        color: white;
        padding: 8px;
        border: none;
        border-radius: 5px;
        margin-bottom: 10px;
        cursor: pointer;
    }

.progress-bar {
    background-color: #ddd;
    border-radius: 5px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress {
    width: 70%;
    background-color: #ffc107;
    height: 100%;
}

.popup-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
}

    .popup-link:hover {
        text-decoration: underline;
    }

.custom-heart {
    font-size: 20px; /* or whatever size you want */
}

.image-container img {
    max-height: 180px;
    object-fit: cover;
    width: 100%;
    padding-top: 2px;
}

.location-popup {
    position: absolute;
    top: 45px;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 250px;
    border-radius: 8px;
}

.location-option {
    padding: 8px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

    .location-option:hover {
        background-color: #f1f1f1;
    }

.location-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.current-location {
    color: #007bff;
    font-weight: bold;
}

.ad-container {
    width: 100%;
    height: 140px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1rem;
    margin: 0 0.5rem; /* Adds breathing room on small screens */
}

.nav-item.dropdown * {
    font-weight: bold;
    color: black;
}

.navbar2 * {
    color: black !important;
}

.navbar2 .dropdown-menu li a {
    color: black !important;
    font-weight: normal; /* optional: if you want li links not to be bold */
}

/* Make all h6 headings inside the mega menu bold and black */
.navbar2 .dropdown-menu h6 {
    color: black !important;
    font-weight: bold !important;
}

.category-toggle {
    background: transparent;
    border: none;
    font-size: 20px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .category-toggle .arrow {
        display: inline-block;
        transition: transform 0.3s ease;
    }

     /*Rotate arrow when dropdown is shown */
    .category-toggle[aria-expanded="true"] .arrow {
        transform: rotate(180deg);
    }
.a-card {
    background-color: #4b65ac !important;
}

.a-card1 {
    background-color: #edb225 !important;
}

.a-card2 {
    background-color: #5ca3d4 !important;
}

.a-card3 {
    background-color: #3c80bf !important;
}

.a-card4 {
    background-color: #ed902c !important;
}

.a-card5 {
    background-color: #e58161 !important;
}

.a-card, .a-card1, .a-card2, .a-card3, .a-card4, .a-card5 {
    border: none !important;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    /*margin-top: 10px;
    margin-bottom: 10px;*/
    border-radius: 5px;
    /*  background-color: #20c997;*/
    color: white;
    transition: 0.5s;
    height: 270px !important;
    /*  width:300px !important;*/
    padding: 10px;
    font-size: 14px;
    font-family: Arial;
    /* height: 15.5em;*/
}

    .a-card a, .a-card1 a, .a-card2 a, .a-card3 a, .a-card4 a, .a-card5 a {
        text-decoration: none;
        color: white;
    }

        .a-card a:hover, .a-card1 a:hover, .a-card2 a:hover, .a-card3 a:hover, .a-card4 a:hover, .a-card5 a:hover {
            color: #2c3756;
        }

    .a-card:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }

    .a-card1:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }


    .a-card2:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }


    .a-card3:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }

    .a-card4:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }

    .a-card5:hover {
        box-shadow: 0 5px 5px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        transform: scale(1.05);
    }

.colon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
}

.sidenav {
    /*    height: 400px;*/
    width: 230px;
    /*position: fixed;*/
    z-index: 1;
    top: 0;
    left: 0;
    background-color: white;
    overflow-x: hidden;
    /* padding-top: 100px;*/
}

    .sidenav a, .dropdown-btn {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 20px;
        color: black;
        display: block;
        border: none;
        background: none;
        width: 100%;
        text-align: left;
        cursor: pointer;
        outline: none;
        font-size: 1.063rem;
        font-weight: 600;
    }


        .sidenav a:hover, .dropdown-btn:hover {
            /*  color:green;*/
        }

.dropdown-container {
    /*display: none;*/
    /*    background-color: #262626;*/
    /*    padding-left: 8px;*/
}

    .dropdown-container a {
        color: #676666;
        font-size: 0.938rem;
    }

        .dropdown-container a:hover {
            color: black;
            font-weight: 700;
        }


.fa-caret-right {
    float: right;
    /*   padding-right: 18px;*/
    padding-top: 7px;
}



.dropdown-container {
    display: none;
}

.dropdown-btn {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}