/* ==========================================================================
   Iqbal Singh Services - Brand Theme
   Palette sampled from the site logo (images/Iqbal_Singh_logo.png)
   Navy  #0A2647  |  Gold #BA903D (sampled from the logo's gold ring)
   Loaded last in _Layout.cshtml so these rules win the cascade.
   ========================================================================== */

:root {
    --brand-navy: #0A2647;
    --brand-navy-dark: #071B33;
    --brand-navy-light: #123A66;
    --brand-gold: #BA903D;
    --brand-gold-dark: #8C6B25;
    --brand-gold-light: #E6C36B;
    --brand-bg-soft: #F5F8FC;
    --brand-border: #E7ECF3;
}

/* ---------- Top utility bar ---------- */
header .header_nav_area {
    background: linear-gradient(135deg, var(--brand-navy), var(--brand-navy-dark));
    border-bottom: 3px solid var(--brand-gold);
}
header .header_nav_area .header_nav .header_nav_block ul li {
    color: #fff;
    border-right-color: rgba(255,255,255,0.22);
}
header .header_nav_area .header_nav .header_nav_block ul li i {
    color: var(--brand-gold-light);
}
header .header_nav_area .header_nav .header_nav_block ul li a:hover,
header .header_nav_area .header_nav .header_nav_block .header_cart a:hover {
    color: var(--brand-gold-light);
}
header .header_nav_area .header_nav .header_nav_block .header_cart a {
    color: #fff;
    border-right-color: rgba(255,255,255,0.22);
}
header .header_nav_area .btn-default {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
    color: #fff;
}

/* ---------- Main header / navigation ---------- */
header .header_top_area {
    border-bottom: 3px solid var(--brand-gold);
    box-shadow: 0 2px 10px rgba(10,38,71,0.08);
}
header .header_top_area .header_top .main_menu_area .main_menu > ul > li > a {
    color: var(--brand-navy);
    font-weight: 600;
}
header .header_top_area .header_top .main_menu_area .main_menu > ul > li > a:hover {
    color: var(--brand-gold);
}
header .header_top_area .header_top .main_menu_area .main_menu > ul > li > ul.dropdown-menu {
    border-top: 3px solid var(--brand-gold);
    box-shadow: 0 10px 25px rgba(10,38,71,0.15);
}
header .header_top_area .header_top .main_menu_area .main_menu > ul > li > ul.dropdown-menu li a {
    color: var(--brand-navy);
}
header .header_top_area .header_top .main_menu_area .main_menu > ul > li > ul.dropdown-menu li a:hover {
    background-color: var(--brand-bg-soft);
    color: var(--brand-gold);
    padding-left: 20px;
}

/* ---------- Header logo ----------
   The logo artwork is a square photo (gold badge on a square gradient
   background), not a transparent-background mark. At its inline width:250px
   it rendered ~245px tall inside an ~90px nav row, leaving a large blank
   gap. Crop it to a circle at a size that matches the nav row instead. */
header .header_top_area .header_top .header_logo {
    margin-top: 0 !important;
}
/* The logo/nav columns are col-*-2 + col-*-9 (11/12, not 12) and the nav
   itself float:right's inside its own column, so a lot of dead space sat
   between the logo and the first menu item. Let the two columns share the
   full row width instead: logo sized to its content, nav takes the rest -
   only above the sm breakpoint, where this horizontal nav is actually shown
   (mobile keeps the original stacked/off-canvas behaviour untouched). */
@media (min-width: 768px) {
    header .header_top_area .header_top .row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    header .header_top_area .header_top .row > div:first-child {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }
    header .header_top_area .header_top .row > div:last-child {
        flex: 0.2 auto;
        width: auto;
        max-width: none;
    }
}
header .header_top_area .header_top .header_logo .logo img {
    width: 70px !important;
    height: 70px !important;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(10,38,71,0.25);
}
.footer_area .footer_top_area .footer_top .widget_footer_contact_info > a > img {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover;
    border-radius: 50% !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}

/* ---------- Section titles ---------- */
.page_title_area h2 {
    color: var(--brand-navy);
}
.page_title_area h2:before,
.page_title_area h2:after,
.page_title_area h2 span {
    background-color: var(--brand-gold);
}
.page_title_area h2 span {
    color: var(--brand-gold);
    background-color: transparent;
}
.page_title_area.page_title_white h2 {
    color: #fff;
}
.page_title_area.page_title_white h2 span {
    color: var(--brand-gold-light);
}

