/* Enter Animation Fonts */
@font-face {
  font-family:'GalleryModern';
  src: local('GalleryModern'), local('../FONT/GalleryModern'),
      url('../FONT/GalleryModern.otf') format('opentype');
}

@font-face {
  font-family:'Branch';
  src: local('Branch'), local('../FONT/Branch'),
      url('../FONT/Branch.otf') format('opentype');
}

@import url('https://fonts.cdnfonts.com/css/gill-sans');



.bouquet_email, .bouquet_heading{
  position: absolute;
  width: 100%;
  opacity: 1;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 15;
  white-space: nowrap;
}
  .bouquet_heading h1{
    font-family: "GalleryModern";
    font-size: 12vh;
    font-weight:lighter;
    letter-spacing: 0.1em;
    text-align: center;
    color: #fff;
  }

  .bouquet_heading h2{
    font-family:'Gill Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.5em;
    text-align: center;
    color: #fff;
  }

  .bouquet_heading h3{
    font-family:'Branch';
    font-size: 2.1vh;
    font-weight: 100;
    font-style: italic;
    text-align: center;
    color: #fff;
  }

  .bouquet_email button, .bouquet_heading button{
    font-family:'Branch';
    font-size: 2.1vh;
    line-height: 1em;
    font-weight: 400;
    font-style: italic;
    text-align: center;
    color: #1f1f1f;
    background-color: #fff;
    border-radius: 2.5em;
    border: white solid;
    cursor: pointer;
    padding: 0 1.5em;
    height: 2em;
    margin: 2em auto 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);


    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* Enter Animation */
/* custom bouquet */
.bouquet_background{
  border: #1f1f1f solid;
  border-width: 0.12em;
  overflow: hidden;
  position: relative;
  margin: 2vh;
  height: 85%;
  align-items: center;
  max-height: fit-content;
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /* background-color: #93b0b4; */
  /* background-color: #e3dcdc; */
  width: 83%;
  max-width: 1321px;
  /* border-radius: 20px; */
}

.bouquet_canvas{
  overflow: hidden;
  position: relative;
  height: 100%;
  max-height: fit-content;
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;


  /* border-radius: 20px; */
  background-color: #ffffff;
  /* background-size: 150%; */
  /* background-image: linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 12%,rgba(255,255,255,0) 24%,rgba(255,255,255,.2637429971988795) 36%,rgba(255,255,255,1) 50%,rgba(255,255,255,.26376488095238093) 64%,rgba(255,255,255,0) 76%,rgba(255,255,255,0) 88%,rgba(255,255,255,0) 100%); */
  /* background-image: linear-gradient(60deg, #e4f9f6 8%, #fff5e7 30%, #badbd7 60%); */
  
}

.bouquet_custom1{
  display: block;
  position: absolute;
  width: 18%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); /* rotate(-7deg) */
  z-index: 12;
}



/* canvas */
.bouquet_IconWrapper {
  row-gap: 5vh;
  display: inline-flex;
  flex-direction: column;
  position: absolute;
  align-content: center;
  top: 38%;
  left: 0%;
  padding-left: 4vh;
  transform: translate(0%,-50%);
}

.bouquet_IconWrapper a{
  color: #1f1f1f6c;
}


        .bouquet_IconWrapper .icon {
          margin: auto;
          text-align: center;
          cursor: pointer;
          display: grid;
          grid-template-columns: 1fr 1fr;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          position: relative;
          z-index: 2;
          transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }
                .bouquet_IconWrapper .icon span {
                  border: solid #1f1f1f;
                  border-width:  0.07em;
                  display: block;
                  height: 45px;
                  width: 45px;
                  background: #fff;
                  border-radius: 50%;
                  position: relative;
                  z-index: 2;
                  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
                }
                        .bouquet_IconWrapper .icon span i {
                          /* line-height: 50%; */
                          height: 0em;
                          margin-top: 0em;
                          vertical-align: middle;
                          font-size: 2rem;
                          /* top: 50%; */
                          /* left: 20%; */
                          /* transform: translate(-50%,-50%); */
                        }
        .bouquet_IconWrapper .icon p {
          font-family: "Herbert-regular";
          font-size: 1.4rem;
          font-weight: 600px;
          text-align: left;
          margin: 0 0 0 0.5em;
          padding: 0em;
          text-decoration: none;
          /* background: #fff;
          border-radius: 50%;
          position: relative;
          z-index: 2;
          box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
          transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); */
        }
