/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/*-----------------------------------------------*/
/*  Portfolio Page Styles                        */
/*-----------------------------------------------*/

/* 414px and below screen sizes */
@media (max-width:414px){
    .light .wpb_wrapper h1.vc_custom_heading{
        font-size:50px !important;
    }
}

/* 321px and below screen sizes */
@media (max-width:321px){
    .light .wpb_wrapper h1.vc_custom_heading{
        font-size:42px !important;
    }
}

/* Portfolio hover button */
#portfolio .center .btn-hire:hover{
    background-color:#66d5b4;
}

/* Portfolio item span */
.row .standard_section .center .vc_column_container .vc_column-inner .wpb_wrapper .eplus-portfolio .pb-row .pb-col-lg-4 .eplus-portfolio-item .image-wrap span{
    width:55px !important;
}

/* Portfolio link visited state */
#portfolio .p-title a:visited{
    color:#000000;
}

/*-----------------------------------------------*/
/*  WooCommerce Icon Font                        */
/*-----------------------------------------------*/

/* WooCommerce Official Icon Font */
@font-face {
    font-family: 'WooCommerce';
    src: url('fonts/woocommerce/WooCommerce.woff') format('woff'),
         url('fonts/woocommerce/WooCommerce.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

[class^="wcicon-"], [class*=" wcicon-"] {
    font-family: 'WooCommerce' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wcicon-woo:before {
    content: "\e03d" !important;
    font-family: 'WooCommerce' !important;
}

/*-----------------------------------------------*/
/*  WordPress Services Hero Badge Icons          */
/*-----------------------------------------------*/

/* WordPress Icon (FontAwesome 6) */
.wp-hero-badge .badge-wp,
.wp-hero-badge .fa-wordpress,
.wp-hero-badge .fab.fa-wordpress {
    font-size: 22px !important;
    color: #50c8a8 !important;
}

/* Plus sign between icons */
.wp-hero-badge .badge-plus {
    font-size: 12px !important;
    color: rgba(80, 200, 168, 0.5) !important;
    margin: 0 -4px;
}

/* WooCommerce Icon (Official WooCommerce Font) */
i.wcicon-woo.badge-woo,
.wp-hero-badge i.wcicon-woo,
i.wcicon-woo {
    font-family: 'WooCommerce' !important;
    font-size: 20px !important;
    color: #50c8a8 !important;
    speak: none !important;
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

i.wcicon-woo:before,
i.wcicon-woo.badge-woo:before {
    content: "\e03d" !important;
    font-family: 'WooCommerce' !important;
}

/* Badge Container */
.wp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(80, 200, 168, 0.15);
    border: 1px solid rgba(80, 200, 168, 0.3);
    padding: 10px 20px;
    border-radius: 50px;
    margin-bottom: 20px;
    color: #50c8a8;
    font-size: 13px;
    font-weight: 600;
}

/*-----------------------------------------------*/
/*  WordPress Services Hero Illustration         */
/*-----------------------------------------------*/

/* Force SVG to display (override Lottie JS) */
.wp-hero-lottie img {
    display: block !important;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

/*-----------------------------------------------*/
/*  Hero Section Mobile Fix                     */
/*-----------------------------------------------*/

/* Force show the hero animation column on mobile */
@media (max-width: 999px) {
    /* Override vc_hidden-xs for columns with animation */
    .vc_column_container.vc_hidden-xs .wp-hero-lottie,
    .vc_hidden-xs.wpb_column .wp-hero-lottie {
        display: block !important;
    }

    .vc_column_container.vc_hidden-xs:has(.wp-hero-lottie),
    .vc_hidden-xs.wpb_column:has(.wp-hero-lottie) {
        display: block !important;
        visibility: visible !important;
    }

    /* Ensure the animation is visible */
    .wp-hero-lottie,
    .wp-hero-lottie .wpb_wrapper,
    #wp-lottie-hero {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
    }

    /* Center the animation on mobile */
    #wp-lottie-hero {
        margin: 20px auto !important;
    }
}

/*-----------------------------------------------*/
/*  Hide reCAPTCHA Badge                         */
/*-----------------------------------------------*/

/* Hide reCAPTCHA badge to prevent blocking scroll to top button */
div.grecaptcha-badge {
    display: none !important;
}

/* Ensure it's hidden with multiple selectors */
body .grecaptcha-badge,
body > div.grecaptcha-badge {
    display: none !important;
}

/*-----------------------------------------------*/
/*  Homepage About Section - Simple & Clean      */
/*-----------------------------------------------*/

/* Make text white and left-aligned */
.vc_col-sm-6.child_column.padding-1-percent p {
    color: #ffffff !important;
    text-align: left !important;
}

/* About section heading - simple typography improvements */
.row_col_wrap_12 .wpb_text_column h2 {
    line-height: 1.5 !important;
    text-transform: none !important;
}

/* Desktop: Vertically center left and right sections */
@media (min-width: 1000px) {
    html body #ajax-content-wrap .row_col_wrap_12.col.span_12.light.left {
        align-items: center !important;
    }
}

/*-----------------------------------------------*/
/*  Homepage About Section Text Fix              */
/*-----------------------------------------------*/

/* Fix: Make H2 heading white ONLY in rows with actual dark/teal backgrounds */
/* Target .light parent (Salient uses .light for dark bg sections paradoxically) */
/* and rows with teal gradients or dark backgrounds */
.row_col_wrap_12.light h2,
.row_col_wrap_12.light .wpb_text_column h2,
.row_col_wrap_12.light .nectar-highlighted-text h2 {
    color: #ffffff !important;
}

/* Also ensure emphasized text (italics) stays white on dark backgrounds */
.row_col_wrap_12.light h2 em,
.row_col_wrap_12.light .wpb_text_column h2 em,
.row_col_wrap_12.light .nectar-highlighted-text h2 em {
    color: #ffffff !important;
}

/*-----------------------------------------------*/
/*  WooCommerce Tech Stack Icon                  */
/*-----------------------------------------------*/

/* Use WooCommerce icon font for WooCommerce in tech stack */
.nectar_icon .fa-cart-shopping::before {
    content: "\e03d" !important;
    font-family: 'WooCommerce' !important;
}

/*===============================================*/
/*  SERVICES SECTION - LOTTIE ANIMATIONS         */
/*  (Migrated from functions.php)                */
/*===============================================*/

/* Remove underline from service card titles on homepage */
body .nectar-sticky-media-sections .nectar-responsive-text.nectar-link-underline-effect a,
body .nectar-sticky-media-sections .nectar-link-underline-effect a,
.nectar-sticky-media-sections .nectar-link-underline-effect h2 a {
    background-image: none !important;
    background-size: 0 0 !important;
    background: none !important;
}

/* Services Section - Remove ALL container backgrounds */
body .nectar-sticky-media-sections .nectar-sticky-media-section__media-wrap,
body .nectar-sticky-media-sections .nectar-sticky-media-section__content-section__wrap,
body .nectar-sticky-media-sections .column-bg-overlay,
body .nectar-sticky-media-sections [class*="media-wrap"],
body .nectar-sticky-media-sections [class*="content-section__wrap"] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* CRITICAL: Expand parent containers to allow larger animations */
body .nectar-sticky-media-sections .vc_column-inner,
body .nectar-sticky-media-sections .wpb_wrapper {
    width: 100% !important;
    max-width: 100% !important;
}

/* Make VC columns for Lottie wider on desktop */
@media (min-width: 1000px) {
    body .nectar-sticky-media-sections .nectar-sticky-media-section__content-section .vc_col-sm-6:last-child,
    body .nectar-sticky-media-sections .nectar-sticky-media-section__content-section .wpb_column:last-child {
        width: 55% !important;
        flex: 0 0 55% !important;
    }
    body .nectar-sticky-media-sections .nectar-sticky-media-section__content-section .vc_col-sm-6:first-child,
    body .nectar-sticky-media-sections .nectar-sticky-media-section__content-section .wpb_column:first-child {
        width: 45% !important;
        flex: 0 0 45% !important;
    }
}

/* Make Lottie animations fill available space */
body.home .nectar-sticky-media-sections .nectar-lottie-wrap,
body .nectar-sticky-media-sections .nectar-lottie-wrap,
body .nectar-sticky-media-sections .nectar-lottie {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.nectar-sticky-media-sections .nectar-lottie svg {
    width: 100% !important;
    height: auto !important;
    max-height: 550px !important;
}

/* Desktop - large animations */
@media (min-width: 1000px) {
    body .nectar-sticky-media-sections .nectar-lottie-wrap,
    body .nectar-sticky-media-sections .nectar-lottie {
        min-width: 450px !important;
    }
    .nectar-sticky-media-sections .nectar-lottie svg {
        min-width: 450px !important;
        max-height: 500px !important;
    }
}

/* Large desktop - even bigger animations */
@media (min-width: 1400px) {
    body .nectar-sticky-media-sections .nectar-lottie-wrap,
    body .nectar-sticky-media-sections .nectar-lottie {
        min-width: 550px !important;
    }
    .nectar-sticky-media-sections .nectar-lottie svg {
        min-width: 550px !important;
        max-height: 600px !important;
    }
}

/* Extra large desktop */
@media (min-width: 1600px) {
    body .nectar-sticky-media-sections .nectar-lottie-wrap,
    body .nectar-sticky-media-sections .nectar-lottie {
        min-width: 650px !important;
    }
    .nectar-sticky-media-sections .nectar-lottie svg {
        min-width: 650px !important;
        max-height: 700px !important;
    }
}

/* Tablet - medium animations */
@media (max-width: 999px) and (min-width: 690px) {
    body .nectar-sticky-media-sections .nectar-lottie-wrap,
    body .nectar-sticky-media-sections .nectar-lottie {
        max-width: 400px !important;
        margin: 0 auto !important;
    }
}

/* Mobile - smaller but visible */
@media (max-width: 689px) {
    body .nectar-sticky-media-sections .nectar-lottie-wrap,
    body .nectar-sticky-media-sections .nectar-lottie {
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    /* Adjust card layout for mobile */
    .nectar-sticky-media-sections .nectar-sticky-media-section__content {
        padding: 30px 20px !important;
    }
}

/*===============================================*/
/*  STORYSET SVG ILLUSTRATIONS                   */
/*  (Migrated from functions.php)                */
/*===============================================*/

/* Storyset SVG Illustrations - Responsive Design */
.storyset-illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
}

.storyset-illustration object {
    width: 100%;
    height: auto;
    max-width: 500px;
    aspect-ratio: 1/1;
}

/* Desktop - Large */
@media (min-width: 1400px) {
    .storyset-illustration object {
        max-width: 550px;
    }
}

@media (min-width: 1600px) {
    .storyset-illustration object {
        max-width: 600px;
    }
}

/* Tablet */
@media (max-width: 999px) and (min-width: 690px) {
    .storyset-illustration object {
        max-width: 380px;
    }
}

/* Mobile */
@media (max-width: 689px) {
    .storyset-illustration object {
        max-width: 300px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .storyset-illustration object {
        max-width: 260px;
    }
}

/* Inside Sticky Media Sections */
.nectar-sticky-media-sections .storyset-illustration {
    width: 100% !important;
    padding: 20px;
}

.nectar-sticky-media-sections .storyset-illustration object {
    width: 100% !important;
    height: auto !important;
}

@media (min-width: 1000px) {
    .nectar-sticky-media-sections .storyset-illustration object {
        max-width: 480px !important;
        min-width: 400px !important;
    }
}

@media (min-width: 1400px) {
    .nectar-sticky-media-sections .storyset-illustration object {
        max-width: 550px !important;
        min-width: 480px !important;
    }
}

@media (min-width: 1600px) {
    .nectar-sticky-media-sections .storyset-illustration object {
        max-width: 620px !important;
        min-width: 550px !important;
    }
}

@media (max-width: 999px) {
    .nectar-sticky-media-sections .storyset-illustration {
        padding: 15px;
    }
    .nectar-sticky-media-sections .storyset-illustration object {
        max-width: 350px !important;
    }
}

@media (max-width: 689px) {
    .nectar-sticky-media-sections .storyset-illustration {
        padding: 10px;
    }
    .nectar-sticky-media-sections .storyset-illustration object {
        max-width: 280px !important;
        min-width: 240px !important;
    }
}

/*===============================================*/
/*  WHY WEB FORTUNERS - BENTO GRID LAYOUT        */
/*  (Migrated from functions.php)                */
/*===============================================*/

/* Why Web Fortuners - Bento Grid Layout */
.why-bento-section {
    background: linear-gradient(135deg, #66D5B4 0%, #339E7D 100%) !important;
}

.why-bento-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Featured Card - Spans 2 rows */
.bento-card-featured {
    grid-row: span 2;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-card-featured:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.bento-card-featured .card-number {
    font-size: 5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.2);
    line-height: 1;
    margin-bottom: 20px;
}

.bento-card-featured .card-icon {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 20px;
}

.bento-card-featured h3 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 700;
}

.bento-card-featured p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

/* Supporting Cards */
.bento-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 30px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.bento-card .card-number {
    font-size: 4rem;
    font-weight: 800;
    color: rgba(102, 213, 180, 0.15);
    position: absolute;
    top: 10px;
    right: 20px;
    line-height: 1;
}

.bento-card .card-icon {
    font-size: 2rem;
    color: #66D5B4;
    margin-bottom: 15px;
}

.bento-card h3 {
    font-size: 1.3rem;
    color: #303030;
    margin-bottom: 10px;
    font-weight: 600;
}

.bento-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* Stats Row */
.bento-stats-row {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 50px 20px;
    flex-wrap: wrap;
}

.bento-stats-row .nectar-milestone {
    text-align: center;
}

.bento-stats-row .nectar-milestone .number {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
}

.bento-stats-row .nectar-milestone .subject {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

/* Responsive - Tablet */
@media (max-width: 999px) {
    .why-bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    .bento-card-featured {
        grid-row: span 1;
        grid-column: span 2;
        min-height: auto;
        padding: 30px;
    }

    .bento-card-featured .card-number {
        font-size: 3.5rem;
    }

    .bento-stats-row {
        gap: 40px;
    }
}

/* Responsive - Mobile */
@media (max-width: 689px) {
    .why-bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-card-featured {
        grid-column: span 1;
    }

    .bento-card-featured h3 {
        font-size: 1.5rem;
    }

    .bento-stats-row {
        gap: 30px;
    }

    .bento-stats-row .nectar-milestone .number {
        font-size: 2.5rem;
    }
}

/*===============================================*/
/*  WHITE MILESTONES IN WHY SECTION              */
/*  (Migrated from functions.php)                */
/*===============================================*/

/* Force white color on milestones in Why Web Fortuners gradient section */
#why-stats .nectar-milestone .number,
#why-stats .nectar-milestone .symbol,
#why-stats .nectar-milestone .subject {
    color: #ffffff !important;
}

/*===============================================*/
/*  SCROLL REVEALED TEXT - MOBILE FIX            */
/*  (Migrated from functions.php)                */
/*===============================================*/

/* Scroll Revealed Text - Mobile devices show text immediately since scroll animation doesn't work well */
@media (max-width: 999px) {
    .nectar-split-heading[data-text-effect="scroll-opacity-reveal"] .inner {
        opacity: 1 !important;
        transform: none !important;
    }
    .nectar-split-heading[data-text-effect="scroll-opacity-reveal"] h1 {
        font-size: 48px !important;
        line-height: 1.2 !important;
    }
}

/* Hero heading - iPhone 12/13 Pro Max (428px) and similar devices */
@media (max-width: 450px) and (min-width: 400px) {
    body, html {
        overflow-x: hidden !important;
    }
    /* WPBakery custom heading (hero section) - match 375px styling */
    .light .wpb_wrapper h1.vc_custom_heading,
    h1.vc_custom_heading.vc_do_custom_heading {
        font-size: 50px !important;
        line-height: 77px !important;
        letter-spacing: -0.02em !important;
    }
    /* Nectar split heading (other sections) */
    .nectar-split-heading[data-text-effect="scroll-opacity-reveal"] h1,
    .nectar-split-heading h1 {
        font-size: 34px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }
}

/* Hero heading - Standard mobile (375-400px) */
@media (max-width: 400px) and (min-width: 360px) {
    .nectar-split-heading[data-text-effect="scroll-opacity-reveal"] h1,
    .nectar-split-heading h1 {
        font-size: 34px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }
}

/* Hero heading - Small mobile (320-360px) */
@media (max-width: 360px) {
    .nectar-split-heading[data-text-effect="scroll-opacity-reveal"] h1,
    .nectar-split-heading h1 {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }
}

/* Desktop - ensure initial state for animation */
@media (min-width: 1000px) {
    .nectar-split-heading[data-text-effect="scroll-opacity-reveal"]:not(.animated-in) .inner {
        opacity: 0.2;
    }
}

/*===============================================*/
/*  OTHER STUFF - STICKY TABS ENHANCEMENT        */
/*  (Migrated from functions.php)                */
/*===============================================*/

/* Other Stuff Section - Sticky Tabs Enhancement */
.other-stuff-section {
    background: #F8F9FA !important;
}

.other-stuff-section .nectar-sticky-tabs {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.other-stuff-section .nectar-sticky-tabs .tabs-nav {
    background: #fff;
    border-right: 1px solid #eee;
}

.other-stuff-section .nectar-sticky-tabs .tabs-nav li a {
    padding: 25px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #303030;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.other-stuff-section .nectar-sticky-tabs .tabs-nav li a:hover,
.other-stuff-section .nectar-sticky-tabs .tabs-nav li.active a {
    background: rgba(102, 213, 180, 0.1);
    border-left-color: #66D5B4;
    color: #339E7D;
}

.other-stuff-section .nectar-sticky-tabs .tabs-nav li a .icon {
    margin-right: 12px;
    color: #66D5B4;
}

.other-stuff-section .tab-content {
    padding: 40px;
    background: #fff;
}

.other-stuff-section .service-item {
    padding: 30px;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.other-stuff-section .service-item:last-child {
    border-bottom: none;
}

.other-stuff-section .service-item .service-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #66D5B4 0%, #339E7D 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.other-stuff-section .service-item .service-icon i {
    font-size: 1.5rem;
    color: #fff;
}

.other-stuff-section .service-item .service-content h4 {
    font-size: 1.25rem;
    color: #303030;
    margin-bottom: 10px;
    font-weight: 600;
}

.other-stuff-section .service-item .service-content p {
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* CTA Row */
.other-stuff-cta {
    text-align: center;
    padding: 50px 20px;
}

.other-stuff-cta h3 {
    font-size: 1.5rem;
    color: #303030;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 999px) {
    .other-stuff-section .tab-content {
        padding: 25px;
    }

    .other-stuff-section .service-item {
        padding: 20px;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .other-stuff-section .service-item .service-icon {
        margin-bottom: 15px;
    }
}

/* Tabbed section styling */
.other-stuff-section [data-style="sticky_scrolling"] {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.other-stuff-section [data-style="sticky_scrolling"] > ul {
    background: #f8f9fa;
}

.other-stuff-section [data-style="sticky_scrolling"] > ul li a {
    padding: 20px 25px !important;
    font-weight: 600;
    border-left: 3px solid transparent;
}

.other-stuff-section [data-style="sticky_scrolling"] > ul li a:hover,
.other-stuff-section [data-style="sticky_scrolling"] > ul li.active a {
    background: rgba(102, 213, 180, 0.1);
    border-left-color: #66D5B4;
}

.other-stuff-section [data-style="sticky_scrolling"] .tab-content {
    padding: 40px;
}

/*===============================================*/
/*  CLOUD SOLUTIONS PAGE                         */
/*  (Migrated from functions.php)                */
/*===============================================*/

/* Cloud Solutions Page - Hero Section */
.cloud-hero .split_line_heading {
    margin-bottom: 0 !important;
}

.cloud-hero svg {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Service Cards - Responsive Grid */
.page-id-7888 .vc_row_inner[data-equal-height="yes"] {
    gap: 20px;
}

.page-id-7888 .vc_column_inner[class*="column_shadow"] {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-id-7888 .vc_column_inner[class*="column_shadow"]:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12) !important;
}

/* Milestone Numbers - White color fix - AGGRESSIVE targeting */
.page-id-7888 .milestone-number,
.page-id-7888 .milestone .number,
.page-id-7888 .milestone span.number,
.page-id-7888 .nectar-milestone .number,
.page-id-7888 [data-color="Extra-Color-3"] .number,
.page-id-7888 [class*="milestone"] span,
.page-id-7888 .milestone h2,
.page-id-7888 .milestone .symbol {
    color: #ffffff !important;
}

.page-id-7888 .milestone .subject,
.page-id-7888 .milestone span.subject,
.page-id-7888 .nectar-milestone .subject {
    color: rgba(255,255,255,0.85) !important;
}

/* Gold accent for milestone numbers */
.page-id-7888 .milestone .number {
    background: linear-gradient(135deg, #f5ad42 0%, #ffcc00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* FAQ Section styling - Cloud Solutions Page */
/* Left align FAQ items */
.page-id-7888 .toggles,
.page-id-7888 .toggles .toggle,
.page-id-7888 .toggles .toggle > h3,
.page-id-7888 .toggles .toggle > h3 a,
.page-id-7888 .toggles .toggle .toggle-content {
    text-align: left !important;
}

/* FAQ toggle styling for consistency */
.page-id-7888 .toggles[data-style="minimal"] .toggle > h3 a {
    font-size: 17px;
    font-weight: 500;
    padding: 20px 0;
    padding-right: 50px;
    display: block;
    position: relative;
    color: #1a1a2e;
    transition: color 0.3s ease;
}

.page-id-7888 .toggles[data-style="minimal"] .toggle > h3 a:hover {
    color: #66D5B4;
}

.page-id-7888 .toggles[data-style="minimal"] .toggle .toggle-content {
    color: #555;
    line-height: 1.8;
    padding-bottom: 20px;
}

.page-id-7888 .toggles[data-style="minimal"] .toggle {
    border-bottom: 1px solid #eee;
}

.page-id-7888 .toggles[data-style="minimal"] .toggle:last-child {
    border-bottom: none;
}

/* FAQ toggle icon - ensure proper positioning */
.page-id-7888 .toggles .toggle > h3 a::after,
.page-id-7888 .toggles[data-style="minimal"] .toggle > h3::after,
.page-id-7888 .toggles .toggle > h3 .toggle-icon {
    position: absolute !important;
    right: 0 !important;
}

/* Cloud Partners - Icon sizing */
.page-id-7888 .fab {
    display: inline-block;
}

/* Contact Form Section */
.page-id-7888 #contact .column_shadow {
    box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
}

/* Buttons hover effects */
.page-id-7888 .nectar-button[data-color-override="Accent-Color"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102,213,180,0.35);
}

/* ============ RESPONSIVE BREAKPOINTS ============ */

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .page-id-7888 .cloud-hero h2 {
        font-size: 4.5vw !important;
    }
}

/* Desktop (1000px - 1399px) */
@media (min-width: 1000px) and (max-width: 1399px) {
    .page-id-7888 .cloud-hero .vc_column_inner {
        padding: 2% !important;
    }

    .page-id-7888 .vc_column_inner[class*="column_shadow"] {
        padding: 25px !important;
    }
}

/* Tablet (768px - 999px) */
@media (max-width: 999px) {
    .page-id-7888 .cloud-hero .vc_row_inner {
        flex-direction: column;
    }

    .page-id-7888 .cloud-hero .vc_column_inner {
        width: 100% !important;
        text-align: center !important;
    }

    .page-id-7888 .cloud-hero .split_line_heading {
        text-align: center !important;
    }

    .page-id-7888 .cloud-hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .page-id-7888 .cloud-hero .nectar-button {
        display: inline-block;
        margin: 5px !important;
    }

    /* Service cards - 2 column on tablet */
    .page-id-7888 .vc_row_inner[data-equal-height="yes"] .vc_column_inner {
        width: 48% !important;
        flex: 0 0 48% !important;
        margin-bottom: 20px;
    }

    /* Stats section */
    .page-id-7888 .milestone {
        margin-bottom: 30px;
    }

    /* Why choose us - stack */
    .page-id-7888 [class*="vc_col-sm-6"] {
        width: 100% !important;
        margin-bottom: 30px;
    }

    /* Cloud partners grid */
    .page-id-7888 .vc_row_inner .vc_column_inner[style*="width:1/4"] {
        width: 50% !important;
        flex: 0 0 50% !important;
    }
}

/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
    .page-id-7888 .cloud-hero {
        padding: 15% 0 !important;
    }

    .page-id-7888 .cloud-hero svg {
        max-width: 280px !important;
        margin: 30px auto 0;
    }

    .page-id-7888 .cloud-hero h2 {
        font-size: 10vw !important;
        line-height: 1.2 !important;
    }

    .page-id-7888 .cloud-hero p {
        font-size: 15px !important;
    }

    /* Service cards - single column */
    .page-id-7888 .vc_row_inner[data-equal-height="yes"] .vc_column_inner {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .page-id-7888 .vc_column_inner[class*="column_shadow"] {
        padding: 25px 20px !important;
        margin-bottom: 15px !important;
    }

    /* Stats section - stack vertically */
    .page-id-7888 .wpb_column[class*="vc_col-sm-4"] {
        width: 100% !important;
        margin-bottom: 25px;
        padding: 20px 0 !important;
    }

    .page-id-7888 .milestone .number {
        font-size: 42px !important;
    }

    /* Section headings */
    .page-id-7888 h2 {
        font-size: 28px !important;
    }

    /* Why choose us features */
    .page-id-7888 .vc_row_inner .vc_column_inner[style*="width:1/2"] {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 25px;
    }

    /* Cloud partners - 2 per row */
    .page-id-7888 .vc_row_inner .vc_column_inner[style*="width:1/4"] {
        width: 50% !important;
        flex: 0 0 50% !important;
        margin-bottom: 15px;
    }

    /* FAQ section - fix text touching toggle icons */
    .page-id-7888 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 15px;
        padding: 15px 0;
        padding-right: 55px !important;
        display: block;
        position: relative;
    }

    .page-id-7888 .toggles[data-style="minimal"] .toggle .toggle-content {
        line-height: 1.7;
    }

    .page-id-7888 .toggles[data-style="minimal"] .toggle > h3 {
        position: relative;
    }

    .page-id-7888 .toggles .toggle > h3 i,
    .page-id-7888 .toggles .toggle-icon,
    .page-id-7888 .toggles .toggle > h3 .icon-plus-sign {
        position: absolute !important;
        right: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* CTA buttons */
    .page-id-7888 .nectar-button {
        width: 100%;
        margin: 10px 0 !important;
        text-align: center;
    }

    /* Contact form section */
    .page-id-7888 #contact .split_line_heading h1 {
        font-size: 8vw !important;
    }

    .page-id-7888 #contact .vc_column_inner[class*="padding-6"] {
        padding: 30px 20px !important;
    }

    /* Fix "Let's Build Together" heading - proper line spacing on mobile */
    .page-id-7888 .nectar-split-heading h1,
    .page-id-7888 .split_line_heading h1 {
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
    }

    .page-id-7888 .nectar-split-heading .inner,
    .page-id-7888 .split_line_heading .inner {
        display: block !important;
        line-height: 1.2 !important;
        margin-bottom: 0.1em !important;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    .page-id-7888 .cloud-hero h2 {
        font-size: 11vw !important;
    }

    .page-id-7888 h2 {
        font-size: 24px !important;
    }

    .page-id-7888 h4 {
        font-size: 18px !important;
    }

    .page-id-7888 .nectar-icon[data-style="soft-bg"] {
        width: 60px !important;
        height: 60px !important;
    }

    .page-id-7888 .nectar-icon[data-style="soft-bg"] i {
        font-size: 28px !important;
    }

    .page-id-7888 .milestone .number {
        font-size: 36px !important;
    }

    /* "Let's Build Together" heading - smaller screens */
    .page-id-7888 .nectar-split-heading h1,
    .page-id-7888 .split_line_heading h1 {
        font-size: 10vw !important;
        line-height: 1.25 !important;
    }

    /* FAQ section - smaller mobile */
    .page-id-7888 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 14px;
        padding-right: 50px !important;
    }
}

/* Print styles */
@media print {
    .page-id-7888 .cloud-hero svg,
    .page-id-7888 .nectar-button,
    .page-id-7888 #contact {
        display: none !important;
    }
}

/*===============================================*/
/*  MODERN PRICING TABLES - 2026 DESIGN          */
/*  (Migrated from functions.php)                */
/*===============================================*/

/* Website Development Page (343) - Equal Height Cards & Button Alignment */
.page-id-343 .web-dev-packages .row_col_wrap_12_inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    overflow: visible !important;
    padding-top: 30px;
}

.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4 {
    display: flex !important;
    flex-direction: column !important;
}

.page-id-343 .web-dev-packages .vc_column_inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 !important;
}

.page-id-343 .web-dev-packages .vc_column_inner .wpb_wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    flex: 1 !important;
}

.page-id-343 .web-dev-packages .vc_column_inner .nectar-button {
    margin-top: auto !important;
    align-self: stretch;
}

/* Website Development Page (343) - Enhanced Card Styling */
body.page-id-343 .web-dev-packages .vc_col-sm-4.column_container[data-shadow],
body.page-id-343 .web-dev-packages .vc_col-sm-4.column_container,
body.page-id-343 .web-dev-packages .vc_col-sm-4 {
    border-radius: 12px !important;
    overflow: visible !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    outline: none !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08) !important;
    position: relative;
}

