/*** Debunked Consultants brand colours (from the logo) ***
   Logo blue     #44A1C2   -> primary (buttons, icons, links, accents)
   Logo charcoal #3D3E3E   -> dark (headings, topbar, footer, overlays)
   Logo warm dark #48463C  -> secondary (supporting text)
   Logo near-white #FBFEFF -> light backgrounds
   Load this file AFTER css/style.css on every page. ***/

:root {
    --bs-primary: #44A1C2;
    --bs-secondary: #48463C;
    --bs-dark: #3D3E3E;
    --bs-light: #F6FAFC;
}

body { color: #6b6d6d; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: #3D3E3E; }

a { color: #44A1C2; }
a:hover { color: #34829f; }

/* Utility colours */
.text-primary { color: #44A1C2 !important; }
.text-secondary { color: #48463C !important; }
.text-dark { color: #3D3E3E !important; }
.bg-primary { background-color: #44A1C2 !important; }
.bg-secondary { background-color: #48463C !important; }
.bg-dark { background-color: #3D3E3E !important; }
.bg-light { background-color: #F6FAFC !important; }
.border-primary { border-color: #44A1C2 !important; }
.link-primary { color: #44A1C2; }

/* Buttons */
.btn-primary { color: #fff; background-color: #44A1C2; border-color: #44A1C2; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { color: #fff; background-color: #3a8dab; border-color: #3a8dab; }
.btn-check:focus + .btn-primary, .btn-primary:focus { box-shadow: 0 0 0 .25rem rgba(68, 161, 194, .5); }
.btn-outline-primary { color: #44A1C2; border-color: #44A1C2; }
.btn-outline-primary:hover { color: #fff; background-color: #44A1C2; border-color: #44A1C2; }
.btn-dark { background-color: #3D3E3E; border-color: #3D3E3E; }

/* Forms, dropdowns, misc */
.form-control:focus, .form-select:focus { border-color: #9fd0e1; box-shadow: 0 0 0 .25rem rgba(68, 161, 194, .25); }
.form-check-input:checked { background-color: #44A1C2; border-color: #44A1C2; }
.dropdown-item.active, .dropdown-item:active { background-color: #44A1C2; }
.page-item.active .page-link { background-color: #44A1C2; border-color: #44A1C2; }

/* Hero, breadcrumb and footer overlays (were pure black) */
.header-carousel .header-carousel-item .carousel-caption { background: rgba(61, 62, 62, .55); }
.bg-breadcrumb { background: linear-gradient(rgba(61, 62, 62, .6), rgba(61, 62, 62, .6)), url(../img/c1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.footer { background: linear-gradient(rgba(45, 46, 46, .94), rgba(45, 46, 46, .94)), url(../img/c1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.copyright { background: #3D3E3E !important; }

/* Service cards */
.service .service-item:hover .service-img::before { background: rgba(68, 161, 194, .3); }
.service .service-item .service-content::before { background: rgba(68, 161, 194, .5); }
.service .service-item:hover .service-content::before { background: rgba(68, 161, 194, .5); }
.service .service-item:hover .service-content .service-content-inner h5 { color: #FBFEFF; }

/* Team */
.team .team-item:hover .team-img::before { background: rgba(68, 161, 194, .3); }
.team .team-item .team-content h5 { color: #3D3E3E; }

/* Blog / retainer cards */
.blog .blog-item:hover .blog-img::after { background: rgba(68, 161, 194, .5); }

/* Appointment form tint (was peach) */
.appointment .appointment-form { background: rgba(68, 161, 194, .18); }

/* Blue banner sections */
.testimonial { background: linear-gradient(rgba(68, 161, 194, .92), rgba(68, 161, 194, .92)), url(../img/carousel-1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
.contact { background: linear-gradient(rgba(68, 161, 194, .92), rgba(68, 161, 194, .92)), url(../img/carousel-1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
.testimonial-carousel .owl-dots .owl-dot.active { background: #3D3E3E !important; }


/* =====================================================================
   ENHANCEMENTS: more depth, colour and polish (same logo palette)
   Extra tones derived from the logo blue:
   bright #5BB8D8 | deep #2F86A8 | tint #EDF6FA
   ===================================================================== */

body { color: #5d6566; }

/* ---- Topbar and navbar ---- */
.bg-dark.d-lg-block { background: linear-gradient(90deg, #2b2c2c 0%, #3D3E3E 55%, #2F86A8 100%) !important; }
.navbar-light { box-shadow: 0 6px 24px rgba(61, 62, 62, .12); }
.navbar-light .navbar-nav .nav-link { font-weight: 600; letter-spacing: .2px; }
.navbar-light .navbar-nav .nav-link.active { color: #2F86A8 !important; }
.navbar .nav-item .dropdown-menu { box-shadow: 0 14px 34px rgba(61, 62, 62, .18); }

/* ---- Hero, breadcrumb ---- */
.header-carousel .header-carousel-item .carousel-caption { background: linear-gradient(105deg, rgba(34, 35, 35, .88) 0%, rgba(61, 62, 62, .6) 55%, rgba(68, 161, 194, .5) 100%); }
.header-carousel .carousel-caption-content h1 { text-shadow: 0 4px 22px rgba(0, 0, 0, .45); }
.header-carousel .carousel-caption-content h5 { color: #8fd3ea !important; }
.bg-breadcrumb { background: linear-gradient(105deg, rgba(34, 35, 35, .88), rgba(61, 62, 62, .62) 55%, rgba(68, 161, 194, .55)), url(../img/carousel-2.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; }
.bg-breadcrumb .breadcrumb-item.active { color: #8fd3ea !important; }
.header-carousel .owl-nav .owl-prev, .header-carousel .owl-nav .owl-next { background: linear-gradient(135deg, #5BB8D8, #2F86A8); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); }

/* ---- Section headings ---- */
.sub-title, .section-title .sub-style { letter-spacing: 3px; font-weight: 700; color: #2F86A8; }
.section-title h1 { color: #3D3E3E; }
.section-title h1::after { content: ""; display: block; width: 70px; height: 4px; margin: 18px auto 0; border-radius: 4px; background: linear-gradient(90deg, #5BB8D8, #2F86A8); }
.about .section-title.text-start h1::after, .appointment .section-title.text-start h1::after { margin-left: 0; }
.testimonial .section-title h1, .contact .section-title h1 { color: #fff; }
.testimonial .section-title h1::after { background: #fff; }

/* ---- Section backgrounds ---- */
.bg-light { background-color: #EDF6FA !important; }
.service { background: linear-gradient(180deg, #fff 0%, #F3F9FC 100%); }
.about.bg-light { background: linear-gradient(135deg, #EDF6FA 0%, #fff 100%) !important; }
.about .about-img .about-experience { color: #2F86A8; font-weight: 700; }

/* ---- Buttons ---- */
.btn.btn-primary, .btn-primary { background-image: linear-gradient(135deg, #5BB8D8 0%, #2F86A8 100%); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(47, 134, 168, .35); }
.btn.btn-primary:hover { background-image: none; border-color: #44A1C2; }
.btn-light.text-primary { color: #2F86A8 !important; font-weight: 700; }
.back-to-top { background-image: linear-gradient(135deg, #5BB8D8, #2F86A8); box-shadow: 0 8px 20px rgba(47, 134, 168, .4); }

/* ---- Image service cards ---- */
.service .service-item { border-radius: 12px; background: #fff; box-shadow: 0 12px 34px rgba(61, 62, 62, .13); transition: .4s; }
.service .service-item:hover { transform: translateY(-8px); box-shadow: 0 20px 44px rgba(47, 134, 168, .3); }
.service .service-item .service-content { background: #fff !important; }
.service .service-item .service-content::before { height: 6px; background: linear-gradient(90deg, #5BB8D8, #2F86A8); }
.service .service-item:hover .service-content::before { height: 100%; background: linear-gradient(135deg, #5BB8D8, #2F86A8); }
.service .service-item:hover .service-content .service-content-inner { color: #fff !important; }

/* ---- Feature / detail cards ---- */
.feature .feature-item { background: #fff; border: 1px solid rgba(68, 161, 194, .35); border-top: 4px solid #44A1C2; border-radius: 12px; box-shadow: 0 10px 30px rgba(61, 62, 62, .08); }
.feature .feature-item:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(47, 134, 168, .28); }
.feature .feature-item::before { background: linear-gradient(135deg, #5BB8D8, #2F86A8); }
.feature .feature-item:hover::before { width: 100%; background: linear-gradient(135deg, #5BB8D8, #2F86A8); }
.feature .feature-item .feature-icon > div { background: linear-gradient(135deg, #5BB8D8, #2F86A8) !important; box-shadow: 0 8px 18px rgba(47, 134, 168, .3); transition: .4s; }
.feature .feature-item .feature-icon i { color: #fff !important; transition: .4s; }
.feature .feature-item:hover .feature-icon > div { background: #fff !important; }
.feature .feature-item:hover .feature-icon i { color: #2F86A8 !important; }
.feature .feature-item:hover .feature-content h5 { color: #fff; }
.feature .feature-item:hover .feature-content .text-primary { color: #fff !important; }
.feature .feature-item h5 { color: #3D3E3E; }
.feature .feature-item .feature-content p.text-primary { color: #2F86A8 !important; font-weight: 600; font-size: .95rem; }
.feature .feature-item .feature-content li { color: #5d6566; }
.feature .feature-item:hover .feature-content li { color: #fff; }

/* ---- Team ---- */
.team .team-item { box-shadow: 0 12px 30px rgba(61, 62, 62, .12); border-radius: 12px; transition: .4s; }
.team .team-item:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(47, 134, 168, .28); }
.team .team-item .team-content { background: #fff; border-color: #44A1C2 !important; }
.team .team-item:hover .team-content { background: linear-gradient(135deg, #5BB8D8, #2F86A8); }
.team .team-item:hover .team-content h5, .team .team-item:hover .team-content p { color: #fff; }

/* ---- Retainer / blog cards ---- */
.blog .blog-item { box-shadow: 0 12px 30px rgba(61, 62, 62, .12); border-radius: 12px; overflow: hidden; transition: .4s; }
.blog .blog-item:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(47, 134, 168, .28); }
.blog .blog-item .blog-centent { background: #fff; border: 0; border-top: 4px solid #44A1C2; }
.blog .blog-item a.h4 { color: #3D3E3E; }

/* ---- Appointment / consultation block ---- */
.appointment .appointment-form { background: linear-gradient(145deg, #2F86A8 0%, #3D3E3E 100%); box-shadow: 0 24px 50px rgba(47, 134, 168, .35); border-radius: 14px !important; }
.appointment .appointment-form h1, .appointment .appointment-form p.text-primary { color: #fff !important; }
.appointment .appointment-form .form-control, .appointment .appointment-form .form-select { color: #fff !important; border-color: rgba(255, 255, 255, .55) !important; }
.appointment .appointment-form .form-control::placeholder, .appointment .appointment-form textarea::placeholder { color: rgba(255, 255, 255, .75); }
.appointment .appointment-form input[type=date] { color-scheme: dark; }
.appointment .appointment-form .form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); }
.appointment .appointment-form .form-select option { color: #3D3E3E; background: #fff; }
.appointment .appointment-form .btn.btn-primary { background-image: none !important; background-color: #fff !important; color: #2F86A8 !important; border-color: #fff; }

/* ---- Blue banner sections (Experience, Contact) ---- */
.testimonial { background: linear-gradient(135deg, rgba(47, 134, 168, .95) 0%, rgba(68, 161, 194, .9) 55%, rgba(61, 62, 62, .93) 100%), url(../img/carousel-1.jpg); background-position: center center; background-size: cover; background-attachment: fixed; }
.contact { background: linear-gradient(135deg, rgba(47, 134, 168, .95) 0%, rgba(68, 161, 194, .9) 55%, rgba(61, 62, 62, .93) 100%), url(../img/carousel-1.jpg); background-position: center center; background-size: cover; background-attachment: fixed; }
.testimonial .testimonial-item .testimonial-inner { background: rgba(255, 255, 255, .1); backdrop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, .25); }
.testimonial .testimonial-item h5, .contact h4.text-dark { color: #fff !important; }
.contact .contact-form h2 { color: #fff; }

/* ---- Footer ---- */
.footer { background: linear-gradient(135deg, rgba(34, 35, 35, .96) 0%, rgba(61, 62, 62, .95) 60%, rgba(47, 134, 168, .92) 100%), url(../img/c1.jpg); background-size: cover; background-position: center; }
.footer .footer-item p, .footer .footer-item a { color: #cdd8dc; }
.footer .footer-item a:hover { color: #8fd3ea; }
.footer .footer-item h4 { position: relative; padding-bottom: 14px; }
.footer .footer-item h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #5BB8D8, #2F86A8); }
.copyright { background: #2b2c2c !important; border-top: 3px solid #44A1C2; }


/* =====================================================================
   HERO ANIMATIONS + VIDEO BACKGROUND
   ===================================================================== */

/* Slide 1 background video (img/hero.mp4). The poster image shows until it
   plays, and on phones the video is hidden so the image is used instead. */
.header-carousel .header-carousel-item { overflow: hidden; }
.header-carousel .header-carousel-item .hero-video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
@media (max-width: 767px) { .header-carousel .header-carousel-item .hero-video { display: none; } }

/* Slow zoom (Ken Burns) on the active slide image */
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.header-carousel .owl-item.active .header-carousel-item img { animation: heroZoom 14s ease-out both; }

/* Staggered text entrance each time a slide becomes active */
@keyframes heroUp   { from { opacity: 0; transform: translateY(40px); }  to { opacity: 1; transform: none; } }
@keyframes heroDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
.header-carousel .owl-item.active .carousel-caption-content h5 { animation: heroDown .9s .2s ease-out both; }
.header-carousel .owl-item.active .carousel-caption-content h1 { animation: heroUp   1s  .45s ease-out both; }
.header-carousel .owl-item.active .carousel-caption-content p  { animation: heroUp   1s  .7s  ease-out both; }
.header-carousel .owl-item.active .carousel-caption-content .btn { animation: heroUp .9s  .95s ease-out both; }

/* Respect visitors who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .header-carousel .owl-item.active .header-carousel-item img,
    .header-carousel .owl-item.active .carousel-caption-content * { animation: none !important; }
    .header-carousel .header-carousel-item .hero-video { display: none; }
}