:root {

  --primary: #2F3E46;

  --accent: #C9A86A;

  --background: #F4F3EF;

  --surface: #FFFFFF;

  --text: #1E1B14;

  --secondary: #8E7C54;

  --border: #E2E0D8;

}



html {

  scroll-behavior: smooth;

}

#pop{
  display: none;
}

body {

  font-family: 'Inter', sans-serif;

  background: var(--background);

  color: var(--text);

}



h1, h2, h3, h5 {

  font-weight: 600;

}



/* ===== HEADER ===== */

header {

  background-image: linear-gradient(

    rgba(244,243,239,0.85),

    rgba(244,243,239,0.85)

  ), url('../img/tlo4.jfif');

  background-size: cover;

  background-position: center;

  height: 25vh;

}



.logo {

  width: 80%;

  height: auto;

}



.top {

  padding: 1vh 0;

  border-bottom: 3px solid var(--accent);

}



/* ===== NAV ===== */

.navbar {

  font-size: 1.25rem;

  color: var(--text);

  transition: 0.3s ease;

}



.navbar .nav .nav-link {

  color: var(--text);

  transition: 0.3s ease;

}





.top-menu > li > a {

  font-size: 1.5rem !important;

}



/* ===== DROPDOWN ===== */

.dropdown-menu {

  background-color: #ecececee !important;

  border: 3px solid var(--secondary) !important;

  border-radius: 0 7% 7% 7%;

  min-width: 290px;

  transform: translateX(-50px);

  padding-top: 0 !important;

  padding-bottom: 0 !important;

}



.dropdown-menu a {

  display: block;

  height: 50px;

  color: var(--text);

  padding: 10px ;

  font-size: 1.1rem;

  text-align: center;

  white-space: nowrap;

}



.dropdown-menu a:hover {

  color: var(--accent);

  background-color: #1E1B14aa;

}



.nav-item.dropdown:hover .dropdown-menu {

  display: block;

}



/* ===== BUTTON ===== */

.btn_pbp {

  display: inline-block;

  margin-top: 40px;

  font-size: 1.4rem;

  color: var(--text);

  background: var(--background);

  border: solid 2px var(--accent);

  border-radius: 12px;

  padding: 12px 24px;

  transition: .3s;

  animation: pulse 3s infinite;

}



.btn_pbp:hover {

    animation: none;

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(0,0,0,.15);

}



@keyframes pulse {

  0% {

    transform: scale(1);

    box-shadow: 0 0 0 0 rgba(201,168,106,.4);

  }

  50% {

    transform: scale(1.03);

    box-shadow: 0 0 0 10px rgba(201,168,106,0);

  }

  100% {

    transform: scale(1);

    box-shadow: 0 0 0 0 rgba(201,168,106,0);

  }

}

/* ===== FOOTER ===== */

footer {

  padding-top: 30px;
  
  padding-bottom: 30px;

  background-color: #3A4A52;

  color: #F4F3EF;

}



footer p,

footer small {

  color: #E6E4DE;

}



footer a {

  color: var(--accent);

  text-decoration: none;

}



footer a:hover {

  color: #fff;

  text-decoration: underline;

}



footer h5 {

  margin-top: 15px;

  color: var(--accent);

}



footer iframe {

  margin-bottom: 45px;

}



footer .row{

  margin-left: 15vw;

}