:root {
    --primary-blue: #062038;
    --secondary-blue: #3F678D;
    --light-blue: #94C9F4;
    --primary-red: #DB2A27;
    --secondary-red: #BC2A27;
    --light: #FFFFFF;
    --dark: #000000;
}

*{
	margin: 0px;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 1.3rem;
}

body:hot(home) a {
    color: var(--dark);
}

h1 {
    margin-bottom: 2rem;
}

header.site-header {
	background-color: var(--primary-blue);
	max-width: 100%;
}

.pre-header{
	max-width: 95%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	padding: 0 0 10px 0;
	border-bottom: 1px solid var(--secondary-blue);
}

.pre-header p, .pre-header a{
	color: #fff;
	font-size: 1.2rem;
	text-decoration: none;
    margin-bottom: 0;
}

.main-head {
	max-width: 95%;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
	padding: 10px 0;
}

.main-logo {
    max-width: 150px;
}

.main-logo img{
	border-radius: 5px;
	width: 100%;
    height: auto;
}

.main-nav {
    margin-top: 20px;
}

.main-nav ul{
	max-width: 1400px;
	display: flex;
	justify-content: space-between;
	list-style-type: none;
    margin-bottom: 0;
    padding-left: 0;
}

.main-nav li{
	color: var(--light);
	font-size: 1.2rem;
	padding: 10px;
	cursor: pointer;
	position: relative;
}

.main-nav a{
	color: var(--light);
	font-size: 1.2rem;
	text-decoration: none;
}

.main-nav a:hover{
	color: var(--secondary-blue);
}

.main-head li:hover > ul{
	display: block;
}

.main-head ul li ul{
	position: absolute;
	display: none;
	background-color: var(--secondary-blue);
	right: 0px;
	width: 250px;
	padding-left: 0;
	padding-top: 0;
    z-index: 9999;
}

.main-head ul li li {
	padding: 0;
}

.main-head ul li li a {
	padding: 10px;
    display: block;
}

.main-head ul li li a:hover,
.main-head ul li li a:focus,
.main-head ul li li a:active {
	color: var(--light);
    background-color: var(--light-blue);
}

.main-nav ul li li a:focus,
.main-nav ul li li a:active
.main-nav ul li li a:hover {
	opacity: .7;
    color: var(--light);
}

.hamburger-menu{
	display: none;
}

.mobile-nav{
	display: none;
}

.site-footer {
    background-color: var(--primary-blue);
    color: var(--light);
    font-size: 1rem;
}

.site-footer a {
    color: var(--light-blue);
}
.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links a {
    color: var(--light);
    text-decoration: none;;
}

@media only screen and (max-width: 1164px){
	.main-nav{
		display: none;
	}
	
	.main-head{
		justify-content: space-between;
	}
	
	.main-logo img{
		margin-bottom: 0px;
	}
	
	.hamburger-menu{
		display: block;
		width: 40px;
  		height: 20px;
  		flex-direction: column;
  		justify-content: center;
  		align-items: center;
  		cursor: pointer;
	}
	
}

@media only screen and (max-width: 800px){
	.contact-info{
		display: none;
	}
	
	.pre-header{
		justify-content: flex-end;
	}
}


.bar {
  width: 30px;
  height: 3px;
  background-color: var(--light-blue);
  margin-bottom: 5px;
  transition: transform 0.3s ease;
}

.hamburger-menu.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active .bar:nth-child(2) {
  opacity: 0;
}

.hamburger-menu.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.mobile-nav{
	display: none;
	font-size: 20px;
	text-align: left;
}

.mobile-nav li{
	padding: 15px;
    border-bottom: 1px solid var(--secondary-blue)
}

.mobile-nav a{
	text-decoration: none;
	color: var(--light-blue);
}

.container-fluid {
    padding-right: 2.5%;
    padding-left: 2.5%;
}

/***** HOME PAGE *****/

.hero-bg{
	background-image: url("../Images/hp_hero_bg.jpg");
	width: 100%;
	height: auto;
	background-size: cover;
	background-position:center bottom; 
    padding: 10rem 1rem;
}

.hero-bg p{
	font-size: 50px;
	color: var(--light);
	text-shadow: 1px 1px 9px black;
	text-align: center;
    font-weight: bold;©
}

#hero-bottom-text{
	font-size: 70px;
}

.hp-categories-container a {
	color: #fff;
	text-decoration: none;
}

