/*
Theme Name: Shaping Hearts
Theme URI: https://www.leocoders.com/
Author: Leocoders
Author URI: https://www.leocoders.com/
Description: A farm theme typically refers to a decorative style that incorporates elements commonly found on a farm or in rural agricultural settings. This theme often includes rustic elements such as weathered wood, metal accents, and vintage farm equipment.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.2.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shaping-hearts
*/

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  font-family: 'gotham', sans-serif;
  word-break: break-word;
}
a {
  cursor: pointer;
  text-decoration: none !important;
  font-family: 'gotham', sans-serif;
}
button{
  background-color: none;
  border: none;
}
button:focus, [role="button"]:focus {
  outline: 0;
}
h1, h2, h3, h4, h5, h6{
  font-family: Helvetica, sans-serif;
}
img{
  max-width: 100%;
}
/* home page START  */
.home-page-icon{
  font-size: 2rem;
  color: #d91443;
  position: absolute;
  top: -10px;
  right: 10px;
  transform: translateY(-100%);
}
.games-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(250px, 25%));
  place-content: center;
  gap: 3rem;
  height: 100%;
  min-height: 95%;
}
.game-card{
  aspect-ratio: 1/1;
  background-color: #c7e9f7;
  border-radius: 10px;
  padding: 10%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}
.game-card .home-heading{
  font-size: clamp(14px, 1.1vw ,40px);
}
.matchy-cards-container{
  display: grid;
  grid-template-columns: repeat(4, minmax(35px, 15%));
  gap: 10px;
  place-content: center;
}
.matchy-cards-container img{
  aspect-ratio: 9/12;
  object-fit: cover;
  width: 100%;
}
.game-card .theme-btn{
    display: inline-block;
    font-size: 10px;
    padding: 6px 20px;
    margin-top: 15px;
}
.spot-the-difference-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.spot-the-difference-container img{
  max-width: calc(60% + 30px);
  aspect-ratio: 16/7;
  width: 100%;
  object-fit: contain;
}

/* painting */
.painting-container{
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 22%));
  gap: 10px;
  place-content: center;
}
/* photo click */
.photo-click{
  width: calc(60% + 30px);
  /* background-color: #e1f3fa;
  aspect-ratio: 16/9; */
  display: flex;
  align-items: center;
}
#photo-print-elem{
	max-width: 60%;
	margin: 20px auto 0;
}
/* home page END  */


.main-container{
  padding: 5%;
  height: 100dvh;
  background-image: url('./assets/images/bg-image.png');
  background-size: 100% 100%;
}
.logged-in .main-container{
  height: calc(100dvh - 32px);
}
.header, .rp-logo1{
  position: absolute;
  top: 0;
  left: 5%;
  margin-top: 6%;
}
.header img, .rp-logo img{
  mix-blend-mode: darken;
}
.content-wrapper{
    height: 100%;
}
.text-content{
  padding: 0 4% 0 4% !important;
}
.title{
  color: #21409A;
  font-size: clamp(30px, 2vw ,150px);
  font-family: Helvetica, sans-serif;
  text-transform: uppercase;
  margin-top: 45%;
}
.description{
  font-size:  clamp(22px, 2vw, 48px);
  font-family: 'gotham', sans-serif;
}
.right-container{
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  /* height: 100%;
  min-height: 95%; */
  overflow: hidden;
}
.camera-grid{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.theme-footer{
  position: absolute;
  right: 3%;
  bottom: 0%;
}
.theme-footer a{
  cursor-events: none;
}
.theme-footer img{
  min-width: 50px;
  width: 5vw;
  mix-blend-mode: darken;
}
.right-heading{
  font-size: clamp(20px, 2vw, 70px);
}
.spot-game-done .right-heading:first-of-type{
  margin-bottom: 50px;
}
.right-heading span{
  color: #d91443;
}
#matchy-heading.hide, #timer, #score, #spot-timer, #spot-score, #spot-heading.hide, #difference-start-button.hide {
  display: none;
}
#timer.hide, #score.hide, #spot-timer.show, #spot-score.show{
  display: block;
}
.theme-btn{
  background-color: #D91443;
  color: #fff;
  font-family: 'gotham', sans-serif;
  font-size: clamp(16px, 2vw, 40px);
  padding: clamp(13px, 2vw, 30px) clamp(40px, 3vw, 100px);
  border: none;
  border-radius: clamp(15px, 2vw, 40px);
  box-shadow: -4px 4px 0 #DF89AE;
  margin-top: clamp(30px, 4vw, 80px);
  letter-spacing: 1px;
}
.custom-position{
  position: absolute;
  bottom: 4%;
  z-index: 99;
  left: 50%;
  transform: translateX(-50%);
}
/* matchy matchy */
.matchy-matchy-cards{
    min-height: 75vh;
}
.matchy-matchy-cards, .spot-difference-cards{
    padding: 4% 0;
    position: relative;
    display: grid;
    align-items: center;
}
.matchy-matchy-cards > div:not(.game-form){
  margin-left: 20%;
	margin-right: 20%;
}
.cards-container{
    display: grid;
    grid-template-columns: repeat(4, calc(25% - clamp(30px, 1vw, 50px)));
    gap: clamp(40px, 2vw, 50px);
    margin-top: clamp(30px, 4vw, 80px);
}
.game-start.hide, .game-form, .photo-game-form{
  display: none;
}
.cards-container .card{
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  transition: transform 1s;
  transform-style: preserve-3d;
}
.front,
.back {
  position: absolute;
  height: 100%;
  width: 100%;
  font-size: 20px;
  color: #03446A;
  text-align: center;
  border-radius: 5px;
  backface-visibility: hidden;
}
.front img, .back img{
  height: 100%;
  object-fit: cover;
}
.back {
  background: #03446A;
  color: white;
  transform: rotateY( 180deg );
}