body.page-id-343 .web-dev-packages .vc_col-sm-4.column_container[data-shadow]:hover,
body.page-id-343 .web-dev-packages .vc_col-sm-4:hover {
    border: none !important;
    outline: none !important;
}

body.page-id-343 .web-dev-packages .vc_col-sm-4.column_container[data-shadow] .column-bg-overlay,
body.page-id-343 .web-dev-packages .vc_col-sm-4 .column-bg-overlay {
    border-radius: 12px !important;
    border: none !important;
}

body.page-id-343 .web-dev-packages .vc_column_inner,
body.page-id-343 .web-dev-packages .wpb_wrapper {
    border: none !important;
}

/* Remove accent line from top of cards */
body.page-id-343 .web-dev-packages .vc_col-sm-4.column_container[data-shadow]::before {
    display: none !important;
    content: none !important;
}

body.page-id-343 .web-dev-packages .vc_col-sm-4.column_container[data-shadow]:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 25px 60px rgba(102, 213, 180, 0.2) !important;
}

/* Featured Card - Middle Column (2nd of 3) */
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) {
    transform: scale(1.05) !important;
    z-index: 2;
    border: none !important;
}

.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) .column-bg-overlay {
    background: linear-gradient(135deg, #66D5B4 0%, #339E7D 100%) !important;
}

/* Hide MOST POPULAR badge on Website Development page */
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2)::after {
    display: none !important;
    content: none !important;
}

