body {
   margin: 0;
   padding: 0;
   position: relative;
}

* {
   font-family: Arial, Helvetica, sans-serif;
}

ul{
    list-style: none;
    margin:0;
    padding:0;
}
*{
    font-family: Arial, Helvetica, sans-serif;
}
h1,h2,h3,h4{
    margin:0;
    padding:0 ;
}

p {
   padding: 0;
   margin: 0;
   font-size: small
}
:root {
    --BeigeColor: #B48F62;
    --LightBeige: #FFFDF1;
    --GreenColor: #43A1A8;
    --GreeColor_Hover: #1E7C83;
    --BrownColor: #B48F62;
}

.Main {
   margin: 0;
   padding: 0;
   background-image: url(../svg/BG_Graphic.svg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr;
   height:auto !important;
}


/*Head CSS Style*/

/*Hero CSS Style*/

/* --------------Hero Container CSS--------------------------  */
.HeroContainer{
    padding:10px 20%;
}
.HeroContainer .row_1 {
    padding: 6% 0;
}
.HeroContainer .row_1 .col_1 ul li h1{
    font-size: 60px;
}


/* .row_3 {
    padding: 4% 20%;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    background-color: #65bec5;
}
.row_3 .cols{
    color: white;
   display: flex;
   align-items: center;
} 
.row_3 .cols .awardIcon img{
    height: 80px; 
    width: 80px;
    padding:20px
 } 
 .row_3 .cols .detailsCont ul li p{
    font-size:small;
 }  */


  

/* --------------Starter CSS--------------------------  */
  

/* --------------Comment Section CSS--------------------------  */ 

/* --------------Question Section CSS--------------------------  */ 

 

.footCont .col .linkCont {
   display: flex;
}

.footCont .col .linkCont ul {
   margin-right: 50px;
}

.footCont .col .linkCont ul li {
   margin: 15px 0;
}

.footCont .col span {
   line-height: 2;
}


/*Fillup CSS*/

.Main .SmContainer {
   padding: 10px 20%;
   color: var(--BrownColor);

}

.Main .SmContainer .boxCont {
   background-color: white;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.Main .SmContainer .inputCont .textBoxCont {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
}

.Main .SmContainer .inputCont .col {
   margin-right: 35px;
}

.Main .SmContainer .inputCont .col ul li {
   margin: 20px 0;
}

.Main .SmContainer .inputCont .col ul li .dropdown {
   background-color: white;
   border: solid 1px #ccc;
   border-radius: 6px;
   padding: 10px 4px;
   width: 100%;
}

.Main .SmContainer .inputCont .col ul li .dropdown .displayList {
   display: flex;
   justify-content: space-between;
   width: 100%;
}

.Main .SmContainer .inputCont .col ul li .dropdown .hideThis {
   display: none;
}

.Main .SmContainer .inputCont .col ul li .dropdown .options .item {
   margin: 10px 0;
   display: flex;
   justify-content: space-between;
}

/*Begin insertion Johnny*/
/*cart promo code*/
div .discount{
   display: grid;   
   justify-content: center;   
   text-align: center;
   /* padding: 0;
   width: 100%;
   text-align: center; */
}

div .totalCont{
   font-size: xx-large;
}

input .PromoCode{
   width: 50%;
   padding: 12px 20px;
   margin: 8px 0;
   box-sizing: border-box;   
   border-radius: 6px;
}

.Main .SmContainer .inputCont .textBoxCont .col .selector #selectField {
    display: flex; 
    box-sizing: border-box; 
    border-radius: 6px;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
}

.Main .SmContainer .inputCont .textBoxCont .col .selector .hide { 
   width: 100%;
   padding: 0%;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 6px;
   overflow: hidden;
   border: 1px solid;
}
   .Main .SmContainer .inputCont .textBoxCont .col .selector .hide .Options {    
   width: 100%;
   padding: 8px;
   list-style: none;
   cursor: pointer;
   box-sizing: border-box;
}
   .Main .SmContainer .inputCont .textBoxCont .col .selector .hide lu .Options:hover {    
   background: rgba(43, 26, 26, 0.233);
}
 .price {      
   /* .Main .SmContainer .inputCont .textBoxCont .col .selector .hide .Options li .price  {    */
   float: right;
}
.hide{
   visibility: hidden;
   height: 0px;
  }
 
/* region   */
.Main .SmContainer .inputCont .textBoxCont .col .selector #selectFieldRg {
   /* mod by johnny 08282022 */
      /* padding: 0;
    width: 100%; 
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    cursor: pointer;
    padding: 6px 10px; */
    display: flex; 
    box-sizing: border-box; 
    border-radius: 6px;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;    
   /* mod by johnny 08282022 */    
}

