html {
scroll-behavior: smooth;
}
body{
padding: 0;
margin: 0;
overflow-x: hidden;
}
.fixedBg{
background-image: url('../../images/site/body-bg.png');
background-position: left;
background-attachment: scroll;
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100vh;
}
:root{
--primary-color1: #474e59;
--primary-color2: #1D7197;
--secondary-color1: #052838;
--secondary-color2: #987e4b;
}
.faq .nav-pills {
overflow: auto;
white-space: nowrap;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.whyChooseItemContent:hover img{
animation: shake 3s;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
/* Hide scrollbar for WebKit browsers (Chrome, Safari) */
.faq .nav-pills::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for Firefox */
.faq .nav-pills {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* Internet Explorer 10+ */
}
a:hover{
text-decoration: none !important;
}
.ptb-100{
padding-top: 100px;
padding-bottom: 100px;
}
.ptb-50{
padding-top: 50px;
padding-bottom: 50px;
}
.backTOTop.show{
display: flex;
}
.backTOTop{
position: fixed;
bottom: 40px;
left: 20px;
width: 50px;
height: 50px;
background: var(--primary-color2);
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 6px 30px rgb(0 0 0 / 30%);
display: none;
z-index: 999;
cursor: pointer;
}
.customizeWrap .nav-item:last-child .nav-link{
margin-left: 0 !important;
}
.customSelect{
/* Arrow */
appearance: none;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: left 1rem top 50%;
background-size: 0.65rem auto;
}
.bannerSection, .aboutSection, .whyChooseClass, .productSection, .clientFeedback, .faq{
background-position: left !important;
}
@media(min-width:1399px){
.container{
max-width: 1377px;
}
}
.detailCardDemo .swiper-slide-thumb-active .cardDemoIng{
background-color: #fff;
border: 0.5px solid var(--primary-color2);
}
.overflow-hidden{
overflow: hidden;
}
.mobileCart{
position: relative;
}
.mobileCart .cartCount{
position: absolute;
background:var(--primary-color2);
border-radius: 50px;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
top: -14px;
font-size: 12px;
font-weight: 500;
color: #fff;
left: 5px;
}
.headerScrollActive .mobileCart .cartCount{
background-color: var(--primary-color2);
color: #fff;
}
.mobileHeader{
width: 100%;
height: 69px;
background-color: transparent;
position: fixed;
top: 0;
right: 0;
z-index: 999999;
padding: 0 15px;
display: flex;
border-bottom: unset;
}
.headerScrollActive {
background-color: #fff !important;
}
.mobileHeaderItem .mobileLogo{
height: 25px;
}
.mobileHeaderItem svg{
height: 25px;
color: var(--primary-color1);
margin-left: 15px;
}
.headerScrollActive svg{
color: var(--primary-color1);
}
.mobileLogoDark{
position: absolute;
right: 0;
opacity: 0;
}
.headerScrollActive .mobileLogoDark{
position: absolute;
right: 0;
opacity: 1;
}
.headerScrollActive .mobileLogoLight{
opacity: 0;
}
.mobileHeaderItem{
position: relative;
display: flex;
align-items: center;
}
.mobileHeaderItem .mobileHeaderIcon:last-child svg, .mobileHeaderIcon:nth-child(2) svg{
margin-left: 0;
}
.mobileHeaderWrap{
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.mobileMenuOpen{
width: 100%;
height: 100vh;
overflow: hidden;
background: url('../../images/site/body-bg.png');
z-index: 9999;
top: 0;
right: 0;
position: fixed;
padding-top: 100px;
padding-left: 15px;
padding-right: 15px;
overflow-y: auto;
padding-bottom: 50px;
transform: translateX(-110%);
transition: 0.3s all linear;
}
.mobileMenuOpen.mobileMenuOpenActive {
transform: translateX(0);
transition: 0.3s all linear;
}
.menuClosenIcon{
display: none;
}
.mobileHeader.mobileMenuOpenActive .menuClosenIcon{
display: block;
}
.mobileHeader.mobileMenuOpenActive .menuOpenIcon{
display: none;
}
.mobileMenuOpen .profile img{
width: 60px;
height: 60px;
border-radius: 100%;
margin-left: 15px;
}
.mobileMenuOpen .profile h4{
font-size: 16px;
color: #fff;
margin-bottom: 0;
}
.mobileMenuOpen .profile svg{
height: 20px;
color: #fff;
transform: rotateY(180deg);
}
.mobileMenuOpen .profile {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 40px;
background:var(--primary-color2);
padding: 15px;
border-radius: 15px;
}
.profileUserInfo {
display: flex;
align-items: center;
}
.mobileMenuOpenWrap ul {
list-style: none;
padding: 0;
margin: 0;
}
.mobileMenuOpenWrap ul li {
margin-bottom: 15px;
}
.mobileMenuOpenWrap ul li a {
font-size: 14px;
color: var(--primary-color1);
padding: 15px 0;
font-weight: 500;
border-bottom: 1px solid #1d71971f;
display: flex;
padding-top: 0;
align-items: center;
justify-content: space-between;
}
.mobileMenuOpenWrap ul li a svg{
height: 20px;
transform: rotateY(180deg);
}
.mobileMenuOpenWrap .socialLink a{
border: 1px solid #474e59 !important;
padding-bottom: 0 !important;
margin-bottom: 0;
justify-content: center;
}
.logOutBtn{
background: var(--primary-color2);
height: 45px;
display: flex;
align-items: center;
padding: 15px;
border-radius: 8px;
max-width: 300px;
margin: auto;
margin-top: 30px;
color:#fff;
font-weight: 500;
}
.logOutBtn svg{
margin-left: 15px;
}
.moblang-btn{
background: transparent;
border: 1px solid var(--primary-color2);
color: var(--primary-color2);
height: 45px;
display: flex;
align-items: center;
padding: 15px;
border-radius: 8px;
max-width: 360px;
margin: auto;
margin-top: 30px;
font-weight: 500;
max-width: 300px;
text-align: center;
justify-content: center;
}
.moblang-btn svg{
height: 25px;
margin-left: 10px;
}
.moblang-btn:hover{
transition: 0.3s all linear;
background: var(--primary-color2);
color: #fff;
}
.headerSection{
width: 100%;
height: 100px;
background: #fff;
display: flex;
align-items: center;
border-bottom:1px solid #cccccc30;
z-index: 9999;
}
.crty-pages .headerSection{
position: fixed;
top: 0;
left: 0;
background-color: transparent;
border-bottom: unset;
}
.crty-pages .headerSection.scrolled{
background-color: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.headerSection .container-fluid{
padding-left: 40px;
padding-right: 40px;
}
.headerSectionContent{
display: flex;
align-items: center;
}
.headerMenu{
flex-grow: 1;
}
.headerLogo img{
height: 45px;
}
.headerCart a {
display: inline-block;
margin-left: 20px;
font-size: 16px;
color: #000;
font-weight: 500;
}
.headerCart a:hover{
text-decoration: none;
color: var(--primary-color2);
}
.headerCart a:hover svg:not(.loginBtn svg){
color: var(--primary-color2) !important ;
}
.headerCart a.loginBtn:hover{
background: rgb(158, 153, 232);
background: linear-gradient(180deg, rgba(158, 153, 232, 1) 0%, rgba(111, 203, 243, 1) 35%, rgba(140, 234, 179, 1) 100%);
text-decoration: none;
color: #fff !important;
}
.headerCart a svg{
color: var(--primary-color1);
height: 25px;
margin-left: 10px;
}
.headerMenu ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
}
.headerMenu ul li a {
font-size: 16px;
font-weight: 500;
padding: 5px 20px;
margin-left: 5px;
margin-right: 5px;
display: inline-block;
color: var(--primary-color1);
text-transform: uppercase;
}
.headerMenu ul li a:hover{
text-decoration: none;
color: var(--primary-color2);
}
.loginBtn{
background: var(--primary-color1);
padding: 8px 20px;
text-align: center;
border-radius: 50px;
color: #fff !important;
font-weight: bold;
}
.myAccountBtn{
}
.loginBtn svg{
color: #fff !important;
}
.bannerSection{
width: 100%;
height: calc(100vh - 100px);
/* background-color: var(--primary-color1);*/
/* background: rgb(71,78,89);*/
/* background-image: linear-gradient(30deg, hsl(198deg 85% 69%) 0%, hsl(146.9deg 70.73% 91.96%) 33%, hsl(0deg 0% 100% / 0%) 67%, hsl(0deg 0% 100% / 0%) 100%);*/
/*background-image: url('../images/body-bg.png');*/
background-attachment: fixed;
background-position: center;
}
#cardCustomize{
/* background-image: url('../images/body-bg.png');*/
background-attachment: fixed;
background-position: left;
}
.bannerWrap{
display: flex;
}
.bannerItem{
width: 70%;
height: calc(100vh - 100px);
/* background-color: var(--primary-color2);
background: rgb(29,113,151);
background: linear-gradient(90deg, rgba(29,113,151,1) 0%, rgba(255,255,255,1) 97%);*/
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.bannerContentText{
padding-right: 100px;
padding-bottom: 20px;
width: 80%;
text-align: right;
}
.bannerContentText .formBtn svg{
height: 25px;
left: 19px;
}
.bannerContentText .formBtn{
margin: unset;
}
.grBg1{
position: absolute;
width: 760px;
height: 100%;
top: 0;
left: 0;
margin: auto;
/* z-index: 1; */
background-color: #fff;
/*background: hsla(198, 85%, 69%, 1);
background: radial-gradient(circle, hsla(198, 85%, 69%, 1) 0%, hsla(145, 69%, 73%, 1) 17%, hsla(146, 69%, 85%, 1) 29%, hsla(0, 0%, 100%, 1) 44%, hsla(0, 0%, 100%, 1) 71%, hsla(0, 0%, 100%, 1) 100%);
background: -moz-radial-gradient(circle, hsla(198, 85%, 69%, 1) 0%, hsla(145, 69%, 73%, 1) 17%, hsla(146, 69%, 85%, 1) 29%, hsla(0, 0%, 100%, 1) 44%, hsla(0, 0%, 100%, 1) 71%, hsla(0, 0%, 100%, 1) 100%);
background: -webkit-radial-gradient(circle, hsla(198, 85%, 69%, 1) 0%, hsla(145, 69%, 73%, 1) 17%, hsla(146, 69%, 85%, 1) 29%, hsla(0, 0%, 100%, 1) 44%, hsl(0deg 0% 100% / 0%) 71%, hsl(0deg 0% 100% / 0%) 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#6FCBF3", endColorstr="#8CEAB3", GradientType=1 );
z-index: -1;*/
border-radius: 100%;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.grBg2{
position: absolute;
width: 350px;
height: 350px;
top: 0;
right: 100px;
margin: auto;
z-index: 1;
background-image: url('../../images/site/line-logo-h.png');
background-repeat: no-repeat;
background-position: left;
background-size: contain;
z-index: 9999;
opacity: 0.1;
}
.bannerBg::after{
position: absolute;
width: 100%;
height: 100%;
content: '';
top: 0;
right: 0;
/*background: rgb(0,0,0);
background: linear-gradient(90deg, rgb(21 72 96 / 72%) 62%, rgba(255, 255, 255, 1) 93%, rgba(255, 255, 255, 1) 71%, rgba(255, 255, 255, 1) 100%);*/
}
.bannerBg{
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
opacity: 1;
/* background-image: url('../images/pattren-01.png');*/
}
.bannerItem:last-child{
/* background-color: #fff !important;*/
background: unset;
width: 30%;
}
.bannerSlider .swiper-slide{
width: 100% !important;
opacity: 0 !important;
transition: opacity 0.2s ease-in-out !important;
}
.bannerSlider .swiper-slide-active{
opacity: 1 !important;
transition: opacity 0.3s ease-in-out !important;
}
.bannerSmallText{
display: inline-block;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
color: var(--primary-color1);
}
.bannerTitleTextText{
font-size: 75px;
font-weight: bold;
color: #000;
margin-bottom: 15px;
}
.bannerDescription{
font-size: 24px;
line-height: 37px;
color: var(--primary-color1);
opacity: 0.8;
margin-bottom: 25px;
}
.bannerBtn{
width: 180px;
background: #fff;
padding: 5px 20px;
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--primary-color2) !important;
font-weight: 500;
position: relative;
}
.bannerBtn svg{
height: 25px;
position: relative;
left: -5px;
top: 2px;
bottom: 0;
transition: 0.2s all linear;
}
.bannerBtn:hover svg{
left: -10px;
transition: 0.2s all linear;
}
.bannerItemImg{
height: 95%;
object-fit: contain;
padding: 75px;
padding-right: 0;
}
.aboutSection{
width: 100%;
position: relative;
/* background-image: url('../images/body-bg.png');*/
background-attachment: scroll;
background-position: center;
}
.aboutSectionImg{
width: 450px;
display: flex;
}
.smallTitle{
font-size: 18px;
color: #000;
display: block;
font-weight: bold;
margin-bottom: 14px;
text-transform: uppercase;
}
.largeTitle{
display: inline-block;
font-size: 54px;
line-height: 67px;
margin-bottom: 20px;
}
.titleDescription{
color: #6a6a6a;
font-size: 18px;
line-height: 31px;
}
.aboutImgSection{
width: 100%;
height: 100%;
position: relative;
min-height: 500px;
display: flex;
align-items: end;
justify-content: space-between;
}
.aboutImgSection::after{
width: 500px;
height: 500px;
border-radius: 100%;
border: 2px dashed #ccc;
content: '';
top: 0;
left: 0;
position: absolute;
}
.cardImgLogo{
position: absolute;
height: 25px;
bottom: 15px;
right: 15px;
z-index: 1;
}
.cardImgLine{
position: absolute;
height: 35px;
top: 15px;
left: 15px;
z-index: 1;
}
/*.cardImgWrap::after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url(../images/pattren-01.png);
background-size: cover;
background-position: center;
opacity: 0.1;
}*/
.cardImgWrap{
position: relative;
z-index: 1;
left: 20px;
overflow: hidden;
box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
border-radius: 15px;
}
.cardImgWrap .cardImg{
width: 360px;
height: 450px;
object-fit: cover;
}
.aboutStat{
width: 245px;
}
.stat01{
width: 100%;
background: #6FCBF3;
padding: 40px;
height: 200px;
border-radius: 8px;
color: #fff;
position: relative;
z-index: 1;
/* background: rgb(158,153,232);*/
/*background: linear-gradient(180deg, rgba(158,153,232,1) 0%, rgba(111,203,243,1) 35%, rgba(140,234,179,1) 100%);*/
}
.stat01 h4{
font-weight: bold;
font-size: 38px;
}
.stat01 h4 span{
font-weight: 400;
font-size: 24px;
}
.stat01 span{
font-size: 24px;
line-height: 33px;
}
.stat02 {
background: #9E99E8;
padding: 20px 15px;
box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
margin-top: 50px;
margin-bottom: 80px;
position: relative;
z-index: 1;
border-radius: 12px;
width: 300px;
}
.stat02Graph{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 15px;
}
.stat02Graph img{
height: 45px;
}
.stat02 span{
color: #fff;
opacity: 0.8;
}
.stat02Graph h4{
margin-bottom: 0;
font-size: 28px;
font-weight: bold;
color: #fff;
}
.aboutContentCol{
padding-right: 65px;
text-align: right;
}
.whyChooseClass::after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
/* background-image: url(../images/pattren-01.png);*/
background-size: cover;
background-position: center;
/* opacity: 0.2;
-webkit-animation: slide 30s linear infinite;*/
}
@-webkit-keyframes slide {
from { background-position: 0 0; }
to { background-position: 512px 512px; }
}
.whyChooseClass{
width: 100%;
/* background: hsla(205, 71%, 33%, 1);*/
display: flex;
/* background-image: linear-gradient(30deg, hsl(198deg 85% 69%) 0%, hsl(146.9deg 70.73% 91.96%) 33%, hsl(0deg 0% 100% / 0%) 67%, hsl(0deg 0% 100% / 0%) 100%);*/
/*background-image: url('../images/body-bg.png');*/
background-attachment: fixed;
background-position: center;
position: relative;
}
.whyChooseWrper{
display: flex;
/* min-height: 350px;*/
align-items: center;
justify-content: center;
margin-top: 110px;
position: relative;
z-index: 99;
}
.whyChooseItem{
width: 460px;
min-height: 330px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
}
.whyChooseCenter{
/* background-color: #484f5a; */
width: 500px;
/* height: 421px; */
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
/* border: 1px solid #9ec3d84f;*/
border-radius: 8px;
position: relative;
z-index: 10;
margin: 0 40px;
background-image: url(../../images/site/card1.png);
background-size: cover;
border-radius: 15px;
background-color: #fff;
background-position: bottom;
}
/*.whyChooseCenter::after{
position: absolute;
content:'';
width: 100%;
height: 100%;
border: 1px solid #ccc;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 8px;
}*/
.whyChooseCenterItem{
width: 250px;
height: 200px;
/* background-color: #484F5A;*/
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
padding: 20px 40px;
}
.whyChooseCenterItem img{
width: 100%;
}
.whyChooseItemContent{
width: 100%;
min-height: 100px;
/* background-color: #fff;*/
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
}
.whyChooseItemContent::after{
content: '';
width: 50%;
height: 100px;
position: absolute;
z-index: 0;
border: 1px solid var(--primary-color2);
border-radius: 5px;
opacity: 0.5;
z-index: -1;
}
.whyChooseItemContentLeft1::after{
top: calc(-100% + 50%);
left:calc(-50% + 35px );
border-bottom: unset;
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
}
.whyChooseItemContentLeft2::after{
bottom: calc(-100% + 50%);
left: calc(-50% + 35px );
border-top: unset;
border-top-right-radius: unset;
border-top-right-radius: unset;
}
.whyChooseItemContentRight1::after{
top: calc(-100% + 50%);
right: calc(-50% + 35px );
border-bottom: unset;
border-bottom-left-radius: unset;
border-bottom-right-radius: unset;
}
.whyChooseItemContentRight2::after{
bottom: calc(-100% + 50%);
right: calc(-50% + 35px );
border-top: unset;
border-top-right-radius: unset;
border-top-right-radius: unset;
}
.whyChooseItemContentText{
width: calc(100% - 100px);
}
.whyChooseItemContentText p{
color: var(--primary-color1);
opacity: 1;
font-size: 15px;
font-weight: 500;
}
.whyChooseItemContentText h4{
color: #000;
font-size: 18px;
font-weight: bold;
}
.whyChooseItemContentIcon{
width: 70px;
height: 80px;
background: var(--primary-color2);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
}
.whyChooseItemContentIcon img{
height: 45px;
}
.whyChooseItem:last-child .whyChooseItemContent .whyChooseItemContentText{
order: 2;
}
.whyChooseItemContentLeft1, .whyChooseItemContentLeft2{
text-align: right;
}
.centerTitleSection{
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 1;
}
.darkTitle h2{
color: #fff;
}
.centerTitleSection h2{
font-size: 55px;
display: inline-block;
}
.line-logo-white{
position: absolute;
top: 20px;
height: 45px;
left: 30px;
}
.nfcIcon{
position: absolute;
bottom: 15px;
right: 20px;
height: 30px;
}
.sectionTitle{
margin-bottom: 40px;
text-align: right;
}
.sectionTitle h2 {
width: 50%;
font-size: 55px;
display: inline-block;
}
.sectionTitle p {
font-size: 18px;
color: var(--primary-color1);
}
.productItem{
width: 100%;
min-height: 250px;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
margin-bottom: 40px;
padding: 40px 20px;
display: flex;
align-items: center;
}
.productItemContent{
width: 60%;
text-align: right;
}
.procardImg{
width: 40%;
text-align: right;
}
.procardImg img{
width: auto;
height: 195px;
object-fit: contain;
transform: scale(1.0);
transition: 0.2s all linear;
}
.productItemContent span{
font-size: 24px;
font-weight: 400;
display: inline-block;
color: #000;
}
.productItemContent h4{
font-size: 24px;
font-weight: bold;
color: #000;
}
.productItemContent p {
font-size: 14px;
line-height: 23px;
color: var(--primary-color1);
}
.productItemContent a{
display: inline-block;
width: 150px;
text-align: center;
background-color: var(--primary-color2);
padding: 10px;
border-radius: 8px;
color: #fff;
position: relative;
overflow: hidden;
}
.productItemContent a::after{
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: #ffffff1f;
top: 0;
right: 0;
transform: translateX(-100%);
transition: 0.3s all linear;
}
.productItemContent a:hover:after{
transform: translateX(100%);
transition: 0.3s all linear;
}
.productItemContent a:hover{
background-color: var(--primary-color2) !important;
}
.productSection .productItem{
/* background-image: url('../images/pattren-011.png');*/
background-size: cover;
background-position: center;
transition: 0.2s all linear;
background-repeat: no-repeat;
}
.productItem:hover{
background-image: url('../../images/site/pattren-011.png');
/* background-color: #8ceab3;*/
/* background-image: linear-gradient(320deg, hsl(198deg 85% 69%) 0%, hsl(146.9deg 70.73% 91.96%) 33%, hsl(0deg 0% 100% / 0%) 67%, hsl(0deg 0% 100% / 0%) 100%);*/
background-size: cover;
background-repeat: no-repeat;
transition: 0.2s all linear;
background-position: right;
background-position: center;
}
.productItem:hover .productItemContent a{
background-color: var(--primary-color2);
}
/*
.productItem:hover .productItemContent p{
color: #fff;
opacity: 0.8;
}
.productItem:hover .productItemContent h4{
color: #fff;
}
.productItem:hover .productItemContent span{
color: #fff;
}*/
.productItem:hover .procardImg img{
transform: scale(0.8);
transform: 0.2s all linear;
}
.productSection {
position: relative;
/* background-image: url('../images/body-bg.png');*/
background-attachment: fixed;
background-position: center;
}
.howItsWorkWrapper{
width: 1110px;
height: 590px;
background-color: var(--primary-color1);
position: relative;
z-index: 1;
margin: auto;
border-radius: 15px;
overflow: hidden;
padding: 10px 10px 50px 10px;
position: relative;
}
.videoLogo{
position: absolute;
height: 25px;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
}
.videoFrame{
width: 100%;
height: 100%;
background-color: #fff;
}
.videoFrame video{
width: 100%;
height: 100%;
object-fit: contain;
}
.play-button {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: white;
background: rgba(0, 0, 0, 0.5);
border: none;
border-radius: 50%;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background 0.3s;
}
.play-button:hover {
background: rgba(0, 0, 0, 0.7);
}
.pb-150px{
padding-bottom: 150px;
}
.googleFeedback{
padding: 40px 20px ;
}
.faq{
/* background-image: url('../images/body-bg.png');*/
background-attachment: fixed;
background-position: center;
}
.clientFeedback {
position: relative;
/* background-image: url('../images/body-bg.png');*/
background-attachment: fixed;
background-position: center;
}
.googleFeedback .clientFeedbackItem{
background-color: #fff;
width: 100%;
min-height: 200px;
padding: 20px 15px;
border-radius: 8px;
box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
}
.clientFeedbackRating{
margin-bottom: 15px;
}
.clientFeedbackRating svg{
color: #ffb400;
}
.clientFeedbackContent p{
color: #6a6a6a;
/* font-weight: 500; */
font-size: 14px;
margin-bottom: 10px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
max-height: calc(4* 24px);
line-height: 24px;
}
.cart{
position: relative;
}
.cart .cartCount{
position: absolute;
top: -13px;
display: inline-block;
font-size: 12px;
left: -3px;
background: var(--primary-color2);
border-radius: 100%;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-weight: 500
}
.clientFeedbackContent span{
color: #868686;
display: block;
font-size: 14px;
font-weight: 200;
}
.clientFeedbackContent img{
height: 25px;
}
.clientFeedbackDet{
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 40px;
}
.clientFeedbackLogo{
width: 30px;
height: 30px;
display: inline-block;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
background: var(--primary-color2);
color: #fff;
font-weight: bold;
}
.googleFeedback .swiper-slide:nth-child(even) .clientFeedbackLogo{
background: var(--primary-color1) !important;
}
.clientFeedbackUser{
font-size: 18px;
color: #000;
font-weight: 500;
margin-bottom: 0;
}
.centerTitleSection p{
margin-bottom: 0;
font-size: 20px;
color: var(--primary-color1);
}
.centerTitleSection.darkTitle p{
color: var(--primary-color1);
opacity: 1;
}
.contactForm{
position: relative;
z-index: 1;
width: 80%;
margin: auto;
text-align: right;
}
.contactForm .label-txt{
font-size: 15px;
color: var(--primary-color1);
font-weight: 500;
}
.contactForm .form-group{
margin-bottom: 30px;
padding-bottom: 10px;
text-align: right;
}
.contactForm .form-control{
min-height: 55px;
border-radius: 12px;
font-size: 16px;
color: var(--primary-color1);
box-shadow: 0px 10px 30px rgb(0 0 0 / 9%);
border: unset;
}
.select2-container--default .select2-selection--single{
border: unset;
box-shadow: 0px 10px 30px rgb(0 0 0 / 9%);
}
.contactForm .form-control:focus{
box-shadow: unset;
outline: none;
}
.formBtn{
display: inline-block;
width: 200px;
background-color: #1d7197;
color: #ffffff !important;
height: 55px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40px;
font-size: 16px;
font-weight: 500;
border-radius: 12px;
box-shadow: 0px 1px 11px rgb(0 0 0 / 30%);
position: relative;
overflow: hidden;
padding-left: 0;
transition: 0.3s all linear;
text-transform: uppercase;
letter-spacing: 1px;
border: unset;
}
.formBtn svg{
position: absolute;
height: 35px;
left: 12px;
opacity: 0;
transition: 0.3s all linear;
transform: rotateY(180deg);
color: #fff;
z-index: 1;
}
.formBtn:hover svg{
opacity: 1;
transition-delay: 0.3s;
transition: 0.3s all linear;
transform: rotateY(180deg);
}
.formBtn::after{
content: '';
position: absolute;
height: 45px;
width: 45px;
border-radius: 100%;
top: 0;
left: 9px;
background: rgb(158,153,232);
background: linear-gradient(180deg, rgba(158,153,232,1) 0%, rgba(111,203,243,1) 35%, rgba(140,234,179,1) 100%);
transform: translateX(-160%);
transition: 0.3s all linear;
bottom: 0;
margin: auto;
}
svg.fixArrow{
transform: rotateY(180deg);
opacity: 1;
}
.formBtn:hover svg.fixArrow{
opacity: 0;
}
.formBtn:hover{
padding-left: 20px;
transition: 0.3s all linear;
border-radius: 50px;
}
.formBtn:hover:after{
transform: translateX(0%);
transition: 0.3s all linear;
}
.footerBtm{
width: 100%;
padding: 15px;
background-color: var(--primary-color1);
color: #fff;
font-size: 15px;
font-weight: 500;
text-align: center;
position: relative;
}
.footer{
padding: 50px 0;
background-color: #fff;
}
.footer-logo{
height: 35px;
margin-bottom: 20px;
}
.footerItem p {
margin-bottom: 0;
}
.footerItem ul{
padding: 0;
list-style: none;
}
.footerItem h4{
margin-bottom: 30px;
}
.footerItem li a{
font-size: 16px;
color: #6a6a6a;
font-weight: 500;
padding: 10px 0;
display: inline-block;
padding-top: 0;
margin-bottom: 10px;
}
.footerItem li a:hover{
color: var(--primary-color2);
}
.footerItem .socialLink a:hover{
background-color: var(--primary-color2);
color: #fff;
}
.footerItem .socialLink a:hover svg{
color: #fff;
}
.footerItem li:last-child a {
padding-bottom: 0;
}
.footerItem li svg{
margin-left: 10px;
color: var(--primary-color2);
}
.socialLink svg{
height: 20px;
margin-left: 0 !important;
}
.socialLink{
display: flex;
}
.socialLink a {
width: 40px;
height: 40px;
border-radius: 100%;
display: flex !important;
align-items: center;
justify-content: center;
margin-left: 10px;
border: 1px solid var(--primary-color2);
}
.socialLink a:last-child{
margin-left: 0;
}
.iconBg{
background-image: url(../../images/site/line-logo.png);
background-size: 115px;
background-attachment: fixed;
background-position: 98% 96px;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
z-index: -1;
opacity: 0.2;
}
.iconBgWhite{
background-image: url(../../images/site/line-logo-white.png) !important;
}
.faq .nav-pills .nav-link{
color: var(--primary-color1);
font-size: 24px;
text-align: right;
margin-bottom: 20px;
position: relative;
padding: 0;
padding-bottom: 15px;
display: flex;
width: auto;
max-width: max-content;
font-weight: 500;
}
.faq .nav-pills .nav-link::after{
position: absolute;
content: '';
bottom: 0;
height: 2px;
background-color: var(--primary-color2);
content: '';
right: 0;
width: 0%;
transition: 0.2s all linear;
}
.faq .nav-pills .nav-link.active{
background-color: transparent;
color: var(--primary-color2);
}
.faq .nav-pills .nav-link.active::after{
width: 100%;
transition: 0.2s all linear;
}
.faq .card-header {
border: unset;
background: transparent;
padding: 0;
padding-bottom: 15px;
}
.faq .card{
border: unset;
border-bottom: 1px solid #ccc !important;
margin-bottom: 20px;
background: transparent;
}
.faq .card .btn-link{
color: var(--primary-color1);
font-size: 24px;
padding: 0;
font-weight: 500;
text-align: right !important;
}
.faq .card .btn-link:focus{
outline: none;
box-shadow: unset;
text-decoration: none;
}
.faq .card .btn-link:hover{
text-decoration: none !important;
}
.faq .card-body{
padding: 0;
padding-bottom: 10px;
font-size: 18px;
line-height: 29px;
text-align: right;
}
.detaiBanner{
width: 100%;
min-height: 600px;
/* background-color: red;*/
/* background-image: url('../images/pattren-01.png');*/
/*background-image: url('../images/body-bg.png');*/
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
background-position: left;
}
.detaiBannerprocardImg img{
height: 470px;
}
.detaiBannerproductItemContent span{
font-size: 55px;
}
.detaiBannerproductItemContent h4{
font-size: 55px;
font-weight: bold;
}
.detaiBannerproductItemContent p {
font-size: 20px;
}
.detaiBannercardPrice span{
font-size: 18px;
}
.detaiBannercardPrice{
font-size: 18px;
background: #ffffff;
width: 400px;
padding: 20px;
border-radius: 8px;
color: #000;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
font-weight: bold;
margin-bottom: 30px;
}
.detaiBanner a {
background: var(--primary-color2);
padding: 15px 20px;
/* width: 100%; */
display: inline-block;
color: #fff;
border-radius: 8px;
font-weight: 500;
}
.gallerySection{
min-height: 100vh;
}
.galleryItem img {
width: 429px;
}
.liteBg{
background-color: #eaf1f5;
}
.cardCustomize .nav-link{
padding: 10px 15px;
min-width: 230px;
border-radius: 50px;
background: #1d719721;
color: #000;
font-weight: 500;
margin-left: 20px;
font-size: 14px;
}
.cardCustomize .nav-pills .nav-link.active, .cardCustomize .nav-pills .show>.nav-link{
background-color: var(--primary-color2);
}
.cardCustomize .nav{
justify-content: center;
}
.cardDemoIng img{
height: 400px;
object-fit: contain;
}
.detailCardDemo .cardDemoIng img{
height: 100px;
object-fit: contain;
opacity: 0.5;
}
.cardDemoIng{
text-align: center;
}
.detailCardDemo .cardDemoIng{
text-align: center;
background: #00000036;
padding: 10px;
border-radius: 15px;
}
.detailCardDemo .swiper-slide-thumb-active .cardDemoIng img{
opacity: 1;
}
.detailCardDemo {
margin-top: 20px;
}
.liveDesignWrapper{
/*width: 95%;
display: flex;*/
align-items: center;
margin: auto;
justify-content: space-between;
}
.liveDesignItem{
width: 49%;
/* min-height: 400px; */
background-color: #fff;
box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
padding: 20px 20px;
margin: auto;
margin-bottom: 20px;
}
.liveDesignItemTitle{
margin-bottom: 20px;
}
.digitNfcCard{
width: 400px;
height: 220px;
background-color: var(--primary-color1);
margin-left: 15px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
border: 1px solid #cccccc75;
}
.cardPreviewInfo h4{
font-size: 18px;
color: #fff;
margin-bottom: 0px;
}
.cardPreviewInfo span{
display: inline-block;
font-size: 13px;
color: #fff;
opacity: 0.8;
}
.cardPreview{
display: flex;
align-items: center;
justify-content: center;
}
.cardPreviewlogo{
position: absolute;
bottom: 20px;
right: 20px;
font-size: 20px;
color: #fff;
}
.nfcLiIcon{
position: absolute;
top: 20px;
left: 20px;
}
.cardBackSide .qrSvg{
width: 70px;
height: 70px;
}
.svgNfcIcon{
position: absolute;
bottom: 15px;
right: 15px;
}
#picture__input {
display: none;
}
.picture {
width: 100%;
aspect-ratio: 16/9;
background: var(--primary-color2);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
border: 1px dashed #fff;
cursor: pointer;
font-family: sans-serif;
transition: color 300ms ease-in-out, background 300ms ease-in-out;
outline: none;
overflow: hidden;
}
.picture__image{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.picture:hover {
color: #777;
background: #ccc;
}
.picture:active {
border-color: turquoise;
color: turquoise;
background: #eee;
}
.picture:focus {
color: #777;
background: #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.picture__img {
max-width: 100%;
}
.liveDesignRightSide label{
font-size: 14px;
display: block;
}
.colorWrap{
display: flex;
}
.colorWrap .form-group{
text-align: center;
}
.colorWrap .form-group:first-child{
margin-left: 20px;
}
.colorWrap input{
width: 114px;
height: 50px;
background-color: transparent;
border: 1px solid #ccc;
/* overflow: hidden;*/
}
input[type="color"] {
/* Remove default styling */
appearance: none;
-webkit-appearance: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
box-shadow: 0 6px 30px rgba(182, 186, 203, 0.3);
/* Ensure cursor is a pointer when hovering */
}
/* Example custom styling for input[type="color"] */
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 15px;
width: 50px;
height: 50px;
}
/* Additional styling for cross-browser compatibility */
input[type="color"] {
/* Firefox */
-moz-appearance: none;
}
/* Example usage with a label */
.label-with-color-picker {
display: flex;
align-items: center;
}
.label-with-color-picker input[type="color"] {
margin-left: 10px;
}
.liveDesignRightSide h5{
margin-bottom: 30px;
text-align: right;
}
.liveDesignItem .form-control{
height: 48px;
border-radius: 8px;
font-size: 14px;
}
.liveDesignItem .form-control:focus{
outline: none;
box-shadow: unset;
}
.cardCustomize .centerTitleSection{
margin-bottom: 20px;
}
.cardCustomize .form-group{
margin-bottom: 0;
}
.cardPreviewlogo img{
height: 40px;
}
.prodQty{
display: flex;
align-items: center;
}
.prodQty .incDcrBtn{
display: inline-block;
width: 40px;
height: 40px;
background-color: var(--primary-color1);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
font-weight: bold;
cursor: pointer;
}
.prodQty input{
width: 100px;
height: 40px;
text-align: center;
margin: 0 10px;
border-radius: 8px;
border: 1px solid #474e5942;
font-weight: bold;
font-size: 20px;
color: #474e59;
}
.addToCartBtn{
display: inline-block;
width: 200px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary-color2);
color: #fff !important;
font-weight: 500;
border-radius: 8px;
margin-right: 40px;
border: unset;
}
.addToCart{
display: flex;
align-items: center;
justify-content: center;
}
/* Hide the arrows for WebKit browsers (e.g., Chrome, Safari) */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Hide the arrows for Firefox */
input[type=number] {
-moz-appearance: textfield;
}
.custoDesignUpload{
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
margin-bottom: 50px;
}
.custoDesignUploadGroup label svg{
color: var(--primary-color2);
}
.custoDesignUploadGroup label{
width: 400px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px;
color: #fff;
font-size: 18px;
flex-direction: column;
color: #6a6a6a;
font-weight: 500;
}
.custoDesignUploadGroup label span{
display: inline-block;
font-size: 13px;
font-weight: 400;
}
.custoDesignUploadGroup {
position: relative;
display: inline-block;
overflow: hidden;
cursor: pointer;
background-color: #1d719712;
color: white;
border: 1px dashed #1d7197;
padding: 10px 20px;
border-radius: 15px;
}
.custoDesignUploadGroup input[type=file] {
font-size: 100px;
position: absolute;
right: 0;
top: 0;
opacity: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.customDesignLabel {
display: inline-block;
cursor: pointer;
}
.file-name {
margin-right: 10px;
font-style: italic;
}
.fileUpload{
display: flex;
align-items: center;
width: 100%;
justify-content: center;
}
.custoDesignUpload .commentGroup textarea{
width: 400px;
margin-right: 20px;
height: 180px;
border-radius: 15px;
border: 1px solid #1d7197;
background-color: white;
color: #000;
}
.custoDesignUpload .commentGroup textarea:focus{
box-shadow: unset;
outline: none;
}
.otherSecBanner{
width: 100%;
min-height: 380px;
background:hsl(199.34deg 76.1% 68.82%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-image: url('../../images/site/body-bg.png');
/*background-attachment: fixed;*/
background-position: left;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
margin-top: -100px;
padding-top: 100px;
}
.otherSecBanner h2{
color: var(--primary-color1);
font-size: 55px;
}
.cartItemInfo{
display: flex;
}
.cartItemInfo img{
width: 100%;
object-fit: contain;
width: 80px;
height: 80px;
margin-left: 20px;
}
.cartListItem{
display: flex;
justify-content: space-between;
border-radius: 8px;
margin-bottom: 10px;
padding: 20px 15px;
padding-bottom: 0;
position: relative;
cursor: pointer;
padding-bottom: 20px;
}
.showCustonDetail{
position: absolute;
bottom: 10px;
font-size: 14px;
color: var(--primary-color2);
font-weight: bold;
right: 116px;
}
.showCustonDetail svg{
height: 20px;
position: absolute;
transition: 0.2s all linear;
top: 2px;
}
.showCustonDetail.open svg{
transform: rotate(90deg);
transition: 0.2s all linear;
}
.customCardDetailGroup{
display: none;
}
.cartListItem:nth-child(odd){
background-color: #2b769c12;
}
.cartListItem:nth-child(even){
border:1px solid #2b769c63;
}
.cardBasicInfo{
display: flex;
flex-wrap: wrap;
width: 530px;
}
.cardBasicInfoGroup label{
font-size: 13px;
color: #868686;
margin-bottom: 0;
}
.cardBasicInfoGroup p {
font-size: 15px;
color: #000;font-weight: 500;
margin-bottom: 0;
}
.cardBasicInfoGroup{
margin-left: 20px;
margin-bottom: 20px;
}
.cardBasicInfoGroup:last-child{
margin-left: 0;
}
.cartListItemContent{
margin-left: 20px;
}
.cartListItemContent:last-child{
margin-left: 0;
}
.cartItemRemove{
color: red;
width: 50px;
text-align: center;
}
.cardPrice {
font-size: 20px;
font-weight: 500;
}
.totalAmount{
width: 100%;
margin-right: auto;
margin-top: 40px;
margin-left: 20px;
}
.totalAmountItem{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
font-weight: 500;
background: #2b769c12;
padding: 15px;
border-radius: 8px
}
.totalAmountItem p {
margin-bottom: 0;
}
.totalAmountItem:last-child {
font-size: 18px;
font-weight: bold;
background-color: var(--primary-color1);
color: #fff;
}
.btnGroup{
display: flex;
align-items: center;
justify-content: center;
margin: auto;
margin-top: 50px;
}
.appBtn{
display: inline-block;
padding: 10px 20px;
background-color: red;
font-size: 16px;
font-weight: 500;
color: #fff !important;
border-radius: 8px;
background-color: var(--primary-color2);
min-width: 150px;
text-align: center;
border: unset;
}
.btnGroup .appBtn {
margin-left: 20px;
}
.btnGroup .appBtn:last-child{
margin-left: 0;
}
.appBtn.outlineBtn{
background-color: transparent;
border: 1px solid #1a6688;
color: #1a6688 !important;
}
.cartList, .secLiteBg{
background: #cccccc24;
}
.billinfDetail .label-txt{
color: var(--primary-color2);
}
.form-control:disabled, .form-control[readonly] {
background-color: #ffffff;
opacity: 1;
}
/* .mobileInput{
padding-right: 55px;
} */
.mobileCode{
position: absolute;
bottom: 45px;
right: 26px;
color: #6c757d;
}
.locationLabel{
display: flex;
align-items: center;
justify-content: space-between;
}
.locationLabel span{
cursor: pointer;
}
#map_wrapper{
width: 100%;
height: 400px;
}
#map_canvas{
width: 100%;
height: 100%;
}
.locationPopup .modal-header{
background: var(--primary-color2);;
color: #fff;
border: unset;
}
.locationPopup .modal-body{
padding: 0;
}
.locationPopup .btnGroup {
border: unset;
margin-top: 0;
}
.locationPopup .modal-header .close{
color: #fff;
}
.ProductQty{
display: inline-block;
font-size: 20px;
color: #474e59;
}
.checkoutSecTitle{
font-size: 24px;
margin-bottom: 15px;
display: inline-block;
border-bottom: 2px solid var(--primary-color2);
}
.paymentMethod{
margin-top: 50px;
}
.paymentFormItem .form-group{
margin-bottom: 0;
position: relative;
}
.paymentFormItem .form-group label{
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 15px 5px rgb(0 0 0 / 6%);
border-radius: 15px;
display: block;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
cursor: pointer;
position: relative;
padding-right: 50px;
}
.paymentFormItem .form-group label svg{
position: absolute;
top: 1px;
right: 15px;
bottom: 0;
margin: auto;
color: #868686;
}
.fill-circle-cvg{
opacity: 0;
transition: 0.2s all linear;
}
.paymentFormItem .form-group input:checked + label .circleSvg {
opacity: 0;
transition: 0.2s all linear;
}
.paymentFormItem .form-group input:checked + label .fill-circle-cvg {
opacity: 1;
color: var(--primary-color2);
transition: 0.2s all linear;
}
.paymentFormItem .form-group label img{
height: 24px;
;
}
.paymentFormItem input{
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.orderSuccessWrapper{
width: 80%;
margin: auto;
border: 1px solid #1d7197;
padding: 40px 20px;
border-radius: 15px;
}
.orderSuccess{
background-color: #fff;
text-align: center;
color: #fff;
}
.orderSuccess svg{
width: 130px;
height: 130px;
color: var(--primary-color2);
}
.orderSuccess h2{
margin-bottom: 40px;
font-size: 45px;
color: var(--primary-color2);
}
.orderSuccess h4{
color: var(--primary-color2);
font-size: 22px;
color: #6a6a6a;
}
.orderSuccess p{
color: #6a6a6a;
font-size: 18px;
opacity: 0.8;
width: 60%;
margin: auto;
margin-bottom: 0;
}
.appBtn.whiteBtn{
background: var(--primary-color2);
color: #fff !important;
margin-top: 40px;
}
.height_zero_ani{
min-height:0;
height: 0;
overflow: hidden;
transition: 0.3s all linear;
}
#cardCustomize{
transition: 0.3s all linear;
}
.cardInfoBannerWrapper{
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 100px;
}
.cardInfoBannerItem {
width: 55%;
text-align: right;
}
.cardInfoBannerItem.cardInfoBannerDemoCard{
width: 45%;
}
@media(min-width:1400px) and (max-width:1700px){
.liveDesignItem{
width: 60%;
}
.grBg1{
width: 600px;
}
.bannerTitleTextText{
font-size: 45px;
}
.bannerDescription{
font-size: 20px;
}
.bannerSmallText{
font-size: 16px;
}
}
@media(min-width:1200px) and (max-width:1399px){
.grBg1{
width: 625px;
}
.headerSection .container-fluid{
padding-right: 20px;
padding-left: 20px;
}
.headerLogo img{
height: 55px;
}
.headerMenu ul li a{
font-size: 14px;
padding: 5px 15px;
}
.headerCart a svg{
height: 20px;
}
.headerCart a{
font-size: 14px;
}
.headerCart a:last-child{
margin-left: 0;
}
.headerCart a{
margin-left: 15px;
text-align: center;
display: flex;
align-items: center;
}
.headerMenu ul{
justify-content: center;
}
.headerCart{
display: flex;
}
.bannerTitleTextText{
font-size: 45px;
}
.bannerDescription{
font-size: 18px;
}
.bannerContentText{
padding: 0 80px;
padding-left: 50px;
}
.bannerItem:last-child{
width: 45%;
}
.smallTitle{
font-size: 16px;
display: block;
}
.largeTitle{
font-size: 28px;
line-height: 37px;
}
.ptb-100{
padding-top: 50px;
padding-bottom: 50px;
}
.cardImgWrap .cardImg{
width: 290px;
}
.howItsWorkWrapper{
width: 990px;
}
.procardImg img{
width: auto;
height: 200px;
}
.whyChooseItem{
min-height: 261px;
}
.whyChooseCenter{
width: 369px;
height: 227px;
min-height: auto;
min-width: auto;
}
.whyChooseItemContentText p{
font-size: 13px;
}
.whyChooseItemContentLeft1::after{top: calc(-100% + 70%);}
.whyChooseItemContentLeft2::after{bottom: calc(-100% + 70%);}
.whyChooseItemContentRight1::after{top: calc(-100% + 70%);}
.whyChooseItemContentRight2::after{bottom: calc(-100% + 70%);}
.whyChooseWrper{
margin-bottom: 55px;
margin-top: 55px;
}
/*Product Detail*/
.cardInfoBannerWrapper{
padding: 0 50px;
}
.cardInfoBannerItem{
width: 100%;
}
.detaiBannercardPrice{
width: 320px;
}
.detaiBanner{
padding-top: 100px;
padding-bottom: 50px;
}
.detaiBannerproductItemContent span, .detaiBannerproductItemContent h4{
font-size: 55px;
}
.detaiBannerproductItemContent p{
font-size: 18px;
}
.detaiBannercardPrice span{
font-size: 16px;
}
.detaiBannercardPrice{
font-size: 14px;
margin-bottom: 20px;
}
.detaiBanner a{
width: 320px;
margin: auto;
text-align: center;
}
.cardInfoBannerItem.cardInfoBannerDemoCard{
width: 50%;
}
.cardDemoIng img{
height: 250px;
}
.detailCardDemo .cardDemoIng img{
height: 45px;
}
.detaiBanner.height_zero_ani{
padding: 0;
}
#cardCustomize.height_zero_ani{
padding-top: 0;
}
.cardCustomize .nav{
flex-wrap: nowrap;
justify-content: flex-start;
overflow: hidden;
overflow-x: auto;
}
.cardCustomize .nav-link{
min-width: 180px;
}
.customizeWrap{
width: 80%;
margin: auto;
}
.liveDesignItem{
width: 100%;
}
.cardPreview{
justify-content: center;
}
.digitNfcCard{
margin-bottom: 20px;
margin-top: 20px;
}
.liveDesignItem .form-control{
margin-bottom: 20px;
}
.liveDesignItem .mb-5{
margin-bottom: 0 !important;
}
.colorWrap{
justify-content: center;
}
.liveDesignRightSide h5 {
margin-bottom: 15px;
text-align: center;
margin-top: 15px;
}
.custoDesignUpload .commentGroup textarea{
width: 320px;
}
.custoDesignUploadGroup label{
width: 300px;
}
.custoDesignUpload{
padding: 20px;
margin-bottom: 25px;
}
.picture{
width: 190px;
margin: auto;
}
/*Product Detail*/
/*cart*/
.cartCartQty.cartListItemContent .prodQty input{
width: 70px;
height: 30px;
font-size: 15px;
}
.cartCartQty.cartListItemContent .prodQty .incDcrBtn{
width: 30px;
height: 30px;
}
.cartCartQty.cartListItemContent .prodQty .incDcrBtn svg{
height: 20px !important;
}
.cardPrice{
font-size: 18px;
}
.cardBasicInfoGroup p{
font-size: 14px;
}
/*cart*/
}
@media(min-width:992px) and (max-width:1199px){
.bannerSection{
/* background-image: linear-gradient(178deg, hsl(198deg 85% 69%) 0%, hsl(146.9deg 70.73% 91.96%) 29%, hsl(0deg 0% 100%) 67%, hsl(0deg 0% 100%) 100%);*/
}
.grBg1{
background-color: transparent;
}
.grBg2{
width: 300px;
height: 350px;
right: 0;
left: 0;
}
.cartListWrapper {
margin-top: 20px;
}
.headerSection .container-fluid{
padding-right: 20px;
padding-left: 20px;
}
.headerLogo img{
height: 35px;
}
.headerMenu ul li a{
font-size: 12px;
padding: 5px 15px;
}
.headerCart a svg{
height: 20px;
}
.headerCart a{
font-size: 12px;
}
.headerCart a:last-child{
margin-left: 0;
}
.headerCart a{
margin-left: 15px;
text-align: center;
display: flex;
align-items: center;
}
.headerMenu ul{
justify-content: center;
}
.headerCart{
display: flex;
}
.bannerTitleTextText{
font-size: 45px;
}
.bannerDescription{
font-size: 18px;
}
.bannerContentText{
padding: 0 20px;
padding-left: 50px;
}
.bannerItem:last-child{
width: 45%;
}
.smallTitle{
font-size: 16px;
}
.largeTitle{
font-size: 28px;
line-height: 37px;
}
.ptb-100{
padding-top: 50px;
padding-bottom: 50px;
}
.container, .container-md, .container-sm{
max-width: 95%;
}
.bannerSection, .bannerItem{
height: auto;
min-height: 500px;
width: 100%;
}
.bannerItem:last-child{
width: 100%;
min-height: auto;
background-color: #fff;
}
.bannerWrap{
flex-direction: column;
}
.bannerTitleTextText{
font-size: 28px;
}
.bannerItemImg{
height: 360px;
padding: 0;
}
.bannerContentText{
padding-right: 0;
text-align: center;
}
.bannerDescription{
font-size: 16px;
}
.bannerSmallText{
font-size: 14px;
}
.bannerBtn{
min-height: 45px;
padding: 5px 20px;
margin: auto;
}
.bannerSection{
background-position: center;
}
.order2{
order: 1;
}
.order1{
order: 2;
}
.smallTitle{
font-size: 14px;
display: block;
}
.largeTitle{
font-size: 24px;
line-height: 37px;
}
.ptb-100{
padding-top: 50px;
padding-bottom: 50px;
}
.aboutContentCol{
padding-right: 15px;
}
.titleDescription{
font-size: 16px;
line-height: 29px;
text-align: justify;
}
.aboutContentCol {
text-align: center;
}
.cardImgWrap{
width: 330px;
margin: auto;
margin-bottom: 15px;
}
.aboutImgSection::after{
right: 0;
margin: auto;
}
.aboutStat{
width: 320px;
}
.stat01{
padding: 30px;
height: 175px;
}
.cardImgWrap .cardImg {
width: 330px;
height: 430px;
}
.centerTitleSection h2{
font-size: 28px;
}
.howItsWorkWrapper{
width: 700px;
height: 400px;
}
.videoLogo{
height: 16px;
}
.howItsWorkWrapper{
padding-bottom: 35px;
}
.play-button svg{
width: 30px;
height: 30px;
}
.play-button{
width: 50px;
height: 50px;
}
.centerTitleSection{
margin-bottom: 25px;
}
.sectionTitle h2{
font-size: 28px;
text-align: center;
}
.sectionTitle h2 br{
display: none;
}
.sectionTitle p{
font-size: 16px;
}
.productItem{
flex-direction: column;
}
.procardImg, .productItemContent{
width: 100%;
margin-top: 20px;
}
.procardImg img{
height: auto;
width: auto;
height: 190px;
display: flex;
justify-content: center;
margin: auto;
}
.productItem{
/* background-image: url('../images/pattren-02.png');*/
background-size: cover;
background-repeat: no-repeat;
}
.productItemContent p{
text-align: justify;
font-size: 16px;
line-height: 27px;
}
.productItemContent span{
font-size: 18px;
}
.whyChooseWrper{
margin-top: 0;
flex-direction: column;
}
.whyChooseCenter{
width: 330px;
height: 200px;
min-height: 150px;
width: 320px;
order: 1;
margin-bottom: 20px;
}
.whyChooseItem:first-child .whyChooseItemContent {
width: 90%;
padding: 20px;
}
.whyChooseItem:first-child{
order: 2;
flex-direction: row;
width: 100%;
}
.whyChooseItem:last-child .whyChooseItemContent {
width: 90%;
padding: 20px;
}
.whyChooseItem:last-child{
order: 2;
flex-direction: row;
width: 100%;
}
.whyChooseItem:first-child .whyChooseItemContent .whyChooseItemContentIcon{
order: 1;
}
.whyChooseItem:first-child .whyChooseItemContent .whyChooseItemContentText{
order: 2;
}
.whyChooseCenterItem img {
width: auto;
height: 25px;
}
.whyChooseItemContent{
flex-direction: column;
align-items: center;
}
.whyChooseItemContent::after{
content: unset;
}
.whyChooseItemContentText{
width: 100%;
text-align: center;
margin: 15px 0;
}
.whyChooseItemContentIcon{
margin-bottom: 10px;
}
.faq .nav-pills .nav-link{
font-size: 16px;
margin-left: 15px;
margin-bottom: 0;
padding-bottom: 0;
}
.faq .nav-pills .nav-link:last-child{
margin-left: 0;
}
.faq .nav.flex-column{
flex-direction: row !important;
white-space: nowrap;
flex-wrap: nowrap;
overflow-x: auto;
margin-bottom: 20px;
justify-content: center;
}
.faq .nav-pills .nav-link{
background-color: #f2f2f2;
padding: 5px 12px;
border-radius: 50px;
}
.faq .nav-pills .nav-link.active {
color: #fff;
background-color: var(--primary-color2);
color: #fff;
}
.faq .nav-pills .nav-link::after{
background: unset;
}
.faq .card .btn-link{
font-size: 16px;
}
.faq .card-body{
font-size: 16px;
line-height: 29px;
}
.sectionTitle{
margin-bottom: 20px;
text-align: center;
}
.centerTitleSection p{
font-size: 16px;
}
.contactForm{
width: 100%;
}
.formBtn{
margin-top: 0;
}
.contactForm label{
font-size: 14px;
}
.contactForm .form-control{
height: 45px;
}
.contactForm .form-group{
margin-bottom: 25px;
}
.footer {
padding: 25px 0;
text-align: center;
}
.footer-logo{
height: 45px;
}
.footerItem p{
margin-bottom: 20px;
}
.socialLink{
justify-content: center;
}
.footerItem li a{
font-size: 14px;
}
.socialLink svg{
height: 18px;
}
.socialLink a{
width: 40px;
height: 40px;
margin-bottom: 0;
}
/*Product Detail*/
.cardInfoBannerWrapper{
padding: 0 50px;
}
.cardInfoBannerItem{
width: 100%;
}
.detaiBannercardPrice{
width: 320px;
}
.detaiBanner{
padding-top: 100px;
padding-bottom: 50px;
}
.detaiBannerproductItemContent span, .detaiBannerproductItemContent h4{
font-size: 55px;
}
.detaiBannerproductItemContent p{
font-size: 18px;
}
.detaiBannercardPrice span{
font-size: 16px;
}
.detaiBannercardPrice{
font-size: 14px;
margin-bottom: 20px;
}
.detaiBanner a{
width: 320px;
margin: auto;
text-align: center;
}
.cardInfoBannerItem.cardInfoBannerDemoCard{
width: 50%;
}
.cardDemoIng img{
height: 250px;
}
.detailCardDemo .cardDemoIng img{
height: 45px;
}
.detaiBanner.height_zero_ani{
padding: 0;
}
#cardCustomize.height_zero_ani{
padding-top: 0;
}
.cardCustomize .nav{
flex-wrap: nowrap;
justify-content: flex-start;
overflow: hidden;
overflow-x: auto;
}
.cardCustomize .nav-link{
min-width: 180px;
}
.liveDesignItem{
width: 100%;
padding: 10px 15px;
}
.cardPreview{
justify-content: center;
}
.digitNfcCard{
width: 400px;
height: 200px;
margin: auto;
margin-bottom: 20px;
}
.liveDesignItem .form-control{
margin-bottom: 20px;
}
.liveDesignItem .mb-5{
margin-bottom: 0 !important;
}
.colorWrap{
justify-content: center;
}
.liveDesignRightSide h5 {
margin-bottom: 15px;
text-align: center;
margin-top: 15px;
}
.custoDesignUpload .commentGroup textarea{
width: 320px;
}
.custoDesignUploadGroup label{
width: 300px;
}
.custoDesignUpload{
padding: 20px;
margin-bottom: 25px;
}
.picture{
width: 190px;
margin: auto;
}
/*Product Detail*/
/*Cart*/
.cartItemInfo, .cartListItem{
flex-direction: column;
}
.cardBasicInfo{
width: auto;
}
.cardBasicInfoGroup p{
font-size: 14px;
}
.cardBasicInfoGroup{
margin-bottom: 10px;
}
.cardPrice{
position: absolute;
top: 41px;
left: 0px;
font-size: 15px;
font-weight: bold;
}
.cartCartQty.cartListItemContent .prodQty{
padding-bottom: 0px;
padding-top: 0px;
}
.cartCartQty.cartListItemContent .prodQty input{
width: 70px;
height: 30px;
font-size: 15px;
}
.cartCartQty.cartListItemContent .prodQty .incDcrBtn{
width: 30px;
height: 30px;
}
.cartCartQty.cartListItemContent .prodQty .incDcrBtn svg{
height: 20px !important;
}
.cartListItemContent:last-child {
margin-left: 0;
position: absolute;
top: 75px;
left: 5px;
}
.orderdetail-box .cartListItemContent:last-child{
position: relative;
top: unset;
left: unset;
right: unset;
}
.odr-paymetsec {
margin-top: 30px;
}
.cartItemRemove.cartListItemContent {
margin-left: 0;
position: absolute;
bottom: 15px;
left: 5px;
top: unset;
}
.showCustonDetail{
right: 0;
right: 0;
margin: auto;
text-align: center;
position: relative;
bottom: -5px;
}
.btnGroup .appBtn:last-child{
margin-bottom: 0;
}
.otherSecBanner{
min-height: 190px;
padding-top: 50px;
}
.otherSecBanner h2{
font-size: 38px;
}
/*checkout*/
.checkoutList .cartItemInfo, .checkoutList .cartListItem{
flex-direction: row !important;
}
.checkoutList .cartListItem{
padding-bottom: 20px;
}
.checkoutList .cartCartQty.cartListItemContent .prodQty{
padding-bottom: 0;
}
.checkoutList .cartListItemContent:last-child{
position: unset;
}
.checkoutList .cardBasicInfo{
width: 500px;
}
/*checkout*/
/*Success Page*/
.orderSuccess svg{
width:80px;
height: 80px;
}
.orderSuccess h2{
font-size: 28px;
}
.orderSuccess h4{
font-size: 20px;
}
.orderSuccess p{
font-size: 14px;
}
.orderSuccess {
/*min-height: 100vh;*/
display: flex;
align-items: center;
}
.bannerContentText .formBtn{
margin: auto;
}
/*Success Page*/
.bannerContentText {
width: 100%;
padding-top: 50px;
}
/*Cart*/
}
@media(min-width:768px) and (max-width:991px){
.container, .container-md, .container-sm{
max-width: 95%;
}
.bannerSection{
/* background-image: linear-gradient(178deg, hsl(198deg 85% 69%) 0%, hsl(146.9deg 70.73% 91.96%) 29%, hsl(0deg 0% 100%) 67%, hsl(0deg 0% 100%) 100%);*/
}
.grBg1{
background-color: transparent;
}
.grBg2{
width: 300px;
height: 350px;
right: 0;
left: 0;
}
.bannerSection, .bannerItem{
height: auto;
min-height: 500px;
width: 100%;
}
.bannerItem:last-child{
width: 100%;
min-height: auto;
background-color: #fff;
}
.bannerWrap{
flex-direction: column;
}
.bannerTitleTextText{
font-size: 35px;
}
.bannerItemImg{
height: 360px;
padding: 0;
}
.bannerContentText{
padding-right: 0;
text-align: center;
}
.bannerDescription{
font-size: 18px;
}
.bannerSmallText{
font-size: 14px;
}
.bannerBtn{
min-height: 45px;
padding: 5px 20px;
margin: auto;
}
.bannerSection{
background-position: center;
}
.order2{
order: 1;
}
.order1{
order: 2;
}
.smallTitle{
font-size: 14px;
display: block;
}
.largeTitle{
font-size: 24px;
line-height: 37px;
}
.ptb-100{
padding-top: 50px;
padding-bottom: 50px;
}
.aboutContentCol{
padding-right: 15px;
}
.titleDescription{
font-size: 16px;
line-height: 29px;
text-align: justify;
}
.aboutContentCol {
text-align: center;
}
.cardImgWrap{
width: 330px;
margin: auto;
margin-bottom: 15px;
}
.aboutImgSection::after{
right: 0;
margin: auto;
}
.aboutStat{
width: 320px;
}
.stat01{
padding: 30px;
height: 175px;
}
.cardImgWrap .cardImg {
width: 330px;
height: 430px;
}
.centerTitleSection h2{
font-size: 28px;
}
.howItsWorkWrapper{
width: 700px;
height: 400px;
}
.videoLogo{
height: 16px;
}
.howItsWorkWrapper{
padding-bottom: 35px;
}
.play-button svg{
width: 30px;
height: 30px;
}
.play-button{
width: 50px;
height: 50px;
}
.centerTitleSection{
margin-bottom: 25px;
}
.sectionTitle h2{
font-size: 28px;
text-align: center;
display: block;
margin: auto;
margin-bottom: 20px;
}
.sectionTitle h2 br{
display: none;
}
.sectionTitle p{
font-size: 16px;
}
.productItem{
flex-direction: column;
}
.procardImg, .productItemContent{
width: 100%;
margin-top: 20px;
}
.procardImg img{
height: auto;
width: auto;
height: 190px;
display: flex;
justify-content: center;
margin: auto;
}
.productItem{
/* background-image: url('../images/pattren-02.png');*/
background-size: cover;
background-repeat: no-repeat;
min-height: 550px;
}
.productItemContent p{
text-align: justify;
font-size: 16px;
line-height: 27px;
}
.productItemContent span{
font-size: 18px;
}
.whyChooseWrper{
margin-top: 0;
flex-direction: column;
}
.whyChooseCenter{
width: 330px;
height: 200px;
min-height: 150px;
width: 320px;
order: 1;
margin-bottom: 20px;
}
.whyChooseItem:first-child .whyChooseItemContent {
width: 90%;
padding: 20px;
}
.whyChooseItem:first-child{
order: 2;
flex-direction: row;
width: 100%;
}
.whyChooseItem:last-child .whyChooseItemContent {
width: 90%;
padding: 20px;
}
.whyChooseItem:last-child{
order: 2;
flex-direction: row;
width: 100%;
}
.whyChooseItem:first-child .whyChooseItemContent .whyChooseItemContentIcon{
order: 1;
}
.whyChooseItem:first-child .whyChooseItemContent .whyChooseItemContentText{
order: 2;
}
.whyChooseCenterItem img {
width: auto;
height: 25px;
}
.whyChooseItemContent{
flex-direction: column;
align-items: center;
}
.whyChooseItemContent::after{
content: unset;
}
.whyChooseItemContentText{
width: 100%;
text-align: center;
margin: 15px 0;
}
.whyChooseItemContentIcon{
margin-bottom: 10px;
}
.faq .nav-pills .nav-link{
font-size: 16px;
margin-left: 15px;
margin-bottom: 0;
padding-bottom: 0;
}
.faq .nav-pills .nav-link:last-child{
margin-left: 0;
}
.faq .nav.flex-column{
flex-direction: row !important;
white-space: nowrap;
flex-wrap: nowrap;
overflow-x: auto;
margin-bottom: 20px;
justify-content: center;
}
.faq .nav-pills .nav-link{
background-color: #f2f2f2;
padding: 5px 12px;
border-radius: 50px;
}
.faq .nav-pills .nav-link.active {
color: #fff;
background-color: var(--primary-color2);
color: #fff;
}
.faq .nav-pills .nav-link::after{
background: unset;
}
.faq .card .btn-link{
font-size: 16px;
}
.faq .card-body{
font-size: 16px;
line-height: 29px;
}
.sectionTitle{
margin-bottom: 20px;
}
.centerTitleSection p{
font-size: 16px;
}
.contactForm{
width: 100%;
}
.formBtn{
margin-top: 0;
}
.contactForm label{
font-size: 14px;
}
.contactForm .form-control{
height: 45px;
}
.contactForm .form-group{
margin-bottom: 25px;
}
.footer {
padding: 25px 0;
text-align: center;
}
.footer-logo{
height: 45px;
}
.footerItem p{
margin-bottom: 20px;
}
.socialLink{
justify-content: center;
}
.footerItem li a{
font-size: 14px;
}
.socialLink svg{
height: 18px;
}
.socialLink a{
width: 40px;
height: 40px;
margin-bottom: 0;
}
/*Product Detail*/
.cardInfoBannerWrapper{
flex-direction: column;
padding: 0 0px;
}
.cardInfoBannerItem{
width: 100%;
}
.detaiBannercardPrice{
width: 320px;
}
.detaiBanner{
padding-top: 100px;
padding-bottom: 50px;
}
.detaiBannerproductItemContent span, .detaiBannerproductItemContent h4{
font-size: 28px;
}
.detaiBannerproductItemContent p{
font-size: 16px;
}
.detaiBannercardPrice span{
font-size: 16px;
}
.detaiBannercardPrice{
font-size: 14px;
margin: auto;
margin-bottom: 20px;
}
.detaiBanner a{
width: 320px;
margin: auto;
text-align: center;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
}
.cardInfoBannerItem.cardInfoBannerDemoCard{
width: 100%;
}
.cardDemoIng img{
height: 200px;
}
.detailCardDemo .cardDemoIng img{
height: 45px;
}
.detaiBanner.height_zero_ani{
padding: 0;
}
#cardCustomize{
padding-top: 100px;
}
#cardCustomize.height_zero_ani{
padding-top: 0;
}
.cardCustomize .nav{
flex-wrap: nowrap;
justify-content: flex-start;
overflow: hidden;
overflow-x: auto;
}
.cardCustomize .nav-link{
min-width: 180px;
}
.liveDesignItem{
width: 100%;
padding: 10px 15px;
}
.cardPreview{
justify-content: center;
}
.digitNfcCard{
width: 300px;
height: 190px;
margin: auto;
margin-bottom: 20px;
}
.liveDesignItem .form-control{
margin-bottom: 20px;
}
.liveDesignItem .mb-5{
margin-bottom: 0 !important;
}
.colorWrap{
justify-content: center;
}
.liveDesignRightSide h5 {
margin-bottom: 15px;
text-align: center;
margin-top: 15px;
}
.custoDesignUpload .commentGroup textarea{
width: 320px;
}
.custoDesignUploadGroup label{
width: 300px;
}
.custoDesignUpload{
padding: 20px;
margin-bottom: 25px;
}
.colorWrap input{
width: 90px;
}
.picture{
width: 190px;
margin: auto;
}
/*Product Detail*/
/*Cart*/
.cartItemInfo, .cartListItem{
flex-direction: column;
}
.cardBasicInfo{
width: auto;
}
.cardBasicInfoGroup p{
font-size: 14px;
}
.cardBasicInfoGroup{
margin-bottom: 10px;
}
.cardPrice{
position: absolute;
top: 41px;
left: 0px;
font-size: 15px;
font-weight: bold;
}
.cartCartQty.cartListItemContent .prodQty{
padding-bottom: 0px;
padding-top: 0px;
}
.cartCartQty.cartListItemContent .prodQty input{
width: 70px;
height: 30px;
font-size: 15px;
}
.cartCartQty.cartListItemContent .prodQty .incDcrBtn{
width: 30px;
height: 30px;
}
.cartCartQty.cartListItemContent .prodQty .incDcrBtn svg{
height: 20px !important;
}
.cartListItemContent:last-child {
margin-left: 0;
position: absolute;
top: 75px;
left: 5px;
}
.cartItemRemove.cartListItemContent {
margin-left: 0;
position: absolute;
bottom: 15px;
left: 5px;
top: unset;
}
.showCustonDetail{
position: relative;
bottom: 0px;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
.btnGroup .appBtn:last-child{
margin-bottom: 0;
}
.otherSecBanner{
min-height: 190px;
padding-top: 50px;
}
.otherSecBanner h2{
font-size: 38px;
}
/*Cart*/
/*Billing*/
.mobileCode{
bottom: 35px;
}
.locationPopup {
padding-top: 75px;
}
.checkoutSecTitle{
font-size: 18px;
}
/*Billing*/
/*CheckOut*/
.checkoutList .cartListItemContent:last-child{
bottom: 25px !important;
left: 15px;
top: unset;
}
.checkoutList .cartCartQty.cartListItemContent .prodQty{
padding-bottom: 0;
}
.checkoutList .cartListItem{
padding-bottom: 25px;
flex-direction: column;
}
.checkoutList .cartItemInfo{
flex-direction: row;
}
.checkoutList .cardBasicInfo{
width: 385px;
}
.checkoutList .showCustonDetail {
white-space: nowrap;
position: absolute;
top: 25px;
left: 32px;
right: unset;
margin: auto;
text-align: center;
}
.checkoutList .cartListItemContent{
margin-left: 0;
}
/*CheckOut*/
/*Success Page*/
.orderSuccess svg{
width:80px;
height: 80px;
}
.orderSuccess h2{
font-size: 28px;
}
.orderSuccess h4{
font-size: 20px;
}
.orderSuccess p{
font-size: 14px;
}
.orderSuccess {
/*min-height: 100vh;*/
display: flex;
align-items: center;
}
.bannerContentText .formBtn{
margin: auto;
}
.orderSuccess p{
width: 100%;
}
.orderSuccessWrapper{
width: 100%;
padding: 20px 15px;
}
/*Success Page*/
.cardInfoBannerItem{
order: 2;
}
.cardInfoBannerItem.cardInfoBannerDemoCard{
order: 1;
margin-bottom: 40px;
}
.bannerContentText {
width: 100%;
padding-top: 50px;
}
}
@media(max-width:767px){
.bannerSection{
/* background-image: linear-gradient(178deg, hsl(198deg 85% 69%) 0%, hsl(146.9deg 70.73% 91.96%) 29%, hsl(0deg 0% 100%) 67%, hsl(0deg 0% 100%) 100%);*/
}
.grBg1{
background-color: transparent;
}
.grBg2{
width: 300px;
height: 350px;
right: 0;
left: 0;
}
.bannerSection, .bannerItem{
height: auto;
min-height: 500px;
width: 100%;
}
.bannerItem:last-child{
width: 100%;
min-height: auto;
background-color: #fff;
}
.bannerWrap{
flex-direction: column;
}
.bannerTitleTextText{
font-size: 28px;
}
.bannerItemImg{
height: 360px;
padding: 0;
}
.bannerContentText{
padding-right: 0;
text-align: center;
}
.bannerDescription{
font-size: 16px;
}
/*.bannerBg::after{
background:linear-gradient(181deg, rgb(34 115 153 / 72%) 62%, rgba(255, 255, 255, 1) 93%, rgba(255, 255, 255, 1) 71%, rgba(255, 255, 255, 1) 100%);
}*/
.bannerSmallText{
font-size: 14px;
}
.bannerBtn{
min-height: 45px;
padding: 5px 20px;
margin: auto;
}
.bannerSection, .aboutSection, .whyChooseClass, .productSection, .clientFeedback, .faq{
background-position: left;
}
.order2{
order: 1;
}
.order1{
order: 2;
}
.smallTitle{
font-size: 14px;
display: block;
}
.largeTitle{
font-size: 24px;
line-height: 37px;
}
.ptb-100{
padding-top: 50px;
padding-bottom: 50px;
}
.aboutContentCol{
padding-right: 15px;
}
.titleDescription{
font-size: 16px;
line-height: 29px;
text-align: justify;
}
.aboutContentCol {
text-align: center;
}
.aboutImgSection{
flex-direction: column;
}
.cardImgWrap .cardImg{
width: 330px;
height: 390px;
}
.cardImgWrap{
left: unset;
width: 330px;
margin: auto;
margin-bottom: 15px;
}
.aboutImgSection::after{
border: unset;
}
.aboutStat{
width: 100%;
}
.stat02{
width: 100%;
margin: 15px 0;
}
.iconBg{
display: none;
}
.stat02Graph h4{
font-size: 24px;
}
.centerTitleSection h2{
font-size: 28px;
}
.howItsWorkWrapper{
width: 100%;
height: 250px;
}
.videoLogo{
height: 16px;
}
.howItsWorkWrapper{
padding-bottom: 35px;
}
.play-button svg{
width: 30px;
height: 30px;
}
.play-button{
width: 50px;
height: 50px;
}
.centerTitleSection{
margin-bottom: 25px;
}
.sectionTitle h2{
width: 100%;
font-size: 28px;
text-align: center;
}
.sectionTitle h2 br{
display: none;
}
.sectionTitle p{
font-size: 16px;
}
.productItem{
flex-direction: column;
}
.procardImg, .productItemContent{
width: 100%;
margin-top: 20px;
}
.procardImg img{
height: auto;
width: auto;
height: 190px;
display: flex;
justify-content: center;
margin: auto;
}
.productItem{
/* background-image: url('../images/pattren-02.png');*/
background-size: cover;
background-repeat: no-repeat;
}
.productItemContent p{
text-align: justify;
font-size: 16px;
line-height: 27px;
}
.productItemContent span{
font-size: 18px;
}
.whyChooseWrper{
margin-top: 0;
flex-direction: column;
}
.whyChooseItem{
width: 100%;
}
.whyChooseCenter{
width: 330px;
height: 200px;
min-height: 150px;
width: 320px;
order: 1;
margin-bottom: 20px;
}
.whyChooseItem:first-child{
order: 2;
}
.whyChooseItem:last-child{
order: 2;
}
.whyChooseItem:first-child .whyChooseItemContent .whyChooseItemContentIcon{
order: 1;
}
.whyChooseItem:first-child .whyChooseItemContent .whyChooseItemContentText{
order: 2;
}
.whyChooseCenterItem img {
width: auto;
height: 25px;
}
.whyChooseItemContent{
flex-direction: column;
align-items: center;
}
.whyChooseItemContent::after{
content: unset;
}
.whyChooseItemContentText{
width: 100%;
text-align: center;
margin: 15px 0;
}
.whyChooseItemContentIcon{
margin-bottom: 10px;
}
.faq .nav-pills .nav-link{
font-size: 16px;
margin-left: 15px;
margin-bottom: 0;
padding-bottom: 0;
}
.faq .nav-pills .nav-link:last-child{
margin-left: 0;
}
.faq .nav.flex-column{
flex-direction: row !important;
white-space: nowrap;
flex-wrap: nowrap;
overflow-x: auto;
margin-bottom: 20px;
}
.faq .nav-pills .nav-link{
background-color: #1d719721;
padding: 5px 20px;
border-radius: 50px;
color: #000;
font-size: 14px;
}
.faq .nav-pills .nav-link.active {
color: #fff;
background-color: var(--primary-color2);
color: #fff;
}
.faq .nav-pills .nav-link::after{
background: unset;
}
.faq .card .btn-link{
font-size: 16px;
}
.faq .card-body{
font-size: 16px;
line-height: 29px;
}
.sectionTitle{
margin-bottom: 20px;
}
.centerTitleSection p{
font-size: 16px;
}
.contactForm{
width: 100%;
}
.formBtn{
margin-top: 0;
}
.contactForm label{
font-size: 14px;
}
.contactForm .form-control{
height: 45px;
}
.contactForm .form-group{
margin-bottom: 25px;
}
.footer {
padding: 25px 0;
text-align: center;
}
.footer-logo{
height: 30px;
}
.footerItem p{
margin-bottom: 20px;
}
.socialLink{
justify-content: center;
}
.footerItem li a{
font-size: 14px;
}
.socialLink svg{
height: 18px;
}
.socialLink a{
width: 40px;
height: 40px;
margin-bottom: 0;
}
/*Product Detail*/
.cardInfoBannerWrapper{
flex-direction: column;
padding: 0 0px;
}
.cardInfoBannerItem{
width: 100%;
}
.detaiBannercardPrice{
width: 320px;
margin: auto;
margin-bottom: 20px;
}
.detaiBanner{
padding-top: 100px;
padding-bottom: 50px;
}
.detaiBannerproductItemContent span, .detaiBannerproductItemContent h4{
font-size: 28px;
}
.detaiBannerproductItemContent p{
font-size: 16px;
}
.detaiBannercardPrice span{
font-size: 16px;
}
.detaiBannercardPrice{
font-size: 14px;
}
.detaiBanner a{
width: 320px;
margin: auto;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.cardInfoBannerItem.cardInfoBannerDemoCard{
width: 100%;
}
.cardDemoIng img{
height: 200px;
}
.detailCardDemo .cardDemoIng img{
height: 45px;
}
.detaiBanner.height_zero_ani{
padding: 0;
}
#cardCustomize{
padding-top: 100px;
}
#cardCustomize.height_zero_ani{
padding-top: 0;
}
.cardCustomize .nav{
flex-wrap: nowrap;
justify-content: flex-start;
overflow: hidden;
overflow-x: auto;
}
.cardCustomize .nav-link{
min-width: 180px;
}
.liveDesignItem{
width: 100%;
padding: 10px 15px;
}
.cardPreview{
flex-direction: column;
}
.digitNfcCard{
width: 300px;
height: 190px;
margin: auto;
margin-bottom: 20px;
}
.liveDesignItem .form-control{
margin-bottom: 30px;
}
.liveDesignItem .mb-5{
margin-bottom: 0 !important;
}
.colorWrap{
justify-content: center;
}
.liveDesignRightSide h5 {
margin-bottom: 15px;
text-align: center;
margin-top: 15px;
}
.addToCart{
flex-direction: column;
}
.addToCartBtn{
margin-right: 0;
margin-top: 20px;
}
.custoDesignUpload .commentGroup textarea{
width: 320px;
margin: auto;
}
.fileUpload{
flex-direction: column;
}
.custoDesignUploadGroup label{
width: 100%;
}
.custoDesignUploadGroup{
margin-bottom: 20px !important;
width: 320px;
}
.custoDesignUpload{
padding: 20px;
margin-bottom: 25px;
}
.picture{
width: 290px;
margin: auto;
}
/*Product Detail*/
/*Cart*/
.cartItemInfo, .cartListItem{
flex-direction: column;
padding-bottom: 0;
}
.cartListItemContent {
margin-left: 0;
}
.cardBasicInfo{
width: auto;
}
.cardBasicInfoGroup p{
font-size: 14px;
}
.cardBasicInfoGroup{
margin-bottom: 10px;
}
.cardPrice{
position: absolute;
top: 25px;
left: 15px;
font-size: 15px;
font-weight: bold;
}
.cartCartQty.cartListItemContent .prodQty{
padding-bottom: 0px;
padding-top: 0px;
}
.cartCartQty.cartListItemContent .prodQty input{
width: 70px;
height: 30px;
font-size: 15px;
}
.cartCartQty.cartListItemContent .prodQty .incDcrBtn{
width: 30px;
height: 30px;
}
.cartCartQty.cartListItemContent .prodQty .incDcrBtn svg{
height: 20px !important;
}
.cartListItemContent:last-child {
margin-left: 0;
position: absolute;
top: 55px;
left: 5px;
}
.cartItemRemove.cartListItemContent{
margin-left: 0;
position: absolute;
bottom: 15px;
left: 5px;
top: unset;
}
.showCustonDetail{
position: relative;
bottom: 5px;
left: 0;
right: 0;
margin: auto;
text-align: center;
}
.btnGroup{
flex-direction: column;
}
.btnGroup .appBtn{
margin-left: 0;
margin-bottom: 20px;
}
.btnGroup .appBtn:last-child{
margin-bottom: 0;
}
.otherSecBanner{
min-height: 190px;
padding-top: 50px;
}
.otherSecBanner h2{
font-size: 28px;
}
/*Cart*/
/*Billing*/
.mobileCode{
bottom: 34px;
}
.locationPopup {
padding-top: 75px;
}
.btnGroup{
margin-top: 25px;
}
.checkoutSecTitle{
font-size: 18px;
}
/*Billing*/
/*CheckOut*/
.checkoutList .cartListItemContent:last-child{
bottom: 25px !important;
left: 15px;
top: unset;
}
.checkoutList .cartCartQty.cartListItemContent .prodQty{
padding-bottom: 0;
}
.checkoutList .cartListItem{
padding-bottom: 25px;
}
/*CheckOut*/
/*Success Page*/
.orderSuccess svg{
width:80px;
height: 80px;
}
.orderSuccess h2{
font-size: 28px;
}
.orderSuccess h4{
font-size: 20px;
}
.orderSuccess p{
font-size: 14px;
}
.orderSuccess {
/*min-height: 100vh;*/
display: flex;
align-items: center;
}
.productItemContent a{
display: flex;
justify-content: center;
margin: auto;
}
.bannerContentText .formBtn{
margin: auto;
}
.orderSuccess p{
width: 100%;
}
.orderSuccessWrapper{
width: 100%;
padding: 20px 15px;
}
/*Success Page*/
.cardInfoBannerItem{
order: 2;
}
.cardInfoBannerItem.cardInfoBannerDemoCard{
order: 1;
margin-bottom: 40px;
}
.whyChooseClass::after{
/* background-image: url(../images/pattren-013.png);*/
background-size: 100% 100%;
}
.productSection .productItem{
/* background-image: url(../images/pattren-013.png);*/
background-size: 100% 60%;
background-position: top;
}
.productSection .productItem:hover{
background-image: url('../../images/site/pattren-013.png');
}
.bannerContentText {
width: 100%;
padding-top: 50px;
}
.aboutSectionImg{
height: auto;
width: 300px;
margin: auto;
}
}
.select2-selection{
border-radius: 12px !important;
height: 55px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
line-height: 53px;
color: var(--primary-color1);
font-size: 16px;
padding: 0 15px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{
color: #868686;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{
top: 0;
bottom: 0;
left: 10px;
margin: auto;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
color: var(--primary-color2);
}
.select2-selection__clear{
display: none;
}
.select2-container{
width: 100% !important;
}
.select2-container--default .select2-results__option[aria-selected=true]{
background-color: var(--primary-color1);
color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
background-color: var(--primary-color2);
}
.select2-container--open .select2-dropdown--below{
padding: 10px;
border: unset;
border-bottom-left-radius: 15px !important;
border-bottom-right-radius: 15px !important;
box-shadow: 0 6px 30px rgb(0 0 0 / 30%);
}
@media(min-width:400px){
.cardCustomize .nav{
justify-content: center;
}
}
.faq_fb_warp{
position: relative;
}
.faq_fb_warp::after{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 0%;
/* background-image: url('../images/pattren-03.png'); */
content: '';
/* background-size: 10%;*/
background-repeat: no-repeat;
/* opacity: 0.2; */
/* background-position: 100% 100%;*/
z-index: 0;
transition: 0.5s all linear;
/* background-image: linear-gradient(0deg, hsl(198deg 85% 69%) 0%, hsl(146.9deg 70.73% 91.96%) 33%, hsl(0deg 0% 100% / 0%) 67%, hsl(0deg 0% 100% / 0%) 100%);*/
}
.faqActive.faq_fb_warp::after{
height: 50%;
transition: 0.5s all linear;
transition-delay: 0.5;
}
section{
position: relative;
z-index: 1;
}
marquee {
/* position: absolute;*/
z-index: 999;
width: 100%;
/* height: 500px; */
top: -53px;
}
marquee span {
display: inline-block;
font-size: 150px;
top: -18px;
opacity: 0.1;
/* position: absolute; */
font-weight: bolder;
/* margin-left: 170px;*/
}
marquee span img{
height: 150px;
padding: 0 85px;
position: relative;
top: -10px;
}
@media(max-width:1199px){
marquee span {
font-size: 95px;
}
marquee span img{
height: 95px;
padding: 0 47px;
}
}
@media(max-width:991px){
.otherSecBanner{
margin-top: 0;
}
}
/*custom new 05-11-2024 */
#togglePassword i {
font-size: 13px;
color: var(--primary-color2);
}
#togglePassword {
position: relative;
z-index: 2;
cursor: pointer;
padding: 12px;
padding-left: 16px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: unset;
outline: none;
background: #fff;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
box-shadow: 0px 10px 30px rgb(0 0 0 / 9%);
}
/*login Section Start*/
#loginSec {
background-image: url(../../images/site/body-bg.png);
background-position: center;
width: 100%;
height: 100vh;
position: relative;
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.iconBg-new{
background-image: url(../../mages/site/line-logo.png);
background-size: 115px;
background-position: 98% 96px;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
z-index: -1;
opacity: 0.2;
}
.centerTitleSection .contTitle {
font-size: 40px;
display: block;
text-align: start;
}
.password-sublink {
position: absolute;
left: 28px;
bottom: -39px;
font-size: 16px;
font-weight: 500;
color: #1d7197;
}
.centerTitleSection .contsubtxt {
display: block;
margin-top: 16px;
text-align: start;
font-size: 18px;
}
.login-form-sec {
width: 100%;
height: 100%;
padding: 45px 15px 45px 40px;
}
.loginImg-sec {
width: 100%;
height: 100%;
overflow: hidden;
}
.loginImg-sec img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right;
}
#loginSec .contactForm {
background: #fff;
border-radius: 15px;
overflow: hidden;
box-shadow: rgb(136 165 191 / 38%) 0px 0px 9px 0px, rgb(255 255 255 / 11%) -6px -2px 16px 3px;
}
.martop-55 {
margin-top: 55px;
}
#togglePassword svg {
width: 17px;
height: 17px;
color: var(--primary-color2);
}
.forgotform-sec.centerTitleSection .contTitle {
font-size: 30px;
}
.forPassSec .formBtn {
width: 300px;
}
.bcklogin-link {
font-size: 16px;
display: inline-block;
font-weight: 500;
}
.bcklogin-link-sec {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin-top: 28px;
}
/*login Section End*/
/*custom new 05-11-2024 */
/****30-11-2024 start****/
/*my order page start*/
.odrtab-title {
color: var(--primary-color1);
font-size: 21px;
margin-bottom: 25px;
text-align: right;
margin-top: 20px;
}
.orduser-info {
display: flex;
align-items: center;
}
.orduser-info .orduser-img img {
width: 36px;
height: 36px;
object-fit: contain;
overflow: hidden;
border-radius: 50px;
}
.orduser-ID {
margin-right: 8px;
text-decoration: underline;
}
.odr-sts-badge {
display: flex;
align-items: center;
justify-content: center;
background: #fcbf10;
font-weight: 500;
color: #fff;
width: 95px;
height: 30px;
border-radius: 6px;
font-size: 13px;
margin: auto;
}
.pay-sts-badge {
display: flex;
align-items: center;
justify-content: center;
background: #45ca88;
font-weight: 500;
color: #fff;
min-width: 65px;
width: 84px;
height: 30px;
border-radius: 6px;
font-size: 13px;
margin: auto;
}
.pending-color {
background:#fcbf10;
}
.paid-color {
background:#45ca88;
}
.placed-color {
background:#45ca88;
}
.failed-color {
background:#a80101;
}
.deliverd-color{
background: #41c883;
}
.cancel-color{
background: #f56646;
}
.confirm-color {
background: #41548e;
}
.cancel-color {
background: #d45d18;
}
a.removeItem {
color: rgb(173, 3, 3);
}
.view-iconsec {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
margin: auto;
background: var(--primary-color2);
color: #fff;
}
.view-iconsec svg {
width: 20px;
height: 20px;
}
.table-striped tbody tr:nth-of-type(odd) {
background: #2b769c12;
}
.srchform-sec {
width: 72%;
display: flex;
align-items: center;
margin-bottom: 25px;
}
.srchform-sec .srcfrm-group {
width: 55%;
margin-left: 25px;
margin-bottom: 12px;
}
.odrsearch-btn {
display: flex;
align-items: center;
justify-content: center;
width: 120px;
height: 38px;
background: var(--primary-color2);
border-radius: 6px;
border: unset;
outline: unset;
color: #fff;
font-weight: 500;
}
.usrcard-sec {
width: 100%;
background: #fff;
border-radius: 20px;
padding: 30px;
box-shadow: rgb(67 71 85 / 24%) 0px 0px 0.25em, rgb(90 125 188 / 3%) 0px 0.25em 1em;
}
.userProfileimg-sec{
width: 90px;
height: 90px;
overflow: hidden;
margin: auto;
}
.userProfileimg-sec img {
width: 100%;
height: 100%;
object-fit: contain;
}
.crd-usrname {
font-size: 19px;
font-weight: 500;
margin-top: 10px;
margin-bottom: 0;
text-align: center;
color: var(--secondary-color1);
}
.crd-email{
display: block;
text-align: center;
font-size: 15px;
margin-top: 2px;
color: #878787;
}
.ordlist-tabsec .table thead th {
font-size: 15px;
}
.usrprof-menu-list {
width: 100%;
margin-top: 50px;
}
.usrprof-menu-link {
display: flex;
align-items: center;
color: var(--primary-color1);
margin-bottom: 21px;
}
.usrprof-menu-link.linkactive {
color: var(--primary-color2);
}
.usrprof-menu-link .usrprof-menulk-icon {
width: 23px;
height: 23px;
}
.usrprof-menu-link .usrprof-menu-txt {
font-size: 16px;
font-weight: 500;
margin-right: 8px;
display: inline-block;
}
.usrprof-menu-link:hover{
color: var(--primary-color2);
}
.crduse-infosec {
width: 100%;
position: relative;
}
.crduse-infosec:before{
content: '';
position: absolute;
right: 0;
left: 0;
width: 103%;
height: 1px;
background: #e5dbdbb5;
bottom: -20px;
}
.tabcont2 {
padding-right: 30px;
}
.form-control:focus{
box-shadow: none;
}
/*my order page end*/
/*order detail page start*/
.odr-paymetsec{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.odrdetail-box {
width: 100%;
background: #fff;
border-radius: 12px;
padding: 25px;
box-shadow: 0 5px 10px rgba(51, 66, 87, 0.05);
}
.odref-id{
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
}
.odrdetail-sts {
display: flex;
align-items: center;
gap: 2rem;
justify-content: space-between;
margin-bottom: 10px;
}
.odrsts-badge{
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
min-width: 86px;
height: 30px;
border-radius: 5px;
margin-right: 10px;
font-weight: 500;
font-size: 15px;
}
.odrdetail-sts .pysts-txt {
font-weight: 500;
}
.oderDetail-tablesec {
margin-top: 20px;
}
.orderDetail-item{
display: flex;
justify-content: space-between;
border-radius: 8px;
margin-bottom: 10px;
padding: 20px 15px;
padding-bottom: 0;
position: relative;
cursor: pointer;
padding-bottom: 20px;
}
.orderdetail-box {
border-radius: 8px;
margin-bottom: 10px;
padding: 20px 15px;
padding-bottom: 0;
position: relative;
cursor: pointer;
padding-bottom: 20px;
}
.cartListItem1{
display: flex;
justify-content: space-between;
}
.cartItemInfo1 {
display: flex;
}
.cartItemInfo1 img {
width: 100%;
object-fit: contain;
width: 80px;
height: 80px;
margin-left: 20px;
}
.cardBasicInfo1 {
display: flex;
flex-wrap: wrap;
/*width: 530px;*/
}
.showorderDetail {
position: absolute;
bottom: 20px;
font-size: 14px;
color: var(--primary-color2);
font-weight: bold;
left: 35px;
}
.showorderDetail svg {
height: 20px;
position: absolute;
transition: 0.2s all linear;
top: 2px;
}
.cardBasicInfo-dwn {
width: 100%;
display: none;
flex-wrap: wrap;
margin-top: 15px;
padding-right: 12px;
}
.showorderDetail.open svg {
transform: rotate(90deg); /* Rotate SVG on open */
}
.orderdetail-box:nth-child(odd) {
border: 1px solid #2b769c63;
}
.orderdetail-box:nth-child(even) {
background-color: #2b769c12;
}
.crduploadfile-sec{
display: flex;
align-items:center ;
}
.crduploadfile-sec .crdetail-svg {
width: 22px;
height: 22px;
margin-left:6px;
}
.btnGroup.btngroup-2 {
justify-content: end;
width: 100%;
margin-bottom: 35px;
margin-top: 0;
}
.ptb-50 {
padding: 50px 0;
}
.rstpwsbox-sec {
width: 100%;
padding: 12px 15px;
border-radius: 5px;
background: #efefef;
margin-bottom: 25px;
font-weight: 500;
font-size: 20px;
}
.form-group label.error{
position: absolute;
right: 25px;
bottom: 0px;
font-size: 15px;
color: red;
}
#mobile-error{
position: absolute;
right: 25px;
bottom: 10px;
font-size: 15px;
color: red;
}
.input-group label.error {
position: absolute;
right: 0px;
bottom: -35px;
font-size: 15px;
color: red;
}
#mobile_number {
flex-grow: 1;
width: 78%;
}
.orderdetail-box .cartListItem1 {
}
/*order detail page end*/
/****30-11-2024 end****/
@media(max-width:575px){
.digitNfcCard {
width: 100%;
}
.picture {
width: 100%;
}
}
@media(max-width:767px){
.tabcont2{
padding-top: 25px;
padding-right: 0;
}
.srchform-sec {
width: 100%;
display: flex;
align-items: center;
margin-bottom: 25px;
flex-direction: column;
}
.srchform-sec .srcfrm-group {
width: 100%;
margin-left: 0;
margin-bottom: 25px;
}
.orderdetail-box .cartItemInfo1 img {
width: 57px;
height: 57px;
}
.orderdetail-box .cardPrice {
font-size: 14px;
}
.orderdetail-box .cartListItemContent:last-child {
margin-left: 0;
position: absolute;
top: unset;
left: unset;
right: 90px;
bottom: 10px;
}
.orderdetail-box .showorderDetail {
position: absolute;
bottom: 10px;
font-size: 14px;
color: var(--primary-color2);
font-weight: bold;
left: 25px;
}
.orderdetail-box {
padding: 30px 15px;
}
.odr-paymetsec{
flex-direction: column;
}
.odref-detail-sec {
margin-bottom: 15px;
}
#mobile_number {
width: 60%;
}
.contactForm .input-group {
margin-bottom: 25px;
}
#mobile-error{
bottom: 1px;
font-size: 14px;
}
.form-group label.error{
font-size: 14px;
}
.bannerTitleTextText {
margin-top: 20px;
}
.login-form-sec {
padding: 10px;
}
.formBtn {
height: 50px;
}
.formBtn::after{
width: 40px;
height: 40px;
}
}
@media(min-width:768px) and (max-width:991px){
.tabcont2{
padding-top: 25px;
padding-right: 0;
}
.srchform-sec {
width: 85%;
}
.orderdetail-box .cartItemInfo1 img {
width: 68px;
height: 68px;
}
.orderdetail-box .cardPrice {
font-size: 14px;
}
.orderdetail-box .cartListItemContent:last-child {
margin-left: 0;
position: absolute;
top: unset;
left: unset;
right: 90px;
bottom: 10px;
}
.orderdetail-box .showorderDetail {
position: absolute;
bottom: 10px;
font-size: 14px;
color: var(--primary-color2);
font-weight: bold;
left: 25px;
}
.orderdetail-box {
padding: 30px 15px;
}
.odr-paymetsec {
margin-top: 30px;
}
}
.posi-group label.error {
position: absolute;
right: 0;
bottom: -30px;
font-size: 15px;
color: red;
}
.name_error label.error {
position: absolute;
right: 0;
bottom: -30px;
font-size: 15px;
color: red;
}
.footerItem {
text-align: right;
}
.input-group:not(.has-validation)>.form-control:not(:last-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.input-group>.form-control+.form-control {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
label[for="customDesign"] {
width: auto;
display: inline-block;
font-weight: 400;
top: unset;
bottom: -4px;
height: auto;
}