.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2):hover {
    transform: scale(1.05) translateY(-12px) !important;
    box-shadow: 0 30px 70px rgba(51, 158, 125, 0.35) !important;
}

.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) h4,
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) p,
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) li {
    color: #ffffff !important;
}

/* Make icons white on teal background (featured card) */
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) i,
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) .nectar-icon i,
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) [class*="icon-"] {
    color: #ffffff !important;
}

/* Make SVG icon white on teal background (featured card) */
body.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) svg,
body.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) svg path,
body.page-id-343 .web-dev-packages .vc_col-sm-4:nth-child(2) .nectar_icon svg path,
body.page-id-343 .web-dev-packages .vc_col-sm-4:nth-child(2) .im-icon-wrap svg path {
    fill: #ffffff !important;
}

.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) .nectar-icon i,
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Card Typography */
.page-id-343 .web-dev-packages h4 {
    font-weight: 700 !important;
    font-size: 22px !important;
    color: #1a1a2e !important;
}

.page-id-343 .web-dev-packages .nectar-icon[data-style="default"] i {
    color: #66D5B4 !important;
    transition: transform 0.3s ease;
}

.page-id-343 .web-dev-packages .vc_column_inner:hover .nectar-icon i {
    transform: scale(1.1);
}

/* Feature List Enhancement */
.page-id-343 .web-dev-packages ul {
    margin-bottom: 25px !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.page-id-343 .web-dev-packages ul li {
    padding: 10px 0 10px 30px !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    position: relative;
    font-size: 15px;
}

.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) ul li {
    border-color: rgba(255,255,255,0.15);
}

