/********** TES CSS - Black, Ivory & Gold Relief **********/

:root {
--primary: #000000;
--primary-dark: #222222;
--light: #EAE6DE;
--light-soft: #F5F2EC;
--dark: #000000;
--gold: #B88646;
--gold-light: #D6B17A;
--gold-dark: #8B5E2B;
--text-dark: #2B2B2B;
--text-light: #EAE6DE;
}

/*** General ***/
body {
background: #000000;
color: #EAE6DE;
}

a {
color: #000000;
text-decoration: none;
}

a:hover {
color: #8B5E2B;
}

h1, h2, h3, h4, h5, h6 {
color: #000000;
}

/*** Bootstrap Overrides ***/
.text-primary {
color: #B88646 !important;
}

.bg-primary {
background-color: #B88646 !important;
}

.bg-dark {
background-color: #000000 !important;
}

.bg-light,
.bg-white,
.bg-ivory,
.bg-ivory-card {
background-color: #EAE6DE !important;
}

.text-white {
color: #FFFFFF !important;
}

.text-light {
color: #EAE6DE !important;
}

.text-body {
color: #CFC8BC !important;
}

.border-primary {
border-color: #B88646 !important;
}

/*** Font Weight ***/
.fw-medium { font-weight: 500 !important; }
.fw-bold { font-weight: 700 !important; }
.fw-black { font-weight: 900 !important; }

/*** Spinner ***/
#spinner {
opacity: 0;
visibility: hidden;
transition: opacity .5s ease-out, visibility 0s linear .5s;
z-index: 99999;
background: #EAE6DE !important;
}

#spinner.show {
transition: opacity .5s ease-out, visibility 0s linear 0s;
visibility: visible;
opacity: 1;
}

/*** Buttons - Gold Metallic ***/
.btn {
font-weight: 500;
transition: .5s;
}

.btn-primary {
background: linear-gradient(180deg, #D6B17A 0%, #B88646 50%, #8B5E2B 100%) !important;
border: 1px solid #8B5E2B !important;
color: #FFFFFF !important;
box-shadow:
0 4px 10px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.35);
}

.btn-primary:hover {
background: linear-gradient(180deg, #E0C291 0%, #C79A59 50%, #A06B32 100%) !important;
border-color: #8B5E2B !important;
color: #FFFFFF !important;
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0,0,0,.35);
}

.btn-outline-primary {
color: #B88646 !important;
border-color: #B88646 !important;
}

.btn-outline-primary:hover {
background: #B88646 !important;
color: #FFFFFF !important;
}

.btn-outline-light {
color: #EAE6DE !important;
border-color: #EAE6DE !important;
}

.btn-outline-light:hover {
background: #EAE6DE !important;
color: #000000 !important;
}

.btn-link {
color: #D6B17A;
}

.btn-link:hover {
color: #FFFFFF;
}

.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }

.btn-square,
.btn-sm-square,
.btn-lg-square {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-weight: normal;
}

/*** Back To Top ***/
.back-to-top {
position: fixed;
display: none;
right: 45px;
bottom: 45px;
z-index: 99;
background: linear-gradient(180deg, #D6B17A 0%, #B88646 50%, #8B5E2B 100%) !important;
border: 1px solid #8B5E2B !important;
color: #FFFFFF !important;
}

.back-to-top:hover {
background: #8B5E2B !important;
}

/*** Navbar ***/
.navbar {
background: #000000 !important;
box-shadow: 0 2px 20px rgba(0,0,0,.45);
}

.navbar.sticky-top {
top: -100px;
transition: .5s;
}

.navbar .navbar-brand,
.navbar a.btn {
height: 75px;
}

.navbar .navbar-brand {
background: #000000 !important;
}

.navbar .navbar-brand img {
max-height: 65px;
object-fit: contain;
}

.navbar .navbar-nav .nav-link {
margin-right: 30px;
padding: 25px 0;
color: #EAE6DE !important;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
color: #D6B17A !important;
text-shadow: 0 0 10px rgba(214,177,122,.4);
}

.navbar .dropdown-toggle::after {
border: none;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
vertical-align: middle;
margin-left: 8px;
}

.navbar-toggler {
border-color: #D6B17A !important;
}

.navbar-toggler:focus {
box-shadow: 0 0 0 .15rem rgba(214,177,122,.35);
}

@media (max-width: 991.98px) {
.navbar .navbar-nav .nav-link {
margin-right: 0;
padding: 10px 0;
}

```
.navbar .navbar-nav {
    border-top: 1px solid rgba(214,177,122,.25);
}

.navbar .collapse {
    background: #000000;
}
```

}

@media (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display: block;
border: none;
margin-top: 0;
top: 150%;
opacity: 0;
visibility: hidden;
transition: .5s;
background: #000000;
}

```
.navbar .nav-item:hover .dropdown-menu {
    top: 100%;
    visibility: visible;
    opacity: 1;
}
```

}

