/* ==========================================================================
   Ratan Paul — Brand Theme Overrides
   Brand palette: Navy #001b5c | Green #27933d | Teal #057f99
   Navy = dominant / structural colour, Teal = secondary accent,
   Green = highlight accent used sparingly (icons, underlines, hover pops).
   Loaded after all other stylesheets so these rules take effect site-wide.
   ========================================================================== */

:root {
    --brand-navy: #001b5c;
    --brand-navy-dark: #000f33;
    --brand-green: #27933d;
    --brand-teal: #057f99;
    --brand-navy-soft: rgba(0, 27, 92, 0.08);
    --brand-teal-soft: rgba(5, 127, 153, 0.08);
    --brand-shadow: 0 6px 18px rgba(0, 27, 92, 0.16);
}

::selection {
    background: var(--brand-teal);
    color: #fff;
}

/* --------------------------------------------------------------------
   Top contact bar
   -------------------------------------------------------------------- */
.header_nav_area {
    background: var(--brand-navy) !important;
    border-bottom: 3px solid var(--brand-teal) !important;
}
.header_nav_area .header_nav_block ul li,
.header_nav_area .contact_us_info li {
    color: #ffffff !important;
    border-right-color: rgba(255, 255, 255, 0.25) !important;
}
.header_nav_area .header_nav_block ul li i {
    color: var(--brand-green);
}
.header_nav_area .header_nav_block ul li a,
.header_nav_area .user_info li a {
    color: #ffffff !important;
}
.header_nav_area .user_info .btn.btn-default {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.header_nav_area .user_info .btn.btn-default:hover {
    background: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    transform: none;
}
.header_nav_area li a i.fa-facebook {
    color: #fff !important;
}

/* --------------------------------------------------------------------
   Logo — compact card that always fits inside the 84px header row
   (the header is cloned/fixed on scroll by Headhesive.js, so the logo
   must never exceed that row height or it spills out of the bar)
   -------------------------------------------------------------------- */
.header_logo {
    margin-top: 4px !important; margin-left: 8px !important;
}
.header_logo .logo a {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    padding: 4px 12px;
    border-radius: 8px;
    border: 2px solid var(--brand-teal);
    box-shadow: 0 3px 10px rgba(0, 27, 92, 0.18);
    transition: box-shadow 0.25s ease;
    line-height: 0;
}
.header_logo .logo a:hover {
    box-shadow: 0 5px 14px rgba(5, 127, 153, 0.3);
}
.header_logo .logo img {
    width: auto !important;
    height: 70px !important;
    max-width: 280px;
    display: block;
}
header .header_top_area.banner--clone .header_logo,
header .header_top_area.banner--stick .header_logo {
    margin-top: 12px !important;
}
header .header_top_area.banner--clone .header_logo img,
header .header_top_area.banner--stick .header_logo img {
    height: 44px !important;
}
.footer_area .widget_footer_contact_info > a {
    display: inline-block;
    background: #ffffff;
    padding: 8px 14px;
    border-radius: 10px;
    border: 2px solid var(--brand-teal);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    margin-bottom: 15px;
}
.footer_area .widget_footer_contact_info > a img {
    width: 250px !important;
    height: auto;
    border-radius: 4px !important;
}

/* --------------------------------------------------------------------
   Header top area / main navigation
   -------------------------------------------------------------------- */
header .header_top_area {
    min-height: 84px;
    border-bottom: 3px solid var(--brand-teal);
    box-shadow: 0 2px 12px rgba(0, 27, 92, 0.08);
}
header .header_top_area .header_top .main_menu_area .main_menu > ul > li > a:hover {
    color: var(--brand-teal);
}
header .header_top_area .header_top .main_menu_area .main_menu > ul > li > ul.dropdown-menu {
    border-top: 3px solid var(--brand-green);
    box-shadow: 0 10px 24px rgba(0, 27, 92, 0.18);
}
header .header_top_area .header_top .main_menu_area .main_menu > ul > li > ul.dropdown-menu li a:hover {
    background-color: var(--brand-navy-soft);
    color: var(--brand-navy);
}
.sidebar_nav_icon.nav_icon i,
.sidebar_nav_icon_close i {
    color: var(--brand-teal);
}

/* mobile side menu */
#sidebar_panel {
    background: var(--brand-navy);
}
#sidebar_panel .main_menu > ul.tree > li > a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#sidebar_panel .main_menu ul li ul li a {
    color: rgba(255, 255, 255, 0.75);
}
#sidebar_panel .main_menu ul li ul li a:hover {
    color: var(--brand-green);
}

/* --------------------------------------------------------------------
   Buttons — global (solid, not gradient, for a cleaner corporate look)
   -------------------------------------------------------------------- */