.page-id-343 .web-dev-packages ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ffffff;
    font-weight: 700;
    font-size: 12px;
    width: 20px;
    height: 20px;
    background: #66D5B4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Make checkmarks white with semi-transparent background on teal card */
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) ul li::before {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* Additional selectors for any icon elements */
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) .nectar_icon_list li .list-icon-holder i,
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) .nectar_icon_list .content h4,
.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) ul li i {
    color: #ffffff !important;
}

.page-id-343 .web-dev-packages ul li:last-child {
    border-bottom: none;
}

/* Button Enhancement */
.page-id-343 .web-dev-packages .nectar-button {
    width: 100%;
    text-align: center;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease !important;
    padding: 16px 32px !important;
}

.page-id-343 .web-dev-packages .nectar-button:hover {
    transform: scale(1.05);
}

.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) .nectar-button {
    background: #ffffff !important;
    color: #339E7D !important;
}

.page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) .nectar-button:hover {
    background: linear-gradient(135deg, #339E7D 0%, #1a5c4a 100%) !important;
    color: #ffffff !important;
}

/* Responsive */
@media (max-width: 999px) {
    .page-id-343 .web-dev-packages .row_col_wrap_12_inner > .vc_col-sm-4:nth-child(2) {
        transform: none !important;
        order: -1;
    }

    .page-id-343 .web-dev-packages .vc_col-sm-4.column_container {
        margin-bottom: 30px;
        width: 100% !important;
    }

    .page-id-343 .web-dev-packages .row_col_wrap_12_inner {
        flex-direction: column;
    }
}

/*===============================================*/
/*  PAGE SPEED OPTIMIZATION (7757) ENHANCEMENTS  */
/*  (Migrated from functions.php)                */
/*===============================================*/

.page-id-7757 .wf-pricing-card {
    border: 1px solid rgba(102, 213, 180, 0.1) !important;
    position: relative;
    overflow: visible !important;
}

.page-id-7757 .wf-pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(135deg, #66D5B4 0%, #339E7D 100%);
    border-radius: 16px 16px 0 0;
}

.page-id-7757 .wf-pricing-card.featured::before {
    background: linear-gradient(135deg, #66D5B4 0%, #339E7D 100%);
}

.page-id-7757 .wf-pricing-card:hover {
    border-color: rgba(102, 213, 180, 0.3) !important;
}

/* Glassmorphism effect on featured */
.page-id-7757 .wf-pricing-card.featured {
    background: linear-gradient(135deg, #66D5B4 0%, #339E7D 100%) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2) !important;
}

.page-id-7757 .wf-pricing-badge {
    background: linear-gradient(135deg, #66D5B4 0%, #339E7D 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(102, 213, 180, 0.4);
    border-radius: 50px !important;
    padding: 8px 20px !important;
}

.page-id-7757 .wf-pricing-price {
    background: linear-gradient(135deg, #66D5B4 0%, #339E7D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-id-7757 .wf-pricing-card.featured .wf-pricing-price {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Button enhancements */
.page-id-7757 .wf-pricing-card .wf-btn {
    border-radius: 50px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.page-id-7757 .wf-pricing-card .wf-btn:hover {
    transform: scale(1.05);
}

.page-id-7757 .wf-pricing-card.featured .wf-btn-primary {
    background: #ffffff !important;
    color: #339E7D !important;
}

.page-id-7757 .wf-pricing-card.featured .wf-btn-primary:hover {
    background: linear-gradient(135deg, #339E7D 0%, #1a5c4a 100%) !important;
    color: #ffffff !important;
}

/* Check icons */
.page-id-7757 .wf-pricing-features li svg {
    stroke: #66D5B4;
}

.page-id-7757 .wf-pricing-card.featured .wf-pricing-features li svg {
    stroke: rgba(255,255,255,0.9);
}

/*===============================================*/
/*  FOOTER BUTTON HOVER FIX                      */
/*===============================================*/

/* Fix: Footer Contact Us button text disappears on hover
   The text and background both become teal, making text invisible.
   Force white text on hover when background fills with color */
footer .nectar-button.accent-color:hover,
#footer-outer .nectar-button.accent-color:hover,
.nectar-cta .nectar-button.accent-color:hover,
.nectar-button.accent-color:hover {
    color: #ffffff !important;
}

/*===============================================*/
/*  FOOTER MARQUEE - NECTARBLOCKS STYLE          */
/*===============================================*/

/* Footer brand section container */
#footer-outer .footer-brand-section,
.footer-brand-section {
    background: #1a1a1a !important;
    padding: 30px 0 40px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    position: relative !important;
}

/* Marquee container */
#footer-outer .footer-marquee,
.footer-marquee {
    display: flex !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* Marquee content - animated track */
#footer-outer .footer-marquee-content,
.footer-marquee-content {
    display: flex !important;
    align-items: center !important;
    animation: footer-marquee-scroll 45s linear infinite !important;
    flex-shrink: 0 !important;
}

/* Marquee animation keyframes */
@keyframes footer-marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Pause marquee on hover */
#footer-outer .footer-marquee:hover .footer-marquee-content,
.footer-marquee:hover .footer-marquee-content {
    animation-play-state: paused !important;
}

/* Large brand text - 20% larger on desktop */
#footer-outer .footer-large-brand,
.footer-large-brand {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: clamp(70px, 14vw, 220px) !important;
    font-weight: 100 !important;
    text-transform: none !important;
    line-height: 1 !important;
    letter-spacing: -0.03em !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    display: inline-block !important;
    background: none !important;
}

/* Dot separator between text */
#footer-outer .footer-marquee-dot,
.footer-marquee-dot {
    font-size: clamp(30px, 4vw, 60px) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    margin: 0 20px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

/* Tablet adjustments */
@media (max-width: 999px) {
    #footer-outer .footer-marquee-dot,
    .footer-marquee-dot {
        margin: 0 15px !important;
    }
}

/* Mobile - Large phones 400-600px (iPhone 12/13 Pro Max) - 15% increase */
@media (max-width: 600px) and (min-width: 400px) {
    #footer-outer .footer-large-brand,
    .footer-large-brand {
        font-size: clamp(65px, 18vw, 110px) !important;
    }

    #footer-outer .footer-marquee-dot,
    .footer-marquee-dot {
        margin: 0 12px !important;
    }

    #footer-outer .footer-brand-section,
    .footer-brand-section {
        padding: 15px 0 20px !important;
    }
}

/* Standard mobile 360-400px (iPhone SE, 12/13 mini) - 15% increase */
@media (max-width: 400px) and (min-width: 360px) {
    #footer-outer .footer-large-brand,
    .footer-large-brand {
        font-size: clamp(50px, 14vw, 70px) !important;
    }

    #footer-outer .footer-marquee-dot,
    .footer-marquee-dot {
        margin: 0 10px !important;
    }

    #footer-outer .footer-brand-section,
    .footer-brand-section {
        padding: 15px 0 20px !important;
    }
}

/* Small mobile 320-360px - 15% increase */
@media (max-width: 360px) {
    #footer-outer .footer-large-brand,
    .footer-large-brand {
        font-size: clamp(42px, 13vw, 55px) !important;
    }

    #footer-outer .footer-marquee-dot,
    .footer-marquee-dot {
        margin: 0 8px !important;
    }

    #footer-outer .footer-brand-section,
    .footer-brand-section {
        padding: 15px 0 20px !important;
    }
}


/*===============================================*/
/*  CAREERS PAGE STYLES (page-id-6815)           */
/*===============================================*/

/* Hero section */
.page-id-6815 .vc_column_text h1 {
    font-weight: 600 !important;
}

/*-----------------------------------------------*/
/*  CAREERS PAGE - Minimal enhancements only     */
/*  Let Salient handle the styling natively      */
/*-----------------------------------------------*/

/* Remove grey background from Open Positions section - use white like demo */
.page-id-6815 .tabbed[data-style*="vertical"] {
    background: transparent !important;
}

/* FAQ section - max width for readability */
.page-id-6815 .toggles {
    max-width: 800px;
    margin: 0 auto;
}

/* FAQ Left Alignment Fix - Careers Page */
.page-id-6815 .toggles,
.page-id-6815 .toggles .toggle,
.page-id-6815 .toggles .toggle > h3,
.page-id-6815 .toggles .toggle > h3 a,
.page-id-6815 .toggles .toggle .toggle-content {
    text-align: left !important;
}

/* Ensure FAQ container is left-aligned, not centered text */
.page-id-6815 .toggles[data-style="minimal"] .toggle > h3 a {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* FAQ toggle title styling */
.page-id-6815 .toggles[data-style="minimal"] .toggle > h3 a {
    font-size: 17px;
    font-weight: 500;
    padding: 20px 0;
    padding-right: 50px;
    display: block;
    position: relative;
    color: #1a1a2e;
    transition: color 0.3s ease;
}

.page-id-6815 .toggles[data-style="minimal"] .toggle > h3 a:hover {
    color: #66D5B4;
}

/* FAQ toggle content */
.page-id-6815 .toggles[data-style="minimal"] .toggle .toggle-content {
    color: #555;
    line-height: 1.8;
    padding-bottom: 20px;
}

/* FAQ toggle border */
.page-id-6815 .toggles[data-style="minimal"] .toggle {
    border-bottom: 1px solid #eee;
}

.page-id-6815 .toggles[data-style="minimal"] .toggle:last-child {
    border-bottom: none;
}

/* Toggle icon positioning */
.page-id-6815 .toggles[data-style="minimal"] .toggle > h3 {
    position: relative;
}

.page-id-6815 .toggles .toggle > h3 i,
.page-id-6815 .toggles .toggle-icon,
.page-id-6815 .toggles .toggle > h3 .icon-plus-sign {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Tablet responsive */
@media (max-width: 999px) {
    .page-id-6815 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 16px;
        padding: 18px 0;
        padding-right: 50px;
    }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .page-id-6815 .toggles {
        padding: 0 15px;
    }
    .page-id-6815 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 15px;
        padding: 15px 0;
        padding-right: 55px !important;
    }
    .page-id-6815 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 14px;
        line-height: 1.7;
    }
    /* Fix toggle icon positioning on mobile */
    .page-id-6815 .toggles .toggle > h3 i,
    .page-id-6815 .toggles .toggle-icon {
        right: 5px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .page-id-6815 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 14px;
        padding-right: 50px !important;
    }
    .page-id-6815 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 13px;
    }
}

/*===============================================*/
/*  WORDPRESS SERVICES PAGE (page-id-7068)       */
/*  Modern FAQ Styling & Mobile Responsive       */
/*===============================================*/

/* FAQ section container */
.page-id-7068 .toggles[data-style="minimal"] {
    max-width: 900px;
    margin: 0 auto;
}

/* FAQ Left Alignment Fix - WordPress Services Page */
.page-id-7068 .toggles,
.page-id-7068 .toggles .toggle,
.page-id-7068 .toggles .toggle > h3,
.page-id-7068 .toggles .toggle > h3 a,
.page-id-7068 .toggles .toggle .toggle-content {
    text-align: left !important;
}

/* Ensure FAQ container is left-aligned, not centered text */
.page-id-7068 .toggles[data-style="minimal"] .toggle > h3 a {
    justify-content: flex-start !important;
    text-align: left !important;
}

/* FAQ toggle title styling */
.page-id-7068 .toggles[data-style="minimal"] .toggle > h3 a {
    font-size: 17px;
    font-weight: 500;
    padding: 20px 0;
    padding-right: 50px;
    display: block;
    position: relative;
    color: #1a1a2e;
    transition: color 0.3s ease;
}

.page-id-7068 .toggles[data-style="minimal"] .toggle > h3 a:hover {
    color: #66D5B4;
}

/* FAQ toggle content */
.page-id-7068 .toggles[data-style="minimal"] .toggle .toggle-content {
    color: #555;
    line-height: 1.8;
    padding-bottom: 20px;
}

/* FAQ toggle border */
.page-id-7068 .toggles[data-style="minimal"] .toggle {
    border-bottom: 1px solid #eee;
}

.page-id-7068 .toggles[data-style="minimal"] .toggle:last-child {
    border-bottom: none;
}

/* Toggle icon positioning */
.page-id-7068 .toggles[data-style="minimal"] .toggle > h3 {
    position: relative;
}

.page-id-7068 .toggles .toggle > h3 i,
.page-id-7068 .toggles .toggle-icon,
.page-id-7068 .toggles .toggle > h3 .icon-plus-sign {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Tablet responsive */
@media (max-width: 999px) {
    .page-id-7068 .toggles[data-style="minimal"] {
        max-width: 100%;
        padding: 0 15px;
    }

    .page-id-7068 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 16px;
        padding: 18px 0;
        padding-right: 50px;
    }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .page-id-7068 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 15px;
        padding: 15px 0;
        padding-right: 55px !important;
        line-height: 1.4;
    }

    .page-id-7068 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 14px;
        line-height: 1.7;
        padding-right: 10px;
    }

    /* Ensure toggle icon circle stays properly positioned */
    .page-id-7068 .toggles .toggle > h3 i,
    .page-id-7068 .toggles .toggle-icon {
        right: 5px !important;
        /* Keep default 30x30 circle dimensions from theme */
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .page-id-7068 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 14px;
        padding-right: 50px !important;
    }

    .page-id-7068 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 13px;
    }
}

/*===============================================*/
/*  WEBSITE DEVELOPMENT PAGE (page-id-343)       */
/*  FAQ Styling Only - No Layout Changes         */
/*===============================================*/

/* Left align FAQ items */
.page-id-343 .toggles,
.page-id-343 .toggles .toggle,
.page-id-343 .toggles .toggle > h3,
.page-id-343 .toggles .toggle > h3 a,
.page-id-343 .toggles .toggle .toggle-content {
    text-align: left !important;
}

/* FAQ toggle styling for consistency */
.page-id-343 .toggles[data-style="minimal"] .toggle > h3 a {
    font-size: 17px;
    font-weight: 500;
    padding: 20px 0;
    padding-right: 50px;
    display: block;
    position: relative;
    color: #1a1a2e;
    transition: color 0.3s ease;
}

.page-id-343 .toggles[data-style="minimal"] .toggle > h3 a:hover {
    color: #66D5B4;
}

.page-id-343 .toggles[data-style="minimal"] .toggle {
    border-bottom: 1px solid #eee;
}

.page-id-343 .toggles[data-style="minimal"] .toggle:last-child {
    border-bottom: none;
}

/* FAQ toggle content */
.page-id-343 .toggles[data-style="minimal"] .toggle .toggle-content {
    color: #555;
    line-height: 1.8;
    padding-bottom: 20px;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .page-id-343 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 15px;
        padding: 15px 0;
        padding-right: 55px !important;
        line-height: 1.4;
    }
    .page-id-343 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 14px;
        line-height: 1.7;
    }
    /* Fix toggle icon positioning on mobile */
    .page-id-343 .toggles .toggle > h3 i,
    .page-id-343 .toggles .toggle-icon {
        right: 5px !important;
    }
}

@media (max-width: 480px) {
    .page-id-343 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 14px;
        padding-right: 50px !important;
    }
    .page-id-343 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 13px;
    }
}

/*===============================================*/
/*  SOCIAL MEDIA MARKETING PAGE (page-id-414)   */
/*  FAQ Styling for Consistency                  */
/*===============================================*/

/* Left align FAQ items */
.page-id-414 .toggles,
.page-id-414 .toggles .toggle,
.page-id-414 .toggles .toggle > h3,
.page-id-414 .toggles .toggle > h3 a,
.page-id-414 .toggles .toggle .toggle-content {
    text-align: left !important;
}

/* FAQ toggle styling for consistency */
.page-id-414 .toggles[data-style="minimal"] .toggle > h3 a {
    font-size: 17px;
    font-weight: 500;
    padding: 20px 0;
    padding-right: 50px;
    display: block;
    position: relative;
    color: #1a1a2e;
    transition: color 0.3s ease;
}

.page-id-414 .toggles[data-style="minimal"] .toggle > h3 a:hover {
    color: #66D5B4;
}

.page-id-414 .toggles[data-style="minimal"] .toggle .toggle-content {
    color: #555;
    line-height: 1.8;
    padding-bottom: 20px;
}

.page-id-414 .toggles[data-style="minimal"] .toggle {
    border-bottom: 1px solid #eee;
}

.page-id-414 .toggles[data-style="minimal"] .toggle:last-child {
    border-bottom: none;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .page-id-414 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 15px;
        padding: 15px 0;
        padding-right: 55px !important;
        line-height: 1.4;
    }
    .page-id-414 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 14px;
        line-height: 1.7;
    }
    /* Fix toggle icon positioning on mobile */
    .page-id-414 .toggles .toggle > h3 i,
    .page-id-414 .toggles .toggle-icon {
        right: 5px !important;
    }
}

