@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Upright:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap');
/*https://www.hostinger.in/tutorials/website-color-schemes*/

/*https://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height-b/25218797#25218797*/
/*body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  display: block;
  flex: 1 0 auto;
}*/
html,body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
body{
  position:relative;
}

/* https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.container-xxl, .container {
  flex: 1;
}


#my_foot {
  bottom:0; 
  left: 0; 
  width: 100%;
}

body {
    /*padding: 0;
    margin: 0;*/
    background: #FEF9E7;
    /* #f2f6e9 */
    font-family: 'Lato', sans-serif;
    font-family: 'Gilda Display', serif;
    font-family: 'Cormorant Upright', serif;
    font-family: 'Crimson Text', serif;
}

.bld {
  font-weight: bold !important;
}

.form-check-label {
  font-weight: normal !important;
}

.bg-dark{
  background-color: #002349 !important;
}
.card {
    /*background-color: rgba(0, 0, 0, 0.6);*/
    background-color: black;

}
.card-text, .card-title {
  color: white !important;
  text-align: justify !important;
}



.navbar-brand {
  font-size: 1.9rem;
  font-variant: small-caps;
  /*font-family: 'Garamond';
  font-style: normal;*/
  font-family: 'Crimson Text', serif;
  color: #F4C654 !important; 
  letter-spacing: 0.2em;
}
.nav-link {
    color: #bd9c4a !important;
    cursor: pointer;
    font-size: 1.2rem;
    margin-right: 1em !important;
}
.lead {
  font-size: 1.4rem !important;
}

.nav-link:hover {
    color: #F4C654 !important;
}

.navbar-nav > .active > a {
  color: #F4C654 !important;
}

.header {
    background-size: cover;
    background-position: center;
    /*position: relative;*/
    padding-bottom: 5em;
    /*min-height: 100dvh;*/
    height: 100%;
    width: 100%;
}

.overlay {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
}

.description {
	left: 45%;
	position: absolute;
	top: 30%;
	transform: translate(-50%, -55%);
	text-align: left;
}

.description h1 {
	color: #6ab446;
}
.description {
	float: left;
}
.description p {
	color: #fff;
	font-size: 1.3rem;
	text-align: justify;
	line-height: 1.5;
}

.description button {
    border:1px solid #6ab446;
    background:#6ab446;
    border-radius: 0;
    color:#fff;
}
.description button:hover {
	border:1px solid #fff;
    background:#fff;
    color:#000;
}

.f_page h3 {
	color: #6ab446;
}

.f_page p {
	color: #fff;
	font-size: 1.2rem;
	text-align: justify;
	line-height: 1.5;
}

.f_page {
	/*display: block;*/
}

.f_page button {
    border:1px solid #6ab446;
    background:#6ab446;
    border-radius: 0;
    color:#fff;
}
.f_page button:hover {
	border:1px solid #fff;
    background:#fff;
    color:#000;
}

.page-footer {
    /*background-color: #222;*/
    background-color: #002349;
    color: #ccc;
    padding: 25px 0 10px;
    text-align: left; 
}
.footer-copyright {
    color: #666;
    /*padding: 40px 0;*/
}

.border-between > [class*='col-']:before {
   background: #e3e3e3;
   bottom: 0;
   content: " ";
   left: 0;
   position: absolute;
   width: 1px;
   top: 0;
}

.border-between > [class*='col-']:first-child:before {
   display: none;
}

datalist {
  display: flex;
  justify-content: space-between;
  color: black;
  width: 75%;
}

.inp {
  width: 75%;
}

.card-img-top {
    width: 35%;
    /*height: 10vw;*/
    object-fit: contain;
    margin: auto;
    display: block;
    padding-top: 2em;
    padding-bottom: 0.4em;
}
.imgdiv {
  background-color: black;
}
.card-title {
  text-align: center !important;
  color: #F4C654 !important;
}

#onhover {
  display: none;
}
#surround:hover span[id="static"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}