.dark-bg{
	background-color: var(--primary-blue);
	width: 100%;
	padding:40px 0px;
}

.section-1{
	display: flex;
	max-width: 95%;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
        flex-wrap: wrap;
}

.three-col {
	text-align: center;
    margin-left: 5%;
    margin-right: 5%;
    width: 30%;
}

.three-col:first-child,
.three-col:last-child {
    margin-left: 0;
    margin-right: 0;
}

.property-description img{
	height: 300px;
	border-radius: 5px;
}

.property-description h2{
	color: var(--light);
	font-weight: bold;
	font-size: 30px;
	margin-bottom: 10px;
}

.property-description p{
	font-size: 1.2rem;
	color: var(--light);
	line-height: 35px;
}

.red-cta{
	margin-top: 50px;
}

.red-cta a, .btn-primary, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button,
.wp-block-button__link {
	background-color: var(--primary-red);
	color: white;
	text-decoration: none;
	padding: 10px 15px;
	border-radius: 5px;
    border-color: var(--primary-red);
}

.red-cta a:hover, .btn-primary:hover,
.red-cta a:active, .btn-primary:active,
.red-cta a:focus, .btn-primary:focus,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button:hover,
.wp-block-button__link:hover, .wp-block-button__link:active {
    background-color: var(--secondary-red);
    border-color: var(--secondary-red);
    color: var(--light);
}

.secondary-btn {
    background-color: var(--secondary-blue) !important;
    color: var(--light);
}

.secondary-btn:hover, .secondary-btn:active,
.secondary-btn:focus {
    background-color: var(--light-blue) !important;
    color: #fff;
}

.bullet-list{
	color: var(--light);
}

.bullet-list h1{
	font-size: 50px;
	color: var(--light);
	margin-bottom: 50px;
}

.bullet-list p{
	font-size: 1.2rem;
	line-height: 1.5;
}


@media only screen and (max-width: 1537px){
.section-1{
        justify-content: center;
}
}

.section-2{
	display: flex;
	max-width: 95%;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}

.section-2 img{
	max-width: 45%;
	max-height: 400px;
	object-fit: contain;
	border-radius: 5px;
}

.section-3 {
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
    margin-bottom: 50px;
    padding: 50px 20px;
    background-color: var(--secondary-blue);
}

body.home h2 {
	font-size: 3rem;
}

body.home h3 {
    font-size: 1.5rem;
}

.section-3 p{
	color: var(--light);
}

.section-3 .red-cta {
    text-align: center;
    font-size: 30px;
}

.para-lg {
    font-size: 2rem;
}

.my-50 {
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.view-all-button {
    width: 350px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 40px;
}

.view-all-button a {
    color: white;
    text-decoration: none;
    background-color: #A82C24;
    padding: 10px 25px;
    border-radius: 5px;
    font-size: 30px;
    display: block;
}

.contact-section{
	max-width: 95%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0px 20px;
	margin-top: 100px;
	flex-wrap: wrap;
}

.twain{
	max-width: 650px;
}

.twain p{
	font-size: 25px;
	color: white;
	margin-left: 20px;
	margin-top: 40px
}

.contact-homepage-form{
	max-width: 650px
}

.contact-homepage-form h1{
	color: #F68C1F;
	font-size: 50px;
}

.contact-homepage-form p{
	color: white;
	font-size: 20px
}

.contact-homepage-form textarea#Message-contactus {
    margin-top: 0px!important;
    height: 200px;
}

.contact-homepage-form #select-contactus {
    display: none;
}

.contact-homepage-form textarea#Message-contactus {
    width: 100%;
    height: 200px;
	border-radius: 5px;
}

.contact-homepage-form input#Submit-contactus {
    width: 100px;
	display: inline-block;
}

.contact-span{
	color: white;
	display: inline-block;
	font-size: 25px;
	margin-top: 10px;
	margin-right: 20px;
}

.woocommerce ul.products li.product .button {
    text-align: center;
}

@media only screen and (max-width: 1427px){
	.contact-section{
		justify-content: center;
	}
	
	.contact-homepage-form{
		margin-top: 40px;
	}

    .section-1 {
        flex-direction: column;;
    }
}

@media only screen and (max-width: 630px){
    .hero-bg {
        padding: 5rem 1rem;
    }
    .section-3 h1{
        font-size: 35px;
        text-align: center;
    }

    .section-3 li {
        font-size: 20px;
    }

    .section-3 .red-cta a {
        display: block;
        }

        .aux-section-text h1{
        font-size: 30px!important;
        }
}

