@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-Text', 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 ************************/

#carouselExampleCaptions {
    display: flex;
    height: auto;
}

.carousel-inner img {
    object-fit: cover;
    height: 650px;
}

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

/******************************************* SECTION INFO ICONS ******************************/

img {
    width: 50px;
    height: auto;
}

/************************************************ SECTION CARDS PRODUCTS *******************************/

.card img {
    object-fit: cover;
}

/***************************************** SECTION BANNER CARDS *******************************/

.card-img {
    background-color:#ec4e20;
    width: 100%;
    height: 300px;
}

.btn {
    color: #ec4e20;
}


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

.card-img-top {
    width: 100%;
    height: 300px;
}

.d-inline-flex .btn {
    background-color: #1C3A13;
    border: none;
}

.d-inline-flex .btn:hover {
    background-color: #ec4e20;
    border: none;
}

/******************************************FORM*/

input .placeholder {
    color: rgb(223, 221, 221);
}

.warnings {
    width: 200px;
    text-align: center;
    margin: auto;
    color: red;
    padding-top: 20px;
}

/*+++++++++++++++++++++++++++++++++++++++++CAROUSEL*/
/*  
.carousel img {
    width: 200px;
    height: auto;
    align-items: center;
}
*/
/*******************************************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 50px;
        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;
    }


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

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


    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: 40px;
    }

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

    #carouselExampleCaptions {
        display: flex;
        width: auto;
    }

    .carousel-inner img {
        object-fit: cover;
        height: 250px;
    }
}
}

/************************************** SECTION BANNER CARDS ******************************************/

.card-body h5 {
    font-size: 25px;
}