/* ---------- Breadcrumb / inner page banner ---------- */
.page_breadcrumb_area {
    position: relative;
}
.page_breadcrumb_area:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,38,71,0.90), rgba(10,38,71,0.72));
}
.page_breadcrumb_area .page_breadcrumb_inner {
    position: relative;
    z-index: 1;
}
.page_breadcrumb_area .page_breadcrumb_inner .page_breadcrumb_title h2 {
    color: #fff;
}
.page_breadcrumb_area .page_breadcrumb_inner .page_breadcrumb_title h2 .trail-item {
    color: var(--brand-gold-light);
}
.page_breadcrumb_area .breadcrumb_area .breadcrumbs ul li > a,
.page_breadcrumb_area .breadcrumb_area .breadcrumbs ul li > span {
    color: var(--brand-gold-light);
}
.page_breadcrumb_area .breadcrumb_area .breadcrumbs ul li > a:hover {
    color: #fff;
}

/* ---------- About us ---------- */
.about_us_area {
    background: #fff;
}
.about_us_area .about_img img,
.about_img img {
    border-color: var(--brand-navy) var(--brand-gold) var(--brand-gold) var(--brand-navy) !important;
    box-shadow: 0 15px 35px rgba(10,38,71,0.18) !important;
    transition: transform .35s ease;
}
.about_us_area .about_img img:hover,
.about_img img:hover {
    transform: translateY(-4px);
}
.about_us_area .more_btn .btn-default {
    letter-spacing: .5px;
}

/* ---------- What we do / other services ---------- */
.awesome_services_area .awesome_features .awesome_features_content .single_features_item {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item .single_features_item_top i {
    color: var(--brand-gold-light);
}
.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-gold);
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item:hover {
    background-color: var(--brand-gold);
    color: var(--brand-navy-dark);
}
.awesome_services_area .awesome_features .awesome_features_content .single_features_item:hover .icon,
.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: var(--brand-navy-dark);
}

/* ---------- Our Gallery ---------- */
.latest_project_area .latest_project_filter .latest_project_content .latest_project_block .latest_project_content_inner,
.latest_project_area .latest_project .latest_project_filter .latest_project_content .latest_project_block .latest_project_content_inner {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(10,38,71,0.12);
    transition: transform .35s ease, box-shadow .35s ease;
}
.latest_project_area .latest_project .latest_project_filter .latest_project_content .latest_project_block .latest_project_content_inner:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(10,38,71,0.22);
}
.latest_project_area .latest_project .latest_project_filter .latest_project_content .latest_project_block .latest_project_content_inner:after {
    background: linear-gradient(135deg, rgba(10,38,71,0.90), rgba(242,103,10,0.85));
}
.latest_project_area .latest_project .latest_project_filter .latest_project_content .latest_project_block .latest_project_content_inner .latest_project_caption h4,
.latest_project_area .latest_project .latest_project_filter .latest_project_content .latest_project_block .latest_project_content_inner .latest_project_caption a {
    color: #fff;
}
.latest_project_area .latest_project .latest_project_filter .latest_project_content .latest_project_block .latest_project_content_inner .latest_project_caption a {
    width: 42px;
    height: 42px;
    line-height: 40px;
    border-radius: 50%;
    border: 2px solid #fff;
}
.latest_project_area .latest_project .latest_project_filter .latest_project_content .latest_project_block .latest_project_content_inner .latest_project_caption a:hover {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
}
.latest_project_area .latest_project .latest_project_filter .latest_project_nav button:hover,
.latest_project_area .latest_project .latest_project_filter .latest_project_nav button.active {
    background-color: var(--brand-navy);
    color: var(--brand-gold-light);
    border-color: var(--brand-navy);
}

