/* General Styles */

body {

    font-family: "Times New Roman", Times, serif;

    background-color: rgb(239, 234, 231);

    font-weight: bolder;

    padding-top: 70px; /* Offset for fixed navbar */

}



/* Navbar Styles */

.custom-navbar {

    background: linear-gradient(90deg, #ff6a00, #d48a62);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

    padding: 0.5rem 0;

    transition: all 0.3s ease;

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

}



.custom-navbar .logo-img {

    height: 36px;

    width: 36px;

    border-radius: 6px;

}



.custom-navbar .brand-name {

    font-weight: 700;

    font-size: 1.5rem;

    color: #fff;

    margin-left: 4px;

    transition: color 0.3s ease;

}



.custom-navbar .nav-link {

    color: #fff !important;

    font-weight: 500;

    margin-right: 6px;

    transition: transform 0.3s ease, background-color 0.3s ease;

}



.custom-navbar .nav-link:hover {

    background-color: rgba(255, 255, 255, 0.2);

    border-radius: 5px;

    transform: translateY(-2px);

}



.custom-navbar .dropdown-menu {

    border-radius: 0.4rem;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);

}



.custom-navbar .dropdown-item:hover {

    background-color: #f8f9fa;

}



/* Deal Cards */

.deal-card {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-radius: 8px;

    overflow: hidden;

    border: none;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

    animation: fadeInUp 0.5s ease-out;

    position: relative;

}



.deal-card:hover {

    transform: translateY(-6px) scale(1.02);

    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);

}



.deal-card .card-img-top {

    height: 150px;

    object-fit: contain;

    padding: 8px;

    background-color: #f8f9fa;

    transition: transform 0.3s ease;

}



.deal-card:hover .card-img-top {

    transform: scale(1.06);

}



/* Expired Deal Styling */

.deal-expired {

    position: relative;

    pointer-events: none;

}



.deal-expired .expired-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.7);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1;

}



.deal-expired .expired-text {

    color: #fff;

    font-weight: bold;

    font-size: 1rem;

    text-transform: uppercase;

    background: #e53935;

    padding: 5px 10px;

    border-radius: 4px;

    animation: pulse 2s infinite;

}



.deal-expired:hover {

    transform: none;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

}



.deal-expired .card-img-top:hover {

    transform: none;

}



/* Category Cards */

.category-card {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-radius: 6px;

    overflow: hidden;

    border: none;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    text-align: center;

    padding: 12px 0;

    animation: fadeInUp 0.5s ease-out;

}



.category-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

    background-color: #f8f9fa;

}



.category-link {

    text-decoration: none;

    color: inherit;

    display: block;

}



/* Category Scroll */

.category-scroll::-webkit-scrollbar {

    display: none;

}



.category-scroll {

    -ms-overflow-style: none;

    scrollbar-width: none;

}



/* Platform Cards */

.platform-card {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-radius: 6px;

    overflow: hidden;

    border: 1px solid #ddd;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    text-align: center;

    padding: 10px 0;

    animation: fadeInUp 0.5s ease-out;

}



.platform-card:hover {

    transform: translateY(-6px) scale(1.02);

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

    background-color: #f8f9fa;

}



.platform-link {

    text-decoration: none;

    color: inherit;

    display: block;

}



.platform-logo {

    max-height: 60px;

    padding: 4px;

    background-color: #fff;

    border-radius: 4px;

}







/* Exclusive Slider */

.exc-wrapper {

    position: relative;

    z-index: 1;

    margin-bottom: 10px;

}



.slider {

    height: 110px;

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

    width: 100%;

    background-color: rgb(199, 211, 201);

}



.slide-track {

    display: flex;

    animation: scroll 40s linear infinite;

    width: calc(250px * 8);

}



.slide {

    height: 100px;

    width: 250px;

    display: flex;

    align-items: center;

    padding: 5px;

}



.slide img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 6px;

}



/* Common Carousel Deals Section */

.carouseldeals-container {

    display: flex;

    overflow-x: auto;

    padding: 6px;

    gap: 10px;

    scroll-behavior: smooth;

    background-color: rgb(199, 211, 201);

}



.carouseldeals-container::-webkit-scrollbar {

    height: 5px;

}



.carouseldeals-container::-webkit-scrollbar-thumb {

    background: #888;

    border-radius: 3px;

}



.carousel-deal {

    flex: 0 0 auto;

    text-align: center;

    padding: 6px;

    border: 1px solid #eee;

    border-radius: 6px;

    width: 200px;

    background: #fff;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    animation: slideInLeft 0.5s ease-out;

    position: relative;

}



.carousel-deal:hover {

    transform: translateY(-4px);

    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

}



.carousel-deal img {

    max-height: 200px;

    object-fit: contain;

    transition: transform 0.3s ease;

}



.carousel-deal:hover img {

    transform: scale(1.06);

}



