/* =========================
           NAVBAR
        ========================= */

        .navbar-custom {
            background: #ffffff;
            padding: 12px 0;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            border-bottom: 4px solid;
            border-image: linear-gradient(to right,#3C3C6E,#F79E4A) 1;
        }

        /* =========================
           LOGO
        ========================= */
        .navbar-brand{
            width: auto;
            height: 85px;
            overflow: hidden;
        }

        /* =========================
           MENU LINKS
        ========================= */

        .nav-link{
            font-weight:600;
            color:#3C3C6E !important;
            position:relative;
            padding:8px 14px;
            border-radius:6px;
            transition:all 0.3s ease;
            text-transform: uppercase; /* TODOS MAIÚSCULOS */
        }

        /* HOVER */
        .nav-link:hover{
            color:#F79E4A !important;
            background:rgba(247,158,74,0.08);
        }

        /* LINHA ANIMADA */
        .nav-link::after{
            content:'';
            position:absolute;
            width:0%;
            height:2px;
            left:0;
            bottom:-6px;
            background:#F79E4A;
            transition:0.3s;
        }

        .nav-link:hover::after{
            width:100%;
        }

        /* ITEM ATIVO */
        .nav-link.active{
            color:#F79E4A !important;
            background:rgba(247,158,74,0.08);
        }

        .nav-link.active::after{
            content:'';
            position:absolute;
            width:100%;
            height:2px;
            left:0;
            bottom:-6px;
            background:#F79E4A;
        }

        .logo {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* =========================
           MENU
        ========================= */

        .navbar-nav {
            gap: 30px;
        }

        .nav-link {
            font-weight: 600;
            color: #3C3C6E !important;
            position: relative;
        }

        .nav-link:hover {
            color: #F79E4A !important;
        }

        /* LINHA ANIMAÇÃO */

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0%;
            height: 2px;
            left: 0;
            bottom: -6px;
            background: #F79E4A;
            transition: 0.3s;
        }

        .nav-link:hover::after {
            width: 100%;
        }

        /* =========================
           BOTÃO WHATSAPP
        ========================= */

        .btn-whatsapp {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 22px;

            background: #25D366;
            color: #ffffff;
            font-weight: 600;

            border-radius: 30px;
            text-decoration: none;
        }

        .btn-whatsapp:hover {
            background: #1ebe5d;
            color: #ffffff;
        }

        /* ANIMAÇÃO PULSAR */

        .btn-whatsapp i {
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {

            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.2);
            }

            100% {
                transform: scale(1);
            }

        }


        

        /* =========================
           MOBILE
        ========================= */

        /* MOBILE */

        @media (max-width: 991px){

            .navbar-collapse{
                margin-top:15px;
            }

            .navbar-nav{
                align-items:flex-start;
                text-align:left;
                gap:10px;
            }

            .nav-link{
                padding:10px 0;
            }

            .btn-area{
                margin-top:15px;
                width:100%;
            }

            .btn-whatsapp{
                justify-content:center;
                width:100%;
            }

        }


    /* =========================
   SLIDER
========================= */



.slider-section .carousel-inner img{
    max-height:500px;
    object-fit:cover;
    border-radius:15px;
}

.carousel-caption h5{
    font-weight:700;
    font-size:1.8rem;
    color:#3C3C6E;
}

.carousel-caption p{
    font-size:1rem;
    color:#3C3C6E;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    /*background-color:#3C3C6E;*/
    border-radius:50%;
    width:50px;
    height:50px;
}

/* =========================
   THUMBNAILS
========================= */

.carousel-thumbnails img.thumb{
    width:70px;
    height:70px;
    object-fit:cover;
    border-radius:50%;
    cursor:pointer;
    opacity:0.6;
    transition:all 0.3s ease;
    border:2px solid transparent;
}

.carousel-thumbnails img.thumb:hover,
.carousel-thumbnails img.thumb.active{
    opacity:1;
    border:2px solid #F79E4A;
}

