:root{
    --font-Color-titles:rgb(255, 10, 10);
    --back-color-mainlables:rgb(226, 125, 85);

}

*{
    /* font-family: avenirnextregular, Arial, sans-serif !important; */
    /* font-family: 'Syne', sans-serif; */
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


.main-image-container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.spoffer{
    /* width: 20vw; */
    /* height: 30vh; */
    /* width: 300px; */
    width:80%;
    /* position: absolute;
    top: 60%;
    left: 78%;
    transform: translate(-50%, -50%); */
    display: flex;
    flex-direction: column;
   margin-top: 10px;
    justify-content: center;
    align-items: center;
    background-color: rgba(4, 1, 12, 0.671);
    box-shadow: rgba(0, 0, 0, 0.521) 0px 0px 20px, rgba(0, 0, 0, 0.63) 0px 0px 0px;
}

.offerimage{
   position: relative;
}

.offertitle{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* z-index: 20; */
    background-color: #021f2b96;
    text-align: center;
    color: white;
    padding: 10px;
}
.offerimage img{
    width: 100%;
    /* display: block;
    margin: 0 auto; */
}

.offermsg{
    /* background-color: rgba(4, 1, 12, 0.671); */
    color: white;
    text-align: justify;
    padding: 7px;
    width: 100%;

}

.image-box{
    position: relative;
    width: 100%;
    overflow: hidden;
    /* background-color: #e69e1b; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    /* border-radius: 10px; */
}

.main-image-js img{
  width: 100%;
    align-content: center;
     /* Make the image responsive */
   
}
.main-image-js {
   display: flex;
   justify-content: center;
    position: relative;
    animation: fadeIn 17s ease-in-out  both;/* Adjust duration and easing as needed */
    overflow: hidden;
    transition:transform 2.5s ease-out ;

}

.main-image-js:hover {
    transform: scale(1.12)  translateX(30px);
  
}
@keyframes fadeIn {
    0% {
         opacity:0.1;
     }
 
 
 10%{
     opacity:1;
 }
 
 90%{
     opacity:1;
 }
 100%{
     opacity:1;
 }
 }
/* .main-image-1{
    width: 100%;
    height: 100%;
   
} */






  

  .product-Care{
    width: 100%;
    position: relative;
    display: flex;
    /* width: 100%; */
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
    margin: 20px 10px;
    flex-wrap: wrap;
   
    
  }

  .product-Care-image{
   
    position: relative;
    width: 300px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    /* width: 250px; 
    height: 250px; */
   
  }
  .product-Care-image img{
    width: 100%;
   
    border-top: 10px solid black;
    border-bottom: 10px solid black;
  }

  .overlay-text{
    position: absolute;
   /* Adjust the positioning as needed */
    left: 50%; 
    right: 50%;
    transform: translate(-50%, -50%);
    /* font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
    font-weight: bolder;
    font-size: 25px;
    text-align: center;
    color: #ffffff;
    width: 100%;
    text-decoration-line: overline;
  
  }
.map{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* background-color: #e69e1b; */
    justify-content: space-around;
    margin-bottom: 10px;
    margin-top: 10px;
}

.Mapfactory{
    display: flex;
    width: 300px;
}

.welcome-text {
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: .75rem;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.877);
    width: 50%;
    white-space: wrap;
    overflow: hidden;
    text-align: center;
   /* border-right: 0.15em solid white;  Cursor effect */
    animation: blink-cursor 0.7s steps(1) infinite normal;
    
    font-family: Arial, Helvetica, sans-serif;
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: bold;
    font-style: normal;
     background-color: rgba(0, 0, 0, 0.425);
    
}


/* Cursor blinking animation */
@keyframes blink-cursor {
    from {
        border-right-color: white;
    }
    to {
        border-right-color: transparent;
    }
}

@media screen and (min-width: 1200px) {
    .spoffer{
        /* width: 20vw; */
        /* height: 30vh; */
        /* width: 300px; */
        width:250px;
        position: absolute;
        top: 400px;
        left: 78%;
        transform: translate(-50%, -50%);
        flex-direction: column;
       
    }
    .welcome-text {
  
        top: 80%;
        left: 30%;
        transform: translate(-50%, -50%);
        font-size: 1.75rem;
        }
  }

  @media screen and (min-width: 963px) and (max-width:1200px) {
    .spoffer{
        width:350px;
        position: absolute;
        top: 300px;
        left: 50%;
        transform: translate(-50%, -50%);
        flex-direction: row;
       
    }

    .welcome-text {
  
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.25rem;
    }
  }

  @media screen and (min-width: 400px) and (max-width:963px) {
    .spoffer{
        /* width:100%; */
        /* position: absolute;
        top: 300px;
        left: 50%;
        transform: translate(-50%, -50%); */
        flex-direction: row;

      
    }

    .welcome-text {
  
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    }

    
  }