/* /cplts/css/home-styles.css */

/* ===========================
   Reset and Base Styles
   =========================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}


/* ===========================
   Feature Group Cards
   =========================== */

/* Feature Group Card */
.feature-group {
    background-color: #fff; /* White background */
    border: 1px solid #ddd; /* Light border */
    border-radius: 4px; /* Rounded corners */
    padding: 10px; /* Padding for content */
    margin-bottom: 10px; /* Space between cards */
    transition: box-shadow 0.3s; /* Smooth shadow transition */
    height: 150px; /* Fixed height for uniformity */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-group:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.feature-group h4 {
    font-size: 16px; /* Font size for feature group name */
    margin-bottom: 8px; /* Space below the heading */
    color: #007bff; /* Teal color */
}

.feature-group ul {
    list-style-type: none; /* Remove default list style */
    padding-left: 0;
    font-size: 14px; /* Font size for feature details */
    margin: 0; /* Remove default margin */
}

.feature-group li {
    margin-bottom: 5px; /* Space between features */
    position: relative;
    padding-left: 20px; /* Space for the check icon */
}

.feature-group li:before {
    content: "\f00c"; /* Font Awesome check icon */
    font-family: "Font Awesome 6 Free"; /* Ensure Font Awesome is loaded */
    font-weight: 900; /* Bold icon */
    position: absolute;
    left: 0;
    top: 0;
    color: #337ab7; /* Icon color */
}

/* ===========================
   Featured Slider
   =========================== */

/* Feature Card within Featured Slider */
.feature-card {
    background-color: #f9f9f9; /* Light background for contrast */
    border-radius: 4px; /* Rounded corners */
    transition: box-shadow 0.3s; /* Smooth shadow transition */
    padding: 15px; /* Padding for content */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

.feature-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Ensure all Feature Group Cards Have the Same Height and Width */
.feature-group {
    height: 150px; /* Fixed height for uniformity */
    width: 100%; /* Full width within the column */
}

/* ===========================
   Popular & Upcoming Mobiles Sections
   =========================== */

/* Popular and Upcoming Mobiles Thumbnail */
.popular-section .thumbnail {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    height: 100%; /* Ensure equal height for all cards */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s, box-shadow 0.3s;
}

.popular-section .thumbnail:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Popular and Upcoming Mobiles Images */
.popular-section img {
    width: 100%; /* Ensure the image is responsive */
    height: 150px; /* Fixed height to maintain consistency */
    object-fit: cover; /* Cover the container without distortion */
    border-radius: 10px;
    margin-bottom: 10px;
    
    
}

/* Product Name in Popular Sections */
.popular-section h4 {
    font-size: 1.6rem; /* Adjusted for better readability */
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Product Price in Popular Sections */
.popular-section p {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 1.2rem; /* Adjusted for prominence */
    color: #1abc9c; /* Teal color for price */
    font-weight: bold;
}

/* Ensure all Popular Mobile Cards Have Equal Height */
.popular-mobile {
    display: flex;
    flex-direction: column;
}

/* ===========================
   Section Headings
   =========================== */

/* Styling for the Section Heading */
.section-heading {
    font-size: 2.8rem;
    text-align: center;
    padding: 25px;
    margin: 40px 0;
    background: linear-gradient(45deg, #ffcc70 0%, #f36265 50%, #9625fb 100%);
    color: white !important;
    border-radius: 50px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background 0.3s;
}

.section-heading:hover {
    background-position: right center;
    background-size: 400% 400%;
}

.section-heading h2 {
    font-weight: bold;
    letter-spacing: 1px;
    animation: bounceInText 1.5s ease-in-out;
}

@keyframes bounceInText {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ===========================
   Responsive Adjustments
   =========================== */

/* Responsive Adjustments for Tablets and Mobile */
@media (max-width: 768px) {
    .popular-section img {
        height: 150px; /* Maintain fixed height */
    }
    .carousel-caption {
        padding: 15px;
        max-width: 90%;
    }

    .popular-section h4 {
        font-size: 1.6rem;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}

/* Custom Styles for Mobile Responsiveness */
@media (max-width: 767px) {
   

    .feature-group {
        height: 150px; /* Maintain fixed height */
    }

    .product-name {
        font-size: 16px; /* Smaller product name font */
    }

    .product-price {
        font-size: 14px; /* Smaller price font */
    }

    .section-heading {
        font-size: 24px; /* Adjust heading size for mobile */
    }

    .featured-section {
        padding: 5px; /* Reduce padding for mobile */
        margin-top:5px;
    }

    /* Ensure Feature Group Cards Stack on Small Screens */
    .feature-group {
        margin-bottom: 15px; /* Space between stacked cards */
    }
}

/* ===========================
   Additional Styling
   =========================== */



/* Positioning for Search Suggestions */
.search-form .dropdown-menu {
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
}

#search-suggestions a.dropdown-item {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
}

#search-suggestions a.dropdown-item:hover {
    background-color: #f1f1f1;
    color: #1abc9c;
}

/* ===========================
   Featured Slider Customization
   =========================== */

/* Ensure all Feature Group Cards Have the Same Height and Width */
.feature-group {
    height: 150px; /* Fixed height for uniformity */
    width: 100%; /* Full width within the column */
}

/* ===========================
   Brand Section Enhancements
   =========================== */



/* ===========================
   Sidebar Toggle Button Styling
   =========================== */

/* Ensure the toggle button is visible and properly styled */
#sidebar-toggle .icon-bar {
    background-color: #ecf0f1; /* Light icon bars */
}

/* Adjust z-index to ensure the toggle button is above the sidebar */
#sidebar-toggle {
    z-index: 1100;
}