/*
 * Clinical Edge RN - Custom Theme CSS
 * Brand: The Clinical Edge RN
 * Colors: Primary #63bbf7, Secondary #13547c
 * Fonts: Quicksand (headings), Roboto (body), Dancing Script (accent)
 */

/* ==========================================
   1. Brand Color Overrides
   ========================================== */

:root {
    --theme-color: #63bbf7;
    --theme-color2: #4aade8;
    --theme-color3: #13547c;
    --theme-color4: #63bbf7;
    --theme-color5: #0d3a57;
    --title-color: #13547c;
    --body-color: #555e67;
    --smoke-color: #f0f7fd;
    --smoke-color2: #e4f0fa;
    --border-color: #d0e8f5;
    --black-color: #0a1a2e;
    --gradient-color: linear-gradient(135deg, #63bbf7 0%, #13547c 100%);
}

/* ==========================================
   2. Header / Navigation
   ========================================== */

/* Header background */
.vs-header {
    background-color: #ffffff;
}

/* Header sticky */
.sticky-wrapper.is-sticky .vs-header,
.vs-header.sticky-active {
    background-color: #ffffff;
    box-shadow: 0 2px 20px rgba(19, 84, 124, 0.12);
}

/* Top bar */
.header-top {
    background-color: #13547c;
    color: #ffffff;
}

.header-top a,
.header-top .header-info a {
    color: #ffffff;
}

.header-top a:hover {
    color: #63bbf7;
}

/* Logo text fallback */
.logo a, .logo h2, .logo h2 a {
    color: #13547c !important;
    font-family: var(--title-font);
    font-weight: 700;
    font-size: 24px;
    text-decoration: none;
}

/* Navigation links */
.main-menu > ul > li > a {
    color: #13547c;
    font-family: var(--title-font);
    font-weight: 600;
    font-size: 15px;
}

.main-menu > ul > li > a:hover,
.main-menu > ul > li.active > a {
    color: #63bbf7;
}

/* Header CTA button */
.header-button .vs-btn,
.vs-btn {
    background-color: #63bbf7;
    border-color: #63bbf7;
    color: #ffffff;
    font-family: var(--title-font);
    font-weight: 600;
    border-radius: 6px;
}

.vs-btn:hover,
.vs-btn.style2:hover {
    background-color: #13547c;
    border-color: #13547c;
    color: #ffffff;
}

.vs-btn i {
    background-color: #63bbf7;
}

.vs-btn:hover i {
    background-color: #13547c;
}

/* ==========================================
   3. Hero / Banner Section
   ========================================== */

.hero-wrapper,
.hero-1 {
    background-color: #0d3a57;
}

/* Hero video overlay */
.elementor-background-overlay {
    background-color: rgba(13, 58, 87, 0.55) !important;
}

/* Hero headings */
.hero-wrapper h1,
.hero-wrapper h2,
.hero-wrapper .title-selector,
.elementor-95 .title-selector {
    color: #ffffff;
    font-family: var(--title-font);
    font-weight: 700;
    line-height: 1.2;
}

/* Hero subtitle */
.hero-wrapper .hero-subtitle,
.hero-wrapper p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    line-height: 1.7;
}

/* ==========================================
   4. Section Titles
   ========================================== */

.section-title .sub-title,
.sub-title {
    color: #63bbf7;
    font-family: var(--subtitle-font);
    font-size: 20px;
}

.section-title .title,
h2.title,
h3.title,
.title-selector {
    color: #13547c;
    font-family: var(--title-font);
    font-weight: 700;
}

.section-title .title span,
h2.title span {
    color: #63bbf7;
}

/* ==========================================
   5. Service / Feature Cards
   ========================================== */

