/* =========================================================
   ASIANEW MATERIAL — CUSTOM OVERRIDES
   Loaded AFTER style.css and responsive.css so these win.
   ========================================================= */

/* --- Google Font: Open Sans --- */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* --- CSS variables (brand colors) --- */
:root {
    --asianew-blue: #0b3b9c;
    --asianew-blue-dark: #082c74;
    --asianew-yellow: #ffd84d;
}

/* =========================================================
   1. FONT — Open Sans everywhere
   ========================================================= */
html, body,
p, span, a, li, div, label, small, strong, em,
h1, h2, h3, h4, h5, h6,
button, input, textarea, select, option,
.atf-nav-list li a,
.sub-menu li a,
.section-title, .hero-title, .title,
.describtion, .description, .sub-title,
.atf-themes-btn span,
.breadcrumb-title, .breadcrumb-sub-title,
.atf-copyright-text p,
.atf-single-footer h3,
.atf-list-menu li a,
.post-title, .testimonial-title,
.counter-number, .counter-title,
.atf-section-title h2, .atf-section-title span,
.card-header button,
.card-body p {
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
}

body {
    font-weight: 400;
    letter-spacing: 0.01em;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

/* =========================================================
   2. HIDE removed elements
   ========================================================= */
.atf-top-header { display: none !important; }
#back_to_top { display: none !important; }

/* Nuke the template's white skew shape, just in case */
.atf_bg_skew::after,
.atf_bg_skew::before {
    display: none !important;
    content: none !important;
}

/* =========================================================
   3. MENU — Blue bg + white text in BOTH default & sticky states
   ========================================================= */

/* Base header */
.atf-site-header,
.atf-site-header.atf-style1,
.atf-site-header.atf-sticky-header,
header.atf-header-area .atf-site-header {
    background: var(--asianew-blue) !important;
    background-color: var(--asianew-blue) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Sticky state (added by JS on scroll) — keep blue! */
.atf-site-header.atf-style1.atf-sticky-active,
.atf-site-header.atf-sticky-active,
.atf-sticky-active {
    background: var(--asianew-blue) !important;
    background-color: var(--asianew-blue) !important;
    color: #ffffff !important;
}

/* Logo: always show white logo (both default & sticky) */
.atf-site-header .atf-site-logo .logo-white { display: block !important; }
.atf-site-header .atf-site-logo .logo-black { display: none !important; }
.atf-site-header.atf-style1.atf-sticky-active .atf-site-logo .logo-white { display: block !important; }
.atf-site-header.atf-style1.atf-sticky-active .atf-site-logo .logo-black { display: none !important; }

/* Nav menu links: white in BOTH states */
.atf-main-menu > nav > ul > li > a,
.atf-main-menu .atf-nav > ul > li > a,
.atf-nav-list > li > a,
.atf-site-header.atf-style1.atf-sticky-active .atf-main-menu > nav > ul > li > a,
.atf-site-header.atf-style1.atf-sticky-active .atf-nav-list > li > a {
    color: #ffffff !important;
}

/* Hover / active — yellow for contrast on blue */
.atf-main-menu > nav > ul > li > a:hover,
.atf-main-menu > nav > ul > li > a:focus,
.atf-main-menu > nav > ul > li > a:active,
.atf-main-menu > nav > ul > li.active > a,
.atf-nav-list > li:hover > a,
.atf-nav-list > li.active > a {
    color: var(--asianew-yellow) !important;
}

/* Submenu — white card with dark text */
.atf-main-menu > nav > ul > li .sub-menu {
    background: #ffffff !important;
    border-top: 3px solid var(--asianew-yellow) !important;
}
.atf-main-menu > nav > ul > li .sub-menu li a,
.atf-nav-list .sub-menu li a {
    color: #222222 !important;
    padding: 8px 20px !important;
}
.atf-main-menu > nav > ul > li .sub-menu li a:hover,
.atf-nav-list .sub-menu li:hover > a {
    color: var(--asianew-blue) !important;
    background: #f2f5ff !important;
}

/* Header right-side icons — white */
.atf-header-bottom-right .atf-searching-btn i,
.atf-searching-btn.style1 i,
.atf-main-menu-bars .atf-hamburger-toogle i {
    color: #ffffff !important;
}
.atf-header-bottom-right .atf-searching-btn {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* "Request Quote" CTA — yellow on blue */
.atf-header-bottom-right .atf-themes-btn {
    background: var(--asianew-yellow) !important;
    border-color: var(--asianew-yellow) !important;
    color: var(--asianew-blue) !important;
}
.atf-header-bottom-right .atf-themes-btn span {
    color: var(--asianew-blue) !important;
    font-weight: 600 !important;
}
.atf-header-bottom-right .atf-themes-btn:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
}
.atf-header-bottom-right .atf-themes-btn:hover span {
    color: var(--asianew-blue) !important;
}

/* Logo container */
.atf-site-logo { background: transparent !important; }

/* =========================================================
   4. FOOTER — 5 equal columns
   ========================================================= */
#footer .row.pt-120 > [class*="col-lg-"],
#footer .row.pt-120 > .col-lg-3 {
    flex: 0 0 auto;
    width: 20% !important;
    max-width: 20% !important;
}
@media (max-width: 1199px) {
    #footer .row.pt-120 > [class*="col-lg-"] {
        width: 50% !important;
        max-width: 50% !important;
        margin-bottom: 30px;
    }
}
@media (max-width: 767px) {
    #footer .row.pt-120 > [class*="col-lg-"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

#footer .atf-single-footer h3.title {
    font-size: 17px !important;
    margin-bottom: 18px !important;
    color: #ffffff !important;
}
#footer .atf-single-footer .atf-list-menu li a {
    font-size: 14px !important;
}
#footer .atf-single-footer.ps-lg-5 {
    padding-left: 0 !important;
}