@media (max-width: 480px) {
    .page-id-414 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 14px;
        padding-right: 50px !important;
    }
    .page-id-414 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 13px;
    }
}

/*===============================================*/
/*  DESIGN & BRANDING PAGE (page-id-7396)        */
/*  FAQ Styling - Consistent with other pages    */
/*===============================================*/

/* FAQ section container */
.page-id-7396 .toggles[data-style="minimal"] {
    max-width: 900px;
    margin: 0 auto;
}

/* FAQ Left Alignment Fix */
.page-id-7396 .toggles,
.page-id-7396 .toggles .toggle,
.page-id-7396 .toggles .toggle > h3,
.page-id-7396 .toggles .toggle > h3 a,
.page-id-7396 .toggles .toggle .toggle-content {
    text-align: left !important;
}

/* FAQ toggle title styling */
.page-id-7396 .toggles[data-style="minimal"] .toggle > h3 a {
    font-size: 17px;
    font-weight: 500;
    padding: 20px 0;
    padding-right: 50px;
    display: block;
    position: relative;
    color: #1a1a2e;
    transition: color 0.3s ease;
}

.page-id-7396 .toggles[data-style="minimal"] .toggle > h3 a:hover {
    color: #66D5B4;
}

/* FAQ toggle content */
.page-id-7396 .toggles[data-style="minimal"] .toggle .toggle-content {
    color: #555;
    line-height: 1.8;
    padding-bottom: 20px;
}

