.modal-btn-cancel{background-color: hsl(var(--color-6));}
.modal-btn-accept{background-color: hsl(var(--color-8));}
.modal-btn-cancel,.modal-btn-accept{border-radius: 8px;}
.toast-popup{background-color: hsl(var(--color-2));}
.color-ask{color:hsl(var(--color-8));}
.color-alert{color:hsl(var(--color-6));}
.close,.color-gray{color:hsl(var(--color-4));}
.order-btn,.mail-btn{border:1px solid hsl(var(--bord-color));transition: 0.2s ease-in-out;}
.order-btn:hover,.mail-btn:hover{background-color: hsl(var(--color-3));color:snow;scale:0.95}

.price-icons{min-width: 20px;min-height: 20px;text-align: center;line-height: 20px;}

.contactus,.subscribe-input,.input-field {border:1px solid hsl(var(--bord-color));}
.subscribe-input{width:400px}

     input:-webkit-autofill,
    input:-webkit-autofill:hover, 
    input:-webkit-autofill:focus, 
    input:-webkit-autofill:active{
        -webkit-background-clip: text;
        -webkit-text-fill-color: #777575;
        transition: background-color 5000s ease-in-out 0s;
        box-shadow: inset 0 0 20px 20px #ffffff;
        
    }


.subscribe-input:has(> input:focus),.input-field:has(> input:focus)
{ 
  box-shadow: 0px 0px 10px 0px rgba(60, 141, 188, 0.5);
  border: 0.8px solid rgba(60, 141, 188, 0.7) !important;
}
.zoom-image{width: 50%;}

.product-drop .abs{top:0px;width:115px;opacity: 0;z-index: -1;transition: all 300ms ease-in-out;left:-10px}

.product-drop{z-index: 1;}

.product-drop:hover::before{
  content:"";
  position: absolute;
  top:0;
  left:-10px;
  width:115px;
  height: 30px;
  background-color: hsl(var(--color-1)) !important;
  z-index: 0;
  border-top-left-radius:5px ;border-top-right-radius:5px ;

}
.product-drop:hover  .abs{top:30px;opacity: 1;z-index:0;border-top-left-radius:0px ;border-top-right-radius:0px ;}
.product-drop .no-wrap{transition: all 200ms ease-in;}
.product-drop .no-wrap:hover{box-shadow: var(--shadow) !important;font-style: italic;scale:0.95}

.video-bar{background-color: snow;}

.color.selected{color:hsl(var(--color-6));text-decoration: line-through solid;}

.purchase-body{display: grid;grid-template-columns: 1fr 100px 1fr;}
.purchase-form{margin-top: 72px;}

.alert-container{background-color: #F7DFDF;color:#eea5b0;border:1px solid #f1cfd4;}

/* .purchase-body.inline-pad{padding-inline: 1rem;} */
@media (max-width:1550px){.purchase-body.inline-pad{padding-inline: 1rem;} }
@media (max-width:1350px){
  .inline-pad{padding-inline: 2rem;}
  
  
}

@media (max-width:1250px){
  html,body,data-holder{font-size: clamp(16px,calc(1.2vw + 10px),18px);}
  .purchase-body{grid-template-columns: 1fr;}

  .purchase-body > div:nth-child(2){display: none;}
  .scene{margin-inline: auto;}
  .purchase-form{margin-bottom: 20px;margin-top:-60px;}
  .purchase-form-elem{padding-inline: 8rem;}

  .inline-pad{padding-inline: 8rem;}
  footer.inline-pad{padding-inline : 2rem;grid-template-columns: 4fr 1fr 1fr;}
  .bill-board-content{grid-template-columns: 1fr;}
  .zoom-image{width: 65%;}
  .intro{grid-template-columns: 1fr 1fr;}
  .prices > div{padding: 20px;}
  .pr-line{font-size: 14px;}
 
}

@media (max-width:1150px){.inline-pad,.purchase-form-elem{padding-inline: 4rem;}}
@media (max-width:1000px){
  .inline-pad{padding-inline:8rem;}
  .scene{margin-left:-30px;scale: 0.7;}
  .scene .btn{width:50px;height:50px}
  .scene .left-ang{left:-50px}
  .scene .right-ang{right:-50px}
  footer.inline-pad{grid-template-columns: 2fr 1fr;}
 .purchase-form-elem{padding-inline: 8rem;margin-left:-50px;}
  .intro,.prices{grid-template-columns: 1fr;}
  .zoom-image{width: 75%;} 
  .navbar{
    flex-direction: column;
   
    align-items:end;
    width:auto;
  }
  .nav-content{
    flex-direction: column;
    background-color: hsl(var(--color));
    position: absolute;
    
    top:0;
    right:0;
   height:fit-content;
    transform:translate(0,45px);
    gap:60px;
    
    z-index: 10;
        
       max-height: 0px;
       overflow: hidden;
       transition: max-height 300ms ease-in;
    
  }
  .page-top .toggle-btn{display: block !important;}
  .product-drop .z-1{color:snow}
  .nav-content .color{color:snow}
  .product-drop:hover .z-1{color:hsl(var(--color))}

  .navbar:hover .nav-content{
    padding: 12px;
    max-height: 500px;
  }

  
   footer.inline-pad{padding-inline:0px;}
   
}