.vs-service-box,
.service-card,
.service-item {
    border: 1px solid #d0e8f5;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.vs-service-box:hover,
.service-card:hover,
.service-item:hover {
    border-color: #63bbf7;
    box-shadow: 0 8px 30px rgba(99, 187, 247, 0.15);
    transform: translateY(-4px);
}

.vs-service-box .box-icon,
.service-icon {
    color: #63bbf7;
}

/* ==========================================
   6. Pricing / Plans
   ========================================== */

.price-box,
.pricing-box,
.vs-price-card {
    border: 1px solid #d0e8f5;
    border-radius: 12px;
    overflow: hidden;
}

.price-box.active,
.pricing-box.popular,
.vs-price-card.active {
    border-color: #63bbf7;
    box-shadow: 0 8px 40px rgba(99, 187, 247, 0.2);
}

.price-box .price-header,
.pricing-header {
    background-color: #13547c;
    color: #ffffff;
    padding: 30px;
}

.price-box.active .price-header,
.pricing-box.popular .pricing-header {
    background: linear-gradient(135deg, #63bbf7 0%, #13547c 100%);
}

.price-amount,
.price-box .price {
    font-size: 48px;
    font-weight: 700;
    color: #63bbf7;
    font-family: var(--title-font);
}

.price-amount sup {
    font-size: 24px;
    vertical-align: top;
    margin-top: 10px;
}

.price-amount span.period {
    font-size: 16px;
    color: #555e67;
    font-weight: 400;
}

/* ==========================================
   7. Testimonials
   ========================================== */

.vs-testimonial-box,
.testi-box {
    background-color: #ffffff;
    border: 1px solid #d0e8f5;
    border-radius: 12px;
    padding: 30px;
}

.vs-testimonial-box .quote-icon,
.testi-box .quote-icon {
    color: #63bbf7;
}

.vs-testimonial-box .author-name,
.testi-box .author-name {
    color: #13547c;
    font-weight: 700;
}

/* ==========================================
   8. About Section
   ========================================== */

.about-img-box img {
    border-radius: 12px;
}

.about-content .about-list li::before,
.checklist li::before {
    color: #63bbf7;
}

/* ==========================================
   9. Contact Form
   ========================================== */

.appointment-form,
.contact-form,
.vs-contact-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(19, 84, 124, 0.08);
    padding: 40px;
}

.appointment-form .form-control,
.contact-form input,
.contact-form textarea,
.wpcf7-form input,
.wpcf7-form textarea {
    border: 1px solid #d0e8f5;
    border-radius: 6px;
    padding: 12px 16px;
    font-family: var(--body-font);
    color: #333333;
    width: 100%;
}

.appointment-form .form-control:focus,
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
    border-color: #63bbf7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 187, 247, 0.15);
}

.wpcf7-submit,
input[type="submit"] {
    background-color: #63bbf7 !important;
    color: #ffffff !important;
    border: none;
    border-radius: 6px;
    padding: 12px 30px;
    font-family: var(--title-font);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}

.wpcf7-submit:hover,
input[type="submit"]:hover {
    background-color: #13547c !important;
}

/* ==========================================
   10. Footer
   ========================================== */

.vs-footer-wrapper,
.footer-top {
    background-color: #0d3a57;
}

.footer-bottom {
    background-color: #0a2e45;
}

.footer-widget .widget-title,
.footer-widget h4 {
    color: #ffffff;
    font-family: var(--title-font);
    font-weight: 600;
    margin-bottom: 20px;
}

.footer-widget a,
.footer-widget p,
.footer-widget li {
    color: #b8d4e8;
}

.footer-widget a:hover {
    color: #63bbf7;
}

.footer-logo a,
.footer-logo h2 {
    color: #ffffff !important;
    font-size: 22px;
}

.footer-text {
    color: #b8d4e8;
}

.footer-social a {
    color: #b8d4e8;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184, 212, 232, 0.3);
    border-radius: 50%;
    transition: all 0.3s;
    margin-right: 8px;
}

.footer-social a:hover {
    color: #ffffff;
    background-color: #63bbf7;
    border-color: #63bbf7;
}

.copyright-text,
.footer-copyright {
    color: #b8d4e8;
}

.copyright-text a {
    color: #63bbf7;
}

/* ==========================================
   11. Breadcrumb / Page Banner
   ========================================== */

.breadcumb-wrapper {
    background-color: #13547c;
    background-image: linear-gradient(135deg, #0d3a57 0%, #13547c 100%);
    position: relative;
    overflow: hidden;
}

.breadcumb-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(13, 58, 87, 0.6);
}

.breadcumb-title {
    color: #ffffff;
    position: relative;
    z-index: 1;
    font-family: var(--title-font);
}

.breadcumb-menu li,
.breadcumb-menu a {
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 1;
}

.breadcumb-menu a:hover {
    color: #63bbf7;
}

.breadcumb-menu li.active {
    color: #63bbf7;
}

/* ==========================================
   12. Video Library Page
   ========================================== */

.video-filter-btn,
.filter-btn {
    border: 1px solid #63bbf7;
    color: #63bbf7;
    border-radius: 4px;
    padding: 6px 16px;
    background: transparent;
    transition: all 0.3s;
    cursor: pointer;
    font-family: var(--title-font);
    font-size: 14px;
}

.video-filter-btn:hover,
.video-filter-btn.active,
.filter-btn.active {
    background-color: #63bbf7;
    color: #ffffff;
}