/* Dark overlay on footer bg image for text readability */
#footer {
    position: relative;
}
#footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 60, 0.88);
    z-index: 1;
}
#footer > .container {
    position: relative;
    z-index: 2;
}

/* =========================================================
   5. HERO — tighten after top header removal
   ========================================================= */
.atf-hero-content.pt-180 {
    padding-top: 120px !important;
}
.atf-hero-content.pb-180 {
    padding-bottom: 120px !important;
}

/* =========================================================
   6. BREADCRUMB polish
   ========================================================= */
.breadcrumb-area {
    position: relative;
}
.breadcrumb-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 25, 60, 0.6);
    z-index: 1;
}
.breadcrumb-area .container {
    position: relative;
    z-index: 2;
}
.breadcrumb-title,
.breadcrumb-single-content span,
.breadcrumb-single-content a {
    color: #ffffff !important;
}

/* Sticky header — stay fixed on scroll */
.atf-site-header.atf-style1.atf-sticky-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 990;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   7. Defensive — hide any broken <img> that slipped through
   ========================================================= */
img[src=""],
img:not([src]),
img[src="#"] {
    display: none !important;
}

/* Make sure the hero section is visible even if bg image fails */
#hero.atf-hero-area {
    background-color: #1a3a6e;  /* fallback dark blue */
    background-size: cover;
    background-position: center;
}

/* =========================================================
   8. LOGO — size for header + footer
   ========================================================= */
.atf-site-logo img,
.atf-site-logo .logo-white,
.atf-site-logo .logo-black {
    max-height: 44px;
    width: auto;
    height: auto;
}
.footer-logo img {
    max-height: 44px;
    width: auto;
}

/* =========================================================
   9. SERVICE SLIDER — uniform image sizes at homepage
   ========================================================= */
.atf__service_slider_active .atf-single-service {
    margin: 0 8px;
}
.atf__service_slider_active .atf-service-thumb {
    overflow: hidden;
    border-radius: 8px;
}
.atf__service_slider_active .atf-service-thumb img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* Slick list alignment */
.slick-list {
    margin: 0 -8px;
}
.slick-slide > div {
    display: flex;
    height: 100%;
}

