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;
--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 */
.onMobile{
display : none !important;
}
/*============================================================================================
==============================================================================================
******* HEADER SECTION *******
==============================================================================================
==============================================================================================*/
.header_wrapper
{
position : -webkit-sticky;
position : sticky;
top : 0;
display : block;
box-sizing : border-box;
width : 100%;
height : 100px;
z-index : 9999;
background-color : var(--primary-color);
box-shadow: 0px 15px 10px -15px var(--secondary-color);
}
.header_details
{
position : relative;
display : flex;
justify-content : center;
color : var(--primary-color);
height : 35px;
width : 100%;
background-color : var(--secondary-color);
}
.header_margin{
display : flex;
/* justify-content : center; */
align-items : center;
color : var(--primary-color);
height : 35px;
width : 100%;
margin-left: 25px;
}
.header_contact{
display : flex;
justify-content :space-around;
width : 85%;
/* text-align : center; */
}
.header_icons .fa-brands
{
position : relative;
display : block;
float : right;
width : 0px;
height : 32px;
margin-left : 20px;
cursor : pointer;
}
.header_icons .fa-brands:hover
{
transform : scale(1.1);
}
.header_icons .fa-facebook-f
{
font-size : 13px;
color : var(--icon);
text-align : center;
padding : 10px;
/* border-radius : 50%; */
/* background-color : #4267B2; */
}
.header_icons .fa-whatsapp
{
font-size : 15px;
color : var(--icon);
text-align : center;
padding : 10px;
/* border-radius : 50%; */
/* background-color : #4FCE5D; */
}
.header_icons .fa-instagram
{
font-size : 15px;
color : var(--icon);
text-align : center;
padding : 10px;
/* border-radius : 50%; */
/* background-color : #4FCE5D; */
}
.header_wrapper .header
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : 100px;
justify-content : center;
padding : 0 20px;
}
.header_wrapper .header .logo
{
position : relative;
display : inline;
box-sizing : border-box;
float : left;
width : 80px;
/*height : 60px;*/
/*margin : 0px 0px 25px 0px;*/
justify-content: center;
/*margin-bottom: 20px;*/
}
.header_wrapper .header .logo img
{
width : 100%;
height : 100%;
border-radius : 50%;
overflow: hidden;
/* margin-bottom: 20px; */
}
.header_wrapper .header .menu
{
position : relative;
display : block;
box-sizing : border-box;
width : 80%;
height : 100px;
justify-content : center;
padding : 0 20px;
}
.header_wrapper .header .menu .menu_list{
/*width: 1000px;*/
}
.header_wrapper .header .menu .hambLogo
{
display : none;
}
.header_wrapper .header .menu ul
{
margin-top : 20px;
display : flex;
justify-content : space-around;
}
.header_wrapper .header .menu ul li
{
list-style-type : none;
display : inline-block;
padding : 20px 10px;
}
.header_wrapper .header .menu ul .logo li
{
list-style-type : none;
display : inline-block;
padding : 5px 10px;
}
.header_wrapper .header .menu ul li a
{
color : var(--secondary-color);
text-decoration : none;
font-family : "Poppins";
transition : 0.5s;
font-size : 1 rem;
}
.header_wrapper .header .menu ul li a:hover
{
text-decoration : underline;
text-decoration-color : var(--secondary-color);
text-decoration-thickness : 1.5px;
text-underline-offset : 10px;
}
.hamburger .sidebarBtn
{
display : none;
}
/*--------------------------------------------------------
### Submenu : Level -1
----------------------------------------------------------*/
.header_wrapper .header .menu ul ul
{
position : absolute;
display : none;
/*top : 30px;*/
background-color : var(--ccc);
}
.header_wrapper .header .menu ul li:hover > ul
{
display : block;
box-sizing : border-box;
float : left;
width : 200px;
height : auto;
}
.header_wrapper .header .menu ul ul li
{
width : 190px;
height : 30px;
transition : 0.3s;
font-family : "Poppins";
text-align : center;
}
.header_wrapper .header .menu ul ul li a
{
font-size : 0.9rem;
color : var(--heading);
font-weight : 600;
}
.header_wrapper .header .menu ul ul li a:hover
{
color : var(--heading);
}
.header_wrapper .header .menu .sidebarBtn
{
display : none;
}
.header_wrapper .active
{
text-decoration : underline;
text-decoration-color : var(--secondary-color);
text-decoration-thickness : 1.5px;
text-underline-offset : 10px;
}
.header_wrapper .subactive
{
text-decoration : underline;
text-decoration-color : var(--secondary-color);
text-decoration-thickness : 1.5px;
text-underline-offset : 10px;
}
/*-----------------------------------
#### Log in & Cart ####
-------------------------------------*/
.shop
{
position : relative;
display : flex;
justify-content : space-between;
box-sizing :content-box;
float : right;
/* width : 15%; */
height : auto;
align-items: center;
}
.shop button
{
float : right;
padding : 5px 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);
cursor : pointer;
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);
cursor : pointer;
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: 12px 16px;
text-decoration: none;
display: block;
font-size : 0.9rem;
color : var(--heading);
font-weight : 600;
}
.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 : 9px 0px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 20px;
margin-right : 12px;
margin-left : 12px;
cursor : pointer;
}
.shop .cart-logo .count {
position: absolute;
top: 30px;
right: 39px;
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);
}
}
/*=========================================================
#### BANNER PART ####
===========================================================*/
.banner-wrapper
{
position : relative;
display : flex;
flex-direction : column;
justify-content : center;
align-items : center;
width : 100%;
}
.index-banner-image
{
display : flex;
justify-content : center;
width : 85%;
/*height: 560px*/
aspect-ratio: 16/7;
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.3s 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.3s 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.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.banner-wrapper .text
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
background-color : var(--secondary-color);
/* opacity: 0.1; */
margin-bottom : 50px;
background : var(--back-color);
background-size : 1em 1em;
}
.banner-wrapper .text .textUp
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : auto;
margin : 0 auto;
}
.banner-wrapper .text .textUp h1
{
font-family : "Playball";
font-size : 2.0rem;
font-weight : 500;
color : var(--tertiary-color);
margin-left : 20px;
text-align : center;
text-shadow : 0px 10px 10px rgba(0,0,0,0.2);
}
.banner-wrapper .text .textDown
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : auto;
margin : 35px auto;
}
.banner-wrapper .text .textDown p
{
font-family : "Poppins";
font-size : 14px;
font-weight : 400;
color : var(--tertiary-color);
text-align : center;
}
/*.banner-wrapper .imageSlide*/
/*{*/
/* position : relative;*/
/* display : block;*/
/* box-sizing : border-box;*/
/* width : 50%;*/
/* height : auto;*/
/*}*/
/* .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 : 80px;*/
/* top : 230px;*/
/* }*/
/* .banner-wrapper .imageSlide .rightArrow*/
/* {*/
/* right : 80px;*/
/* }*/
/* .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 10px;
}
.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 : 22px ;
}
.card-collection ul li hr{
width :260px;
margin-top :24px;
color :var(--heading);
}
.card-wrapper
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : 320px;
margin-top : 10px;
}
.card-wrapper .card
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : auto;
margin : 0 auto;
max-width : 1440px;
justify-content: space-around;
}
.card-wrapper .card .container
{
position : relative;
display : block;
box-sizing : border-box;
/*float : left;*/
width : 250px;
height : 250px;
/* margin : 0px 40px; */
box-shadow: var(--box-color);
border-radius: 100%;
}
.card-wrapper .card .container .image
{
position : relative;
display : block;
box-sizing : border-box;
/*float : left;*/
width : 250px;
height : 250px;
}
.card-wrapper .card .container .image img
{
width : 90%;
height : 90%;
border-radius : 90%;
transition : .6s ease-in-out;
filter : brightness(98%);
object-fit : scale-down;
aspect-ratio: auto;
}
.card-wrapper .card .container .image figure
{
overflow : hidden;
width : 100%;
height : 100%;
margin : 10px;
}
.card-wrapper .card .container .image:hover img
{
transform : scale(1.1);
filter : brightness(100%);
}
.card-wrapper .card .container .details
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : 60px;
/* border : 1px solid var(--ccc); */
}
.card-wrapper .card .details h2
{
text-align : center;
color : var(--tertiary-color);
font-family : "Poppins";
font-size : 1.2rem;
font-weight : 400;
/*margin-top : 15px;*/
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 5px;
height:75%;
font-size: 18px;
background-color: #424530;
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 : 40px;
}
.whatIs-Wrapper .whatIs
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : auto;
margin : 0 auto;
max-width : 1440px;
}
.whatIs-Wrapper .whatIs h1
{
color : var(--tertiary-color);
text-align : center;
font-weight : 500;
font-size : 2.5rem;
/* line-height : 1; */
font-family : "Poppins";
margin-bottom: 1%;
}
.whatIs-Wrapper .whatIs h2
{
color : var(--tertiary-color);
text-align : center;
font-weight : 500;
font-size : 2.5rem;
/* line-height : 1; */
font-family : "Poppins";
margin-bottom: 1%;
}
.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 : -15px;
}
.whatIs-Wrapper .whatIs .container
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 50%;
height : auto;
margin-top: 2%;
}
.whatIs-Wrapper .whatIs .container h1
{
color : var(--tertiary-color);
text-align : center;
font-weight : 700;
font-size : 2.5rem;
/* line-height : 1; */
font-family : "Poppins";
}
.whatIs-Wrapper .whatIs .container p
{
color : var(--tertiary-color);
text-align : justify;
font-weight : 500;
font-size : 1.0rem;
/* line-height : 1.2; */
font-family : "Poppins";
padding : 0px 20px;
margin-bottom : 40px;
}
/*================================================================================
==================================================================================
#### SEARCH PART ####
==================================================================================
================================================================================*/
.search_wrapper
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 400px;
margin-top : 70px;
background : var(--back-color);
background-size : 1em 1em;
}
.search_wrapper .search
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
height : 400px;
margin : 0 auto;
max-width : 1440px;
}
.search_wrapper .search h2
{
color : var(--tertiary-color);
text-align : center;
font-weight : 500;
font-size : 1.5rem;
line-height : 1;
font-family : "Poppins";
padding-top : 40px;
}
.search_wrapper .search h3
{
color : var(--tertiary-color);
text-align : center;
font-weight : 300;
font-size : 1.0rem;
font-family : "Poppins";
margin-top : 10px;
}
.search_wrapper .search .itemSearchBy
{
position : relative;
display : flex;
box-sizing : border-box;
width : 40%;
height : auto;
margin : 0 auto;
margin-top : 40px;
font-family : "Poppins";
}
.search_wrapper .search hr
{
/* width : 55%; */
height : 1px;
background-color :var(--secondary-color);
margin-top: 10px;
}
.search_wrapper .search .searchItem
{
position : relative;
display : block;
box-sizing : border-box;
width : 590px;
height : 300px;
margin : 0 auto;
}
.search_wrapper .search .searchItem #activeDist form
{
display : block;
}
.search_wrapper .search .searchItem .form-control
{
position : relative;
display : flex;
box-sizing : border-box;
float : left;
margin : 20px 30px 0 0px;
}
.search_wrapper .search #inputState
{
padding : 5px 8px;
border-radius : 5px;
font-size : 16px;
width : 220px;
height : 40px;
border : 1px solid var(--heading);
}
.search_wrapper .search #inputDistrict
{
padding : 5px 8px;
border-radius : 5px;
font-size : 16px;
width : 220px;
height : 40px;
border : 1px solid var(--heading);
}
.search_wrapper .search .searchItem .craft_list
{
position : relative;
display : none;
box-sizing : border-box;
float : left;
width : 300px;
height : auto;
margin-top : 10px;
}
.search_wrapper .search .searchItem .craft_list button
{
width : 250px;
height : 42px;
background-color : var(--primary-color);
border-radius : 5px;
border : 1px solid var(--heading);
font-size : 16px;
margin-left : 150px;
}
.search_wrapper .search .searchItem .craft_list .crafts
{
position : absolute;
display : none;
box-sizing : border-box;
float : left;
width : 250px;
height : auto;
background-color : var(--primary-color);
border : 1px solid var(--heading);
margin-left : 150px;
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
{
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 : 90px;
height : auto;
margin-top : 22px;
}
.search_wrapper .search .searchButton button
{
padding : 7px 17px;
border-radius : 5px;
color : var(--tertiary-color);
background-color : var(--icon);
font-size : 16px;
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 10px;
margin : 0px 30px 0px 70px;
color : var(--secondary-color);
border : none;
cursor : pointer;
background-color : transparent;
font-size : 20px;
font-weight : 700;
}
.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: 24px;
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;
}
.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 0;
}
.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.5rem;
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 : 1.0rem;
line-height : 1;
font-family : "Poppins";
color : var(--tertiary-color);
}
.customer-img
{
width : 1250px;
height : 350px;
text-align: center;
}
.customer-img .review {
display :flex;
justify-content: space-evenly;
}
/*=========================================================
#### FOOTER PART ####
===========================================================*/
.footer-wrapper
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : 240px;
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: 400;
}
/* .footer-wrapper .footer .box .subscribe{
padding-right:1rem 0;
text-align: center;
font-family: "Poppins";
display: flex;
position: relative;
/* justify-content: space-between; */
.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 : 33%;
height : 50px;
align-items: center;
}
.bottom-wrapper .bottom .left p
{
color : var(--primary-color);
text-align : left;
font-family : "Poppins";
font-size : 15px;
}
.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;
float : right;
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";
font-size : 15px;
font-weight : 600;
}
.visitor-counter ul li:first-of-type
{
width : auto;
background-color : transparent;
font-family : "Poppins";
font-size : 15px;
font-weight : 500;
color : var(--primary-color);
}
/*==========================================================================================
============================================================================================
****** CONTACT US PAGES ******
============================================================================================
============================================================================================*/
.contactform .contact_left
{
width : 80%;
height : 300px;
border : 1px solid var(--border);
border-radius : 5px;
text-align : center;
font-family : "Poppins";
padding : 6px;
}
.contactform .contact_left a
{
text-decoration : none;
}
.contactform .contact_left h2
{
/*margin-left : 50px;*/
font-family : "Poppins";
font-weight : 500;
font-size : 1.1rem;
color : var(--tertiary-color);
}
.contactform .contact_left h3
{
/*margin-left : 50px;*/
font-family : "Poppins";
font-weight : 500;
font-size : 1.2rem;
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);
}
.contactform .messageBox{
width: 500px;
}
.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.2rem;
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: 50%;
}
.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: 16px;
}
.contactform .form_container input
{
display : block;
height : 50px;
width : 400px;
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 : 400px;
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 10px;
font-size : 17px;
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 : 450px;*/
}
.mainBanner-wrapper .mainBanner
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : 400px;
/*height : 70%;*/
justify-content : center;
}
.mainBanner-wrapper .mainBanner img
{
width : 90%;
height : 100%;
object-fit : cover;
}
.title
{
box-sizing : border-box;
text-align : center;
margin-top : 20px;
}
.title h1
{
text-align : center;
font-family : "Poppins";
font-weight : 500;
font-size : 2.4rem;
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%;
}
.about-wrapper .about
{
position : relative;
display : block;
box-sizing : border-box;
width : 90%;
margin : 0 auto;
max-width : 1440px;
}
.about-wrapper .about p
{
font-family : "Poppins";
font-size : 1.1rem;
font-weight : 500;
color : var(--tertiary-color);
text-align : justify;
line-height : 1.6;
}
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 : 1440px;
/*align-items : center;*/
/*background : var(--back-color);*/
}
.item-wrapper .item .leftContainer
{
position : relative;
display : flex;
box-sizing : border-box;
width : 100%;
height : auto;
flex-direction : row;
/*align-items : center;*/
}
.item-wrapper .item .leftContainer .container
{
position : relative;
display : flex;
box-sizing : border-box;
/* float : left; */
width : 90%;
/* height : 330px; */
margin : 0px 10px;
box-shadow: var(--box-color);
border-radius: 10px;
/*align-items: center;*/
}
.item-wrapper .item .leftContainer .container .image
{
position : relative;
display : block;
box-sizing : border-box;
/*float : left;*/
width : 100%;
/* height : 270px; */
}
.item-wrapper .item .leftContainer .container .image img
{
width : 100%;
height : 300px;
/*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;
float : left;
width : 100%;
height : 350px;
}
.item-wrapper .item .leftContainer .imageSlide .banner
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
width : 100%;
height : 350px;
}
.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 : 170px;
}
.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 : 22px;
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 : 24px;
}
.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.7rem;
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 : 1.1rem;
font-weight : 300;
color : var(--tertiary-color);
text-align : justify;
padding : 20px 60px;
}
/*==========================================================================================
============================================================================================
****** 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;
max-width : 1440px;
}
.searchWrapper .searchWrapp h1{
font-family: Poppins;
font-size: 24px;
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: 18px;
font-weight: 500;
color: var(--tertiary-color);
text-shadow: var(--text-shadow);
}
.searchWrapper .searchWrapp .details_content
{
position : relative;
display : flex;
flex-direction : column;
box-sizing : border-box;
width : 22%;
height : 330px;
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 .title_contaniner
{
position : relative;
display : flex;
box-sizing : border-box;
height : 80px;
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;
justify-content : space-evenly;
flex-wrap : wrap;
box-sizing : border-box;
width : 100%;
height : auto;
}
.details_content
{
position : relative;
display : flex;
flex-direction : column;
box-sizing : border-box;
width : 22%;
height : 420px;
margin : 20px 8px;
background-color : var(--primary-color);
border-radius : 15px;
box-shadow : 0 8px 8px 0 rgb(0 0 0 / 20%);
}
.details_content .imge_contaniner
{
position : relative;
display : block;
box-sizing : border-box;
width : 100%;
height : 250px;
border-bottom : 1px solid var(--bbb);
overflow : hidden;
}
.details_content .imge_contaniner i{
position: absolute;
z-index: 1;
top: 17px;
right: 20px;
color: white;
font-size: 24px;
}
.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;
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-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;
background-color : var(--primary-color);
}
.productSearchWrapper .productSearch
{
position : relative;
display : block;
box-sizing : border-box;
width : 95%;
height : auto;
margin : 0 auto;
max-width : 1440px;
}
.productSearchWrapper .productSearch h1{
font-family: Poppins;
font-size: 24px;
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 :60%;
cursor : pointer;
border : none;
border-radius : 5px;
margin-left: 20%;
}
.details_content .Add_To_Cart:hover button
{
box-shadow : 0 4px 8px 0 var(--cart), 0 6px 20px 0 var(--cart);
}
/*==========================================================================================
============================================================================================
****** SEARCH PRODUCT LIST(product-details.php) ******
============================================================================================
============================================================================================*/
.listImage
{
position : relative;
display : flex;
flex-direction : column;
align-items : center;
box-sizing : border-box;
/* margin-top : 65px; */
width : 30%;
}
.listImage img
{
width : 100%;
height : 100%;
object-fit : scale-down;
aspect-ratio: 1 / 1;
}
.listDescription
{
position : relative;
display : flex;
flex-direction : column;
box-sizing : border-box;
float : left;
width : 50%;
height : auto;
padding : 0px 20px;
font-family : "Poppins";
}
.listDescription h3
{
font-family : "Poppins";
margin-bottom: 10px;
font-weight: bold;
}
.listDescription P
{
font-family : "Poppins";
text-align : justify;
margin-bottom: 10px;
}
.listDescription .details
{
position : relative;
display : block;
box-sizing : border-box;
width : 85%;
}
.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 : '\01F893';
color : var(--heading);
font-weight : bold;
float : right;
margin-left : 5px;
}
.product_collapsible.product_active:after
{
content : "\01F891";
}
.product_content
{
padding : 0 15px;
max-height : 0;
overflow : hidden;
transition : max-height 0.2s ease-out;
/*background-color : var(--secondary-color);*/
}
.product_content p
{
font-size: .9em;
}
.product_content a
{
color: var(--secondary-color);
}
.listDescription .dimension
{
position : relative;
display : block;
box-sizing : border-box;
margin-bottom : 10px;
}
.price
{
position : relative;
display : block;
box-sizing : border-box;
width : 20%;
height : 350px;
border-radius : 15px;
/* box-shadow : 0 8px 8px 0 rgb(0 0 0 / 20%); */
padding : 15px;
font-family : "Poppins";
border : 1px solid var(--border);
}
.price h3
{
font-family : "Poppins";
}
.price .textarea{
font-size: 12px;
width: 100%;
border: 1px solid var(--border);
border-radius: 5px;
text-align: center;
margin-top: 10px;
}
.price button
{
background-color : var(--secondary-color);
color : var(--primary-color);
padding : 5px 20px;
border : none;
margin-top : 12px;
border-radius : 5px;
/* background : var(--shadow); */
border : 1px solid var(--border);
width : 100%;
}
.price button:hover
{
box-shadow : 0 4px 4px 0 rgb(0 0 0 / 20%);
cursor : pointer;
}
/*/*==========================================================================================
============================================================================================
****** Bulk Order ******
============================================================================================
============================================================================================*/
/*.mainbulkbody{
background-color : #FFF8E7;
}*/
.orderpage{
display: flex;
width: 100%;
margin-top :60px;
justify-content: space-between;
}
.BulkOrdercenter{
position : relative;
/*margin-top :100px;*/
height : auto;
/*width : auto;*/
color : var(--tertiary-color);
font-family : "Poppins";
width: 40%;
}
.BulkOrdercenter h2 {
font-size:20px;
font-weight:500;
text-align:center;
text-shadow: var(--text-shadow);
}
.BulkOrderorder p {
font-size:16px;
font-weight:400;
text-align:justify;
margin-bottom: 3%;
}
.BulkOrderorder h2 {
font-size:20px;
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 : 65px;*/
max-width : 480px;
margin : auto;
/*width : 200%;*/
/*border-radius : 20px;*/
font-family: "Poppins";
/*background-color : var(--primary-color);*/
}
.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 : 400px;
/* 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 : auto;*/
color : var(--tertiary-color);
font-family : "Poppins";
}
.BulkOrdertable{
position : relative;
max-width : 800px;
height : auto;
margin : auto;
padding :10px;
font-family: 'poppins';
color: var(--tertiary-color);
text-shadow: var(--text-shadow);
}
.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{
position : relative;
display : flex;
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 : 420px;*/
min-height : 200px;
/*border-radius : 10px;*/
margin-top : 5px;
text-align: justify;
font-family : "Poppins";
padding: 30px 50px;
background : var(--back-color);
color : var(--tertiary-color);
text-shadow: var(--text-shadow);
}
.order_example h3{
font-size:20px;
font-weight:500;
text-align:center;
}
/*==========================================================================================
============================================================================================
** Check Out **
============================================================================================
============================================================================================*/
.head{
margin-left: 4%;
width : 100%;
height : auto;
color : var(--tertiary-color);
text-shadow :var(--text-shadow);
font-family :"Poppins";
}
.head h2{
font-size :22px;
font-weight :500;
margin-bottom: 1%;
}
.head h3{
font-size :18px;
font-weight :500;
}
.check_container{
width: 100%;
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 :15px;
font-weight :500;
text-shadow :var(--text-shadow);
font-family :"Poppins";
margin-top: 4%;
}
.check_container .side_img{
width: 90%;
display: flex;
justify-content: center;
}
.check_container .side_img img{
}
.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(--bbb);
background-color : var(--ccc);
color : var(--banner);
cursor : not-allowed;
}
.phone_checkout
{
display:flex;
gap:0.2rem;
}
.check_container .form_container
{
display:grid;
grid-template-columns: 1fr 1fr;
}
.form_container div{
display: flex;
}
.form_container div.col{
flex-direction: column;
width: 50%;
}
.check_container .form_container label
{
display : block;
box-sizing : border-box;
width : 80%;
height : 25px;
font-family : "Poppins";
font-weight : 400;
/*margin-left : 30px;*/
margin-top : 15px;
}
.check_container .form_container input
{
display : block;
box-sizing : border-box;
width : 260px;
/* height : 25px; */
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-radius : 3px;
border : 1px solid var(--border);
width : 50px;
/* height : 25px; */
margin-top : 15px;
}
footer{
display: flex;
flex-direction: column;
margin-top: 5%;
}
#check_pay{
display: flex;
justify-content: flex-end;
}
/*==========================================================================================
============================================================================================
** Privacy Policy, Terms & Conditions**
============================================================================================
============================================================================================*/
.privacy-policy-wrapper .title
{
position : relative;
display : block;
box-sizing : border-box;
padding : 30px;
height : auto;
width : 80%;
left : 10%;
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;
justify-content : space-around;
align-items : center;
padding : 0 8rem;
box-sizing : border-box;
width : 100%;
height : auto;
margin-top : 6px;
}
.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";
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 PAGE (interior.php)**
=========================================================================================================
=========================================================================================================
=========================================================================================================*/
.interior
{
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);
}
.interior .design{
height: 100%;
}
.interior .design h2{
text-align : center;
font-weight : 500;
font-size : 1.8rem;
line-height : 1;
font-family : "Poppins";
padding : 40px 0px;
color : var(--tertiary-color);
}
.interior .room{
text-align: center;
margin-bottom: 4%;
}
.interior .room ul{
gap: 4rem;
display: flex;
justify-content: space-around;
font-size: 20px;
/* 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 : 800px;
height : 400px;
margin-bottom: 5%;
}
.interior-img .slideshow-container .mySlides
{
display : none
}
.interior-img .slideshow-container .mySlides img
{
vertical-align : middle;
width : 100%;
height : 400px ;
border-radius: 20px;
}
/* Slideshow container */
.slideshow-container
{
position : relative;
margin : auto;
object-fit: cover;
}
.slideshow-container img{
width : 800px;
height : 400px;
object-fit: cover;
border-radius:15px;
}
/* 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 : 15px 10px;
width : 90%;
height : auto;
color : var(--secondary-color);
text-align: center;
}
.interior-text h1
{
text-align : center;
font-weight : 500;
font-size : 1.8rem;
line-height : 1;
font-family : "Poppins";
text-shadow: var(--text-shadow);
}
.interior-text h3
{
font-family : "Poppins";
text-align: justify;
padding-top: 20px;
}
.interior-search{
text-align : center;
margin-bottom: 3%;
width : 100%;
}
.interior-search h3{
text-align : center;
font-weight : 400;
font-size : 1.0rem;
/*line-height : 1;*/
font-family : "Poppins";
color : var(--secondary-color);
}
.open-button
{
background-color : var(--secondary-color);
margin-top : 20px;
color : var(--primary-color);
padding : 10px 10px;
border : none;
/* border-radius : 10px; */
cursor : pointer;
/* width : 100px; */
text-align : center;
}
/***********************************************
MAIN-INTERIOR-SEARCH-(FREE-CONSULTATION POP-UP PAGE)
************************************************/
/* 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 */
font-family : "Poppins";
}
/* Modal Content */
.modal-content
{
background-color : var(--primary-color);
margin : auto;
margin-top : 30px;
padding : 20px;
border : 1px solid var(--border);
width : 35%;
max-width : 425px;
border-radius : 10px;
}
/* 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;
}
.modal-content .messageBox{
width: 380px;
}
/*********************************
MAIN-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 : 1px solid var(--border);
outline : none;
font-size : 14px;
padding : 0px 10px;
background-color : var(--primary-color);
border-radius : 5px;
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 : 1px solid var(--border);
outline : none;
font-size : 14px;
padding : 0px 10px;
background-color : var(--primary-color);
border-radius : 8px;
text-align : center;
}
.interior_opt_required
{
height : 40px;
margin-top : 5px;
border : 1px 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 : 1px solid var(--border);
outline : none;
font-size : 14px;
padding : 0px 10px;
background-color : var(--primary-color);
border-radius : 8px;
text-align : center;
}
.interior-input .button input
{
background-color : transparent;
padding : 5px 40px;
font-size : 15px;
font-weight : 500;
border : 1px solid var(--border);
border-radius : 5px;
color : var(--heading);
margin : 0px 20px 0px 20px;
}
.interior-input .button input:hover
{
background-color : var(--tertiary-color);
cursor : pointer;
color : var(--primary-color);
font-weight : 500;
}
/**************************
MAIN-INTERIOR-GALLERY PAGE
***************************/
.interior-gallery
{
display : grid;
grid-template-columns : 1fr 1fr 1fr; /*fraction*/
gap : 1rem;
width : 1200px;
}
.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/bedroomBanDesk.webp);
}
.drawing-room-banner {
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/drawingroomBanDesk.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: center;
height: 90vh;
width : 100%;
position : relative;
}
.interior-mainBanner-wrapper .interior-title
{
position : absolute;
display : block;
box-sizing : border-box;
/*float : left;*/
/*height : auto;*/
width : 60%;
top : 40%;
left : 19%;
/*max-width : 1440px;*/
}
.interior-mainBanner-wrapper .interior-title h2
{
text-align : center;
font-family : "Poppins";
font-weight : 900;
font-size : 2.0rem;
color : var(--primary-color);
}
.interior-mainBanner-wrapper .interior-title h3
{
text-align : center;
font-family : "Poppins";
font-weight : 400;
font-size : 1.2rem;
color : var(--primary-color);
}
/***********************************************************************
***********************************************************************
INTERIOR-FEATURED SOLUTION
***********************************************************************
************************************************************************/
.interior-featured{
display: flex;
/*grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));*/
gap:1.5rem;
justify-content: center;
}
.interior-sol h2{
font-size: 24px;
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 : 18px;
font-weight : 400;
color : var(--tertiary-color);
text-align : center;
margin: 0px;
}
.interior-design h2{
font-size: 26px;
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 : 16px;
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:2rem 0;
flex-direction: column;
text-align: center;
width: 25%;
}
.interior-featured .icons i{
font-size: 3.0rem;
color:var(--tertiary-color);
}
.interior-featured .icons span{
font-size: 3.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: 18px;
color:var(--tertiary-color);
padding-bottom: .5rem;
font-family : "Poppins";
margin: 0px;
}
.interior-featured .icons p{
font-size: 14px;
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 : 3% auto; */
padding-top : 1rem;
}
.interior-search_wrapper .interior-search h1
{
color : var(--tertiary-color);
text-align : center;
font-weight : 500;
font-size : 2.0rem;
line-height : 1;
font-family : "poppins";
margin-bottom: 2%;
}
.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;
justify-content : center;
}
.interior-search_wrapper .interior-search .interior-searchItem .form-control
{
position : relative;
display : flex;
box-sizing : border-box;
margin : 20px 30px 0 0px;
}
.interior-search_wrapper .interior-search #inputState
{
/* border-radius : 20px;
font-size : 16px;
width : 220px; */
padding : 5px 8px;
border-radius : 5px;
font-size : 16px;
width : 220px;
height : 40px;
border : 1px solid var(--heading);
}
.interior-search_wrapper .interior-search #inputDistrict
{
/* border-radius : 20px;
font-size : 16px;
width : 220px; */
padding : 5px 8px;
border-radius : 5px;
font-size : 16px;
width : 220px;
height : 40px;
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 : 22px;
}
.interior-search_wrapper .interior-search .searchButton button
{
padding : 7px 17px;
border-radius : 5px;
color : var(--tertiary-color);
background-color : var(--icon);
font-size : 16px;
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: 26px;
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-bottom : 2%;
}
.step{
display:flex;
justify-content: center;
width: 100%;
padding: 0px 68px;
}
.step .interior-container{
display: flex;
gap:0.5rem;
}
.step .interior-container .icons{
display: flex;
align-items: center;
gap:1.5rem;
padding:2rem 0;
flex-direction: column;
text-align: center;
/*justify-content: center;*/
}
.step .interior-container .icons hr{
border: 1px solid var(--ccc);
width:150px;
margin-top : 16%;
}
.step .interior-container .icons i{
font-size: 3.0rem;
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: 14px;
color:var(--tertiary-color);
padding-bottom: .5rem;
font-family : "Poppins";
margin: 0px;
font-weight : 400;
}
.slide{
display: flex;
width: 100%;
margin-bottom: 5%;
justify-content: center;
align-items: center;
}
.slide .slide-container{
width : 700px;
/*display:flex;*/
/*justify-content: center;*/
}
.slide-container img{
width : 700px;
height : 400px;
object-fit: cover;
border-radius:5px;
}
/*----------------------------------------------------
#### GALARY (INTERIOR FILLTER IMAGES)
------------------------------------------------------*/
.galary-interior-home
{
/* display : grid;
grid-template-columns : 1fr 1fr 1fr;
grid-gap : 1rem;
justify-content : center;
margin-top : 1rem; */
place-items : center;
width:100%;
}
.galary-interior-home .slide{
width:80%;
margin: 0 10%;
}
.galary-interior-home .slide i{
color : var(--primary-color);
font-size: 2rem;
}
.galary-interior-home div img
{
height : 450px;
width : 350px;
object-fit : cover;
}
/*==========================================================================================
============================================================================================
**My Cart **
============================================================================================
============================================================================================*/
.cart-container
{
position : relative;
display : flex;
max-width : 1440px;
height : auto;
width : -webkit-fill-available;
text-align : center;
flex-direction : column;
align-items : center;
justify-content : space-between;
}
.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);
}
.cart_head_cart h2
{
margin-top : 6px;
}
.cart_head_table
{
font-size : 16px;
position : relative;
width : 90%;
font-family: 'poppins';
min-height: 150px;
/*margin-top : 50px;*/
/*display : flex;*/
/*justify-content : space-between;*/
/*display: grid;*/
/*grid-template-columns: 2fr 1fr 1fr 1fr;*/
}
.cart-t_head
{
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
border-bottom: solid 1px;
align-items: center;
}
.cart-head
{
padding : 15px;
}
.cart-image
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
height : auto;
}
.cart-image img
{
width : 100%;
height : 120px;
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%;
}
.cart-t_data .cart-details .id{
font-size: 14px;
}
.cart_table
{
width : 100%;
}
.cart-remove
{
/*background-color: var(--secondary-color);*/
/*border : none;*/
/*border-radius : 10px;*/
color : var(--tertiary-color);
/*padding : 5px 10px;*/
text-align : center;
text-decoration : none;
display : inline-block;
/*font-size : 10px bold;*/
font-family : "Poppins";
/*margin : 4px 2px;*/
cursor : pointer;
font-size: 24px;
}
.cart_box_purchase
{
/*border : 2px solid;*/
/*border-radius : 20px;*/
width : 90%;
/*height : fit-content;*/
/*padding : 10px;*/
font-family:'poppins';
margin-top: 2%;
}
.cart_box_purchase .box_write{
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
align-items: center;
}
.cart_box_purchase .box_write h4{
font-weight: 500;
text-shadow: var(--text-shadow);
}
.cart_box_purchase .box_write .cart-bill{
background-color: var(--secondary-color);
border : none;
border-radius : 5px;
color : var(--primary-color);
padding : 12px 11px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 15px;
/*margin : 10px 2px;*/
cursor : pointer;
}
.cart_box_purchase .box_write .cart-billing
{
background-color: var(--secondary-color);
border : none;
border-radius : 5px;
color : var(--primary-color);
padding : 12px 11px;
text-align : center;
text-decoration : none;
display : inline-block;
font-size : 15px;
/*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
{
position : relative;
display : flex;
float : left;
max-width : 1440px;
height : auto;
width : -webkit-fill-available;
text-align : center;
margin-top : 20px;
flex-direction : column;
align-items : center;
justify-content : space-between;
}
.summary_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: 400;
text-shadow: var(--text-shadow);
}
.summary-details{
display: grid;
grid-template-columns: 1fr;
font-size: 16px;
font-family: "poppins";
align-items: start;
justify-items: start;
color: var(--tertiary-color);
text-shadow: var(--text-shadow);
align-content: space-evenly;
padding-left: 10px
}
.summary-details .name{
font-weight: 500;
font-size: 18px;
text-align: left;
}
.summary-head
{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
border-bottom: solid 1px;
}
.summary-head h2
{
margin-top : 6px;
margin-bottom: 10px;
}
.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-head-table
{
font-size : 20px;
position : relative;
width : 90%;
/*margin-top : 30px;*/
display : flex;
justify-content : space-between;
border-bottom: solid 1px;
/* gap: 33rem; */
align-items: center;
}
.summary-image
{
position : relative;
display : block;
box-sizing : border-box;
float : left;
height : auto;
}
.summary-image img
{
width : 100%;
height : 130px;
object-fit : scale-down;
}
.summary-head-data
{
text-align : center;
padding : 20px;
display : grid;
grid-template-columns : 1fr 5fr;
width : 85%;
}
.summary-address
{
/*border : 2px solid;*/
/*border-radius : 20px;*/
width : 30%;
font-family: 'poppins';
/*height : fit-content;*/
/*padding : 10px;*/
float: right;
margin-right: 10%;
}
.summary-address .box_write{
padding: 10px 0;
}
.summary-address .box_write .total{
padding: 6px 0;
font-size: 18px;
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 : 15px;
margin: 24px 0;
cursor : pointer;
margin-right: 30px;
float: right;
}
/*==========================================================================================
============================================================================================
**interior page free consultant**
============================================================================================
============================================================================================*/
.consultant{
color: #fff;
display: inline-block;
font-size: 10px;
/*font-weight: bold;*/
/*padding: 10px 20px;*/
position: fixed;
bottom: 25px;
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%;
}
/*==========================================================================================
============================================================================================
**whatsapp link**
============================================================================================
============================================================================================*/
.ask{
color: #fff;
display: inline-block;
font-size: 42px;
font-weight: bold;
margin-right: 2%;
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);
}