@charset "utf-8";
/* CSS Document */


html{scroll-behavior: smooth;}
	

body {
    height:100%;
    margin:0;
    font-family: 'Poppins';
    background: white ! important;
}

	

main{
    margin-top: 0px;
	background: white ! important;
}

.containerS {
  position: relative ! important;
  bottom: -30% ! important;
  overflow: hidden ! important;
  height:420px ! important;
  z-index:4 ! important;
}


.add-to-btn {
 width: 60% ! important;
 top:-160% ! important;
}

.slider {
  background: white;
  position: absolute;
  bottom: 0; /* Aligns the div to the bottom of its container */
  width: 100%;
  max-height: 719px; /* Must be large enough to contain all content */
  transition: max-height 0.7s ease-out; /* Smooth transition */
}

.slider.closed {
  max-height: 0; /* The hidden state, the div effectively disappears upwards */
}

/*.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/logo.png");
  width:100%;
  height: 100vh ! important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}
*/

.fa-angle-down{
  font-size:8vw ! important;
  margin-top:0px ! important;
  margin-left:10px ! important;
}
    
.wrapDiv{
    height:auto ! important;
    align-items: center;
    justify-content:center;
    margin-top:0px ! important;
}
}

.imgDiv{
  margin-top: 0px !important;
}

#logo{
  width: 25% !important;
  position:absolute ! important;
  top: 20% ! important;
  left:38% ! important;
  margin:auto ! important;
}


#modaDiv{
  position:absolute ! important;
  top: 40% ! important;
  left:40% ! important;
  z-index:5 ! important;
}


h1{
    font-size:8vw ! important;
    margin-left:10px;
}
	
p{
   font-size:4vw ! important;
   
}

.footerDiv{
  position:absolute ! important;
  top: 90% ! important;
  left:0% ! important;
  z-index: 6! important;
}


.d-flex, .loginModa{
  position: absolute !important;
  justify-content: center !important;
  align-items: center !important;
  margin: auto !important;
}

.d-flex a{
    color:white;
    font-size:3vw;
    text-decoration:none;
}




.imgDiv h2{
	color: white;
}


#logo{
	width: 20%;
}

	
.add-to-btn {
	background-color: rgba(223, 112, 108, 0.884);
	color: white; 
	font-weight:bold ! important;
	border: none; 
	border-radius:22px;
	margin-left:10px;
	outline:none; 
	font-weight: bold; 
	width: 50% ! important; 
	height: 50px ! important; 
	position: absolute ! important;
	top: 60% ! important;
	z-index: 6 ! important;
} 

.add-to-btn:hover{
	background: green ! important;
	color: white; 
	font-weight:bold ! important;
} 


h1{
  font-size: 20px; 
  padding-top: 0px !important;
  font-weight:bold;
}


a{
 text-decoration: none ! important;
}

#chat{
    margin-top:-35px ! important;
}

#autor{
    font-size:2.8vw ! important;
}


/*For Desktop View*/

@media screen and (min-device-width: 1025px){


.fa-angle-down{
  font-size:2vw ! important;
}
    
.wrapDiv{
    margin-top:0px ! important;
}

.imgDiv{
  margin-top: 0px !important;
}

#logo{
  width: 8% !important;
  position:absolute ! important;
  top: 20% ! important;
  left:46% ! important;
  margin:auto ! important;
}

#modaDiv{
  position:absolute ! important;
  top: 40% ! important;
  left:48% ! important;
  z-index:5 ! important;
}

.containerS {
  position: relative ! important;
  bottom: -30% ! important;
  overflow: hidden ! important;
  height:460px ! important;
  z-index:4 ! important;
}


.add-to-btn {
 width: 15% ! important;
 top:-160% ! important;
}

h1{
    font-size:2.5vw ! important;
    margin-left:10px;
    text-align:center;
}

p{
  font-size:1.1vw ! important;
}


.footerDiv{
  position:absolute ! important;
  top: 90% ! important;
  left:0% ! important;
  z-index: 6! important;
 
}

#autor{
    font-size:0.9vw ! important;
}


}



/* For Tablet Landscape View */
@media only screen and (min-device-width: 641px)
and (max-device-width: 1024px) {


.add-to-btn {
 width: 60% ! important; 
	
}
	
    
.containerS {
  height:460px ! important;
  bottom: -30% ! important;
}


.fa-angle-down{
  font-size:2.4vw ! important;
}
    
.wrapDiv{
    margin-top:0px ! important;
}

.imgDiv{
  margin-top: 0px !important;
}

#logo{
  width: 9% !important;
  position:absolute ! important;
  top: 20% ! important;
  left:45% ! important;
}

#modaDiv{
  position:absolute ! important;
  top: 35% ! important;
  left:45% ! important;
}

h1{
    font-size:2.5vw ! important;
    margin-left:10px;
    text-align:center;
}

p{
  font-size:1.1vw ! important;
}


.footerDiv{
  top: 90% ! important;
 
}

#autor{
    font-size:0.9vw ! important;
}

}



/* For Tablet Portrait View */
@media only screen and (min-device-width: 421px)
and (max-device-width: 640px) {
	

.add-to-btn {
 width: 60% ! important; 

}

   
.containerS {
   height:370px ! important;
   bottom: -30% ! important;
}


.fa-angle-down{
  font-size:2.8vw ! important;
}
    
.wrapDiv{
    margin-top:0px ! important;
}

.imgDiv{
  margin-top: 0px !important;
}

#logo{
  width: 10% !important;
  position:absolute ! important;
  top: 20% ! important;
  left:46% ! important;
}

#modaDiv{
  position:absolute ! important;
  top: 35% ! important;
  left:45% ! important;
}

h1{
    font-size:2.5vw ! important;
    margin-left:10px;
    text-align:center;
}

p{
  font-size:1.8vw ! important;
}


.footerDiv{
  top: 90% ! important;
 
}

#autor{
    font-size:1.6vw ! important;
}

	
}



@media screen and (max-width:420px){
    

.fa-angle-down{
  font-size:8vw ! important;
  margin-top:0px ! important;
  margin-left:10px ! important;
}
    
.wrapDiv{
    margin-top:0px ! important;
}

.imgDiv{
  margin-top: 0px !important;
}

#logo{
  width: 25% !important;
  position:absolute ! important;
  top: 19% ! important;
  left:38% ! important;
  margin:auto ! important;
}

#modaDiv{
  position:absolute ! important;
  top: 38% ! important;
  left:40% ! important;
  z-index:5 ! important;
}

.containerS {
  position: relative ! important;
  bottom: -39% ! important;
  overflow: hidden ! important;
  height:424px ! important;
  z-index:4 ! important;
}


.add-to-btn {
 width: 60% ! important;
 top:-160% ! important;
}



.footerDiv{
  position:absolute ! important;
  top: 86% ! important;
  left:0% ! important;
  z-index: 6! important;
}



h1{
    font-size:5vw ! important;
    margin-left:10px;
}
	
p{
   font-size:4vw ! important;
   
}

#chat{
    margin-top:-62px ! important;
}

.fa-whatsapp{
   font-size:12vw ! important;
}

#autor{
    font-size:2.8vw ! important;
}

}