body {
     background: #f5f6f7;
     background-image: url('../../assets/img/sentiero_bg.jpg');
     background-position: top;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-size: cover;

 }

 .hero {
     /*   background: url('../../assets/img/sentiero_bg.jpg') center/cover;
     background-position: top; */
     color: #fff;
     padding: 20px;
     border-radius: 12px;
 }

 .card-section {
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
 }

 .section-title {
     font-weight: 700;
     font-size: 1rem;
     margin-bottom: 10px;
 }

 .action-icon {
     font-size: 2rem;
     margin-bottom: 10px;
 }

 .icon-box {
     text-align: center;
     padding: 15px;
 }

 .emergency-btn {
     color: #fff;
     text-decoration: none;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 90px;
     border-radius: 10px;
 }

 .bg-red {
     background: #d62828;
 }

 .bg-blue {
     background: #1976d2;
 }

 .bg-orange {
     background: #f4a261;
 }

 .bg-green {
     background: #23CC63;
 }

 .do-card {
     text-align: center;
     padding: 15px;
     height: 100%;
 }

 .footer-warning {
     background: #fff7e6;
 }

 #MapBox {
     height: 180px;
 }

 .marker-pin {
     width: 30px;
     height: 30px;
     border-radius: 50% 50% 50% 0;
     background: #c30b82;
     position: absolute;
     transform: rotate(-45deg);
     left: 50%;
     top: 50%;
     margin: -15px 0 0 -15px;
 }

 .marker-pin::after {
     content: '';
     width: 24px;
     height: 24px;
     margin: 3px 0 0 3px;
     background: #fff;
     position: absolute;
     border-radius: 50%;
 }

 .custom-div-icon i {
     position: absolute;
     width: 22px;
     font-size: 22px;
     left: 0;
     right: 0;
     margin: 10px auto;
     text-align: center;
 }

 .custom-div-icon i.awesome {
     margin: 12px auto;
     font-size: 17px;
 }


 .circle {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background-color: #8B5A2B;
     /* marrone */
     display: flex;
     flex-direction: column;
     justify-content: right;
     align-items: center;
     position: relative;
     color: white;
     font-weight: bold;
     font-size: 24px;
 }

 .half-divider {
     position: absolute;
     width: 100%;
     height: 2px;
     transform: translateY(-50%);
 }

 .top {
     position: absolute;
     top: 0%;
     padding-top: 14%;
     background: rgba(255, 255, 255, 0.6);
     text-align: center;
     width: 100%;
     font-size: small;
 }

 .bottom {
     position: absolute;
     bottom: 0%;
     text-align: center;
     width: 100%;
     font-size: 40px;
 }

 .border-servizi {
     border-color: #375f8a;
 }

 .text-servizi {
     color: #375f8a;
 }

 .alert-orange {
     color: #7c4a03;
     background-color: #fff3cd;
     border-color: #ffda8a;
 }

 .text-orange {
     color: #f4a261;
 }

 .btn-outline-servizi {
     color: #375f8a;
     background-color: transparent;
     background-image: none;
     border-color: #375f8a;
 }

 .btn-outline-servizi:hover,
 .btn-outline-servizi:active,
 .btn-outline-servizi:visited {
     background: rgba(55, 95, 138, .1);
     border-color: #375f8a;
     color: #375f8a !important;
 }

 .border-sentiero {
     border-color: #542091;
 }

 .text-sentiero {
     color: #542091;
 }

 .btn-outline-sentiero {
     color: #542091;
     background-color: transparent;
     background-image: none;
     border-color: #542091;
 }

 .btn-outline-sentiero:hover,
 .btn-outline-sentiero:active,
 .btn-outline-sentiero:visited {
     background: rgba(84, 32, 145, .1);
     border-color: #542091;
     color: #542091 !important;
 }


 .footer-green {
     background: #123D29;
     color: white;
     /*  padding: 30px;
            margin-top: 10px; */
     border-radius: 12px;
 }

 .footer-green a {
     color: white;
     text-decoration: none;
     transition: opacity 0.3s;
 }

 .footer-green a:hover {
     opacity: 0.8;
 }

 .footer-logo {
     max-width: 120px;
     height: auto;
 }

 .footer-social {
     display: flex;
     gap: 20px;
     align-items: center;
     justify-content: flex-end;
 }

 .social-icon {
     font-size: 1.5rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
 }

 .social-icon:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 @media (max-width: 768px) {

     .footer-social {
         justify-content: flex-start;
         margin-top: 15px;
     }

 }


 .loadingdata {
     background: #e2e5e7;
     color: transparent;
     border-radius: 6px;
     position: relative;
     overflow: hidden;
     min-height: 18px;
 }

 .loadingdata::after {
     content: '';
     position: absolute;
     top: 0;
     left: -150px;
     height: 100%;
     width: 150px;
     background: linear-gradient(90deg,
             rgba(255, 255, 255, 0),
             rgba(255, 255, 255, 0.6),
             rgba(255, 255, 255, 0));
     animation: loading 1.2s infinite;
 }

 @keyframes loading {
     0% {
         left: -150px;
     }

     100% {
         left: 100%;
     }
 }

 /* default: mobile (1 column) */
 .row-cols-7>.col {
     width: 100%;
 }

 /* md: 3 columns */
 @media (min-width: 768px) {
     .row-cols-7>.col {
         width: 33.3333%;
     }
 }

 /* lg: 7 columns */
 @media (min-width: 992px) {
     .row-cols-7>.col {
         width: 14.285714%;
     }
 }

 .offcanvas {
     z-index: 1051 !important;
 }

 .leaflet-touch .leaflet-control-layers-toggle {
     width: 30px;
     height: 30px;
 }

 @media (max-width: 768px) {
     .hide_mobile {
         display: none;
     }
 }


 .legend {
     background: white;
     /* background: rgba(255, 255, 255, .4); */
     padding: 5px;
     border-radius: 5px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
     line-height: 12px;
 }

 .legend i {
     float: left;
     margin-right: 8px;
     opacity: 0.8;
 }


 #player-overlay {
     position: absolute;
     top: 80px;
     left: 0;
     width: 100%;
     height: 90%;
     background-color: #000;
     z-index: 999;
 }

 video {
     display: block;
     width: 100%;
     height: 90%;
 }


.leaflet-top.leaflet-right {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px; /* optional spacing */
}

.leaflet-top.leaflet-right .leaflet-control {
    margin: 10px 10px 0 0;
}