.jua {
  font-family: "Jua", sans-serif;
  font-style: normal;
}

.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}
.urbanist {
  font-family: "Urbanist", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

/* ========= Varaibles Settup ========= */
:root{
	--theme-color-1: #235583;
   --theme-color-2: #345B06;
   --theme-color-3: #B1D8F7;
   --theme-color-4: #F4F7FA;
   --theme-color-2-rgba: rgba(52, 91, 6, 1);
   --text-color: #333;
   --light-text-color: #6b6b6b;
   --white-color: #fefefe;
   --head: "Jua", sans-serif;
   --inter:  "Inter", sans-serif;
   --urbanist: "Urbanist", sans-serif;
   --bg: #f3f3f1;            
   --text: #2a2a2a;
   --muted: #6b6b6b;
   --border: #bfbfbf;
   --pill-bg: #ffffff;
   --pill-border: #9a9a9a;
   --pill-active-bg: #345B06;   
   --pill-active-text: #ffffff;
   --accent: #345B06;             
   --slider-track: #d8d8d8;
   --slider-thumb: #2c6cb0;       
   --radius-pill: 999px;
   --shadow-soft: 0 1px 0 rgba(0,0,0,.1);
}


.material-symbols-outlined {
  width: 10px;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}


/* ========= general styling ========= */
/* 1. Use a better box-sizing model */
*, *::before, *::after {
  box-sizing: border-box !important;
}

/* 2. Remove default margin & padding from everything */
* {
  margin: 0;
  padding: 0;
  font-size: var(--text-fs);
}

/* 3. Set core body defaults */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
    padding-top: 100px;
    min-height: 100vh;
    width: 100vw;
    line-height: 1.5;
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--text-color);;
    overflow-x: hidden !important;
}

/* 4. Remove list styles */
ul, ol {
  list-style: none;
}

/* 5. Remove link styles */
a {
  text-decoration: none;
  color: inherit;
}

/* 6. Media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 7. Inherit fonts for form elements */
input, button, textarea, select {
  font: inherit;
}

/* 8. Reset buttons */
button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* 9. Remove textarea resize */
textarea {
  resize: vertical;
}

/* 10. Remove fieldset styling */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* 11. Table reset */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 12. Remove Bootstrap box-shadows & outlines globally */

/* 13. Remove Bootstrap focus styles */
:focus,
:focus-visible,
:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* 14. Optional: disable Bootstrap border-radius too */
.btn,
.form-control,
input,
select,
textarea {
  box-shadow: none !important;
  outline: none !important;
  border: none;
}


.carousel-indicators button {
    height: 5px !important;
	z-index: 699;
	border: 1px solid var(--theme-color-4) !important;
}



