@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

/***********************************GENERALES*/
body {
    font-family: 'DM-Serif-Text', serif;
    font-family: 'DM-Sans', sans-serif;
}

main {
    width: 100%;
    max-width: 90%;
    margin: auto;
}

h1{
    font-family: 'DM-Sans', sans-serif;
    font-style: normal;
    font-weight: 500px;
}

h2 {
    font-family: 'DM-Sans', sans-serif;
    font-style: normal;
    font-weight: 300px;
}

h3 {
    font-family: 'DM-Sans', sans-serif;
    font-style:normal;
    font-weight: 200px;
}

p {
    font-family: 'DM-serif', serif;
    font-style: normal;
    font-weight: 25px;
}


/*************************************NAVBAR*/

.container_nav {
    background-color: #ec4e20;
}

.collapse ul {
    background-color: #ec4e20;
}

.navbar {
    width: 100%;
    max-width: 80%;
    margin: auto; 
}

.navbar img {
    width: auto;
    height: 70px;
}

.navbar .navbar-brand {
    width: 40px;
    height: auto;
}

.nav-item .nav-link {
    color: #fff;
}

.B-top-item {
    width: 100%;
    height: 40px;
    background-color: #1c3a13;
    list-style: none;
}

.B-top-item img{
    width: 15px;
    height: auto;
}

.B-top-item .nav-link{
    color: #f4d8cd;
    font-size: small;
}

.B-top-item a {
    color: #f4d8cd;
}

/******************************** HERO SECTION ************************/

.card-hero {
    height: 600px;
    display: flex;
}

.card-hero img {
    object-fit: cover;
}

.card-img-overlay h1{
    position: absolute;
    text-align: start;
    padding: 0 200px;
    top: 450px;
    text-shadow: 3px 3px 5px #000000;
}

.card-img-overlay p {
    position: absolute;
    text-align: start;
    padding: 0 200px;
    top: 500px;
    text-shadow: 2px 2px 4px #000000;
    font-size: 20px;
}

/******************************************* HEADER ******************************/

.container-fluid img {
    object-fit: cover;
    width: 700px;
    height: 600px;
    border-radius: 10px;
}

/************************************************ SECTION CARD RUBRO *******************************/

#card-rubro ul {
    list-style: none;
}


/************************************************ CARD SECTION PRODUCTO *************/

.card img {
    width: auto;
    height: 200px;
    object-fit: cover;
}

.card-body {
    width: 100%;
    height: auto;
}

.card .btn {
    border-color: #1C3A13;
    color: #1C3A13;
    position: relative;
}

.card .btn:hover {
    background-color: #ec4e20;
    border: none;
}


/*******************************************WHATSAP*/

a{
    text-decoration: none;
  }
  #whatsapp {
      position: fixed;
      bottom: 20px;
      right:20px;
  }
  svg {
      width: 80px;
      display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
  }
  circle {
    fill: #25d366;
  }
  path {
      fill:  #fff;
  }
  #whatsapp a {padding: 20px 0;}
  #whatsapp a::before {
      content: 'Te asesoramos';
      display: inline-block;
      vertical-align: middle;
      padding: 5px 10px;
      margin-right: 10px;
      color: rgba(0, 0, 0, .8);
      background: white;
      border: 1px solid #ccc;
      border-radius: 20px;
      filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
      transition: .3s ease;
      opacity: 0;
  }
  #whatsapp:hover a::before {opacity: 1;}


/*******************************************FOOTER*/

footer {
    background-color: #1C3A13;
    width: 100%;
    height: auto;
}

footer img {
    width: 180px;
    height: auto;
}

.copywrite {
    text-align: center;
}


.info-section img {
    width: 20px;
    height: auto;
}

.info-section ul {
    list-style: none;
}

.info-section {
    font-style: normal;
    color: white;
}

.link_footer {
    color: white;
    list-style: none;
}

.btn .dropdown-toggle {
    color: white;
}


@media screen and (max-width: 600px){
    footer .grupo-1{
        width: 80%;
        height: auto;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 30px;
        padding: 35px 0;
    } 
}
    

@media (min-width: 425px) and (max-width: 1024px){


    /*********************************************************/
    /**********************TABLET*****************************/

    main {
        width: 100%;
        max-width: 90%;
        margin: auto;
    }

    /*********************HERO SECTION************************/

    #carouselExampleCaptions {
        display: flex;
        height: 300px;
    }
 
    .carousel-item img {
        object-fit: cover;
    }

    .carousel-caption {
        position: absolute;
        text-align: center;
        padding: 0 150px;
        top: 170px;
        text-shadow: 3px 3px 5px #000000;
    }

    .carousel-caption h1 {
        font-size: 30px;
    }

    .carousel-caption h2 {
        font-size: 20px;
    }


    /**********************FOOTER*****************************/

    footer {
        max-width: 100%;
    }
    
    footer img {
        margin-left: 55px;
    }



@media (min-width: 320px) and (max-width: 425px){


    /*********************************************************/
    /**********************MOVIL*****************************/

    main {
        width: 100%;
        max-width: 90%;
        margin: auto;
    }

    h5 {
        font-size: x-large;
    }


    /*********************HERO SECTION************************/

    .navbar {
        width: 100%;
        max-height: 60px;
        max-width: 80%;
        margin: auto; 
    }

    .navbar img {
        width: auto;
        height: 20px;
    }

    #navbarSupportedContent {
        background-color: #ec4e20;
        width: 100%;
    }

    #carouselExampleCaptions {
        display: flex;
        width: auto;
    }
 
    .carousel-item img {
        object-fit: cover;
    }

    .carousel-caption {
        position: absolute;
        text-align: center;
        padding: 0 40px;
        top: 100px;
        text-shadow: 3px 3px 5px #000000;
    }

    .carousel-caption h1 {
        font-size: 20px;
    }

    .carousel-caption h2 {
        font-size: 18px;
    }

    /******************************************* HEADER ******************************/

    .container-fluid img {
        object-fit: cover;
        width: 700px;
        height: 300px;
        border-radius: 10px;
    }

    /**************************** CARD HERO *********************************/

    .card-hero {
        height: 300px;
        display: flex;
    }

    /**************************** CARDS PRODUCTS ****************************/
    
    .cards {
        width: 100%;
        height: auto;
    }

    .card-body {
        font-size: 15px;
    }

}
}