*{
margin: 0;
padding: 0;
--primary-color:#d89e2d;
--secondary-color:#946c24;
--dark-color:#2d2c2b;
--dark-color-2:#644c24;
--body-background-color:#fafafa;
--white-color:#fff;
--mobile-device-starts:420px;
--mobile-device-ends:768px;
--footer-color:#eaeaea;
}
::-webkit-scrollbar {
width: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background:var(--dark-color-2);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background:var(--secondary-color);
}
/* Track */
::-webkit-scrollbar-track {
background: var(--white-color);
}
ul,p{
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
a{
text-decoration: none !important;
color:inherit
}
a:link{
color:inherit !important
}
a:visited{
color: inherit !important
}
body{
background-color: var(--body-background-color) !important;
font-family: 'Open Sans', sans-serif !important;
}
@media screen and (max-width: 768px) {
.home__header{
align-items: center;
padding-inline: 20px !important;
min-height: 100px;
color: white;
}
.main__section{
padding-top:100px;
min-height: 90vh;
}
.drawer_ul>li{
font-size: 16px;
padding:5px 10px;
font-weight: bolder;
border-top:1px solid black
}
.drawer_ul>li{
margin-top: 10px;
}
.drawer_footer_ul{
display: flex;
flex-direction: row;
justify-content: center;
float: auto;
}
.drawer_footer_ul>li{
margin-inline: 5px;
}
/* Header Top Css*/
.header__top{
background-color: var(--footer-color);
color:black;
padding: 5px;
padding-inline:30px;
margin-inline:10px;
border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}
}
.hdr{
position: fixed;
width: 100%;
z-index: 1000;
}
/* HEADER CSS ENDS */
.header__top>ul>li>ul>li{
padding-inline: 10px;
font-size: 14px;
}
.header__top>ul , .header__top>ul>li>ul{
display:flex;
flex-direction: colum;
justify-content: space-between;
list-style: none;
align-items: center;
}
@media screen and (max-width: 768px) {
.header__top{
display: block;
padding-inline:0px !important;
margin-inline:0px !important;
}
.header__top .hide{
display: none;
}
}
/*Header Top Css Ends */
/*-----
---------------------------
------*/
/* Main Header Css */
@media screen and (max-width: 768px) {
.header__main{
background-color: var(--white-color);
padding-block: 10px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.075);
}
}
@media screen and (max-width: 768px) {
.header__main{
padding-inline:5px;
margin-inline:4px;
}
.header__main>ul , .header__main>ul>li>ul{
display:flex;
flex-direction: colum;
justify-content: space-between;
list-style: none;
align-items: center;
}
.header__main>ul>li>ul>li:nth-child(2),
.header__main>ul>li>ul>li:nth-child(3),.header__main>ul>li>ul>li:nth-child(4){
display: none;
}
.header__main>ul>li>ul>li{
color: var(--dark-color);
width: auto;
padding-inline: 10px;
font-size: 17px;
font-weight: 600;
}
.header__main>ul>li>ul>li>form>input{
display: none;
}
.header__main>ul>li>ul>li>form>input:focus{
outline: none;
border:1px solid gray;
}
.header__main>ul>li>ul>li:hover{
color: var(--dark-color-2);
cursor: pointer;
}
.header__main>ul>li:nth-child(2)>ul>li:nth-child(3),.header__main>ul>li:nth-child(2)>ul>li:nth-child(4)
.header__main>ul>li:nth-child(2)>ul>li:nth-child(5){
display: flex;
}
}
@media screen and (min-width: 700px) {
.header__main>ul>li:nth-child(2)>ul>li:nth-child(3),.header__main>ul>li:nth-child(2)>ul>li:nth-child(4),
.header__main>ul>li:nth-child(2)>ul>li:nth-child(6),
.header__main>ul>li:nth-child(2)>ul>li:nth-child(5){
display: none;
}
}
/* Main Header Css Ends */
/*----BODY CSS STARTS ------------*/
@media screen and (max-width: 768px) {
.modal-ul>ul{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.modal-ul{
margin-block: 12px;
}
.cta{
width: auto;
margin-inline:10px ;
margin-block:10px 10px;
height: auto;
min-height: 300px;
border-radius: 10px;
background-position: center;
background-image: url('https://portal.ekanaherbs.com/custom/images/cta11.png');
display: flex;
align-items: center;
justify-content: start;
font-weight: bold;
font-weight: bolder;
padding-inline:300px;
}
.cta{
display: flex;
align-items: center;
justify-content: center;
padding-inline:0;
}
.cta__button{
color: white;
background-color: #000;
border-radius: 4px;
padding: 10px;
min-width: 200px;
}
.cta__button:hover{
color: black;
background-color: var(--white-color);
border-radius: 4px;
padding: 9px;
border: 1px solid black;
min-width: 200px;
transition: 0.4s ease-in;
}
}
@media screen and (max-width: 768px) {
.skeletal_ul{
display: flex; flex-direction: row;
flex-wrap: wrap;
}
.skeletal_ul>li{
flex: 250px;
margin-inline-end:0px;
margin-block-end: 5px;
}
.categories{
padding: 30px 10px;
}
.categories>h2{
font-size: 20px;
}
.categories>ul{
margin:0px;padding:0px;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.categories>ul>li{
padding-inline:1px;
font-size: 12px;
flex:50% !important;
text-align: center;
}
.categories>ul>li:hover{
cursor: pointer;
background-color: #eaeaea;
color: var(--dark-color-2);
transition: 1s ease-in-out
}
.categories>ul>li>p{
margin:0;padding: 0;
font-weight: bolder;
font-size: 20;
}
.categories>ul>li>img{
height:100px;width: 100px;
margin: auto;
}
}
@media screen and (max-width: 768px) {
.products_page{
margin-inline:2px
}
.products_page>ul{
display: flex;
flex-direction: column;
justify-content: center;
}
.products_page>ul>li:first-child{
flex: 100%;
background-color: var(--dark-color);
max-height: 400px;
}
.products_page>ul>li:nth-child(2){
flex:100%;
width: 100%;
}
.products_page>ul>li:nth-child(2)>ul{
display:flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.products_page>ul>li:nth-child(2)>ul>li{
padding-block: 10px;
flex: 100%;
}
.products_page>ul>li:first-child>ul{
display: flex;
flex-direction: column;
}
.products_page>ul>li:first-child>ul>li:first-child{
font-weight: bolder;
font-size: 22px;
border-bottom: 1px solid black;
}
.products_page>ul>li:first-child>ul>li{
display: flex;
flex-direction:row;
justify-content: space-between;
font-size: 18px;
border-bottom:1px solid gray;
padding: 1px 2px;
}
.products{
padding: 3px;
}
.products>h2{
font-size: 20px;
}
.products>ul{
margin:0px;padding:0px;
list-style: none;
display: flex;
flex-direction:column;
justify-content: center;
align-items: center;
}
.products>ul>li{
padding-inline:5px;
padding-block: 20px;
font-size: 20px;
background-color: #fafafa;
margin-inline: 10px;
}
p{
text-align: left;
}
.product__container{
display: flex;
flex-direction: column;
justify-content: start;
float:left
}
.products>ul>li:hover{
cursor: pointer;
background-color: #eaeaea;
color: var(--dark-color-2);
transition: 1s ease-in-out
}
.product__image{
height: 250px;
width: 300px;
}
.product__brand{
color:gray;
font-size: 12px;
}
.product__title{
font-weight:bolder;
font-size: 20px;
margin:0px;padding:0px
}
.product__quantity{
font-size: 15px;
}
.product__code{
color: var(--dark-color-2);
font-size: 15px;
font-weight: bold;
}
.product__addToCart{
color: var(--white-color);
background-color: var(--dark-color);
border-radius: 10px;
padding: 10px;
font-size: 12px;
float: right;
position: relative;
display:flex;
align-items: center;
}
.product__addToCart__text{
padding-inline-start: 10px;
}
.product__addToCart:hover{
background-color: var(--white-color);
color: var(--dark-color);
border: 1px solid var(--dark-color);
transition: 0.4s ease-in-out;
padding: 9px;
}
.product__addToCart::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
color: white;
margin-right: 1px; /* Adjust as needed */
}
.product__addToCart:hover::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
color: white;
margin-right: 1px; /* Adjust as needed */
}
.product__goToCart{
color: var(--dark-color);
background-color: var(--primary-color);
border-radius: 10px;
padding: 10px;
font-size: 12px;
float: right;
position: relative;
display:flex;
align-items: center;
}
.product__goToCart__text{
padding-inline-start: 10px;
}
.product__goToCart:hover{
background-color: var(--primary-color);
color: var(--dark-color);
border: 1px solid var(--dark-color);
transition: 0.4s ease-in-out;
padding: 9px;
}
.product__goToCart::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
color: white;
margin-right: 1px; /* Adjust as needed */
}
.product__goToCart:hover::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
color: white;
margin-right: 1px; /* Adjust as needed */
}
.super-script {
font-size: smaller; /* Adjust the font size */
vertical-align: super; /* Align it as a superscript */
/* You can add more styles as needed */
}
}
/*---PRODUCT BANNERS---*/
@media screen and (max-width: 768px) {
.product__banners{
padding: 1px;
}
.product__banners>ul{
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.product__banners>ul>li{
flex: 50%;
padding: 10px;
}
.product__banner>img{
max-height: 500px;
width: 100%;
}
.product__banner>.text_container{
background-color: #f9d79c84;
padding: 50px;
}
.banner_explore_button{
background-color: transparent;
border-width: 2px;
border-style: solid;
padding: 9px 30px;
font-size: 15px;
text-transform: uppercase;
border-radius: 10px;
}
}
/*----END OF PRODUCT BANNERS---*/
/*----TESTIMONIAL SECTIONS-----*/
@media screen and (max-width: 768px) {
.resource-file , .academy , .start-biz {
display: flex;
align-items: end !important;
padding-inline: 20px;
}
.testimonial{
background-color: #fafafa;
margin: 10px;
padding: 5px;
}
.testimonial>h2{
font-size: 20px;
}
.testimonial> ul{
display: flex;
flex-direction: column;
justify-content: center;
}
.testimonial>ul>li{
flex: 100%;
}
.testimonial__card>ul{
display: flex;
flex-direction: column;
justify-content: center;
}
.testimonial__card>ul>li{
padding-inline: 10px;
min-height: 300px;
margin-block:10px;
}
.testimonial__card>ul>li>.card__body{
max-width:500px;
background-color: rgba(239, 182, 132, 0.211);
padding: 20px;
}
}
/*----END OF TESTIMONIAL SECTION---*/
/*----BODY CSS ENDS ------------*/
/* HEADER CSS ENDS */
/*
---------------------------------------
---------------------------------------
---------------------------------------
*/
/* FOOTER CSS STARTS */
@media screen and (max-width: 768px) {
.carousel-skeletal{
background-color: #eaeaea;
height: auto;
margin-inline: 0px;
}
.carousel-skeletal>ul>li>img{
min-height: 230px;
max-height: 230px;
}
.carousel-skeletal>ul>li:nth-child(2){
height: 600px !important;
}
.cs2{
background-color: #dad6f67d;
}
.cs3{
background-color: var(--light-color);
}
.footer{
background-color: var(--footer-color);
color: black;
position: relative;
bottom: 0;
margin-inline: 5px;
padding: 10px;
}
.footer>ul{
margin:0;padding: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: start;
}
.footer>ul>li:first-child{
align-items: center !important;
}
.footer>ul>li>p{
color:black;
text-transform: uppercase;
font-weight: bold;
}
.footer>ul>li>ul>li{
text-align: left;
margin-block:3px;
}
.footer>ul>li>ul>{
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
}
.footer>ul>li>svg{
margin-inline-end: 10px;
margin-block:10px;
}
}
/* FOOTER CSS ENDS */
/* EKANA ACADEMY PAGE */
@media screen and (max-width: 768px) {
.smooth__header{
margin-inline:5px;
margin-block:10px;
border-radius: 10px;
/* border: 1px solid green; */
background-color: #fafafa;
height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items:center;
}
.smooth__header__info{
background-color: var(--light-color);;
}
.smooth__header>h4{
font-size: 20px;
color: rgb(4, 90, 90);
}
.search__container{
width:300px;
text-align: center;
}
.search__container>form>input{
width:100%;
margin: auto;
border-radius: 20px;
padding:5px 10px;
border: none;outline: none;
}
.search__container>input:focus{
border: none;outline: none;
}
.page__content{
margin-inline:30px;
}
.page__content>ul{
display: flex;
flex-direction: row;
}
.item__container>ul{
width: 100%;
display: flex;
flex-direction: row;
justify-content:start;flex-wrap: wrap;
}
.resource_ul{
padding-inline:1px !important;
}
.resource_ul>li{
background-color: #cbbeaf ;
flex: 100%;
margin: 1px;
margin-block: 10px !important;
}
.resource_ul>li>img{
height:200px;
}
.resource_ul>li>p{
background-color: var(--secondary-color) !important;padding-inline: 5px !important;
color: white !important;
padding: 10px !important;
}
.item__container>ul>li{
flex: 50% !important;
}
.academy__card{
height: 250px;
width: 250px;
}
.academy__card>.academy__card_content{
padding-inline: 10px;
font-size: 14px;font-weight: bold;
background-color: #e9e9e9;
}
.academy__card img{
height: 200px;
width: 240px;
}
}
/* EKANA ACADEMY PAGE ENDS */
/* Ekana About Page */
@media screen and (max-width: 768px) {
.action_ul{
display:flex;
flex-direction:row;justify-content:center;flex-wrap:'wrap'
}
.main_carousel{
margin-top:40px;
background-color: #38539a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color:#fff;
}
.comp-2>img{
height: 70px !important;
}
.comp-2>p{
font-size: 14px;
padding: 20px;
max-width: 100px;
text-align: center;
margin:auto !important;
}
.main__section>ul{
margin-inline: 0px !important;
display: flex;
flex-direction: column;
width:100%;
margin:0px
}
.main__section>ul>li:first-child{
flex: 0.25;
text-align: left;
padding-block-start: 10px;
}
.main__section>ul>li:first-child>div>ul>li{
margin-inline:10px;
margin-block:2px;
padding: 10px 10px;
background-color: #fafafa;
font-size: 16px !important;
}
/* #38539a */
.main__section>ul>li:first-child>div>ul>li:hover{
background-color: #f1f2ff !important;
color:black
}
.main__section>ul>li:first-child>div>ul>li.active{
background-color: #f1f2ff !important;
color:#38539a;
font-weight: bold;
}
.main__section>ul>li:nth-child(2){
flex: 0.7;
text-align: left;
}
.shaded-bg{
background-color: #cbbeaf;
padding: 50px 10px;
text-align: center;
border-radius: 0px 0px 10px 10px;
}
.shaded-bg>h4{
font-size: 24px;
color: #644c24;
margin: auto;
text-align: center;
}
.image__header>ul{
display:flex;
flex-direction: column;
}
.image__header>ul>li{
flex: 100%;
}
.image__header>ul>li:first-child>img{
height: 200px;
}
.image__header>ul>li:nth-child(2){
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 30px;
padding-block: 20px;
}
.image__header>ul>li>img{
width: 100%;
height: 380px;
}
.content__bg{
padding: 10px;
}
.content__bg>p{
padding: 10px;
font-size: 18px;
letter-spacing: 1px;
margin-bottom: 10px !important;
}
}
/* Ekana About Page Ends */
/* Ekana single Producy View */
@media screen and (max-width: 768px) {
.product__detail>ul{
margin-inline: 0px !important;
display: flex;
flex-direction: column;
}
.product__detail>ul>li:first-child{
flex: 0.40;
text-align: left;
padding-block-start: 10px;
height: 200px !important;
}
.product__detail>ul>li:nth-child(2){
flex: 0.60;
text-align: left;
padding-block-start: 10px;
padding-inline: 10px !important;
}
.product__detail>ul>li:first-child>div>ul>li{
margin-inline:10px;
margin-block:2px;
padding: 10px 10px;
background-color: #fafafa;
font-size: 16px !important;
}
.product__title_text{
font-size: 52px;
line-height: 100px;
}
.product__price_text1{
font-size: 23px;
color: gray;
font-weight: lighter;
}
.product__price_text2{
font-size: 32px;
color: black;
}
.product__brand_text{
font-size: 16px;
}
.product__description_text{
font-size:16px;
font-weight: bold;
color: var(--dark-color-2);
}
.product__addToCart{
font-size: 14px;
}
.product__addToCart:hover{
cursor:pointer;
}
.product_quantity__input{
outline: none;
border:1px solid black;
padding: 6px;
border-radius: 10px;
}
.product_quantity__input:focus{
outline: none;
border:1px solid purple;
}
.carousel-skeletal>ul{
display: flex;
flex-direction: column;
padding: 0px;margin: 0px;
}
.carousel-skeletal>ul>li{
flex:100%
}
.carousel-skeletal>ul>li:first-child{
min-height:200px
}
.carousel-skeletal>ul>li:nth-child(2){
min-height:300px
}
}
.cs3>ul>li:nth-child(2){
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
}
.cs1>ul>li:nth-child(2){
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px;
}
/* Ekana Single Product view */
/* Ekana All Products Page */
@media screen and (max-width: 768px) {
.product__div{
margin-inline:50px !important;
}
.product__div>ul{
display: flex;
flex-direction: row;
}
.product__div>ul>li:first-child{
display: none;
}
.product__div>ul>li:first-child>ul>li{
border-bottom: 1px solid gray;
padding: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.product__div>ul>li:first-child>ul>li>input{
height: 40px;
}
.product__div>ul>li:first-child>ul>li:first-child{
font-size: 20px;
font-weight: bolder;
border-bottom: 1px solid black;
}
}
.float__right{
float: right;
}
.clear__btn{
font-size: 14px;
font-weight:500;
}
.product__div>ul>li:nth-child(2){
flex: 100%;
text-align: left;
}
.product__div > ul > li:nth-child(2) > ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.product__div > ul > li:nth-child(2) > ul > li {
flex: 0.3;
padding-block: '10px';
}
/* Ekana All Products Page Ends */
/* Privacy Policy Page */
section{
margin-block: 40px;
}
section>h3{
text-align: left;
font-size: 20px;
font-weight: bold;
}
section>p{
margin-block-start: 20px;
font-size: 16px;
letter-spacing: 1px;
}
.addSubs{
display: flex;
align-items: center;
justify-content: center;
}