/* 15. Optional: disable animations for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}



/* ======================= navbar styling ======================= */
#header{
	.navbar{
        position: fixed;
        top: 0;
        left: 0;
		height: 100px;
		width: 100%;
		padding: 0 5px;
		margin: 0;
		box-sizing: border-box;
		background-color: var(--theme-color-1);
		display: flex;
		justify-content: space-between;
		align-items: center;
        z-index: 899;
	}


	.navbar-brand{
		padding: 0;
		margin: 0;
		width: 230px;
	}.navbar-brand img{ 
		width: 80%;
		height: 75px;
		object-fit: contain;
		object-position: left;
	}


	.navbar-menu{
		width: 100vw;
		height: 100vh;
		padding: 20px 0 0 10px;
		position: fixed;
		top: 0;
		left: -101%;
		background-color: var(--theme-color-1);
		transition: all 0.2s ease;
		z-index: 999;
	}.navbar-menu a#navbar-brand{
		object-position: right;
	}.nav-list{
		width: 100%;
		margin: 0;
		margin-top: 20px;
	}.list-item, .drop-item{
		position: relative;
	}.nav-list .list-link, .drop-list .drop-link{
		width: fit-content;
		display: flex;
		align-items: center;
		color: #fefefe;
		margin-bottom: 5px;
		padding: 15px 0;
		transition: all 0.2s ease;
		font-family: var(--urbanist);
		font-size: 1.05rem;
		letter-spacing: 1.05px;
		font-weight: 500;
		border-radius: 10px;
		position: relative;

		&:hover{
			color: var(--theme-color-3);

		&::before{
				content: '';
				width: 130%;
				height: 2px;
				background-color: var(--theme-color-3);
				position: absolute;
				bottom: 0;
				left: 0;
		}
		}
	}.nav-list .list-link#active{
		color: var(--theme-color-3);
		&::before{
			content: '';
			width: 130%;
			height: 2px;
			background-color: var(--theme-color-3);
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}.nav-list .drop_down_arrow{
		font-size: 2rem !important;
		color: #fefefe;
	}
	

	.drop-list{
		background-color: var(--theme-color-1);
		width: fit-content;
		margin: 0;
		padding: 0 30px 20px;
		display: none;
		box-sizing: border-box;
	}
	.drop-list .drop-link{
		display: block;
		margin-bottom: 5px;
		padding: 15px 0;
		width: fit-content;
		

		&::before{
			content: '';
			width: 130%;
			height: 2px;
			background-color: #fefefe;
			position: absolute;
			bottom: 0;
			left: 0;
		}

		&:hover{
			color: var(--theme-color-3);

		&::before{
				content: '';
				width: 130%;
				left: 0;
		}
		}
	}.drop-list .drop-link#active{
		color: var(--theme-color-3);
		&::before{
				content: '';
				background-color: var(--theme-color-3);
				width: 130%;
				left: 0;
		}
	}


	.navbar-btn .btn{
		background-color: var(--theme-color-3);
		border-radius: 18px;
		padding: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: var(--urbanist);
		color: var(--theme-color-1);
		font-weight: 600;
		font-size: 1.1rem;

		&:focus{
			opacity: 0.8;
		}

	}.navbar-btn .btn .material-symbols-outlined.call-icon{
		font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
		font-size: 1.4rem;
	}.navbar-btn .btn .material-symbols-outlined.menu-icon{
		font-size: 1.6rem;
		padding: 0;
		margin: 0;
	}


	#nav_close{
		background-color: var(--theme-color-3);
		border-radius: 20px;
		padding: 15px;
		position: absolute;
		top: 20px;
		right: 15px;
	}#nav_close .material-symbols-outlined{
		font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
		font-size: 1.6rem;
		padding-top: 3px;
		margin: 0;
		color: var(--theme-color-1);
		&:focus{
			opacity: 0.8;
		}
	}
}



.product-card{
	display: block;
    width: 100%;
    background-color: var(--white-color);
    padding: 3px;
    border-radius: 20px;
    height: fit-content;
    margin: 10px;
    &:hover .product-name .name{
        color: var(--theme-color-2);
    }

    .product-image{
        width: 100%;
        position: relative;
        
    }.product-image img{
        width: 100%;
        height: 25vh;
        object-fit: cover;
        border-radius: 20px;
    }


    .wishlist-btn{
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: var(--white-color);
        padding: 8px;
        padding-bottom: 6px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
		z-index: 750;
    }.wishlist-btn .material-symbols-outlined{
        margin: 0 !important;
        font-size: 1.7rem;
        padding: 0 !important;
        text-align: center;
		transition: color 0.3s ease;
    }
	.wishlist-btn.active {
		color: red;
		font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
	}


    .product-name{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30px 12px 10px;
    }.product-name .name{
        font-size: 1.1rem;
        font-weight: 600;
        text-transform: uppercase;
    }.product-name .year{
        font-size: 1.1rem;
        font-weight: 600;
    }
    
    
    .product-price{
        padding: 0 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }.product-price .sub-text{
        color: var(--muted);
        font-family: var(--inter);
        font-size: 0.8rem;
        font-weight: 500;
        padding: 0;
    }.product-price .price, .product-price .starter{
        color: var(--text-color);
        /* font-family: var(--inter); */
        font-size: 1rem;
        font-weight: 700;
        padding: 0;
        margin: 0;
    }.starter-price .starter{
        color: var(--theme-color-2) !important;
    }.full-price #full{
        display: block;
        width: 100%;
        font-family: var(--urbanist);
        color: var(--light-text-color);
        text-decoration: line-through;
        font-size: 0.85rem;
        text-align: end;
        font-weight: 600;
    }


    .mileage-info{
        padding: 0 12px;
        margin: 15px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }.sub-text{
        color: var(--muted);
        font-family: var(--inter);
        font-size: 0.9rem;
        font-weight: 500;
        padding: 0;
    }.mileage{
        color: var(--text-color);
        /* font-family: var(--inter); */
        font-size: 1rem;
        font-weight: 600;
        padding: 0;
        margin: 0;
    }


    .custom-hr {
        border: none;           
        height: 2px;
        background-color: var(--light-text-color);
        width: calc(100% - 24px);             
        margin: 15px auto; 
        border-radius: 2px;       
    }

}
.swiper-wrapper{
	border-radius: 15px;
}
.swiper-slide { 
    display:flex; align-items:stretch;
	 border-radius: 15px;
}
.swiper-pagination{
    bottom: 0;
}
.swiper-button-next,
.swiper-button-prev {
    background-color: rgba(0, 0, 0, .2);
    color: var(--text-color);                      
    width: 50px;                         
    height: 50px;                         
    border-radius: 50%;                   
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Remove default arrow size and use custom size */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 14px;
    font-weight: 900;
}