/* FAQ toggle border */
.page-id-7396 .toggles[data-style="minimal"] .toggle {
    border-bottom: 1px solid #eee;
}

.page-id-7396 .toggles[data-style="minimal"] .toggle:last-child {
    border-bottom: none;
}

/* Toggle icon positioning */
.page-id-7396 .toggles[data-style="minimal"] .toggle > h3 {
    position: relative;
}

.page-id-7396 .toggles .toggle > h3 i,
.page-id-7396 .toggles .toggle-icon,
.page-id-7396 .toggles .toggle > h3 .icon-plus-sign {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Tablet responsive */
@media (max-width: 999px) {
    .page-id-7396 .toggles[data-style="minimal"] {
        max-width: 100%;
        padding: 0 15px;
    }
    .page-id-7396 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 16px;
        padding: 18px 0;
        padding-right: 50px;
    }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .page-id-7396 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 15px;
        padding: 15px 0;
        padding-right: 55px !important;
    }
    .page-id-7396 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 14px;
        line-height: 1.7;
    }
    /* Fix toggle icon positioning on mobile */
    .page-id-7396 .toggles .toggle > h3 i,
    .page-id-7396 .toggles .toggle-icon {
        right: 5px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .page-id-7396 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 14px;
        padding-right: 50px !important;
    }
    .page-id-7396 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 13px;
    }
}