@media (max-width:767px) {
    .hero-bg p, #hero-bottom-text, body.home h2{
        font-size: 30px;
    }

    .section-3 p, .section-3 .red-cta {
        font-size: 18px;
    }
}

	.aux-page-container{
		max-width: 1500px;
		padding: 0px 20px;
		margin-left: auto;
		margin-right: auto;
	}
	
	.aux-section-text h1{
		font-size: 30px;
                margin-top: 30px;
	}
	
.aux-section-text p {
    font-size: 20px;
}

.aux-page-container ul {
    font-size: 20px;
}

.default-header {
    max-width: 100%;
    max-height: 400px;
    overflow: hidden;
}

.center {
	text-align:center;
}

.left{
	align-items:left;
}

li a.active{
	color:#F68C1F;
}

#footer{
	text-align: center;
    padding: 20px;
}

.content{
	flex:1;
	align-items:center;
}

a.cancel{
	/* border: 2px solid black; */
	background-color: #a82c24;
	border-radius:7px;
	padding: 7px;
	color:white;
	text-decoration: none;
}

a.cancel:hover{
	animation: colorChange 0.5s forwards;
}

@keyframes colorChange{
	from {
		background-color: #a82c24;
	} to {
		background-color:#F68C1F;
	}
}

a.cancel:active{
	color:white;
	outline: none;
}


/* Registration page styles */

.registration-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
}

.registration-page h1 {
    text-align: center;
    margin-bottom: 20px;
}

#registration-form {
    display: flex;
    flex-direction: column;
}

#registration-form p {
    margin-bottom: 15px;
}

#registration-form label {
    font-weight: bold;
    margin-bottom: 5px;
}

#registration-form input[type="text"],
#registration-form input[type="email"],
#registration-form input[type="password"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#registration-form input[type="submit"] {
    background-color: #a82c24;
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#registration-form input[type="submit"]:hover {
    background-color: #F68C1F;
}

#submit:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}




/* Styling for the slider contents */
.slider-container{
    padding:10px;
    align-items: center;
    width:fit-content;
    max-width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.slider-thumbnail{
    max-width: 100%;
    height:auto;
}

.slider-container .title{
    color:white;
    margin-top: 10px;
    text-align: center;
}



/* For the dropdowns on the top */
.dropdown{
    width:100%; 
    max-width:200px;
}

/* The little shopping cart displaying the amount of auctions the user is bidding in */
.auction-count {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('/assets/Images/shopping_cart.png');
    background-size: cover;
    background-position: center;
    color: white; /* Change the color as needed */
    text-align: center;
    line-height: 20px; /* This should match the height to vertically center the number */
    font-weight: bold;
    font-size: 12px; /* Adjust the font size as needed */
    position: relative;
}

/* Style the My Account navigation menu */
.woocommerce-MyAccount-navigation {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    font-family: Arial, sans-serif;
}

.woocommerce-MyAccount-navigation ul {
    list-style-type: none;
    padding: 0;
}

.woocommerce-MyAccount-navigation ul li {
    margin-bottom: 10px;
}

.woocommerce-MyAccount-navigation ul li a {
    color: #0073aa;
    text-decoration: none;
    font-weight: bold;
    padding: 10px;
    display: block;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: #0073aa;
    color: white;
    border-radius: 4px;
}

/* Style the account content area */
.woocommerce-MyAccount-content {
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 20px;
    font-family: Arial, sans-serif;
}



/* Style the greeting message */
.woocommerce-MyAccount-content p {
    font-size: 16px;
    color: #333;
}

/* Style the links in the content area */
.woocommerce-MyAccount-content a {
    color: #0073aa;
    text-decoration: none;
}

.woocommerce-MyAccount-content a:hover {
    text-decoration: underline;
}

span.winning {
    background-color: #a2c094 !important;
    color: #fff !important;
	z-index: 1000;
}

.contact-form {
    margin: 20px;
    padding: 20px;
    width: 100%;
}

.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 3px;
    border: 1px solid #ddd;
    font-size: 16px;
}

.contact-form input[type="submit"] {
    background-color: #c0392b;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px 20px;
}

.contact-form input[type="submit"]:hover {
    background-color: #a16521;
}

