/*
======================================
COLOR THEME VARIABLES
======================================
*/
:root {
    /* Soft Beach Theme */
    --pinnacle-bright-blue: #51e2f5; /* Primary */
    --pinnacle-blue-green: #9df9ef; /* Primary Light */
    --pinnacle-dusty-white: #edf756; /* Secondary (Light BG) - Modified for contrast */
    --pinnacle-pink-sand: #ffa8B6; /* Accent/CTA Hover */

    /* Business Theme Colors (Darker for contrast/text) */
    --pinnacle-primary-dark: #004c4c; /* Dark Teal/Business Name */
    --pinnacle-secondary-dark: #3a3a3a; /* Dark Grey/Text */

    /* Bootstrap Overrides */
    --bs-primary: var(--pinnacle-bright-blue);
    --bs-secondary: var(--pinnacle-blue-green);
}

.navbar-nav li a{
    font-size:13px !important;
}

/*
======================================
GLOBAL STYLES & TYPOGRAPHY
======================================
*/
body {
    font-family: 'Poppins', sans-serif;
    color: var(--pinnacle-secondary-dark);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--pinnacle-primary-dark);
}

/* Custom Utility Classes for Theme Colors */
.text-primary { color: var(--pinnacle-bright-blue) !important; }
.text-secondary { color: var(--pinnacle-blue-green) !important; }
.text-primary-dark { color: var(--pinnacle-primary-dark) !important; }
.text-secondary-dark { color: var(--pinnacle-secondary-dark) !important; }
.text-primary-light { color: var(--pinnacle-blue-green) !important; }

/* Alternate Section Background */
.bg-light-soft {
    background-color: var(--pinnacle-dusty-white) !important;
}

/* Dark Background for Sections */
.bg-primary-dark {
    background-color: var(--pinnacle-primary-dark) !important;
}
.bg-secondary-dark {
    background-color: var(--pinnacle-secondary-dark) !important;
}

/*
======================================
NAVBAR STYLES
======================================
*/
.navbar {
    background-color: transparent !important; /* No background color */
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.navbar-brand {
    font-size: 1.8rem;
}

.nav-link {
    font-weight: 600;
    color: var(--pinnacle-primary-dark) !important;
    margin: 0 0.8rem;
    transition: color 0.3s;
}

.nav-link:hover, .nav-link.active {
    color: var(--pinnacle-bright-blue) !important;
}

/* CTA Button in Navbar */
.btn-cta {
    background-color: var(--pinnacle-primary-dark); /* Dark BG */
    color: white;
    font-weight: 600;
    border: none;
    padding: 0.5rem 1.5rem;
    transition: background-color 0.3s;
}

.btn-cta:hover {
    background-color: var(--pinnacle-bright-blue); /* Hover Effect */
    color: var(--pinnacle-primary-dark);
}

/*
======================================
HERO SECTION
======================================
*/
.hero-bg {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.7));
}

.btn-primary-hero {
    background-color: var(--pinnacle-bright-blue);
    color: var(--pinnacle-primary-dark);
    border-color: var(--pinnacle-bright-blue);
    font-weight: 600;
    transition: background-color 0.3s;
}
.btn-primary-hero:hover {
    background-color: var(--pinnacle-pink-sand);
    border-color: var(--pinnacle-pink-sand);
    color: white;
}

.btn-outline-secondary-hero {
    color: var(--pinnacle-primary-dark);
    border-color: var(--pinnacle-primary-dark);
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
}
.btn-outline-secondary-hero:hover {
    background-color: var(--pinnacle-primary-dark);
    color: var(--pinnacle-bright-blue);
}

/*
======================================
SECTION STYLES
======================================
*/
section {
    padding-top: 5rem; /* Standard section padding top */
    padding-bottom: 5rem; /* Standard section padding bottom */
}

@media (min-width: 992px) {
    section {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

/* WHY CHOOSE US - Icon Styling */
.icon-box {
    width: 60px;
    height: 60px;
    background-color: var(--pinnacle-blue-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
======================================
SERVICES CARD STYLES
======================================
*/
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--pinnacle-secondary-dark) !important; /* Dark card BG */
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25) !important;
}

.service-img {
    height: 250px;
    object-fit: cover;
}

.btn-outline-primary-light {
    color: var(--pinnacle-blue-green);
    border-color: var(--pinnacle-blue-green);
}
.btn-outline-primary-light:hover {
    background-color: var(--pinnacle-blue-green);
    color: var(--pinnacle-primary-dark);
}

/*
======================================
CTA & NEWSLETTER
======================================
*/
.btn-cta-main {
    background-color: var(--pinnacle-pink-sand);
    color: white;
    font-weight: 700;
    transition: background-color 0.3s;
}
.btn-cta-main:hover {
    background-color: var(--pinnacle-bright-blue);
    color: var(--pinnacle-primary-dark);
}

.btn-secondary-cta {
    background-color: var(--pinnacle-blue-green);
    color: var(--pinnacle-primary-dark);
    font-weight: 600;
    border: none;
    transition: background-color 0.3s;
}
.btn-secondary-cta:hover {
    background-color: var(--pinnacle-pink-sand);
}

/*
======================================
FAQ STYLES
======================================
*/
.accordion-button {
    background-color: white !important;
    color: var(--pinnacle-primary-dark) !important;
    font-weight: 600;
    border: 1px solid var(--pinnacle-blue-green);
    transition: background-color 0.3s;
}
.accordion-button:not(.collapsed) {
    background-color: var(--pinnacle-blue-green) !important;
    color: var(--pinnacle-primary-dark) !important;
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.25rem rgba(81, 226, 245, 0.5); /* Bright blue focus ring */
}

/*
======================================
FOOTER STYLES
======================================
*/
.footer-link {
    text-decoration: none;
    transition: color 0.3s;
}
.footer-link:hover {
    color: var(--pinnacle-bright-blue) !important;
}

.btn-secondary-cta-footer {
    background-color: var(--pinnacle-blue-green);
    color: var(--pinnacle-primary-dark);
    font-weight: 600;
    border: none;
    transition: background-color 0.3s;
}
.btn-secondary-cta-footer:hover {
    background-color: var(--pinnacle-pink-sand);
    color: white;
}