@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

@font-face {
  font-family: "Laurentian";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/LaurentianStd-Bold.otf") format("opentype");
}

@font-face {
  font-family: "Seravek";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/Seravek-Bold.otf") format("opentype");
}

@font-face {
  font-family: "Seravek";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/Seravek-BoldItalic.otf") format("opentype");
}

@font-face {
  font-family: "Seravek";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/Seravek-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Seravek";
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/Seravek-RegularItalic.otf") format("opentype");
}

body {
  font-family: "Seravek", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #211e1e;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Laurentian", serif;
  font-weight: 700;
  font-style: normal;
  color: #211e1e;
}

.nav-link {
  color: #211e1e;
}

.nav-link:hover {
  color: #E8800C;
}

.navbar-toggler {
  color: #211e1e;
  border: none;
  box-shadow: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

#hero {
  background:linear-gradient(180deg, rgba(2, 17, 16, 0.2), rgba(2, 17, 16, .9)), url('../img/hero-bg.jpg');
  background-size: cover;
  background-position: 20% top;
}

.btn-1 {
  background-color: #E8800C; 
  border-color: #E8800C; 
  color: #FFFFFF;
}

.btn-1:hover,
.btn-1:active {
  background-color: #cf7106 !important;
  border-color: #cf7106 !important; 
  color: #FFFFFF !important;
}

.btn-2 {
  background-color: #ffffff;  
  border-color: #ffffff; 
  color: #E8800C;
}

.btn-2:hover,
.btn-2:active {
  background-color: #dbdbdb !important;
  border-color: #dbdbdb !important; 
  color: #E8800C !important;
}

.btn-3 {
  background-color: #0424D9;  
  border-color: #0424D9; 
  color: #FFFFFF;
}

.btn-3:hover,
.btn-3:active {
  background-color: #021cb0 !important;
  border-color: #021cb0 !important; 
  color: #FFFFFF !important;
}

.btn-4 {
  background-color: #035B4E;  
  border-color: #035B4E; 
  color: #FFFFFF;
}

.btn-4:hover,
.btn-4:active {
  background-color: #013d34 !important;
  border-color: #013d34 !important; 
  color: #FFFFFF !important;
}

.btn-4-alt {
  background-color: transparent;  
  border-color: #035B4E; 
  color: #035B4E;
}

.btn-4-alt:hover,
.btn-4-alt:active {
  background-color: transparent !important;
  border-color: #013d34 !important; 
  color: #013d34 !important;
}

.btn-5 {
  background-color: #FF0000;  
  border-color: #FF0000; 
  color: #FFFFFF;
}

.btn-5:hover,
.btn-5:active {
  background-color: #d10303 !important;
  border-color: #d10303 !important; 
  color: #FFFFFF !important;
}

.py-section {
  padding-top: 70px;
  padding-bottom: 70px;
}

.pt-section {
  padding-top: 70px;
}

.pb-section {
  padding-bottom: 70px;
}

.card {
  border-radius: 0;
  padding: 5%;
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgba(2, 17, 16, 0.37 );
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.card h2,
.card p {
  color: #FFFFFF;
}

.card h2 span {
  color: #E8800C;
}

.card form .form-label {
  color: #FFFFFF;
}

.card form .form-control {
  background-color: transparent;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid #E8800C;
  border-radius: 0;
  color: #FFFFFF;
}

#highlights {
  background-color: #E8800C ;
  color: #FFFFFF;
}

#highlights h3 {
  color: #FFFFFF;
}

#highlights i {
  font-size: 3em;
}

.rounded-img {
  max-width: 300px;
  border-radius: 25px;
}

.rounded-vid {
  max-width: 300px;
  border-radius: 25px;
  cursor: pointer;
}

#informacion h2 span {
  color: #0424D9;
}

#perfil h2 span {
  color: #035B4E;
}

#contacto h2 span {
  color: #FF0000;
}

#contacto form .form-label {
  color: #211e1e;
}

#contacto form .form-control {
  background-color: transparent;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid #FF0000;
  border-radius: 0;
  color: #211e1e;
}

#thank-you .row {
  height: 80vh;
}

#thank-you .fa-message {
  color: #E8800C;
  font-size: 3em;
}

#footer {
  background-color: #035B4E;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}

#floating {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 1001;
}

#floating a,
#footer a {
  text-decoration: none;
}

.fa-whatsapp {
  font-size: 1.3em;
}

#floating .whatsapp {
  color: #035B4E;
  transition: .3s ease;
}

#floating a:hover .whatsapp {
  color: #013d34;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  #hero {
    background:linear-gradient(90deg, rgba(2, 17, 16, 0.2), rgba(2, 17, 16, .9)), url('../img/hero-bg.jpg');
    background-position: 20% top;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  
}