.form-step {
display: none;
transform-origin: top;
animation: animate 0s;
}
.form-step-active {
display: block;
}
.input-group {
margin: 2rem 0;
}
@keyframes animate {
from {
transform: scale(1, 0);
opacity: 0;
}
to {
transform: scale(1, 1);
opacity: 1;
}}
.padding_image{
padding-right: 1em;
padding-left: 1em;
}
.slideshow-container {
position: relative;
width: 100%;
max-width: 400px;
border-radius: 15px;
aspect-ratio: 1 / 1; 
overflow: hidden;
margin: auto;
border: 2px solid #ddd;
box-shadow: 0px 4px 8px #02010175;
}
.slide {
display: none;
width: 100%;
height: 100%;
position: absolute;
animation: fadeEffect 2s;
}
.slide img{
width: 100%;
height: 100%;
}
.slideshow-container1 {
position: relative;
width: 100%;
max-width: 400px;
border-radius: 15px;
aspect-ratio: 1 / 1; 
overflow: hidden;
margin: auto;
border: 2px solid #ddd;
box-shadow: 0px 4px 8px #02010175;
}
.slide1 {
display: none;
width: 100%;
height: 100%;
position: absolute;
animation: fadeEffect 2s;
}
.slide1 img{
width: 100%;
height: 100%;
}
@keyframes fadeEffect {
from {opacity: 0.4;} 
to {opacity: 1;}
}
.active-tel {
display: block;
}
.active1 {
display: block;
}
.dots {
text-align: center;
padding: 10px;
background: rgb(255, 255, 255);
}
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
border: 2px solid hsl(217, 71%, 53%);
background-color: rgb(255, 255, 255);
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active-dot {
background-color: hsl(217, 71%, 53%);
}
.slideshow-container-mobile {
position: relative;
width: 100%;
height: 400px;
max-width: 1500px;
border-radius: 15px;
aspect-ratio: 2 / 1;
overflow: hidden;
margin: auto;
border: 2px solid #ddd;
box-shadow: 0px 4px 8px #02010175;
}
.slide-mobile {
display: none;
width: 100%;
height: 100%;
position: absolute;
animation: fadeEffectMobile 2s;
}
.slide-mobile img{
width: 100%;
height: 100%;
}
.slideshow-container-mobile1 {
position: relative;
width: 100%;
height: 400px;
max-width: 1500px;
border-radius: 15px;
aspect-ratio: 2 / 1;
overflow: hidden;
margin: auto;
border: 2px solid #ddd;
box-shadow: 0px 4px 8px #02010175;
}
.slide-mobile1 {
display: none;
width: 100%;
height: 100%;
position: absolute;
animation: fadeEffectMobile 2s;
}
.slide-mobile1 img{
width: 100%;
height: 100%;
}
@keyframes fadeEffectMobile {
from {opacity: 0.4;} 
to {opacity: 1;}
}
.active-mobile {
display: block;
}
.active-mobile1 {
display: block;
}
.dots-mobile {
text-align: center;
padding: 10px;
background: rgb(255, 255, 255);
}
.dot-mobile {
height: 15px;
width: 15px;
margin: 0 2px;
border: 2px solid hsl(217, 71%, 53%);
background-color: rgb(255, 255, 255);
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active-dot-mobile {
background-color: hsl(217, 71%, 53%);
}
.wrapper{
width: 100%;
}
.carousel{
margin: auto;
padding: 0 5px;
}
.carousel .card{
color: #000000;
text-align: center;
max-height: 200px;
margin: 20px 0;
padding: 2.5em 0.3em 2.5em 0.3em;
font-size: 22px;
font-weight: bold;
letter-spacing: 1px;
border-radius: 10px;
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
transition: background-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.carousel .card img{
max-width: 140px;
height: 140px;
width: 100%;
border-radius: 50%;
display: block;
margin: -35px auto;
}
.carousel .card-1{
background: #ffffff;
}
.carousel .card-2{
background: #ffffff;
}
.carousel .card-3{
background: #ffffff;
}
.carousel .card-4{
background: #ffffff;
}
.carousel .card-5{
background: #ffffff;
}
.carousel .card:active::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid rgb(8, 137, 223);
background-color: rgba(0, 0, 0, 0.12);
border-radius: 10px;
z-index: 1;
}
 @media (max-width: 600px) {
.owl-dot{
height: 15px;
width: 30px;
margin: 0 5px;
outline: none;
border-radius: 14px;
border: 2px solid hsl(217, 71%, 53%) !important;
box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.owl-dots{
text-align: center;
margin-bottom: 0px;
}}
.owl-dots{
text-align: center;
margin-bottom: 0px;
}
.owl-dot{
height: 15px;
width: 35px;
margin: 0 5px;
outline: none;
border-radius: 14px;
border: 2px solid hsl(217, 71%, 53%) !important;
box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.owl-dot.active,
.owl-dot:hover{
background: hsl(217, 71%, 53%) !important;
}
.review_text {
color: black;
font-size: 22px;
margin: auto;
font-weight: bold;
text-align: center;
letter-spacing: 1px;
}
.top-product {
text-align: center;
margin-bottom: auto;
}
.bottom-product {
text-align: center;
margin-top: auto;
}
 .padding-card {
padding: 0.2em 0.2em 0.5em 0.2em;
 }
 input:disabled {
 width: 95%;
 background-color: #ffffff; 
 color: #000000;
 border: 1px solid #00000000; 
 cursor: not-allowed; 
 font-family: times;
 letter-spacing: 1px; 
 text-align: center;
 font-size: 18px;
 }
 @media (min-width: 315px) {
.search-input{
flex: 1; 
height: 100%;
width: 90%;
border: none;
outline: none;
padding: 0 20px;
font-size: 20px;
font-weight: bold;
border-radius: 0 25px 25px 0;
letter-spacing: 1px;
}}
.discount-badge {
position: absolute;
top: 10px;
left: 10px;
background-color: red;
color: white;
font-family: times;
padding: 2px 5px;
letter-spacing: 2px;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
}
.img-product{
display: block;
position: relative;
align-items: center;
justify-content: center;
 background: #000000;
width: 100%; 
aspect-ratio: 1 / 1;
box-sizing: border-box;
 border-radius: 5px 5px 0px 0px;
 object-fit: cover;
margin: auto;
 }
.product-card {
margin: auto;
 margin-top: 10px;
border-radius: 5px;
text-align: center;
 background: #fff;
border: 1px solid #dbdbdb;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.product-card:hover {
background: #f1f1f1;
}
.product-grid { 
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 0.5em;
gap: 5px;
}
 @media (min-width: 500px) {
.product-grid { 
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 0.5em;
gap: 10px;
}}
 @media (min-width: 800px) {
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0.5em;
gap: 10px;
}}
@media (min-width: 1100px) {
 .product-grid { 
display: grid;
grid-template-columns: repeat(5, 1fr);
padding: 0.5em;
gap: 10px;
}}
.valuo-product {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.3em;
}
.price {
font-size: 18px;
letter-spacing: 1px;
font-family: times;
text-shadow: 0px 0.5px 0.3px #000000;
 }
 .price-old {
text-decoration: line-through;
font-size: 15px;
letter-spacing: 1px;
font-family: times;
text-shadow: 0px 0.5px 0.3px #000000;
 }
.product-title {
font-size: 18px;
font-weight: bold;
font-family: times;
margin: 10px 0;
max-height: 70px;
line-height: 1.8;
letter-spacing: 1px;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
padding: 0.2em 0.2em 0.5em 0.2em;
-webkit-box-orient: vertical;
}
 .star-rating {
display: inline-flex;
 }
.box-box{
max-width: 600px;
width: 90%;
height: 60px;
position: relative;
display: flex;
margin: auto;
align-items: center;
justify-content: center;
}
.search-icon{
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: hsl(217, 71%, 53%);
color: #FFF;
font-size: 24px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
transition: all 0.3s ease;
}
.search-container{
display: flex;
align-items: center;
width: 0;
height: 50px;
border-radius: 25px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
overflow: hidden;
transition: all 0.3s ease;
}
.search-container.active{
width: 100%;
}
.search-input{
flex: 1; 
height: 100%;
width: 100%;
border: none;
outline: none;
padding: 0 20px;
font-size: 20px;
border-radius: 0 25px 25px 0;
letter-spacing: 1px;
font-weight: bold;
}
.search-input::placeholder {
font-size: 20px;
letter-spacing: 1px;
font-weight: bold;
}
.search-btn{
width: 50px;
height: 100px;
background: hsl(217, 71%, 53%);
color: #FFF;
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
border-radius: 25px 0 0 25px;
transition:0.3s ease;
}
.view-product-width-tel {
display: block;
}
.view-product-width-pc {
display: none;
}
@media (min-width: 1200px) {
.view-product-width-tel {
display: none;
}
.view-product-width-pc {
display: block;
}}
hr { 
border: 0; 
height: 1px; 
background-color: rgb(0, 0, 0);
margin: 20px 0;
}