/* Also apply uniform sizing to product page cards so they look tidy */
.atf-single-service.style1 .atf-service-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Gallery images — uniform sizes */
.atf_single_gallery img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.atf-gallery-area .col-xl-12 .atf_single_gallery img {
    height: 380px;
}
.atf-gallery-area .col-xl-6 .atf_single_gallery img {
    height: 280px;
}

/* =========================================================
   10. WHY CHOOSE US — prominent icons (after image removed)
   ========================================================= */
#choose .atf-single-choose {
    background: #ffffff;
    padding: 30px 25px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(10, 25, 60, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
#choose .atf-single-choose:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(10, 25, 60, 0.14);
}
#choose .atf-choose-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;
    background: var(--asianew-blue);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    font-size: 28px;
    transition: background 0.3s;
}
#choose .atf-single-choose:hover .atf-choose-icon {
    background: var(--asianew-yellow);
    color: var(--asianew-blue);
}
#choose .atf-choose-icon i {
    color: inherit !important;
    font-size: 28px;
}
#choose .atf-choose-content h3.title a {
    color: #0e2a5c !important;
}
#choose .atf-choose-content h3.title a:hover {
    color: var(--asianew-blue) !important;
}

/* =========================================================
   11. Safety — hide any orphaned iframes from removed videos
   ========================================================= */
.hero_round_image,
.choose_round_image {
    display: none !important;  /* these wrapped the removed video links */
}

/* =========================================================
   12. MENU SUBMENU ARROW — pure CSS triangle (font-independent)
   Replaces the \f107 chevron that depends on Font Awesome Pro.
   ========================================================= */
/* Remove the original font-based arrow */
.atf-main-menu > nav > ul > li.menu-item-children > a::after,
.atf-nav-list > li.menu-item-children > a::after {
    content: "" !important;
    font-family: inherit !important;
    font-weight: normal !important;
    display: inline-block !important;
    vertical-align: middle !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 8px !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 5px solid currentColor !important;
    transition: transform 0.3s ease !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
/* Rotate on hover */
.atf-main-menu > nav > ul > li.menu-item-children:hover > a::after,
.atf-nav-list > li.menu-item-children:hover > a::after {
    transform: rotate(180deg) !important;
}

/* =========================================================
   13. REQUEST QUOTE BUTTON — professional Open Sans styling
   ========================================================= */
.atf-header-bottom-right .atf-themes-btn,
.atf-header-bottom-right a.atf-themes-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 22px !important;
    background: var(--asianew-yellow) !important;
    border: 2px solid var(--asianew-yellow) !important;
    border-radius: 6px !important;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    color: var(--asianew-blue) !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    height: 42px !important;
    min-width: 140px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}
.atf-header-bottom-right .atf-themes-btn span {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    text-transform: uppercase !important;
    color: var(--asianew-blue) !important;
    line-height: 1 !important;
    padding: 0 !important;
    background: transparent !important;
}
.atf-header-bottom-right .atf-themes-btn:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.atf-header-bottom-right .atf-themes-btn:hover span {
    color: var(--asianew-blue) !important;
}
/* Tidy alignment in header-right area */
.atf-header-bottom-right {
    gap: 14px;
}

/* =========================================================
   14. FOOTER — email block cleanup (no background)
   ========================================================= */
.atf-footer-widget-mail {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 0;
}
.atf-footer-widget-mail p {
    margin-bottom: 0;
    color: #e6ecf5;
}
.atf-footer-widget-mail span {
    background: transparent !important;
    color: var(--asianew-yellow) !important;
}

/* =========================================================
   15. HOMEPAGE — cleaner service slider after icon removal
   ========================================================= */
.atf__service_slider_active .atf-service-img {
    overflow: hidden;
    border-radius: 8px;
}
.atf__service_slider_active .atf-single-service .atf-service-content {
    padding: 20px 15px 0;
}

