:root {
   --color-durazno:#FFAC81;
   ---font-principal:'Montserrat';
   --color-font:#202F22;
  }
h1{
    font-family: var(---font-principal);
    font-weight: bold;

}
p{
    font-family: var(---font-principal);
}
.home {
    height: 100%;
    width: 100%;
 background-position: inherit;
    background-color:var(--color-durazno);
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
  

}
.img1-slide{
    background-image: url(./Componente\ 70\ –\ 1.png);
    height: 100vh;
    width: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
background-position: center;
}
.img2-slide{
    background-image: url(./Componente\ 69\ –\ 1.png);
    height: 100vh;
    width: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
background-position: center;
}
.img3-slide{
    background-image: url(./Componente\ 70\ –\ 1.png);
    height: 100vh;
    width: 100%;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
background-position: center;
}
.text-main-h1{
    font-family: var(---font-principal);
    color: #fff;
    padding-top: 80px;
    font-weight: bold;
    font-size: 45px;
    padding-bottom: 50px;
    text-shadow: rgba(0, 0, 0, 0.233) 0.1em 0.1em 0.1em
}
.button-1{
    color: #fff;
    background-color: var(--color-durazno);
    font-size: 18px;
    font-family: var(---font-principal);
    border-radius: 20px;

}
.button-1:hover{
    background-color: #fff;
    border: solid 2px var(--color-durazno);
    
    color: var(--color-durazno);
}
.carousel-indicators [data-bs-target]{
    width: 20px;
    height: 20px;
    background-color: #000000;
    border-radius: 50px;
    border: 0;
}

/* SECCION 2*/
.section-slogan{
 padding-top: 50px;
 padding-bottom: 50px;
}
.slogan{
    color: var(--color-durazno);
    font-size: 25px;
    font-family: var(---font-principal);
}
.slogan-autor{
    color: var(--color-durazno);
    font-size: 18px;
    font-family: var(---font-principal);
}
/**SECION 4*/
.special{
    padding: 0;
    margin: 0;
    background-color: #F2E9E4;
}
.col-special {
    padding: 0;
}

.p-note{
    color: var(--color-font);
    font-family: var(---font-principal);
    font-weight: normal;
    font-size: 16px;
}
.b-readmore{
    color: var(--color-durazno);
    font-size: 15px;
    font-family: var(---font-principal);
}
.container-notes{
padding: 80px;
height: 100px;
}

/*section store*/
.title-store{
    font-family: var(---font-principal);
    font-family: var(---font-principal);
    font-weight: bold;
    font-size: 40px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.store{

    padding-bottom: 30px;

}
.boton-store{
    color: var(--color-durazno);
    background-color:#fff;
    font-weight: bold;
    margin: 10px;
    font-size: 12px;
    border: solid 2px var(--color-durazno);
    font-family: var(---font-principal);
    border-radius: 20px;
}
.boton-store:hover{
    color:#fff;
    background-color:var(--color-durazno);
  
}

.card-store {
    background-color: #F2E9E4;
    border: none;
}
.shopping-cart-button {
    background-color: #FFAC81;
    color: #fff;
    font-family: var(---font-principal);
    margin: 10px;
    border-radius: 40px;
    padding: 8px;
    padding-left: 30px;
    padding-right: 30px;
}
.shopping-cart-button:hover {
    background-color: #ffffff;
    color: #FFAC81;
    font-family: var(---font-principal);
    margin: 10px;
    border: 2px solid #FFAC81;
    border-radius: 40px;
    padding: 8px;
    padding-left: 30px;
    padding-right: 30px;
}
.new {
    color: #FFAC81;
    font-size: 12px;
    font-family: var(---font-principal);
}
.text-1 {
    color: #181C28;
    font-weight: bold;
    font-size: 17PX;
    font-family: var(---font-principal);
}
.contend-store-text {
    padding: 0px;
    margin: auto;
}

/* Styles button favorite */
.btn-fav-heart{
    float: right;
    background-image: url(./Img/Corazon.png);
    width: 28px;
    height: 24px;
 background-size: cover;
}

.btn-fav-heart:active {
    background-image: url(./Img/Corazon-active.png);
}
.card-header{
    border: none;
    background-color: #ffffff00;
}



.text-suscriptor{
    border: 2px solid #FFAC81;
    color: #FFAC81!important;
 
    border-radius: 20px;
}
.suscription-btn{
    background: #FFAC81;
    border: 2px solid #FFAC81;
    border-radius: 20px;
    max-width: 100px;
    color: #ffffff;
}



.blog-1{
    padding-top: 50px;
    padding-bottom: 60px;
}
.blog-2{
    padding-top: 50px;
    padding-bottom: 60px;
}

.Suscription{
    padding-top: 50px;
    padding-bottom: 60px;
    background-color: #FEFCF9;
}
/*GENERAL STYLES*/
.text-2 {
    color: #181C28;
    font-size: 17px;
    font-weight: 100;
    font-family: var(---font-principal);
}


.title{

    color: var(--color-font);
    font-family: var(---font-principal);
    font-weight: bold;
}



/*STAR-FOOTER*/
.text-footer-title{
    font-size: 18px;
    font-weight:600;
    font-family: var(---font-principal);
    color: var(--color-font)!important;
}
.text-reset{
    font-size: 16px;
    font-family: var(---font-principal);
    color: var(--color-font)!important;
    text-decoration: solid;
}
.ico-social{
    text-decoration: solid;
    font-size: 30px;
    color: #202F22;
}



/* start medias Web*/
@media screen and (max-width: 2561px) {  
}

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

@media screen and (max-width: 1024px) {
   
}
/* Tablets*/
@media screen and (max-width: 850px) {

}
/*Movil-Horizontal*/
@media screen and (max-width: 841px) and (orientation: landscape) {
}
/*Movil-Horizontal*/
@media screen and (max-width: 820px) and (orientation: landscape) { /*iphone 11*/
}



 /**tablet**/
@media screen and (max-width: 769px) {
  
}
/*Movil-Horizontal*/
@media screen and (max-width: 670px) and (orientation: landscape) {
}
/* Movil horizontal */
@media (max-width: 570px) and (orientation: landscape) {
}

/* Movil-celular */
@media screen and (max-width: 590px){
    .text-principal{
        font-size: 25px;
    }
    .container-notes{
padding: 25px;
height: 100%;
    }

}
@media screen and (max-width: 376px) {
}
@media screen and (max-width:320px) {

}