.carousel-caption h5 {
    font-weight: 800;       /* Mais bold */
    font-size: 2.1rem;
    color: #ffffff;         /* Texto branco */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.5); /* sombra para melhor leitura */
}

.carousel-caption p {
    font-weight: 700;       /* Bold também no subtítulo */
    font-size: 1.3rem;
    color: #ffffff;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}


/* =========================
   SOBRE NÓS – TEXTO
========================= */

.sobre-section h2{
    font-size:2rem;
    font-weight:800;
    color:#3C3C6E;
    margin-bottom:20px;
}

.sobre-section p{
    font-size:1rem;
    line-height:1.7;
    color:#333333;
    margin-bottom:15px; /* espaçamento entre parágrafos */
}

/* =========================
   CARD ANOS DE EXPERIÊNCIA – PREMIUM
========================= */

.experience-card{
    background:#ffffff;
    padding:40px 20px;
    border-radius:20px;
    position:relative;
    text-align:center;
    overflow:hidden;

    /* Borda com gradiente animada */
    border:4px solid transparent;
    border-image: linear-gradient(45deg, #3C3C6E, #F79E4A) 1;

    /* Sombra moderna */
    box-shadow: 0 12px 30px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.1);

    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover efeito “flutuar” */
.experience-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25), 0 12px 30px rgba(0,0,0,0.15);
}

/* Número de anos */
.experience-card h1{
    font-size:4rem;
    font-weight:900;
    color:#3C3C6E;
    margin-bottom:10px;
    position:relative;
}

/* Efeito decorativo: linha atrás do número */
.experience-card h1::after{
    content:'';
    position:absolute;
    width:60px;
    height:6px;
    background:linear-gradient(90deg,#3C3C6E,#F79E4A);
    bottom:-10px;
    left:50%;
    transform:translateX(-50%);
    border-radius:3px;
}

/* Texto “Anos de Experiência” */
.experience-card p{
    font-size:1.2rem;
    font-weight:700;
    color:#3C3C6E;
    margin-top:15px;
}

/* =========================
   IMAGEM DO SOBRE NÓS – PREMIUM
========================= */

.image-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    width: 100%;
    height: 250px;
}

.image-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:20px;
    transition: transform 0.5s ease;
}

/* Efeito hover: leve zoom na imagem */
.image-card:hover img{
    transform: scale(1.05);
}

/* Overlay suave */
.image-card::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.08); /* transparente leve para contraste */
    border-radius:20px;
    pointer-events:none;
}

/* =========================
   PARÁGRAFOS SOBRE NÓS – PREMIUM
========================= */

.sobre-section p{
    font-size: 1.05rem;       /* um pouco maior que o normal */
    line-height: 1.8;         /* maior espaçamento para leitura */
    color: #333333;           /* contraste agradável */
    margin-bottom: 20px;      /* espaço entre parágrafos */
    font-weight: 500;          /* semi-bold para destacar */
    text-align: justify;      /* deixa o texto mais organizado */
    text-indent: 20px;        /* recuo na primeira linha */
}

/* Palavras-chave podem receber destaque sutil */
.sobre-section p strong{
    color: #3C3C6E;           /* azul do logotipo */
    font-weight: 700;
}



/* =========================
   SEÇÃO SERVIÇOS
========================= */

.services-section{
    background:#f8f9fa;
}

.services-section h2{
    font-size:2rem;
    font-weight:800;
    color:#3C3C6E;
    margin-bottom:40px;
    text-align:center;
}

/* CARD */
.service-card{
    border-radius:20px;
    overflow:hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.service-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* IMAGEM COM BADGE */
.service-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}

/* BADGE */
.badge-service{
    position:absolute;
    top:15px;
    left:15px;
    background:#3C3C6E;
    color:#fff;
    font-size:0.8rem;
    font-weight:700;
    padding:5px 12px;
    border-radius:12px;
    text-transform: uppercase;
}

/* CARD BODY */
.card-body{
    padding:20px;
}

