:root {
    --secondary-color: #232559;
    --primary-color: #a52a2a;
    --dim-color: #651414;
    --inactive-color: #65668A;
    --bg-grey: #e9ecef;
    --gold-color: #e9be3d;
    --background-light: #edf2f9;
}

body {
    margin: 0%;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
}

.nav-link {
    border-radius: 25px;
    font-weight: 600;
    color: #000000;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.nav-link:hover {

    background-color: var(--bg-grey);
}

.signup-btn {
    background-color: var(--primary-color);
    color: #ffffff;
}

.signup-btn:hover {
    background-color: var(--dim-color);
    color: #ffffff;
}

#hero-section {
    margin-top: 50px;
    background: linear-gradient(rgba(28, 32, 35, 0.6), rgba(0, 0, 0, 0.6)), transparent url('../images/sea-views-towards-campoamor-scaled.webp') center center/cover no-repeat fixed;
}

#hero-section .card {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: rgba(255, 12, 12, 0.4);
    backdrop-filter: blur(4px);
    filter: saturate(2);
}

#hero-section .card .card-body {
    padding: 7rem 3rem;
}

.bg-red {
    background-color: var(--primary-color);
}


.icon {
    color: var(--primary-color);
}

.custom-control {
    border-left: none !important;
}

.custom-control:focus {
    box-shadow: none;
    border-color: var(--bs-border-color);

}

span.input-group-text {
    background: none;
    border-right: none !important;
    padding-right: 1px !important;
}

.btn-primary {
    border-radius: 25px;
    background-color: var(--primary-color);
    border: none;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.btn-primary:hover {
    background-color: var(--dim-color);
}

.btn-primary:focus,
.btn-primary:active {
    box-shadow: none;
    background-color: var(--dim-color) !important;
}

.text-gold {
    color: var(--gold-color);
}

#leads h1 {
    font-weight: bold;
}

.bg-image-leads {
    background: url("../images/pp3.png") center no-repeat;
    background-size: contain;
}

#leads ul {
    font-size: large;
    font-weight: bold;
}
#prices .card {
    border: 0px;
}

#prices .card .card-header {
    background-image: linear-gradient(to bottom, var(--background-light), transparent);
    font-weight: bold;
    border-bottom: 0px;
}

#prices .card .card-body {
    font-weight: bold;
}

.btn-custom {
    border-radius: 25px;
    background-color: #ffffff;
    color: var(--primary-color);
    border: none;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.btn-custom:hover {
    background-color: var(--gold-color);
}

.btn-custom:focus,
.btn-custom:active {
    box-shadow: none;
    background-color: var(--gold-color);
}

#prices .btn-custom {
    border: 2px solid var(--primary-color);
}

#prices .btn-custom:hover {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background-color: var(--gold-color);
}

#prices .btn-custom:focus,
.btn-custom:active {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    box-shadow: none;
    background-color: var(--gold-color);
}

.row {
    margin-left: 0px;
    margin-right: 0px;
}

.custom-bg-light {
    background: var(--background-light);
}

.text-red {
    color: var(--primary-color);
}

 .slick-dots li.slick-active button:before,
 .slick-dots li button:before {
    color: var(--primary-color);
}

.slick-next:before,
.slick-prev:before {
    color: var(--primary-color) !important;
}
#call-to-action{
    background: linear-gradient(rgba(49, 18, 18, 0.8), rgba(42, 10, 10, 0.8)), transparent url('../images/sea-views-towards-campoamor-scaled.webp') center center/cover no-repeat fixed;
}
.bg-gold{
    background-color: var(--gold-color);
}
.leads-details{
    background-color: var(--background-light);
}
.slick-dots{
    bottom: -40px !important;
}
footer a:hover{
    color: var(--gold-color) !important;
}