.btn-default,
a.btn-default,
input[type="submit"].btn-default {
    background-color: var(--brand-teal) !important;
    background-image: none !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 6px;
    padding: 8px 20px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 10px rgba(0, 27, 92, 0.22);
    transition: all 0.3s ease;
}
.btn-default:hover,
.btn-default:focus,
a.btn-default:hover,
a.btn-default:focus {
    background-color: var(--brand-navy) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 27, 92, 0.32);
}
.btn-primary {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 27, 92, 0.22);
    transition: all 0.3s ease;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    transform: translateY(-2px);
}
.more_btn a.btn {
    text-transform: uppercase;
    font-size: 1.2rem;
}

/* --------------------------------------------------------------------
   Section titles (About Us / What We Do / Our Gallery / Videos / etc.)
   -------------------------------------------------------------------- */
.page_title_area h2 {
    color: var(--brand-navy);
}
.page_title_area h2:before {
    background-color: var(--brand-green);
    width: 30px;
}
.page_title_area h2:after {
    background-color: var(--brand-teal);
    height: 3px;
    width: 60px;
    bottom: -13px;
}
.page_title_area h2 span {
    color: var(--brand-teal);
}
.page_title_area.page_title_white h2 {
    color: #ffffff;
}
.page_title_area.page_title_white h2 span {
    color: #7fd8c4;
}
.page_title_area.page_title_white h2:before {
    background-color: var(--brand-green);
}
.page_title_area.page_title_white h2:after {
    background-color: #7fd8c4;
}

