/* Breadcrumb styles */
.breadcrumb-nav {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    padding: 0 15px;
}

.breadcrumb-nav ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    backdrop-filter: blur(5px);
}

.breadcrumb-nav li {
    display: flex;
    align-items: center;
    font-size: clamp(9pt, 1.5vw, 11pt);
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    letter-spacing: 0.5px;
}

.breadcrumb-nav li a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-nav li a:hover {
    color: #F2707E;
}

.breadcrumb-nav li.active {
    color: #F2707E;
    font-weight: 600;
}

.breadcrumb-nav li + li::before {
    content: "/";
    display: inline-block;
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   Mobile Comprehensive Fixes (max-width: 768px)
   All fixes are additive, preserving desktop styles
   ======================================== */

@media screen and (max-width: 768px) {

    /* --- Breadcrumb Mobile Optimization --- */
    .breadcrumb-nav {
        bottom: 10px;
        padding: 0 10px;
    }

    .breadcrumb-nav ol {
        padding: 6px 12px;
        border-radius: 20px;
    }

    .breadcrumb-nav li {
        font-size: 8pt;
        letter-spacing: 0.3px;
    }

    .breadcrumb-nav li + li::before {
        margin: 0 5px;
    }

    /* --- Container Fix: Remove min-width constraint --- */
    .container {
        min-width: unset !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* --- Navbar Logo: Allow wrapping, reduce size --- */
    .navbar-brand span.logo {
        font-size: 0.75rem !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        text-align: center;
    }

    .navbar-brand img {
        max-width: 35pt;
        height: auto;
    }

    /* --- Navbar mobile adjustments --- */
    .navbar {
        padding: 8px 12px !important;
    }

    /* --- Hero Section mobile fix --- */
    .HeroSection .carousel-item {
        height: clamp(350pt, 75vw, 450pt);
    }

    .HeroSection .text-box {
        top: 50%;
        padding: 0 10px;
    }

    .HeroSection h1 {
        font-size: clamp(14pt, 6vw, 22pt);
        width: 90%;
    }

    .HeroSection h4 {
        font-size: clamp(9pt, 3vw, 12pt);
        width: 90%;
    }

    .HeroSection p {
        font-size: clamp(7pt, 3vw, 10pt);
        width: 90%;
    }

    .HeroSection .btn {
        font-size: clamp(7pt, 3vw, 10pt);
        padding: clamp(5pt, 2vw, 8pt) clamp(12pt, 4vw, 20pt);
    }

    /* --- Other Hero Section (sub-pages) mobile fix --- */
    .other-hero-section {
        height: clamp(200pt, 55vw, 320pt);
    }

    .other-hero-section .section-title {
        padding: 0 15px;
    }

    .other-hero-section .section-title h1 {
        font-size: clamp(14pt, 6vw, 22pt);
    }

    .other-hero-section .section-title p {
        font-size: clamp(7pt, 3vw, 10pt);
        width: 90%;
    }

    /* --- About Section mobile fix --- */
    .about-section .g-5 {
        padding: 4vw 0pt;
    }

    .about-section .col-12:not(.img-block) {
        padding-left: 0;
        padding-top: 20pt;
        text-align: center;
    }

    .about-section .img-block {
        height: clamp(200pt, 65vw, 300pt);
    }

    .about-section img {
        width: 85%;
        top: 10%;
        left: 7.5%;
    }

    .about-section .box {
        width: 45%;
        left: 2%;
    }

    .about-section .count-number .count {
        font-size: clamp(14pt, 5vw, 18pt);
    }

    /* --- Offer Section: Fix card overflow --- */
    .offer-section .col-12 {
        max-width: 100% !important;
        margin: 10pt 5pt;
        min-height: auto;
    }

    .offer-section .icon-box {
        height: 100px;
        width: 100px;
    }

    .offer-section .card-body {
        top: 110px;
        padding: 15px;
    }

    .offer-section .icon {
        font-size: clamp(28pt, 8vw, 42pt);
    }

    /* --- Goal Section: Fix card overflow --- */
    .goal-section .col-12 {
        max-width: 100% !important;
        margin: 10pt 5pt;
    }

    /* --- Service Section: Fix card overflow --- */
    .service-section .col-12 {
        max-width: 100% !important;
        margin-bottom: 3vw;
    }

    .service-section .card {
        min-height: auto;
    }

    /* --- Portfolio/Gallery: Fix grid item overflow --- */
    .portfolio-section .grid-item {
        width: calc(100% - 10pt) !important;
        height: auto;
        min-height: 200px;
        display: block;
        margin: 5pt auto;
    }

    .portfolio-section .filters ul {
        margin: 0 2vw;
        padding: 3pt 5pt;
    }

    .portfolio-section .filters li {
        padding: 8pt 3pt;
    }

    /* --- Pricing Section: Fix card width --- */
    .pricing-section .col-12 {
        max-width: 100% !important;
        margin-bottom: 40pt;
    }

    .pricing-section .pricing-table {
        margin: 0 10px;
    }

    /* --- Blog Section: Fix card width --- */
    .blog-section .blog {
        max-width: 100% !important;
    }

    /* --- Team Section mobile fix --- */
    .team-section img {
        width: 100pt;
        height: 100pt;
    }

    .team-section .g-0 {
        padding: 8pt 3pt;
    }

    /* --- Testimonial Section: Fix circle overflow --- */
    .testimonial-section .circle-container {
        width: clamp(220pt, 70vw, 320pt);
        height: clamp(220pt, 70vw, 320pt);
    }

    .testimonial-section .center-circle {
        width: 200px;
        height: 200px;
    }

    /* --- Presentation Section mobile fix --- */
    .presentation-section {
        margin: 2vw 5px;
        border-width: 5px;
    }

    .presentation-section .offer-col,
    .presentation-section .presentation-col {
        text-align: center;
        margin-bottom: 15px;
    }

    /* --- Contact Section mobile fix --- */
    .contact-section .col-12 {
        margin-bottom: 20pt;
    }

    /* --- Footer Section mobile fix --- */
    .footer-section .col-12 {
        margin-bottom: 20pt;
        text-align: center;
    }

    .footer-section .social-links {
        justify-content: center;
    }

    /* --- Sponsor Section mobile fix --- */
    .sponsor-section .carousel-control-prev i {
        margin-left: -10vw;
    }

    .sponsor-section .carousel-control-next i {
        margin-right: -10vw;
    }

    /* --- General overflow prevention --- */
    .row {
        --bs-gutter-x: 0.5rem;
    }

    img {
        max-width: 100%;
        height: auto;
    }

    /* --- Section text centering on mobile --- */
    .section-title1,
    .section-title2,
    .section-text {
        text-align: center !important;
    }
}

/* Extra small screens (max-width: 480px) */
@media screen and (max-width: 480px) {

    .breadcrumb-nav ol {
        padding: 5px 10px;
    }

    .breadcrumb-nav li {
        font-size: 7pt;
    }

    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .navbar-brand span.logo {
        font-size: 0.65rem !important;
    }

    .HeroSection .carousel-item {
        height: clamp(300pt, 80vw, 400pt);
    }

    .other-hero-section {
        height: clamp(180pt, 60vw, 280pt);
    }

    .portfolio-section .grid-item {
        min-height: 180px;
    }

    .testimonial-section .circle-container {
        width: clamp(180pt, 80vw, 280pt);
        height: clamp(180pt, 80vw, 280pt);
    }
}