.card-title{
    font-size:1.2rem;
    font-weight:700;
    color:#3C3C6E;
    margin-bottom:10px;
}

.card-title i{
    margin-right:8px;
    color:#F79E4A; /* ícone laranja */
}

.card-text{
    font-size:0.95rem;
    color:#555;
    margin-bottom:15px;
}

/* BOTÃO */
.btn-service{
    background:#F79E4A;
    color:#fff;
    font-weight:700;
    border:none;
    padding:10px 20px;
    border-radius:12px;
    transition:all 0.3s ease;
    text-transform: uppercase;
}

.btn-service:hover{
    background:#3C3C6E;
    color:#fff;
}


/* =========================
   FAQ – Compacta e centralizada
========================= */

.faq-section{
    background:#ffffff;
}

.faq-section h2{
    font-size:2rem;
    font-weight:800;
    color:#3C3C6E;
    text-align:center;
    margin-bottom:40px;
}

.accordion{
    width:60%;
    margin:0 auto;
}

.accordion-item{
    border-left:4px solid #3C3C6E;
    border-radius:0 12px 12px 0;
    margin-bottom:10px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.05);
    overflow:hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.accordion-item:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

/* Remover seta automática do Bootstrap */
.accordion-button::after{
    display:none;
}

.accordion-button{
    background:#ffffff;
    color:#3C3C6E;
    font-weight:700;
    font-size:1rem; /* um pouco menor */
    border:none;
    padding:10px 20px; /* altura menor */
    text-align:left;
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-body{
    background:#f8f9fa;
    color:#333;
    font-size:1rem; /* um pouco menor */
    line-height:1.5;
    padding:8px 20px; /* menor padding para compactar */
}

/* =========================
   Responsividade FAQ
========================= */

@media (max-width: 768px) {
    .accordion {
        width: 100%;       /* ocupa toda largura em mobile */
        margin: 0;         /* remove centralização para mobile */
        padding: 0 10px;   /* padding lateral para não encostar na borda */
    }

    .accordion-button {
        font-size: 0.9rem;   /* ajuste de fonte para telas pequenas */
        padding: 8px 15px;   /* altura menor */
    }

    .accordion-body {
        font-size: 0.85rem;  /* texto um pouco menor */
        padding: 6px 15px;
    }
}



.contact-section {
    background: #ffffff;
}

.contact-section h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #3C3C6E;
    text-align: center;
    margin-bottom: 50px;
}

.contact-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid #3C3C6E;
    overflow: hidden;
    padding-top: 18px;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.contact-card i {
    color: #3C3C6E;
}

.contact-card h5 {
    font-weight: 700;
    margin-bottom: 10px;
}

.contact-card p {
    font-size: 0.95rem;
    color: #333333;
    line-height: 1.5;
}

/* Responsividade */
@media (max-width: 768px) {
    .contact-card {
        margin-bottom: 20px;
    }
}

.text-primary{

    color: #3C3C6E;

}


/* =========================
   Footer JCPS Tank Cleaning
========================= */

.footer-section {
    background: #3C3C6E;
    color: #ffffff;
    position: relative;
}

.footer-logo {
    max-width: 100%;
}

.footer-title {
    font-weight: 700;
    color: #F79E4A;
}

.footer-link {
    color: #ffffff;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
    transition: color 0.3s;
}

.footer-link:hover {
    color: #F79E4A;
}

.social-link {
    color: #ffffff;
    font-size: 1.1rem;
    transition: color 0.3s, transform 0.3s;
}

.social-link:hover {
    color: #F79E4A;
    transform: scale(1.2);
}

.footer-divider {
    border-top: 2px solid #F79E4A;
    opacity: 0.4;
}

.footer-section p, .footer-section a {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .text-md-start { text-align: center !important; }
    .text-md-end { text-align: center !important; }
    .mb-4 { margin-bottom: 25px !important; }
    .experience-card p{ text-align:center; }
}