style.css

/*
Theme Name: SpeedPress
Theme URI: https://github.com/Finland93/SpeedPress
Author: Finland93
Author URI: https://github.com/Finland93/
Description: Lightweight WordPress theme without block editors and using only Bootstrap 5, this theme is for persons who likes to build HTML websites, checkout our free templates from our home page.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Typography */
a, button {
    font-family: 'Roboto Condensed', sans-serif;
    font-size:18px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-size:28px;
}

p, ul, ol, main, li, span {
    font-family: 'Lato', sans-serif;
    font-size:18px;
}


/* Footer */
footer a {
    color: white !important;
}

.footer {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
    margin-top: 30px;
}

.footer p {
    margin: 0;
}

.footer-widget-title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

/* Container */
.container {
    max-width: 1140px !important; 
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 1px grey; 
    border-radius: 0;
    border: 0 !important;
}
 
::-webkit-scrollbar-thumb {
    background: black;
    height: 10px;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 40vh;
    overflow: hidden;
}

.hero-section img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* Sidebar Widget */
.sidebar-widget {
    margin-bottom: 10px; 
    padding: 10px;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.sidebar {margin-bottom: 20px;}

/* Navbar */
.navbar {
    background-color: #343a40; /* Dark background */
    padding: 1rem;
    transition: background-color 0.3s ease;
}

.navbar .navbar-brand {
    font-size: 1.5rem;
    color: #fff; /* White text color */
    font-weight: bold;
    transition: color 0.3s ease;
}

.navbar .navbar-brand:hover {
    color: #f8f9fa; /* Slightly lighter white on hover */
}

.navbar .navbar-nav .nav-link {
    color: #ddd; /* Light gray text color */
    font-size: 1rem;
    transition: color 0.3s ease;
}

.navbar .navbar-nav .nav-link:hover {
    color: #fff; /* White text color on hover */
}

.navbar .navbar-nav .nav-item.active .nav-link {
    color: #fff; /* White text color for active item */
    font-weight: bold;
}

.navbar .navbar-toggler {
    border: none;
}

.navbar .navbar-toggler-icon {
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath stroke="rgba%28255, 255, 255, 0.5%29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
}

/* Dropdown Menu Styling */
.navbar .dropdown-menu {
    background-color: #343a40; /* Same as navbar */
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.navbar .dropdown-menu .dropdown-item {
    color: #ddd;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar .dropdown-menu .dropdown-item:hover {
    color: #fff;
    background-color: #495057; /* Darker background on hover */
}


/* Page Title */
.page-title {
    border-bottom: 1px solid black;
    padding-bottom: 5px;
}

/* Card on archive & Category */
    .card {
        border: none;
        border-radius: 0.75rem;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .card-img-top {
        border-top-left-radius: 0.75rem;
        border-top-right-radius: 0.75rem;
    }

    .card-body {
        padding: 1.25rem;
    }

    .card-title a {
        text-decoration: none;
        color: #333;
        transition: color 0.3s ease;
		font-size:18px!important;
    }

    .card-title a:hover {
        color: #007bff;
    }

    .card-text {
        font-size: 0.9rem;
        color: #555;
    }

/* Sticky sidebar for blog */
.sidebar {
  position: -webkit-sticky; 
  position: sticky;
  top: 0; 
  z-index: 1000; 
}

/* Mobile Styling */
@media (max-width: 991.98px) {
    .navbar .navbar-collapse {
        background-color: #343a40; /* Same as navbar */
        padding: 1rem;
    }

    .navbar .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
        color: #ddd; /* Light gray text color */
    }

    .navbar .navbar-nav .nav-link:hover {
        color: #fff; /* White text color on hover */
    }
}

@media screen and (max-width: 767px) {
    .sidebar {
        margin-top: 10px;
    }
}


/* WooCommerce */
.updateCart {float: right!important;}
.form-row, .woocommerce-input-wrapper > input {display: block; width: 100% !important;}
.woocommerce-checkout-review-order-table {width: 50%!important; float: left!important;}
#payment{width: 50%!important; float: right!important;}
#order_review {display: inline-block;}

.product-image {
    width: 80px; 
    height: auto;
    display: block;
    margin: 0 auto; 
    border-radius: 5px; 
}

.table th, .table td {
    vertical-align: middle;
    text-align: center; 
}

.product-link {
    text-decoration: none;
    color: #333;
    display: inline-block;
    margin-left: 10px;
}

.product-link:hover {
    color: #007bff;
    text-decoration: underline;
}

.table {
    margin-bottom: 0; 
	  border-collapse: collapse;
    overflow-x: auto;
}

.product-container {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	  margin-bottom:40px!important;
}

.main-product-image {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

#main-product-image {
    min-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.carousel-inner img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.carousel-control-prev, .carousel-control-next {
    width: 5%;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: rgba(0,0,0,0.5);
    border-radius: 50%;
}

.product_title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.woocommerce-product-short-description {
    margin-bottom: 15px;
}

.woocommerce-product-price {
    font-size: 1.5rem;
    color: #e74c3c;
    font-weight: bold;
    margin-bottom: 15px;
}

.woocommerce-product-add-to-cart {
    margin-bottom: 15px;
}

.nav-tabs {
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 10px 15px;
    margin-bottom: -1px;
    font-weight: bold;
    color: #333;
}

.nav-tabs .nav-link.active {
    color: #000;
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.tab-content {
    border: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
    padding: 20px;
}

.PR-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.PR-table th, .PR-table td {
    padding: 15px;
    text-align: left;
    border: 1px solid #ddd;
}

.PR-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.PR-table tr:nth-child(even) {
    background-color: #f9f9f9;
}


@media (max-width: 768px) {
   .product-image {
        width: 60px; 
    }
	
    .PR-table thead {
        display: none;
    }
	
	.PR-table th {display: block;width: 100%!important;}
	.woocommerce-cart-form {
		overflow-x: auto;
    -webkit-overflow-scrolling: touch;
	}
	
	.table {
		border-collapse: collapse;
		width: 100%;
	  }
	
	#payment, .shop_table {width: 100%!important; margin-bottom: 20px!important;  }
	
    .PR-table, .PR-table tbody, .PR-table tr, .PR-table td {
        display: block;
        width: 100%;
    }

    .PR-table tr {
        margin-bottom: 15px;
        border-bottom: 1px solid #ddd;
    }

    .PR-table td {
        position: relative;
        white-space: nowrap;
    }

    .PR-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        color: #333;
        background-color: #f4f4f4;
        border-right: 1px solid #ddd; 
    }
}

.modal-content {
    border-radius: 8px;
    padding: 20px;
}

.modal-body img {
    max-width: 100%;
    height: auto;
}

.mt-5 h2 {
    font-size: 1.75rem;
    margin-bottom: 20px;
    color: #333;
}

.woocommerce ul.products {
    margin: 0 -15px;
}

.woocommerce ul.products li.product {
    margin: 15px;
}

.btn {
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.mt-auto {
    text-align: center !important;
}

.btn-primary, 
.add-to-cart-button, 
.ajax_add_to_cart, 
#place_order {
    background-color: #e74c3c !important;
    color: #000 !important;
}

.btn-primary:hover {
    background-color: #c0392b;
}

.woocommerce-product-add-to-cart .button, 
.add-to-cart-button, 
.ajax_add_to_cart {
    display: inline-block !important;
    padding: 12px 20px !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    text-transform: uppercase;
    color: #000 !important;
    background-color: #e74c3c !important; 
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    text-align: center !important;
    text-decoration: none !important;
    margin-top: 10px !important;
}

.woocommerce-product-add-to-cart .button:hover, 
.woocommerce-product-add-to-cart .button:focus, 
.add-to-cart-button:hover, 
.ajax_add_to_cart:hover {
    background-color: #c0392b; 
    transform: translateY(-2px);
}

.woocommerce-product-add-to-cart .button.disabled,
.woocommerce-product-add-to-cart .button:disabled {
    background-color: #bbb;
    color: #666;
    cursor: not-allowed;
    pointer-events: none;
    transform: none; 
}

li.product-category::marker {
    content: none;
}

.entry-meta{display:none;}

.woocommerce-product-price .woocommerce-Price-amount, .card-text .woocommerce-Price-amount  {color: green!important; font-size: 30px!important;}