.card.flipped .content{
  transform: rotateY( 180deg ) ;
  transition: transform 0.5s;
}
.game-complete{
  position: absolute;
  inset: 0;
  display: none;
 margin-left: unset;
	margin-right: unset;
}
.game-complete.show, .spot-game-done.show{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(30px, 1.2vw, 50px);
}
.game-complete .theme-btn, .spot-game-done .theme-btn{
  display: block;
  margin-left: auto;
	margin-right: auto;
  margin-top: 0;
}
#spot-continue-button{
    margin-top: 50px;
	margin-bottom: 50px;
}
.game-complete #tryagain-button, .spot-game-done #spot-tryagain-button{
   background-color: #7bcdd0;
   box-shadow: -4px 4px 0 #d9eef7;
}
#game-done.hide, #start-button.hide{
  display: none;
}
.game-complete svg g path, .spot-game-done svg g path{
  animation: heartbeat 1s cubic-bezier(.25,.46,.45,.94) 3s infinite alternate-reverse backwards;
  transform-origin: center;
}
@keyframes heartbeat{
  from{
    /* opacity: 0.5; */
    transform: scale(0.8);
  }
  to{
    /* opacity: 1; */
    transform: scale(1);
  }
}

.disableCards .card{
  pointer-events: none;
  cursor :pointer;
}
.matchy-matchy-cards > div.game-form, .photo-game-form, .spot-difference-cards .spot-game-form{
  margin-left: 3%;
	margin-right: 3%;
}
.game-form.show, .photo-game-form.show{
  display: block;
}
.game-form form, .photo-game-form form, .spot-game-form form{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: start;
  gap: 15px;
}
.game-form form > div, .photo-game-form form > div, .spot-game-form form > div{
  flex: 1 1 calc(50% - 8px);
  padding: 20px;
}
.game-form form > div:first-of-type, .photo-game-form form > div:first-of-type, .spot-game-form form > div:first-of-type{
  border-right: 2px solid #000;
}
.game-form form label, .photo-game-form form label, .spot-game-form form label{
  display: block;
  font: 600 14px/22px 'gotham', sans-serif;
  margin-top: 15px;
}
.game-form form input:not(:is([type="radio"], [type="checkbox"], [type="submit"] )),
.photo-game-form form input:not(:is([type="radio"], [type="checkbox"], [type="submit"] )),
.spot-game-form form input:not(:is([type="radio"], [type="checkbox"], [type="submit"] )){
  width: 100%;
  margin: 10px 0 0;
}
.game-form form input:is([type="radio"], [type="checkbox"]), .photo-game-form form input:is([type="radio"], [type="checkbox"]), .spot-game-form form input:is([type="radio"], [type="checkbox"]){
  min-height: 20px;
  min-width: 20px;
  border : 2px solid #8f8f9d;
  margin-right: 5px;
  border-radius: 3px;
}
.game-form form input[type="radio"], .photo-game-form form input[type="radio"], .spot-game-form form input[type="radio"]{
/*   -webkit-appearance: none; */
  position: relative;
  top: 1px;
}
#volunteering-opportunities-no, #photo-volunteering-opportunities-no, #photo-photo-volunteering-opportunities-no{
  margin-left: 10px;
}
/* .game-form form input[type="radio"]:checked::before, .spot-game-form form input[type="radio"]:checked::before, .photo-game-form form input[type="radio"]:checked::before{
  content: '';
  position: absolute;
  background-image: url('assets/images/check.png');
  inset: 0;
	left; 0;
	right; 0;
	top:0;
	right:0;
  height: 100%;
  width: 100%;
  background-size: contain;
} */