.Main .SmContainer .inputCont .textBoxCont .col .selector .hideRg { 
   width: 100%;
   padding: 0%;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 6px;
   overflow: hidden;
   border: 1px solid;
}
   .Main .SmContainer .inputCont .textBoxCont .col .selector .hideRg .OptionsRg {    
    width: 100%;
   padding: 8px;
   list-style: none;
   cursor: pointer;
   box-sizing: border-box;
}
.Main .SmContainer .inputCont .textBoxCont .col .selector .hideRg lu .OptionsRg:hover {    
   background: rgba(43, 26, 26, 0.233);
}
 .priceRg {      
   /* .Main .SmContainer .inputCont .textBoxCont .col .selector .hide .Options li .price  {    */
   float: right;
}
.hideRg{
   visibility: hidden;
   height: 0px;
  }

/* Delivery   */
.Main .SmContainer .inputCont .textBoxCont .col .selector #selectFieldDv {
/* mod by johnny 08282022 */   
  /* padding: 0;
    width: 100%; 
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 6px;
    cursor: pointer;
    padding: 6px 10px; */
    display: flex; 
    box-sizing: border-box; 
    border-radius: 6px;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;      
/* mod by johnny 08282022 */      
}

.Main .SmContainer .inputCont .textBoxCont .col .selector .hideDv { 
   width: 100%;
   padding: 0%;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 6px;
   overflow: hidden;
   border: 1px solid;
}
   .Main .SmContainer .inputCont .textBoxCont .col .selector .hideDv .OptionsDv {    
   width: 100%;
   padding: 8px;
   list-style: none;
   cursor: pointer;
   box-sizing: border-box;
}
   .Main .SmContainer .inputCont .textBoxCont .col .selector .hideDv lu .OptionsDv:hover {    
   background: rgba(43, 26, 26, 0.233);
}
 .priceDv {      
   /* .Main .SmContainer .inputCont .textBoxCont .col .selector .hide .Options li .price  {    */
   float: right;
}
.hideDv{
   visibility: hidden;
   height: 0px;
  }
.lblMsg{
  color:red;
}  
/*End insertion Johnny*/

.Main .SmContainer .totalPrice {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
}

.Main .SmContainer .totalPrice .detaislCont,
.Main .SmContainer .totalPrice .btnCont {

   display: flex;
   justify-content: end;
}

.Main .SmContainer .totalPrice .col_1 {
   display: flex;
   align-items: flex-end;
}

.Main .SmContainer .totalPrice .col_1 .btnCont {
   background-color: var(--GreenColor);
   color: white;
   padding: 8px 100px;
   margin: 20px 0;
   font-weight: bold;
   border: none;
   border-radius: 8px;
   cursor: pointer;
}

.Main .SmContainer .totalPrice .detaislCont ul li h1 {
   margin: 0 10px;
}

.Main .SmContainer .totalPrice .detaislCont ul li:nth-child(1) {
   display: flex;
}

.Main .SmContainer .totalPrice .btnCont .addCartBtn {
   background-color: var(--GreenColor);
   color: white;
   padding: 8px 100px;
   margin: 20px 0;
   font-weight: bold;
   border: none;
   border-radius: 8px;
   cursor: pointer;
}

/* 
     -----------------Payment CSS----------------------------- */