/* breadcrumb banner on inner pages (About, Gallery, Videos, Testimonials, Contact...) */
.page_breadcrumb_area {
    background-image: none !important;
    background-color: var(--brand-navy) !important;
    border-bottom: 4px solid var(--brand-teal);
}
.page_breadcrumb_area .page_breadcrumb_inner .page_breadcrumb_title h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.page_breadcrumb_area .breadcrumb_area .breadcrumbs ul li > a,
.page_breadcrumb_area .breadcrumb_area .breadcrumbs ul li > span {
    color: #7fd8c4 !important;
}
.page_breadcrumb_area .breadcrumb_area .breadcrumbs ul li > a:hover {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------
   About Us image frame
   -------------------------------------------------------------------- */
.about_img img {
    border-color: var(--brand-navy) var(--brand-teal) var(--brand-teal) var(--brand-navy) !important;
    box-shadow: var(--brand-shadow);
}

/* --------------------------------------------------------------------
   What We Do / Other Services cards
   -------------------------------------------------------------------- */
.awesome_services_area {
    background-image: linear-gradient(rgba(0, 27, 92, 0.94), rgba(0, 27, 92, 0.94)), url("/images/shutterstock-434041297.png") !important;
    background-size: cover;
    background-position: center center;
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item .single_features_item_top .icon {
    max-width: 72px;
    width: 72px;
    min-height: 72px;
    line-height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item .single_features_item_top i {
    color: #7fd8c4;
    line-height: 72px;
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item .border_style span:before,
.awesome_services_area .awesome_features .awesome_features_content .single_features_item .border_style span:after {
    background-color: var(--brand-teal);
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item:hover {
    background-color: var(--brand-teal);
    border-color: transparent;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item:hover .icon {
    background: rgba(255, 255, 255, 0.22);
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item:hover i,
.awesome_services_area .awesome_features .awesome_features_content .single_features_item:hover h3,
.awesome_services_area .awesome_features .awesome_features_content .single_features_item:hover p {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------
   Gallery cards
   -------------------------------------------------------------------- */
.latest_project_area .latest_project_block {
    border-radius: 10px;
    overflow: hidden;
    border: 3px solid #ffffff;
    box-shadow: 0 4px 16px rgba(0, 27, 92, 0.16);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.latest_project_area .latest_project_block:hover {
    box-shadow: 0 10px 26px rgba(0, 27, 92, 0.3);
    transform: translateY(-3px);
}
.latest_project_area .latest_project_content_inner:after {
    background-image: none !important;
    background-color: rgba(0, 27, 92, 0.86) !important;
}
.latest_project_area .latest_project_caption h4 {
    color: #ffffff !important;
}
.latest_project_area .latest_project_caption a {
    color: #ffffff !important;
    background: var(--brand-teal);
    width: 42px;
    height: 42px;
    line-height: 42px;
    border-radius: 50%;
    display: inline-block;
}
.latest_project_nav button:hover,
.latest_project_nav button.active {
    background-color: var(--brand-navy) !important;
    color: #ffffff !important;
    border-color: var(--brand-navy) !important;
}

/* --------------------------------------------------------------------
   Video blocks (Videos We Recommended / Important Videos)
   -------------------------------------------------------------------- */
.blockstart {
    border: 3px solid var(--brand-teal) !important;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 27, 92, 0.16);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.blockstart:hover {
    box-shadow: 0 10px 24px rgba(0, 27, 92, 0.3);
    transform: translateY(-3px);
}
.Video_blcok .blocks .greenhead {
    background: var(--brand-navy) !important;
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.Video_blcok .blocks .blockstart span.fa-play {
    color: #ffffff !important;
    background: var(--brand-teal);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    text-align: center;
    line-height: 58px !important;
    font-size: 28px !important;
    margin-top: -29px !important;
    margin-left: -29px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------
   Testimonials (index carousel)
   NOTE: card styling lives on ".testimonial-card" (an inner wrapper),
   never on ".testimonial" itself — that element is the raw owl-carousel
   slide root, and owl v1's width/position math breaks if the slide
   root carries its own margin/padding/border.
   -------------------------------------------------------------------- */
.testimonial-bg {
    background-color: var(--brand-navy) !important;
}
.testimonial-card {
    background: #ffffff;
    margin: 10px 15px 40px;
    padding: 30px 25px 25px;
    border-radius: 12px;
    border-top: 4px solid var(--brand-teal);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}
.testimonial .testimonial-profile img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--brand-teal) !important;
    box-shadow: 0 4px 12px rgba(0, 27, 92, 0.2);
}
.testimonial .testimonial-title a {
    color: var(--brand-navy) !important;
}
.testimonial .testimonial-post:after {
    border-top-color: var(--brand-teal-soft);
}
.testimonial .testimonial-description {
    color: #4a4a4a;
}
.owl-theme .owl-controls .owl-page span {
    background: rgba(255, 255, 255, 0.4) !important;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background: var(--brand-teal) !important;
    border-color: #ffffff !important;
}

/* Testimonials list page (Views/Home/Testimonials.cshtml) */
.container1 {
    background-color: #ffffff !important;
    border: none !important;
    border-left: 5px solid var(--brand-teal) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 27, 92, 0.14);
}
.container1 img {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border: 3px solid var(--brand-teal) !important;
}
.container1 span {
    color: var(--brand-navy) !important;
}

/* --------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------- */
table.table,
table {
    border-radius: 8px;
    overflow: hidden;
}
table thead th,
.table thead th,
th {
    background-color: var(--brand-navy) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: #dde6ea !important;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--brand-teal-soft);
}
.table > tbody > tr:hover {
    background-color: rgba(39, 147, 61, 0.08);
}

/* --------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------- */
.footer_area .footer_top_area {
    background-image: linear-gradient(rgba(0, 27, 92, 0.97), rgba(0, 27, 92, 0.97)), url("/images/shutterstock-434041297.png") !important;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}
.footer_area .footer_top_area .footer_top .widget .widget-title {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}
.footer_area .footer_top_area .footer_top .widget .widget-title:after {
    background-color: var(--brand-teal);
}
.footer_area .footer_top_area .footer_top .widget .widget-content ul li a:hover {
    color: var(--brand-teal);
}
.footer_area .footer_top_area .footer_top .widget.widget_footer_social ul li a:hover {
    background-color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
}
.footer_area .footer_bottom_area {
    background: var(--brand-navy-dark) !important;
}
.footer_area .footer_bottom_area .footer_bottom .footer_copyright a:hover {
    color: var(--brand-teal);
}
.li_w {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

/* --------------------------------------------------------------------
   Misc polish
   -------------------------------------------------------------------- */
.wcs_button {
    background: var(--brand-green) !important;
}
#cookieNotice.light {
    background-color: var(--brand-navy) !important;
    color: #fff !important;
}
#cookieNotice.light p,
#cookieNotice.light ul {
    color: #eaf2ff !important;
}
#cookieNotice .btn-wrap button.btn-primary {
    background: var(--brand-teal) !important;
    color: #fff !important;
}
.our_client_faq_area .fast_faq_area .fast_faq_content .panel-group .panel-default .panel-heading .panel-title a,
.our_client_faq_area .fast_faq_area .fast_faq_content .panel-group .panel-default .panel-heading .panel-title a.collapsed {
    background-color: var(--brand-navy) !important;
}
.our_client_faq_area .fast_faq_area .fast_faq_content .panel-group .panel-default .panel-heading .panel-title a:before,
.our_client_faq_area .fast_faq_area .fast_faq_content .panel-group .panel-default .panel-heading .panel-title a.collapsed:before {
    background-color: var(--brand-teal) !important;
}
.our_client_faq_area .fast_faq_area .fast_faq_content .panel-group .panel-default .panel-body {
    border-color: var(--brand-teal) !important;
}