.volunteerism-interest-wrapper{
  display: flex;
  flex-wrap: wrap;
  row-gap : 15px;
  margin-top: 15px;
}
.game-form form .volunteerism-interest-wrapper label, .spot-game-form form .volunteerism-interest-wrapper label, .photo-game-form .volunteerism-interest-wrapper label{
  flex: 0 0 50%;
  display: flex !important;
  align-items: center;
  margin-top: 35px;
}
.game-form form hr, .spot-game-form form hr, .photo-game-form hr{
  border-top: 3px dashed #000;
  opacity: 1;
  width: calc(100% + 6%);
  margin-left: -2%;
 margin-top: 50px;
  margin-bottom: 50px;
  
}
.game-form form label:is([for="terms-and-conditions"], [for="privacy-policy"]), .spot-game-form form label:is([for="terms-and-conditions"], [for="privacy-policy"]), .photo-game-form form label:is([for="terms-and-conditions"], [for="privacy-policy"]), .photo-game-form form label:is([for="photo-terms-and-conditions"], [for="photo-privacy-policy"]){
  margin-top: 15px;
  display: flex;
  gap: 5px;
}
.game-form form label a, .spot-game-form form label a, .photo-game-form form label a{
  color: #d91443;
}
form .close-button, form .spot-close-button{
  position: absolute;
  top: 25px;
  right: 25px;
  border: 1px solid #000;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  line-height: 1;
  display: none
}
#machy-thankyou, #spot-thankyou, #photo-thankyou{
	display: none;
}

/*  frame  START  */
#nav-border, #nav-stickers{
  background-color: #7acdd0b2;
}
/*  frame  END  */
/*  spot the difference START */
.spot-difference-cards{
  position: relative;
  min-height: 75vh;
}
#spot-heading, #spot-score{
  margin-bottom: 3%;
}
.spot-difference-cards > div{
   margin: 0 2%;
}
.difference-image-box, .original-image-box{
    min-width: 48%;
    max-width: 50%;
}
.spot-image-container.spot-show-images{
  display: flex;
  justify-content: center;
  gap: 1%;
}
.spot-image-container:not(.spot-show-images), .difference-image-box{
  display: none;
}

 .difference-image-box.show{
  display: block;
}
.spot-difference-cards > div svg{
  max-width: 100%;
  height: 100%;
}
.spot-game-done, .spot-game-form{
  display: none;
}
.difference-image-box .spotted, .original-image-box .spotted{
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
}
.difference-image-box .spotted.found, .original-image-box .spotted.found{
  border: 3px solid #2bf900;
}
.difference-image-box-one .spotted-one, .original-image-box-one .spotted-one{
  left: -10px;
  bottom: 1%;
}
.difference-image-box-one .spotted-two, .original-image-box-one .spotted-two{
  left: 68%;
  bottom: 0%;
}
.difference-image-box-one .spotted-three, .original-image-box-one .spotted-three{
  left: 80%;
  top: 64%;
}

.difference-image-box-two .spotted-one, .original-image-box-two .spotted-one{
  left: 8.5%;
  bottom: 26.5%;
}
.difference-image-box-two .spotted-two, .original-image-box-two .spotted-two{
  left: 59.5%;
  bottom: 36%;
}
.difference-image-box-two .spotted-three, .original-image-box-two .spotted-three{
  left: 78.7%;
  top: 65.5%;
}
.difference-image-box-three .spotted-one, .original-image-box-three .spotted-one{
  left: 20%;
  bottom: 22%;
}
.difference-image-box-three .spotted-two, .original-image-box-three .spotted-two{
  left: 68%;
  top: 3%;
}
.difference-image-box-three .spotted-three, .original-image-box-three .spotted-three{
  left: 80%;
  top: 75%;
}

/*  spot the difference END */