/* ---------- Videos we recommended ---------- */
.Video_blcok .blocks .blockstart {
    border: 1px solid var(--brand-border) !important;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(10,38,71,0.10);
    transition: transform .3s ease, box-shadow .3s ease;
    background: #fff;
}
.Video_blcok .blocks .blockstart:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 28px rgba(10,38,71,0.20);
}
.Video_blcok .blocks .blockstart span.fa-play {
    color: #fff !important;
    background: var(--brand-gold);
    border-radius: 50%;
    width: 58px !important;
    height: 58px !important;
    line-height: 58px !important;
    font-size: 26px !important;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.Video_blcok .blocks .greenhead {
    background: var(--brand-navy) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .3px;
}

/* ---------- Testimonials (index carousel) ---------- */
.testimonial-bg {
    background: linear-gradient(to top, var(--brand-navy), #eff2f4) !important;
}
#testimonial-slider .testimonial {
    background: #fff;
    border-radius: 10px;
    padding: 30px 20px 20px;
    margin: 10px 12px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.testimonial .testimonial-profile img {
    border: 3px solid var(--brand-gold);
    border-radius: 50%;
    padding: 3px;
}
.testimonial .testimonial-title a {
    color: var(--brand-navy) !important;
    font-weight: 700;
}
.testimonial .testimonial-post:after {
    border-top-color: var(--brand-gold);
    width: 46px;
    margin: 10px auto;
}
.testimonial .testimonial-description {
    color: #444 !important;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background: var(--brand-gold) !important;
    border-color: #fff;
}

/* ---------- Testimonials (dedicated page cards) ---------- */
.container1 {
    background-color: #fff !important;
    border: 1px solid var(--brand-border) !important;
    border-left: 4px solid var(--brand-gold) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(10,38,71,0.10);
    transition: transform .3s ease, box-shadow .3s ease;
}
.container1:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(10,38,71,0.16);
}
.container1 img {
    border: 3px solid var(--brand-gold);
    padding: 2px;
}
.container1 span {
    color: var(--brand-navy) !important;
}

/* ---------- Buttons ---------- */
.btn-default {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
    color: #fff !important;
    transition: all .3s ease;
}
.btn-default:hover,
.btn-default:focus {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
}
.btn-primary {
    background-color: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}

/* ---------- Footer ---------- */
.footer_area .footer_top_area {
    position: relative;
    background-color: var(--brand-navy-dark);
}
.footer_area .footer_top_area:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(10,38,71,0.94), rgba(7,27,51,0.97));
}
.footer_area .footer_top_area .footer_top {
    position: relative;
    z-index: 1;
}
.footer_area .footer_top_area .footer_top .widget .widget-title:after {
    background-color: var(--brand-gold);
}
.footer_area .footer_top_area .footer_top .widget .widget-content ul li a:hover {
    color: var(--brand-gold-light);
}
.footer_area .footer_top_area .footer_top .widget.widget_footer_social ul li a:hover {
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
}
.footer_area .footer_top_area .footer_top .widget.widget_our_work .widget-content ul li h6 a:hover {
    color: var(--brand-gold-light);
}
.footer_area .footer_bottom_area {
    position: relative;
    background-color: var(--brand-navy-dark);
}
.footer_area .footer_bottom_area:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(7,27,51,0.96), rgba(10,38,71,0.9));
}
.footer_area .footer_bottom_area .footer_bottom {
    position: relative;
    z-index: 1;
}
.footer_area .footer_bottom_area .footer_bottom .footer_copyright a {
    color: var(--brand-gold-light);
}
.footer_area .footer_bottom_area .footer_bottom .btn-default {
    background-color: transparent !important;
    border-color: rgba(255,255,255,0.4) !important;
    color: #fff !important;
}
.footer_area .footer_bottom_area .footer_bottom .btn-default:hover {
    background-color: var(--brand-gold) !important;
    border-color: var(--brand-gold) !important;
}
.li_w {
    border-color: rgba(255,255,255,0.35) !important;
}
.li_w a.lang-select:hover {
    color: var(--brand-gold-light) !important;
}

/* ---------- FAQ accordion ---------- */
.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);
}
.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-gold);
}
.our_client_faq_area .fast_faq_area .fast_faq_content .panel-group .panel-default .panel-body {
    border-color: var(--brand-gold);
}

/* ---------- Tables (site-wide) ---------- */
/* Scoped to real data tables (.table, .dataTable, th cells) so the
   decorative border=0 layout tables used for popups/graphics are untouched. */
th {
    background: var(--brand-navy) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: .3px;
    border-color: var(--brand-navy) !important;
}
.table, table.dataTable {
    box-shadow: 0 2px 10px rgba(10,38,71,0.08);
    border-radius: 6px;
    overflow: hidden;
}
.table tbody tr:nth-child(even),
.table-striped > tbody > tr:nth-of-type(odd),
table.dataTable tbody tr:nth-child(even) {
    background-color: var(--brand-bg-soft);
}
.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: #FDECDD;
}
.table td, .table th,
table.dataTable td, table.dataTable th {
    border-color: var(--brand-border) !important;
    padding: 10px 14px;
    vertical-align: middle;
}
.dataTables_wrapper .dataTables_filter input:focus,
.form-control:focus {
    border-color: var(--brand-gold) !important;
    box-shadow: 0 0 0 3px rgba(242,103,10,0.15) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
    color: #fff !important;
}

/* ---------- Responsive tweaks ---------- */
@media only screen and (max-width: 767px) {
    #testimonial-slider .testimonial {
        margin: 10px 4px 24px;
    }
}