html,body{
overflow-x: hidden;
}
body {
scroll-behavior: smooth;
scroll-behavior: smooth 1s;
}
@font-face {
font-family: lessti;
src: url(../fonts/lessti/Lessti.ttf);
}
@font-face {
font-family: gambetta;
src: url(../fonts/Gambetta/Fonts/WEB/fonts/Gambetta-Regular.ttf);
}
@font-face {
font-family: Gambetta;
src: url(../fonts/Gambetta/Fonts/WEB/fonts/Gambetta-Regular.ttf);
}
@font-face {
font-family: Satoshi;
src: url(../fonts/Satoshi/Fonts/OTF/Satoshi-Regular.otf);
}
:root{
--main: #707F1D;
--bg: #F9FFD7;
--dark: #15110F;
--bright: #DFFD39;
--sec_bright:#FAFF70;
--hash:#ccc;
--dark_bg:#040303;
--new_dark:#0b0908;
--light:#fdfdf0;
--orange:#D44E03;
--pen:#2D4630;
}
*{
font-family: lessti;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm{
background: var(--main) !important;
}
main{
/* border:1px solid red; */
width: 100%;
min-height: 100vh;
min-height: 100svh;
padding-top: 92px;
position: relative;
background: var(--bg);
}
/* .preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--black);
z-index: 9999;
opacity: 1;
transition: opacity .5s ease-in-out;
}
.preloader.fade-out{
opacity: 0;
visibility:hidden;
}
.preloader p{
color: var(--white);
font-size: 48px;
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce{
0%{
transform: scale(1);
}50%{
transform: scale(1.2);
}100%{
transform: scale(1);
}
} */
#preloader{
position: fixed;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
z-index: 100;
background-color: #0f0f0f;
flex-direction: column;
overflow: hidden;
}
#preloader p{
color: var(--white);
font-size: 48px;
margin-bottom: 16px;
animation: bounced 1s ease-in-out infinite;
}
@keyframes bounced{
0%{
transform: scale(1);
}50%{
transform: scale(1.2);
}100%{
transform: scale(1);
}
}
#percent{
color: white;
}
#bar{
width: 60%;
margin-top: 20px;
}
#barconfrm{
width: 1%;
padding: 1px 0px;
background-color: white;
}
nav{
/* border: 1px solid green; */
width: 100%;
background: rgba(255, 255, 255, 0.20);
backdrop-filter: blur(48px);
position: fixed;
top:0;
left:0;
z-index: 5;
height: 92px;
}
.content{
/* border: 1px solid red; */
width: 1392px;
padding: 0 56px;
}
.nav_content{
/* border: 1px solid red ; */
/* height: 92px; */
height: auto;
}
p{
color: var(--black-base, #15110F);
font-family: Lessti;
font-style: normal;
font-weight: 400;
line-height: 100%; /* 32px */
}
.nav_content p{
letter-spacing: -1.28px;
font-size: 32px;
}
.web_logo{
transform: scale(1.3);
margin-left: 12px;
/* border: 1px solid red; */
}
.btn{
padding: 10px 20px;
transition: .3s ease-in-out;
}
.btn:hover{
background: var(--white) !important;
border: 1px solid var(--black);
color: var(--black);
}
.btn_btn:hover{
background: var(--black) !important;
border: 2px solid var(--black);
/* border: none; */
color: var(--white);
}
.nav_content button{
border: none;
border-radius: 40px;
background: var(--black-80, #0B0908);
color:var(--bright);
}
header,footer,.container{
/* border: 1px solid blue; */
width: 100%;
}
.header_content{
/* border: 1px solid green; */
min-height: 708px;
/* min-height: 90vh; */
position: relative;
}
.header_content svg{
position: absolute;
top:64px;
left:51.5%;
width: 59px;
height: 59px;
/* border: 1px solid green; */
/* z-index: 1; */
}
.head_left{
width: 47%;
/* border: 1px solid blue; */
padding-top: 160px;
}
.main_p{
font-size: 80px;
letter-spacing: -1.6px;
color: var(--electric-lemon-80, #707F1D);
}
.main_btn{
margin-top:24px;
margin-bottom:84px;
border-radius: 40px;
border: 2px solid var(--electric-lemon-100, #2D330B);
background: transparent;
color:var(--dark);
font-family: gambetta;
}
.scroll_btn_bx{
/* border: 1px solid green; */
width: 100%;
}
.scroll_btn{
font-family: Gambetta;
height: 64px;
background: transparent;
border: none;
}
.scroll_btn_bx:hover .scroll_btn img{
transform: translateY(15px) !important;
}
.scroll_btn img{
/* width: 64px;
height: 64px; */
/* border: 1px solid red; */
margin-right: 12px;
transition: .3s ease-in-out;
}
.scroll_btn p{
font-family: gambetta;
}
.head_right{
margin-top: 88px;
padding-top: 0;
position: relative;
height: 472px;
}
.img_wrap{
/* border: 1px solid green; */
width: 49%;
/* height: 360px; */
position: absolute;
border-radius: 16px;
z-index: 1;
transition: .3s ease-in-out;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* .flashing {
animation: flash 1s infinite alternate;
}
@keyframes flash {
0% {
opacity: 1;
}
100% {
opacity: 0.2;
}
} */
.img_wrap:nth-child(1){
top:0;
left:0;
height: 40%;
/* background: url(../images/4.png) no-repeat center/cover; */
}
.img_wrap:nth-child(1):hover{
background: url(../images/22.jpg) no-repeat center center/cover !important;
}
.img_wrap:nth-child(2){
top:0;
right:0;
height: 58%;
/* background: url(../images/2.png) no-repeat center/cover; */
}
.img_wrap:nth-child(2):hover{
background: url(../images/11.jpg) no-repeat center center/cover !important;
}
.img_wrap:nth-child(3){
bottom:0;
left:0;
height: 58%;
/* background: url(../images/8.jpg) no-repeat center/cover; */
}
.img_wrap:nth-child(3):hover{
background: url(../images/ig/23.jpg) no-repeat center center/cover !important;
}
.img_wrap:nth-child(4){
bottom:0;
right:0;
height: 40%;
/* background: url(../images/12.jpg) no-repeat center/cover; */
}
.img_wrap:nth-child(4):hover{
background: url(../images/10.jpg) no-repeat center center/cover !important;
}
.first_container_content{
/* border: 1px solid green; */
padding-top: 224px;
min-height: 800px;
}
.first_container_content p{
color: var(--black-base, #15110F);
text-align: center;
margin-bottom: 80px;
}
.first_container_content span{
color: var(--electric-lemon-80, #707F1D);
}
.first_container_content .scroll_btn p{
margin-bottom: 0;
}
/* .slant_div{
border: 1px solid green;
width: 100%;
margin-top: 52px;
height: 200px;
position: relative;
} */
.menu {
margin-top: 110px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding: 12px;
/* overflow: hidden; */
/* padding: 10vh 0 25vh; */
--marquee-width: 100vw;
--offset: 20vw;
--move-initial: calc(-25% + var(--offset));
--move-final: calc(-50% + var(--offset));
--item-font-size: 10vw;
counter-reset: menu;
border-top: 1px solid var(--black-20, #B1B0AF);
border-bottom: 1px solid var(--black-20, #B1B0AF);
position: relative;
/* width: 100vw; */
height: 70px;
transform: rotate(-6deg);
/* align-items: center;
display: flex; */
}
/* Make sure 3 items are visible in the viewport by setting suitable font size. */
.marquee {
position: absolute;
top: 0;
left: 0;
width: 100%;
/* border: 1px solid blue; */
/* width: var(--marquee-width); */
overflow: hidden;
pointer-events: none;
mix-blend-mode: color-burn;
/* transform: rotate(-6deg); */
}
.marquee__inner {
width: fit-content;
display: flex;
position: relative;
transform: translate3d(var(--move-initial), 0, 0);
animation: marquee 15s linear infinite;
animation-play-state: paused;
opacity: 0;
transition: opacity 0.1s;
}
.marquee .marquee__inner {
animation-play-state: running;
opacity: 1;
transition-duration: 0.4s;
}
.marquee span {
text-align: center;
white-space: nowrap;
font-size: 48px;
/* padding: 0 1vw; */
padding:0 24px;
font-weight: 400;
line-height: normal;
font-style: italic;
/* border: 1px solid green; */
color: var(--dark);
display: flex;
align-items: center;
}
.marquee svg{
margin-right: 24px;
}
@keyframes marquee {
0% {
transform: translate3d(var(--move-initial), 0, 0);
}
100% {
transform: translate3d(var(--move-final), 0, 0);
}
}
.amabride{
transition: .3s ease-in-out;
}
.second_container_content{
/* border: 1px solid red; */
min-height: 800px;
padding-top: 135px;
}
.second_container_content p{
color: var(--electric-lemon-80, #707F1D);
margin-bottom: 14px;
text-align: center;
}
.d_model{
/* border: 1px solid green; */
/* width: 90vw; */
/* width: 100%; */
min-height: 600px;
position: relative;
overflow: hidden;
}
.d_model_overlay{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2);
z-index: 1;
}
.newly_p{
/* border: 1px solid green; */
/* background: var(--bg); */
width: 100%;
position: absolute;
top:0;
color: var(--electric-lemon-80, #707F1D);
/* left:0; */
z-index: 2;
transition: .3s ease-in-out;
/* opacity :0; */
/* transform: translateY(-15px); */
font-size: 52px;
font-family: Lessti;
font-style: normal;
font-weight: 400;
line-height: 100%;
margin-top: 13px;
}
.d_model_img{
/* border: 1px solid green; */
width: 120px;
height: 105px;
position: absolute;
border-radius: 15px;
transition: .5s ease-in-out;
opacity: .7;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.d_model_img_one{
top: 11%;
left: 24px;
/* background: url(../images/ig/11.jpg) no-repeat center center/cover; */
}
.d_model_img_two{
top: 26%;
left: 24px;
/* background: url(../images/ig/12.jpg) no-repeat center center/cover; */
}
.d_model_img_three{
top: 40.5%;
left: 24px;
/* background: url(../images/ig/13.jpg) no-repeat center center/cover; */
}
.d_model_img_four{
top: 55%;
left: 24px;
/* background: url(../images/ig/14.jpg) no-repeat center center/cover; */
}
.d_model_img_five{
top: 69.5%;
left: 24px;
/* background: url(../images/ig/15.jpg) no-repeat center center/cover; */
}
.d_model_img_six{
top: 11%;
right: 24px;
/* background: url(../images/ig/16.jpg) no-repeat center center/cover; */
}
.d_model_img_seven{
top: 26%;
right: 24px;
/* background: url(../images/ig/17.jpg) no-repeat center center/cover; */
}
.d_model_img_eight{
top: 40.5%;
right: 24px;
/* background: url(../images/ig/18.jpg) no-repeat center center/cover; */
}
.d_model_img_nine{
top: 55%;
right: 24px;
/* background: url(../images/ig/19.jpg) no-repeat center center/cover; */
}
.d_model_img_ten{
top: 69.5%;
right: 24px;
/* background: url(../images/ig/20.jpg) no-repeat center center/cover; */
}
.third_container{
background: var(--black-100, #040303);
}
.third_container_content{
/* border: 1px solid blue; */
min-height: auto;
padding-top:164px ;
padding-bottom:164px ;
}
.third_container_content p{
color: var(--white);
/* margin-top: 164px; */
margin-bottom: 34px;
/* border: 1px solid blue; */
width: 80%;
}
.third_container_content span{
color: var(--bright);
}
.controlled_div{
/* border:1px solid red; */
width: 100%;
}
.controlled_div_top{
/* border:1px solid green; */
width: 100%;
height: 56px;
position: relative;
padding-right: 184px;
margin-bottom: 82px;
}
.scrolling_btns{
/* border: 1px solid yellow; */
width: 148px;
height: 56px;
position: absolute;
top:0;
right:0;
}
.img_cover{
border: 1px solid var(--black-20, #B1B0AF);
width: 56px;
height: 56px;
border-radius: 50%;
cursor: pointer;
}
.scrolling_btns img{
/* border: 1px solid green; */
width: 24px;
height: 24px;
/* color: 1px solid var(--black-20, #B1B0AF); */
}
.scrolling_div{
/* border:1px solid green; */
background: #D0CFCF;
border-radius: 3px;
width: 100%;
height: 4px;
overflow: hidden;
}
.scroller{
/* border:1px solid red; */
background: var(--bright);
width: 175px;
height: 100%;
border-radius: 3px;
transition: transform 0.3s ease;
}
.scrolled_div{
/* border:1px solid green; */
width: 100%;
overflow: hidden;
}
.adjust{
/* border:1px solid red; */
width: 100%;
height: 352px;
overflow-x: auto;
}
.adjust::-webkit-scrollbar {
display: none;
}
.img_card{
/* background: url(../images/eleven.jpg) no-repeat center center/cover; */
width: 20%;
height: 100%;
margin-right: 16px;
flex: 0 0 352px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.img_card:nth-child(2){
/* background: url(../images/16.jpg) no-repeat center center/cover; */
}
.img_card:nth-child(3){
/* background: url(../images/17.jpg) no-repeat center center/cover; */
}
.img_card:nth-child(4){
/* background: url(../images/18.jpg) no-repeat center center/cover; */
}
.img_card:nth-child(5){
/* background: url(../images/19.jpg) no-repeat center center/cover; */
}
.img_card:nth-child(6){
/* background: url(../images/20.jpg) no-repeat center center/cover; */
}
.img_card:nth-child(7){
/* background: url(../images/21.jpg) no-repeat center center/cover; */
}
.img_card:nth-child(8){
/* background: url(../images/22.jpg) no-repeat center center/cover; */
}
.img_card:nth-child(9){
/* background: url(../images/23.jpg) no-repeat center center/cover; */
}
.img_card:nth-child(10){
/* background: url(../images/24.jpg) no-repeat center center/cover; */
}
.fourth_container_content{
/* border: 1px solid green; */
min-height: 800px;
padding-top:240px ;
/* padding-top:148px ; */
}
.svg_twin{
/* border: 1px solid green; */
width: 100%;
position: relative;
height: 48px;
}
.svg_twin svg:nth-child(1){
position: absolute;
top:0;
left:0;
}
.svg_twin svg:nth-child(2){
position: absolute;
top:0;
right:0;
}
.svg_twin_below{
/* border: 1px solid green; */
margin-top: 48px;
margin-bottom: 138px;
text-align: center;
}
.svg_twin_below_span{
color:var(--main);
}
.left_img{
margin-left: 12px;
}
footer{
background: var(--black-100, #040303);
padding-top: 197px;
padding-bottom: 197px;
}
.foot_p{
/* border: 1px solid green; */
width: 49%;
font-size: 76px;
color:var(--white);
padding-top: 134px;
}
.foot_span{
color: var(--bright);
}
.foot_right{
/* border: 1px solid green; */
width: 49%;
padding: 0 24px;
}
.foot_right p{
color: var(--white);
margin-bottom: 24px;
line-height: 28px;
font-family: Gambetta;
}
.footer_input{
margin-bottom: 16px;
border-radius: 8px;
border: 1px solid var(--black-40, #63605F);
color: var(--black-20, #B1B0AF);
font-family: Gambetta;
font-size: 16px;
height: 64px;
background: transparent;
padding: 8px;
}
.footer_btn{
border: none;
background: var(--bright);
color: var(--black-base, #15110F);
font-family: Gambetta;
border-radius: 16px;
}
.footer_btn:hover{
border: none;
}
.reveal{
position: relative;
transform: translateY(150px);
opacity: 0;
transition: all 2s ease;
}
.reveal.active{
transform: translateY(0px);
opacity: 1;
}
.reveal2{
position: relative;
transform: translateX(150px);
opacity: 0;
transition: all 2s ease;
}
.reveal2.active{
transform: translateX(0px);
opacity: 1;
}
.reveal3{
position: relative;
transform: scale(0);
opacity: 0;
transition: all 2s ease;
}
.reveal3.active{
transform: scale(1);
opacity: 1;
}
.reveal4{
position: relative;
transform: translateX(-150px);
opacity: 0;
transition: all 2s ease;
}
.reveal4.active{
transform: translateX(0px);
opacity: 1;
}
.main_span{
display: none;
}
.swiping_right{
opacity: 0;
transform: translateX(-250px);
}
.swiping_left_two{
opacity: 0;
transform: translateX(250px);
}
.scaling{
transform: scale(0);
}
/* .glow-div {
filter: blur(2px);
transition:filter .5s ease-in-out;
}
.glow-div.in-view {
filter: blur(0px);
} */
/* .demo-lazy {
background: var(--hash);
}
.demo-lazy-between {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.demo-lazy.loaded {
background-color: transparent;
} */
@media (max-width:1440px){
.d_model{
/* width: 90vw; */
}
.newly_p{
top:15px ;
}
}
@media (max-width:1024px){
.head_left{
width: 49%;
}
/* .d_model_img{
width: 150px;
height: 130px;
} */
}
@media (max-width:997px){
.header_content{
flex-direction: column;
padding-bottom: 130px;
}
.displace_one{
/* border: 1px solid red; */
position: absolute;
bottom: 32px;
left: 56px;
}
.head_left{
width: 100%;
/* height: auto; */
padding-top: 52px;
}
.main_btn{
margin-bottom: 0;
}
.header_content svg{
display: none;
}
/* .second_move_one{
display: none;
}
.move_one{
display: none;
} */
}
@media (max-width:768px){
.d_model_img{
display: none;
}
.main_p{
/* text-align: center; */
font-size: 60px;
}
.head_right{
margin-top: 34px;
}
.foot_p{
font-size: 45px;
}
}
@media (max-width:749px){
.fourth_container_content{
padding-bottom: 56px;
}
}
@media (max-width:624px){
#preloader p{
font-size: 28px;
}
/* .newly_p{
font-size: 24px;
} */
/* .d_model_img{
width: 100px;
height: 90px;
} */
.second_container_content{
padding-left: 0 !important;
padding-right: 0 !important;
/* border: 1px solid green; */
}
/* .d_model{
width: 100vw;
} */
.main_p{
text-align: center;
font-size: 48px;
}
.head_left:nth-child(1){
/* border: 1px solid red; */
height: 252px;
display: flex;
flex-direction: column;
align-items: center;
}
.displace_one{
left: 16px;
}
.third_container_content p{
width: 100%;
}
.content{
padding-left: 16px;
padding-right: 16px;
}
.move_one{
margin-top: 200px;
display: flex;
justify-content: center;
}
.scroll_btn p{
font-size: 20px;
}
.first_container_content{
padding-top: 72px;
/* border: 1px solid red; */
min-height: auto;
padding-bottom: 16px;
/* background: var(--white); */
}
.menu{
/* transform: rotate(0deg); */
/* margin-top: 0; */
height: 96px;
}
.marquee span{
font-size: 20px;
padding: 0 16px;
}
.header_content svg{
width: 32px;
height: 32px;
}
.marquee__inner{
margin-top: 24px;
/* margin-bottom: 32px; */
}
.third_container_content p{
font-size: 32px;
margin-bottom: 32px;
}
.controlled_div_top{
margin-bottom: 32px;
}
.adjust{
height: 160px;
}
.img_card{
flex: 0 0 162px;
}
.third_container_content{
padding-top: 56px;
padding-bottom: 56px;
}
.svg_twin_below{
font-size: 32px;
}
.footer_content{
flex-direction: column;
}
.foot_p{
width: 100%;
/* text-align: center; */
padding-top: 0;
}
.foot_right{
width: 100%;
padding: 0;
}
.controlled_div_top{
padding-right: 114px;
}
.scrolling_btns{
width: 98px;
height: 40px;
margin-top: 6px;
}
.img_cover{
width: 40px;
height: 40px;
}
.scrolling_btns img{
width: 12px;
height: 12px;
}
footer{
padding-top: 100px;
padding-bottom: 56px;
}
.fourth_container_content{
min-height: auto;
padding-top: 78px;
padding-bottom: 56px;
}
.second_container_content p,.first_container_content .pop{
font-size: 48px;
}
.svg_twin_below {
margin-bottom: 48px;
}
.main_btn{
width: 100%;
}
}
@media (max-width:425px){
/* .main_btn{
width: 100%;
} */
/* .d_model_img_two,.d_model_img_three,.d_model_img_four,.d_model_img_five,.d_model_img_seven,.d_model_img_eight,.d_model_img_nine,.d_model_img_ten{
display: none;
} */
}
@media (max-width:360px){
.head_left:nth-child(1){
/* border: 1px solid red; */
height: 278px;
}
}
@media (min-width:1024px){
.d_model_img_two,.d_model_img_four{
left:16%;
}
.d_model_img_seven,.d_model_img_nine{
right:16%;
}
}
@media (min-width:1320px){
.d_model_img{
/* border: 1px solid green; */
width: 150px;
height: 135px;
}
}
@media (min-width:1760px){
.d_model_img_seven,.d_model_img_nine{
right:20% !important;
}
/* .d_model_img_seven,.d_model_img_nine{
right:24px !important;
} */
.d_model_img{
width: 190px !important;
height: 200px !important;
}
/* .d_model_img_one,.d_model_img_two,.d_model_img_three,.d_model_img_four,.d_model_img_five{
width: 190px !important;
height: 200px !important;
} */
.d_model_img_two,.d_model_img_four{
left:20%;
}
}
/* signup css */
.si_main{
/* border:1px solid red; */
width: 100%;
min-height: 100vh;
min-height: 100svh;
position: relative;
background: var(--bg);
padding: 0;
position: relative;
}
.si_left{
/* border: 1px solid green; */
width: 50%;
height: 100vh;
}
.si_bg{
/* background: green; */
/* background: url(../images/14.jpg) no-repeat center center/cover; */
/* position: fixed;
top:0;
left:0; */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* transition: 1s ease-in-out; */
}
.si_overlay{
/* border: 1px solid red; */
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
position: relative;
}
.si_overlay p{
color: var(--white);
font-family: Lessti;
font-size: 14px;
font-weight: 400;
line-height: 14px;
letter-spacing: -0.04em;
text-align: left;
}
.si_overlay h3{
color: var(--white);
font-family: Lessti;
font-size: 40px;
font-weight: 400;
line-height: 38px;
letter-spacing: 0em;
text-align: left;
width: 85%;
/* border: 1px solid green ; */
position: absolute;
bottom: 128px;
left: 56px;
}
.si_one{
/* border: 1px solid red; */
width: 105px;
position: absolute;
top: 24px;
left: 56px;
}
.si_one .bigger{
font-size: 24px;
font-weight: 400;
line-height: 24px;
}
.si_info{
/* min-height: 100vh; */
/* border: 1px solid red; */
/* overflow: hidden; */
/* overflow-y: auto; */
padding: 48px;
}
.si_inner{
/* border: 1px solid green; */
width: 368px;
height: 100%;
overflow-y: auto;
padding-right: 12px;
}
.si_inner_one{
/* border: 1px solid green; */
width:65px;
transition: .5s ease-in-out;
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
margin-bottom: 16px;
}
.si_back{
margin-left: 4px;
}
.si_inner_one_svg{
margin-left: 4px;
}
.si_inner_one:hover .si_inner_one_svg{
/* transform: translateX(-10px); */
animation: backing 1s ease-in-out infinite;
/* margin-left: 4px; */
}
@keyframes backing {
0%{
transform: translateX(0);
}
50%{
transform: translateX(-6px);
}
100%{
transform: translateX(0);
}
}
.si_join{
font-family: Lessti;
font-size: 36px;
font-weight: 400;
line-height: 54px;
letter-spacing: 0em;
text-align: left;
color: #2D330B;
;
}
.si_unveil{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #63605F;
margin-bottom: 24px;
}
.si_inner_form{
/* border: 1px solid green; */
}
.si_form_one{
border-bottom: 1px solid #B1B0AF;
margin-bottom: 24px;
position: relative;
}
.si_form_one span{
/* border: 1px solid green; */
position: absolute;
bottom: 8px;
left:0;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
color: #B1B0AF;
}
.si_form_one p{
font-family: Gambetta;
font-size: 12px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0em;
text-align: left;
margin-bottom: 4px;
color: #3C3937;
}
.si_form_one input{
/* border-bottom: 1px solid #3C3937; */
border: none;
width: 100%;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
padding: 8px 8px 8px 1px;
outline: none;
color: #B1B0AF;
background: transparent;
}
.si_form_input{
padding-left: 40px !important;
}
.si_form_btn{
border: none;
outline: none;
background: #2D4630;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
color: #FDFDF0;
width: 100%;
padding: 12px 0;
transition: .3s ease-in-out;
margin-bottom: 16px;
}
.si_form_btn:hover{
}
.si_login{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
color: #040303;
margin-bottom: 8px;
}
.si_others{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: center;
}
.si_login a,.si_others a{
font-family: Gambetta;
font-weight: 600;
color: #040303;
transition: .3s ease-in-out;
}
.si_login a:hover,.si_others a:hover{
color: #2D4630;
}
.si_pass_pass{
margin-bottom: 12px;
}
.si_forget{
/* border: 1px solid green; */
margin-bottom: 24px;
text-align: left;
}
.si_next{
/* border: 1px solid green; */
width: 100%;
margin-top: 33px;
margin-bottom: 23px;
}
.text_center_u{
text-align: center !important;
}
.si_next_btn{
margin-top: 24px;
}
.si_next_p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
}
.si_next_span{
font-size: 600;
}
@media (max-width:1024px){
.si_overlay h3{
bottom: 48px;
}
}
@media (max-width:768px){
.si_bg{
display: none;
}
.si_info{
width: 100%;
/* border: 1px solid green; */
height: auto;
}
.si_inner{
padding-right: 0;
}
}
@media (max-width:480px){
.si_inner{
width: 100%;
/* border: 1px solid green; */
}
.si_info{
padding: 48px 24px;
}
}
/* body css */
/* .bd_main{
border:1px solid red;
width: 100%;
min-height: 100vh;
min-height: 100svh;
position: relative;
background: var(--bg);
} */
.bd_container{
/* border: 1px solid red; */
width: 100%;
min-height: auto;
display: flex;
justify-content: center;
background: var(--bg);
}
.bd_content{
/* border: 1px solid blue; */
width: 100%;
padding: 0 48px 0 48px;
}
.bd_one{
background: var(--dark_bg);
min-height: 52px;
}
.bd_one .bd_content{
display: flex;
justify-content: center;
align-items: center;
}
.bd_one p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #fdfdfd;
/* color: var(--sec_bright); */
}
.bd_two{
/* background: var(--dark_bg); */
min-height: 88px;
border-bottom: 1px solid #D1E2C0 ;
}
.be_little{
display: none;
}
.be_search{
width: 25px;
height: 25px;
margin-top: 4px;
cursor: pointer;
}
.logged_in{
/* border: 1px solid green; */
margin-top: 8px;
display: none;
}
.profile_in{
/* border: 1px solid red; */
cursor: pointer;
display: block !important;
margin-left: 8px;
}
.logged_in.active{
display: block;
}
/* .logged_in.active .bd_two_svg_one{
display: none;
} */
.bd_two a{
/* border: 1px solid green; */
font-family: 'Lessti';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 100%;
/* identical to box height, or 14px */
letter-spacing: -0.04em;
color: #25282B;
transform: scale(1.3);
}
.bd_two_right{
/* border: 1px solid red; */
gap: 16px;
}
.bd_search{
/* border: 1px solid green; */
border-bottom: 1px solid #63605F;
width: 168px;
min-height: 32px;
position: relative;
padding: 4px 32px 4px 8px;
}
.bd_search input{
border: none;
background: transparent;
height: 32px;
width: 100%;
/* padding: 8px; */
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
/* text-align: center; */
}
/* .bd_search i{
border: 1px solid red;
position: absolute;
top:50%;
right: 8px;
transform: translateY(-50%);
font-size: 16px;
} */
.bd_search svg{
/* border: 1px solid red; */
position: absolute;
top:50%;
right: 8px;
transform: translateY(-50%);
/* font-size: 16px; */
}
.bd_two_svg{
/* border: 1px solid red; */
}
.bd_two_svg_one{
/* border: 1px solid blue; */
margin-top: 4px;
position: relative;
margin-right: 8px;
}
.bd_two_svg_one:nth-child(2){
margin-left: 8px;
}
.patch{
background: #040303;
width: 18px;
height: 18px;
position: absolute;
top:-4px;
right:-4px;
color: var(--white);
font-family: Gambetta;
font-size: 12px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0em;
/* text-align: left; */
border-radius: 50%;
}
.join_sign_two{
/* border: 1px solid green; */
width: 100%;
min-height: 25px;
margin-top: 24px;
margin-bottom: 48px;
position: relative;
display: none;
}
.join_two_diss{
/* border: 1px solid green; */
transition: .3s ease-in-out;
/* width: 64px; */
position: absolute;
top:4px;
right:0;
/* transform: translateY(-50%); */
cursor: pointer;
}
.join_sign_two a{
padding: 0 !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 12px;
}
.join_sign_two span{
margin-top: 4px;
margin-right: 16px;
}
.join_two_diss:hover{
transform: scale(1.1);
}
.join_sign{
/* border: 1px solid blue; */
}
.join_sign.active{
display: none;
}
.join_sign a,.join_sign_two a{
margin-left: 18px;
/* margin-left: 8px; */
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
transition: .3s ease-in-out;
}
.join_sign a:hover,.join_sign_two a:hover{
color: var(--orange);
}
.join_sign span,.join_sign_two span{
margin-left: 18px;
/* margin-left: 8px; */
}
.bd_three{
/* background: var(--dark_bg); */
min-height: 52px;
}
.bd_three .bd_content ul{
/* border: 1px solid green; */
min-height: 52px;
}
.bd_three .bd_content a{
/* border: 1px solid red; */
padding: 16px;
transition: .3s ease-in-out;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: var(--new_dark);
}
.bd_three .bd_content a:hover{
color : #D44E03
}
.bd_three_last_a{
color: #D44E03 !important;
}
.bd_three_last_a svg{
margin-right: 4px;
}
.bd_four{
/* background: var(--dark_bg); */
min-height: 224px;
background: linear-gradient(to right, #2D4630 50%, #D1E2C0 50%);
}
.bd_four_divide{
/* border: 1px solid red; */
width: 50%;
min-height: 224px;
color: var(--light);
padding: 48px 0;
padding-left: 0px;
padding-right: 48px;
}
.bd_four_divide h3{
font-family: Lessti;
font-size: 40px;
font-weight: 400;
line-height: 48px;
letter-spacing: 0em;
text-align: center;
margin-bottom: 8px;
text-align: left;
}
.bd_four_divide p{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: var(--light);
}
.bd_four_two{
background:#D1E2C0;
}
.bd_four_divide_two{
width: 100%;
padding: 48px 0;
padding-left: 0px;
padding-right: 0;
}
.bd_four_divide_two h3{
color: #2D4630;
}
.bd_four_divide_two p{
color: #2D4630;
}
.bd_four_divide:nth-child(2){
padding-left: 48px;
padding-right: 0px;
}
.bd_four_divide:nth-child(2) h3{
color: #2D4630;
text-align: center;
}
.bd_five{
min-height: 50vh;
}
.bd_five_top{
/* border: 1px solid red; */
min-height: 64px;
padding-top:24px ;
}
.bd_five_top ul a{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
/* border: 1px solid red; */
margin-right: 8px;
color: var(--dark);
text-decoration: underline;
}
.bd_five_top ul p{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
/* border: 1px solid red; */
margin-right: 8px;
color: var(--dark);
/* text-decoration: underline; */
}
.bd_five_bottom{
/* border: 1px solid green; */
min-height: 528px;
gap: 24px;
}
.bd_five_bottom_left{
/* border: 1px solid red; */
width: 20%;
transition: .3s ease-in-out;
}
.filter{
/* border: 1px solid red; */
width: 100%;
min-height: 40px;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.filter p{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0em;
text-align: center;
color: #25282B;
}
.filter_diss{
/* border: 1px solid green; */
transition: .3s ease-in-out;
cursor: pointer;
}
.filter_diss:hover{
transform: scale(1.1);
}
.inv{
opacity: 0 !important;
}
.bd_filt{
/* border: 1px solid red; */
width: 100%;
min-height:44px;
cursor:pointer;
}
.bd_filt p{
font-size: 16px !important;
font-weight: 500 !important;
line-height: normal !important;
letter-spacing: 0em;
color: #2D4630;
margin-right: 8px;
display: block !important;
}
.tab input {
position: absolute !important;
opacity: 0;
z-index: -1;
}
.tab__content {
max-height: 0;
overflow: hidden;
transition: all 0.35s;
border-bottom: 1px solid #E9E9E9;
}
.tab input:checked ~ .tab__content {
max-height: 999px;
}
/* Visual styles */
.accordion {
color: var(--dark);
/* border: 1px solid blue; */
/* border-radius: 0.5rem; */
overflow: hidden;
}
.tab__label,
.tab__close {
display: flex;
color: var(--dark);
/* background: var(--theme); */
border-bottom: 1px solid #E9E9E9;
cursor: pointer;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
display: flex;
align-items: center;
}
.tab__label {
justify-content: space-between;
padding: 12px;
}
.tab__label::after {
content: "\2b";
width: 24px;
height: 24px;
text-align: center;
/* transform: rotate(90deg); */
/* border: 1px solid red; */
font-size: 28px;
font-weight: 900;
transition: all 0.35s;
}
.tab input:checked + .tab__label::after {
/* transform: rotate(270deg); */
content: "\2212";
}
.tab__close {
justify-content: flex-end;
padding: 0.5rem 1rem;
font-size: 0.75rem;
}
/* Arrow animation */
.tab input:not(:checked) + .tab__label:hover::after {
/* animation: bounce .5s infinite; */
}
@keyframes bounce {
25% {
transform:translateY(.25rem);
}
75% {
transform:translateY(-.25rem);
}
}
.tab__content .bd_checking {
/* border-bottom: 1px solid green; */
min-height: 200px;
padding: 8px 0;
}
input[type=checkbox] {
position: relative;
border: 2px solid var(--dark);
border-radius: 2px;
background: none;
cursor: pointer;
line-height: 0;
margin: 0 .6em 0 0;
outline: 0;
padding: 0 !important;
vertical-align: text-top;
height: 20px;
width: 20px;
-webkit-appearance: none;
opacity: .5;
}
input[type=checkbox]:hover {
opacity: 1;
}
input[type=checkbox]:checked {
background-color: var(--dark);
opacity: 1;
}
input[type=checkbox]:before {
content: '';
position: absolute;
right: 50%;
top: 50%;
width: 4px;
height: 10px;
border: solid var(--white);
border-width: 0 2px 2px 0;
margin: -1px -1px 0 -1px;
transform: rotate(45deg) translate(-50%, -50%);
z-index: 2;
}
.bd_check{
/* border: 1px solid red; */
width: 100%;
padding: 8px 12px;
}
.bd_check input{
z-index:1;
position: relative !important;
}
.bd_check p,.bd_check span{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: var(--dark);
}
.tab__content .bd_price_range {
border: 1px solid green;
min-height: 200px;
}
.collapsible{
border: transparent;
border-bottom: 1px solid #E9E9E9;
/* border: none; */
min-height: 40px;
width: 100%;
position: relative;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
padding: 12px 16px 12px 12px;
background: transparent;
outline: none;
}
.collapsible i{
/* border: 1px solid green; */
/* position: absolute;
top:50%;
transform: translate(-50%);
right:10px; */
transition: .3s ease-in-out;
}
.coll_rotate.active{
transform: rotate(-180deg);
}
.let_left{
/* border: 1px solid red; */
width: 100%;
margin-top: 8px;
}
.let_left p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #15110F;
}
.custom-wrapper {
position: relative;
/* border-top: 1px solid var(--black); */
border-bottom: 1px solid #E9E9E9;
padding: 24px 12px;
}
/* Styles for the price input container */
.price-input-container {
width: 100%;
}
.price-input .price-field {
display: flex;
/* margin-bottom: 22px; */
width: 30%;
border-bottom: 1px solid var(--black);
}
.price-input .price-field:nth-child(3){
border: none;
}
.price-field input {
flex: 1;
height: 35px;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #B1B0AF;
/* border-bottom: 1px solid #B1B0AF; */
border: none;
background: transparent;
outline: none;
width: 100%;
}
.price-input {
width: 100%;
/* border: 1px solid green; */
margin-top: 16px;
/* border: none; */
}
/* Remove Arrows/Spinners */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.slider-container {
width: 100%;
}
.slider-container {
height: 6px;
position: relative;
background: #e4e4e4;
border-radius: 5px;
/* margin-bottom: 16px; */
}
.slider-container .price-slider {
height: 100%;
/* left: 25%;
right: 15%; */
left: 0%;
right: 0%;
position: absolute;
border-radius: 5px;
background: #01940b;
/* margin-bottom: 16px; */
}
.range-input {
position: relative;
}
.range-input input {
position: absolute;
width: 100%;
height: 5px;
background: none;
top: -5px;
pointer-events: none;
cursor: pointer;
-webkit-appearance: none;
}
/* Styles for the range thumb in WebKit browsers */
input[type="range"]::-webkit-slider-thumb {
height: 18px;
width: 18px;
border-radius: 70%;
background: #555;
pointer-events: auto;
-webkit-appearance: none;
}
.price-field button{
width: 100%;
border: none;
outline: none;
background: #D1E2C0;
color: #2D4630;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
}
.bd_five_bottom_right{
/* border: 1px solid green; */
width: 80%;
}
.bd_new_arrival{
/* border: 1px solid green; */
width: 100%;
margin-top: 16px;
margin-bottom: 24px;
position: relative;
padding-right: 108px;
min-height: 82px;
}
.bd_new_arrival p{
font-family: Lessti;
font-size: 28px;
font-weight: 400;
line-height: 28px;
letter-spacing: 0em;
text-align: left;
}
.bd_new_arrival span{
font-size: 16px;
font-weight: 500;
line-height: 24px;
}
.bd_prod_listing{
/* border: 1px solid green; */
width: 100%;
display: flex;
gap:12px;
flex-wrap: wrap;
position: relative;
}
.bd_spin{
/* border: 1px solid green; */
width: 56px;
height: 56px;
position: fixed;
bottom: 80px;
/* top: 45%; */
transform: translateY(-50%);
right: 56px;
z-index: 99;
background: #DA460D;
border-radius: 50%;
cursor: pointer;
}
.popup_overlay{
/* border: 1px solid red; */
width: 100%;
min-height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.3);
visibility: hidden;
opacity: 0;
transition: opacity .5s ease-in-out;
/* padding: 72px 0; */
}
.popup_overlay.active{
visibility: visible;
opacity: 1;
}
.popup_content{
/* border: 1px solid red; */
width: 432px;
/* min-height: 654px; */
height: auto;
max-height: 90vh;
overflow-y: auto;
position: relative;
z-index: 110;
background: #F9F0D9;
transform: translateY(100px);
opacity: 0;
transition: .5s ease-in-out;
/* border-radius: 16px; */
padding: 35px 24px;
overflow-x: hidden;
}
.popup_content.active{
transform: translateY(0px);
opacity: 1;
}
.popup_content_top{
/* border: 1px solid red; */
}
.popup_content_top h3{
font-family: Gambetta;
font-size: 20px;
font-weight: 600;
line-height: 30px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
}
.popup_cancel{
/* border: 1px solid green; */
cursor: pointer;
}
.popup_content_mid{
/* border: 1px solid red; */
/* border-bottom: 1px solid #B1B0AF */
}
.more_p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
}
.tiny_p{
font-family: Gambetta;
font-size: 12px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0em;
text-align: left;
color: #3C3937;
}
.popup_content_rate i{
cursor: pointer;
}
.popup_content_form{
margin-bottom: 20px;
/* border: 1px solid red; */
border-bottom: 1px solid #B1B0AF;
position: relative;
padding-top: 18px;
padding-bottom: 4px;
}
.popup_content_form p{
position: absolute;
top:0;
left:0;
}
.popup_content_form input{
/* border: 1px solid green; */
width: 100%;
height: 24px;
padding: 8px 0;
outline: none;
background: transparent;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #B1B0AF;
border: none;
}
.popup_content_bot{
/* border: 1px solid red; */
}
.upload_btns{
/* border: 1px solid green; */
width: 100%;
gap:12px;
}
.form-input {
width:100%;
padding:5px;
background:none;
/* border:1px solid blue; */
border-spacing: 4px;
border-radius:10px;
background: #2D4630;
}
.form-input img {
width:100%;
display:none;
margin-bottom:20px;
border-radius: 25px;
}
.form-input input {
display:none;
}
.form-input label {
display:flex;
justify-content: center;
align-items: center;
width:150px;
/* height:auto; */
margin:auto;
background:transparent;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: center;
color: #FDFDF0;
cursor:pointer;
padding: 10px 0;
/* border: 1px solid red; */
position: relative;
}
.form-input i{
/* border: 1px solid blue; */
margin-right: 8px;
}
.upload_btns button{
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.upload_btns button,.popup_svg_btn{
background: #2D4630;
border: none;
width:100%;
/* border: 1px solid red; */
outline: none;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: center;
color: #FDFDF0;
padding: 12px;
margin-top: 8px;
margin-bottom: 8px;
border-radius: 10px;
}
.popup_content_bot p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: center;
color: #040303;
}
.popup_svg{
/* border: 1px solid red; */
transform: translateX(230%);
opacity: 0;
transition: .5s ease-in-out;
position: absolute;
top:0;
/* display: none; */
}
.popup_svg.active{
position: relative;
transform: translateX(0);
opacity: 1;
/* display: flex; */
}
.popup_unthank.active{
display: none;
}
.popup_cover{
/* border: 1px solid red; */
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.3);
visibility: hidden;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.popup_cover.active{
visibility: visible;
opacity: 1;
}
.popup{
/* border: 1px solid red; */
width: 711px;
min-height: 320px;
position: relative;
z-index: 110;
background: #F9F0D9;
transform: translateY(100px);
opacity: 0;
transition: .5s ease-in-out;
/* pointer-eve nts: none; */
}
.popup.active{
transform: translateY(0px);
opacity: 1;
}
.pop_left{
width: 60%;
/* border: 1px solid green; */
position: relative;
padding: 72px 56px 72px 32px;
}
.pop_left h3{
font-family: Lessti;
font-size: 33px;
font-weight: 400;
line-height: 44px;
letter-spacing: 0em;
text-align: left;
}
.pop_left p{
font-family: Gambetta;
font-size: 20px;
font-weight: 400;
line-height: 26px;
letter-spacing: 0em;
text-align: left;
}
.pop_left a{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
margin-top: 32px;
background: #DA460D;
width: 100%;
min-height: 48px;
color: #FDFDF0;
}
.pop_a_svg{
/* border: 1px solid green; */
margin-right: 7px;
}
.pop_right{
width: 40%;
padding: 0;
background: url(../images/mould.png) no-repeat center center/cover;
/* border: 1px solid red; */
}
.pop_svg{
/* border: 1px solid green; */
position: absolute;
top:40px;
left: 60px;
}
.pop_svg_two{
/* border: 1px solid green; */
position: absolute;
top:40px;
right:32px;
cursor: pointer;
transition: .3s ease-in-out;
}
.pop_svg_two:hover{
transform: scale(1.1);
}
.pop_svg_three{
/* border: 1px solid green; */
position: absolute;
top:50%;
transform: translateY(-50%);
left: -30px;
cursor: pointer;
}
.bd_gift{
/* border: 1px solid red; */
width: auto;
/* height: 56px; */
position: fixed;
bottom: -25px;
/* top: 90%; */
transform: translateY(-50%);
right: 48px;
z-index: 99;
cursor: pointer;
}
.popup_cover_2{
/* border: 1px solid red; */
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.3);
visibility: hidden;
opacity: 0;
transition: opacity .5s ease-in-out;
}
.popup_cover_2.active{
visibility: visible;
opacity: 1;
}
.popup_2{
/* border: 1px solid red; */
/* width: 500px; */
width: auto;
min-height: 500px;
position: relative;
z-index: 110;
transform: translateY(100px);
opacity: 0;
transition: .5s ease-in-out;
flex-direction: column;
}
.popup_2.active{
transform: translateY(0px);
opacity: 1;
}
.popup_2 i{
/* border: 1px solid green; */
font-size: 22px;
position: absolute;
top:0;
right:0;
padding: 15px;
color: var(--white);
transition: .3s ease-in-out;
cursor: pointer;
z-index: 150;
}
.popup_2 i:hover{
transform: scale(1.1);
}
.spinner_bg{
border: 2px solid var(--white);
width: 472px;
height: 472px;
border-radius: 50%;
position: relative;
}
.spinner_bg .spin_top{
position: absolute;
top:0;
left:50%;
transform: translateX(-50%);
/* border: 1px solid red; */
z-index: 150;
}
.spinners{
/* border: 1px solid red; */
width: 432px;
height: 432px;
/* border-radius: 50%; */
position: relative;
}
.spinners_gift {
width: 100px;
height: 50px;
/* border: 1px solid red; */
z-index: 150;
position: absolute;
opacity:0;
}
.spin_one {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.spin_two {
top: 50px;
right:50px ;
transform: rotate(45deg);
}
.spin_three {
top: 50%;
transform: translateY(-50%) rotate(90deg);
right:0 ;
}
.spin_four {
bottom: 60px;
right:60px ;
transform: rotate(-45deg);
}
.spin_five {
bottom: 0;
left:50% ;
transform: translateX(-50%);
}
.spin_six {
bottom: 60px;
left:60px ;
transform: rotate(45deg);
}
.spin_seven {
top: 50%;
left:0 ;
transform: translateY(-50%) rotate(90deg);
}
.spin_eight{
top:60px;
left:60px;
transform: rotate(-45deg);
}
.spin_text{
/* border: 1px solid blue; */
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
background: var(--black);
cursor: pointer;
z-index: 150;
}
.spin_text.active{
pointer-events: none;
}
.spin_text p{
font-size: 12px;
font-weight: 400;
line-height: normal;
color:var(--white);
}
.search_popup{
/* border: 1px solid green; */
width: 100%;
position: fixed;
top:0;
left:100%;
background: var(--bg);
z-index: 150;
transition: .3s ease-in-out;
}
.search_popup.active{
left:0;
opacity: 1;
}
.search_popup_box{
/* border: 1px solid red; */
width: 1340px;
min-height: 340px;
padding: 25px 56px;
}
.search_left{
/* border: 1px solid red; */
}
.search_left p{
font-family: Lessti;
font-size: 24px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.04em;
text-align: left;
}
.search_left span{
font-family: Lessti;
font-size: 14px;
font-weight: 400;
line-height: 14px;
letter-spacing: -0.04em;
text-align: left;
color: #25282B;
}
.search_mid{
/* border: 1px solid red; */
width: 50%;
transform: translateY(-100px);
transition: .6s ease-in-out;
/* animation-delay: 0.3s; */
}
.search_popup.active .search_mid{
transform: translateY(0);
}
.search_bx{
border-bottom: 1px solid var(--black);
width: 100%;
min-height: 40px;
position: relative;
margin-bottom: 16px;
}
.search_svg{
/* border: 1px solid green; */
position: absolute;
top:50%;
left:12px;
transform: translateY(-50%);
}
.cancel_svg{
/* border: 1px solid red; */
position: absolute;
top:50%;
right:12px;
transform: translateY(-50%);
cursor: pointer;
}
.search_mid input{
width: 100%;
/* border: 1px solid green; */
padding: 8px 48px 8px 48px ;
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
background: transparent;
outline: none;
border: none;
}
.search_mid input:hover{
/* background-color: #3285c4; */
}
/* list style */
.search_mid ul{
list-style: none;
margin: 0;
padding: 0;
max-height: 50vh;
overflow-y: scroll;
}
.search_mid li{
cursor: pointer;
height: 40px;
line-height: 40px;
/* border: 1px solid green; */
}
.search_mid a{
font-family: Gambetta;
font-size: 20px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0em;
/* text-align: center; */
color: #15110F;
}
.search_popular{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
/* text-align: center; */
margin-bottom: 8px;
color: #63605F;
margin-top: 8px;
}
.search_right{
/* border: 1px solid red; */
}
.search_right p{
font-family: Gambetta;
font-size: 20px;
font-weight: 600;
line-height: 28px;
letter-spacing: 0em;
text-align: left;
cursor: pointer;
}
.bd_prod_card{
/* border: 1px solid blue; */
width: 32%;
/* width: 298.67px; */
height: 528px;
margin-bottom: 16px;
text-decoration: none;
/* overflow: hidden; */
}
/* .myClass {
width: 300px;
height: 200px;
opacity: 0;
transition: opacity 0.5s ease;
background-size: cover;
display: inline-block;
} */
.bd_prod_card_top{
width: 100%;
height: 420px;
/* margin-bottom:12px; */
/* border:1px solid red; */
/* background: url(../images/r3.png) no-repeat center center/cover; */
}
.in_view{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #ccc;
position: relative;
overflow: hidden;
}
.in_view::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
animation: moveOpacity 2s infinite linear;
width: 100%;
}
@keyframes moveOpacity {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.no-animation::before {
/* display: none; */
opacity: 0;
transition: .5s ease-in-out;
}
.bd_discount{
background: #FFC9AB;
height: 20px;
/* min-height: 18px; */
position: absolute;
top:0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.bd_discount p{
padding: 8px;
font-family: Lessti;
font-size: 12px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
}
.bd_below{
background: #D1E2C0;
width: 100%;
height: 24px;
position: absolute;
bottom: 0;
left: 0;
opacity: 1;
transition: .3s ease-in-out;
padding: 0 12px;
}
.bd_prod_card:hover .bd_below{
opacity: 0;
}
.bd_below p{
overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
.bd_below p:nth-child(1){
font-family: Lessti;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
/* overflow: hidden;
text-wrap: nowrap;
text-overflow: ellipsis; */
}
.bd_below p:nth-child(2){
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
}
.bd_prod_card_shadow{
width: 100%;
height: 420px;
/* margin-bottom:12px; */
/* background: #D1E2C0; */
background: rgba(0, 0, 0, 0.05);
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: .5s ease-in-out;
overflow: hidden;
}
.bd_prod_card:hover .bd_prod_card_shadow{
opacity: 1;
}
.bd_fav{
/* border: 1px solid red; */
/* width: 100%; */
/* height: 50px; */
position: absolute;
top: 10px;
right: 10px;
}
.bd_fav i{
font-size: 22px;
color: var(--black);
display: none;
}
.bd_bluc{
background: #2D4630;
width: 90%;
padding: 0 16px;
height: 40px;
position: absolute;
bottom: 10px;
left: 5%;
transform: translateY(100px) ;
transition: .3s ease-in-out;
/* opacity: 1 !important; */
border: none;
outline: none;
}
.bd_bluc p{
color: var(--light);
font-size: 14px;
line-height: normal;
font-weight: 500;
font-family: Gambetta;
}
.bd_bluc i{
color: var(--light) !important;
font-size: 13px;
margin-right: 6px;
}
.bd_prod_card:hover .bd_bluc{
transform: translateY(0);
}
.bd_prod_card_bottom{
width: 100%;
height: 108px;
/* border:1px solid red; */
padding: 12px;
}
.bd_bot_one{
/* border: 1px solid green; */
width: 100%;
}
.bd_colors{
/* border: 1px solid red; */
gap:4px;
}
.bd_color{
border: none;
border-radius: 50%;
width: 24px;
height: 24px;
}
.bd_color.active{
border: 2px solid var(--dark);
}
.bd_color_dot{
width: 16px;
height: 16px;
padding: 4px;
background: var(--dark);
border-radius: 50%;
}
.bd_bot_one p{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
}
.bd_bot_two{
/* border: 1px solid green; */
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
margin-bottom: 4px;
margin-top: 8px;
}
.bd_bot_three{
/* border: 1px solid green; */
width: 100%;
}
.bd_bot_three_one{
font-family: Lessti;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
}
.bd_bot_three_one span{
text-decoration: line-through;
opacity: .5;
}
.bd_pag{
/* border:1px solid red; */
width:100%;
min-height: 32px;
margin-bottom: 40px;
position: relative;
justify-content: flex-end;
}
.bd_pag p{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
}
.bd_pag span{
font-weight: 700;
}
.hidden {
display: none;
}
.pagination-container {
width: auto;
/* width: 50%; */
/* border: 1px solid green; */
display: flex;
align-items: center;
justify-content: center;
}
.pagination-number,
.pagination-button{
font-size: 14px;
background-color: transparent;
border: none;
margin: 0.25rem 0.25rem;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 50%;
}
.pagination-number:hover,
.pagination-button:not(.disabled):hover {
background: #fff;
}
.pagination-number.active {
color: #fff;
background: #25282B;
}
.bd_split{
/* border: 1px solid red; */
width: 100%;
min-height: 320px;
margin-bottom:85px ;
}
.bd_split_left{
/* border: 1px solid green; */
width: 50%;
}
/* .bd_split_left:nth-child(1){
background: url(../images/split.png) no-repeat center center/cover;
} */
.bd_split_right{
padding: 72px 40px 40px 40px;
background: #F9F0D9;
}
.bd_split_right h3{
color: #2D4630;
font-family: Lessti;
font-size: 32px;
font-weight: 400;
line-height: 36px;
letter-spacing: 0em;
text-align: center;
}
.bd_split_right p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
color: #2D4630;
margin-bottom: 24px;
}
.bd_split_right button{
border: none;
outline: none;
width: 100%;
background: #2D4630;
padding-top:12px;
padding-bottom:12px;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: center;
color: #FDFDF0;
}
.bd_last{
background: #2D4630;
min-height: 448px;
}
.bd_last .bd_content{
padding-top: 64px;
padding-bottom: 64px;
}
.bd_last_top{
/* border: 1px solid green; */
width: 100%;
}
.bd_last_top_one{
/* border: 1px solid blue; */
width: 20%;
}
.bd_last_top_one ul{
/* border: 1px solid red; */
width: 100%;
}
.bd_last_top_one p{
color: var(--light);
}
.bd_last_top_one a{
color: var(--light);
}
.amabride{
font-family: Lessti;
font-size: 24px;
font-weight: 400;
line-height: 24px;
letter-spacing: -0.04em;
text-align: left;
/* border: 1px solid red; */
}
.by_dimples{
font-size: 14px;
line-height: 14px;
}
.bd_last_top_one ul p{
/* border: 1px solid red; */
font-family: Gambetta;
font-size: 18px;
font-weight: 500;
line-height: 23px;
letter-spacing: 0px;
text-align: left;
margin-bottom: 16px;
}
.bd_last_top_one ul li{
margin-bottom: 9px;
}
.bd_last_top_one ul a{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0px;
text-align: left;
/* margin-bottom: 9px; */
transition: .3s ease-in-out;
opacity: .7;
}
.bd_last_top_one ul a:hover{
color: var(--orange);
}
.ani_i{
/* border: 1px solid green; */
/* justify-content: space-between;
gap: 16px; */
}
.ani_i a{
opacity: 1 !important;
margin-right: 12px;
}
.ani_i i{
font-size: 24px;
}
.bd_last_bottom{
border-top: 1px solid var(--light);
/* border: 1px solid red; */
margin-top: 72px;
min-height: 44px;
}
.bd_last_bottom p{
margin-top: 24px;
color: var(--light);
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0px;
text-align: center;
}
.bd_sort{
/* border: 1px solid green; */
/* width: 125px; */
width: 100px;
position: absolute;
top:16px;
right:0;
}
.bd_sort .custom-select-parent .custom-dropdown-select{
border: 1px solid var(--black) !important;
border-radius: 0 !important;
}
/* .custom-select-parent .custom-dropdown-select::before{
border: 1px solid var(--black) ;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
content: '\2304';
font-size: 24px;
font-weight: 600;
position: absolute;
top:30%;
right:0;
transform: translateY(-50%);
} */
.custom-dropdown-select,
.custom-dropdown-menu{
background: none !important;
background-color: none !important;
box-shadow: none !important;
}
.custom-select-parent .custom-dropdown-menu-item {
background-color: var(--bg) !important;
background: var(--bg) !important;
}
/* custom select css */
.custom-select {
position: relative;
width: 100%;
width: 100%;
}
.custom-select select {
display: none; /*hide original SELECT element:*/
}
.select-selected {
background: var(--bg);
}
/*style the arrow inside the select element:*/
.select-selected:after {
position: absolute;
content: "";
top: 11px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: var(--black) transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
border-color: transparent transparent var(--black) transparent;
top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
color: var(--black);
padding: 8px 16px;
border: 1px solid #2D4630;
/* border-radius: 5px; */
cursor: pointer;
user-select: none;
height: 28px;
display: flex;
align-items: center;
}
.select-items div{
border: none;
}
/*style items (options):*/
.select-items {
position: absolute;
background-color: var(--bg);
top: 100%;
left: 0;
right: 0;
z-index: 99;
margin-top:10px;
border-radius:10px;
box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.1);
}
/*hide the items when the select box is closed:*/
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
color: var(--main);
}
@media (max-width:997px){
.bd_five_bottom_left{
width: 30%;
}
.bd_five_bottom_right{
width: 70%;
}
.bd_prod_card{
/* border: 1px solid blue; */
width: 48%;
}
.bd_last .bd_content{
padding-top: 109px;
}
.bd_last_top{
flex-wrap: wrap;
position: relative;
}
.bd_last_top_one{
width: 50%;
margin-bottom: 12px;
}
.bd_last_top_one:nth-child(1){
position: absolute;
top:-55px;
left:0;
}
}
@media (max-width:768px){
.bd_five_top{
display: none;
}
.filter{
display: flex !important;
}
.bd_spin{
right: 40px;
}
.bd_gift{
right: 30px;
}
.select-items div,.select-selected{
border: none;
justify-content: center;
}
.select-selected:after {
right: 30%;
}
.bd_filt{
display: flex !important;
/* border-left: 1px solid #C1CBAE; */
border: none;
}
.bd_new_arrival{
/* padding: 12px 0; */
margin-top: 12px;
margin-bottom: 16px;
border: 1px solid var(--black);
flex-direction: row-reverse;
padding-right: 0;
min-height: 50px;
}
.bd_new_arrival p{
display: none;
}
.bd_sort{
/* width: 50%; */
/* border: none;
border-right:1px solid var(--black) ; */
/* right: auto; */
/* left: 0; */
/* top:0; */
}
.bd_sort .custom-select-parent .custom-dropdown-select{
border: none !important;
border-right:1px solid var(--black) !important;
text-align: center;
margin-top:-15%;
}
.bd_split{
flex-direction: column;
}
.bd_split_left{
width: 100%;
min-height: 285px;
}
.bd_split_right{
padding: 56px 24px 24px 24px;
}
.bd_split_right h3{
font-size: 28px;
}
.bd_two .bd_content{
position: relative;
}
.be_little{
display: block;
}
.be_big{
display: none;
}
.menu_bar{
/* border: 1px solid green; */
cursor: pointer;
position: absolute;
top:50%;
transform: translateY(-50%);
left: 25px;
}
.first_logo{
/* border: 1px solid red; */
margin-left: 40px;
/* transform: scale(1.3); */
}
.second_logo{
margin-left: 0 !important;
}
.bd_five_bottom_left{
width: 375px;
position: fixed;
top:0;
left:-375px;
background: var(--bg);
min-height: 100vh;
z-index: 150;
padding: 24px;
}
.bd_five_bottom_left.active{
left: 0;
}
.bd_five_bottom_right{
width: 90vw;
/* width: 100%; */
}
.bd_content{
padding: 0 24px 0 24px;
}
.bd_four_divide{
padding-right: 24px;
/* text-align: center; */
}
.bd_four_divide h3{
font-size: 28px;
line-height: normal;
}
.bd_four_divide p{
font-size: 14px;
}
.bd_four_divide_two{
padding-right: 0px;
/* text-align: center; */
padding-top: 24px;
padding-bottom: 24px;
}
.bd_four_divide:nth-child(2){
padding-left: 24px;
}
.custom-wrapper {
width: 100%;
left: 0;
padding: 0 10px;
}
.price-input {
/* flex-direction: column; */
align-items: center;
}
.price-field {
margin-bottom: 10px;
}
.bd_three{
width: 320px;
position: fixed;
top:0;
left:-320px;
height: 100vh;
z-index: 150;
transition: .3s ease-in-out;
}
.bd_three.active{
left:0;
}
.bd_three .bd_content ul{
/* border: 1px solid green; */
flex-direction: column;
}
.bd_three .bd_content ul li{
/* border: 1px solid red; */
text-align: center;
width: 100%;
border-bottom: 1px solid #D1E2C0
}
.bd_three .bd_content a{
display: block;
/* padding: 16px; */
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
padding-left: 0;
/* border: 1px solid green; */
width: 100%;
/* padding: 16px; */
}
.bd_three_last_a{
color: var(--white) !important;
background: #D44E03;
display: flex !important;
align-items: center;
justify-content: center;
margin-top: 24px;
}
.join_sign{
display: none;
}
.join_sign_two{
display: flex;
}
.bd_two_right{
gap:0px;
}
.search_popup{
height: 100vh;
width: 320px;
/* border: 1px solid red; */
left:-320px;
}
.search_popup_box{
width: 100%;
min-height: 100vh;
flex-direction: column;
padding: 24px;
/* border: 1px solid green; */
justify-content: start;
}
.search_mid{
/* border: 1px solid red; */
width: 100%;
margin-top: 32px;
}
.search_right{
/* border: 1px solid red; */
position: absolute;
top:24px;
right:24px;
}
.search_left{
/* border: 1px solid green; */
width: 50%;
text-decoration: none;
color: #25282B;
}
.popup{
width: 328px;
flex-direction: column-reverse;
height: 90vh;
/* min-height: 90vh; */
overflow-y: auto;
}
.pop_left{
width: 100%;
padding: 52px 16px 16px 32px;
min-height: 50%;
}
.pop_right{
/* min-height: 256px; */
}
.pop_svg{
/* border: 1px solid red; */
top:51%;
left: 40px;
z-index: 150;
}
.pop_svg_three{
left:4px;
}
/* .popup_2{
width: 320px;
height: 320px;
} */
.spinner_bg{
width: 300px;
height: 300px;
}
.spinners{
width: 280px;
height: 280px;
}
}
@media (max-width:624px){
.bd_prod_listing{
flex-direction: column;
}
.bd_prod_card{
width: 100%;
}
.bd_four .bd_content{
flex-direction: column;
}
.bd_four_divide{
width: 100%;
min-height: auto;
padding-right: 0;
padding-top: 24px;
padding-bottom: 24px;
}
.bd_four_divide:nth-child(2){
padding-left: 0;
justify-content: start;
}
.bd_four_divide:nth-child(2) h3{
font-size: 18px;
text-align: left;
margin-bottom: 0;
}
.bd_four{
min-height: 224px;
background: linear-gradient(to bottom, #2D4630 70%, #D1E2C0 30%);
}
.bd_four_two{
background: #D1E2C0;
}
}
@media (max-width:500px){
.select-selected:after {
right: 20%;
}
.bd_spin{
right: 30px;
}
.bd_gift{
right: 24px;
}
}
/* project details css */
.prod_bx{
/* border: 1px solid green; */
}
.prod_bx .bd_content{
/* border: 1px solid red; */
position: relative;
/* min-height: 880px; */
}
.prod_bx_one{
/* border: 1px solid red; */
width: 100%;
margin-bottom: 48px;
padding-top: 16px;
}
.prod_bx_one_top{
/* border: 1px solid blue; */
width: 100%;
min-height: 914px;
gap: 24px;
}
.prod_bx_one_top_left{
/* border: 1px solid green ; */
width: 50%;
}
.prod_bx_one_top_left_top{
/* border: 1px solid red; */
width: 100%;
min-height: 656px;
margin-bottom: 24px;
/* position: relative; */
gap: 16px;
}
#image-board{
/* border: 1px solid green; */
width: 80%;
height: 655px;
background: url(/assets/images/21.jpg) no-repeat center/cover;
/* background-position: center; */
/* background-size: contain; */
background-color: #fff;
}
#acc_image-board{
background: url(../images/accessories/1.png) no-repeat center/cover ;
/* border: 1px solid green; */
width: 80%;
height: 655px;
/* background-position: center; */
/* background-size: contain; */
background-color: #fff;
}
#bridals_image-board{
background: url(../images/bridals/1.jpeg) no-repeat center/cover ;
/* border: 1px solid green; */
width: 80%;
height: 655px;
/* background-position: center; */
/* background-size: contain; */
background-color: #fff;
}
.thumbnail-container{
/* border: 1px solid red; */
width: 20%;
/* padding: 0 26px; */
position: relative;
padding: 48px 0;
}
.thumbnails{
/* border:1px solid red; */
width: 80px;
height: 104px;
/* margin-bottom: 16px; */
flex-shrink: 0;
background-color: #fff;
object-fit: cover;
}
.thumb_scroll{
/* border: 1px solid green; */
width: auto;
height: 350px;
overflow-y: auto;
gap: 16px;
}
.chevron{
/* border: 1px solid green; */
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
background: var(--black);
color: var(--white);
transition: .3s ease-in-out;
position: absolute;
cursor: pointer;
}
.chevron_two{
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.chevron_one{
top: 0;
left: 50%;
transform: translateX(-50%);
}
.chevron:hover{
background: var(--white);
}
.chevron:hover i{
color: var(--dark);
}
.prod_bx_one_top_left_bot{
/* border: 1px solid blue; */
width: 100%;
min-height: 160px;
}
.new_tab_top{
border-bottom: 1px solid #D1E2C0;
width:100% ;
background: transparent !important;
min-height:32px !important;
}
.tab_top button{
/* border: 1px solid red; */
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
padding: 3px;
border: none;
outline: none;
margin-right: 24px;
background: transparent;
cursor: pointer;
}
.tab_top button:nth-child(3){
margin-right: 0;
}
.tab_top button.active{
font-weight: 600;
border-bottom: 2px solid #2D4630;
}
.tab_bot{
/* border: 1px solid red; */
width:100%;
padding-top:16px;
}
.tab_bot p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #25282B;
}
.tab-content {
display: none;
width: 100%;
height: auto;
/* border: 1px solid red; */
}
.tab-content.active {
display: flex;
}
.prod_details{
/* border: 1px solid red; */
width: 100%;
}
.prod_details_bx{
border-bottom: 1px solid #D1E2C0;
padding: 12px 0;
}
.prod_details h3{
font-family: Gambetta;
font-size: 18px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
}
.reviews{
/* border: 1px solid green; */
margin-top: 8px;
}
.reviews i{
/* border: 1px solid green; */
/* font-size: 16px; */
}
.reviews p{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: var(--black);
margin-left: 8px;
}
.starred{
color: #E6A13A;
}
.unstarred{
color:#ccc;
}
.price_before{
color: #B1B0AF;
text-decoration: line-through;
margin-left: 12px;
}
.quantity p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #25282B;
}
.quantity_container{
border: 1px solid #D1E2C0;
width: auto;
min-height: 24px;
margin-left: 16px;
}
.quantity_container button{
border: 1px solid #D1E2C0;
outline: none;
background: transparent;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.quantity_container button i{
/* border: 1px solid red; */
font-size: 14px;
color: #25282B;
}
.quantity_container span{
font-family: Gambetta;
font-size: 14px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0em;
text-align: right;
color: #25282B;
padding:0 8px;
}
.select_color{
/* border: 1px solid green; */
width: 100%;
}
.color{
border: 1px solid transparent;
width: 24px;
height: 24px;
border-radius: 50%;
cursor:pointer;
}
.color.active{
border: 1px solid var(--black);
}
.col1{
/* border: 1px solid blue; */
width: 16px;
height: 16px;
border-radius: 50%;
background: #25282B;
}
.col2{
background: #D1E2C0;
}
.col3{
background: #9747FF;
}
.col4{
background: #F178B6;
}
.select_sizes{
/* border: 1px solid green; */
width: 100%;
gap: 8px;
min-height: 24px;
}
.size{
border: 1px solid #25282B40;
width: 66px;
/* height: 24px; */
/* margin-right: 8px;
margin-bottom: 8px; */
cursor: pointer;
flex-direction: column;
padding: 2px;
}
.size.active{
border: 2px solid var(--black);
font-weight: 600;
}
.sizes p{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #25282B;
}
.prod_details_bx_below{
/* border: 1px solid red; */
width: 338px;
/* width: 100%; */
min-height: 48px;
margin-top: 12px;
margin-bottom: 12px;
gap: 10px;
}
.prod_details_bx_below .bd_bluc{
width: 90%;
position: relative;
bottom: 0;
left: 0%;
transform: translateY(0) ;
}
.fav_big{
border: 1px solid #D0CFCF;
width: 48px;
height: 48px;
}
.track{
/* border: 1px solid blue; */
width: 100%;
min-height: 156px;
padding: 16px 32px;
margin-bottom: 12px;
background: #F9F0D999;
}
.track_top{
/* border: 1px solid green; */
gap:16px;
margin-bottom: 16px;
}
.track_right{
/* border: 1px solid green; */
}
.track_right p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
}
.track_right span{
font-weight: 700;
}
.track_bot{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #647366;
}
.often{
min-height: 229px !important;
}
.often .stand_h3{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
}
.often .also_love_bx{
/* border: 1px solid red; */
min-height: 184px;
gap: 8px;
}
.often .also_love_bx_card{
width: 97px;
min-height: 184px;
/* border: 1px solid blue; */
position: relative;
}
.often .also_love_bx_card svg{
/* border: 1px solid red; */
position: absolute;
top: 108px;
right: 8px;
z-index: 1;
}
.often .also_love_bx_card_top{
/* border: 1px solid red; */
height: 148px;
/* width: 97px; */
}
.often .also_love_bx_card_bot{
margin-top: 9px;
font-size: 14px;
line-height: 20px;
}
.prod_bx_one_bot{
/* border: 1px solid blue; */
width: 100%;
min-height: 454px;
}
.stand_h3{
font-family: Lessti;
font-size: 20px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0em;
text-align: left;
color: #2D330B;
margin-bottom: 16px;
}
.also_love_bx{
/* border: 1px solid green; */
width: 100%;
min-height: 408px;
gap: 12px;
overflow-x: auto;
}
.also_love_bx_card{
/* border: 1px solid green; */
width: 224px;
flex-shrink: 0;
}
.also_love_bx_card_top{
/* border: 1px solid red; */
width: 100%;
height: 360px;
}
.also_love_bx_card_bot{
margin-top: 15px;
margin-bottom: 12px;
font-family: Lessti;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: var(pen);
}
.prod_bx_two .bd_pag{
margin-bottom: 0;
}
.prod_bx_two_content{
/* border: 1px solid green; */
width: 100%;
min-height: 1032px;
}
.st_status{
/* border: 1px solid red; */
min-height: 200px;
padding: 24px;
margin-bottom: 10px;
background: #FDFDF0;
gap: 40px;
position: relative;
}
.st_status h4{
font-family: Gambetta;
font-size: 14px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
}
.st_status p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #15110F;
}
.write_review{
border: none;
outline: none;
background: #E6A13A;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: center;
color: #2D4630;
width:152px;
/* height:34px; */
padding: 12px;
}
.st_status_left{
/* border: 1px solid blue; */
width: 20%;
}
.st_status_mid{
/* border: 1px solid blue; */
width: 40%;
}
.ratings{
/* border: 1px solid red; */
margin-top: 4px;
}
.ratings h4{
width: 20%;
}
.rate_bar{
width: 128px;
height: 4px;
background: #D0CFCF80;
margin-right: 4px;
}
.rate{
width: 4%;
height: 4px;
background: #E6A13A;
}
.rate_ninety{
width: 90%;
}
.rate_six{
width: 6%;
}
.tiny_span{
font-family: Gambetta;
font-size: 12px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0em;
text-align: left;
color: #B1B0AF;
}
.big_span{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #63605FA6;
}
.thumbs_up.active{
color: blue;
}
.st_status_right{
/* border: 1px solid blue; */
width: 40%;
padding-right: 48px;
position: relative;
}
.st_right_arrow{
width: 32px;
height: 32px;
background: var(--black);
position: absolute;
top:40px;
right:0;
color: var(--white);
border: none;
outline: none;
transition: .3s ease-in-out;
}
.st_right_arrow:hover{
background: var(--white);
color: var(--black);
}
.st_right_contain{
/* border: 1px solid green; */
width:100%;
/* height: 104px; */
/* height: 100%; */
overflow-x: auto;
gap:8px;
}
.st_status_right a{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
text-decoration: underline;
}
.st_right_img{
width:114px;
flex-shrink: 0;
height: 104px;
}
.attach_right{
/* border: 1px solid green; */
position: absolute;
top:24px;
right:24px;
width: 114.67px;
height: 104px
}
@media(max-width:1280px){
.also_love_bx{
width: 90vw;
}
.often .also_love_bx{
width: 100%;
}
}
@media (max-width:997px){
.prod_bx_one_top{
flex-direction: column;
}
.prod_bx_one_bot{
margin-top: 16px;
}
.prod_bx_one_top_left{
width: 100%;
}
.prod_bx_two_content{
width:90vw;
}
}
@media (max-width:880px){
.st_status{
flex-direction: column;
gap:16px;
}
.st_status_left,.st_status_right,.st_status_mid{
width: 100%;
}
}
@media(max-width:624px){
.often .also_love_bx{
width: 90vw;
}
.prod_bx_one_top_left_top{
flex-direction: column-reverse;
}
.thumbnail-container,#image-board,#acc_image-board{
width:100%;
padding: 0 48px;
}
.chevron_one{
bottom: 0%;
top:50%;
left:15px;
transform: rotate(-90deg) translateX(0%) translateY(-50%);
}
.chevron_two{
top: 50%;
left: 90%;
/* right: 0; */
transform: rotate(-90deg) translateX(0%) translateY(-50%);
}
#image-board,#acc_image-board{
width:100%;
}
.thumb_scroll{
flex-direction: row;
height: 110px;
width: 70vw;
}
.tab_top button{
font-size:14px;
margin-right: 0;
}
/* .popup_content{
overflow-y: auto;
height: 90vh;
} */
}
@media (max-width:500px){
.thumb_scroll{
width: 60vw;
}
.popup_overlay{
/* padding: 24px; */
}
.popup_content{
width: 100%;
border-radius: 16px 16px 0 0;
position: absolute;
bottom: 0;
}
}
/* @media (max-width:624px){
.mobile-display-none{
display: none !important;
}
} */
.cart_det{
/* border: 1px solid red; */
gap:16px;
}
.cart_left{
/* border: 1px solid red; */
width: 60%;
min-height: 324px;
}
.cart_right{
width: 40%;
}
.cart_item_card{
border-top: 1px solid #D1E2C0;
border-bottom: 1px solid #D1E2C0;
width:100%;
min-height: 20px;
margin-bottom: 8px;
}
.cart_table_head{
border: none;
}
.cart_table_head .cart_item_card_one{
padding-left: 0;
}
/* .cart_table_head .cart_item_card_three{
justify-content: left;
} */
.cart_table_head h3{
font-family: Gambetta;
font-size: 14px;
font-weight: 600;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
}
.cart_item_card p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #25282B;
}
.cart_item_card_one{
/* border: 1px solid green; */
width: 55%;
/* gap:16px; */
/* padding-left: 120px; */
position: relative;
display: flex;
gap:12px;
}
.cart_taller_one{
min-height: 144px;
}
.cart_item_one_img{
/* border: 1px solid blue; */
width: 112px;
height: 144px;
/* position: absolute; */
top:0;
left:0;
}
.cart_item_one_details{
/* border: 1px solid red; */
}
.cart_shorter_one p{
position: absolute;
bottom: 0;
left:0;
/* transform: translateX(-50%); */
}
.edit_wishlist{
/* border: 1px solid green; */
gap: 8px;
}
.edit_wishlist a{
text-decoration: underline;
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
color: #25282B;
transition: .3s ease-in-out;
}
.edit_wishlist a:hover{
color: #D44E03;
}
.cart_item_card_two{
/* border: 1px solid green; */
position: relative;
width: 15%;
}
.cart_item_card_three{
/* border: 1px solid green; */
position: relative;
width: 15%;
display: flex;
align-items: end;
/* justify-content: center; */
}
.cart_item_card_three .quantity_container{
margin-left: 0;
}
.cart_item_card_four{
/* border: 1px solid green; */
position: relative;
width: 15%;
}
.cart_payment{
background: #D1E2C066;
padding: 24px 16px;
height: auto;
}
.cart_payment h3{
/* border: 1px solid red; */
width: 100%;
display: flex;
justify-content: space-between;
font-family: Lessti;
font-size: 18px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
}
.cart_payment p{
/* border: 1px solid red; */
width: 100%;
display: flex;
justify-content: space-between;
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
}
/* .cart_payment span{
font-weight: 400;
} */
.to_checkout{
background: #2D4630;
width:100%;
/* border: 1px solid red; */
outline: none;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: center;
color: #FDFDF0;
padding: 12px;
margin-bottom: 8px;
/* border-radius: 10px; */
transition: .3s ease-in-out;
}
.to_checkout:hover{
background: #FDFDF0;
color: #2D4630;
}
.cart_payment button{
background: #2D4630;
width:100%;
border: none;
outline: none;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: 0em;
text-align: center;
color: #FDFDF0;
padding: 12px;
margin-top: 8px;
margin-bottom: 8px;
/* border-radius: 10px; */
transition: .3s ease-in-out;
}
.cart_payment button:hover{
background: #FDFDF0;
color: #2D4630;
}
.cart_hr{
margin-top: 16px;
margin-bottom: 16px;
background: #2D46301A;
width:100%;
height:2px;
}
.cart_form{
border-bottom: 1px solid #63605F;
position: relative;
padding-right: 130px;
}
.cart_form input{
border: none;
outline: none;
background: transparent;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #63605F;
height: 46px;
width: 100%;
padding: 8px 8px 8px 0;
}
.cart_form button{
width: 120px;
position: absolute;
top:0;
right:0;
margin-top: 0;
margin-bottom: 0;
}
.cart_services{
/* border: 1px solid red; */
width: 100%;
min-height: 76px;
gap: 4px;
}
.cart_options{
/* border: 1px solid green; */
padding: 8px 34px;
width: auto;
background: var(--white);
}
@media (max-width:1100px){
/* .cart_item_card_three .quantity_container{
width: 100%;
} */
}
@media (max-width:997px){
.cart_det{
flex-direction: column;
}
.cart_left{
width: 100%;
}
}
@media (max-width:550px){
.cart_table_head,.cart_item_card_two{
display: none;
}
.cart_item_card_one{
width: 100%;
}
.cart_item_card{
position: relative;
padding-right: 70px;
}
.cart_item_card_three{
/* width: 20%; */
position:absolute;
bottom:0;
right: 0;
/* right:7%; */
/* height: 50px; */
}
.cart_item_card_four{
/* width: 20%; */
position:absolute;
top:0;
right:0;
height: 25px;
}
.cart_item_card_four p{
font-weight: 600;
}
}
/* checkout */
.checkout_form{
/* border: 1px solid red; */
}
.checkout_form a{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #15110F;
min-height: 24px;
/* border: 1px solid green; */
transition: .5s ease-in-out;
width: 50%;
}
.checkout_form a:hover .backing_svg{
animation: backing 1s ease-in-out infinite;
}
.checkout_form a:hover {
color: #D44E03;
}
.checkout_form_one{
/* border: 1px solid blue; */
width: 100%;
gap: 24px;
position: relative;
padding-top: 32px;
}
.checkout_form_one h3{
/* margin-bottom: 16px; */
font-family: Lessti;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #2D4630;
position: absolute;
top:0;
left:0;
}
.checkout_in{
border-bottom: 1px solid #B1B0AF;
width: 50%;
position: relative;
}
.checkout_no{
/* border: 1px solid green; */
position: absolute;
top:47%;
left:20px;
transform: translateX(-50%);
font-family: Gambetta;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 24px !important;
color: #B1B0AF;
}
.checkout_in p{
font-family: Gambetta;
font-size: 12px;
font-weight: 600;
line-height: 16px;
letter-spacing: 0em;
text-align: left;
color: #3C3937;
}
.checkout_in input{
width: 100%;
padding: 8px 8px 8px 0;
outline: none;
width: 100%;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #B1B0AF;
border: none;
background: transparent;
}
.checkout_telephone{
padding: 8px 8px 8px 45px !important;
}
.ch_no_padding{
padding-top: 0 !important;
}
.ch_all_width{
width: 100%;
}
.checkout_checkbox p{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
color: #2D330B;
}
.ch_seperate{
/* border:1px solid red; */
display: flex;
flex-direction: column;
/* gap:12px; */
}
.ch_card{
/* border: 1px solid green; */
width: 100%;
min-height: auto;
}
.ch_card_one{
border-top: 1px solid #D1E2C0;
border-bottom: 1px solid #D1E2C0;
width: 100%;
margin-bottom: 10px;
min-height: 96px;
padding:0px 48px 0px 0px;
position: relative;
display: flex;
gap:12px;
}
.p_right{
/* border: 1px solid red; */
width:80%;
}
.p_right p{
margin-bottom: 8px;
margin-top: 8px;
}
.ch_card_one img{
width: 75px;
height: 96px;
/* border: 1px solid red; */
/* position: absolute; */
top:0;
left:0;
object-fit: cover;
}
.ch_card_one p{
width: auto !important;
display: block !important;
}
.ch_card_one span{
font-weight: 400 !important;
}
.abs_one{
/* border: 1px solid green; */
position: absolute;
top:12px;
right:12px;
}
.abs_two{
/* border: 1px solid green; */
position: absolute;
bottom:12px;
right:12px;
}
.checkout_add{
background: #E9F3CE;
padding: 24px;
width: 100%;
}
.ch_add_one{
/* border: 1px solid red; */
}
.ch_add_one p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0em;
text-align: left;
width: 50%;
color: #2D330B;
display: flex;
align-items: center;
justify-content: space-between;
}
.ch_add_one span{
font-weight: 400;
}
.check-filter-armor{
/* border: 1px solid green; */
width:50%;
height:auto;
/* padding:8px 0; */
}
.radio-custom {
opacity: 0;
position: absolute;
}
.radio-custom, .radio-custom-label {
/* border: 1px solid red; */
display: inline-block;
vertical-align: middle;
/* margin: 5px; */
cursor: pointer;
}
.radio-custom-label {
position: relative;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0em;
text-align: left;
display: flex;
align-items: center;
}
.radio-custom + .radio-custom-label:before {
content: '';
border: 1px solid var(--double);
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
color: var(--white);
background: var(--main);
}
.ch_below{
/* border: 1px solid blue; */
min-height: auto;
width: 60%;
padding-right: 6px;
}
.ch_below .check-filter-armor{
width: 100%;
}
.with_card{
/* border: 1px solid red; */
width: 100%;
min-height: auto;
padding-top: 10px;
}
/* .with_card.active{
min-height: auto;
} */
.with_card .checkout_in{
margin-bottom: 12px;
}
.ch_address{
width: 100%;
}
.ch_below svg{
/* border: 1px solid red; */
margin-left: 16px;
}
.cl_bag{
margin-right: 8px;
}
@media (max-width:997px){
.ch_below{
width: 100%;
padding-right: 0;
}
}
@media (max-width:500px){
.adj_left{
padding-left: 38px;
}
.checkout_form a{
width: 100%;
}
.checkout_form_one{
flex-direction: column;
gap:12px;
}
.checkout_in{
width: 100%;
}
.ch_add_one{
flex-direction: column;
gap:8px;
}
.check-filter-armor{
width:100%;
}
.ch_add_one p{
width:100%
}
}
.pay_suc{
/* border: 1px solid red; */
width: 100%;
min-height: 616px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.suc_btn{
border:none;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: center;
color: #FDFDF0;
padding: 10px;
background: #2D4630;
width: 368px;
transition: .3s ease-in-out;
}
.suc_btn:hover{
border: 1px solid #2D4630;
background: transparent;
color: #2D4630;
}
.suc_btn_two{
border: 1px solid #2D4630;
background: transparent;
color: #2D4630;
}
.suc_btn_two:hover{
border: 1px none;
background: #2D4630;
color: #FDFDF0;
}
@media (max-width:500px){
.suc_btn{
width: 100%;
}
.pay_suc{
min-height: 576px;
}
.tr_suc{
justify-content: flex-start;
padding-top: 32px;
padding-bottom: 32px;
}
}
.tr_form{
/* border: 1px solid green; */
width: 368px;
}
.tr_form h2{
font-family: Lessti;
font-size: 24px;
font-weight: 400;
line-height: 36px;
text-align: left;
color: #2D4630;
}
.tr_form h3{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: left;
color: #2D4630;
}
.tr_form a{
font-family: Gambetta;
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-align: left;
color: #040303;
}
.tr_form span{
font-weight: 400;
font-family: Gambetta;
font-size: 14px;
/* font-weight: 600; */
line-height: 20px;
text-align: left;
color: #040303;
}
.tr_form .checkout_in{
width: 100%;
}
.tr_form .suc_btn{
width: 100%;
}
@media (max-width:500px){
.tr_form{
width: 100%;
}
}
.my_div{
/* border: 1px solid red; */
width: 100%;
min-height: 616px;
padding:48px 0;
display: flex;
gap: 72px;
}
.my_div_left{
/* border: 1px solid red; */
width:40%;
min-height: 124px;
}
.my_div_right{
/* border: 1px solid red; */
width:60%;
min-height: 124px;
}
.my_peak{
/* border: 1px solid green; */
width: 100%;
min-height: 34px;
position: relative;
padding-left: 24px;
display: flex;
align-items: center;
}
.my_peak h3{
font-family: Lessti;
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-align: left;
color: #2D330B;
}
.peak_string{
position: absolute;
top:0;
left: 0;
width: 3px;
height: 100%;
background: #DA460D;
}
.my_div_left p{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: left;
color: #0B0908;
}
.peak_string_two{
width: 2px;
background: #2D4630;
}
.peak_string_two p{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: left;
color: #0B0908;
}
.my_peak_two{
background: #E9F3CE;
}
.my_peak_three{
background: transparent;
}
.my_peak_three button{
/* border: 1px solid green; */
padding:8px 24px 8px 0;
border: none;
outline: none;
background: transparent;
}
.my_peak_two a,.my_peak_two button{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: left;
color: #0B0908;
/* border: 1px solid red; */
transition: .5s ease-in-out;
}
.my_peak_two a:hover,.my_peak_two button:hover{
font-weight: 600;
}
.my_div_top{
/* border: 1px solid red; */
font-family: Lessti;
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-align: left;
color: #2D330B;
}
.track_pad{
background: #E9F3CE;
padding: 16px 32px;
/* padding: 21px 32px; */
width: 90%;
min-height: 82px;
padding-right: 185px;
position: relative;
}
.track_pad p{
/* border: 1px solid green; */
width: 100%;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: #2D4630;
margin-bottom: 8px;
}
.track_date{
font-weight: 400;
}
.order_details_btn{
border: none;
outline: none;
text-decoration: none;
position: absolute;
top:30px;
right:32px;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: center;
color: #FDFDF0;
background: #2D4630;
padding: 10px 35px;
transition: .3s ease-in-out;
min-height: 20px;
}
.order_details_btn:hover{
background: #FDFDF0;
color: #2D4630;
}
@media (max-width:997px){
.my_div{
gap: 24px;
}
}
@media (max-width:624px){
.track_pad{
padding-right: 32px;
display: flex;
flex-direction: column;
}
.order_details_btn{
position: relative;
margin-top: 12px;
top:0;
left:0;
}
}
.my_div_top svg{
margin-right: 8px;
}
.ord_bx .track_pad{
width:100%;
padding-right:32px ;
}
.track_contd{
/* border: 1px solid red; */
width: 100%;
min-height: 50px;
position: relative;
}
.track_line{
position: absolute;
top:12px;
left:0;
width: 100%;
height: 2px;
background: #C1CBAE;
}
.track_divide{
/* border: 1px solid blue; */
width: 25%;
height: 100%;
}
.track_check{
/* border: 1px solid red; */
width: 24px;
height: 24px;
border-radius: 50%;
background: #D1E2C0;
z-index: 5;
}
.track_check.active{
background: #2D4630;
color: #D1E2C0;
}
.track_divide:nth-child(5){
align-items: flex-end;
}
.track_divide:nth-child(2){
align-items: flex-start;
}
.track_check p{
color: #2D4630;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: center;
margin-bottom: 0;
}
.ord_p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400 !important;
line-height: 18.2px;
text-align: center !important;
color: #2D4630;
}
.ord_p_first{
text-align: left !important;
}
.ord_p_last{
text-align: right !important;
}
.track_total{
position: absolute;
top:20px;
right:32px;
/* border: 1px solid red; */
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
color:#2D4630;
width:auto !important;
}
@media (max-width:768px){
.my_div{
flex-direction: column;
}
.my_div_right{
width: 100%;
}
.my_div_left{
position: fixed;
top:140px;
padding: 12px;
right:24px;
box-shadow: 0px 3px 10px 2px rgba(0, 0, 0, 0.1);
border-radius: 10px;
background: var(--bg);
z-index:10;
/* display:none; */
opacity: 0;
transform: translateX(110%);
transition: .5s ease-in-out;
}
.my_div_left.active{
opacity: 1;
transform: translateX(0);
}
}
@media (max-width:500px){
}
.prof_content{
/* border: 1px solid red; */
width:100%;
background: #E9F3CE;
padding: 4px;
gap: 4px;
}
.prof_content button{
/* border: 1px solid green; */
width: 33.333%;
min-height: 36px;
background:transparent;
color: #2D463080;
outline: none;
border: none;
}
.prof_content button.active{
background: #fff;
color: #2D4630;
}
.my_content{
/* border: 1px solid red; */
width: 100%;
}
.my_content .track_pad{
width: 100%;
margin-bottom: 8px;
}
.my_content .tab-content{
flex-direction: column;
}
.profile_popup{
/* border: 1px solid green; */
background: #F9FFD7;
}
.pop_top{
/* border: 1px solid red; */
width: 100%;
}
.pop_top p{
font-family: Gambetta;
font-size: 20px;
font-weight: 600;
line-height: 30px;
text-align: left;
}
.pop_mid{
/* border: 1px solid red; */
width: 100%;
}
.pop_mid h3{
font-family: Gambetta;
font-size: 24px;
font-weight: 600;
line-height: 36px;
text-align: left;
}
.pop_mid p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: left;
}
.pop_bot{
/* border: 1px solid red; */
width: 100%;
}
.pop_bot button{
background: #2D4630;
outline: none;
border: none;
width: 100%;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
/* text-align: center; */
color: #FDFDF0;
padding: 10px 0;
transition: .3s ease-in-out;
}
.dark_btn:hover{
background: #FDFDF0;
border: 1px solid #2D4630;
color: #2D4630;
}
.light_btn{
background: #FDFDF0 !important;
border: 1px solid #2D4630 !important;
color: #2D4630 !important;
}
.light_btn:hover{
background: #2D4630 !important;
border: none !important;
color: #FDFDF0 !important;
}
.prof_sett{
/* border: 1px solid red; */
width: 100%;
min-height: 200px;
}
.sett_one{
background: #E9F3CE;
padding: 16px 24px;
margin-bottom: 16px;
}
.sett_flex{
/* border: 1px solid green; */
display: flex;
align-items: center;
justify-content: space-between;
}
.sett_flex h3{
font-family: Lessti;
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-align: left;
color: #2D4630;
}
.sett_flex button,.sett_flex a{
width: 149px;
min-height: 28px;
border: none;
outline: none;
background: #2D4630;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: center;
color: #FDFDF0;
transition: .3s ease-in-out;
}
.sett_flex button:hover,.sett_flex a:hover{
background: #FDFDF0;
color: #2D4630;
border: 1px solid #2D4630;
}
.sett_below {
/* border: 1px solid red; */
}
.sett_below p{
/* border: 1px solid green; */
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: #2D4630A3;
}
.sett_below span{
font-weight: 600;
color: #2D4630;
}
.sett_card{
/* border: 1px solid red; */
width: 100%;
min-height: 106px;
padding: 16px;
background: #DBE9C6;
}
.sett_card_left h3{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: #2D4630;
}
.sett_card p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 18.2px;
text-align: left;
color: #2D4630B2;
}
.sett_card_left button{
border: none;
background: #2D4630;
border-radius: 20px;
padding: 8px;
font-family: Gambetta;
font-size: 12px;
font-weight: 500;
line-height: 20px;
text-align: left;
color: #FDFDF0;
}
.sett_card_right{
/* border: 1px solid blue; */
}
.sett_card_right button{
border:none;
background: #CBD8B6;
display:flex;
align-items: center;
justify-content: center;
width: 96px;
padding: 8px 0;
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 18.2px;
text-align: center;
color: #2D4630;
transition: .3s ease-in-out;
}
.sett_card_right button:hover{
background: #2D4630;
color: #fdfdf0;
}
.sett_card_right button svg{
margin-right: 8px;
/* border: 1px solid red; */
}
.pop_mid .si_form_one p{
font-family: Gambetta;
font-size: 12px;
font-weight: 600;
line-height: 16px;
text-align: left;
color: #3C3937;
}
.remove_pop_mid.active,.remove_pop_bot.active,.rem_add_pop_mid.active,.add_btn_bx.active{
display: none;
}
.put_pop_mid,.add_add_pop_mid{
/* border: 1px solid green; */
display: none;
}
.put_pop_mid.active,.add_add_pop_mid.active{
display: flex;
}
.put_pop_mid h3{
font-family: Gambetta;
font-size: 20px;
font-weight: 600;
line-height: 28px;
text-align: center;
color: #040303;
}
.put_pop_mid p{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
color: #040303;
}
.pri_div{
/* border:1px solid green; */
width:100%;
min-height:500px;
padding: 48px 0;
}
.pri_div h2{
font-family: Lessti;
font-size: 32px;
font-weight: 400;
line-height: 48px;
text-align: center;
color: #2D330B;
}
.pri_div h3{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: #2D4630;
}
.pri_div p{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: #2D4630;
}
.pri_div .quest{
font-size: 18px;
font-weight: 600 !important;
}
.quest_mid{
/* border: 1px solid green; */
}
.quest_mid p{
text-align: center !important;
/* border: 1px solid red; */
width: 75%;
}
.faq_left{
font-family: Lessti !important;
font-size: 24px !important;
font-weight: 400 !important;
line-height: 36px !important;
text-align: left !important;
color: #2D330B !important;
}
.faq_bx{
/* border: 1px solid green; */
width: 100%;
/* padding: 0 40px; */
}
.faq_one{
border-bottom: 1px solid #D1E2C0;
width: 100%;
padding: 24px 40px;
}
button.accordion {
width: 100%;
background:transparent;
border: none;
outline: none;
text-align: left;
padding: 15px 20px;
font-size: 18px;
color: #333;
cursor: pointer;
transition: background-color 0.2s linear;
}
button.accordion:after {
font-family: FontAwesome;
content: "\f107";
font-family: "fontawesome";
font-size: 18px;
float: right;
background: #2D4630;
padding: 5px;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
color:#fdfdf0
}
button.accordion.is-open:after {
content: "\f106";
}
button.accordion:hover,
button.accordion.is-open {
background: transparent;
}
.accordion-content {
background: transparent;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-in-out;
}
.accordion-content a{
font-weight: 600 !important;
text-decoration: underline;
color: #2D4630;
}
/* about amabride css */
.ab_one{
/* border: 1px solid green; */
width: 100%;
min-height: 435px;
margin-top: 48px;
gap: 56px;
}
.ab_one_left{
width: 50%;
padding:40px 0;
/* border: 1px solid red; */
}
.ab_one_left h3{
font-family: Lessti;
font-size: 32px;
font-weight: 400;
line-height: 48px;
text-align: left;
color: #1E2D20;
}
.ab_one_left p{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: #2D4630;
}
.ab_one_right{
width: 50%;
object-fit: cover;
}
.ab_hr{
background: #D1E2C0;
width: 100%;
height: 2px;
margin: 56px 0 ;
}
.ab_two{
/* border: 1px solid green; */
width: 100%;
min-height: 752px;
margin-bottom: 120px;
gap: 40px;
}
.ab_two_left{
width: 40%;
object-fit: cover;
}
.ab_two_right{
width: 60%;
padding: 40px 0 12px 0;
/* border: 1px solid red; */
}
.ab_two_right h3{
font-family: Lessti;
font-size: 32px;
font-weight: 400;
line-height: 48px;
text-align: left;
color: #1E2D20;
}
.ab_below{
/* border: 1px solid red; */
width: 100%;
gap: 16px;
}
.ab_below_one{
background: #F9F0D9;
width: 48%;
padding: 24px;
min-height: 300px;
}
.ab_number{
background: #2D4630;
width: 40px;
height: 40px;
border-radius: 50%;
font-family: Gambetta;
font-size: 24px;
font-weight: 600;
line-height: 36px;
text-align: left;
color: #F9F0D9;
}
.ab_below h3{
font-family: Gambetta;
font-size: 18px;
font-weight: 600;
line-height: 27px;
text-align: left;
color: #2D4630;
}
.ab_below p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 21px;
text-align: left;
color: #2D4630;
}
@media (max-width:997px){
.ab_one{
flex-direction: column-reverse;
}
.ab_one_left{
width: 100%;
}
.ab_one img{
width: 100%;
}
.ab_two{
flex-direction: column;
}
.ab_two_right{
width: 100%;
}
.ab_two img{
width: 100%;
}
}
@media (max-width:624px){
.ab_below{
flex-direction: column;
}
.ab_below_one{
width: 100%;
}
}
.custom-select-parent .custom-dropdown-menu-item.is-select{
color: var(--orange) !important;
}
.tab_scroll{
/* border: 1px solid green; */
overflow-x: auto;
width: 100%;
}
.tab_tab{
/* border: 1px solid red; */
min-width: 1024px;
}
.tab_tab h3{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 20px;
text-align: left;
color: #2D4630;
}
.tab_tab p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
/* text-align: center; */
color: #2D4630;
}
.tab_top{
/* border: 1px solid green; */
width:100%;
min-height: 96px;
background: #D1E2C0;
}
.tab_top_one{
border:1px solid #C1CBAE;
width:33.333%;
/* position: relative; */
/* padding: 14px 0 0 24px; */
}
.last_tab h3{
margin: 14px 0 0 24px;
}
.tab_top_one h3{
margin-left: 24px;
}
.p_divide{
border:1px solid #C1CBAE;
width: 100%;
min-height: 48px;
background: #E9F3CE;
}
.p_divide p{
/* border: 1px solid green; */
width: 50%;
display: block;
display: flex;
/* justify-content: center; */
align-items: center;
padding-left: 24px;
}
.p_divide p:first-child{
border-right:1px solid #C1CBAE;
}
.last_tab{
justify-content: space-between;
}
.tab_bottom{
/* border: 1px solid green; */
width:100%;
min-height: 200px;
}
.tab_bottom .tab_bot{
border:1px solid #C1CBAE;
min-height: 48px;
width: 33.333%;
padding-top: 0;
}
.tab_bot_list{
/* border:1px solid #C1CBAE; */
width: 100%;
}
.tab_bot_list p{
border-bottom:1px solid #C1CBAE;
display: block;
min-height: 48px;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
padding-left: 24px;
}
.tab_bot_list p:first-child{
border-right:1px solid #C1CBAE;
}
/* @media (max-width:1120px){
.tab_tab{
width: 90vw;
}
} */
table {
border-collapse: collapse;
border-spacing: 0px;
text-align: left;
width: 100%;
}
td {
border: 1px solid #bbb;
padding: 4px 8px;
}
th {
border: 1px solid #bbb;
padding: 4px 8px;
}
.last_th{
padding-bottom: 0;
}
th {
white-space: nowrap;
background: #D1E2C0;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 20px;
text-align: center;
}
.mask {
overflow: hidden;
}
.mask > div {
background: linear-gradient(white, white), linear-gradient(white, white) right, radial-gradient(at 0 50%, rgba(0, 0, 0, .3), transparent 70%), radial-gradient(at 100% 50%, rgba(0, 0, 0, .3), transparent 70%) right;
background-size: 10px 100%;
background-repeat: no-repeat;
background-attachment: local, local, scroll, scroll;
overflow: auto;
}
.sec_td p{
border-bottom:1px solid #C1CBAE;
padding: 5px;
}
.sec_td p:last-child{
border: none;
}
.double{
/* border: 1px solid red; */
}
.top_double{
background: #D1E2C066;
margin-top: 14px;
}
.double p{
width: 50%;
/* border: 1px solid green; */
padding: 5px;
border-right:1px solid #C1CBAE;
}
.double p:last-child{
border-right: none;
}
.last_a{
font-family: Gambetta;
font-size: 14px;
font-weight: 600;
line-height: 21px;
text-align: left;
color: #2D4630;
text-decoration: underline;
}
.after_pag{
display: none;
}
.after_pag button{
border: 1px solid #2D4630;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: center;
color: #2D4630;
padding-top: 12px;
padding-bottom: 12px;
background: transparent;
width: 100%;
transition: .3s ease-in-out;
}
.after_pag button:hover{
background: #2D4630;
color: #fdfdf0;
}
.tab_split{
/* border: 1px solid green; */
width: 100%;
}
.tab_split_top{
min-height: 48px;
/* border: 1px solid blue; */
/* display: block; */
/* text-align: center !important; */
}
.tab_split_bot{
border:1px solid #C1CBAE;
width: 100%;
}
.tab_split_bot p{
/* border: 1px solid blue; */
width: 50%;
min-height: 48px;
display: flex;
justify-content: center;
align-items: center;
}
.tab_split_bot p:first-child{
border-right:1px solid #C1CBAE;
}
.tab_cast .tab_bottom{
min-height: auto;
height: 50px;
}
.to_payment_successful_two{
display: none;
}
.cart_flex_two{
display: none;
}
@media (max-width:1300px){
.tab_scroll{
width: 90vw;
}
}
@media (max-width:997px){
/* .to_payment_successful{
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.prod_checkout{
position: relative;
} */
.adj_down{
margin-bottom: 32px;
}
.to_payment_successful{
display: none;
}
.to_payment_successful_two{
display: flex;
}
}
@media (max-width:624px){
.popup_overlay{
align-items: flex-end !important;
}
.popup_content{
/* border: 1px solid red; */
border-radius: 16px 16px 0 0;
width: 100%;
}
.cart_spin{
bottom: 160px !important;
}
.cart_gift{
bottom: 55px !important;
}
.cart_flex{
display: none;
}
.cart_flex_two i{
margin-right: 8px;
}
.cart_flex_two{
position: relative;
display: flex;
padding: 12px 12px 12px 80px;
position: fixed;
bottom: 0;
left: 0;
/* border: 1px solid green; */
width: 100%;
min-height: auto;
z-index: 10;
background: var(--bg);
}
.cart_flex_two h3{
position: absolute;
top:50%;
left:12px;
transform: translateY(-50%);
}
.pagination-container{
/* display: none; */
}
.after_pag{
display: flex;
justify-content: center;
width:100%;
/* border: 1px solid red; */
}
.bd_pag{
flex-direction: column;
gap:16px;
align-items: center;
}
}
.tutorial{
background: rgba(0, 0, 0, 0.8);
position: fixed;
top:0;
left:0;
width: 100%;
height: 100vh;
z-index:98;
/* padding: 64px 16px; */
transition:.5s ease-in-out;
overflow: hidden;
}
.tutorial.active{
opacity: 0;
transform: translateX(-100%);
}
.tt_box{
/* border: 1px solid blue; */
gap: 8px;
/* margin-top: 64px; */
width: 375px;
position: absolute;
top:64px;
left:50%;
transform: translateX(-50%);
}
.tt_box button{
border: 1px solid var(--white);
/* width: 168px; */
width: 50%;
background: transparent;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: center;
color: var(--white);
padding: 12px;
}
.tutorial_btn_two{
background: #2D4630 !important;
border: none !important;
}
.tip_text{
/* border: 1px solid blue; */
position: absolute;
}
.tip_text_one{
bottom: 140px;
right: 130px;
transition: .5s ease-in-out;
}
.tip_text_one.active{
opacity: 0;
transform: translateX(-50px);
}
.tip_text_two{
bottom: 70px;
right: 140px;
width: 200px;
transition: .5s ease-in-out;
opacity: 0;
transform: translateX(-50px);
}
.tip_text_two.active{
opacity: 1;
transform: translateX(0px);
}
.tutorial h3{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
color: var(--white);
/* border: 1px solid red; */
}
.tutorial p{
/* border: 1px solid red; */
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: center;
color: var(--white);
}
.tt_svg{
width: 100%;
display: flex;
justify-content: flex-end;
}
.is_here{
color: var(--orange) !important;
}
@media(max-width:525px){
.tip_text_one{
right: 100px;
}
.tip_text_two{
right: 110px;
}
}
/* spin new css */
.spin_box{
border: 10px solid #fff;
width:500px;
height: 500px;
position: relative;
border-radius: 50%;
transition: all ease-in-out 5s;
transform: rotate(90deg);
overflow: hidden;
}
.spin_box span{
width: 100%;
height: 100%;
display: inline-block;
position: absolute;
font-size: 20px;
color: var(--black);
}
.span1{
clip-path: polygon(0 17%,0 50%,50% 50%);
background-color: #e9ffbe;
}
.span2{
clip-path: polygon(0 17%,30% 0,50% 50%);
background-color: #ffdfb7;
}
.span3{
clip-path: polygon(30% 0,71% 0,50% 50%);
background-color: #f9f0d9;
}
.span4 {
clip-path: polygon(71% 0,100% 18%,50% 50%);
background-color: #ffcae1;
}
.span5{
clip-path: polygon(100% 18%,100% 50%,50% 50%);
background-color: #d8cefa;
}
.spin_box_2{
width: 100%;
height: 100%;
transform: rotate(180deg);
}
.spin_box_2 .span1{
background-color: #cffffc;
}
.spin_box_2 .span2{
background-color: #eeeaea;
}
.spin_box_2 .span3{
background-color: #feffdb;
}
.spin_box_2 .span4{
background-color: #d3ab9e;
}
.spin_box_2 .span5{
background-color: #d3e0d0;
}
.spin_box_1 .span1 h5{
position: absolute;
top: 40%;
right: 69%;
transform: rotate(200deg);
text-align: center;
}
.spin_box_1 .span2 h5{
position: absolute;
top: 24%;
right: 62%;
transform: rotate(-127deg);
text-align: center;
}
.spin_box_1 .span3 h5{
position: absolute;
top: 18%;
right: 42%;
transform: rotate(-90deg);
text-align: center;
}
.spin_box_1 .span4 h5{
position: absolute;
top: 26%;
right: 21%;
transform: rotate(-47deg);
text-align: center;
}
.spin_box_1 .span5 h5{
position: absolute;
top: 40%;
right: 10%;
transform: rotate(-15deg);
text-align: center;
}
.spin_box_2 .span1 h5{
position: absolute;
top: 39%;
right: 70%;
transform: rotate(197deg);
text-align: center;
}
.spin_box_2 .span2 h5{
position: absolute;
top: 26%;
right: 59%;
transform: rotate(-130deg);
text-align: center;
}
.spin_box_2 .span3 h5{
position: absolute;
top: 22%;
right: 46%;
transform: rotate(270deg);
text-align: center;
}
.spin_box_2 .span4 h5{
position: absolute;
top: 25%;
right: 24%;
transform: rotate(310deg);
text-align: center;
}
.spin_box_2 .span5 h5{
position: absolute;
top: 41%;
right: 21%;
transform: rotate(-14deg);
text-align: center;
}
.spin_btn{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 75px;
height: 75px;
border-radius:50%;
border: 4px solid var(--white);
background: var(--black);
color: var(--white);
box-shadow: 0 5px 20px #000;
font-weight: bold;
cursor: pointer;
z-index: 1000;
font-size: 22px;
}
.spin_btn:active{
width: 70px;
height: 70px;
font-size: 20px;
}
.spin_mainbox.animate:after{
animation: animateArrow 0.7s ease infinite;
}
@keyframes animateArrow {
50%{
right: -50px;
}
}
audio{
display: none;
}
.spin_click{
position: absolute !important;
top:50% !important;
right: 0 !important;
transform: translateY(-50%) rotate(90deg);
z-index: 9999;
/* border: 1px solid green; */
}
.claim_gift{
color: blue;
}
@media (max-width:624px){
.spin_box{
width:400px;
height: 400px;
}
.spin_btn{
width: 65px;
height: 65px;
font-size: 20px;
}
.spin_btn:active{
width: 60px;
height: 60px;
font-size: 16px;
}
}
.uk_size{
/* border-top:1px solid #25282B40; */
width: 100%;
}
/* 3d model css */
.bgs_cover{
/* border: 1px solid red; */
position: fixed;
top:50%;
left:10px;
transform: translateY(-50%);
z-index: 9;
}
.bgs{
/* border: 1px solid blue; */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
/* padding-bottom: 66px; */
max-height: 50vh;
overflow: auto;
}
.bgs img{
/* border: 1px solid green; */
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
cursor: pointer;
padding: 4px;
flex-shrink: 0;
}
.bgs img.chosen{
border: 2px solid #FFC9AB;
}
.file-input-wrapper {
/* border: 1px solid red; */
/* position: relative; */
width: 56px;
height: 56px;
display: inline-block;
position: absolute;
bottom: -66px;
left: 50%;
transform: translateX(-50%);
}
.file-input-wrapper input[type="file"] {
/* border: 1px solid blue; */
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.file-input-wrapper label {
/* border: 1px solid green; */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #f0f0f0;
cursor: pointer;
transition: background-color 0.3s ease;
}
.file-input-wrapper:hover label {
background-color: #e0e0e0;
}
.file-input-wrapper i {
/* border: 1px solid yellow; */
color: #1E2D20;
font-size: 24px;
}
.model_loading{
background:rgba(0, 0, 0, 0.2);
position: fixed;
top:0;
left:0;
width: calc(100vw - 580px);
height: 100vh;
z-index: 999;
transition: .5s ease-in-out;
}
.model_loading.active{
opacity: 0;
visibility: hidden;
}
.model_loading img{
width: 100px;
}
.load_up{
background: #1E2D20;
/* background: green; */
width: 100%;
height: 50%;
position: absolute;
top:0;
left:0;
transition: 1s ease-in-out;
}
.model_loading.active .load_up{
top: -100%;
}
.load_down{
background: #1E2D20;
/* background: red; */
width: 100%;
height: 50%;
position: absolute;
bottom:0;
left:0;
transition: 1s ease-in-out;
}
.model_loading.active .load_down{
bottom: -100%;
}
.model_loading p{
font-family: lessti;
color: var(--white);
font-size: 48px;
margin-bottom: 16px;
animation: bounced 1s ease-in-out infinite;
/* transition:transform .3s ease-in-out; */
}
.model_loading.active .model_loading p{
/* transform: scale(1.5); */
}
.model_wrapper{
/* border: 2px solid red; */
/* width: 100%; */
width: calc(100vw - 580px);
height: 100vh;
overflow:hidden;
position: relative;
/* display: none; */
}
.model_nav{
/* border:1px solid yellow; */
width: calc(100vw - 580px);
min-height: 74px;
padding: 32px 40px 0 40px;
position: fixed;
z-index: 99;
top:0;
left: 0;
}
.model_back{
/* border: 1px solid yellow; */
border-radius: 50%;
color: var(--white);
width: 44px;
height: 44px;
font-size: 24px;
background: #1E2D20;
}
.model_web_logo{
/* border: 1px solid green; */
width:109px;
height: 42px;
padding: 3px 20px;
border-radius: 24px;
background: var(--white);
}
/* ===================== */
.texture-options img {
width: 85px;
height: 85px;
cursor: pointer;
margin: 5px;
padding: 6px;
border-radius: 16px;
transition: .5s ease-in-out;
}
.texture-options img.active{
border: 2px solid #FFC9AB;
}
.customise_opacity{
border: 1px solid red;
}
.customise_opacity p{
/* border: 1px solid green; */
}
.customise_opacity input[type="range"] {
-webkit-appearance: none;
width: 100%;
height: 4px;
background: #FFAE81;
outline: none;
border-radius: 8px;
/* transition: opacity .2s; */
}
.customise_opacity input[type="range"]:hover {
}
/* ====================== */
.model_customise{
/* border: 1px solid red; */
width: 580px;
height: 100vh;
overflow: hidden;
overflow-y: auto;
padding: 40px 24px;
position: fixed;
top:0;
/* right:0; */
right:-580px;
z-index: 9;
background: #141D15;
transition: .3s ease-in-out;
}
.model_customise.active{
right: 0;
}
.model_cus_top{
/* border: 1px solid green; */
margin-bottom: 33px;
}
.model_cus_svg{
/* border: 1px solid blue; */
position: relative;
cursor: pointer;
}
.model_cus_svg .svg_span{
border:1px solid #FFC9AB;
width:100px;
height:100px;
border-radius:50%;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%) scale(.1);
transition: .3s ease-in-out;
}
.model_cus_svg:hover .svg_span{
transform: translate(-50%,-50%) scale(.5);
}
.model_cus_top span{
font-family: Lessti;
font-size: 20px;
font-weight: 400;
line-height: 28px;
text-align: center;
color: #FFC9AB;
margin-left: 26px;
}
.model_cus_bot{
/* border: 1px solid green; */
}
.model_cus_bot h3{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
/* text-align: center; */
color: #FDFDF0;
}
.customise_box{
border: 1px solid #404942;
gap:16px;
padding: 16px;
border-radius:16px;
background: #FFFFFF0D;
}
.customise_box button{
border: none;
background: transparent;
outline: none;
}
.customise_box button p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: center;
color: #FDFDF0;
}
.customise_box button input[type=checkbox] {
border:1px solid #FFAE81B2;
margin-right: 0;
width: 24px;
height: 24px;
border-radius: 50%;
}
.customise_box button input[type=checkbox]:checked {
background-color: #FFC9AB;
}
.customise_box button input[type=checkbox]:before {
/* border: solid var(--dark); */
}
.customise_box .customise_title{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
/* text-align: center; */
color: #FDFDF0;
}
.solid_fill{
/* border: 1px solid yellow; */
gap:16px;
margin-bottom:36px;
}
.coolors{
border: none;
width: 48px;
height:48px;
border-radius: 50%;
position: relative;
}
.coolors svg{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
/* border:1px solid green; */
cursor: pointer;
}
input[type="color"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* border: none; */
border: 2px solid #B6A29C;
width: 48px;
height: 48px;
cursor: pointer;
border-radius: 50%;
overflow: hidden;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 50%;
}
.color-btn {
width: 48px;
height: 48px;
border: 2px solid #B6A29C !important;
border-radius: 50%;
cursor: pointer;
}
.color-btn[data-color="#6D4539"] { background-color: #6D4539; }
.color-btn[data-color="#242322"] { background-color: #242322; }
.color-btn[data-color="#A07C5A"] { background-color: #A07C5A; }
.color-btn[data-color="#A64725"] { background-color: #A64725; }
.color-btn[data-color="#E558D2"] { background-color: #E558D2; }
.color-btn[data-color="#8C8282"] { background-color: #8C8282; }
.color-btn[data-color="#57B2E6"] { background-color: #57B2E6; }
.model_control{
/* border:1px solid green; */
/* width: 20vw; */
width: 580px;
height: 100%;
background: #1E2D20;
position: fixed;
/* z-index: 99; */
top:0;
right: 0;
padding: 56px 40px;
overflow:auto;
}
.control_top{
/* border:1px solid green; */
width: 100%;
margin-bottom: 32px;
}
.control_top h3{
font-family: Lessti;
font-size: 20px;
font-weight: 400;
line-height: 28px;
/* text-align: center; */
color: #FFC9AB;
}
.design_upload{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: center;
color:var(--white);
gap:8px;
padding: 8px 15px;
background: #FFFFFF26;
border-radius: 8px;
outline: none;
border: none;
}
.model_selection{
/* border: 1px solid red; */
width: 100%;
/* gap: 12px; */
}
.model_select{
border: 1px solid #404942;
position: relative;
padding: 16px;
border: 1px solid #404942;
border-radius: 16px;
margin-bottom: 12px;
}
.model_accordion{
/* border: 1px solid green; */
padding:0 !important;
}
.model_accordion h3{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
/* text-align: center; */
color: #FDFDF0;
}
.model_accordion::after{
position: absolute;
top:16px;
right:16px;
/* border: 1px solid red; */
}
.model_accordion_content{
/* border: 1px solid green; */
margin-top: 16px;
gap:12px;
padding: 0 !important;
}
.model_mini{
/* border: 1px solid red; */
width: 74px;
/* background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(153, 153, 153, 0.2) 100%); */
min-height: 74px;
margin:8px;
border-radius: 12px;
overflow: hidden;
padding: 8px;
transition: .3s ease-in-out;
position: relative;
}
/* ====================================== */
.model_mini::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.model_mini.raul::before{
opacity: 0;
}
/* ====================================== */
.model_mini img{
background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(153, 153, 153, 0.2) 100%);
border-radius: 12px;
/* border: 1px solid green; */
width: 100%;
height: 100%;
object-fit: cover;
transition: .3s ease-in-out;
position: relative;
opacity: 0;
}
.model_mini img.raul{
opacity: 1;
}
.model_mini img:hover {
transform: scale(1.5);
}
.model_empty{
/* border: 1px solid green; */
/* width: 295px; */
width: calc(100vw - 580px);
height: 100vh;
position: fixed;
top:0;
left:0;
/* transform: translateY(-50%); */
z-index: 9;
background: #4c5c4e;
transition:.3s ease-in-out;
}
.model_empty.active{
transform: translateY(300px);
opacity: 0;
visibility: hidden;
/* display: none; */
}
.model_empty_mid{
/* border:1px solid red; */
width:295px;
position: relative;
padding-top: 116px;
}
.model_svg{
position: absolute;
top:0;
}
.model_svg:first-child{
/* border: 1px solid green; */
left:37px;
top: 58px;
}
.model_svg:nth-child(2){
/* border: 1px solid red; */
top:0;
left: 50%;
transform: translateX(-50%);
}
.model_svg:nth-child(3){
/* border: 1px solid blue; */
right:24px;
top: 58px;
}
.model_empty_mid h2{
font-family: Lessti;
font-size: 33px;
font-weight: 400;
line-height: 44px;
text-align: center;
color: #FDFDF0;
}
.model_empty_mid p{
font-family: Gambetta;
font-size: 20px;
font-weight: 400;
line-height: 26px;
text-align: center;
color: #FDFDF0;
}
.model_create{
width:100%;
min-height: 48px;
gap:7px;
background: #FDFDF0;
border-radius: 8px;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: center;
border: none;
outline: none;
}
.model_empty_arrow{
/* border: 1px solid red; */
position: absolute;
bottom: 0;
right:-105px;
/* transition: .3s ease-in-out; */
}
@keyframes moveBackForth {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(50px, -28.87px);
}
}
.model_create:hover + .model_empty_arrow {
animation: moveBackForth 2s infinite;
}
.model_popup{
background: rgba(0, 0, 0, 0.8);
}
.model_popup .popup_content{
background: #FFFFFF14;
border-radius: 8px;
/* color: var(--white); */
width: 524px;
}
.model_popup .pop_top{
/* border: 1px solid green; */
border-bottom:1px solid #FDFDF026;
padding-bottom: 12px;
}
.model_popup .pop_top p{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: #FDFDF0;
}
.model_popup .pop_mid h3{
font-family: Gambetta;
font-size: 18px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: #FDFDF0;
}
.model_popup .pop_mid p{
color: #FDFDF0;
}
.modal_btn{
background: #FDFDF0 !important;
color: #2D4630 !important;
border-radius: 4px;
}
.modal_btn:hover{
background: #2D4630 !important;
color: #FDFDF0 !important;
}
.model_popup .form-input{
/* border: 1px solid green; */
background: #FFFFFF1A;
}
.model_popup .form-input label{
width: auto;
/* border: 1px solid red; */
}
/* multi upload drag and drop js */
.form {
width: 100%;
background: #FFFFFF1A;
/* border: 1px solid red; */
border-radius: 6px;
}
.form__container {
/* border: 1px solid blue; */
position: relative;
width: 100%;
/* height: 124px; */
height: auto;
padding: 16px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
font-family: Satoshi;
color: silver;
/* margin-bottom: 5px; */
}
.form__container svg{
margin-bottom: 12px;
}
.form__container span{
font-size: 14px;
font-family: Satoshi;
margin-top: 4px;
}
.form__container.active {
background-color: rgba(192, 192, 192, 0.2);
}
.form__file {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
cursor: pointer;
opacity: 0;
}
.form__files-container {
display: block;
width: 100%;
font-size: 0;
padding-top: 20px;
/* border-top: 1px solid #fff; */
}
.form__image-container {
display: inline-block;
width: 49%;
height: 200px;
margin-bottom: 10px;
position: relative;
}
.form__image-container:not(:nth-child(2n)) {
margin-right: 2%;
}
.form__image-container:after {
content: "✕";
position: absolute;
line-height: 200px;
font-size: 30px;
margin: auto;
top: 0;
right: 0;
left: 0;
text-align: center;
font-weight: bold;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
.form__image-container:hover:after {
opacity: 1;
cursor: pointer;
}
.form__image {
-o-object-fit: contain;
object-fit: contain;
width: 100%;
height: 100%;
}
.model_pricing{
position: fixed;
bottom:0;
left:0;
width: calc(100vw - 580px);
/* height: 60px; */
z-index: 1;
/* border: 1px solid red; */
padding:0 40px 24px 40px;
}
.model_pricing_details{
width: 100%;
height: auto;
/* border: 1px solid green; */
background: rgba(255, 255, 255, 0.2);
padding: 18px 16px;
border-radius: 12px;
}
.model_pricing_details p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: left;
color:var(--white)
}
.model_pricing_details span{
font-family: Gambetta;
font-size: 16px;
font-weight: 700;
line-height: 24px;
text-align: left;
color:var(--white)
}
.model_pricing_details button{
font-family: Gambetta;
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-align: center;
padding: 8px 22px;
color: #2D4630;
outline: none;
border-radius: 4px;
border: none;
}
.model_mobile_control{
display: none;
}
.hint{
/* border: 1px solid red; */
width: 90%;
}
.hint svg{
width: 24px;
height: 24px;
margin-right:8px ;
/* border: 1px solid red; */
}
.hint p{
font-family: Gambetta;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 21px !important;
text-align: left;
color: #FDFDF0;
}
.model_body_one{
/* border: 1px solid yellow; */
width: 100%;
gap: 16px;
}
.model_body_one p{
/* border: 1px solid green; */
width: 10%;
font-family: Gambetta;
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-align: left;
color: #FFFFFF;
margin-top: 16px;
}
.model_sum_right{
/* margin-top: 12px; */
/* border: 1px solid red; */
width: 90%;
}
.model_sum{
margin-top: 12px;
/* border: 1px solid red; */
}
.model_sum p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: left;
color:var(--white);
}
.model_sum span{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: left;
color:var(--white);
}
.model_sum_2 p{
/* border: 1px solid yellow; */
font-weight: 600;
}
.model_sum_2 span{
/* border: 1px solid yellow; */
font-weight: 600;
}
.model_popup_overlay{
z-index:9999;
backdrop-filter: blur(10px);
}
.proceed_pop_bot{
border-top:1px solid #FDFDF026;
margin-top: 8px;
padding-top:12px;
}
.model_body_one .model_mini{
/* border:1px solid red; */
width:56px;
min-height:56px;
}
.material_float{
/* border:1px solid red; */
}
.material_float p{
color:var(--white);
width:100%;
margin-top:0;
text-align:center;
}
.model_mid_pop{
position: relative;
}
.model_mid_pop2{
/* border: 1px solid red; */
width:100%;
min-height: 200px;
background: green;
position: absolute;
top:0;
left: 0;
}
.back_btn{
border: none;
cursor: pointer;
padding: 5px;
outline: none;
background: transparent;
color: var(--white);
}
.back_btn i{
margin-right: 4px;
}
.back_btn:hover i{
animation: slide_right 1s ease-in-out;
}
@keyframes slide_right {
0%{
transform: translateX(0);
}
50%{
transform: translateX(-10px);
}
100%{
transform: translateX(0);
}
}
.model_modal_textarea{
/* border: 1px solid */
border-bottom: 1px solid #B1B0AF;
}
.model_modal_textarea p{
font-family: Gambetta;
font-size: 12px;
font-weight: 600;
line-height: 16px;
text-align: left;
color: #FDFDF0B2;
margin-bottom: 4px;
}
.model_modal_textarea textarea{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: #B1B0AF;
width: 100%;
min-height: 52px;
background: transparent;
/* border: 1px solid blue; */
border: none;
outline: none;
}
.draggable {
cursor: pointer;
}
.picked{
border:2px solid #FFC9AB;
/* padding: 8px; */
}
.picked img{
background: linear-gradient(180deg, rgba(255, 201, 171, 0.15) 0%, rgba(255, 201, 171, 0.4) 100%);
}
.model_end svg{
margin-bottom:32px;
}
.model_end h3{
text-align: center !important;
margin-bottom: 12px;
}
.explore_split{
/* border:1px solid green; */
gap:8px;
}
.explore_split button{
background: #D1E2C0;
color: #2D4630;
}
.highlight img{
/* border: 2px solid red; */
background: linear-gradient(180deg, rgba(255, 201, 171, 0.15) 0%, rgba(255, 201, 171, 0.4) 100%);
}
.modal_material_wrap{
/* border:1px solid green; */
width:100%;
display:flex;
gap:12px;
}
.modal_material_wrap img{
width:85px;
height:80px;
border-radius: 16px;
padding: 8px;
cursor:pointer;
}
.modal_material_wrap img.active{
border: 2px solid #FFC9AB;
}
@media (max-width:997px){
.model_mobile_control{
background: rgba(0, 0, 0, 0.2);
width: 60px;
height: 60px;
position: fixed;
right:40px;
/* bottom:40px; */
bottom:108px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .3s ease-in-out;
border-radius: 50%;
}
.model_mobile_control.active{
z-index: 999;
bottom:40%;
}
.view_mobile_control.active{
bottom:84%;
}
.model_mobile_control:hover{
background: rgba(255, 255, 255, 0.2);
}
.model_mobile_control_icon{
/* border: 1px solid blue; */
color: var(--white);
font-size: 24px;
transition: .3s ease-in-out;
opacity: .6;
}
.model_mobile_control:hover .model_mobile_control_icon{
opacity: 1;
}
.model_mobile_control.active .model_mobile_control i{
transform: scaleY(-1);
}
.model_mobile_bars{
background: var(--white);
width: 30px;
height: 5px;
border-radius: 4px;
position: absolute;
top:0;
left:0;
transition: .3s ease-in-out;
}
.model_mobile_control.active .model_mobile_bars:first-child{
transform: rotate(-45deg);
top:20px;
}
.model_mobile_bars:nth-child(2){
top:10px ;
}
.model_mobile_control.active .model_mobile_bars:nth-child(2){
opacity: 0;
}
.model_mobile_bars:nth-child(3){
top: 20px;
}
.model_mobile_control.active .model_mobile_bars:nth-child(3){
transform: rotate(45deg);
/* top: 0; */
}
.model_control{
border-radius: 8px 8px 0 0;
padding: 24px;
top:100%;
z-index: 99;
height: 35%;
transition: .3s ease-in-out;
/* position: relative; */
}
.model_control.active{
top: 65%;
}
.view_control{
height:82%;
}
.view_control.active{
top: 18%;
}
.model_customise{
border-radius: 8px 8px 0 0;
padding: 24px;
top:100%;
z-index: 999;
height: 35%;
transition: .3s ease-in-out;
width:100%;
right: 0;
/* position: relative; */
}
.model_customise.active{
top: 65%;
}
.model_resize{
width: 100%;
}
.model_empty_arrow{
display: none;
}
.model_nav{
transition: .3s ease-in-out;
width: 100%;
}
.model_nav.active{
padding: 32px 0px 0 40px;
width: calc(100vw - 90px);
}
}
@media (max-width:624px){
.model_popup .popup_content{
width: 100%;
}
}
@media (max-width:525px){
.explore_split{
flex-direction: column;
}
}
@media (max-width:475px){
.model_body_one p{
/* border: 1px solid green; */
width: 15%;
}
.model_sum_right{
width: 85%;
}
}
/* explore css */
.explore_body{
display: flex;
justify-content: center;
background: #141D15;
/* border: 2px solid black; */
width: 100%;
height: auto;
}
.explore_bg{
/* border: 1px solid green; */
width: 1280px;
min-height: 100vh;
padding: 116px 52px 52px 52px;
position: relative;
}
.explore_nav{
/* border: 1px solid red; */
width: 100%;
height: auto;
position: fixed;
top:0;
left:0;
backdrop-filter: blur(10px);
}
.explore_nav .nav{
/* border: 1px solid red; */
width: 1280px;
min-height: 76px;
padding: 24px 52px 0 52px;
}
.explore_nav .nav .sub{
/* border: 1px solid green; */
font-family: Lessti;
font-size: 20px;
font-weight: 400;
line-height: 28px;
text-align: center;
color: #FFC9AB !important;
align-items: center;
gap: 16px;
}
.explore_wrapper{
/* border: 1px solid green; */
width: 100%;
min-height: auto;
}
.explore_models{
/* border: 1px solid blue; */
width: 100%;
min-height: auto;
gap:32px;
}
.modelbox{
border: 1px solid #404942;
width: 31%;
min-height:176px;
border-radius: 24px;
padding: 8px;
gap: 16px;
}
.modelbox img{
background: #FFFFFF0D;
width: 50%;
/* border: 1px solid green; */
border-radius: 16px;
padding: 24px;
object-fit: cover;
}
.explorebox{
border: 1px solid #404942;
width: 18%;
min-height:244px;
border-radius: 24px;
padding: 8px 8px 24px 8px;
/* gap: 16px; */
}
.explorebox img{
background: #FFFFFF0D;
width: 100%;
height: 160px;
border-radius: 16px;
padding: 24px;
/* object-fit: cover; */
object-fit: contain;
margin-bottom: 16px;
}
.modelbox_details{
/* border: 1px solid green; */
width: 50%;
padding-right:24px;
justify-content: center;
}
.modelbox_details span{
font-family: Gambetta;
font-size: 12px;
font-weight: 500;
line-height: 18px;
/* text-align: center; */
color: #C1CBAE;
}
.modelbox_details p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
/* text-align: center; */
margin-bottom: 12px;
color: #FDFDF0;
}
.modelbox_details a{
background: #FFFFFF1A;
text-decoration: none;
font-family: Gambetta;
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-align: center;
color: #FDFDF0;
padding: 8px;
border-radius: 24px;
}
.modelbox_details a:hover{
}
.matbox img{
padding: 0 !important;
}
.mat_details{
justify-content: start;
padding-right: 4px !important;
}
.model_mat{
/* border: 1px solid red; */
width: 100%;
border-radius:8px ;
width: 100% !important;
height: 64px;
margin-bottom: 8px;
}
.mat_description{
margin-bottom: 0 !important;
/* border: 1px solid red; */
-webkit-line-clamp: 5;
/* margin-top: 4px; */
}
.mini_explore_gap{
gap:24px;
}
.explorebox a{
background: #FFFFFF1A;
text-decoration: none;
font-family: Gambetta;
font-size: 14px;
font-weight: 600;
line-height: 20px;
text-align: center;
color: #FDFDF0;
padding: 8px;
border-radius: 24px;
}
.explorebox a:hover{
}
@media (max-width:1070px){
.explorebox{
width: 22%;
height: auto;
}
.explorebox a{
font-size:12px;
}
}
@media(max-width:1024px){
.modelbox{
width: 47%;
}
.modelbox img{
padding: 12px;
}
.explore_bg {
padding:116px 24px 24px 24px ;
}
.explore_nav .nav{
padding: 24px;
}
}
@media (max-width:880px){
.explorebox{
width: 30%;
}
}
@media (max-width:768px){
.explore_models{
gap: 24px;
justify-content: space-between;
}
}
@media (max-width:675px){
.modelbox{
width: 100%;
}
.modelbox img{
width:35%;
/* border: 1px solid red; */
}
.modelbox_details{
width:75%;
/* border: 1px solid red; */
}
}
@media (max-width:624px){
.explorebox{
width: 45%;
}
.mini_explore_gap{
justify-content: space-between;
}
}
@media (max-width:475px){
.mini_explore_gap{
justify-content: center;
}
.explorebox{
width: 75%;
}
.explore_nav .nav .sub{
gap: 8px;
font-size: 14px;
}
.modelbox img{
padding: 4px;
}
}
@media (max-width:375px){
.explorebox{
width: 100%;
}
}
/* watermark */
.watermark{
/* border:1px solid red; */
width: calc(100vw-580px);
font-size:150px;
opacity: .5;
font-family:lessti;
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%) rotate(-45deg);
color:#ccc;
z-index:9999;
}
/* fav */
.fav_text{
/* border: 1px solid green; */
width: 100%;
position:relative
}
.fav_text img{
/* border: 1px solid red; */
width: 100%;
}
.fav_text h3{
font-size: 28px;
line-height: normal;
margin-bottom: 4px;
font-family: Gambetta;
}
.fav_text p{
font-size:12px;
line-height: normal;
font-family: Gambetta;
}
.fav_text{
display:none;
}
.fav_det .cart_left{
width:100%;
}
.fav_text i{
color: #E6A13A;
font-size: 18px;
position: absolute;
top:-2px;
left:112px;
}
@media (max-width:768px){
.fav_text{
display:block;
}
.fav_det{
flex-direction: column-reverse;
}
}
/* view model page css */
.view_model_body .model_mini{
width: 74px;
min-height: 74px;
}
.ncomponents_properties{
/* border: 1px solid green; */
padding-top: 24px;
}
.no_properties{
/* border: 1px solid green; */
margin: 12px auto 0 auto;
display:block;
}
.no_properties.active{
display:none;
}
.yes_properties{
/* border: 1px solid green; */
/* margin-top: 12px; */
width:100%;
display:none;
}
.yes_properties.active{
display:block;
}
.yes_properties .yes_detail{
/* border:1px solid green; */
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.yes_properties span{
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #FFFFFF;
display: flex;
justify-content: space-between;
/* width: 50%; */
}
.span_color{
width: 51px;
height: 24px;
border-radius: 32px;
border: 2px solid #B6A29C;
/* margin-left: 8px; */
/* background: #6D4539; */
}
.span_pattern{
width: 92px;
height: 32px;
border-radius:32px;
/* border: 1px solid green; */
object-fit: cover;
}
.yes_color{
/* border:1px solid red; */
position: relative;
padding-right: 56px;
padding-top:2px;
}
.yes_color .span_color{
position: absolute;
top:0;
right:0;
}
.view_popup button{
background:#2D4630;
color: #FDFDF0;
}
.view_popup a{
color:#2D4630;
background:#D1E2C0;
}
.all_done_cancel{
position:relative;
min-height:35px;
}
.all_done_cancel svg{
position:absolute;
top:0;
right:0;
}
.view_model_popup_input{
/* border: 1px solid green; */
border-bottom: 1px solid #B1B0AF;
width: 100%;
}
.view_model_popup_input p{
font-family: Gambetta;
font-size: 12px;
font-weight: 600;
line-height: 16px;
text-align: left;
color: #FDFDF0;
}
.view_model_popup_input input{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: #B1B0AF;
width:100%;
height:24px;
background: none;
outline: none;
border:none
}
.view_link{
/* border:1px solid green; */
position:relative;
padding: 16px 120px 16px 50px;
background: #FFFFFF1A;
border-radius: 8px;
}
.view_link svg{
position: absolute;
top:16px;
left:16px;
}
.view_link p{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: left;
color: #FFFFFF;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.view_link button{
position: absolute;
top:11px;
right:16px;
background: #FAFF70;
font-family: Gambetta;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-align: center;
color: #2D4630;
padding: 8px 16px;
border:none;
outline:none;
border-radius: 8px;
}
.discount_and_cancel{
/* border: 1px solid blue; */
gap: 8px;
margin-bottom: 8px;
}
.discount_and_cancel p{
font-family: Gambetta;
margin: 0;
font-size: 12px;
color: var(--white);
width:auto;
background: #2D4630;
padding:5px 12px;
border-radius: 4px;
}
.cancel_order{
border: none;
overflow: hidden;
background: #E9F3CE;
padding: 4px;
font-family: Gambetta;
margin: 0;
font-size: 12px;
color: var(--white);
/* transition:.5s ease-in-out; */
}
.cancel_order span{
opacity: 0;
transform: translateX(-10px);
transition: .5s ease-in-out;
color:#D44E03;
}
.cancel_order i{
color:#D44E03;
margin-right: 4px;
font-size: 24px;
}
.cancel_order:hover span{
opacity: 1;
transform: translateX(0px);
}
/* .dis_img{
height :107px !important;
} */
/* landing page css */
.ld{
/* border:1px solid red; */
}
.ld_one{
/* border: 1px solid blue; */
min-height: auto;
}
.si_ld, .si_ld2{
position: relative;
/* overflow: hidden; */
}
.si_ld_overlay{
/* border: 1px solid red; */
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top:0;
left:0;
}
.ld_one_top{
/* border: 1px solid red; */
width: 100%;
min-height: 568px;
display: flex;
}
.ld_one_top_left{
/* border: 1px solid green; */
width:50%;
min-height: 100%;
position: relative;
}
.header_info{
/* border: 1px solid blue; */
position: absolute;
bottom: 35px;
left: 66px;
}
.header_info h3{
font-family: Lessti;
font-size: 60px;
font-weight: 400;
line-height: 57.06px;
text-align: left;
color: #FFFFFF;
}
.header_info p{
font-family: Gambetta;
font-size: 20px;
font-weight: 500;
line-height: 28px;
text-align: left;
color: #FFFFFF;
margin-bottom: 30px;
}
.header_info a{
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
color: #2D4630;
background: #FDFDF0;
padding: 16px 22px;
width: 200px;
}
.header_info a svg{
margin-left: 4px;
}
.ld_one_topographic {
padding:75px;
align-items: center;
/* background-color: #F9FFD7; */
}
.ld_one_topographic a{
background: linear-gradient(90deg, #2D4630 0%, #6FAC76 35%, #6FAC76 59%, #E78058 84.5%);
font-family: Lessti;
font-size: 20px;
font-weight: 400;
line-height: 28px;
text-align: center;
color: #FDFDF0;
padding: 16px 120px;
/* width: 100%; */
}
.ld_one_img img{
object-fit: cover;
width: 100%;
height:100%;
}
.ld_two{
/* border: 1px solid green; */
min-height: auto;
margin-top: 72px;
position: relative;
}
.ld_two_top{
/* border: 1px solid green; */
width: 100%;
min-height: auto;
margin-bottom: 24px;
gap:11px;
}
.ld_two_top button{
font-family: Gambetta;
font-size: 14px;
font-weight: 700;
line-height: 20px;
letter-spacing: 2px;
text-align: left;
color: #1E2D20;
text-transform: uppercase;
padding: 12px 20px;
border: 1px solid #2D4630;
transition: .3s ease-in-out;
}
.ld_two_top button.active{
border: none;
background: #2D4630;
color: #FDFDF0;
}
.ld_two_mid{
/* border: 1px solid green; */
width: 100%;
min-height: 420px;
/* margin-bottom: 44px; */
display: flex;
gap:12px;
overflow: auto;
overflow-x: scroll;
/* position: relative; */
}
.ld_two_mid::-webkit-scrollbar-thumb {
background: #2D4630;
}
.ld_two_push{
/* border: 1px solid green; */
width: auto;
gap:24px;
padding-left: 40px;
min-height: 40px;
position: absolute;
bottom:-14px;
right:0;
background: var(--bg);
justify-content: space-around;
align-items: center;
}
.push_btn{
width: 40px;
height: 40px;
/* padding: 10px; */
background: #2D4630;
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.ld_two_mid .tab-content{
gap:10px;
padding-bottom: 44px;
}
.carlx{
/* border: 1px solid red; */
/* width: 20%; */
width: 224px;
overflow: hidden;
display: flex;
flex-direction: column;
flex-shrink: 0;
position: relative;
}
.carlx img{
object-fit: cover;
height: 360px;
}
.carlx p{
font-family: Lessti;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: left;
color: #1E2D20;
margin-top: 12px;
margin-bottom: 24px;
}
/* .ld_two_bot{
border: 1px solid green;
width: 100%;
min-height: auto;
}
.ld_two_bot_left{
border: 1px solid blue;
width: 70%;
min-height: 4px;
}
.ld_two_bot_right{
border: 1px solid red;
width: 30%;
min-height: 40px;
} */
.ld_three{
/* border: 1px solid green; */
width:100%;
min-height: auto;
margin-bottom: 64px;
margin-top: 56px;
display: flex;
gap:10px;
overflow: auto;
}
.carl{
/* border: 1px solid red; */
width:280px;
flex-shrink: 0;
/* width:25%; */
min-height:488px;
position: relative;
}
.carl img{
object-fit: cover;
height: 370px;
}
.carl h3{
font-family: Gambetta;
font-size: 15px;
font-weight: 700;
line-height: 22px;
text-align: left;
color: #1E2D20;
margin-top: 10px;
text-transform: uppercase;
}
.carl p{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
text-align: left;
color: #1E2D20;
margin-bottom: 8px;
}
.carl a{
font-family: Gambetta;
font-size: 14px;
font-weight: 700;
line-height: 20px;
letter-spacing: 2px;
text-align: left;
color: #1E2D20;
text-decoration: underline;
text-transform: uppercase;
}
/* .ld_section{
border:1px solid blue;
} */
.ld_divide{
/* width: 100%; */
/* border:1px solid green; */
min-height: auto;
}
.ld_divide_left{
position: relative;
width: 50%;
/* border: 1px solid green; */
}
.ld_divide img{
object-fit: cover;
/* min-height:360px; */
width: 100%;
height: 100%;
}
.ld_divide_right{
background:#273D2A;
padding-top: 84px ;
align-items: center;
}
.ld_divide_right h3{
font-family: Lessti;
font-size: 32px;
font-weight: 400;
line-height: 36px;
text-align: center;
margin-bottom: 8px;
color: #FDFDF0;
}
.ld_divide_right p{
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: center;
color: #FDFDF0;
margin-bottom: 40px;
}
.ld_divide_right a{
width: 368px;
/* border: 1px solid red; */
background: transparent;
border: 1px solid #FDFDF0;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: center;
color: #FDFDF0;
padding: 12px;
}
.ld_divide_below{
/* border:1px solid red; */
margin: 80px 0 80px 0;
gap: 24px;
min-height: auto;
}
.ld_divide_below_img_cover{
width: 60%;
height:auto;
position: relative;
}
.ld_divide_below_img_cover img{
object-fit: cover;
width: 100%;
min-height:436px;
}
.ld_divide_below_right{
width: 40%;
background: #D1E2C0B2;
padding: 64px 52px;
}
.ld_divide_below_right h3 {
font-family: Lessti;
font-size: 32px;
font-weight: 400;
line-height: 48px;
letter-spacing: -0.08em;
text-align: left;
color: #2D330B;
}
.ld_divide_below_right p{
color: #2D4630;
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: left;
}
.ld_divide_below_right .si_form_one{
margin-bottom: 20px;
width:100%
}
.ld_divide_below_right a{
width: 100%;
/* border: 1px solid red; */
background: #2D4630;
font-family: Gambetta;
font-size: 16px;
font-weight: 500;
line-height: 24px;
text-align: center;
color: #FDFDF0;
padding: 12px;
/* display:flex;
justify-content: center;
align-items: center; */
}
/* for lazy loading */
.lazies {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.lazies.loaded {
opacity: 1;
}
.skeletal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
.ld_divide_container{
background:linear-gradient(to right,#DEDCDF 50%,#273D2A 50%)
}
@media (max-width:1280px){
.ld_three, .ld_two_mid{
width:90vw;
}
.ld_divide_below_img_cover,.ld_divide_below_right{
width:50%;
}
.header_info h3{
font-size: 40px;
line-height: normal;
}
.header_info p{
font-size: 16px;
line-height: normal;
}
.header_info a{
font-size: 12px;
}
.ld_one_topographic{
padding: 24px;
}
.ld_one_topographic svg:first-child{
/* border: 1px solid green; */
}
}
@media (max-width:997px){
.ld_divide,.ld_divide_below{
flex-direction: column;
}
.ld_divide_left,.ld_divide_below_img_cover,.ld_divide_below_right{
width:100%;
}
.ld_divide_container{
background:linear-gradient(to bottom,#DEDCDF 500px,#273D2A 50%)
}
.ld_divide_right{
padding:48px;
}
.ld_fade{
display: none;
}
.ld_one_top_left{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.ld_one_topographic{
margin-top: 24px;
}
}
@media (max-width:624px){
.header_info{
bottom: 16px;
left:16px;
}
.header_info h3{
font-size: 24px;
}
.header_info p{
font-size: 14px;
margin-bottom: 16px;
}
.header_info a{
font-size: 12px;
padding: 10px 22px;
}
.ld_divide_right h3,.ld_divide_below_right h3{
font-size: 22px;
}
.ld_divide_right p{
font-size: 14px;
margin-bottom: 24px;
}
.ld_divide_below_right p{
font-size: 12px;
line-height: normal;
}
.ld_two_top button ,.ld_divide_below_right a {
font-size: 12px;
padding:12px;
}
}
@media (max-width:552px){
.ld_divide_right a {
width:100%;
}
.topographic_top{
min-height: auto;
}
.ld_one_topographic svg:first-child{
width: 100%;
}
.ld_one_topographic a{
padding: 16px 22px;
}
}
.bd_last_top_one:nth-child(5){
/* border: 1px solid red; */
padding-left: 12px;
}
/* continuation to landing page css */
.bd_container{
/* border: 1px solid green; */
/* min-height: 382px; */
/* margin-bottom: 32px; */
}
.ld_new_content_one{
/* border: 1px solid green; */
}
.new_ld_divide_container{
background:linear-gradient(to right,#D1E2C0B2 50%,#273D2A 50%)
}
.new_ld_divide_right{
justify-content: center;
padding-top: 0;
padding-left: 90px;
padding-right: 44px;
align-items: flex-start;
}
.new_ld_divide_right h3{
text-align: left;
}
.new_ld_divide_right p{
text-align: left;
}
.new_ld_divide_right .new_ld_mini{
font-family: Gambetta;
font-size: 14px;
font-weight: 400;
line-height: 20px;
letter-spacing: 1px;
text-align: left;
margin-bottom: 8px;
color: #F9F0D9;
}
.new_ld_divide_right a{
background: linear-gradient(90deg, #527E58 35%, #6FAC76 59%, #E78058 84.5%);
border: none;
}
.ld_stats{
/* border: 1px solid blue; */
position: relative;
padding-top: 64px;
padding-bottom: 64px;
}
.ld_stats h3{
font-family: Lessti;
font-size: 40px;
font-weight: 400;
line-height: 48px;
letter-spacing: -0.02em;
text-align: left;
color: #111827;
margin-bottom: 4px;
}
.ld_stats p{
font-family: Gambetta;
font-size: 24px;
font-weight: 400;
line-height: 32px;
text-align: left;
color: #374151;
margin-bottom: 64px;
}
.ld_stats_btn{
background: #1E2D20;
font-family: Gambetta;
font-size: 16px;
font-weight: 600;
line-height: 24px;
text-align: center;
color: #FDFDF0;
position: absolute;
top:80px;
right:80px;
gap:10px;
padding: 12px 24px;
/* width: 200px;
height: 48px; */
}
.ld_stats_cards{
/* border: 1px solid red; */
/* gap: 24px; */
}
.ld_stats_card{
background: #D1E2C0;
padding: 20px;
gap:16px;
width: 23%;
/* justify-content: space-between; */
border-radius: 8px;
}
.ld_stats_card svg{
/* border: 1px solid blue; */
}
.ld_stats_card_right{
/* border: 1px solid red; */
width: 100%;
}
.ld_stats_card_right h3{
font-family: Gambetta;
font-size: 32px;
font-weight: 700;
line-height: 40px;
letter-spacing: -0.02em;
text-align: justified;
color: #2D4630;
margin-bottom: 0;
}
.ld_stats_card_right p{
font-family: Gambetta;
font-size: 16px;
font-weight: 400;
line-height: 24px;
text-align: justified;
color: #2D4630;
margin-bottom: 0;
}
.ld_map_text{
/* border:1px solid red; */
min-height: 436px;
background: #2D4630;
position: relative;
justify-content: flex-end;
}
.ld_map_text img{
/* border: 1px solid blue; */
width: 60%;
object-fit: cover;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
/* height: 334px; */
padding: inherit;
}
.we_deliver{
/* border: 1px solid red; */
width: 40%;
display: flex !important;
padding-left:81px;
}
.we_deliver h3{
font-family: Lessti;
font-size: 48px;
font-weight: 400;
line-height: 56px;
/* text-align: left; */
color: #FDFDF0;
}
.we_deliver p{
font-family: Gambetta;
font-size: 24px;
font-weight: 400;
line-height: 32px;
/* text-align: left; */
color: #FDFDF0;
}
@media (max-width:997px){
.new_ld_divide_container{
background:linear-gradient(to bottom,#D1E2C0B2 500px,#273D2A 50%)
}
}
/* Testimonial Section */
.testimonial-section {
background-color: #fff4e0;
padding: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 400px;
}
.testimonial-container {
text-align: center;
max-width: 650px;
overflow: hidden;
padding: 0 60px;
position: relative;
}
.testimonial-content {
display: none;
opacity: 0;
width: 100%;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.testimonial-content.active {
display: block;
opacity: 1;
transform: translateX(0);
}
.testimonial-content.slide-in-left {
display: block;
transform: translateX(-120%);
opacity: 1;
}
.testimonial-content.slide-in-right {
display: block;
transform: translateX(120%);
opacity: 1;
}
.testimonial-content.slide-out-left {
transform: translateX(-120%);
opacity: 0;
}
.testimonial-content.slide-out-right {
transform: translateX(120%);
opacity: 0;
}
.quote-icon {
font-size: 48px;
color: #C1CBAE;
margin-bottom: 15px;
}
.testimonial-text {
font-family: 'Gambetta', serif;
font-size: 20px;
color: #333;
margin: 20px 0;
line-height: 1.6;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.author-image {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 15px;
border: 1px solid white;
}
.author-info {
text-align: left;
}
.author-name {
font-family: 'Gambetta', serif;
font-size: 16px;
font-weight: 500;
line-height: 24px;
color: #111827;
}
.author-role {
font-family: 'Gambetta', serif;
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #6B7280;
}
/* Navigation Button Styling */
.nav-button {
background-color: #2D4630;
color: #fff;
border: none;
padding: 13px;
font-size: 15px;
border-radius: 50%;
width: 44px;
height: 44px;
cursor: pointer;
z-index: 10;
}
/* Responsive adjustments for navigation buttons and font sizes */
@media (max-width: 1000px) {
.testimonial-container {
max-width: 550px;
padding: 0 40px; /* Reduce padding to keep space at smaller screens */
}
.testimonial-text {
font-size: 16px;
}
.nav-button {
padding: 12px;
font-size: 15px;
}
}
@media (max-width: 768px) {
.testimonial-container {
max-width: 500px;
padding: 0 30px;
}
.quote-icon {
font-size: 32px;
}
.testimonial-text {
font-size: 15px;
}
.author-image {
width: 40px;
height: 40px;
}
.nav-button {
padding: 10px;
font-size: 15px;
}
}
@media (max-width: 480px) {
.testimonial-container {
max-width: 90%;
padding: 0 20px;
}
.quote-icon {
font-size: 28px;
}
.testimonial-text {
font-size: 14px;
}
.nav-button {
padding: 8px;
font-size: 14px;
}
.author-image {
width: 35px;
height: 35px;
}
}