/*** Header / Carousel ***/
.owl-carousel-inner {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
background: rgba(0, 0, 0, .72);
}

.header-carousel h1,
.header-carousel .display-1,
.header-carousel .display-2,
.header-carousel .display-3,
.header-carousel .display-4,
.header-carousel .display-5 {
color: #FFFFFF !important;
text-shadow:
0 1px 0 #B88646,
0 2px 4px rgba(0,0,0,.35),
0 0 18px rgba(184,134,70,.35);
}

.header-carousel p {
color: #EAE6DE !important;
}

.header-carousel .owl-carousel-item img {
filter: brightness(.75) contrast(1.05);
}

@media (max-width: 768px) {
.header-carousel .owl-carousel-item {
position: relative;
min-height: 500px;
}

```
.header-carousel .owl-carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-carousel .owl-carousel-item p {
    font-size: 16px !important;
}
```

}

.header-carousel .owl-dots {
position: absolute;
width: 60px;
height: 100%;
top: 0;
right: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.header-carousel .owl-dots .owl-dot {
position: relative;
width: 45px;
height: 45px;
margin: 5px 0;
background: #EAE6DE;
box-shadow: 0 0 25px rgba(214,177,122,.35);
border: 2px solid #B88646;
border-radius: 45px;
transition: .5s;
}

.header-carousel .owl-dots .owl-dot.active {
width: 60px;
height: 60px;
background: #FFFFFF;
border-color: #D6B17A;
}

.header-carousel .owl-dots .owl-dot img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
padding: 2px;
border-radius: 45px;
transition: .5s;
}

.page-header {
background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, .72)), url(../img/carousel-1.jpg) center center no-repeat;
background-size: cover;
}

.breadcrumb-item + .breadcrumb-item::before {
color: #EAE6DE;
}

/*** About ***/
.about-text {
background: #EAE6DE !important;
color: #2B2B2B !important;
}

.about-text h1,
.about-text h2 {
color: #000000 !important;
text-shadow: 0 1px 0 #D6B17A;
}

.about-text p {
color: #2B2B2B;
}

@media (min-width: 992px) {
.container.about {
max-width: 100% !important;
}

```
.about-text {
    padding-right: calc(((100% - 960px) / 2) + .75rem);
}
```

}

@media (min-width: 1200px) {
.about-text {
padding-right: calc(((100% - 1140px) / 2) + .75rem);
}
}

@media (min-width: 1400px) {
.about-text {
padding-right: calc(((100% - 1320px) / 2) + .75rem);
}
}

/*** Services ***/
.service-item {
background: #F5F2EC !important;
color: #2B2B2B;
border: 1px solid rgba(184,134,70,.25);
box-shadow: 0 0 35px rgba(0, 0, 0, .08);
transition: .5s;
}

.service-item:hover {
transform: translateY(-5px);
border-color: #B88646;
box-shadow: 0 0 25px rgba(184,134,70,.20);
}

.service-item h4 {
color: #000000;
text-shadow: 0 1px 0 #D6B17A;
}

.service-item p {
color: #444444;
}

.service-item a {
color: #8B5E2B;
}

.service-item a:hover {
color: #000000;
}

.service-icon {
position: relative;
margin: -50px 0 25px 0;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: #000000 !important;
border: 2px solid #B88646;
color: #D6B17A !important;
border-radius: 100px;
box-shadow: 0 0 12px rgba(184,134,70,.35);
transition: .5s;
}

.service-item:hover .service-icon {
background: #B88646 !important;
color: #FFFFFF !important;
box-shadow: 0 0 25px rgba(184,134,70,.55);
}

/*** Quote / CTA ***/
.quote-text {
background: #000000 !important;
color: #EAE6DE;
}