/* =========================================================
   16. Hide any remaining template shapes / decorative imgs
   ========================================================= */
.hero-shape-1, .hero-shape-2,
.hero-frame {
    display: none !important;
}

/* =========================================================
   17. FONT AWESOME — make sure icons render at a sensible size
   ========================================================= */
/* Ensure FA icons inherit size from their container, with a minimum */
.atf-about-icon i,
.atf-service-icon i,
.atf-choose-icon i,
.atf-contact-icon i,
.service-sidebar-icon i,
.atf-footer-widget-info i,
.atf-footer-widget-mail i,
.atf-top-header-in i,
.atf-hamburger-info i {
    font-size: 1.2em;
    line-height: 1;
    display: inline-block;
}

/* If an icon fails to load (font swap issue), at least the container shows */
.atf-about-icon, .atf-service-icon, .atf-choose-icon,
.atf-contact-icon, .service-sidebar-icon {
    min-width: 42px;
    min-height: 42px;
}

/* =========================================================
   18. SERVICE/PRODUCT CARD — icon alignment (matches screenshots)
   Design: blue circle icon overlapping the bottom-center of image,
   with the card content starting below with enough top padding.
   ========================================================= */

/* Card wrapper — consistent height + rounded look */
.atf-single-service.style1 {
    background: transparent;
    border-radius: 12px;
    padding-bottom: 28px;
    height: 100%;
    box-shadow: 0 2px 12px rgba(10, 25, 60, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.atf-single-service.style1:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(10, 25, 60, 0.14);
}

/* Image wrapper — give it breathing room for the overlapping icon */
.atf-single-service.style1 .atf-service-img {
    position: relative;
    overflow: visible;
    padding-bottom: 35px;
}

.atf-single-service.style1 .atf-service-thumb {
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    position: relative;
}
.atf-single-service.style1 .atf-service-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.4s ease;
}
.atf-single-service.style1:hover .atf-service-thumb img {
    transform: scale(1.05);
}

/* The blue circle icon — overlapping half on image, half off */
.atf-single-service.style1 .atf-service-icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 66px;
    height: 66px;
    background: #ffffff;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 4px 12px rgba(10, 25, 60, 0.15);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
}
/* Inner blue disc with the icon */
.atf-single-service.style1 .atf-service-icon i {
    width: 56px;
    height: 56px;
    background: var(--asianew-blue);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #ffffff !important;
    line-height: 1;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Content below the icon — push down enough so text doesn't collide */
.atf-single-service.style1 .atf-service-content {
    padding: 18px 20px 0;
    text-align: center;
}
.atf-single-service.style1 .atf-service-content .title {
    font-size: 20px;
    margin-bottom: 10px;
}
.atf-single-service.style1 .atf-service-content .title a {
    color: #0e2a5c !important;
    text-decoration: none;
}
.atf-single-service.style1 .atf-service-content .title a:hover {
    color: var(--asianew-blue) !important;
}
.atf-single-service.style1 .atf-service-content .describtion {
    color: #4a5b7a;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Apply similar treatment to homepage slider cards */
.atf__service_slider_active .atf-single-service {
    background: transparent;
    border-radius: 12px;
    padding-bottom: 28px;
    margin: 0 10px;
}
.atf__service_slider_active .atf-service-thumb {
    border-radius: 12px 12px 0 0;
}
.atf__service_slider_active .atf-service-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}
.atf__service_slider_active .atf-service-content {
    padding: 20px 20px 0;
}

/* =========================================================
   19. FOOTER menu items — tighter spacing
   ========================================================= */
#footer .atf-single-footer .atf-list-menu li,
#footer .atf-list-menu li {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#footer .atf-single-footer .atf-list-menu li a {
    padding: 3px 0;
    display: inline-block;
    line-height: 1.5;
}

/* =========================================================
   20. Hide broken duplicate img (2nd img in thumb)
   Template uses 2 imgs for hover swap — with same src it's redundant.
   Hide the second one to prevent rendering glitches.
   ========================================================= */