/*===============================================*/
/*  AI SEO VISIBILITY PAGE (page-id-6956)        */
/*  FAQ Styling - Consistent with other pages    */
/*===============================================*/

/* FAQ section container */
.page-id-6956 .toggles[data-style="minimal"] {
    max-width: 900px;
    margin: 0 auto;
}

/* FAQ Left Alignment Fix */
.page-id-6956 .toggles,
.page-id-6956 .toggles .toggle,
.page-id-6956 .toggles .toggle > h3,
.page-id-6956 .toggles .toggle > h3 a,
.page-id-6956 .toggles .toggle .toggle-content {
    text-align: left !important;
}

/* FAQ toggle title styling */
.page-id-6956 .toggles[data-style="minimal"] .toggle > h3 a {
    font-size: 17px;
    font-weight: 500;
    padding: 20px 0;
    padding-right: 50px;
    display: block;
    position: relative;
    color: #1a1a2e;
    transition: color 0.3s ease;
}

.page-id-6956 .toggles[data-style="minimal"] .toggle > h3 a:hover {
    color: #66D5B4;
}

/* FAQ toggle content */
.page-id-6956 .toggles[data-style="minimal"] .toggle .toggle-content {
    color: #555;
    line-height: 1.8;
    padding-bottom: 20px;
}