.quote-text h1,
.quote-text h2,
.quote-text h3,
.quote-text h4,
.quote-text h5,
.quote-text h6 {
color: #FFFFFF !important;
text-shadow:
0 1px 0 #B88646,
0 2px 4px rgba(0,0,0,.35),
0 0 18px rgba(184,134,70,.35);
}

.quote-text p {
color: #EAE6DE !important;
}

@media (min-width: 992px) {
.container.quote {
max-width: 100% !important;
}

```
.quote-text {
    padding-right: calc(((100% - 960px) / 2) + .75rem);
}
```

}

@media (min-width: 1200px) {
.quote-text {
padding-right: calc(((100% - 1140px) / 2) + .75rem);
}
}

@media (min-width: 1400px) {
.quote-text {
padding-right: calc(((100% - 1320px) / 2) + .75rem);
}
}

/*** Contact ***/
.contact-text {
background: #EAE6DE !important;
color: #2B2B2B !important;
}

.contact-text h1,
.contact-text h2 {
color: #000000 !important;
text-shadow: 0 1px 0 #D6B17A;
}

.contact-text p {
color: #2B2B2B;
}

@media (min-width: 992px) {
.container.contact {
max-width: 100% !important;
}

```
.contact-text {
    padding-left: calc(((100% - 960px) / 2) + .75rem);
}
```

}

@media (min-width: 1200px) {
.contact-text {
padding-left: calc(((100% - 1140px) / 2) + .75rem);
}
}

@media (min-width: 1400px) {
.contact-text {
padding-left: calc(((100% - 1320px) / 2) + .75rem);
}
}

/*** Forms ***/
.form-control,
.form-select {
background: #FFFFFF !important;
color: #2B2B2B !important;
border: 1px solid #D9D2C7 !important;
border-radius: 8px;
}

.form-control::placeholder {
color: #777777;
}

.form-control:focus,
.form-select:focus {
color: #2B2B2B;
background-color: #FFFFFF;
border-color: #B88646 !important;
box-shadow: 0 0 0 .25rem rgba(184,134,70,.25) !important;
}

.form-floating > label {
color: #777777;
}

/*** Footer ***/
.footer {
background: #000000 !important;
}

.footer h5,
.footer .text-white {
color: #D6B17A !important;
text-shadow: 0 0 10px rgba(214,177,122,.25);
}

.footer p,
.footer span,
.footer .text-body {
color: #CFC8BC !important;
}

.footer .btn.btn-social {
margin-right: 5px;
color: #EAE6DE;
border: 1px solid #B88646;
border-radius: 38px;
transition: .3s;
}

.footer .btn.btn-social:hover {
color: #FFFFFF;
background: #B88646;
border-color: #B88646;
}

.footer .btn.btn-link {
display: block;
margin-bottom: 5px;
padding: 0;
text-align: left;
color: #CFC8BC !important;
font-weight: normal;
text-transform: capitalize;
transition: .3s;
}

.footer .btn.btn-link::before {
position: relative;
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: 10px;
color: #D6B17A;
}

.footer .btn.btn-link:hover {
color: #D6B17A !important;
letter-spacing: 1px;
box-shadow: none;
}

.footer .copyright {
padding: 25px 0;
border-top: 1px solid rgba(214,177,122,.20);
}

.footer .copyright a {
color: #D6B17A;
}

.footer .copyright a:hover {
color: #FFFFFF;
}

/*** Team - por si lo usas luego ***/
.team-item {
background: #F5F2EC !important;
color: #2B2B2B;
border: 1px solid rgba(184,134,70,.25);
box-shadow: 0 0 35px rgba(0, 0, 0, .08);
}

.team-item h5 {
color: #000000;
text-shadow: 0 1px 0 #D6B17A;
}

.team-item span {
color: #444444;
}

.team-item img {
border-radius: 8px 60px 0 0;
}

.team-item .team-social {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
background: #EAE6DE !important;
transition: .5s;
}

/*** Extra Bootstrap Overrides ***/
.link-primary {
color: #8B5E2B !important;
}

.link-primary:hover {
color: #000000 !important;
}

.table-primary {
--bs-table-bg: #EAE6DE;
--bs-table-striped-bg: #DDD8CF;
--bs-table-active-bg: #D2CCC1;
--bs-table-hover-bg: #D9D2C7;
color: #000000;
border-color: #D9D2C7;
}

.alert-primary {
color: #000000;
background-color: #EAE6DE;
border-color: #D9D2C7;
}

::selection {
background: #B88646;
color: #FFFFFF;
}