/* Capture the photo START */
#photo-game-start{
  margin-inline: 0;
	margin-left: 0;
	margin-right: 0;
  /* max-height: 68vh; */
}
#webcam, .capture, .another-capture, .editors-container, #images-box, #editors-container, #edit-capture{
  display: none;
}
#capturedPhoto{
  width: 100%;
  transform: rotateY(180deg);
  max-height: 75vh;
  object-fit: cover;
  object-position: center;
}
#exported-image-container img ~ img{
  display: none;
}
#dummy-video{
  width: 100%;
}
#images-box{
  /* border: 10px solid transparent; */
  position: relative;
  width: 100%;
  isolation: isolate;
  max-height: 75vh;
}
#webcam{
  width: 100%;
  max-height: 77vh;
  transform: rotateY(180deg);
}
#capture{
  z-index: 999;
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}

#text-box{
  position: absolute;
  background: transparent;
  border: none;
  font-size: 40px;
  caret-color: red;
  max-width: 15%;
}


#text-box:focus{
  outline: 0;
}
#text-box.hidden{
  display: none;
}
.textbgchange{
	border: 1px solid #000;
}
.img-text{
  display: inline-block;
  position: absolute !important;
}
#editors-container #nav-tab{
  flex-wrap: nowrap;
  border-bottom: 0;
}
/* #editors-container > nav, #editor-tab-toggle > *, #editors-container > #nav-tabContent{ */
#nav-tab{
  transition: all 1s;
}
#nav-tab.animate-width{
  transform: translateX(-92%);
}
#editors-container.animate-width #editor-tab-toggle{
/*   margin-inline-start: 55%; */
 margin-left: 55%;
}
#editors-container > #nav-tabContent.animate-width{
  transform: translateX(-125%);
}

#nav-tab{
  position: absolute;
  top: 20px;
  left: 20px;
  max-width: 25%;
}
#nav-tabContent{
  position: absolute;
  top: 4rem;
  left: 10px;
  transition: all 1s;
}
#nav-tab .nav-link.active{
  max-width: 22%;
}
.tab-content{
  max-width: 22%;
  margin-top: 4%;
}
.tab-content > #nav-border.active, .tab-content > #nav-stickers.active, .tab-content > #nav-pencil.active{
    display: flex !important;
    flex-wrap: wrap;
    gap: 3rem;
    padding: 4%;
}
.tab-content > #nav-border.active{
	justify-content:center;
}
.tab-content > #nav-border.active > button, .tab-content > #nav-stickers.active > button{
  flex: 0 0 23%;
  margin-bottom: 2.67%;
}
#editors-container #nav-tabContent button{
  background-color: transparent;
}
.tab-content > #nav-pencil.active > *{
  display: block;
  width: 100%;
  text-align: start;
  margin-top: clamp(0.7rem, 5%, 5vw);
}

#nav-pencil{
  max-width: 3vw;
}
#thickness{
  writing-mode: sideways-lr;
}
#editor-tab-toggle{
  font-size: clamp(40px, 5vw, 7%);
  background-color: transparent;
/*   margin-inline-start: 5%; */
 margin-left: 5%;
}

/* stickers */
.overlay-img{
  position: absolute !important;
  top: 30%;
  left: 30%;
  width: fit-content;
  z-index: 2;
}
.overlay-img span{
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  /* display: none; */
  font-size: 35px;
  color: #d91443;
}
.ui-icon{
  background-color: #d91443;
  height: 40px;
  width: 40px;
}
/* .ui-icon:after{
  content: '';
  height: 40px;
  width: 40px;
  border-top: 40px solid red;
  border-right :40px solid red;
  border-left: 40px solid transparent;
} */
.overlay-img:hover span{
  display: block;
}
#export-button{
  position: absolute;
  right: 10px;
  bottom:  10px;
  padding: 2%;
  display: none;
}
/* #print-button{
  right: 70px;
  display: block;
} */
#photo-game-form{
  padding-top: 4%;
	padding-bottom: 4%;
}
.frame-img{
    position: absolute !important;
    left: 0;
	right: 0;
	top: 0;
	bottom: 0;
    z-index: 0;
}
#nav-text.active{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  max-width: 4vw;
}