#bouquet_custom_canvas {
  position: absolute;
  overflow: hidden;
  margin: auto;
  width: 100%;
  height: 100%;
  /* background-color: rgb(235, 77, 77); */
  transform: translate(0%,0%);
}
        * #bouquet_custom_canvas img{
          position: absolute;
          width: 35%;
          left: 43%;
          top: 40%;
          transform: translate(-50%,-50%);
        }
        .bouquet_custom_canvas .main_wrappers {
          left: 45%;

        }
        .bouquet_custom_canvas .minor_wrappers {
          left: 45%;

        }

.bouquet_content{
  overflow: hidden;
  display: block;
  float: right;
  background-color:#ffffff;
  border-left: #1f1f1f solid;
  border-width: 0.07em;
  height: 100%;
  width: 35vh;
  top: 50%;
  left: 85%;
}

.bouquet_flowers{
  /* background-color:#ffffff; */
  padding: 2vh 0vh 2vh 0vh;
  width: 35vh;
  height: 42%;
}
        .bouquet_flowers h1{
          /* #heading */
          font-family: "GalleryModern";
          font-size: 2rem;
          font-weight: 500px;
          text-align: left;
          color: rgb(0, 0, 0);
          margin-left: 3vh;
          padding: 3.5vh 0 1vh 0 ;
        }
        .bouquet_flowers .wrapper {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          width: auto;
        }
                .bouquet_flowers .wrapper div img{
                  cursor: pointer;
                  width: 6.3vh;
                  height: 6.3vh;
                  margin: 0px;
                  padding: 5px;
                  margin-left: auto;
                  margin-right: auto;
                  display: grid;
                  border-radius: 2em;
                  border-width: 0.1px;
                  grid-template-columns: 1fr 1fr 1fr;

                }
                        .bouquet_flowers .wrapper div h2{
                          font-family:'Gill Sans', sans-serif;
                          margin-top: 10px;
                          font-size: 1.1rem;
                          font-weight: 400;
                          text-align: center;
                          /* color: rgb(0, 0, 0); */
                        }
                .flower_active,
                .leaves_active,
                .wrappers_active{
                  color: rgb(0, 0, 0);
                  border: solid #1f1f1f;
                  border-width: 0.1em;
                  /* border: hidden solid; */
                }

                .leaves_limits,
                .leaves_limits + h2{
                  /* color: */
                  border: hidden solid;
                  opacity: 0.35;
                  border-radius: 1em;
                  border-width: 0.7em;
                }

.bouquet_colors{
  /* background-color: rgb(71, 148, 255); */
  padding: 0.5em 0vh 0vh 0vh;
  width: 35vh;
  height: 15%;
}
        .bouquet_colors h1{
          font-family: "GalleryModern";
          font-size: 2rem;
          font-weight: 500px;
          text-align: left;
          color: rgb(0, 0, 0);
          margin: 0 0 0 3vh;
        }
        .bouquet_colors .wrapper {
          display: grid;
          padding: 0.8em 4em 1em 2em;
          grid-template-columns: 1fr repeat(5, 1fr);
          width: auto;
        }

                .bouquet_colors .wrapper div div{
                  background-color: aqua;
                  align-items: center;
                  width: 2.6vh;
                  height: 2.6vh;
                  margin: 0px;
                  padding: 5px;
                  margin-left: auto;
                  margin-right: auto;
                  display: grid;
                  /* background-color: rgb(132, 198, 255); */
                  /* border: #1f1f1f solid; */
                  border-radius: 2em;
                  border-width: 1px;
                  grid-template-columns: 1fr 1fr 1fr;
                }