#footer{
	width: 100%;
	padding: 40px 10px;
	background-color: var(--theme-color-1);
	border-top-right-radius: 25px;
	border-top-left-radius: 25px;


	.address-box{
		margin-top: 20px;
		color: var(--theme-color-4);
	}.address-box .head{
		font-size: 1.1rem;
		color: var(--theme-color-4);
		font-family: var(--head);
		padding: 10px 0;
	}.address-box a {
		font-size: 1rem;
		padding-bottom: 10px;
        display: block;
		&:hover{
			color: var(--theme-color-3);
		}
	}.address-box .material-symbols-outlined{
		font-size: 1.2rem;
		color: var(--theme-color-4);
		font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
		padding-right: 5px;
	}


	.footer-menu{
		padding: 10px 0;
	}.footer-menu .menu-link{
		font-size: 1rem;
		display: block;
		color: var(--theme-color-4);
		padding: 10px 0 !important;
		
		&:hover{
			color: var(--theme-color-3);
			text-decoration: underline;
		}
	}


	.form{
		width: 100%;
		color: var(--text-color);
		background-color: var(--theme-color-3);
		padding: 30px 10px 10px;
		border-radius: 10px;
		text-align: center;
	}.form .head{
		font-size: 1.2rem;
		font-family: var(--head);
		padding-bottom: 10px;
	}.form .text{
		font-size: 0.85rem;
	}.form #email{
		font-size: 0.85rem;
	}.form #emailSubmit{
		font-size: 0.85rem;
		color: var(--white-color);
		background-color: var(--theme-color-2);
	}
}



@media (min-width: 1024px){
	#header{
		.navbar{
			height: 100px;
			width: 100vw;
			justify-content: space-around;
			padding: 0;
		}

		.navbar-brand img{
			width: 230px; 
			height: 80px;
		}

		.navbar-menu{
			width: 50%;
			height: fit-content;
			padding: 0;
			position: static;
		}.nav-list{
			justify-content: space-around;
			margin-top: 10px;
		}.list-item, .drop-item{
			position: relative;
		}.nav-list .list-link{
			display: block;
			padding: 0;
			margin: 0 5px;

			&:hover{

				&::before{
					width: 110%;
					left: -5%;
				}
			}
		}.nav-list .list-link#active{
			&::before{
					width: 110%;
					left: -5%;
			}
		}

		#toggleMenu:hover{
			.drop-list{
				display: block;
			}
		}
		.drop-list{
			position: absolute;
			width: 300px;
			top: 100%;
			padding:  30px;
		}
		.drop-list .drop-link{
			width: 100%;

			&::before{
				width: 100%;
			}

			&:hover{

				&::before{
						width: 100%;
				}
			}
		}.drop-list .drop-link#active{
			&::before{
					width: 100%;
			}
		}
	}

	#footer{
		padding: 40px 200px 20px;

		.form{
			margin-top: 20px;
			width: 80%;

			.text{
				margin: 20px 0 50px;
			}
			.form-control{
				padding: 10px 5px;
			}
		}
	}
}