/* @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Briem+Hand:wght@100..900&family=Quicksand:wght@300..700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Briem+Hand:wght@100..900&family=Jacquard+24+Charted&family=Quicksand:wght@300..700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Briem+Hand:wght@100..900&family=Gilda+Display&family=Jacquard+24+Charted&family=Quicksand:wght@300..700&display=swap');
:root{
--black: #181722;
--white: #f0f0f0;
--box-shadow: 0px 4px 4px rgba(0,0,0,0.25);
--brown: #780000;
--peach: #fdf0d5;
--brown2: #c1121f;
--cream: #f4d58d;
/* palette- */
--color1: #FDFFFF;
--color2: #B10F2E;
--color3: #570000;
--color4: #280000;
--color5: #DE7C5A;
--color6: #bc4749;
--color7: #fdf0d5;
}
body{
/* background-image: url("data:image/svg+xml,") */
/* background-image: url("data:image/svg+xml,") */
background-color: #28000060;
}
*{
/* font-family: "Quicksand", sans-serif; */
/* font-family: "Briem Hand", cursive; */
/* font-family: "Jacquard 24 Charted", system-ui; */
font-family: "Gilda Display", serif;
margin:0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: none;
transition: .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 7rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar{
width: 0.8rem;
}
html::webkit-scrollbar-track{
background: transparent;
}
html::-webkit-scrollbar-thumb{
background-color: var(--color3);
border-radius: 5rem;
}
/*header*/
.header{
top: 0;right: 0;left: 0;
background-color: var(--peach);
display:flex;
align-items: center;
justify-content: space-between;
position: fixed;
padding: 1.4rem 7%;
z-index: 999;
}
.header .logocontent{
display: flex;
align-items: center;
}
.header .logocontent .logo img{
height: 4rem;
}
/* .header .logocontent .logoname{
color: var(--brown);
font-size: 2rem;
font-weight: bolder;
} */
.header .navbar a{
font-size: 2rem;
margin-right: 3rem;
color: var(--brown);
font-weight: bold;
}
.header .navbar a:hover{
border-bottom: 0.3rem solid var(--brown);
padding-bottom: 0.4rem;
}
.header .icon i{
font-size: 2rem;
margin-right: 2rem;
color: var(--brown);
cursor: pointer;
}
.header .search{
display: none;
top: 100%;
margin: 1.5rem 7%;
background-color: transparent;
right: 0;
width: 50%;
height: 5rem;
position: absolute;
}
.header .search input{
width: 100%;
height: 100%;
font-size: 1.5rem;
background-color: var(--color7); /*--white*/
color: var(--black);
margin-right: 7%;
border-radius: 1rem;
padding: 0.5rem 1rem;
box-shadow: var(--box-shadow);
}
.header .search.active{
display: inline-block;
}
#menubar{
display: none;
}
/*home*/
.home{
min-height: 100vh;
display: flex;
align-items: center;
background: url(photos/main1.png)no-repeat;
background-size: cover;
background-position: center center;
/* background-attachment: fixed; */
}
.home .homecontent{
width: 50%;
float: left;
text-align: center;
}
.home .homecontent h2{
font-size: 5rem;
font-weight: bolder;
margin-bottom: 2rem;
line-height: 4.5rem;
color: var(--color3);
text-shadow: var(--box-shadow);
}
.home .homecontent h2 .highlight:hover{
font-size: 5.1rem;
}
.home .homecontent p{
font-size: 2.5rem;
line-height: 3rem;
margin-bottom: 2rem;
color: var(--color2);
}
.home .homecontent .home-btn{
height: 3rem;
}
.home .homecontent .home-btn button{
font-size: 1.8rem;
background-color: var(--color3);
color: var(--white);
border-radius: 0.7rem;
padding: .7rem 2.4rem;
cursor: pointer;
}
.home .homecontent .home-btn button:hover{
font-size: 2rem;
}
@media (max-width:768px){
.home{
background: url(photos/fbg.png)no-repeat;
background-size: cover;
background-position: center center;
}
.home .homecontent{
width: 95%;
}
.home .homecontent h2{
font-size: 4.5rem;
}
.home .homecontent h2:hover{
font-size: 4rem;
}
.home .homecontent p{
font-size: 2rem;
}
}
section{
padding: 2rem 7%;
}
.heading{
text-align: center;
font-size: 2.6rem;
margin-bottom: 3rem;
color: var(--color3);
/*border: .1rem solid var(--black);*/
}
.product .product-row{
margin-bottom: 5rem;
display: flex;
align-items: center;
}
.product .product-row .box{
display: flex;
flex-direction: column;
width: 45rem;
background-color: var(--color7); /*Change here*/
align-items: center;
text-align: center;
padding: 2rem;
gap: 1.5rem;
border-radius: 3rem;
/* border-width: 0.5rem;
border-style: solid; */
margin-right: 3rem;
}
.product .product-row .img img{
/* height: 100%;
width: 100%; */
height: 300px;
border-radius: 50%;
border-color: white;
border-style: solid;
border-width: 1.3rem;
}
.product .product-row .img img:hover{
transform: scale(1.1);
}
.product .product-row .product-content{
margin-bottom: 4rem;
}
.product .product-row .product-content h3{
font-size: 4rem;
color: var(--color3);
}
.product .product-row .product-content p{
font-size: 1.5rem;
line-height: 1.6rem;
color: var(--color4);
}
.product .product-row .product-content h4{
font-size: 2.8rem;
color: var(--color3);
padding-top: 2rem;
}
.product .product-row .product-content h4 .discount{
font-size: 1.8rem;
color: goldenrod;
padding-left: 0.5rem;
}
.product .product-row .product-content h5{
font-size: 2rem;
color: var(--color6);
text-decoration: line-through;
}
.product .product-row .product-content .orderNow{
height: 3rem;
margin-top: 2rem;
margin-bottom: 3rem;
}
.product .product-row .product-content .orderNow button{
font-size: 1.8rem;
background-color: var(--color4);
color: white;
border-radius: 0.7rem;
padding: 0.7rem 2rem;
cursor: pointer;
}
.product .product-row .product-content .orderNow button:hover{
font-size: 2rem;
}
/* blogs*/
.blogs{
background: url(images/backGround.png) no-repeat; /*background image of blogs section*/
background-size: cover;
background-position: center center;
}
.blogs .blogs-row .box{
display: flex;
align-items: center;
background-color: var(--color7);
flex-wrap: wrap;
}
.blogs .blogs-row .box .img{
flex: 1 1 45rem;
}
.blogs .blogs-row .box .img img{
/* width: 700px;
height: 500px; */
width: 100%;
height: 100%;
border-radius: 50%;
border-color: white;
border-style: solid;
border-width: 1.3rem;
/* padding: 5rem; */
}
.blogs .blogs-row .box .content{
flex: 1 1 45rem;
padding: 2rem;
}
.blogs .blogs-row .box .content h3{
font-size: 3.5rem;
color: var(--color3);
text-shadow: var(--box-shadow);
}
.blogs .blogs-row .box .content p{
font-size: 1.6rem;
color: var(--color4);
padding: 1rem 0;
line-height: 1.8;
}
.blogs .blogs-row .box .content a{
font-size: 2rem;
color: var(--color6);
cursor: pointer;
}
.blogs .blogs-row .box .content a:hover{
color: var(--color6);
text-shadow: var(--box-shadow);
}
/*newletter*/
.newsletter{
background: url(photos/news2.png) no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
.newsletter form{
max-width: 45rem;
text-align: center;
padding: 5rem 0;
}
.newsletter form h3{
font-size: 3rem;
color: var(--white);
padding: 0.7rem;
}
.newsletter form .box{
width: 100%;
margin: 0.7rem 0;
padding: 1rem 1.2rem;
color: var(--color3);
border-radius: .5rem;
}
.newsletter form .box2{
width: 50%;
padding: .5rem .5rem;
margin-top: 1rem;
font-size: 1.7rem;
color: var(--white);
background: var(--color3);
border-radius: 2rem;
}
/*review*/
.review .review-row{
display: flex;
flex-direction: column;
align-items: center;
}
.review .review-row .box{
width: 50%;
padding: 3rem;
border-radius: 3rem;
margin-bottom: 3rem;
background-color: var(--color7);
box-shadow: var(--box-shadow);
}
.review .review-row .box .client-review{
margin-bottom: 3rem;
}
.review .review-row .box .client-review p{
text-align: center;
font-size: 2rem;
line-height: 1.5;
color: var(--color3);
}
.review .review-row .box .client-info{
display: flex;
align-items: center;
color: var(--black);
}
.review .review-row .box .client-info .img{
padding-right: 3rem;
}
.review .review-row .box .client-info .img img{
width: 7rem;
height: 7rem;
clip-path: circle(50% at 50% 50%);
}
.review .review-row .box .client-info .clientdetails h3{
font-size: 2.5rem;
color: var(--color4);
padding-bottom: 0.5rem;
}
.review .review-row .box .client-info .clientdetails p{
font-size: 1.5rem;
color: var(--color3);
}
/*footer*/
.footer{
background: url(photos/fbg.png) no-repeat;
background-size: cover;
background-position: center center;
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 1.5rem;
padding: 2rem 1rem;
}
.footer .box-container .mainbox .content{
/* display: flex; */
align-items: center;
margin-bottom: 1rem;
}
.footer .box-container .mainbox .content img{
height: 10rem;
padding-bottom: 0;
margin-bottom: 0;
}
.footer .box-container .mainbox .content p{
padding-top: 0;
padding-left: 9rem;
font-size: 2.5rem;
color: var(--brown);
}
.footer .box-container .mainbox p{
font-size: 1.5rem;
line-height: 1.3;
margin-bottom: 2rem;
color: var(--color3);
padding-left: 2rem;
}
.footer .box-container .box h3{
font-size: 2.2rem;
color: var(--brown);
padding: 1rem 2rem;
}
.footer .box-container .box a{
display: block;
font-size: 1.6rem;
color: var(--color2);
padding: 1rem 2rem;
}
.footer .box-container .box a i{
padding-right: .5rem;
color: var(--brown);
}
.footer .box-container .box a:hover i{
padding-right: 2rem;
}
.footer .share{
padding: 1rem 0;
text-align: center;
}
.footer .share a{
height: 4rem;
width: 4rem;
line-height: 4rem;
font-size: 2rem;
color: var(--white);
background: var(--color6);
margin: 0 .3rem;
border-radius: 50%;
}
.footer .share a:hover{
background: var(--white);
color: var(--color6);
}
.footer .credit{
font-size: 2rem;
margin-top: 2rem;
padding-bottom: 3rem;
color: var(--color4);
text-align: center;
}
.swiper-pagination-bullet{
background-color: var(--brown);
}
.swiper-button-next{
color: var(--brown);
}
.swiper-button-prev{
color: var(--brown);
}
/* media queries for web responsive */
@media (max-width:991px){
html{
font-size: 55%;
}
.header{
padding: 1.3rem 3rem;
}
}
@media (max-width:768px) {
#menubar{
display: inline-block;
}
.header .navbar{
position: absolute;
top: 100%;
right: -100%;
width: 25rem;
background-color: var(--peach);
height: 80vh;
}
.header .navbar.active{
right: 0;
}
.header .navbar a{
display: block;
font-size: 2rem;
color: var(--color3);
margin: 1.5rem;
}
}
@media (max-width:600px){
html{
font-size: 50%;
}
}