/*
Theme Name: Automate It Theme
Theme URI: https://github.com/Ravikant-1811/advanced-custom-fields-pro.git
Author: Ravikant Upadhyay
Author URI: https://github.com/Ravikant-1811
Description: Custom WordPress theme based on Protekt HTML template, fully integrated with Advanced Custom Fields (ACF) Pro.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: automate-it-theme
*/
/* Header: transparent background overlaying hero image */
header.main-header {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

header.main-header .header-sticky {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

header.main-header .header-sticky.active {
    background: rgba(1, 5, 53, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Top Level Navigation Link Visibility Rules (Excludes Submenu Items) */
.main-header .navbar-nav > li > .nav-link,
.main-header .main-menu .nav-menu-wrapper > ul > li > a,
.main-header .main-menu ul > li > a:not(.elementor-sub-item),
header.main-header .main-menu ul > li > a:not(.elementor-sub-item),
.nav-menu-wrapper > ul > li > a,
.elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item,
ul.elementor-nav-menu > li > a:not(.elementor-sub-item) {
    color: #FFFFFF !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.main-header .navbar-nav > li > .nav-link:hover,
.main-header .main-menu ul > li > a:not(.elementor-sub-item):hover,
.elementor-nav-menu--main > ul.elementor-nav-menu > li > a.elementor-item:hover {
    color: #40e4e9 !important;
}

/* Active / Current Page Item Highlight */
.main-header .navbar-nav .nav-item.active > .nav-link,
.main-header .navbar-nav .current-menu-item > .nav-link,
.elementor-nav-menu--main > ul.elementor-nav-menu > li.current-menu-item > a.elementor-item {
    color: #e6220d !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   DROPDOWN SUBMENU STYLING (Dark Navy Text on Clean White Background)
   ========================================================================== */

.main-menu ul ul,
ul.sub-menu,
.elementor-nav-menu--dropdown,
ul.elementor-nav-menu--dropdown,
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 10px 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.main-menu ul ul li,
ul.sub-menu li,
.elementor-nav-menu--dropdown li {
    background-color: transparent !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.main-menu ul ul li a,
ul.sub-menu li a,
.elementor-nav-menu--dropdown a,
.elementor-nav-menu--dropdown a.elementor-sub-item,
a.elementor-sub-item,
.elementor-sub-item {
    color: #010535 !important;
    -webkit-text-fill-color: #010535 !important;
    background-color: transparent !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    padding: 10px 20px !important;
    text-shadow: none !important;
    display: block !important;
    transition: all 0.2s ease-in-out !important;
    border-radius: 0 !important;
}

/* Dropdown Hover State */
.main-menu ul ul li a:hover,
.main-menu ul ul li a:focus,
ul.sub-menu li a:hover,
.elementor-nav-menu--dropdown a:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item:hover,
a.elementor-sub-item:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item.elementor-item-active {
    color: #3662CC !important;
    -webkit-text-fill-color: #3662CC !important;
    background-color: #F3F6FC !important;
    background: #F3F6FC !important;
    text-shadow: none !important;
}

/* Fix breadcrumb divider to prevent external URL display */
.breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    color: var(--white-color) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* ==========================================================================
   BRAND COLOR SPECIFICATIONS
   Cyan Accent (#40e4e9) -> Buttons & Interactive CTA Controls
   Vivid Red (#e6220d) -> Highlighted Text & Subtitles
   White (#FFFFFF) & Black (#000000) -> Base Typography & Contrast
   ========================================================================== */

/* 1. BUTTON STYLES (#40e4e9 background with dark high-contrast text) */
.btn-default,
.btn-highlighted,
.btn-primary,
/* ==========================================================================
   UNIFIED GLOBAL BUTTON STYLING (CYAN BASE -> WHITE HOVER WITH DARK BLUE TEXT)
   ========================================================================== */

/* Base Button State: Cyan #40e4e9 background, Dark Blue #010535 text */
.btn-default,
.btn-highlighted,
.btn-primary,
.btn-secondary,
.header-btn .btn-default,
.contact-form-btn button,
.footer-newsletter-form button,
.contact-us-btn .btn-default,
.hero-shot-btn,
.hero-shot-primary,
.section-btn .btn-default,
.elementor-button,
a.elementor-button,
button.elementor-button,
input[type="submit"],
button[type="submit"],
a.btn-default {
    background-color: #40e4e9 !important;
    background: #40e4e9 !important;
    color: #010535 !important;
    border-color: #40e4e9 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 15px rgba(64, 228, 233, 0.25) !important;
}

/* White Arrow / Icon inside base buttons */
.btn-default i,
.btn-default svg,
.btn-highlighted i,
.btn-primary i,
.header-btn .btn-default i,
.hero-shot-btn i,
.hero-shot-primary i,
.elementor-button i,
.btn-default .arrow-icon i {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Hover Button State: Pure White #FFFFFF background, Dark Blue #010535 text */
.btn-default:hover,
.btn-default:focus,
.btn-highlighted:hover,
.btn-highlighted:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-secondary:hover,
.header-btn .btn-default:hover,
.contact-form-btn button:hover,
.footer-newsletter-form button:hover,
.contact-us-btn .btn-default:hover,
.hero-shot-btn:hover,
.hero-shot-primary:hover,
.section-btn .btn-default:hover,
.elementor-button:hover,
a.elementor-button:hover,
button.elementor-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
a.btn-default:hover {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    color: #010535 !important;
    border-color: #FFFFFF !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Dark Blue Arrow / Icon inside hovered buttons */
.btn-default:hover i,
.btn-default:hover svg,
.btn-highlighted:hover i,
.btn-primary:hover i,
.header-btn .btn-default:hover i,
.hero-shot-btn:hover i,
.hero-shot-primary:hover i,
.elementor-button:hover i {
    color: #010535 !important;
    fill: #010535 !important;
}

/* Outline Buttons */
.btn-outline-primary,
.hero-shot-secondary {
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    background: transparent !important;
    border-radius: 30px !important;
}
.btn-outline-primary:hover,
.hero-shot-secondary:hover {
    background-color: #FFFFFF !important;
    color: #010535 !important;
    border-color: #FFFFFF !important;
}

/* 2. HIGHLIGHTED TEXT & SUBTITLES (#40e4e9 Cyan Blue) */
.text-highlight,
.highlight-text,
.section-sub-title,
span.highlight,
.text-anime-style-3 span,
.elementor-button-link.highlight,
.footer-links h2,
.footer-contact-item a,
.post-meta i,
.section-sub-title h3,
.section-title h3 {
    color: #40e4e9 !important;
}

/* Subtitle Badges */
.section-sub-title {
    color: #40e4e9 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* ==========================================================================
   HEADER NAVIGATION HOVER & ACTIVE STYLING (NO WHITE BOX OVERLAYS)
   ========================================================================== */

/* Top-level menu links - transparent background on all states */
.main-header .main-menu > ul > li > a,
.main-header .navbar-nav > li > a,
.main-header .nav-menu-wrapper > ul > li > a,
.elementor-nav-menu--main > ul > li > a.elementor-item,
.main-header .main-menu ul > li > a:hover,
.main-header .main-menu ul > li > a:focus,
.main-header .main-menu ul > li > a:active,
.main-header .navbar-nav > li > a:hover,
.main-header .navbar-nav > li > a:focus,
.main-header .navbar-nav > li > a:active,
.main-header .navbar-nav .nav-item.active > .nav-link,
.main-header .navbar-nav .current-menu-item > .nav-link,
.main-header .main-menu ul > li.current-menu-item > a,
.main-header .main-menu ul > li.current-menu-ancestor > a,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .current-menu-item > a.elementor-item {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Top-level hover state - Cyan (#40e4e9) */
.main-header .main-menu > ul > li > a:hover,
.main-header .navbar-nav > li > a:hover,
.main-header .nav-menu-wrapper > ul > li > a:hover,
.elementor-nav-menu--main > ul > li > a.elementor-item:hover {
    color: #40e4e9 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Top-level active state - Vivid Red (#e6220d) */
.main-header .navbar-nav .nav-item.active > .nav-link,
.main-header .navbar-nav .current-menu-item > .nav-link,
.main-header .main-menu ul > li.current-menu-item > a,
.main-header .main-menu ul > li.current-menu-ancestor > a,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .current-menu-item > a.elementor-item {
    color: #e6220d !important;
    font-weight: 600 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Submenu Dropdowns - White Card with Dark Navy Text */
.main-header .main-menu ul ul,
.elementor-nav-menu--dropdown {
    background-color: #FFFFFF !important;
    background: #FFFFFF !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    padding: 10px 0 !important;
}

.main-header .main-menu ul ul li a,
.elementor-sub-item {
    color: #010535 !important;
    background: transparent !important;
}

.main-header .main-menu ul ul li a:hover,
.elementor-sub-item:hover {
    color: #e6220d !important;
    background-color: rgba(64, 228, 233, 0.08) !important;
}

/* 3. UNIFORM BRIGHTER TECH NAVY DARK BACKGROUNDS WITH CIRCUIT PATTERN */
.dark-section,
header.main-header .header-sticky.active,
.elementor-section.dark-section,
.dark-bg,
.bg-dark,
.why-choose-us,
.cta-section {
    position: relative !important;
    background-color: #0c1b46 !important;
    background-image: linear-gradient(135deg, rgba(11, 26, 64, 0.90) 0%, rgba(20, 42, 99, 0.94) 100%), url('images/dark-section-bg-image.png') !important;
    background-repeat: repeat !important;
}

.main-footer {
    position: relative !important;
    background-color: #0c1b46 !important;
    background-image: linear-gradient(135deg, rgba(11, 26, 64, 0.90) 0%, rgba(20, 42, 99, 0.94) 100%), url('images/dark-section-bg-image.png') !important;
    background-repeat: repeat !important;
}

/* Page Header Section Background Image */
.page-header,
.page-header.dark-section {
    position: relative !important;
    background-color: #0c1b46 !important;
    background-image: linear-gradient(180deg, rgba(11, 26, 64, 0.90) 0%, rgba(20, 42, 99, 0.94) 100%), url('images/page-header-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ==========================================================================
   FULL BANNER HERO SECTION STYLING
   ========================================================================== */
.hero,
.hero.dark-section,
.hero-shot-section {
    position: relative !important;
    padding: 0 !important;
    background-color: #0c1b46 !important;
    background-image: linear-gradient(180deg, rgba(11, 26, 64, 0.85) 0%, rgba(20, 42, 99, 0.90) 100%), url('images/hero-bg-image.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    color: #FFFFFF !important;
}

.hero-box {
    position: relative !important;
    padding: 140px 0 80px 0 !important;
    z-index: 1 !important;
}

/* ==========================================================================
   COMPACT INNER PAGE HEADER BANNER HEIGHT
   ========================================================================== */
.page-header,
.page-header.dark-section {
    position: relative !important;
    padding: 120px 0 60px 0 !important;
}

.page-header-box h1 {
    font-size: 42px !important;
    margin-bottom: 12px !important;
}

.hero-shot-badge {
    display: inline-block !important;
    background: rgba(64, 228, 233, 0.15) !important;
    color: #40e4e9 !important;
    border: 1px solid rgba(64, 228, 233, 0.3) !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 6px 18px !important;
    border-radius: 30px !important;
    margin-bottom: 20px !important;
}

.hero-shot-content h1 {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
    max-width: 900px !important;
}

.hero-shot-content h2 {
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    margin-bottom: 24px !important;
    line-height: 1.3 !important;
}

.hero-shot-content p {
    font-size: 1.05rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.7 !important;
    max-width: 920px !important;
    margin-bottom: 35px !important;
}

.hero-shot-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 18px !important;
    flex-wrap: wrap !important;
}

.hero-shot-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.hero-shot-primary {
    background-color: #40e4e9 !important;
    color: #000000 !important;
    border: 1px solid #40e4e9 !important;
}
.hero-shot-primary:hover {
    background-color: #e6220d !important;
    color: #FFFFFF !important;
    border-color: #e6220d !important;
}

.hero-shot-secondary {
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.hero-shot-secondary:hover {
    border-color: #40e4e9 !important;
    color: #40e4e9 !important;
    background-color: rgba(64, 228, 233, 0.05) !important;
}

/* ==========================================================================
   BLOG POST CARD, READ MORE BUTTON & PAGINATION STYLING
   ========================================================================== */

.post-item-card {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
    padding: 24px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease-in-out !important;
}

.post-item-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(1, 5, 53, 0.1) !important;
    border-color: rgba(64, 228, 233, 0.3) !important;
}

/* Read More Button with Circle Arrow Icon */
.read-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #010535 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out !important;
}

.read-more-btn .arrow-icon {
    width: 34px !important;
    height: 34px !important;
    background: #40e4e9 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000000 !important;
    transition: all 0.3s ease-in-out !important;
    font-size: 0.85rem !important;
}

.read-more-btn:hover {
    color: #e6220d !important;
}

.read-more-btn:hover .arrow-icon {
    background: #e6220d !important;
    color: #FFFFFF !important;
    transform: translateX(5px) !important;
}

/* Numeric Pagination Styling */
.post-pagination,
.pagination,
.nav-links,
ul.page-numbers {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 40px !important;
    padding: 0 !important;
    list-style: none !important;
}

.post-pagination .page-numbers,
.pagination .page-numbers,
.nav-links .page-numbers,
ul.page-numbers a,
ul.page-numbers span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 14px !important;
    border-radius: 30px !important;
    background: #FFFFFF !important;
    color: #010535 !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    transition: all 0.3s ease-in-out !important;
}

.post-pagination .page-numbers:hover,
.pagination .page-numbers:hover,
.nav-links a.page-numbers:hover,
ul.page-numbers a:hover {
    background: #40e4e9 !important;
    color: #000000 !important;
    border-color: #40e4e9 !important;
    transform: translateY(-2px) !important;
}

.post-pagination .page-numbers.current,
.pagination .page-numbers.current,
.nav-links .page-numbers.current,
ul.page-numbers span.current {
    background: #010535 !important;
    color: #FFFFFF !important;
    border-color: #010535 !important;
    box-shadow: 0 6px 20px rgba(1, 5, 53, 0.25) !important;
}

.post-pagination .page-numbers.prev,
.post-pagination .page-numbers.next,
.pagination .page-numbers.prev,
.pagination .page-numbers.next,
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next {
    padding: 0 20px !important;
    border-radius: 30px !important;
}

/* ==========================================================================
   SERVICE CARD BACKGROUND & CONTAINER STYLING (Matching Homepage)
   ========================================================================== */

.page-services,
.our-services {
    background-color: #F3F6FC !important;
}

.our-services .service-item,
.page-services .service-item,
.service-item {
    background: #FFFFFF !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(1, 5, 53, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 24px !important;
    transition: all 0.4s ease-in-out !important;
    position: relative !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.our-services .service-item:hover,
.page-services .service-item:hover,
.service-item:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(1, 5, 53, 0.15) !important;
    border-color: rgba(64, 228, 233, 0.4) !important;
}

.service-item-image {
    margin-bottom: 20px !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

.service-item-image figure {
    margin: 0 !important;
    border-radius: 15px !important;
    overflow: hidden !important;
}

.service-item-image figure img {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    transition: transform 0.5s ease-in-out !important;
}

.service-item:hover .service-item-image figure img {
    transform: scale(1.08) !important;
}

/* Service Number Badge */
.service-item-no h3 {
    color: #40e4e9 !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   PRELOADER LOGO ICON ENLARGEMENT
   ========================================================================== */

.preloader .loading-container {
    width: 200px !important;
    height: 200px !important;
}

.preloader .loading {
    width: 200px !important;
    height: 200px !important;
    border-top-color: #40e4e9 !important;
}

#loading-icon {
    max-width: 160px !important;
    max-height: 120px !important;
}

#loading-icon img {
    max-width: 160px !important;
    max-height: 120px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   GLOBAL FONTAWESOME 6 WEBFONT & ICON RESOLUTION
   ========================================================================== */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url('webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('webfonts/fa-regular-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('webfonts/fa-brands-400.woff2') format('woff2');
}

.fa, .fas, .fa-solid {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 900 !important;
}

.far, .fa-regular {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
  font-weight: 400 !important;
}

.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-weight: 400 !important;
}