.Main .SmContainer .PaymentDetails {
   background-color: white;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 1fr;
   padding: 10px;
   border-radius: 8px;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.Main .SmContainer .PaymentDetails .summaryCont {
   padding: 0 10px;
}

.Main .SmContainer .PaymentDetails .summaryCont .cartList {
   border-bottom: solid 1px;
}

.Main .SmContainer .PaymentDetails .summaryCont .cartList .TableCont {
   display: flex;
   justify-content: space-between;
   margin: 25px 0;
}

.Main .SmContainer .PaymentDetails .summaryCont .totalCont {
   display: flex;
   justify-content: space-between;
   margin: 25px 0;
}

.Main .SmContainer .PaymentDetails .summaryCont .btnCont ul {
   display: flex;
   justify-content: space-between;
}

.Main .SmContainer .PaymentDetails .summaryCont .btnCont ul li .addProdBtn {
   background-color: gray;
   color: white;
   padding: 8px 15px;
   margin: 20px 0;
   font-weight: bold;
   border: none;
   border-radius: 8px;
   cursor: pointer;
}

.Main .SmContainer .PaymentDetails .summaryCont .btnCont ul li .PayBankbtn {
   background-color: var(--GreenColor);
   color: white;
   padding: 8px 15px;
   margin: 20px 0;
   font-weight: bold;
   border: none;
   border-radius: 8px;
   cursor: pointer;
}

.Main .SmContainer .PaymentDetails .personalDataCont {
   padding: 0 15px;
}

.Main .SmContainer .PaymentDetails .personalDataCont .inputCont {
   padding: 10px 0;
   border-bottom: solid 1px;
}

.Main .SmContainer .PaymentDetails .personalDataCont .inputCont ul li {
   margin: 6px 0;
}

.Main .SmContainer .PaymentDetails .personalDataCont .inputCont ul li span {
   display: block;
}

.Main .SmContainer .PaymentDetails .personalDataCont .inputCont ul li .infoTb {
   width: 95%;
   padding: 6px 4px;
   border: solid 1px var(--BrownColor);
   border-radius: 6px;
}

.Main .SmContainer .PaymentDetails .personalDataCont .inputCont ul li:nth-child(3) ul {
   display: flex;
}

.Main .SmContainer .PaymentDetails .personalDataCont .inputCont ul li:nth-child(3) ul li {
   width: 100%;
}

.Main .SmContainer .PaymentDetails .personalDataCont .inputCont ul li:nth-child(3) ul li .infoTb {
   width: 90%;
}

.paymentTransactCont {
   padding: 10px 0;
}

.paymentTransactCont .SelectBank {
   display: flex;
   align-items: center;
   margin: 10px 0;
}

.paymentTransactCont .SelectBank .radio {
   height: 12px;
   width: 12px;
   border-radius: 50%;
   border: solid 1px var(--BrownColor)
}

.paymentTransactCont .SelectBank label {
   margin: 0 10px;

}

.Main .SmContainer .termConditionCont {
   display: flex;
   justify-content: end;
   color: var(--BrownColor);
   margin: 20px 0;
}

.Main .SmContainer .termConditionCont .PaymentBtn {
   background-color: var(--BeigeColor);
   color: white;
   padding: 8px 50px;
   font-weight: bold;
   border: none;
   border-radius: 8px;
   cursor: pointer;

}


@media(max-width:1400px) {
 

   .Main .HeronContainer {

      margin: 10px 20px;
   }

   .Main .headContainer {
      padding: 10px 20px;
   }
}

/*Mobile*/

@media(max-width:1200px) {
   .head_container .menu_nav { 
      display: none;
  }
  .row_2 { 
   grid-template-columns: 1fr;
   grid-template-rows: 1fr 1fr 1fr 1fr 1fr; 
}
.row_3 { 
   grid-template-rows: 1fr 1fr 1fr;
   grid-template-columns: 1fr;
}
.Starter .boxCont { 
   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr; 
}
.CommentsBox .CarouselCont {
   grid-template-rows: 1fr 1fr 1fr 1fr;
   grid-template-columns: 1fr; 
}
  
}



/* 
     ------------------------------------------------------ */

.Main .overlay {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.1);
   width: 100%;
   height: 100%;
   z-index: 2;
}

