﻿/* Estilos personalizados para aproximar do layout original */
html, body, * {
    font-family: Manrope;
}

span.social-icons {
    font-size: 0.7em;
}
@media (min-width: 992px) {
    span.social-icons {
        font-size: 0.4em;
    }
}

.itemCarousel {
    height: 215px;
    background-position: center center;
    background-size: cover;
    border-radius: 10px;
    background-repeat: no-repeat;
}

.itemCarousel2 {
    height: 380px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
body {
    background-color: #ffffff !important;
}

.navbar {
    background-color: transparent !important;
}

.nav-link span {
    font-size: 0.9rem;
    text-transform: uppercase;
    color: white;
    display: inline-block;
    padding-bottom: 3px;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid;
}
/* Cores Personalizadas */
.text-marica-green {
    color: #2fb943;
}
.text-marica-darkblue {
    color: #004a8c;
}

.text-marica-blue {
    color: #2683c6;
}

.text-marica-orange {
    color: #cc973b;
}

.border-marica-darkblue {
    border-color: #004a8c !important;
}

.border-marica-orange {
    border-color: #cc973b !important;
}

.border-marica-blue {
    border-color: #2683c6 !important;
}

.border-marica-yellow {
    border-color: #f0d32f !important;
}

.border-marica-green {
    border-color: #a5c331 !important;
}

.border-marica-teal {
    border-color: #29896d !important;
}

.bg-marica-alice {
    background-color: #eff9fb;
}

.bg-marica-orange {
    background: linear-gradient(135deg, #e69f1f, #e95a0c);
}

.bg-marica-red {
    background: linear-gradient(135deg, #b15a49, #ef6011);
}

.bg-marica-green {
    background: linear-gradient(135deg, #98bb21, #008a33);
}

.bg-marica-teal {
    background: linear-gradient(135deg, #2e8562, #216892);
}

.bg-marica-dark-blue {
    background: linear-gradient(135deg, #4486c0, #0c4e80);
}

.btn-marica-green {
    background-color: #2fb943;
    color: white;
    border: none;
}

    .btn-marica-green:hover {
        background-color: #279c38;
        color: white;
    }

/* Estilos do Cabeçalho Superior */
.top-header {
    color: white;
    padding: 15px 0 5px 0;
    font-size: 0.8rem;
    background-color: #042f52;
}

    .top-header a {
        text-decoration: none;
        color: white;
    }

    .top-header .search-bar {
        max-width: 400px;
    }

.partners-card {
    text-align: center;
    font-size: 0.8em;
    color: darkgray;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.search-box button {
    border-left: none !important;
    background-color: white !important;
}

.search-box input {
    border-right: none !important;
}

.container-pers {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 90%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 992px) {
    .container-pers {
        width: 100% !important;
        max-width: 960px !important;
    }
}

.carousel-control-prev {
    width: auto;
    left: -1em;
}

.carousel-control-next {
    width: auto;
    right: -1em;
}

.carousel-control-prev-icon {
    background-image: none !important;
}

.carousel-control-next-icon {
    background-image: none !important;
}

.main-menu {
    padding-bottom: 10px;
}

    .main-menu span {
        font-size: 0.9rem;
        text-transform: uppercase;
        color: white;
        display: inline-block;
        padding-bottom: 3px;
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 3px solid;
    }

/* Estilos do Menu Principal */
.main-navbar {
    background-color: #1a4d7d;
}

    .main-navbar .nav-link {
        color: white !important;
        font-weight: 500;
        text-transform: uppercase;
        font-size: 0.9rem;
        padding: 10px 15px !important;
    }

        .main-navbar .nav-link:hover {
            background-color: #0c2b4d;
        }

/* Seção "Próximos Eventos" com Carrossel */
.section-events {
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: linear-gradient(to bottom, rgba(255,255,255,0) 20%,rgba(255,255,255,1)),url('../Images/fundo_desktop.png');
}

.event-carousel-item {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 350px; /* Ajuste conforme necessário */
    color: white;
    display: flex;
    align-items: center;
    padding: 40px;
}
    /* Gradiente para garantir a legibilidade do texto */
    .event-carousel-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
        z-index: 1;
    }

.event-carousel-content {
    position: relative;
    z-index: 2;
}

/* Seção "Conheça o Melhor de Maricá" */
.category-card {
    padding: 30px 20px !important;
    text-align: center;
    color: white;
    padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

    .category-card:hover {
        transform: translateY(-5px);
    }

    .category-card i {
        font-size: 2.5rem;
    }

    .category-card img {
        height: 3.5rem;
    }

    .category-card span {
        display: block;
        font-size: 0.8rem;
        text-transform: uppercase;
        margin-top: 10px;
    }

/* Seção "Principais Destinos" */
.destination-card {
    border: none;
    overflow: hidden;
    position: relative;
}

    .destination-card img {
        width: 100%;
        height: 250px; /* Ajuste conforme necessário */
        object-fit: cover;
        transition: transform 0.3s;
    }

    .destination-card:hover img {
        transform: scale(1.05);
    }

    .destination-card .card-body {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 15px;
        background: linear-gradient(to top, rgba(0,74,140,1), transparent);
        color: white;
        text-align: center;
    }

        .destination-card .card-body img {
            height: 1.5em !important;
            width: auto;
            margin-bottom: 5px;
        }

        .destination-card .card-body button {
            font-size: 0.7em !important;
        }

            .destination-card .card-body button img {
                font-size: 0.7em !important;
            }

    .destination-card .card-title {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .destination-card .card-location {
        font-size: 0.8rem;
        color: #ffca2c; /* Cor para ícone de localização */
    }

    .destination-card .btn-outline-light {
        font-size: 0.8rem;
        border-radius: 20px;
        padding: 5px 15px;
    }

.card-app {
    background: linear-gradient(to top, rgba(0,74,140,1), transparent);
}

.cropped-image {
    width: 100%; /* Takes full width of the parent column */
    height: 300px; /* Set your desired fixed height */
    object-fit: cover; /* Crops the image from the center without distortion */
}
/* Seção "Mapa Interativo" e "App" */
.interactive-map-section {
    color: white;
}

.tarifa-zero-box {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    color: #0c2b4d;
}

    .tarifa-zero-box .sub-box {
        padding: 10px;
        border-radius: 5px;
        color: white;
        margin-bottom: 10px;
    }

.app-download-box {
    background-color: #ffc107; /* Cor aproximada da caixa do app */
    padding: 20px;
    border-radius: 8px;
    color: #0c2b4d;
    text-align: center;
}

.map-wrapper {
    background: url('https://via.placeholder.com/1200x500/003a6c/ffffff?text=Mapa+Interativo+Maricá') no-repeat center center;
    background-size: cover;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}

.map-title {
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
}

/* Banner "Viva essa Experiência" */
.section-viva-experiencia {
    padding: 15px 0;
    background-color: white;
}

.viva-experiencia-banner {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
}

.viva-banner-left {
    width: 35%;
    background-color: #0c2b4d;
    color: white;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.viva-banner-right {
    width: 65%;
    background: url('https://via.placeholder.com/800x400/fec812/0c2b4d?text=Pessoas+Fotografando') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    padding: 30px;
    color: #0c2b4d;
    font-weight: bold;
}

/* Seção "Parcerias" */
.section-parcerias {
    padding: 15px 0;
    background-color: white;
}

.partners-row img {
    max-height: 50px;
    object-fit: contain;
    margin: 10px 15px;
}

/* Rodapé Superior */
.pre-footer {
    background-color: #0c2b4d;
    color: white;
    padding: 15px 0;
}

    .pre-footer a {
        color: white;
        text-decoration: none;
    }


/* Rodapé Inferior */
.main-footer {
    background-color: #0c2b4d;
    color: white;
    padding: 15px 0;
    font-size: 0.8rem;
}

    .main-footer > div {
        border-top: 3px solid rgba(255,255,255,0.1);
    }
/*
.owl-item {
    margin: 0 0px;
    width: 210px !important;
}

    .owl-item:first-child {
        margin-left: 0 !important;
    }

    .owl-item:last-child {
        margin-right: 0 !important;
    }
    */
.no-break-group {
    white-space: nowrap; /* Prevents the image from dropping to the next line */
}

.inline-flex-wrapper {
    display: inline-flex; /* Keeps the container inline with surrounding text */
    align-items: center; /* Centers the image vertically with the span text */
    gap: 8px; /* Adds clean spacing between text and image */
}
