*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: cambria math;
/* font-family: 'Poppins', sans-serif; */
}
:root{
--backgroundColor : #ff8c1a;
--whiteColor : #fff;
}
html,body{
max-width: 100%;
overflow-x: hidden;
}
.swiper {
width: 80%;
}
.swiper-slide {
display: flex;
justify-content: center;
/* align-items: center; */
}
#landing-page nav{
background-color: var(--backgroundColor);
box-shadow: 1px 1px 20px 1px #000;
position: relative;
z-index: 2;
}
.nav-bar{
display: flex;
position: relative;
margin:auto 5%;
padding:5px;
justify-content: space-between;
}
#landing-page nav .header-logo{
font-size:2.5rem;
font-weight: bold;
/* font-family: cambria math; */
color: var(--whiteColor);
margin:0 7%;
text-shadow: 1px 1px 2px var(--whiteColor);
letter-spacing: 1px;
}
#landing-page nav .menu{
display: flex;
align-items: center;
padding:5px;
}
#landing-page nav .menu a{
margin-right:10px;
text-decoration: none;
color:var(--whiteColor);
/* font-family:cambria math; */
font-size:26px;
font-weight: 400;
}
/*-------> Redesign this */
.icon-style{
margin-left:22px;
margin-right: 5px;
font-size:24px;
color:var(--whiteColor);
}
/*-------> Redesign this */
#search-icon{
display: none;
}
.cart-count{
width:20px;
font-size:12px;
top:7px;
right:60px;
color:var(--whiteColor);
background-color: red;
position: absolute;
border-radius: 50%;
text-align: center;
padding:2px 1px;
}
.search-form{
border: 1px solid var(--whiteColor);
border-radius: 10px;
background-color: var(--whiteColor);
display: flex;
justify-content: center;
align-items: center;
}
.search-form input{
padding:5px;
color:brown;
/* font-family: cambria math; */
font-size:22px;
margin:auto 7px;
outline: none;
border: none;
}
.search-form label{
color:var(--backgroundColor);
font-size:24px;
font-weight: bold;
text-align: center;
margin:auto 5px;
}
.search-form label:hover{
cursor: pointer;
}
.header-carosol{
width:100%;
height:94vh;
position: relative;
background: #000;
z-index: 1;
}
.carosol-img{
width:100%;
height:100%;
opacity: 0.6;
}
.img-indicator{
position: absolute;
height:9px;
width:9px;
bottom:7%;
border-radius: 50%;
background-color: var(--whiteColor);
}
#ind-one{
left:47%;
}
#ind-two{
left:49%;
}
#ind-three{
left:51%;
}
.left-arrow,.right-arrow{
position: absolute;
font-size:68px;
top:50%;
transform: translateY(-50%);
color:var(--whiteColor);
display: none;
}
.left-arrow{
left:3%;
}
.right-arrow{
right:3%;
}
.left-arrow:hover,.right-arrow:hover{
cursor:pointer;
}
.ruler{
border:none;
height:30px;
border-bottom:5px dotted black;
background-color:transparent;
width:5%;
margin:2% auto;
}
.custom-caption{
position: absolute;
top:30%;
left:50%;
transform: translateX(-50%);
text-align:center;
padding:10px;
z-index: 3;
}
.custom-caption h1{
font-size:6rem;
color:var(--whiteColor);
/* font-family: cambria math; */
letter-spacing: 1px;
font-weight: bold;
margin: 3% auto;
text-shadow: 1px 1px 5px var(--whiteColor);
}
.custom-caption h3{
font-size:4.5rem;
color:var(--whiteColor);
/* font-family: cambria math; */
margin: 5% auto;
font-weight: bold;
letter-spacing: 1px;
}
.custom-caption .caption-style{
color:lightgreen;
text-shadow: 1px 1px 3px yellow;
}
/*Category Section*/
#category-section{
width: 100%;
background-color: var(--backgroundColor);
}
.cat-container{
display: flex;
justify-content: center;
align-items: center;
padding:8px 0px;
}
.category-continer {
margin: auto 4%;
text-align: center;
}
.category-continer img{
width:50px;
color: var(--whiteColor);
}
.category-continer img:hover{
cursor: pointer;
scale:1.2;
}
.category-txt{
font-size:22px;
color: var(--whiteColor);
}
#item-section{
margin:3% 10%;
}
.items-container{
display: flex;
justify-content: center;
margin: 3% auto ;
position: relative;
}
.card-style{
margin:auto 2% auto;
padding:5px 5px;
width: 400px;
}
.item-heading{
color:var(--backgroundColor);
font-size:3.2rem;
font-weight: bold;
text-align: center;
}
.section-heading{
color:var(--backgroundColor);
font-size:3rem;
font-weight: bold;
text-align: center;
margin-bottom: 3%;
}
.cd-title{
color:var(--backgroundColor);
/* font-family:cambria math; */
font-size: 32px;
text-shadow: 1px 1px 1px orange;
}
.cd-text{
/* font-family:cambria math; */
font-size: 18px;
text-indent: 25px;
text-align: justify;
}
.btn-cart{
background-color: var(--backgroundColor);
color:var(--whiteColor);
padding: 13px;
border-radius:5px;
text-decoration: none;
font-size:18px;
/* font-family: cambria math; */
}
.btn-cart:hover{
color:var(--whiteColor);
}
.footer-section{
background-color: var(--backgroundColor);
width: 100%;
padding:5px;
text-align: center;
}
.footer-txt{
/* font-family: cambria math; */
font-size: 20px;
margin: 2px auto;
letter-spacing: 2px;
color: var(--whiteColor);
}
.footer-link{
/* font-family: cambria math; */
font-size:22px;
letter-spacing: 1px;
}
.footer-link{
/* font-family: cambria math; */
font-size:22px;
letter-spacing: 1px;
color: var(--whiteColor);
text-decoration: none;
text-shadow: 1px 1px 2px grey;
}
.footer-link:hover{
cursor: pointer;
color: var(--whiteColor);
text-shadow: 1px 1px 2px yellow;
}
.item-next-arrow,.swiper-button-next,.swiper-button-prev{
color: grey;
opacity: 0.5;
font-size: 8rem;
}
.item-next-arrow:hover{
cursor: pointer;
opacity: 1;
}
.contact-section{
margin: 5% auto 2%;
}
#experience-section,#locate-us{
margin: 3% auto 5%;
padding: 3px;
max-width: 1300px;
}
.exp-header{
font-size:3.5rem;
font-weight: bold;
color: var(--backgroundColor);
text-shadow: 1px 1px 3px var(--backgroundColor);
margin-bottom:3%;
}
.exp-txt{
font-size:1.2rem;
text-indent: 2rem;
color:brown;
text-align: justify;
margin-top:auto;
}
.locate-header{
font-size:2.5rem;
font-weight: bold;
color: var(--backgroundColor);
margin-bottom:2%;
}
.locate-txt{
font-size:1.2rem;
color:brown;
text-align: justify;
}
#contact-us{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 5% auto 2%;
}
#experience-section img,#locate-us .map-img{
width:70%;
border-radius: 10px;
margin:3% 22%;
box-shadow: 1px 1px 10px 1px grey;
}
#locate-us .map-img{
margin:0% 22%;
}
#locate-us .shop-address{
margin-top:2%;
margin-left:auto;
}
#experience-section .exp-data{
margin-top: auto;
padding:auto;
}
.mail-enclosing{
display: flex;
align-items: center;
margin: -2% auto 0%;
}
.mail-icon{
color:brown;
font-size:1.8rem;
text-align: center;
margin-right: 5px;
}
.mail-link{
text-decoration: none;
color:brown;
font-size:2rem;
letter-spacing: 1.5px;
}
.mail-link:hover{
color:brown;
}