.Main .smmPopup {
   z-index: 3;
   transition: 50ms ease-in-out;
   transform: scale(0);
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   gap: 20px;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   border-radius: 8px;
   padding: 20px 10px;
   height: fit-content;
   width: 1200px;
   background-color: white;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.Main .smmPopup .box {
   background-color: white;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr auto auto;
   padding: 30px 10px;
   border-radius: 8px;
   transition: 100ms ease-in-out;
   cursor: pointer;
}

.Main .smmPopup .box:hover {
   transform: scale(1.05);
   box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}

.Main .smmPopup .box .icon {
   height: 60px;
   width: 60px;
   display: flex;
   justify-self: center;
   align-self: center;
   border-radius: 50%;
   margin: 20px 0;
}

.Main .smmPopup .box .writing {
   display: flex;
   justify-content: center;
}

.Main .smmPopup .box .writing span {
   text-align: center;
}

.Main .smmPopup .box .btnCont {
   text-align: center;
   margin: 10px 0;
}

.Main .smmPopup .box .btnCont .priceBtn {
   border: none;
   background-color: rgba(0, 0, 0, 0.1);
   padding: 6px 15px;
   border: solid 2px #ccc;
   border-radius: 6px;
   cursor: pointer;
}

.Main .smmPopup .box .btnCont .priceBtn:hover {
   background-color: rgba(0, 0, 0, 0.4);
   border: solid 2px rgb(150, 150, 150);
   color: white;
}



.selector{
    background: white;
    border: solid 1px; 
    padding: 0px;
    border-radius: 8px;
    position: relative;
}

#list{
    position: absolute; 
    background: white;
    width: 100%;
    border: solid 1px;
    padding: 0 0px;
    border-radius: 8px;
    z-index: 10;
}
#list .Options{
        padding: 0 10px;
}

/* Begin test Johnny 08262020*/

#listRg{
   position: absolute; 
   background: white;
   width: 100%;
   border: solid 1px;
   padding: 0 0px;
   border-radius: 8px;
   z-index: 10;
}
#listRg .OptionsRg{
       padding: 0 10px;
}

#listDv{
   position: absolute; 
   background: white;
   width: 100%;
   border: solid 1px;
   padding: 0 0px;
   border-radius: 8px;
}
#listDv .OptionsDv{
       padding: 0 10px;
}

 .div-center {
   width: 520px;
   height: 500px;
   left: 0;
   right: 0;
   top: 450px;
   bottom: 0;
   margin: auto;
   max-width: 100%;
   max-height: 100%;
   overflow: auto;
   padding: 1em 2em;
   border-bottom: 2px solid #ccc;
   display: table;
 }
 
 div.content {
   display: table-cell;
   vertical-align: middle;
 } 

.LoginOverlay {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.1);
   width: 100%;
   height: 100%;
   z-index: 2;
}

.LoginPopup {
   z-index: 3;
   transition: 50ms ease-in-out;
   transform: scale(0);
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: none;
   gap: 20px;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
   border-radius: 8px;
   padding: 20px 10px;
   height: fit-content;
   width: 400px;
   background-color: white;
   box-shadow: -5px 0px 10px rgba(9, 0, 7, 0.45);
}

.LoginPopup .box {
   background-color: white;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr auto auto;
   padding: 30px 10px;
   border-radius: 8px;
   transition: 100ms ease-in-out;
   cursor: pointer;
}

.LoginPopup .box:hover {
   transform: scale(1.05);
   box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
}

.LoginPopup .box .icon {
   height: 60px;
   width: 60px;
   display: flex;
   justify-self: center;
   align-self: center;
   border-radius: 50%;
   margin: 20px 0;
}

.LoginPopup .box .btnCont {
   text-align: center;
   margin: 10px 0;
}

.LoginPopup .box .btnCont .loginBtn {
   border: none;
   background-color: rgba(0, 0, 0, 0.1);
   padding: 6px 15px;
   border: solid 2px #ccc;
   border-radius: 6px;
   cursor: pointer;
}

.LoginPopup .box .btnCont .loginBtn:hover {
   background-color: rgba(0, 0, 0, 0.4);
   border: solid 2px rgb(150, 150, 150);
   color: white;
}
/* Begin test Johnny 08262020*/