.text-color-wrapper{
  background-image: url('./assets/images/color-palette.png');
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 68%;
}
#text-color{
  max-width: 100%;
  opacity: 0;
  height: 100px;
}
#text-bold{
  display: none;
}
label[for="text-bold"]{
  padding: 0 20px;
}
label[for="text-bold"] img{
  max-width: 80%;
}
#text-bold.fontweight{
  background-color: #21409a;
  color: #fff;
}
.overpara.fontweight{
  font-weight: bold;
}
#delete-text{
  max-width: 60%;
}
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
.draggable-image {
width: 100%;
height: 100%;
cursor: move;
/* position: absolute; */
}
.overpara{
cursor: pointer;
margin-bottom: 0;
word-break: break-all;
font-size: 40px;
}
button.selected{
background-color: #d91443 !important;
padding: 5px;
border-radius: 5px;
}

/* Capture the photo END */

/* 300 painting START */
/* width */
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: #c9004b;
}
::-webkit-scrollbar-thumb {
  background: #efefef;
}

::-webkit-scrollbar-thumb:hover {
  background: #efefef;
}

.paiting-filter{
  background-color: #ec024d;
  padding: 20px;
  border-radius: 6px;
}
#paint-filter-btn{
  background-color: #fff;
  color: #ec024d;
  aspect-ratio: 1/1;
  width: 90px;
  font-size: 35px;
  border-radius: 6px;
}
.left-filter{
  position: absolute;
  left: 0;
  bottom: -30px;
  transform: translateY(100%);
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 0px 10px #00000029;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 35%;
  max-width: 35%;
  z-index: 99;
  display: none;
}
.left-filter.show{
  display: flex;
}
.left-filter::after{
  content: '';
  height: 30px;
  width: 30px;
  background-color: #fff;
  box-shadow: -5px -5px 7px -4px #00000029;
  top: -4px;
  background: #fff;
  position: absolute;
  left: 30px;
  transform: rotate(45deg) translateY(-50%);
  transform-origin: center;
}
.filter-head{
  color: #ec024d;
}
.left-filter label, label[for="_sortby"]{
  color: #707070;
  font-size: clamp(16px, 1vw, 30px);
  font-weight: bold;
  margin-top: 10px;
  flex-basis: 100%;
}
.left-filter select, #_sortby{
  border: 1px solid #707070;
  background-color: #fff;
  border-radius: 3px;
  margin-top: 10px;
  padding: 20px;
  flex-basis: 100%;
  font-size: 30px;
  max-width: 100%;
}
.left-filter :is(input[type="submit"], input[type="reset"]){
  margin-top: 20px;
  font-size: clamp(16px, 1vw, 25px);
  padding: clamp(13px, 2vw, 25px) clamp(30px, 2vw, 50px);
  border-radius: 20px;
}
.left-filter input[type="reset"]{
  margin-left: auto;
  background-color: #b4b4b4;
  box-shadow: -4px 4px 0 #d7d7d7;
  margin-right: 30px;
}
label[for="_sortby"]{
  color: #fff;
  font-size: 40px;
}
option:empty{
  display: none;
}
#_sortby{
  /* max-width: 468px; */
  min-width: 468px;
  padding: 30px 10px;
  margin-top: 0;
  border-radius: 6px;
  border: none;
}
.paintings-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3%;
  gap: 2%;
  max-height: 75vh;
  min-height: 75vh;
  overflow-y: scroll;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  background-color: #fff;
}
.painting-card{
  background-color: #fff;
  align-self:  flex-start;;
  box-shadow: 0px 0px 6px #00000029;
  border-radius: 4px;
  /* aspect-ratio: 1/1; */
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.card-paint-details-box{
    position: relative;
    min-height: 156px;
}
.card-paint-details-box::before{
    content: '';
    position: absolute;
    width: 20px;
    height: 60%;
    min-height: 47px;
    top: 20%;
    left: 0;
    background-color: #d91443;
}
.painting-card img{
  aspect-ratio: 16/13;
  object-fit: cover;
  width: 100%;
  object-position: top;
}
.main-paint-name{
    font-size: 34px;
    text-transform: capitalize;
/*     display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; */
}
.main-artist-name, .main-paint-price{
  text-transform: capitalize;
  color: #d91443;
  font-weight: bold;
  font-size: 30px;
}
.main-paint-price{
  min-width: 90px;
  text-align: right;
}
.paint-arrow{
  background-color: #EC004B;
  border: 1px solid #fff;
  position: absolute;
  top: 0;
  right: 1.5rem;
  transform: translateY(-50%);
  max-width: 58px;
  aspect-ratio: unset !important;
  width: 58px !important;
  padding: 10px;
  object-fit: fill !important;
  height: 58px !important;
}
.painting-popup-box{
  position: fixed;
  inset : 0;
  top: 0;
 left: 0;
	right: 0;
	bottom: 0;
  width: 100vw;
  z-index: 6;
  display: none;
  z-index: 101;
  background-color: #2f2323c4;
  /* -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none; */
}
.painting-popup-box > div{
  max-width: 60%;
  background-color: #fff;
  padding: 3% 2%;
  max-height: 68vh;
  overflow-y: scroll;
  margin: 10% auto;
}
.painting-close{
  height: 57px;
  width: 57px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #000;
  font-size: 32px;
  margin-left: 100%;

  position: relative;
  transform: translateY(-90px);
}
.paint-name{
  font-size: 50px;
  text-transform: capitalize;
  color: #21409a;
}
.paint-location, .artist-location{
  font-size: 34px;
  font-weight: bold;
}
.paint-location img{
  max-height: 34px;
  margin-right: 12px;
}
.paint-price, .artist-name{
  font-size: 50px;
  color: #d91443;
  font-weight: bold;
  text-transform: capitalize;
}
.paint-price{
    min-width: 140px;
    text-align: right;
}
.artist-info{
  padding: 2.5%;
  border: 1px solid #efefef;
  border-radius: 5px;
  box-shadow: 0 0 10px #efefef;
}
.artist-location, .artist-details, .paint-description p{
  color: #6c6c6c;
  font-weight: bold;
}
.artist-heading{
  font-size: 34px;
  text-transform: capitalize;
  color: #21409a;
  margin-top: 34px;
}
.artist-details, .paint-description p {
    font-size: 30px;
    font-weight: bold;
}
.specifications-head{
    font-size: 46px;
}
.paint-specifications table{
  font-size: 30px;
  font-weight: bold;
  color: #6c6c6c;
}
.paint-specifications table td{
  padding: 10px 0;
}
.paint-specifications table tr td:nth-child(2){
  padding: 0 30px;
}
.paint-description{
    margin-top: 2%;
    padding-top: 2%;
    border-top: 5px solid #707070;
}
.paint-description h3{
  font-size: 45px;
}
.painting-popup-box .paint-img, .qr-image{
    width: 100%;
    aspect-ratio: 1;
}
/* 300 painting END */

@media (max-width: 1920px) {
    .title{
      font-size: 30px;
    }
    .description{
      font-size: 22px;
    }
    .right-heading{
      font-size: 20px;
    }
    .theme-btn{
      font-size: 16px;
      padding: 12px 50px;
      margin-top: 30px;
      border-radius: 20px;
    }
    .theme-btn + .theme-btn{
      margin-top: 10px;
    }
    .game-complete.show{
      gap: 10px;
    }
    .game-complete svg{
      margin-bottom: 0;
    }
}
@media (min-width:2500px) {
  .rp-logo img{
    width: 40%;
  }
  .game-card .theme-btn{
    font-size: clamp(14px, 1.1vw ,28px);
    padding: clamp(6px, 1vw,20px) clamp(20px, 1.4vw,60px);
  }
  .home-page-icon{
    font-size: 4rem;
  }
  .right-container{
    border-radius: 60px;
  }

  .games-cards{
    gap: 8rem;
    height: 90%;
    min-height: 90%;
  }
  .game-card{
    border-radius: 30px;
  }
  .game-form form label, .photo-game-form form label, .spot-game-form form label{
    font: 600 30px/42px 'gotham', sans-serif;
    margin-top: 30px;
    display: flex;
    align-items: center;
  }
  .game-form form input:not(:is([type="radio"], [type="checkbox"], [type="submit"] )),
  .photo-game-form form input:not(:is([type="radio"], [type="checkbox"], [type="submit"] )),
  .spot-game-form form input:not(:is([type="radio"], [type="checkbox"], [type="submit"] )){
    width: 100%;
    margin: 25px 0 0;
    padding: 20px;
  }
  .game-form form input:is([type="radio"], [type="checkbox"]), .photo-game-form form input:is([type="radio"], [type="checkbox"]), .spot-game-form form input:is([type="radio"], [type="checkbox"]){
    height: 40px;
    width: 40px;
    margin-right: 15px;
	 
  }
}


/*  apply css only in chrome */
@supports (-webkit-appearance: none) {
  #text-font-size {
    transform: rotate(-90deg);
    height: 210px;
  }
}