.carousel-deal .card-title {

    font-size: 0.85rem;

    margin: 6px 0;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.carousel-deal .card-text {

    font-size: 0.7rem;

    margin-bottom: 6px;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

    text-overflow: ellipsis;

}



.carousel-deal .deal-link {

    text-decoration: none;

    color: inherit;

    display: block;

}



.original-price {

    color: #e53935;

    font-size: 0.75rem;

    margin: 0 6px 0 0;

    text-decoration: line-through;

}



.deal-price {

    font-weight: bold;

    color: #e53935;

    font-size: 1rem;

    margin: 0;

    animation: highlightPrice 1.5s infinite;

}



.btn-gradient {

    background: linear-gradient(45deg, #ff4d4f, #ff9a00);

    color: white;

    border: none;

    padding: 3px 6px;

    font-size: 0.75rem;

    transition: transform 0.3s ease;

}



.btn-gradient:hover {

    transform: scale(1.04);

    background: linear-gradient(45deg, #ff9a00, #ff4d4f);

}



.btn-gradient-view-all {

    background: linear-gradient(45deg, #ff4d4f, #ff9a00);

    color: white;

    border: none;

    padding: 3px 6px;

    font-size: 0.75rem;

    transition: transform 0.3s ease, background 0.3s ease;

}



.btn-gradient-view-all:hover {

    transform: scale(1.05);

    background: linear-gradient(45deg, #ff9a00, #ff4d4f);

}



/* Share Button */

.share-btn {

    font-size: 0.7rem;

    padding: 4px 8px;

    transition: background-color 0.3s ease, transform 0.3s ease;

}



.share-btn:hover {

    background-color: #e9ecef;

    transform: scale(1.05);

}



/* Ribbon Banner Styling */

.ribbon {

    margin: 0;

    padding: 0;

    background: #ff4d4f;

    color: white;

    padding: 0.5rem 1rem;

    position: relative;

    font-size: 1.1rem;

    font-weight: bold;

    text-transform: uppercase;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    overflow: hidden;

    border-radius: 4px;

}



.ribbon .text {

    position: relative;

    z-index: 2;

}



.ribbon::before,

.ribbon::after {

    content: '';

    position: absolute;

    top: 0;

    width: 30px;

    height: 100%;

    background: linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%);

    z-index: 1;

}



.ribbon::before {

    left: -15px;

    transform: skewX(-30deg);

}



.ribbon::after {

    right: -15px;

    transform: skewX(30deg);

}



/* Animations */

@keyframes scroll {

    0% { transform: translateX(0); }

    100% { transform: translateX(calc(-250px * 4)); }

}



@keyframes fadeInUp {

    from { opacity: 0; transform: translateY(20px); }

    to { opacity: 1; transform: translateY(0); }

}



@keyframes slideInLeft {

    from { opacity: 0; transform: translateX(-20px); }

    to { opacity: 1; transform: translateX(0); }

}



@keyframes pulse {

    0% { transform: scale(1); }

    50% { transform: scale(1.1); }

    100% { transform: scale(1); }

}



@keyframes highlightPrice {

    0% { transform: scale(1); }

    50% { transform: scale(1.1); }

    100% { transform: scale(1); }

}



/* Responsive Adjustments */

@media (max-width: 768px) {

    #dealsCarousel .carousel-img {

        height: 200px;

    }



    #dealsCarousel .carousel-caption {

        padding: 0.5rem;

        font-size: 0.8rem;

    }



    #dealsCarousel .carousel-caption h5 {

        font-size: 1rem;

    }



    .carouseldeals-container {

        gap: 8px;

    }



    .carousel-deal {

        width: 160px;

    }



    .carousel-deal img {

        max-height: 150px;

    }



    .carousel-deal .card-title {

        font-size: 0.75rem;

    }



    .carousel-deal .card-text {

        font-size: 0.65rem;

    }



    .deal-price {

        font-size: 0.9rem;

    }



    .original-price {

        font-size: 0.7rem;

    }



    .ribbon {

        font-size: 0.9rem;

        padding: 0.4rem 0.8rem;

    }



    .deal-card .card-img-top {

        height: 120px;

    }



    .slider {

        height: 80px;

    }



    .slide {

        height: 70px;

        width: 200px;

    }



    .slide-track {

        width: calc(200px * 8);

    }



    @keyframes scroll {

        0% { transform: translateX(0); }

        100% { transform: translateX(calc(-200px * 4)); }

    }

}



@media (max-width: 576px) {

    #dealsCarousel .carousel-img {

        height: 150px;

    }



    #dealsCarousel .carousel-caption {

        font-size: 0.7rem;

    }



    #dealsCarousel .carousel-caption h5 {

        font-size: 0.9rem;

    }



    .carouseldeals-container {

        gap: 6px;

    }



    .carousel-deal {

        width: 140px;

    }



    .carousel-deal img {

        max-height: 120px;

    }



    .carousel-deal .card-title {

        font-size: 0.7rem;

    }



    .carousel-deal .card-text {

        font-size: 0.6rem;

    }



    .deal-price {

        font-size: 0.85rem;

    }



    .original-price {

        font-size: 0.65rem;

    }



    .ribbon {

        font-size: 0.8rem;

        padding: 0.3rem 0.6rem;

    }



    .deal-card .card-img-top {

        height: 100px;

    }



    .slider {

        height: 60px;

    }



    .slide {

        height: 50px;

        width: 150px;

    }



    .slide-track {

        width: calc(150px * 8);

    }



    @keyframes scroll {

        0% { transform: translateX(0); }

        100% { transform: translateX(calc(-150px * 4)); }

    }

}



