:root {
	--color-text:white;
	--color-bg: white;
	--size: clamp(25rem, 1rem + 40vmin, 43rem);
	--gap: calc(var(--size) / 50);
	--duration: 25s;
	--scroll-start: 0;
	--scroll-end: calc(-100% - var(--gap));
  }
  
  .products-tooltip{
    position: relative;
    background-image: url(../images/model-1.webp);
    height:500px;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right:15px;
    border-radius: 5px;
    margin-top: 20px;
  }  
  .products-tooltip1{
    position: relative;
    background-image: url(../images/model-2.webp);
    height:500px;
    width: auto;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: 15px;
    border-radius: 5px;
    margin-top: 20px;
  }  
.products-tooltip button,.products-tooltip1 button {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 25px;
  height: 25px;
  margin: auto;
  border-radius: 50%;
  padding: 2px 5px 5px 5px;
border: 5px solid black;
  text-align: center;
  z-index: 9;
  outline: none;
  opacity: 1;

}
.tooltip .button, .tooltip1 .button{
    position: relative;
    top: -20px;
    left: -10px;
}
@media (max-width:768px) {
    .products-tooltip .tooltip .tooltiptext,   .products-tooltip1 .tooltip1 .tooltiptext1{
        width: 180px!important;
        padding:10px 10px 0px 10px!important;
    }
    #sanfrancisco {
  top: 50%;
  left: 40%!important;
}
.products-tooltip .products-tooltip1{
width: 450!important;
}
.products-tooltip,.products-tooltip1{
    margin-right: 0px;
    margin-left: 0px;
    background-position: center;
    margin-bottom: 20px;
}
#sanfrancisco1{
  top: 50%;
  left: 35%!important;
}
.products-tooltip .tooltip  .product-card .card-action .button,.products-tooltip1 .tooltip1  .product-card .card-action .button{
    width: 100%!important;
    margin:10px 0px 10px 15px!important;
}
}
@media (max-width:330px) {
    .products-tooltip .tooltip .tooltiptext,.products-tooltip1 .tooltip1 .tooltiptext1  {
        width: 180px!important;
        padding:10px 10px 0px 10px!important;

    }
    #sanfrancisco {
  top: 23%!important;
  left: 8%!important;
}
#sanfrancisco1{
  top: 25%!important;
  left:25%!important;
}
}
.products-tooltip .tooltip .tooltiptext,.products-tooltip1 .tooltip1 .tooltiptext1 {
  visibility: hidden;
  background-color: white;
  color: black;
  width: 285px;
  text-align: center;
  vertical-align: center;
  padding:10px 10px;
    border-radius: 3px;
  position: absolute;

  top: 0px;
  left: 220%;
  margin-left:-3px;
}

.products-tooltip .tooltip  .product-card .card-action .button,.products-tooltip1 .tooltip1  .product-card .card-action .button{
    width: 92%;
    margin:10px 0px;
    border-radius: 10px;
}
.products-tooltip .tooltip  .product-card .card-action,.products-tooltip1 .tooltip1  .product-card .card-action{
    background: none!important;
    opacity: 0!important;
}
.products-tooltip .tooltip:hover  .product-card .card-action,.products-tooltip1 .tooltip1:hover  .product-card .card-action{
    opacity: 1!important;
}
#sanfrancisco {
  top: 22%;
  left: 56%;
}
#sanfrancisco1 {
  top: 25%;
  left: 50%;
}
.products-tooltip .tooltip .tooltiptext.visible, .products-tooltip1 .tooltip1 .tooltiptext1.visible{
  visibility: visible;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.product-image-blur{
    background-color: rgb(255, 255, 255);
    border-radius: 250px;
    padding: 15px 10px 5px 10px;
    margin-top: -160px;
    z-index: 9;
    overflow: hidden;
}
/* .product-image-blur img{
    height: 80px;
   
} */