html{
    font-family: 'Roboto', sans-serif !important;
}
.footer-map{
    background: url('img/map.png') no-repeat;
    background-size: cover;
    
    min-height: 80vh;
    

}

.navbar-custome{
    background-color: rgb(184, 145, 109);
    font-family: 'Roboto', sans-serif !important;
}

.nav-link{
    color: rgb(255, 255, 255);
    transition: .5s;
    font-family: 'Roboto', sans-serif !important;
}

.fa-bars{
    color: rgb(255, 255, 255);
}


.nav-link:hover{
    color: rgb(112, 47, 10);
}






.navbar-toggler{
    color: black;
  }
.text-box{
border: 1px solid;

border-color: rgb(5, 84, 202);

}
.text-inside{
    padding:1rem;
}

.display-3
{
    color: rgb(184, 145, 109);
}
.square{
    list-style-type: square;
    
}
.referer{
    max-width: 20rem;
    border: 1px solid rgb(5, 84, 202);
}
.carousel{
    max-height: 50vh;
    overflow: hidden;
}

.carousel-control-prev{
    color: black;
}
.cer{
    max-width: 300px;

}

.zoom:hover {
    transition: .3s;
    transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  }

  @media only screen and (max-width: 1199px) {
    .zoom:hover{
        transform: scale(1);
    }
  }

footer{
    background-color: rgb(184, 145, 109);
    color: white;
}

.copyright{
    background-color: rgb(184, 145, 109);
}


.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image:url("img/slider1.jpg");
  
    /* Set a specific height */
    height: 70%;
  
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  /* Place text in the middle of the image */
  .hero-text {
    text-align: start;
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-20%, -20%);
    color: black;
   
  }

  @media only screen and (max-width: 600px) {
    .hero-text{
        top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }
  }

  .hero-box{
      width: 25rem;
      background-color: white;
      
  }
  @media only screen and (max-width: 600px) {
    .hero-box{
        width: 15rem;
    
    }
  }

 

  body, html {
    height: 100%;
}


* {
    box-sizing: border-box;
  }
  
  body {
    
    padding: 20px;
   
  }
  
  /* Center website */
  .main {
    max-width: 1000px;
    margin: auto;
  }
  
  h1 {
    font-size: 50px;
    word-break: break-all;
  }
  
  .row-custome {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column-custome {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  .column-custome .img-custome {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column-custome {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column-custome {
      flex: 100%;
      max-width: 100%;
    }
  }

  .nav-link-custome{
margin: 1rem;
 text-align:center;
color:black !important;
    padding:0.5rem;
    text-decoration: none;
border:1px solid rgb(184, 145, 109) !important;

  }

  .nav-link-custome:hover{
color:white !important;
    transition: .3s;
    background-color: rgb(184, 145, 109) !important;
    padding:0.5rem;
    text-decoration: none;

  }