html
{
position : relative;
box-sizing : border-box;
width : 100%;
height : 100%;
}
body
{
position : relative;
box-sizing : border-box;
width : 100%;
height : auto;
margin : 0;
padding : 0;
overflow-x : hidden;
}
::-webkit-scrollbar {
width: 7px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px #5d606b52;
-moz-box-shadow:inset 0 0 6px #5d606b52;
border-radius: 10px;
/*background: #f1f1f1; */
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #6b6b6b;
border-radius: 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #444444;
}
:root {
--primary-color: #FFFFFF;
--secondary-color: #625C3B;
--tertiary-color: #424530;
--icon :#FFFDF9;
--heading : #211F1F;
--footer : #393939;
--ccc : #ccc;
--bbb : #bbb;
--banner : #717171;
--craft :#2399cc;
--dim : #898989;
--cart :#9e9e9e;
--menu : #383838;
--border : rgba(117, 117, 117, 0.5);
--shadow : rgba(117, 117, 117, 0.7);
--back-color : rgba(117, 117, 117, 0.05);
--box-color : 2px 6px 8px rgba(0, 0, 0, 0.25);
--text-shadow : 0px 4px 4px rgba(0, 0, 0, 0.25);
}
/* ELEMENT CHANGE FOR DIFFERENT SCREEN */
.onDesktop{
display : none !important;
}
/*============================================================================================
==============================================================================================
******* HEADER SECTION *******
==============================================================================================
==============================================================================================*/
.header_wrapper
{
position : -webkit-sticky;
position : sticky;
top : 0;
display : block;
box-sizing : border-box;
width : 100%;
height : 57px;
z-index : 9999;
background-color : var(--primary-color);
box-shadow: 0px 15px 5px -15px var(--secondary-color);
}
.header_details
{
position : relative;
display : flex;
justify-content : center;
color : var(--primary-color);
height : 50px;
width : 100%;
background-color : var(--secondary-color);
}
.header_margin{
display : flex;
justify-content : space-between;
align-items : center;
color : var(--primary-color);
height : 58px;
width : 90%;
}
.header_contact{
width : 100%;
height : 50px;
font-size : 13px;
font-family : "Poppins";
}
.header_desc{
/* margin-top : 10px; */
}
.header_icons{
width : 125px;
display : flex;
}
.header_icons .fa-brands
{
position : relative;
display : flex;
float : right;
width : 16px;
/* height : 19px; */
margin-left : 10px;
cursor : pointer;
padding : 0px;
justify-content : space-between;
}
.header_icons .fa-brands:hover
{
transform : scale(1.1);
}
.header_icons .fa-facebook-f
{
font-size : 13px;
color : var(--primary-color);
text-align : center;
padding : 10px;
/* border-radius : 50%;
background-color : #4267B2; */
}
.header_icons .fa-whatsapp
{
font-size : 15px;
color : var(--primary-color);
text-align : center;
padding : 10px;
/* border-radius : 50%; */
/* background-color : #4FCE5D;
*/
}
.header_icons .fa-instagram
{
font-size : 15px;
color : var(--primary-color);
text-align : center;
padding : 10px;
/* border-radius : 50%; */
/* background-color : #4FCE5D;
*/
}
.header_wrapper .header
{
position : relative;
display : flex;
box-sizing : border-box;
float : left;
width : 100%;
height : 57px;
/*max-width : 540px;*/
align-items : center;
}
.header_wrapper .header .logo
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 80px;
height : 80px;
margin : 10px 0px 0px 10px;
}
.header_wrapper .header .logo img
{
width : 100%;
height : 100%;
border-radius : 50%;
}
.mobile_logo{
position : relative;
display : block;
box-sizing : border-box;
width : 50px;
height : 50px;
margin-left : 10px;
}
.mobile_logo img{
width : 100%;
height : 100%;
border-radius : 50%;
}
/*============================================================================
****** MENU PART ******
==============================================================================*/
.menu
{
position : absolute;
top : 55px;
left :-250px;
background-color : var(--primary-color);
width : 250px;
height : 730px;
transition : 0.3s;
}
/*.menu .mobile_logo{*/
/* position : relative;*/
/* display : block;*/
/* box-sizing : border-box;*/
/* width : 80px;*/
/* height : 80px;*/
/* margin : 10px 0px 0px 10px;*/
/*}*/
/*.menu .mobile_logo img{*/
/* width : 100%;*/
/* height : 100%;*/
/* border-radius : 50%;*/
/*}*/
.menu .menu_list{
margin-top: 20px;
}
.menu.active
{
left : 0px;
}
.menu ul
{
padding: 0px;
}
.menu ul li
{
display : flex;
flex-direction : column;
list-style : none;
font-size : 1.0rem;
font-family : "Poppins";
font-weight : 700;
}
/*.menu ul li:hover*/
/*{*/
/* background-color : #9F622E;*/
/* font-size : 1.0rem;*/
/*}*/
.menu ul li a
{
padding : 10px 20px;
color : var(--tertiary-color);
/*width : 100%;*/
text-decoration : none;
/*box-shadow: 0 2px 2px 0 #bdbdbd;*/
}
.menu ul li .onMobile:after{
content: '\002B';
color: var(--menu);
font-weight: bold;
float: right;
margin-left: 5px;
}
.menu ul li .onMobile.active:after {
content: "\2212";
}
/* .menu ul a +ul {*/
/* max-height:0;*/
/* overflow:hidden;*/
/* transition: max-height 0.2s ease-out;*/
/* }*/
/*.menu ul a:focus + ul {*/
/* max-height:15em;*/
/* }*/
/* only select that link , here using the href attribute */
/*a[href="nowhere"]:focus {*/
/* pointer-events: none;*/
/*}*/
.menu ul li .subMenu
{
/*display : none;*/
overflow: hidden;
max-height: 0;
transition: max-height 0.2s ease-out;
}
.menu ul li .subMenu.active
{
/*display : none;*/
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/*.menu ul li:hover > ul.subMenu*/
/*{*/
/* display : block; */
/* margin-bottom: 10px;*/
/*}*/
.menu ul li .subMenu li
{
float : left;
width : 100%;
height : auto;
background : var(--icon);
/* background-image : linear-gradient(to right, #b78760 , #f7e1ab) */
}
.menu ul li .subMenu li a
{
display : block;
box-sizing : border-box;
width : 100%;
height : auto;
line-height : 20px;
text-align : left;
padding-left : 30px;
font-family : inherit;
font-size : 0.9rem;
color : var(--heading);
transition : 0.3s;
}
.menu ul li .subMenu li a:hover
{
color : var(--heading);
/* text-decoration : underline;
text-decoration-color : #9F622E; */
text-decoration-thickness : 3px;
text-underline-offset : 10px;
}
/*-----------------------------------------
#### SIDEBAR BUTTON
-------------------------------------------*/
.hamburger
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 35px;
height : 35px;
margin-top : 10px;
}
.hamburger .sidebarBtn
{
position : absolute;
right : -6px;
width : 25px;
height : 35px;
box-sizing : border-box;
cursor : pointer;
/* background : #00000090; */
border : 1px solid var(--primary-color);
outline : none;
}
.hamburger .sidebarBtn span
{
position : absolute;
display : block;
width : 20px;
height : 3px;
background : var(--secondary-color);
top : 15px;
transition : .3s;
}
.hamburger .sidebarBtn span:before
{
content : '';
position : absolute;
top : -8px;
left : 0;
width : 100%;
height : 3px;
background : var(--secondary-color);
}
.hamburger .sidebarBtn span:after
{
content : '';
position : absolute;
top : 8px;
left : 0;
width : 100%;
height : 3px;
background : var(--secondary-color);
}
.hamburger .sidebarBtn.toggle span
{
background : transparent;
}
.hamburger .sidebarBtn.toggle span:before
{
top : 0;
transform : rotate(45deg);
}
.hamburger .sidebarBtn.toggle span:after
{
top : 0;
transform : rotate(-45deg);
}
/*-----------------------------------
#### Log in & Cart ####
-------------------------------------*/
.shop
{
position : absolute;
display : flex;
box-sizing : border-box;
width : 145px;
height : auto;
margin-top : 8px;
right : 0px;
float : right;
}
.shop button
{
float : right;
padding : 5px 5px;
margin-left : 10px;
}
.shop button:hover
{
/*background-color : #9F622F;*/
color : var(--primary-color);
cursor : pointer;
}
.shop .onclickSearch
{
/*background-color : var(--primary-color);*/
border : none;
color : var(--secondary-color);
margin-top : 3px;
font-size : 20px;
}
.shop .onclickSearch:hover
{
/*background-color : var(--primary-color);*/
color : var(--secondary-color);
cursor : pointer;
}
.shop .onclickAccount
{
/*background-color : var(--primary-color);*/
border : none;
color : var(--secondary-color);
/* margin-right : 82px; */
margin-left : 0px;
font-size : 20px;
}
.shop .onclickAccount:hover
{
/*background-color : var(--primary-color);*/
color : var(--secondary-color);
cursor : pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: var(--ccc);
/*min-width: 160px;*/
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top: 35px;
}
.dropdown-content a {
/*color: black;*/
padding: 5px 8px;
text-decoration: none;
display: block;
font-size : 0.7rem;
color : var(--heading);
font-weight : 600;
font-family :"Poppins";
}
.dropdown-content a:hover {background-color: var(--icon);}
.dropdown:hover .dropdown-content {
display: block;
}
/*.dropdown:hover .onclickAccount {*/
/*background-color: #3e8e41;*/
/*}*/
.shop .cart-logo{
/*background-color : var(--secondary-color);;*/
border-radius : 10px;
color : var(--secondary-color);
padding : 8px 12px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 20px;
margin-left : 13px;
cursor : pointer;
}
.shop .cart-logo .count {
position: absolute;
top: 0px;
right: 49px;
z-index: 2;
font-size: 10px;
border-radius: 50%;
background: var(--secondary-color);
width: 16px;
height: 16px;
line-height:16px;
display : inline-block;
text-align: center;
color: white;
font-family: 'Poppins';
font-weight: bold;
}
.scale-up {
animation: scaleUpAnimation 1s;
}
@keyframes scaleUpAnimation {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(2);
}
}
/*=========================================================
#### product collection for mobile PART ####
===========================================================*/
/* Style the product types section */
.product-types {
width: 100%;
overflow-x: hidden;
}
/* Style the scrolling container */
.scrolling-container {
display: flex;
flex-direction: row;
overflow-x: hidden;
gap: 12px; /* Adjust the gap between product types */
padding: 5px; /* Add space around the product types */
justify-content: center;
}
/* Style individual product types */
.product-type {
text-align: center;
width: 50px;
}
.product-type img {
border-radius: 50%; /* Create circular images */
width: 50px; /* Adjust the image size */
height: 50px;
}
.product-type p {
margin-top: 10px; /* Adjust the space between image and label */
font-size: 12px;
}
/*=========================================================
#### BANNER PART ####
===========================================================*/
.banner-wrapper
{
position : relative;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
width : 100%;
margin-top : 4px;
}
.index-banner-image
{
justify-content : center;
width : 98vw;
aspect-ratio: 2/3;
border: 1px solid #e5e7eb;
}
.index-banner-image .slideshow-container .mySlides
{
display : none;
}
.index-banner-image .slideshow-container img
{
vertical-align : middle;
width: 100%;
}
/* Slideshow container */
.index-banner-image .slideshow-container
{
position : relative;
margin : auto;
}
/* Next & previous buttons */
.index-banner-image .slideshow-container .prev, .next
{
cursor : pointer;
position : absolute;
top : 50%;
width : auto;
padding : 16px;
margin-top : -22px;
color : var(--primary-color);
font-weight : bold;
font-size : 18px;
transition : 0.6s ease;
border-radius : 0 3px 3px 0;
user-select : none;
}
/* Position the "next button" to the right */
.index-banner-image .slideshow-container .next
{
right : 0;
border-radius : 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.index-banner-image .slideshow-container .prev:hover, .next:hover
{
background-color : rgba(0, 0, 0, 0.8);
}
/* The dots/bullets/indicators */
.index-banner-image .slideshow-container .dot
{
cursor : pointer;
height : 15px;
width : 15px;
background-color : var(--bbb);
border-radius : 50%;
display : inline-block;
transition : background-color 0.6s ease;
}
.index-banner-image .slideshow-container .active, .dot:hover
{
background-color : var(--banner);
}
/* Fading animation */
.index-banner-image .slideshow-container .fade
{
animation-name : fade;
animation-duration : 1.0s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.banner-wrapper .text
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : auto;
background : var(--back-color);
/* background-color: #ffffff; */
background-size: 1em 1em;
}
.banner-wrapper .text .textUp
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : auto;
top : 20px;
}
.banner-wrapper .text .textUp h1
{
font-family : "Playball";
font-size : 1.4rem;
font-weight : 700;
color : var(--tertiary-color);
text-align : center;
text-shadow : 0px 5px 5px rgba(0,0,0,0.4);
padding : 0 20px;
}
.banner-wrapper .text .textDown
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : auto;
margin-top : 50px;
}
.banner-wrapper .text .textDown p
{
font-family : "Poppins";
font-size : 0.8rem;
font-weight : 500;
color : var(--tertiary-color);
text-align : justify;
padding : 0px 20px 20px 20px;
}
/*.banner-wrapper .imageSlide*/
/*{*/
/* position : relative;*/
/* display : block;*/
/* box-sizing : border-box;*/
/* float : left;*/
/* width : 100%;*/
/* height : 300px;*/
/*}*/
/* .banner-wrapper .imageSlide .banner*/
/* {*/
/* position : relative;*/
/* display : block;*/
/* box-sizing : border-box;*/
/* width : 80%;*/
/* height : 80%;*/
/* margin : 0 auto;*/
/* top : 50%;*/
/* transform : translateY(-50%);*/
/* }*/
/* .banner-wrapper .imageSlide .banner img*/
/* {*/
/* position : absolute;*/
/* width : 100%;*/
/* height : 100%;*/
/* display : none;*/
/* border-radius : 10px;*/
/* }*/
/* .banner-wrapper .imageSlide .banner img.current*/
/* {*/
/* display : block;*/
/* }*/
/* .banner-wrapper .imageSlide .leftArrow,*/
/* .banner-wrapper .imageSlide .rightArrow*/
/* {*/
/* position : absolute;*/
/* display : block;*/
/* box-sizing : border-box;*/
/* width : 40px;*/
/* height : 40px;*/
/* margin-left : 40px;*/
/* top : 130px;*/
/* }*/
/* .banner-wrapper .imageSlide .rightArrow*/
/* {*/
/* right : 40px;*/
/* }*/
/* .banner-wrapper .imageSlide .leftArrow .arrow,*/
/* .banner-wrapper .imageSlide .rightArrow .arrow*/
/* {*/
/* position : absolute;*/
/* width : 10px;*/
/* height : 10px;*/
/* border : 3px solid #565656;*/
/* border-left : none;*/
/* border-top : none;*/
/* top : 30%;*/
/* }*/
/* .banner-wrapper .imageSlide .leftArrow .arrow*/
/* {*/
/* transform : rotate(135deg);*/
/* margin-left : 13px;*/
/* }*/
/* .banner-wrapper .imageSlide .rightArrow .arrow*/
/* {*/
/* transform : rotate(-45deg);*/
/* margin-left : 15px;*/
/* }*/
/* .banner-wrapper .imageSlide .leftArrow:hover,*/
/* .banner-wrapper .imageSlide .rightArrow:hover*/
/* {*/
/* background-color : #DDDDDD;*/
/* cursor : pointer;*/
/* }*/
/*=========================================================
#### CARD MODEL PART ####
===========================================================*/
.card-collection ul
{
margin-top : 0px;
display : flex;
justify-content :center;
}
.card-collection ul li
{
list-style-type : none;
display : inline-block;
padding : 5px 0px;
}
.card-collection ul li h2
{
list-style-type : none;
display : inline-block;
padding : 5px 10px;
color : var(--tertiary-color);
text-shadow : 7px 8px 8px rgba(0, 0, 0, 0.25);
font-family : 'Poppins';
font-style : normal;
font-weight : 500;
font-size : 18px ;
}
.card-collection ul li hr{
width :80px;
margin-top :20px;
background-color :var(--secondary-color);
}
.card-wrapper
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : auto;
margin-top : 10px;
text-align : center;
}
.card-wrapper .card
{
position : relative;
display : flex;
flex-wrap : wrap;
box-sizing : border-box;
width : 100%;
/*height : 450px;*/
margin : 0 auto;
max-width : 540px;
justify-content: space-around;
}
.card-wrapper .card .container
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 150px;
height : 150px;
margin : 25px 19px;
box-shadow: var(--box-color);
border-radius: 100%;
}
.card-wrapper .card .container .image
{
position : relative;
display : block;
box-sizing : border-box;
width : 150px;
margin : 0 auto;
height : 150px;
}
.card-wrapper .card .container .image img
{
width : 100%;
height : 100%;
border-radius : 100%;
transition : .6s ease-in-out;
filter : brightness(98%);
object-fit : scale-down;
}
.card-wrapper .card .container .image figure
{
overflow : hidden;
width : 100%;
height : 100%;
margin : 0;
}
.card-wrapper .card .container .image:hover img
{
transform : scale(1.5);
filter : brightness(100%);
}
.card-wrapper .card .container .details
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : 50px;
margin : 0 auto;
/* border : 1px solid #e6e6e6; */
/* border-radius : 15px; */
}
.card-wrapper .card .container .details h2
{
text-align : center;
color : var(--tertiary-color);
font-family : "Poppins";
font-size : 1.0rem;
font-weight : 400;
margin-top : 8px;
text-shadow : 0 4px 4px rgba(0,0,0,0.3);
}
.card-wrapper .card .container .details a
{
list-style : none;
text-decoration : none;
}
#more-button {
padding: 10px 50px;
margin-top: 20px;
font-size: 18px;
background-color: #3498db;
color: #fff;
border: none;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.8s ease-in-out, color 0.8s ease-in-out;
}
.shake-button {
animation: shake 1.0s infinite, colorChange 1s infinite alternate;
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
transform: translateX(-2px);
}
20%, 40%, 60%, 80% {
transform: translateX(2px);
}
}
@keyframes colorChange {
0% {
background-color: #837944;
color: #fff;
}
100% {
background-color: #424530;
color: #fff;
}
}
/*================================================================================
==================================================================================
#### What is Zineartindia ####
==================================================================================
================================================================================*/
.whatIs-Wrapper
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : auto;
margin-top : 20px;
}
.whatIs-Wrapper .whatIs
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : auto;
margin : 0 auto;
max-width : 540px;
}
.whatIs-Wrapper .whatIs h1
{
color : var(--tertiary-color);
text-align : center;
font-weight : 700;
font-size : 1.5rem;
/* line-height : 1; */
font-family : "poppins";
margin-bottom: 2%;
}
.whatIs-Wrapper .whatIs h2
{
color : var(--tertiary-color);
text-align : center;
font-weight : 700;
font-size : 1.5rem;
/* line-height : 1; */
font-family : "poppins";
margin-bottom: 2%;
}
.whatIs-Wrapper .whatIs h3
{
color : var(--secondary-color);
text-align : center;
font-weight : 500;
font-size : 1.0rem;
text-decoration : underline;
font-family : "Poppins";
/* line-height : 1; */
margin-top : -10px;
}
.whatIs-Wrapper .whatIs .container
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : auto;
margin-bottom : 10px;
}
.whatIs-Wrapper .whatIs .container h1
{
color : var(--tertiary-color);
text-align : center;
font-weight : 700;
font-size : 1.5rem;
/* line-height : 1; */
font-family : "Poppins";
}
.whatIs-Wrapper .whatIs .container p
{
color : var(--tertiary-color);
text-align : justify;
font-weight : 500;
font-size : 0.9rem;
/* line-height : 1; */
font-family : "Poppins";
padding : 0px 10px;
}
/*================================================================================
==================================================================================
#### SEARCH PART ####
==================================================================================
================================================================================*/
.search_wrapper
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : auto;
margin-top : 40px;
background : var(--back-color);
/* background-color: #ffffff; */
background-size: 1em 1em;
}
.search_wrapper .search
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : auto;
margin : 0 auto;
max-width : 540px;
}
.search_wrapper .search h2
{
color :var(--tertiary-color);
text-align : center;
font-weight : 500;
font-size : 1.2rem;
line-height : 1;
font-family : "Poppins";
margin-top : 40px;
}
.search_wrapper .search h3
{
color : var(--tertiary-color);
text-align : center;
font-weight : 300;
font-size : 0.8rem;
font-family : "Poppins";
margin-top: 10px;
}
.search_wrapper .search .itemSearchBy
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : auto;
margin : 0 auto;
}
.search_wrapper .search .itemSearchBy button
{
margin-left : 10%;
}
.search_wrapper .search hr
{
/* width : 80%; */
background-color :var(--secondary-color);
margin-top : 10px;
}
.search_wrapper .search .searchItem
{
position : relative;
display : flex;
box-sizing : border-box;
float : left;
width : 100%;
height : auto;
padding : 10px;
flex-direction : column;
align-items : stretch;
}
.search_wrapper .search .searchItem form
{
display : none;
}
.search_wrapper .search .searchItem #activeDist form
{
display : block;
}
.search_wrapper .search .searchItem .form-control
{
position : relative;
display : block;
box-sizing : border-box;
margin : 10px auto;
}
.search_wrapper .search #inputState
{
border-radius : 5px;
font-size : 16px;
width : 100%;
border : 1px solid var(--heading);
}
.search_wrapper .search #inputDistrict
{
border-radius : 5px;
font-size : 16px;
width : 100%;
border : 1px solid var(--heading);
}
.search_wrapper .search .searchItem .craft_list
{
position : relative;
display : none;
box-sizing : border-box;
float : left;
width : 100%;
height : 200px;
margin-top : 10px;
}
.search_wrapper .search .searchItem .craft_list button
{
width : 100%;
height : 42px;
background-color : var(--primary-color);
border-radius : 5px;
border : 1px solid var(--heading);
font-size : 16px;
border : 1px solid var(--heading);
}
.search_wrapper .search .searchItem .craft_list .crafts
{
position : absolute;
display : none;
box-sizing : border-box;
float : left;
width : 100%;
height : auto;
background-color : var(--primary-color);
border : 1px solid var(--heading);
border-radius : 10px;
box-shadow : 0 8px 8px 0 rgb(0 0 0 / 20%);
}
.search_wrapper .search .searchItem .craft_list .crafts ul
{
list-style-type : none;
margin-top : 0;
}
.search_wrapper .search .searchItem .craft_list .crafts ul li
{
/* margin-left : -40px; */
padding : 0px 15px;
}
.search_wrapper .search .searchItem .craft_list .crafts ul a
{
text-decoration : none;
color : var(--heading);
font-family : "Poppins";
font-size : 17px;
font-weight : 500;
}
.search_wrapper .search .searchItem .craft_list .crafts ul li:hover
{
background-color : var(--craft);
color : var(--primary-color);
}
.search_wrapper .search .searchButton
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : auto;
margin-bottom : 20px;
}
.search_wrapper .search .searchButton button
{
position : relative;
display : block;
box-sizing : border-box;
margin : 0 auto;
padding : 5px 12px;
border-radius : 5px;
color : var(--tertiary-color);
background-color : var(--icon);
font-size : 14px;
border : 1px solid var(--heading);
}
/* .search_wrapper .search .searchButton button:hover
{
background-color : transparent;
color : #262626;
font-weight : 700;
cursor : pointer;
} */
/*----------------------------------------------------
#### Button Indicator(Global Search)
------------------------------------------------------*/
.btn
{
padding : 5px 15px;
margin-left : 0%;
color : var(--secondary-color);
border : none;
cursor : pointer;
background-color : transparent;
font-size : 1.0rem;
font-weight : 700;
/* color : #464646; */
}
.now, .btn:hover
{
background-color : transparent;
border-bottom : 2px solid var(--heading);
}
/*=========================================================
#### CHOOSE US ####
===========================================================*/
.icons-container{
/*display: grid;*/
/*grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));*/
/*gap:1.5rem;*/
justify-items: center;
}
.chooseus h2{
font-size: 28px;
font-family: "Poppins";
padding : 5px 10px;
color : var(--tertiary-color);
text-shadow : 7px 8px 8px rgba(0, 0, 0, 0.25);
font-weight : 500;
text-align: center;
margin: 15px 0px 0px 0px;
}
.chooseus h4{
font-family : "Poppins";
font-size : 12px;
font-weight : 400;
color : var(--tertiary-color);
text-align : center;
margin: 0px;
}
.icons-container .icons{
display: flex;
align-items: center;
gap:1.5rem;
padding:2rem;
}
.icons-container .icons i{
font-size: 2.5rem;
color:var(--tertiary-color);
}
.icons-container .icons h3{
font-size: 18px;
color:var(--tertiary-color);
padding-bottom: .5rem;
font-family : "Poppins";
margin: 0px;
}
.icons-container .icons p{
font-size: 14px;
color:var(--tertiary-color);
font-family : "Poppins";
margin: 0px;
}
/*=========================================================
#### CUSTOMER REVIEWS ####
===========================================================*/
.customer
{
position : relative;
width : 100%;
margin-top : 10px;
margin-bottom: 5%;
display : flex;
justify-content : center;
flex-direction : column;
align-items : center;
background-color : var(--back-color);
}
.customer .heading{
height: 100%;
padding-bottom: 40px;
}
.customer .heading h2{
text-align : center;
font-weight : 500;
font-size : 1.2rem;
line-height : 1;
font-family : "Poppins";
padding-top : 40px;
color : var(--tertiary-color);
margin-bottom: 3%;
}
.customer .heading h3{
text-align : center;
font-weight : 300;
font-size : 0.8rem;
line-height : 1;
font-family : "Poppins";
color : var(--tertiary-color);
}
.customer-img
{
width : 100%;
/*height : 200px;*/
text-align: center;
}
.customer-img .review{
display: flex;
flex-direction: column;
align-items: center;
}
/*=========================================================
#### FOOTER PART ####
===========================================================*/
.footer-wrapper
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
/* height : 638px; */
margin-top : 70px;
background-color : var(--footer);
}
.footer-wrapper .footer
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : auto;
margin : 0 auto;
max-width : 1440px;
}
.footer-wrapper .footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap:1rem;
}
.footer-wrapper .footer .box-container .box h3{
font-size: 1.1rem;
color:var(--primary-color);
padding:1rem 0;
font-family: "Poppins";
font-weight: normal;
}
/* .footer-wrapper .footer .box-container .box a{
display: block;
font-size: 0.8rem;
color:var(--primary-color);
padding:2px;
text-decoration: none;
font-family: "Poppins";
font-weight: lighter;
} */
.footer-wrapper .footer .box-container .box li{
display: block;
font-size: 0.8rem;
color:var(--primary-color);
padding:2px;
text-decoration: none;
font-family: "Poppins";
font-weight: lighter;
}
.footer-wrapper .footer .box-container .box a i{
color:var(--icon);
padding-right: .5rem;
}
/* .footer-wrapper .footer .box-container .box a:hover i{
padding-right: 2rem;
} */
.footer-wrapper .footer .box .share{
padding-right:1rem 0;
text-align: center;
font-family: "Poppins";
display: flex;
position: relative;
justify-content: space-between;
}
.footer-wrapper .footer .box .share a i{
height: 0.8rem;
/*width: 0.8rem;*/
font-size: 1.5rem;
color:var(--icon);
/*margin:0 .3rem; */
}
.footer-wrapper .footer .share a i:hover{
font-size: 1.7rem;
}
.footer-wrapper .footer .box-container .box h4{
font-size: 1rem;
color:var(--primary-color);
padding:1rem 0;
font-family: "Poppins";
font-weight:normal;
}
/* .footer-wrapper .footer .box .subscribe{
padding-right:1rem 0;
text-align: center;
font-family: "Poppins";
display: flex;
position: relative;
/* justify-content: space-between;
}
.footer-wrapper .footer .box .subscribe .required{
padding-right:1rem 0;
text-align: center;
font-family: "Poppins";
display: flex;
position: relative;
border-radius:5px; */
/* justify-content: space-between; */
/*}
.footer-wrapper .footer hr
{
/* position : relative;
display : block;
box-sizing : border-box;
height : 50px;
margin : 0 auto;
max-width : 1440px;
width : 100%;
border: 0.1px light var(--icon);
}
.footer-wrapper .footer .left
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : 50px;
}
.footer-wrapper .footer .left p
{
color : var(--primary-color);
text-align : left;
font-family : "Poppins";
font-size : 15px;
margin-top: 12px;
}*/
/*.footer-wrapper .footer .container .content .contactform
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : auto;
margin : 0 auto;
}
.footer-wrapper .footer .container .content .contactform .input input
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 20px;
border : 1px solid var(--primary-color);
outline : none;
font-size : 14px;
padding : 0px 10px;
margin : 5px auto;
background-color : #ddd;
}
.footer-wrapper .footer .container .content .contactform .input textarea
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 50px;
border : 1px solid var(--primary-color);
outline : none;
font-size : 14px;
padding : 0px 10px;
margin : 5px auto;
background-color : #ddd;
}
.footer-wrapper .footer .container .content .contactform .button
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : auto;
margin : 0 auto;
}
.footer-wrapper .footer .container .content .contactform .button input
{
background-color : transparent;
padding : 3px 10px;
font-size : 15px;
font-weight : 500;
border : 1px solid var(--primary-color);
border-radius : 20px;
color : #CCCCCC;
margin : 10px 40px 20px 0px;
}
.footer-wrapper .footer .container .content .contactform .button input:hover
{
background-color : #9F622E;
cursor : pointer;
color : var(--primary-color);
font-weight : 500;
}*/
.bottom-wrapper
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : 55px;
background-color : var(--footer);
margin-top: 10px;
}
.bottom-wrapper .bottom
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 50px;
margin : 0 auto;
max-width : 1440px;
}
.bottom-wrapper .bottom hr
{
/* position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 50px;
margin : 0 auto;
max-width : 1440px; */
/* border: 0.2px light var(--icon); */
}
.bottom-wrapper .bottom .left
{
position : relative;
display : flex;
box-sizing : border-box;
float : left;
width : 100%;
height : 50px;
align-items: center;
}
.bottom-wrapper .bottom .left p
{
color : var(--primary-color);
text-align : left;
font-family : "Poppins";
font-size : 13px;
}
/*.bottom-wrapper .bottom .middle*/
/*{*/
/* position : relative;*/
/* display : block;*/
/* box-sizing : border-box;*/
/* float : left;*/
/* width : 33%;*/
/* height : 50px;*/
/*}*/
.bottom-wrapper .bottom .right
{
position : relative;
display : block;
box-sizing : border-box;
float : right;
width : 33%;
height : 50px;
}
/*---------------------------------------------------------
### Visitor Counter
-----------------------------------------------------------*/
.visitor-counter
{
position : relative;
box-sizing : border-box;
display : block;
width : auto;
height : 50px;
text-align : center;
line-height : 50px;
margin : 0 auto;
padding : 0;
}
.visitor-counter ul
{
display : inline-block;
width : auto;
list-style-type : none;
padding : 0;
}
.visitor-counter ul li
{
display : block;
float : left;
width : 20px;
height : 25px;
margin-right : 4px;
text-align : center;
line-height : 25px;
background-color : var(--icon);
border-radius : 5px;
color : var(--tertiary-color);
font-family : "Poppins",sans-serif;
font-size : 15px;
font-weight : 600;
}
.visitor-counter ul li:first-of-type
{
width : auto;
background-color : transparent;
font-family : "Poppins",sans-serif;
font-size : 15px;
font-weight : 500;
color : var(--primary-color);
}
/*==========================================================================================
============================================================================================
****** CONTACT US PAGES ******
============================================================================================
============================================================================================*/
.contactform .contact_left
{
width : 95%;
height : 250px;
border : 1px solid var(--border);
border-radius : 5px;
text-align : center;
font-family : "Poppins";
padding : 6px;
margin-top: 10%;
}
.contactform .contact_left a
{
text-decoration : none;
}
.contactform .contact_left h2
{
/*margin-left : 50px;*/
font-family : "Poppins";
font-weight : 500;
font-size : 0.9rem;
color : var(--tertiary-color);
}
.contactform .contact_left h3
{
/*margin-left : 50px;*/
font-family : "Poppins";
font-weight : 500;
font-size : 1.1rem;
color : var(--tertiary-color);
text-shadow: var(--text-shadow);
}
.contactform .contact_left .fa-at
{
color : var(--secondary-color);
}
.contactform .contact_left .fa-facebook-f
{
color : var(--secondary-color);
}
.contactform .contact_left .fa-instagram
{
color : var(--secondary-color);
}
.contactform .contact_left .fa-hand-point-right
{
color : var(--secondary-color);
}
.messageBox{
width: 300px;
}
.contactform {
/*width: 85%;*/
margin-left: 4%;
font-family: 'poppins';
/*display: grid;*/
/*grid-template-columns: 1fr 1fr;*/
align-items: center;
}
.contactform h4
{
width : 100%;
height : auto;
color : var(--tertiary-color);
font-size :1.1rem;
font-weight :500;
text-shadow :var(--text-shadow);
font-family :"Poppins";
margin-top: 4%;
}
.contactform button
{
color : var(--primary-color);
background-color : var(--tertiary-color);
margin-top : 30px;
padding : 10px 15px;
border-radius : 5px;
border : none;
cursor : pointer;
}
.contactform button:hover
{
background-color : var(--craft);
}
.contactform .form_container
{
display:grid;
grid-template-columns: 1fr;
}
.form_container div{
display: flex;
}
.form_container div.input_clearfix{
flex-direction: column;
width: 38%;
}
.contactform .form_container label
{
display : block;
box-sizing : border-box;
width : 100%;
/*height : 25px;*/
font-family : "Poppins";
font-weight: 400;
/*margin-left : 30px;*/
margin-top : 15px;
font-size: 14px;
}
.contactform .form_container input
{
display : block;
height : 40px;
width : 350px;
border-radius : 3px;
padding : 4px 10px;
font-size : 1.0rem;
border : 1px solid var(--border);
/*margin-top : 15px;*/
}
.contactform .form_container textarea
{
display : block;
height : 100px;
width : 350px;
border-radius : 3px;
padding : 4px 10px;
font-size : 1.0rem;
border : 1px solid var(--border);
/*margin-top : 15px;*/
}
.contactform .button
{
position : relative;
display : flex;
box-sizing : border-box;
float : left;
width : 40%;
height : 50px;
margin-top: 3%;
}
.contactform .button input
{
background-color : transparent;
padding : 3px 18px;
font-size : 14px;
font-weight : 400;
/*border : 1px solid var(--heading);*/
border-radius : 5px;
color : var(--primary-color);
background-color : var(--tertiary-color);
margin : 7px 30px 0px 35px;
}
/*==========================================================================================
============================================================================================
****** BANNER SECTION FOR ALL OR MULTIPLE PAGES ******
============================================================================================
============================================================================================*/
.mainBanner-wrapper
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
/*height : 250px;*/
}
.mainBanner-wrapper .mainBanner
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : 220px;
justify-content : center;
}
.mainBanner-wrapper .mainBanner img
{
width : 90%;
height : 100%;
object-fit : cover;
}
.title
{
box-sizing : border-box;
text-align : center;
padding-top : 20px;
}
.mainBanner-wrapper .title h1
{
text-align : center;
font-family : "Poppins";
font-weight : 500;
font-size : 1.5rem;
color : var(--tertiary-color);
text-shadow : var(--text-shadow);
}
/*==========================================================================================
============================================================================================
****** ABOUT US PAGE ******
============================================================================================
============================================================================================*/
.about-wrapper
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : auto;
}
.about-wrapper .about
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : auto;
margin : 0 auto;
max-width : 540px;
}
.about-wrapper .about p
{
font-family : "Poppins",sans-serif;
font-size : 0.9rem;
font-weight : 500;
color : var(--tertiary-color);
text-align : justify;
line-height : 1.4;
}
p.index-sub-title:before
{
content : attr(firstLetter);
display : inline-block;
width : 40px;
height : 40px;
margin : 0;
padding : 0;
text-align : center;
line-height : 40px;
background-color: var(--primary-color);
font-size : 2.5rem;
color : var(--tertiary-color);;
}
/*==========================================================================================
============================================================================================
****** ITEMS PAGE (Terracotta, Chou Mask, Wooden Doll etc....) ******
============================================================================================
============================================================================================*/
.item-wrapper
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : auto;
/*margin-top : 50px;*/
padding-top: 60px;
flex-direction: column;
}
.item-wrapper .item
{
position : relative;
display : flex;
/*justify-content : space-around;*/
box-sizing : border-box;
width : 90%;
height : auto;
margin : 0 auto;
max-width : 540px;
/*align-items : center;*/
/*background : var(--back-color);*/
}
.item-wrapper .item .leftContainer
{
position : relative;
display : flex;
flex-wrap : wrap;
box-sizing : border-box;
width : 100%;
height : auto;
flex-direction : row;
justify-content: center;
/*align-items : center;*/
}
.item-wrapper .item .leftContainer .container
{
position : relative;
display : flex;
box-sizing : border-box;
/* float : left; */
width : 40%;
height : 200px;
margin : 10px;
box-shadow: var(--box-color);
border-radius: 10px;
align-items: center;
justify-content: center;
}
.item-wrapper .item .leftContainer .container .image
{
position : relative;
display : block;
box-sizing : border-box;
/*float : left;*/
width : 90%;
/* height : 270px; */
}
.item-wrapper .item .leftContainer .container .image img
{
width : 100%;
height : auto;
/*border-radius : 15px;*/
transition : .6s ease-in-out;
filter : brightness(98%);
object-fit : scale-down;
}
.item-wrapper .item .leftContainer .container .image figure
{
overflow : hidden;
/* width : 100%; */
/* height : 100%; */
margin : 10px;
}
/* .item-wrapper .item .leftContainer .imageSlide
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 250px;
}
.item-wrapper .item .leftContainer .imageSlide .banner
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 250px;
}
.item-wrapper .item .leftContainer .imageSlide .banner img
{
position : absolute;
width : 100%;
height : 100%;
display : none;
border-radius : 10px;
object-fit : scale-down;
}
.item-wrapper .item .leftContainer .imageSlide .banner img.current
{
display : block;
}
.item-wrapper .item .leftContainer .imageSlide .leftArrow,
.item-wrapper .item .leftContainer .imageSlide .rightArrow
{
position : absolute;
display : block;
box-sizing : border-box;
width : 40px;
height : 40px;
margin-left : 10px;
top : 110px;
}
.item-wrapper .item .leftContainer .imageSlide .rightArrow
{
right : 10px;
}
.item-wrapper .item .leftContainer .imageSlide .leftArrow .arrow,
.item-wrapper .item .leftContainer .imageSlide .rightArrow .arrow
{
position : absolute;
width : 10px;
height : 10px;
border : 3px solid #565656;
border-left : none;
border-top : none;
top : 30%;
}
.item-wrapper .item .leftContainer .imageSlide .leftArrow .arrow
{
transform : rotate(135deg);
margin-left : 13px;
}
.item-wrapper .item .leftContainer .imageSlide .rightArrow .arrow
{
transform : rotate(-45deg);
margin-left : 15px;
}
.item-wrapper .item .leftContainer .imageSlide .leftArrow:hover,
.item-wrapper .item .leftContainer .imageSlide .rightArrow:hover
{
background-color : #DDDDDD;
cursor : pointer;
} */
.item-wrapper .artist
{
position : relative;
display : block;
box-sizing : border-box;
/* float : left; */
/* width : 100%; */
/* height : 250px; */
}
.item-wrapper .artist h2
{
color : var(--tertiary-color);
font-size : 18px;
font-weight : 300;
/*width : 300px;*/
height : 100px;
cursor : pointer;
text-shadow : var(--text-shadow);
display : flex;
align-items : center;
justify-content : center;
}
.item-wrapper .artist h2:hover
{
font-size : 20px;
}
.desc
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
/* height : 290px; */
background : var(--back-color);
flex-direction: column;
}
.desc .heading{
text-align : center;
font-family : "Poppins";
font-weight : 500;
font-size : 1.3rem;
color : var(--tertiary-color);
/*text-shadow : var(--text-shadow);*/
padding: 30px 0px;
/*margin-bottom: 15px;*/
}
.desc .details
{
position : relative;
display : block;
box-sizing : border-box;
/*float : left;*/
/*width : 100%;*/
/* height : 290px; */
/* margin-top : 20px; */
/* overflow-y : scroll; */
}
.desc .details p
{
font-family : "Poppins";
font-size : 0.9rem;
font-weight : 300;
color : var(--tertiary-color);
text-align : justify;
padding : 20px;
}
/*==========================================================================================
============================================================================================
****** SEARCH BY STATE,DIST,PRODUCT(search.php) ******
============================================================================================
============================================================================================*/
.searchWrapper
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : auto;
}
.searchWrapper .searchWrapp
{
position : relative;
display : block;
box-sizing : border-box;
width : 80%;
height : auto;
margin : 0 auto;
}
.searchWrapper .searchWrapp h1{
font-family: Poppins;
font-size: 18px;
font-weight: 500;
/* line-height: 36px;
letter-spacing: 0em; */
color: var(--tertiary-color);
text-shadow: var(--text-shadow);
margin: 5%;
}
.searchWrapper .searchWrapp .details_content .title_contaniner a{
font-family: Poppins;
font-size: 12px;
font-weight: 500;
color: var(--tertiary-color);
text-shadow: var(--text-shadow);
}
.searchWrapper .searchWrapp .details_container
{
position : relative;
display : flex;
/* flex-wrap : wrap; */
justify-content : space-around;
box-sizing : border-box;
width : 100%;
height : auto;
}
.searchWrapper .searchWrapp .details_content
{
position : relative;
display : flex;
flex-direction : column;
box-sizing : border-box;
width : 40%;
height : 180px;
margin : 20px 8px;
background-color : var(--primary-color);
border-radius : 15px;
box-shadow : 0 8px 8px 0 rgb(0 0 0 / 20%);
}
.searchWrapper .searchWrapp .details_content .imge_contaniner
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 130px;
border-bottom : 1px solid var(--bbb);
overflow : hidden;
padding: 10px;
}
.searchWrapper .searchWrapp .details_content .title_contaniner
{
position : relative;
display : flex;
box-sizing : border-box;
height : 45px;
font-family : "Poppins";
font-weight : 10px;
color : var(--tertiary-color);
/* padding : 10px; */
background-color : var(--primary-color);
border-radius: 10px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.details_container
{
position : relative;
display : flex;
flex-wrap : wrap;
justify-content : space-around;
box-sizing : border-box;
width : 100%;
height : auto;
}
.details_content
{
position : relative;
display : flex;
flex-direction : column;
box-sizing : border-box;
width : 45%;
height : 330px;
margin : 15px 8px;
border-radius : 15px;
background-color : var(--primary-color);
box-shadow : 0 4px 4px 0 #bdbdbd;
}
.details_content .imge_contaniner
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 170px;
border-bottom : 1px solid var(--bbb);
overflow : hidden;
}
.details_content .imge_contaniner i{
position: absolute;
z-index: 1;
top: 10px;
right: 8px;
color: white;
font-size: 18px;
}
.details_content .imge_contaniner img
{
width : 100%;
height : 100%;
object-fit : scale-down;
transition : .5s ease-in-out;
}
.details_content .imge_contaniner:hover img
{
transform : scale(1.2);
}
.details_content .title_contaniner
{
position : relative;
display : flex;
box-sizing : border-box;
height : 160px;
color : var(--tertiary-color);
font-family : "Poppins";
font-weight : 250;
font-size : 14px;
padding : 10px;
background-color : var(--primary-color);
border-radius: 15px;
flex-direction: column;
justify-content: space-around;
}
.details_content .title_contaniner p{
color : var(--dim);
font-size : 13px;
}
.details_content .title_contaniner .addcart{
display : flex;
justify-content: center;
margin-top: 10px;
}
/*==========================================================================================
============================================================================================
****** SEARCH PRODUCT LIST(productsearch.php) ******
============================================================================================
============================================================================================*/
.productSearchWrapper
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : auto;
margin-top : 10px;
}
.productSearchWrapper .productSearch
{
position : relative;
display : block;
box-sizing : border-box;
width : 98%;
height : auto;
margin : 0 auto;
}
.productSearchWrapper .productSearch h1{
font-family: "Poppins";
font-size: 18px;
font-weight: 500;
line-height: 36px;
letter-spacing: 0em;
/*text-align: ;*/
color: var(--tertiary-color);
text-shadow: var(--text-shadow);
}
.details_content .Add_To_Cart
{
background-color : var(--secondary-color);
padding : 5px;
color : var(--primary-color);
width : 70%;
cursor : pointer;
border-radius : 5px;
border : none;
margin-left: 15%;
}
.details_content .Add_To_Cart:hover button
{
box-shadow : 0 8px 8px 0 var(--cart);
}
/*==========================================================================================
============================================================================================
****** PRODUCT DETAILS(productl-details.php) ******
============================================================================================
============================================================================================*/
.listImage
{
position : relative;
display : flex;
flex-direction : column;
align-items : center;
box-sizing : border-box;
width : 100%;
height : auto;
}
.listImage img
{
width : 100%;
height : 100%;
object-fit : scale-down;
aspect-ratio: 1 / 1;
}
.listDescription
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : auto;
padding : 0px 20px;
}
.listDescription h3
{
font-size : 15px;
font-family : "Poppins";
font-weight : bold;
}
.listDescription P
{
font-family : "Poppins";
text-align : justify;
margin-bottom: 5px;
}
.listDescription .details
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
}
.product_collapsible
{
background-color : var(--primary-color);
cursor : pointer;
padding : 10px;
width : 100%;
border : none;
text-align : left;
outline : none;
font-size : 15px;
border-bottom-style : ridge;
border-bottom-color : var(--primary-color);
display: flex;
justify-content: space-between;
}
.product_collapsible .active, .product_collapsible:hover
{
background-color : var(--primary-color);
}
.product_collapsible:after
{
content : '\002B';
color : var(--heading);
font-weight : bold;
float : right;
margin-left : 5px;
}
.product_collapsible.product_active:after
{
content : "\2212";
}
.product_content
{
/*padding : 0 18px;*/
max-height : 0;
width : 100%;
overflow : hidden;
transition : max-height 0.2s ease-out;
/*background-color : var(--secondary-color);*/
}
.product_content p
{
font-size: .9em;
padding: 0 15px;
}
.product_content a
{
color: var(--secondary-color);
}
.listDescription .dimension
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : auto;
margin : 20px 0px;
}
.price
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 80%;
/*height : 360px;*/
padding : 15px;
font-family : "Poppins";
border : 1px solid var(--border);
margin-top: 20px;
border-radius: 5px;
}
.price h3
{
font-family : "Poppins";
}
.price .textarea{
font-size: 12px;
width: 100%;
border: 1px solid var(--secondary-color);
border-radius: 5px;
text-align: center;
margin-top: 10px;
}
.price button
{
background-color : var(--secondary-color);
margin-top : 20px;
color : var(--primary-color);
padding : 10px 20px;
border : none;
margin-top : 20px;
border-radius : 10px;
/* box-shadow : 0 4px 4px 0 rgb(0 0 0 / 20%); */
/* background : var(--shadow); */
border : 1px solid var(--border);
width : 100%;
}
.price button:hover
{
cursor : pointer;
}
#floating-add-to-cart {
position: fixed;
bottom: 0px; /* Adjust the distance from the bottom as needed */
/*right: 20px;*/
display: flex;
justify-content: space-around;
width : 100%;
background-color : var(--primary-color);
box-shadow: 0px -1px 4px rgba(0, 0, 0, 0.4);
}
#floating-add-to-cart button {
background-color : var(--secondary-color);
margin-top : 10px;
color : var(--primary-color);
padding : 8px 15px;
border : none;
margin-bottom : 10px;
border-radius : 10px;
width : 42%;
}
/*/*==========================================================================================
============================================================================================
****** Bulk Order ******
============================================================================================
============================================================================================*/
/*.mainbulkbody{
background-color : #FFF8E7;
}*/
.orderpage{
/*display: flex;*/
width: 100%;
/*margin-top :60px;*/
/*justify-content: space-between;*/
}
.BulkOrdercenter{
position : relative;
margin-top :40px;
height : auto;
width : auto;
color : var(--tertiary-color);
}
.BulkOrdercenter h2 {
font-size:18px;
font-weight:500;
text-align:center;
text-shadow: var(--text-shadow);
font-family: "Poppins";
}
.BulkOrderorder p {
font-size:16px;
font-weight:400;
text-align:justify;
margin-bottom: 5%;
}
.BulkOrderorder h2 {
font-size:18px;
font-weight:500;
text-align:center;
text-shadow: var(--text-shadow);
}
.BulkOrderbody{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : auto;
margin-top : 20px;
}
.BulkOrdercontent{
position : relative;
box-sizing : border-box;
padding : 5px;
margin : auto;
/*width : 90%;*/
/* border : 2px solid #9F622E;*/
}
.BulkOrdercontent .col{
display: flex;
flex-direction: column;
width: 0%;
}
.BulkOrdercontent label{
display : block;
box-sizing : border-box;
width : 80%;
height : 25px;
font-family : "Poppins";
font-weight : 400;
/*margin-left : 30px;*/
margin-top : 15px;
}
.BulkOrdercontent input{
display : block;
box-sizing : border-box;
width : 350px;
/* height : 25px; */
border-radius : 3px;
padding : 4px 10px;
font-size : 1.0rem;
border : 1px solid var(--border);
/*margin-top : 15px;*/
}
.BulkOrderorder{
padding : 3px;
max-width : 750px;
/*width: 50%;*/
/* margin-top : 30px; */
color : var(--tertiary-color);
font-family : "Poppins";
}
.BulkOrdertable{
position : relative;
max-width : 800px;
height : auto;
margin : auto;
padding :10px;
/*background-color : #FFF8E7;*/
}
.BulkOrdertable tr{
border-bottom:1px solid var(--border);
}
.BulkOrdertable .form-control{
border-radius : 10px;
cursor : pointer;
text-align : center;
}
.BulkOrdertable .quanti{
position: relative;
border-radius : 10px;
width : 35%;
margin-left : 38px;
cursor : pointer;
}
.BulkOrderbutton{
/*display : flex;*/
/* align-items : center;*/
position : relative;
max-width : 140px;
height : auto;
margin : auto;
/* padding : 5px; */
}
.BulkOrderbutton .submit{
color : var(--primary-color);
background-color : var(--tertiary-color);
/* margin-top: 30px; */
padding : 10px 25px;
border-radius : 3px;
border : none;
cursor : pointer;
}
.order_example{
/*border: solid 2px var(--border) ;*/
/*width: 315px;*/
height: auto;
/*border-radius: 10px;*/
margin-top:5px;
text-align: justify;
font-family : "Poppins";
padding: 20px 30px;
background : var(--back-color);
color : var(--tertiary-color);
text-shadow: var(--text-shadow);
}
.order_example h3{
font-size:18px;
font-weight:500;
text-align:center;
}
.order_example p{
font-size:15px;
font-weight:400;
}
/*==========================================================================================
============================================================================================
** Privacy Policy, Terms & Conditions, Interrior **
============================================================================================
============================================================================================*/
.privacy-policy-wrapper .title
{
display : block;
box-sizing : border-box;
padding : 30px;
float : right;
height : auto;
width : 100%;
right : 22px;
max-width : 1440px;
}
.privacy-policy-wrapper .title h2
{
text-align : center;
font-family : "Poppins";
font-weight : 700;
font-size : 3.4rem;
color : var(--secondary-color);
}
.policy-wrapper
{
position : relative;
display : flex;
flex-direction : column;
align-items : center;
padding : 10px;
box-sizing : border-box;
width : 100%;
height : auto;
margin-top : 50px;
}
.policy-wrapper .policy
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : auto;
margin : 0 auto;
max-width : 1440px;
}
.policy-wrapper .policy p
{
font-family : "Poppins",sans-serif;
font-size : 1.1rem;
font-weight : 500;
color : var(--tertiary-color);
text-align : justify;
line-height : 1.6;
}
p.index-sub-title:before
{
display : inline-block;
width : 40px;
height : auto;
margin : 0;
padding : 0;
text-align : center;
line-height : 40px;
background-color: var(--primary-color);
font-size : 2.5rem;
color : var(--tertiary-color);
}
/*==========================================================================================
============================================================================================
** INTERIOR **
============================================================================================
============================================================================================*/
.interior
{
position : relative;
width : 100%;
margin-top : 4px;
display : flex;
justify-content : center;
flex-direction : column;
align-items : center;
background-color : var(--back-color);
}
.interior .design{
height: 100%;
}
.interior .design h2{
text-align : center;
font-weight : 500;
font-size : 1.2rem;
line-height : 1;
font-family : "Poppins";
padding : 25px 0px;
color : var(--tertiary-color);
}
.interior .room{
text-align: center;
margin-bottom: 4%;
}
.interior .room ul{
gap: 1rem;
display: flex;
align-items: center;
font-size: 15px;
/* font-weight: 500; */
font-family: "Poppins";
}
.interior .room ul li a{
cursor: pointer;
}
.interior .room ul li a:hover{
text-decoration : underline;
text-decoration-color : var(--secondary-color);
text-decoration-thickness : 1.5px;
text-underline-offset : 10px;
cursor: pointer;
}
.interior-img
{
width : 300px;
height : 200px;
margin-bottom: 5%;
}
.interior-img .slideshow-container .mySlides
{
display : none
}
.interior-img .slideshow-container .mySlides img
{
vertical-align : middle;
width: 100%;
height: 200px;
}
/* Slideshow container */
.slideshow-container
{
position : relative;
margin : auto;
object-fit: cover;
}
.slideshow-container img{
width : 300px;
height : 200px;
object-fit: cover;
border-radius:10px;
}
/* Next & previous buttons */
.slideshow-container .prev, .next
{
cursor : pointer;
position : absolute;
top : 50%;
width : auto;
padding : 16px;
margin-top : -22px;
color : var(--primary-color);
font-weight : bold;
font-size : 18px;
transition : 0.6s ease;
border-radius : 0 3px 3px 0;
user-select : none;
}
/* Position the "next button" to the right */
.slideshow-container .next
{
right : 0;
border-radius : 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.slideshow-container .prev:hover, .next:hover
{
background-color : rgba(0, 0, 0, 0.8);
}
/* The dots/bullets/indicators */
.slideshow-container .dot
{
cursor : pointer;
height : 15px;
width : 15px;
background-color : var(--bbb);
border-radius : 50%;
display : inline-block;
transition : background-color 0.6s ease;
}
.slideshow-container .active, .dot:hover
{
background-color : var(--banner);
}
/* Fading animation */
.slideshow-container .fade
{
animation-name : fade;
animation-duration : 1.5s;
}
@keyframes fade
{
from {
opacity: .4
}
to {
opacity: 1
}
}
.main_interior-text
{
width :100%;
display :flex;
flex-direction : column;
align-items: center;
margin: 3% 0;
}
.interior-text
{
position : relative;
display : block;
background-color : var(--primary-color);
margin-top : 5px;
padding : 10px;
width : 100%;
height : auto;
color : var(--tertiary-color);
text-align: center;
}
.interior-text h1
{
text-align : center;
font-weight : 500;
font-size : 1.0rem;
/*line-height : 1;*/
font-family : "Poppins";
text-shadow: var(--text-shadow);
}
.interior-text h3
{
font-family : "Poppins";
text-align: justify;
padding-top: 10px;
font-size : 0.7rem;
}
.interior-search{
text-align : center;
margin-bottom: 3%;
width : 90%;
}
.interior-search h3{
text-align : center;
font-weight : 400;
font-size : 0.6rem;
/*line-height : 1;*/
font-family : "Poppins";
color : var(--secondary-color);
}
.open-button
{
background-color : var(--secondary-color);
margin-bottom : 10px;
color : var(--primary-color);
padding : 10px 10px;
border : none;
/*border-radius : 5px;*/
cursor : pointer;
/*width : 100px;*/
margin-top: 3%;
font-size: 10px;
}
.interior-search{
font-size:0.6rem;
}
/*****************************
INTERIOR-SEARCH
******************************/
/* The Modal (background) */
.modal
{
display : none; /* Hidden by default */
position : fixed; /* Stay in place */
z-index : 1; /* Sit on top */
padding-top : 100px; /* Location of the box */
left : 0;
top : 0;
width : 100%; /* Full width */
height : 100%; /* Full height */
overflow : auto; /* Enable scroll if needed */
background-color : rgb(0,0,0); /* Fallback color */
background-color : rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content
{
background-color : var(--primary-color);
margin : auto;
padding : 20px;
border : 1px solid var(--border);
width : 100%;
max-width : 380px;
height :fit-content;
}
/* The Close Button */
.close
{
color : var(--cart);
float : right;
font-size : 28px;
font-weight : bold;
}
.close:hover,
.close:focus
{
color : var(--heading);
text-decoration : none;
cursor : pointer;
}
/*****************************
INTERIOR-SEARCH-MESSAGE BOX POPUP
******************************/
.messageBox .contactform
{
box-sizing : border-box;
width : 100%;
height : auto;
margin-top : 10px;
text-align : center;
color :var(--secondary-color);
}
.messageBox .contactform .input input
{
height : 40px;
margin-top : 5px;
border : 2px solid var(--border);
outline : none;
font-size : 14px;
padding : 0px 10px;
background-color : var(--primary-color);
border-radius : 8px;
text-align : center;
}
.interior-input
{
display : grid;
grid-template-columns : 1fr;
grid-gap : 1rem;
}
.interior-input select{
width: 100%;
}
.interior-input input
{
height: 40px;
margin-top : 5px;
border : 2px solid var(--border);
outline : none;
font-size : 14px;
padding : 0px 30px;
background-color : var(--primary-color);
border-radius : 5px;
text-align : center;
}
.interior_opt_required
{
/*width : 98%;*/
height : 40px;
margin-top : 5px;
border : 2px solid var(--border);
outline : none;
font-size : 14px;
padding : 0px 10px;
background-color : var(--primary-color);
border-radius : 8px;
text-align : center;
}
.interior-input textarea
{
height : 85px;
margin-top : 5px;
border : 2px solid var(--border);
outline : none;
font-size : 14px;
padding : 0px 10px;
background-color : var(--primary-color);
border-radius : 8px;
text-align : center;
}
#button input
{
background-color : transparent;
padding : 3px 10px;
font-size : 15px;
font-weight : 500;
border : 1px solid var(--border);
border-radius : 20px;
color : var(--heading);
margin : 10px 30px 0px 35px;
}
#button input:hover
{
background-color : var(--tertiary-color);
cursor : pointer;
color : var(--primary-color);
font-weight : 500;
}
/******************
GALLERY
*******************/
.interior-gallery
{
display : grid;
grid-template-columns : 1fr; /*fraction*/
gap : 1rem;
}
.interior-box
{
position : relative;
color : var(--icon);
overflow : hidden;
}
.interior-box img
{
width : 100%;
height : 200px;
border-radius : 10px;
transition : .6s ease-in-out;
object-fit : cover;
object-position : center;
-webkit-user-drag : none;
}
.interior-box p
{
position : absolute;
bottom : 0;
right : 0;
padding : 1rem;
color : rgb(237, 226, 226);
background-color : rgba(0, 0, 0, 0.5);
text-align : right;
text-transform : uppercase;
}
.interior-box:hover img
{
transform : scale(1.5);
filter : brightness(100%);
}
/***********************************************************************
***********************************************************************
INTERIOR-FILTER BANNER PAART (MULTIPLE PAGES IN INTERIOR PART BEDROOM,KITCHEN,BATHROOM,DRAWING-ROOM) (STATE-DISTRICT)
***********************************************************************
************************************************************************/
.bedroom-banner{
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/bedroomBanMob.webp);
}
.drawing-room-banner {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/drawingroomBanMob.webp);
}
.main-banner {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/int1.webp);
}
.interior-mainBanner-wrapper
{
background-size: cover;
background-repeat: no-repeat;
background-position: top;
height: 65vh;
width : 100%;
position : relative;
}
.interior-mainBanner-wrapper .interior-title
{
position : absolute;
display : block;
box-sizing : border-box;
width : 90%;
top : 250px;
left : 5%;
max-width : 1440px;
}
.interior-mainBanner-wrapper .interior-title h2
{
text-align : center;
font-family : 'Roboto', sans-serif;
font-weight : 900;
font-size : 1.2rem;
color : var(--primary-color);
}
.interior-mainBanner-wrapper .interior-title h3
{
text-align : center;
font-family : "Poppins";
font-weight : 400;
font-size : 0.6rem;
color : var(--primary-color);
}
/***********************************************************************
***********************************************************************
INTERIOR-FEATURED SOLUTION
***********************************************************************
************************************************************************/
.interior-featured{
display: flex;
/*grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));*/
/*gap:1.5rem;*/
flex-direction: column;
justify-content: center;
}
.interior-sol h2{
font-size: 18px;
font-family: "Poppins";
padding : 5px 10px;
color : var(--tertiary-color);
text-shadow : 7px 8px 8px rgba(0, 0, 0, 0.25);
font-weight : 500;
text-align: center;
margin-bottom : 2%;
}
.interior-sol h4{
font-family : "Poppins";
font-size : 14px;
font-weight : 400;
color : var(--tertiary-color);
text-align : center;
margin: 0px;
}
.interior-design h2{
font-size: 20px;
font-family: "Poppins";
padding : 5px 10px;
color : var(--tertiary-color);
text-shadow : 7px 8px 8px rgba(0, 0, 0, 0.25);
font-weight : 500;
text-align: center;
/*margin: 44px 0px 0px 0px;*/
margin-top : 6%;
}
.interior-design h4{
font-family : "Poppins";
font-size : 14px;
font-weight : 400;
color : var(--tertiary-color);
text-align : center;
margin-bottom: 2%;
}
.interior-featured .icons{
display: flex;
align-items: center;
gap:1.5rem;
padding:1.5rem 0;
flex-direction: column;
text-align: center;
width: 100%;
}
.interior-featured .icons i{
font-size: 2.0rem;
color:var(--tertiary-color);
}
.interior-featured .icons span{
font-size: 2.0rem;
color:var(--tertiary-color);
}
.interior-featured .icons .content{
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
}
.interior-featured .icons h3{
font-size: 16px;
color:var(--tertiary-color);
padding-bottom: .5rem;
font-family : "Poppins";
margin: 0px;
}
.interior-featured .icons p{
font-size: 12px;
color:var(--tertiary-color);
font-family : "Poppins";
margin: 0px;
}
/************************************************
INTERIOR-SEARCH IN FILTER PART FULL PAGE
(FOR MULTIPLEPAGES(LIKE, BEDROOM, KITCHEN ETC))
*************************************************/
.interior-search_wrapper
{
background-color : var(--primary-color);
}
.interior-search_wrapper .interior-search
{
margin : 0 auto;
/* padding-top : 1rem; */
}
.interior-search_wrapper .interior-search h1
{
color : var(--tertiary-color);
text-align : center;
font-weight : 500;
font-size : 1.2rem;
line-height : 1;
font-family : "poppins";
}
.interior-search_wrapper .interior-search h3
{
color : var(--tertiary-color);
text-align : center;
font-weight : 500;
font-size : 1rem;
font-family : "Poppins";
margin-top : -10px;
}
.interior-search_wrapper .interior-search .itemSearchBy
{
display : flex;
justify-content : center;
font-family : "Poppins";
}
.interior-searchItem form
{
display : flex;
/*flex-wrap : wrap;*/
justify-content : center;
padding : 30px;
}
.interior-search_wrapper .interior-search .interior-searchItem .form-control
{
position : relative;
display : flex;
box-sizing : border-box;
margin : 0px 12px 0 0px;
}
.interior-search_wrapper .interior-search #inputState
{
padding : 5px 8px;
border-radius : 3px;
font-size : 12px;
width : 130px;
height : 30px;
border : 1px solid var(--heading);
}
.interior-search_wrapper .interior-search #inputDistrict
{
padding : 5px 8px;
border-radius : 3px;
font-size : 12px;
width : 130px;
height : 30px;
border : 1px solid var(--heading);
}
.interior-search_wrapper .interior-search .interior-searchItem .craft_list
{
position : relative;
display : none;
box-sizing : border-box;
/*float : left;*/
width : 300px;
height : auto;
}
.interior-search_wrapper .interior-search .searchButton
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 90px;
height : auto;
/*margin-top : 13px;*/
}
.interior-search_wrapper .interior-search .searchButton button
{
padding : 5px 15px;
border-radius : 3px;
color : var(--tertiary-color);
background-color : var(--icon);
font-size : 12px;
border : 1px solid var(--heading);
}
/*.interior-search_wrapper .interior-search .searchButton button:hover */
/*{*/
/* background-color : transparent;*/
/* color : var(--tertiary-color);*/
/* font-weight : 700;*/
/* cursor : pointer;*/
/*}*/
/*----------------------------------------------------
#### HOW IT WORKS
------------------------------------------------------*/
.interior-work{
}
.interior-work h2{
font-size: 20px;
font-family: "Poppins";
padding : 5px 10px;
color : var(--tertiary-color);
text-shadow : 7px 8px 8px rgba(0, 0, 0, 0.25);
font-weight : 500;
text-align: center;
margin: 25px 0px 0px 0px;
/*margin-bottom : 2%;*/
}
.step{
display:flex;
justify-content: center;
width: 100%;
padding: 0px 20px;
}
.step .interior-container{
display: flex;
/*gap:0.5rem;*/
}
.step .interior-container .icons{
display: flex;
align-items: center;
gap:0.5rem;
padding:2rem 0;
flex-direction: column;
text-align: center;
/*justify-content: center;*/
}
.step .interior-container .icons hr{
border: 1px solid var(--ccc);
width:35px;
margin-top : 16%;
}
.step .interior-container .icons i{
font-size: 1.2rem;
color:var(--heading);
}
.step .interior-container .icons .content{
display: flex;
flex-direction: column;
align-items: center;
width: 70%;
}
.step .interior-container .icons h3{
font-size: 10px;
color:var(--tertiary-color);
padding-bottom: .5rem;
font-family : "Poppins";
margin: 0px;
font-weight : 400;
}
.slide{
display: flex;
width: 100%;
margin-bottom: 8%;
justify-content: center;
align-items: center;
}
.slide .slide-container{
width : 300px;
/*display:flex;*/
/*justify-content: center;*/
}
.slide-container img{
width : 300px;
height : 200px;
object-fit: cover;
border-radius:5px;
}
/*----------------------------------------------------
#### GALARY (INTERIOR FILLTER IMAGES)
------------------------------------------------------*/
.galary-interior-home
{
/*display : grid;*/
/*grid-template-columns : 1fr;*/
/*grid-gap : 1rem;*/
/*justify-content : center;*/
/*margin-top : 1rem;*/
place-items : center;
width: 100%;
}
.galary-interior-home .slide{
width:90%;
margin: 0 5%;
height: 400px;
}
.galary-interior-home .slide i{
color : var(--primary-color);
font-size: 1.5rem;
}
.galary-interior-home div img
{
height : 350px;
width : 350px;
object-fit : cover;
}
/*==========================================================================================
============================================================================================
**My Cart **
============================================================================================
============================================================================================*/
.cart-container
{
position : relative;
display : flex;
flex-direction : column;
max-width : 1000px;
height : auto;
width : -webkit-fill-available;
text-align : center;
align-items : center;
}
.cart_head_cart
{
position : relative;
width : 90%;
height : 40px;
/*border-radius : 15px;*/
margin-top : 30px;
border-bottom: solid 1px;
/*background-color : var(--secondary-color);*/
color : var(--tertiary-color);
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
font-family: 'poppins';
font-weight: 500;
text-shadow: var(--text-shadow);
font-size: 14px;
}
.cart_head_cart h2
{
margin-top : 6px;
}
.cart_head_table
{
font-size : 16px;
position : relative;
width :90%;
font-family: 'poppins';
min-height: 100px;
/*margin-top : 50px;*/
/*display : flex;*/
/*flex-direction : column;*/
/*align-items : center;*/
}
.cart-t_head
{
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
border-bottom: solid 1px;
align-items: center;
}
.cart-head
{
padding : 15px;
}
.cart_table
{
width : 70%;
}
.cart-image
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
height : auto;
}
.cart-image img
{
width : 100%;
height : 80px;
object-fit : scale-down;
}
.cart-t_data
{
text-align : center;
padding : 20px;
display : grid;
/*grid-template-columns : 1fr 1fr;*/
align-items: center;
text-shadow: var(--text-shadow);
}
.cart-t_data .cart-details{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.cart-t_data .cart-details .name{
font-weight:500;
padding-bottom: 3%;
font-size: 14px;
}
.cart-t_data .cart-details .id{
font-size: 12px;
}
.cart-remove{
/*background-color: var(--secondary-color);*/
/*border : none;*/
/*border-radius : 10px;*/
color : var(--tertiary-color);
/*padding : 10px 20px;*/
text-align : center;
text-decoration : none;
display : inline-block;
/*font-size : 10px;*/
/*margin : 4px 2px;*/
cursor : pointer;
font-family : "Poppins";
font-size: 16px;
}
.cart_box_purchase
{
/*border : 2px solid;*/
/*border-radius : 20px;*/
width : 90%;
/*height : fit-content;*/
padding : 10px;
font-family:'poppins';
}
.cart_box_purchase .box_write{
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.cart_box_purchase .box_write h4{
font-weight: 500;
text-shadow: var(--text-shadow);
font-size: 14px;
}
.cart_box_purchase .box_write .cart-bill{
background-color: var(--secondary-color);
border : none;
border-radius : 4px;
color : var(--primary-color);
padding : 10px 7px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 12px;
margin : 10px 2px;
cursor : pointer;
}
.cart_box_purchase .box_write .cart-billing
{
background-color: var(--secondary-color);
border : none;
border-radius : 4px;
color : var(--primary-color);
padding : 10px 7px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 12px;
/*margin : 10px 2px;*/
cursor : pointer;
}
.cart_box_purchase .box_write .cart-billing:disabled,
cart-billing[disabled]{
border : 1px solid var(--border);
background-color : var(--ccc);
color : var(--tertiary-color);;
cursor : not-allowed;
content : "Add more products to enable this option";
}
/*==========================================================================================
============================================================================================
**ORDER-SUMMARY**
============================================================================================
============================================================================================*/
.summary-container
{
display : flex;
flex-direction: column;
align-items: center;
}
.summary-head
{
/*border-radius : 15px;*/
/*margin-top : 30px;*/
border-bottom: solid 1px;
/*background-color : var(--secondary-color);*/
color : var(--tertiary-color);
/*margin-top: 150px;*/
display: flex;
justify-content: center;
padding: 0 1rem;
gap: 0.6rem;
/*flex-direction: column;*/
}
.summary-head h2
{
margin-top : 6px;
font-size: 12px;
margin-bottom: 6px;
}
.summary_head_cart{
position : relative;
width : 95%;
/*height : 40px;*/
/*border-radius : 15px;*/
/*margin-top : 20px;*/
/*border-bottom: solid 1px;*/
/*background-color : var(--secondary-color);*/
color : var(--tertiary-color);
/*display: grid;*/
/*grid-template-columns: 2fr 1fr 1fr 1fr;*/
font-family: 'poppins';
font-weight: 400;
text-shadow: var(--text-shadow);
}
.summary-container .summary_head_cart .summary-head .cart-billing
{
background-color: var(--secondary-color);
border : none;
border-radius : 4px;
color : var(--primary-color);
padding : 12px 11px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 15px;
/*margin : 10px 2px;*/
cursor : pointer;
}
.summary-details{
display: grid;
grid-template-columns: 1fr;
/*border-bottom: solid 1px;*/
justify-items: start;
align-items: center;
padding-left: 3px;
color: var(--tertiary-color);
text-shadow: var(--text-shadow);
align-content: space-evenly;
font-size: 12px;
font-family: "poppins";
}
.summary-details h2{
font-size:12px;
}
.summary-details .name{
font-weight: 500;
font-size: 14px;
text-align: left;
}
.summary-head-table
{
font-size : 15px;
width : 95%;
margin-top : 10px;
display : flex;
/*flex-direction : column;*/
align-items : center;
border-bottom: solid 1px;
justify-content: space-between;
}
.summary-image
{
display : block;
box-sizing : border-box;
float : left;
height : auto;
}
.summary-image img
{
width : 100%;
height : 90px;
object-fit : scale-down;
}
.summary-head-data
{
text-align : center;
padding-bottom: 10px;
display : grid;
grid-template-columns : 1fr 2fr;
justify-items: start;
width : 85%;
}
.summary-address
{
/*border : 2px solid;*/
/*border-radius : 10px;*/
/*padding : 10px;*/
/*margin-top : 1rem;*/
width : 100%;
font-family: 'poppins';
/*text-align :center;*/
}
.summary-address .box_write{
padding: 10px 0;
}
.summary-address .box_write .total{
padding: 4px 0;
font-size: 14px;
color: var(--tertiary-color);
}
.summary-address .box_write button{
background-color: var(--secondary-color);
border : none;
border-radius : 3px;
color : var(--primary-color);
padding : 10px 20px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 13px;
margin: 24px 0;
cursor : pointer;
margin-right: 35%;
float: right;
}
/*==========================================================================================
============================================================================================
** Check Out **
============================================================================================
============================================================================================*/
.head{
margin-left: 4%;
width : 95%;
height : auto;
color : var(--tertiary-color);
text-shadow :var(--text-shadow);
font-family :"Poppins";
}
.head h2{
font-size :20px;
font-weight :500;
margin-bottom: 1%;
}
.head h3{
font-size :16px;
font-weight :500;
}
.check_container{
width: 85%;
margin-left: 4%;
font-family: 'poppins';
display: grid;
grid-template-columns: 1fr 1fr;
}
.check_container h4
{
width : 100%;
height : auto;
color : var(--tertiary-color);
font-size :14px;
font-weight :500;
text-shadow :var(--text-shadow);
font-family :"Poppins";
margin-top: 4%;
}
.check_container button
{
color : var(--primary-color);
background-color : var(--tertiary-color);
margin-top : 30px;
padding : 10px 15px;
border-radius : 5px;
border : none;
cursor : pointer;
}
.check_container button:hover
{
background-color : var(--craft);
}
.check_container button:disabled,
check_container button[disabled]{
border : 1px solid var(--border);
background-color : var(--ccc);
color : var(--tertiary-color);
cursor : not-allowed;
}
.phone_checkout
{
display:flex;
gap:2px;
}
.check_container .form_container
{
display:grid;
grid-template-columns: 1fr;
}
.form_container div{
display: flex;
}
.form_container div.col{
flex-direction: column;
width: 85%;
}
.check_container .form_container label
{
display : block;
box-sizing : border-box;
width : 100%;
/*height : 25px;*/
font-family : "Poppins";
font-weight: 400;
/*margin-left : 30px;*/
margin-top : 15px;
font-size: 14px;
}
.check_container .form_container input
{
display : block;
/*height : 25px;*/
width : 300px;
border-radius : 3px;
padding : 4px 10px;
font-size : 1.0rem;
border : 1px solid var(--border);
/*margin-top : 15px;*/
}
select
{
display : block;
box-sizing : border-box;
border : 1px solid var(--border);
border-radius : 3px;
width : 50px;
/*height : 25px;*/
margin-top : 15px;
}
footer{
display: flex;
flex-direction: column;
/*justify-content: center;*/
/*align-items: center;*/
/*margin: 1rem auto;*/
margin-top: 5%;
}
#check_pay{
display: flex;
justify-content: center;
}
/*==========================================================================================
============================================================================================
**interior page free consultant**
============================================================================================
============================================================================================*/
.consultant{
color: #fff;
display: inline-block;
font-size: 10px;
/*font-weight: bold;*/
/*padding: 10px 20px;*/
position: fixed;
bottom: 23px;
left: 20px;
text-align: center;
text-decoration: none;
z-index: 999;
}
.consultant i{
font-size: 16px;
}
.consultant button{
margin-right: 3%;
font-family: 'Poppins';
border-radius: 10px;
padding: 6px 20px;
background-color: var(--secondary-color);
color: var(--primary-color);
width: 100%;
margin-top: 10px;
}
/*==========================================================================================
============================================================================================
**whatsapp link**
============================================================================================
============================================================================================*/
.ask{
color: #fff;
display: inline-block;
font-size: 37px;
font-weight: bold;
margin-top: 10px;
/*padding: 10px 20px;*/
position: fixed;
bottom: 20px;
right: 20px;
text-align: center;
text-decoration: none;
z-index: 999;
}
.ask h2{
margin-right: 3%;
font-family: 'Poppins';
color: var(--primary-color);
}