/* 
 * Custom CSS per sovrascrivere il tema Residem
 * Appartamenti Carisolo - Val Rendena
 * La nostra palette di colori:
 * Primario: #03658c - Blu
 * Secondario: #023859 - Blu scuro
 * Accent: #d98b2b - Arancione
 * Text: #023859 - Scuro
 * Light: #E0E1DD - Light Gray
 */

:root {
    --primary-color: #03658c;
    --secondary-color: #023859;
    --accent-color: #d98b2b;
    --text-color: #023859;
    --light-color: #E0E1DD;
}

/* Font e Tipografia */
body {
    font-family: 'aileron', sans-serif;
    font-weight: 400;
    color: var(--text-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'aileron', sans-serif;
    font-weight: 700;
    color: var(--text-color);
}

h1 {
    letter-spacing: -0.5px;
}

h2 {
    letter-spacing: -0.3px;
}

.subtitle {
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.5px;
    color: var(--accent-color);
}

/* Colori di base */
.id-color {
    color: var(--accent-color) !important;
}

.bg-color {
    background-color: var(--primary-color) !important;
}

.de-gradient-edge-top, 
.de-gradient-edge-bottom {
    background: linear-gradient(var(--primary-color), transparent);
}

/* Bottoni */
.btn-main {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    font-family: 'aileron', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.btn-main:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-line {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    font-family: 'aileron', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.btn-line:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Header */
header.transparent.header-light {
    background: var(--light-color);
}

header.smaller, header.header-mobile {
    background: var(--light-color);
}

/* Footer */
footer {
    background: var(--primary-color);
    color: #ffffff;
}

footer .widget h5 {
    color: #ffffff;
}

footer li a {
    color: rgba(255, 255, 255, .7) !important;
}

footer li a:hover {
    color: #ffffff !important;
}

/* Sottolineatura nei menu */
#mainmenu > li > a {
    font-family: 'aileron', sans-serif;
    font-weight: 400;
    letter-spacing: 0.3px;
}

#mainmenu > li.current-menu-item > a,
#mainmenu > li.current-menu-ancestor > a {
    color: var(--accent-color) !important;
}

#mainmenu > li > a:hover {
    color: var(--accent-color) !important;
}

.subfooter {
    background: var(--secondary-color);
}

/* Elementi stile */
.de-team-list .team-desc {
    color: var(--accent-color);
}

.de-box-1 i {
    color: var(--accent-color) !important;
}

.de-room .d-label {
    background: var(--accent-color);
}

ul.de-icon-list li i {
    color: var(--accent-color) !important;
}

/* Swiper */
.swiper-pagination-bullet-active {
    background: var(--accent-color);
}

.swiper-button-next, .swiper-button-prev {
    color: var(--accent-color);
}

/* Float text */
.float-text {
    background: var(--primary-color);
}

.float-text a {
    color: white !important;
}

/* Scrollbar */
.scrollbar-v {
    background-color: var(--accent-color);
}

/* Hover effects */
.de-project-details .d-overlay {
    background: rgba(2, 56, 89, 0.8);
}

.de-room .d-overlay {
    background: rgba(2, 56, 89, 0.8);
}

/* Loader */
#de-loader {
    background: var(--primary-color);
}

/* Box design */
.de-box-1 {
    border-color: var(--light-color);
}

.de-box-1:hover {
    box-shadow: 0px 0px 20px 0px rgba(3, 101, 140, 0.15);
}

/* Team elements */
.de-team-list:hover {
    box-shadow: 0px 0px 20px 0px rgba(3, 101, 140, 0.15);
}

/* Servizi section */
p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    width: 100%;
}

/* Assicuriamo che i contenitori dei servizi abbiano altezza e larghezza adeguate */
.de-box-1 .d-flex {
    flex-wrap: wrap;
    align-items: flex-start;
}

.de-box-1 .ps-3 {
    width: calc(100% - 40px);
    padding-left: 15px !important;
}

/* Miglioriamo il padding e l'allineamento delle icone */
.de-box-1 i {
    width: 30px;
    text-align: center;
    margin-top: 5px;
    font-size: 1.5rem;
}

/* Aggiungiamo padding al box per un aspetto più bilanciato */
.de-box-1 {
    padding: 20px 0px 0px 10px;
    border-radius: 8px;
} 

.bg-dark {
    background-color: var(--secondary-color) !important;
}

.swiper-inner.bgcustom {
    background-position: center  !important;
    background-size: cover !important;
  }