/* Featured Deals Grid */

#featured-deals-grid .row {

    display: flex;

    flex-wrap: wrap;

}



#featured-deals-grid .col {

    flex: 0 0 33.333333%;

    max-width: 33.333333%;

}



/* Ensure 3 columns on all screen sizes */

@media (max-width: 768px) {

    #featured-deals-grid .col {

        flex: 0 0 33.333333%;

        max-width: 33.333333%;

    }

}



@media (max-width: 576px) {

    #featured-deals-grid .col {

        flex: 0 0 33.333333%;

        max-width: 33.333333%;

    }

}





.banner-img {

    width: 100%;

    max-height: 100vh; /* fill full screen height */

    object-fit: contain; /* ensures full image is visible without cropping */

}



.carousel-caption {

    font-size: 14px;

    background-color: rgba(0, 0, 0, 0.4);

    padding: 10px;

}



/* Optional: hide carousel caption on very small screens */

@media (max-width: 576px) {

    .carousel-caption h6,

    .carousel-caption small {

        font-size: 12px;

    }

}



.section-heading {

    margin: 0;

    padding: 0;

    background: #ff4d4f;

    color: white;

    padding: 0.5rem 1rem;

    display: inline-block;

    position: relative;

    font-size: 1.1rem;

    font-weight: bold;

    text-transform: uppercase;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    overflow: hidden;

    border-radius: 4px;

}
/* Remove underline from all links */
a {
    text-decoration: none !important;
}

/* Keep text white and remove underline on hover/focus too */
a:hover, a:focus {
    text-decoration: none !important;
    color: inherit; /* optional: keeps the same color */
}




/* Smaller font size on small screens */

@media (max-width: 576px) {

    .section-heading {

        font-size: 1rem;

        padding: 0.3rem 0.8rem;

    }

}







.ads-horizontal-container {

    text-align: center;

    margin: 1rem 0;

  }



  .ads-horizontal-container ins.adsbygoogle {

    display: inline-block;

    width: 100%;

    max-width: 728px;

    height: 90px; /* desktop default */

  }



  @media (max-width: 768px) {

    .ads-horizontal-container ins.adsbygoogle {

      height: 40px; /* smaller height for tablets/mobiles */

    }

  }



  @media (max-width: 480px) {

    .ads-horizontal-container ins.adsbygoogle {

      height: 40px; /* even smaller for very small screens */

    }

  }

  /* Custom Breadcrumb Styles */
.breadcrumb {
    background-color: #f8f9fa; /* Light background for contrast */
    padding: 12px 20px; /* More padding for a spacious look */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    font-size: 0.95rem; /* Slightly smaller font for elegance */
}

/* Style for breadcrumb items */
.breadcrumb-item {
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Style for links */
.breadcrumb-item a {
    color: #007bff; /* Bootstrap primary color */
    text-decoration: none; /* Remove default underline */
    font-weight: 500; /* Medium weight for better readability */
    padding: 4px 8px; /* Small padding for better click area */
    border-radius: 4px; /* Rounded link background */
}

/* Hover effect for links */
.breadcrumb-item a:hover {
    background-color: #e9ecef; /* Light gray background on hover */
    color: #0056b3; /* Darker shade of primary color */
}

/* Active breadcrumb item */
.breadcrumb-item.active {
    color: #343a40; /* Darker color for active item */
    font-weight: 600; /* Bold for emphasis */
}

/* Custom separator */
.breadcrumb-item + .breadcrumb-item::before {
    content: "\f054"; /* Font Awesome chevron-right icon (or use Bootstrap's default) */
    font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome is included */
    font-weight: 900;
    color: #6c757d; /* Gray for separator */
    margin: 0 8px; /* Space around separator */
}

/* Optional: Gradient background for a modern look */
.breadcrumb {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef); /* Subtle gradient */
}

/* Animation for breadcrumb items on hover */
.breadcrumb-item a:hover {
    transform: translateY(-1px); /* Slight lift effect */
}