@media (max-width: 600px) {
    .horizontal-slide > div {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .horizontal-slide h2,
    .horizontal-slide p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (max-width: 600px) {
    /* Brand Development section mobile layout */
    .uk-grid-large > .uk-width-1-2\@m {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
    }
    .uk-flex.uk-margin-medium-bottom {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
    }
    .uk-border-circle {
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        margin-top: 0 !important;
        align-self: center !important;
    }
    .uk-heading-medium.white {
        text-align: center !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
    }
    .uk-margin-large-bottom {
        text-align: center !important;
        margin: 0 auto 20px auto !important;
        display: block !important;
    }

        /* Center Game Plan section titles on mobile */
        .uk-section-large h3.white {
            text-align: center !important;
            margin-left: auto !important;
            margin-right: auto !important;
            display: block !important;
        }

        /* Add padding to CTA section on mobile */
        .uk-section.uk-section-large.uk-light.uk-cover-container.uk-flex.uk-flex-middle {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }
}
/* Miller Display font */
@font-face {
    font-family: 'Miller Display';
    src: url('../fonts/MillerDisplay-Regular.woff2') format('woff2'),
             url('../fonts/MillerDisplay-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Miller Display';
    src: url('../fonts/MillerDisplay-Italic.woff2') format('woff2'),
             url('../fonts/MillerDisplay-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}
@font-face {
    font-family: 'Miller Display';
    src: url('../fonts/MillerDisplay-Bold.woff2') format('woff2'),
             url('../fonts/MillerDisplay-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Miller Display';
    src: url('../fonts/MillerDisplay-BoldItalic.woff2') format('woff2'),
             url('../fonts/MillerDisplay-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}
@font-face {
    font-family: 'Miller Display';
    src: url('../fonts/MillerDisplay-Light.woff2') format('woff2'),
             url('../fonts/MillerDisplay-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Miller Display';
    src: url('../fonts/MillerDisplay-LightItalic.woff2') format('woff2'),
             url('../fonts/MillerDisplay-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}
/* Headings use Avenir Next LT Pro */
h1, h2, h3, h4, h5, h6 {
    font-family: 'avenir-lt-pro' !important;
}
/* Fast logo scroll animation */
@keyframes logo-scroll-fast {
}

.logo-scroll-list-fast {
    animation: logo-scroll-fast 22s linear infinite !important;
}

.logo-scroll-list li {
    list-style: none;
}
/* Logo scroll animation */
@keyframes logo-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.logo-scroll-wrapper {
    overflow: hidden;
    width: 100%;
}

.logo-scroll-list {
    display: flex;
    gap: 2rem;
    align-items: center;
    animation: logo-scroll 40s linear infinite;
    min-width: max-content;
}
/*
Theme Name: Frankel Base
Theme URI: https://frankelagency.com
Author: Frankel Agency
Author URI: https://frankelagency.com
Description: Custom theme
Version: 1.0
Tags: custom-theme
*/

/* Avenir Next LT Pro font */
@font-face {
    font-family: 'avenir-next-lt-pro';
    src: url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Regular.woff2') format('woff2'),
         url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'avenir-next-lt-pro';
    src: url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Italic.woff2') format('woff2'),
         url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'avenir-next-lt-pro';
    src: url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Bold.woff2') format('woff2'),
         url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'avenir-next-lt-pro';
    src: url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-BoldItalic.woff2') format('woff2'),
         url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-BoldItalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'avenir-next-lt-pro';
    src: url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Light.woff2') format('woff2'),
         url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'avenir-next-lt-pro';
    src: url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-LightItalic.woff2') format('woff2'),
         url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'avenir-next-lt-pro';
    src: url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Demi.woff2') format('woff2'),
         url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-Demi.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'avenir-next-lt-pro';
    src: url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-DemiItalic.woff2') format('woff2'),
         url('/wp-content/themes/frankel-base/fonts/AvenirNextLTPro-DemiItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

/* Base styles */
* {
    font-family: 'avenir-lt-pro' !important;
}
h2.special-miller {
    font-family: 'Miller Display' !important;
}
body {
    font-family: 'avenir-lt-pro' !important;
}

h1 {
    letter-spacing: -3%;
    font-weight: 400;
}
/* Text colors */

.white{
    color: #FFFFFF !important;
}

/* Typography classes */
#about .uk-text-lead{
    font-size: 2.2rem;
}
.hero-link{
    font-size: 1.67vw;
    font-weight: 600;
    line-height: 1.875rem;
    font-style: none !important;
}

.hero-sub{
    font-size: 1.38vw;
    font-weight: 400;
}

.text-lead {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
}

.text-muted {
    color: #6c757d;
    font-weight: 500;
}

.heading-small {
    color: #292929;
}

.uk-heading-medium {
    font-size: 50px;
    font-weight: 400;
    line-height: 1.2;
}

.heading-large {
    font-size: 50px;
    font-weight: 400;
    line-height: 1.2;
}

.heading-medium {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.3;
}

.heading-small {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
}

.text-small-caps {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

.text-italic {
    font-style: italic;
}

.global-subhead{
    font-size: 20px; 
    font-weight: 600;
    vertical-align: middle; 
    letter-spacing: 3px;
}


    .quote-text{
        font-size: 76px;
        line-height: 1.4;
        color: white;
    }

/* Background colors and gradients */
.bg-dark-blue {
    background-color: #0A1723;
}

.bg-dark-gradient {
    background: linear-gradient(135deg, #0A1723, #1A3752);
}

.bg-blue-gradient {
    background: linear-gradient(135deg, #00213A, #21596C);
}

.bg-overlay {
    background: rgba(0,0,0,0.4);
}

/* Section padding */
.section-padding {
    padding: 6rem 0;
}

.section-padding-sm {
    padding: 3rem 0;
}

/* Flexbox utilities */
.flex-center-middle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* Card styles */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.card-dark {
    background: #00354B;
    backdrop-filter: blur(10px);
    padding: 2.5rem 1.5rem;
}

.card-light {
    background: #f8f9fa;
    padding: 2rem 1rem;
}

.card-profile {
    height: 650px;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.card-profile:hover {
    transform: scale(1.02);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: "avenir-lt-pro", "Avenir Next", "Avenir", sans-serif !important;
}

.uk-padding-medium {
    padding: 2rem;
}

/* Button styles */
.btn-outline {
    border-radius: 30px;
    border: 1px solid #00354B;
    color: #00C0E4;
    padding: 0 30px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-outline:hover {
    background-color: rgba(0,192,228,0.1);
}

.btn-primary {
    background-color: #00BCD4;
    color: white;
    border-radius: 50px;
    padding: 0 3rem;
    font-weight: 500;
    text-transform: none;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

.btn-primary:hover {
    background-color: #00a5bb;
}

/* Button hover styles */
button:hover,
.uk-button:hover,
.btn:hover,
.btn-outline:hover,
.btn-primary:hover,
.btn-outline-blue:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: white;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* List and grid items */
.logo-grid-item {
    padding: 0 2rem;
}

.logo-image {
    height: 140px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.logo-image:hover {
    opacity: 1;
}

/* Hero section styles */
.uk-padding-small-right {
    padding-right: 20px;
}

.hero-nav-item {
    border-top: 2px solid rgba(255,255,255,0.7);
    padding-top: 20px;
}
.hero-nav-item.alt { border-color:rgba(0,0,0,.7); }
.hero-nav-item.alt:hover{ border-color:var(--primary); }

.hero-link-item {
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
    font-size: 32px;
    padding: 0;
    text-transform: none;
    color: #0A2740;
    text-decoration: none !important;
}

.hero-link-item.white {
    color: white;
}

.hero-link-item:hover {
    color: #00C0E4;
}

/* Hero section optimized styles */
.hero-content-width {
    width: 80%;
}
.hero-title {
    font-size: 81px;
}
.hero-lead {
    font-size: 27px;
}
.hero-nav-link {
    font-size: 32px;
}

/* About section optimized styles */


.about-section-padding {
    padding: 0 12rem;
}
.about-section-text {
    font-size: 35px;
    line-height: 1.4;
    position: relative;
}

/* Special elements */
.indicator-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: baseline;
}

.arrow-circle {
    position: relative;
    top: -4px;
    margin-left: 0px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid #00C0E4;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
}

/* Equal height for development sections */
#brand-development .uk-cover-container,
#web-development .uk-cover-container {
    object-fit: cover;
    object-position: center;
}

#key-sections-container section {
    position: relative;
}

/* Video section */
.video-background {
    position: relative;
    overflow: hidden;
}

#learn-more {
    background-color: #0A1723;
    padding: 250px 0 120px 0;
    position: relative;
    overflow: hidden;
}

/* Responsive styles */
@media (max-width: 959px) {
    .heading-large {
        font-size: 36px;
    }
    
    .heading-medium {
        font-size: 28px;
    }
    
    .heading-small {
        font-size: 22px;
    }
    
    .text-lead {
        font-size: 18px;
    }
    
    .section-padding {
        padding: 4rem 0;
    }
    
    #brand-development .uk-grid,
    #web-development .uk-grid {
        height: auto !important;
    }
    
    #brand-development .uk-width-1-2\@m,
    #web-development .uk-width-1-2\@m {
        width: 100%;
        height: 300px !important;
    }
    
    #brand-development .uk-heading-small,
    #web-development .uk-heading-small {
        font-size: 1.75rem !important;
    }
    
    #journey-essentials .uk-grid {
        margin-left: 0;
        margin-right: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    #journey-essentials .uk-width-2-5\@m,
    #journey-essentials .uk-width-3-5\@m {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
    
    #journey-essentials h2 {
        font-size: 36px !important;
        margin-bottom: 20px;
    }
    
    #journey-essentials .uk-text-lead {
        font-size: 18px !important;
    }
    
    #learn-more {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
    }
}

/* Card styles */
.card-profile {
    padding: 2rem;
    background-color: #ffffff;
    height: 100%;
}

.card-profile-vh {
    padding: 2rem;
    background-color: #ffffff;
    height: 55vh;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
    font-family: "avenir-lt-pro", "Avenir Next", "Avenir", sans-serif !important;
}

.card-subtitle {
    font-size: 14px;
    color: #6c757d;
    margin-top: 0;
}

.card-light {
    padding: 2rem 1rem;
    background: #f8f9fa;
}

/* Logo styles */
.logo-brand {
    max-height: 40px;
    width: auto;
}

/* Award styles */
.award-card {
    padding: 2.5rem 1.5rem;
    background: #00354B;
    backdrop-filter: blur(10px);
}

.award-image {
    max-height: 80px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* Section styles */
.section-bg-cover {
    background-size: cover;
    background-position: center center;
    padding: 6rem 0;
}

.section-light {
    background-color: #f8f9fa;
    padding: 6rem 0;
    overflow: hidden;
}

.section-gradient-blue {
    background: linear-gradient(135deg, #00213A, #21596C);
    color: #fff;
    padding: 6rem 0;
}

.section-gradient-dark {
    background: linear-gradient(135deg, #0A1723, #1A3752);
    color: #fff;
}

.section-dark {
    background-color: #0A1723;
    color: #fff;
    position: relative;
    z-index: 2;
}

/* Development sections */
.development-heading {
    color: #00C0E4;
    letter-spacing: 2px;
    font-weight: 600;
}

.development-description {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
}

/* Button styles */
.btn-outline-blue {
    border-radius: 30px;
    border: 1px solid #00354B;
    color: #00C0E4;
    padding: 0 30px;
}

/* Additional section styles */
.section-dark-small {
    background-color: #0A1723;
    color: #fff;
    padding: 3rem 0;
    position: relative;
    z-index: 2;
}

/* Client logo styles */
.client-logo {
    height: 140px;
    width: auto;
    opacity: 0.7;
}

.logo-item-wrapper {
    padding: 0 2rem;
}

.logo-slider-container {
    margin-bottom: 3rem;
}

/* Section header styles */
.section-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: baseline;
}

.section-badge-yellow {
    background-color: #FFEA07;
}

.section-badge-blue {
    background-color: #00C0E4;
}

.section-title {
    color: #00C0E4;
}

.avenir-heading {
    font-family: 'avenir-lt-pro', 'Avenir Next', 'Avenir', sans-serif !important;
}

/* team section */

.team-member{
    color: #00354B;
    font-weight: 600 !important;
    font-family: 'avenir-lt-pro' !important;
}
.team-portrait p {
    color: #292929;
}

/* process page */

section#game-plan h2{
font-size: 55px; font-weight: 500; margin-bottom: 20px;
}

section#game-plan .uk-container-large p{
font-size: 20px; font-weight: 300; max-width: 80%;
}

.process-steps h3 {
    font-size: 1.8rem; font-weight: 300; font-family: 'avenir-lt-pro', 'Avenir Next', 'Avenir', sans-serif !important;
}
.process-steps p {
    font-size: 1.2rem; font-weight: 300; line-height: 1.6;
}
section#gameplan h3{
    font-size: 1.8rem; 
    font-weight: 300;
}

.blue{
 color: #00C0E4;
}

/* Case study client pages */
/* Responsive layout classes */
@media (max-width: 1024px) and (min-width: 768px) {
    .tablet-only { display: block !important; }
    .desktop-split { display: none !important; }
    .mobile-only { display: none !important; }
}

@media (min-width: 1025px) {
    .tablet-only { display: none !important; }
    .desktop-split { display: block !important; }
    .mobile-only { display: none !important; }
}

@media (max-width: 767px) {
    .tablet-only { display: none !important; }
    .desktop-split { display: none !important; }
    .mobile-only { display: block !important; }
}

/* Typography */
.cs-paragraph {
    font-family: 'avenir-lt-pro', sans-serif !important; 
    font-size: 20px; 
    font-weight: 300; 
    line-height: 33px; 
    color: white; 
    margin-bottom: 20px;
}

.cs-heading-large { 
    font-size: 3rem; 
    font-weight: 300; 
    margin-bottom: 60px; 
    color: white; 
    font-family: 'avenir-lt-pro', sans-serif !important;
}

.cs-heading-medium {
    font-size: 2.2rem; 
    font-weight: 300; 
    margin: 0; 
    color: white; 
    font-family: 'avenir-lt-pro', sans-serif !important;
}

.cs-heading-section {
    color: #37C2E3; 
    font-size: 1.2rem; 
    font-weight: 500; 
    margin-bottom: 30px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-family: 'avenir-lt-pro', sans-serif !important;
}

.cs-heading-subsection {
    font-size: 1.2rem; 
    font-weight: 500; 
    margin-bottom: 30px; 
    color: #37C2E3; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-family: 'avenir-lt-pro', sans-serif !important;
}

.cs-back-link {
    color: #37C2E3; 
    font-size: 14px; 
    font-weight: 400; 
    text-decoration: underline; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    font-family: 'avenir-lt-pro', sans-serif !important;
}

.cs-paragraph-text {
    font-size: 1.1rem; 
    font-weight: 300; 
    line-height: 1.7; 
    color: #333; 
    margin-bottom: 20px; 
    font-family: 'avenir-lt-pro', sans-serif !important;
}

.cs-list-item {
    margin-bottom: 15px;
}

.cs-list-text {
    color: white; 
    font-size: 1rem; 
    font-weight: 300; 
    font-family: 'avenir-lt-pro', sans-serif !important;
}

/* Layout */
.cs-dark-bg {
    background-color: #292929;
}

.cs-sidebar-shadow {
    box-shadow: inset -30px 0 60px -10px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
}

.cs-section-padding-large {
    padding: 120px 40px 60px 80px;
}

.cs-section-padding-medium {
    padding: 80px;
}

.cs-image-fullwidth {
    width: 100%; 
    height: auto; 
    display: block;
}

/* Responsive adjustments */
@media (max-width: 1024px) and (min-width: 768px) {
    .cs-heading-section { font-size: 1.5rem !important; margin-bottom: 20px; }
    .cs-heading-medium { font-size: 2.2rem; }
    .cs-back-link { margin-bottom: 20px; display: block; }
    .cs-list-item { margin-bottom: 8px; }
    .cs-list-text { font-size: 0.95rem; }
}

@media (max-width: 767px) {
    .cs-heading-section { font-size: 1.5rem !important; margin-bottom: 20px; }
    .cs-heading-medium { font-size: 2rem; }
    .cs-back-link { font-size: 0.8rem; margin-bottom: 15px; display: block; }
    .cs-paragraph-text { font-size: 1rem; line-height: 1.6; }
    .cs-list-item { margin-bottom: 4px; }
    .cs-list-text { font-size: 0.85rem; line-height: 1.3; }
}

/* Equal Height 2-Column Layout */
.cs-grid-collapse {
    display: flex;
    align-items: stretch;
}

.cs-grid-collapse .uk-width-1-2 {
    display: flex;
    flex-direction: column;
}

/* Maintain aspect ratio while ensuring equal heights */
.cs-grid-collapse .uk-width-1-2 .cs-image-fullwidth {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    min-height: 300px;
}

/* Responsive adjustments for equal height layout */
@media (max-width: 1024px) {
    .cs-grid-collapse .uk-width-1-2 .cs-image-fullwidth {
        min-height: 250px;
    }
}

@media (max-width: 767px) {
    .cs-grid-collapse .uk-width-1-2 .cs-image-fullwidth {
        min-height: 200px;
    }
}

/* Service list items */
.cs-service-item {
    font-family: 'avenir-lt-pro', sans-serif !important;
    color: white;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 2.6px;
}

/* Footer navigation links */
#site-footer .uk-nav-default a {
    transition: color 0.3s ease;
}

#site-footer .uk-nav-default a:hover {
    color: #37c1e2 !important;
}

/* FAQ Cards */
.faq-card .uk-card {
    background-color: #0A2740; 
    color: white; 
    border-radius: 8px; 
    padding: 30px; 
    height: 360px; 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    transition: transform 0.3s ease;
}

.faq-card .uk-card h3 {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.3em;
    margin-bottom: 5px;
    color: #E7E6CD;
}

.faq-card .uk-card p {
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.5em;
    flex: 1;
    margin-top: 5px;
}

/* Faq Scroll Container */
.faq-scroll-container {
    display: flex;
    gap: 70px; 
    width: max-content;
}

.faq-card {
    flex: none;
    width: 350px;
}

/* case study page */
#case-study-section {
    padding: 250px 0 200px 0;;
}