.atf-service-thumb img + img {
    display: none;
}

/* =========================================================
   21. Contact form — make sure it looks good now that map is gone
   ========================================================= */
#contact .atf-contact-form,
.contact-area .atf-contact-form {
    background: #f5f8ff;
    border-radius: 12px;
    padding: 30px 30px;
}

/* =========================================================
   22. FINAL OVERRIDES — from latest amendment batch
   ========================================================= */

/* --- Service / Product cards: NO white background, just clean card --- */
.atf-single-service.style1,
.atf__service_slider_active .atf-single-service,
.atf-single-service {
    background: transparent !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
}

/* Re-add a subtle border/shadow only on hover for interaction feedback */
.atf-single-service.style1:hover,
.atf__service_slider_active .atf-single-service:hover {
    background: transparent !important;
    transform: translateY(-4px);
    box-shadow: none !important;
}

/* Image: simple rounded corners, uniform height */
.atf-single-service.style1 .atf-service-thumb,
.atf__service_slider_active .atf-service-thumb {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(10, 25, 60, 0.08);
}
.atf-single-service.style1 .atf-service-thumb img,
.atf__service_slider_active .atf-service-thumb img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Card content — simple, centered, no box */
.atf-single-service.style1 .atf-service-content,
.atf__service_slider_active .atf-service-content {
    padding: 30px 15px 10px !important;
    background: transparent !important;
    text-align: center;
}

/* Icon position: bottom center of image, half overlapping */
.atf-single-service.style1 .atf-service-icon,
.atf__service_slider_active .atf-service-icon {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    padding: 0;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(10, 25, 60, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.atf-single-service.style1 .atf-service-icon i,
.atf__service_slider_active .atf-service-icon i {
    width: 50px;
    height: 50px;
    background: var(--asianew-blue) !important;
    color: #ffffff !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

/* Give the whole image wrapper room so the icon doesn't clip */
.atf-single-service.style1 .atf-service-img,
.atf__service_slider_active .atf-service-img {
    position: relative;
    padding-bottom: 30px;
    overflow: visible;
}

/* =========================================================
   23. FOOTER menu li spacing — tight to 0
   ========================================================= */
#footer ul.atf-list-menu {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
}
#footer ul.atf-list-menu li {
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}
#footer ul.atf-list-menu li a {
    padding: 2px 0 !important;
    margin: 0 !important;
    display: inline-block;
    line-height: 1.4 !important;
}

/* =========================================================
   24. CONTACT form — cleaner alignment
   ========================================================= */
.atf-contact-area .atf-contact-form {
    background: #f5f8ff !important;
    border: 1px solid #e4ecff;
    border-radius: 12px;
    padding: 35px 35px !important;
}
.atf-contact-area .atf_contact_input {
    margin-bottom: 15px;
}
.atf-contact-area .atf_contact_input input,
.atf-contact-area .atf_contact_input textarea,
.atf-contact-area .atf_contact_input select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d9e1ef;
    border-radius: 8px;
    background: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color: #333;
    transition: border-color 0.2s ease;
}
.atf-contact-area .atf_contact_input input:focus,
.atf-contact-area .atf_contact_input textarea:focus,
.atf-contact-area .atf_contact_input select:focus {
    outline: none;
    border-color: var(--asianew-blue);
    box-shadow: 0 0 0 3px rgba(11, 59, 156, 0.08);
}
.atf-contact-area .atf-contact-btn {
    margin-top: 20px;
    padding: 0 !important;
}
.atf-contact-area .atf-contact-btn button.atf-themes-btn {
    background: var(--asianew-blue);
    color: #ffffff;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.25s ease;
}
.atf-contact-area .atf-contact-btn button.atf-themes-btn:hover {
    background: var(--asianew-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11, 59, 156, 0.25);
}
.atf-contact-area .atf-contact-btn button.atf-themes-btn span {
    color: #ffffff !important;
}