/* FAQ toggle border */
.page-id-6956 .toggles[data-style="minimal"] .toggle {
    border-bottom: 1px solid #eee;
}

.page-id-6956 .toggles[data-style="minimal"] .toggle:last-child {
    border-bottom: none;
}

/* Toggle icon positioning */
.page-id-6956 .toggles[data-style="minimal"] .toggle > h3 {
    position: relative;
}

.page-id-6956 .toggles .toggle > h3 i,
.page-id-6956 .toggles .toggle-icon,
.page-id-6956 .toggles .toggle > h3 .icon-plus-sign {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Tablet responsive */
@media (max-width: 999px) {
    .page-id-6956 .toggles[data-style="minimal"] {
        max-width: 100%;
        padding: 0 15px;
    }
    .page-id-6956 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 16px;
        padding: 18px 0;
        padding-right: 50px;
    }
}

/* Mobile responsive */
@media (max-width: 767px) {
    .page-id-6956 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 15px;
        padding: 15px 0;
        padding-right: 55px !important;
    }
    .page-id-6956 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 14px;
        line-height: 1.7;
    }
    /* Fix toggle icon positioning on mobile */
    .page-id-6956 .toggles .toggle > h3 i,
    .page-id-6956 .toggles .toggle-icon {
        right: 5px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .page-id-6956 .toggles[data-style="minimal"] .toggle > h3 a {
        font-size: 14px;
        padding-right: 50px !important;
    }
    .page-id-6956 .toggles[data-style="minimal"] .toggle .toggle-content {
        font-size: 13px;
    }
}

/*-----------------------------------------------*/