.video-card {
    border: 1px solid #d0e8f5;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s;
}

.video-card:hover {
    box-shadow: 0 8px 30px rgba(99, 187, 247, 0.2);
    transform: translateY(-3px);
}

.video-card .play-btn {
    color: #63bbf7;
}

/* ==========================================
   13. Accordion (FAQ / Video Categories)
   ========================================== */

.accordion .accordion-button,
.vs-accordion .accordion-header button {
    background-color: #f0f7fd;
    color: #13547c;
    font-family: var(--title-font);
    font-weight: 600;
}

.accordion .accordion-button:not(.collapsed),
.vs-accordion .accordion-header button.active {
    background-color: #63bbf7;
    color: #ffffff;
}

.accordion .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(99, 187, 247, 0.2);
}

/* ==========================================
   14. Process / Steps Section
   ========================================== */

.process-step .step-number {
    background-color: #63bbf7;
    color: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    font-family: var(--title-font);
    margin: 0 auto 15px;
}

.process-step .step-title {
    color: #13547c;
    font-family: var(--title-font);
    font-weight: 600;
}

/* ==========================================
   15. CTA / Call to Action Sections
   ========================================== */

.cta-section,
.call-to-action {
    background: linear-gradient(135deg, #63bbf7 0%, #13547c 100%);
    color: #ffffff;
}

.cta-section h2,
.cta-section h3,
.call-to-action h2 {
    color: #ffffff;
}

.cta-section .vs-btn.style3,
.call-to-action .vs-btn.style3 {
    background-color: #ffffff;
    color: #13547c;
    border-color: #ffffff;
}

.cta-section .vs-btn.style3:hover {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

/* ==========================================
   16. Background / Color Utility Classes
   ========================================== */

.bg-theme {
    background-color: #63bbf7 !important;
}

.bg-title {
    background-color: #13547c !important;
}

.bg-smoke {
    background-color: #f0f7fd !important;
}

.text-theme {
    color: #63bbf7 !important;
}

.text-title {
    color: #13547c !important;
}

/* ==========================================
   17. Preloader
   ========================================== */

.preloader {
    background-color: #ffffff;
}

.preloader .preloader-icon {
    border-top-color: #63bbf7;
    border-left-color: #13547c;
}

/* ==========================================
   18. Back to Top
   ========================================== */

.scrollToTop {
    background-color: #63bbf7;
    color: #ffffff;
}

.scrollToTop:hover {
    background-color: #13547c;
}

/* ==========================================
   19. Search Bar
   ========================================== */

.search-form input[type="search"],
.video-search-input {
    border: 2px solid #d0e8f5;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 16px;
    width: 100%;
    font-family: var(--body-font);
}

.search-form input:focus,
.video-search-input:focus {
    border-color: #63bbf7;
    outline: none;
}

.search-form button,
.video-search-btn {
    background-color: #63bbf7;
    color: #ffffff;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 12px 20px;
    cursor: pointer;
}

/* ==========================================
   20. Newsletter / Email Signup
   ========================================== */

.newsletter-form input[type="email"],
.footer-newsletter input {
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border-radius: 6px 0 0 6px;
    padding: 12px 16px;
}

.newsletter-form input::placeholder,
.footer-newsletter input::placeholder {
    color: rgba(255,255,255,0.6);
}

.newsletter-form button,
.footer-newsletter button {
    background-color: #63bbf7;
    color: #ffffff;
    border: none;
    border-radius: 0 6px 6px 0;
    padding: 12px 20px;
    cursor: pointer;
    font-family: var(--title-font);
    font-weight: 600;
}

.newsletter-form button:hover {
    background-color: #4aade8;
}

/* ==========================================
   21. Mobile Responsive Adjustments
   ========================================== */

@media (max-width: 767px) {
    .hero-wrapper h1,
    .hero-wrapper h2,
    .elementor-95 .title-selector {
        font-size: 32px !important;
    }

    .price-amount {
        font-size: 36px;
    }

    .appointment-form,
    .contact-form,
    .vs-contact-box {
        padding: 25px;
    }
}

/* ==========================================
   22. WooCommerce Subscription Plans
   ========================================== */

.woocommerce .product .price,
.woocommerce .products .price {
    color: #63bbf7;
    font-family: var(--title-font);
    font-weight: 700;
}

.woocommerce .btn.checkout,
.woocommerce button.button {
    background-color: #63bbf7 !important;
    color: #ffffff !important;
    border-radius: 6px;
    font-family: var(--title-font);
    font-weight: 600;
}

.woocommerce button.button:hover {
    background-color: #13547c !important;
}