.error-message {
    color: red;
    margin-top: 10px;
    padding: 10px;
    text-align: center;
}

.success-message {
    color: green;
    margin-top: 10px;
    padding: 10px;
    text-align: center;
}


form.auction_form.cart .quantity {
    max-width: 300px;
    margin: 0 auto;
}

.woocommerce-account .addresses .title .edit {
    float: none;
}

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    width: 100%;
    float: none;
}

.woocommerce div.product form.cart {
    margin-bottom: 0;
}

.price {
    font-size: 1rem;
    color: #000;
}

body.home .price {
    color: #fff;
}

.price-main {
    font-size: 2rem;
    font-weight: 700;
}

form.buy-now.cart::after {
    display: block !important;
    content: 'Buy it Now  before some one else does!!!' !important;
}




/*Product image gallery*/
.woocommerce-product-gallery .flex-control-nav {
    display: flex;
    overflow-x: auto; 
    white-space: nowrap;
    gap: 10px;
    padding-bottom: 10px;
    scrollbar-width: thin; /* For Firefox */
}

.woocommerce-product-gallery .flex-control-nav li {
    flex: 0 0 auto; 
}

.woocommerce-product-gallery .flex-control-nav img {
    width: 70px;
    height: auto;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.3s;
}

.woocommerce-product-gallery .flex-control-nav img:hover {
    border-color: #333; 
}

/* Hide horizontal scrollbar (Webkit browsers) */
.woocommerce-product-gallery .flex-control-nav::-webkit-scrollbar {
    display: none;
}

.page-template-template-store img {
    max-width: 100%;
    height: auto;
}

.product-display a {
    color: #000;
    text-decoration: none;
}

.product-display h4 {
    font-size: 1.3rem;
}

.slick-slide {
    margin-right: 10px;
    margin-top: 10px;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price, .woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
    color: #000;
}

.price {
    font-size: 1.4em;
    font-weight: 700;
}

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

.product-inner {
    height: 100%;
    text-align: center;
}

.product-inner:hover {
    opacity: 0.8;
}

.product-inner h3.title {
    font-size: 1.3rem;
}

.auction-condition {
    display: none;
}

.auction-time-countdown {
    background-color: #eee;
    padding: .3rem;
    margin-bottom: 1rem;
}

.auction-carousel-item img {
    width: 100%;
}

.woocommerce form .show-password-input, .woocommerce-page form .show-password-input {
    top: .4em;
}

body.home h2.woocommerce-loop-product__title {
    color: #fff;
}

body.home .woocommerce ul.products li.product .woocommerce-loop-category__title, body.home .woocommerce ul.products li.product .woocommerce-loop-product__title, 
body.home .woocommerce ul.products li.product h3 {
    font-size: 1.3em;
}

@media screen and (min-width:769px) {
    .woocommerce .products ul, .woocommerce ul.products {
        display: flex;
		flex-wrap: wrap;
    }

    .woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product,
    .woocommerce ul.products li.product a {
        display: flex;
        flex-direction: column;
    }

    .woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
        flex-grow: 1;
    }

    .woocommerce ul.products li.product .price {
        margin-top: auto;
    }
}


/***************\
Hero Sections
\***************/

.hero-section {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 3.5rem 1rem;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.hero-section::before {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
}

.about-hero {
    background-image: url('../Images/about_hero.jpg');
}

.faq-hero {
    background-image: url('../Images/faq_hero.jpg');
}

.hero-section h1 {
    font-size: 2rem;
    z-index: 1;
    position: relative;
}

@media screen and (min-width: 768px) {
    .hero-section {
        min-height: 600px;
    }
   
    .hero-section h1 {
        font-size: 4.5rem;
    }
}

/************
Products
*************/

.product-details {
    color: red;
}

.woocommerce ul.products li.product .button {
    width: 100%;
}

.woocommerce-loop-product__title,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) ul.products li.product .price {
    color: #000;
}

@media screen and (max-width:768px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
        
    }
}

@media screen and (min-width:769px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        width: calc(33.333% - 15px);
        margin-right: 20px;
    }

    .woocommerce-page ul.products li.product:nth-child(3n) {
        margin-right: 0;
    }
}

@media screen and (min-width:992px) {
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
        width: calc(25% - 15px);
        margin-right: 20px;
    }

    .woocommerce-page ul.products li.product:nth-child(4n) {
        margin-right: 0;
    }
}