.bouquet_quantity{
  /* background-color: rgb(246, 71, 255); */
  padding: 0.5em 0vh 0vh 0vh;
  width: 35vh;
  height: 20%;
}



.bouquet_quantity .bouquet_quantity_tables,
.bouquet_description .bouquet_description_tables{
  overflow-x: auto;
  position: relative;
  height: max-content;
  bottom: 0;
  grid-gap: 0.5vh;
  padding: .6em .6em 0em 0;
}
.bouquet_quantity .bouquet_quantity_tables{
  display: grid;
  grid-template-columns: 4vh 4vh 4vh;
}
        .bouquet_quantity .bouquet_quantity_tables h1
        .bouquet_description .bouquet_description_tables h1{
          color: rgb(0, 0, 0);
        }

        .bouquet_quantity .bouquet_quantity_tables h1 i{
          font-size: 1.1em;
          color: #6b948a;
        }

        .bouquet_quantity .heading,
        .bouquet_description .heading{
          /* background-color: rgb(246, 71, 255); */
          padding: 0.9em 0vh 0vh 0vh;
          width: 35vh;
          height: max-content;
          grid-template-columns: 1.5fr 1.5fr;
          display: grid;
        }
                .bouquet_quantity_tables h2,
                .bouquet_description_tables h2{
                  font-family:'Gill Sans', sans-serif;
                  line-height: 1.4em;
                  font-size: 14px;
                  font-weight: 400;
                  margin: 0 0 0 3vh;
                  text-align: left;
                  float: left;
                  color: black;
                }

                .bouquet_quantity h1,
                .bouquet_description h1{
                  font-family: "GalleryModern";
                  font-size: 2rem;
                  font-weight: 500px;
                  text-align: left;
                  color: rgb(0, 0, 0);
                  margin: 0 0 0 3vh;
                }

                .bouquet_quantity .management{
                  float: right;
                  color: rgb(0, 0, 0);
                  margin: 0 0 0 3vh;
                  display: grid;
                  grid-template-columns: 4vh 4vh;
                }
                .bouquet_quantity .management span{
                  cursor: pointer;
                  border: #1f1f1f solid;
                  font-weight: 10;
                  border-width: 0.07em;
                  display: block;
                  height: 23px;
                  width: 23px;
                  background: #fff;
                  border-radius: 50%;
                  position: relative;
                  margin: auto;
                  z-index: 2;
                  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.1);
                  transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
                }

                        .bouquet_quantity .management span i {
                          width: 100%;
                          height: 100%;
                          margin: 0.5em;
                          margin-left: auto;
                          margin-right: auto;
                          vertical-align: middle;
                          text-align: center;
                          font-size: 1rem;
                          color: #1f1f1f;
                          

                        }



.bouquet_content .result_cost{
  display: block;
  position: relative;
  /* background-color: #edf4f0; */
  border-top: #1f1f1f solid;
  border-left: #1f1f1f solid;
  border-width: 0.07em;
  
  background-color:#ffffff;
  height: 25%;
  width: 35vh;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 20;
}
        .result_cost h1{
          font-family: "GalleryModern";
          font-size: 2rem;
          font-weight: 500px;
          text-align: left;
          color: rgb(0, 0, 0);
          margin-left: 3vh;
        }

        .result_cost div{
          display: block;
          position: relative;
          height: fit-content;
          width: 35vh;
          position: relative;
          /* bottom: 0; */
          right: 0;
        }

        .result_cost div h2{
          font-family:'Gill Sans', sans-serif;
          font-size: 1.6rem;
          font-weight: 400;
          text-align: left;
          color: rgb(0, 0, 0);
          margin-left: 3vh;
        }
        .result_cost button{
          font-family:'Branch';
          font-size: 1.8vh;
          line-height: 1em;
          font-weight: 900;
          white-space: nowrap;
          font-style: italic;
          text-align: center;
          
          background-color: rgba(255, 255, 255, 0);
          border: #1f1f1f solid;
          border-width: 0.07em;

          cursor: pointer;
          padding: 1.3em 4.5em;
          height: 2em;
          margin: 2.5vh 0vh;
          position: absolute;
          left: 50%;
          transform: translate(-50%,-50%);

          display: flex;
          -webkit-flex-direction: row;
          flex-direction: row;
          -webkit-align-items: center;
          align-items: center;
          -webkit-justify-content: center;
          justify-content: center;
        }
.bouquet_items{
  display: block;
  position: relative;

  background-color:#ffffff;
  border-top: #1f1f1f solid;
  border-width: 0.07em;

  height: 25%;
  width: 100%;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 19;
  padding: 0 0 2vh 2vh;
  
}

.bouquet_items .collum {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: auto;
  margin-left: 3vh;
  
}
        .bouquet_items h1{
          font-family: "GalleryModern";
          font-size: 2rem;
          font-weight: 500px;
          text-align: left;
          color: rgb(0, 0, 0);
          margin: 2vh 0 0 3vh;
      
        }
        .bouquet_items .collum {
          overflow-x: auto;
          position: relative;
          display: grid;
          padding: 0.8em 4em 1em 1em;
          display: grid;
          grid-auto-flow: column;  
          grid-gap: 1vh;
          margin-right: 30vh; 
          
          /* background-color: #de2424; */

        }
        .bouquet_items ::-webkit-scrollbar {
          height: 1vh;
          background: #1f1f1f1c;
          border-color: solid #1f1f1f; 
          border-width: 3px;
          border-radius: 8px;
          
        }
           
                .bouquet_items .collum div .box{
                  overflow: hidden;
                  align-items: center;
                  width: 23vh;
                  height: 11vh;
                  margin: 0rem;
                  margin-left: auto;
                  margin-right: auto;
                  display: grid;
                  border: #000000 solid;
                  /* border: white solid; */
                  /* background-color: white; */
                  border-radius: 1.4em;
                  border-width: 0.02em;
                  /* grid-template-columns: 1fr 1fr 1fr; */
                }

                        .bouquet_items .collum div .box .insidebox{
                          align-items: center;
                          width: 23vh;
                          /* height: 11vh; */
                          grid-template-columns: 1.2fr 1.5fr;
                          display: grid;
                        }
                        .bouquet_items .collum div .box img{
                          text-align:center;
                          /* display: block; */      
                          width: 8.3vh;
                          height: auto;
                          max-width: 8.3vh;;
                          max-height: 8.3vh;
                          margin: 0px;
                          padding: 5px;
                          margin-left: auto;
                          margin-right: auto;
                        }

                        .bouquet_items .collum div .box *{
                          margin-bottom: 0;
                        }
                        
                        .bouquet_items .collum div .box p1{
                          font-family:'Gill Sans', sans-serif;
                          word-spacing: 2px;
                          font-size: 1.2rem;
                          font-weight: 400;
                          text-align: left;
                          color: rgb(0, 0, 0);

                          width: 100%;
                          height: auto;
                          width: 23vh;
                          height: 11vh;
                          padding: 1vh 0 0 0.6vh;
                          border-left: #1f1f1f solid;
                          border-width: 0.07em;
                          /* background-color: white; */
                          /* border: #1f1f1f solid; */
                          /* border-radius: 2em;
                          border-width: 1px; */
                        }

                        .bouquet_items .collum div .box p2{
                          font-family:'Gill Sans', sans-serif;
                          /* margin-top: 10px; */
                          line-height: 5vh;
                          font-size: 2.2rem;
                          font-weight: 320;
                          text-align: left;
                          color:#000000a9;
                          bottom: 0;
                          /* padding-top: vh */
                        }