/* General responsive styles */
@media (max-width: 1200px) {
    .uk-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

    /* Process page mobile specific */
    .uk-heading-medium, .uk-heading-large {
        font-size: 2.5rem !important;
    }
    
    /* FAQ section */
    .uk-section.uk-position-relative .uk-margin-small-bottom[style*="margin-left: 200px"] {
        margin-left: 0 !important;
    }
    
    .uk-slider-container-offset[style*="margin-left: 180px"] {
        margin-left: 25px !important;
    }
    
    /* Hero nav links - three line layout for tablet and smaller screens */
@media (max-width: 1082px) {
    .uk-grid-collapse.uk-child-width-1-3 > * {
        width: 100% !important;
        margin-bottom: 15px !important;
        padding-left: 0 !important; /* Remove left padding to align with text above */
    }
    
    .hero-nav-item {
        margin-bottom: 10px !important;
        border-top: 0;
    }
    
    .hero-link-item {
        border-top: none !important; 
        font-size: 1.8rem !important; 
        text-decoration: none;
    }
    
    /* Remove right padding from grid items */
    .uk-padding-small-right {
        padding-right: 0 !important;
    }
}

@media (max-width: 959px) {


.cs-subhead{
    margin-top: 60px;
}
    .quote-text{
        font-size: 2.2rem;
        line-height: 1.4;
    }
    .global-subhead{
        font-size: 1rem; 
        font-weight: 600;
        vertical-align: middle;
        letter-spacing: 3px;
    }
    /* General mobile/tablet styles */
    section#journey-essentials{
        padding: 40px 20px;
    }
    section#journey-essentials .uk-grid{
        padding: 0;
    }


    section#frankel-accolades .award-item{
        place-items: center;
    }
    section#frankel-accolades .award-item .uk-card{
        width: 100% !important;
    }
    .about-section-text{
        font-size: 1.2rem;
    }
    section#about{
        padding: 2rem !important;
        min-height: fit-content !important;
    }
    body {
        font-size: 16px;
    }
    
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2.2rem !important;
    }
    
    h3 {
        font-size: 1.8rem !important;
    }
    
    .uk-text-lead {
        font-size: 1.2rem !important;
    }
    
    .hero-link {
        font-size: 1rem !important;
    }
    
    .hero-sub {
        font-size: 1.2rem !important;
    }
    
    /* Adjust section spacing */
    .uk-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .uk-section-large {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    /* Learn More section specific padding */
    #learn-more {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
    }
    
    /* Adjust margin/padding */
    .uk-margin-large {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }
    
    .uk-margin-large-top {
        margin-top: 40px !important;
    }
    
    /* Case Studies page - tablet optimizations */
    /* Testimonial section */
    .uk-grid.uk-flex-middle[data-uk-grid] > .uk-width-1-2\@m {
        width: 100% !important;
    }
    
    .uk-grid.uk-flex-middle[data-uk-grid] > .uk-width-1-2\@m:first-child {
        margin-bottom: 30px !important;
    }
    
    /* Case Studies Grid */
    .uk-grid-collapse.uk-grid-match > .uk-width-1-3\@m,
    .uk-grid-collapse.uk-grid-match > .uk-width-2-3\@m {
        width: 100% !important;
        padding: 10px !important;
    }
    
    .uk-grid-collapse.uk-grid-match > .uk-width-1-2\@m {
        width: 100% !important;
        padding: 10px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Image height adjustments */
    .uk-card-default.uk-box-shadow-small img[style*="height: 400px"] {
        height: 250px !important;
    }
    
    .uk-card-default.uk-box-shadow-small img[style*="height: 300px"] {
        height: 200px !important;
    }
    
    .uk-margin-large-bottom {
        margin-bottom: 40px !important;
    }
    
    /* Hero adjustments */
    .uk-position-center-left {
        padding: 2rem !important;
        width: 100% !important;
        margin-left: 0 !important;
        transform: translateY(-50%);
        left: 0;
    }
    
    /* Process page hero section */
    .uk-position-center .uk-width-2-3\@m {
        width: 100% !important;
    }
    
    .uk-heading-large {
        font-size: 3rem !important;
        line-height: 1.2 !important;
    }
    
    /* Game Plan section - process page */
    .uk-grid-large .uk-width-1-3\@m,
    .uk-grid-large .uk-width-2-3\@m {
        width: 100% !important;
    }
    
    /* The Proven Starting Point section - process page */
    .uk-grid-large .uk-width-1-2\@m {
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    #game-plan h2{
        text-align: center; 
        width: 100%;
    }

    .plan-p{
        max-width: 100% !important; 
        text-align: center;
        width: 100%;
    }

    .process-steps .uk-grid-large {
        margin-left: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .process-steps .uk-first-column {
        padding-left: 0 !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .process-steps p {
        width: 100% !important;
        text-align: center !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .process-steps h3 {
        text-align: center !important;
        margin-bottom: 20px !important;
        width: 100% !important;
    }
    
    .process-steps .uk-width-2-3\@m {
        width: 100% !important;
        padding-left: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    /* Grid adjustments 
    .uk-child-width-1-2\@m > * {
        width: 100%;
    }
    
    .uk-grid {
        margin-left: -15px;
    }
    
    .uk-grid > * {
        padding-left: 15px;
    }*/
    
    /* Horizontal scroll section - mobile stacked version */
    #horizontal-scroll-container {
        height: auto !important;
        position: relative !important; /* Ensure it doesn't use absolute positioning on mobile */
        z-index: 1 !important; /* Lower z-index to prevent overlay issues */
    }
    
    #horizontal-scroll-section {
        position: relative !important;
        height: auto !important;
        overflow: visible !important; /* Allow content to flow naturally */
    }
    
    #horizontal-scroll-content {
        display: block !important;
        position: relative !important;
        transform: none !important;
        transition: none !important;
        width: 100% !important;
        font-size: 0 !important; /* Remove any whitespace between blocks */
    }
    
    .horizontal-slide {
        height: auto !important;
        width: 100% !important;
        min-width: 100% !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        font-size: 1rem !important; /* Reset font size inside slides */
    }
    
    .horizontal-slide > div {
        margin: 0 !important;
        padding: 4rem 2rem !important;
        width: auto !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    
    /* Left align all text elements within slides */

    
    #scroll-arrow {
        display: none !important;
    }
    
    /* Show mobile slide text descriptions */
    .mobile-slide-text {
        display: block !important;
    }
    
    /* Container for key sections */
    #key-sections-container {
        position: relative !important;
        z-index: 3 !important; /* Ensure it appears above everything */
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 0 !important;
    }
    
    /* Set proper order in the flex container */
    #key-sections-container #brand-development {
        order: 0 !important;
        position: relative !important;
        z-index: 2 !important;
        margin-bottom: 0 !important;
    }
    
    #key-sections-container #web-development {
        order: 1 !important;
        position: relative !important;
        z-index: 2 !important;
        margin-bottom: 0 !important;
    }
    
    #key-sections-container #process-cta {
        order: 2 !important;
        position: relative !important;
        z-index: 2 !important;
        margin-bottom: 0 !important;
    }
    
    /* Make Web Development section more responsive on mobile */
    #web-development .uk-grid-collapse,
    #brand-development .uk-grid-collapse {
        height: auto !important;
    }
    
    #web-development .uk-height-1-1, 
    #brand-development .uk-height-1-1 {
        height: auto !important;
        min-height: 250px !important;
    }
    
    /* Make Brand Development and Web Development sections same height on mobile */
    #brand-development .uk-grid-collapse,
    #web-development .uk-grid-collapse {
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #brand-development .uk-width-1-2\@m,
    #web-development .uk-width-1-2\@m {
        width: 100% !important;
        /* height: 250px !important; */
    }

    #brand-development .text-block{
        order: 1;
    }
    
    /* Ensure text sections in both development sections are properly padded */
    #brand-development .uk-padding.uk-padding-large,
    #web-development .uk-padding.uk-padding-large {
        padding: 30px !important;
        height: auto !important;
    }
    
    /* Ensure images in both sections maintain proper aspect ratio */
    #brand-development img.uk-cover-container,
    #web-development img.uk-cover-container {
        object-fit: cover !important;
    }
}

/* Mobile specific adjustments */
@media (max-width: 639px) {
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.8rem !important; 
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    .uk-text-lead {
        font-size: 1.1rem !important;
    }
    
    /* Smaller padding for mobile */
    .horizontal-slide > div {
        padding: 3rem 1.5rem !important;
    }
    
    /* Case Studies page - mobile optimizations */
    .uk-section.uk-section-large[style*="padding-top: 150px"] {
        padding-top: 100px !important;
    }
    
    /* Hero section for case studies */
    .uk-heading-large[style*="font-size: 4.5rem"] {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }
    
    .uk-text-lead[style*="font-size: 1.4rem"] {
        font-size: 1.1rem !important;
        max-width: 100% !important;
    }
    
    /* Section spacing for mobile */
    .uk-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .uk-section-large {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    /* Container padding */
    .uk-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Make Brand Development and Web Development sections match on small screens */
    #brand-development .uk-width-1-2\@m,
    #web-development .uk-width-1-2\@m {
        height: 200px !important; /* Slightly smaller height on mobile */
    }
    
    #brand-development .uk-padding.uk-padding-large,
    #web-development .uk-padding.uk-padding-large {
        padding: 20px !important;
    }
    
    #brand-development .uk-heading-small,
    #web-development .uk-heading-small {
        font-size: 1.5rem !important;
        margin-top: 10px !important;
    }
    
    /* Process page mobile specific */
    .uk-heading-large {
        font-size: 2.5rem !important;
    }
    
    /* The Proven Starting Point section - process page */
    .uk-heading-medium {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .uk-border-circle.uk-background-primary {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.4rem !important;
    }
    
    .uk-flex.uk-flex-middle {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .uk-margin-medium-left {
        margin-left: 0 !important;
        margin-top: 20px !important;
    }
    
    /* FAQ section */
    .uk-section.uk-position-relative .uk-margin-small-bottom {
        margin-left: 15px !important;
    }
    
    .uk-slider-container-offset {
        margin-left: 15px !important;
    }
    
    .uk-card-default.uk-card-body {
        width: 300px !important;
        height: auto !important;
        min-height: 300px !important;
        padding: 20px !important;
    }
    
    /* Call to Action section responsive styles */
    .uk-section.uk-light.uk-cover-container {
        padding: 80px 0 !important;
    }
    
    .uk-heading-medium[style*="font-family: Miller Display"] {
        font-size: 3rem !important;
    }
    
    .uk-text-lead.white[style*="font-size: 1.3rem"] {
        font-size: 1.1rem !important;
        max-width: 90% !important;
    }
}

@media (max-width: 639px) {
    h1 {
        font-size: 2rem !important;
    }
    
    h2 {
        font-size: 1.8rem !important; 
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    .uk-text-lead {
        font-size: 1.1rem !important;
    }
    
    /* Smaller padding for mobile */
    .horizontal-slide > div {
        padding: 3rem 1.5rem !important;
    }
    
    /* Section spacing for mobile */
    .uk-section {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    
    .uk-section-large {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    
    /* Container padding */
    .uk-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Make Brand Development and Web Development sections match on small screens */
    #brand-development .uk-width-1-2\@m,
    #web-development .uk-width-1-2\@m {
        height: 200px !important; /* Slightly smaller height on mobile */
    }
    
    #brand-development .uk-padding.uk-padding-large,
    #web-development .uk-padding.uk-padding-large {
        padding: 20px !important;
    }
    
    #brand-development .uk-heading-small,
    #web-development .uk-heading-small {
        font-size: 1.5rem !important;
        margin-top: 10px !important;
    }
    
    /* Process page mobile specific */
    .uk-heading-large {
        font-size: 2.5rem !important;
    }
    
    /* The Proven Starting Point section - process page */
    .uk-heading-medium {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .uk-border-circle.uk-background-primary {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.4rem !important;
    }
    
    .uk-flex.uk-flex-middle {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .uk-margin-medium-left {
        margin-left: 0 !important;
        margin-top: 20px !important;
    }
    
    /* FAQ section */
    .uk-section.uk-position-relative .uk-margin-small-bottom {
        margin-left: 15px !important;
    }
    
    .uk-slider-container-offset {
        margin-left: 15px !important;
    }
    
    .uk-card-default.uk-card-body {
        width: 350px !important;
        min-height: 320px !important;
    }

    .faq-card .uk-card{
        height: auto !important;
    }
    
    /* Call to Action section */
    .uk-heading-medium[style*="font-family: Miller Display"] {
        font-size: 2.5rem !important;
    }
    
    /* Case Studies page - mobile optimizations */
    /* Testimonial quote */
    .uk-margin-medium-top.uk-margin-medium-bottom span[style*="font-size: 5rem"] {
        font-size: 4rem !important;
        margin-bottom: 10px !important;
    }
    
    .uk-heading-medium[style*="font-size: 3.5rem"] {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    /* Case studies grid spacing */
    .uk-grid-collapse.uk-grid-match {
        margin-left: 0 !important;
    }
    
    .uk-grid-collapse.uk-grid-match > div {
        padding: 8px 0 !important;
    }
    
    /* CTA section on case studies page */
    .uk-section.uk-section-large[style*="position: relative; overflow: hidden"] {
        padding: 60px 15px !important;
    }
    
    .uk-container.uk-text-center .uk-width-2-3\@m {
        width: 100% !important;
    }
    
    .uk-button[style*="background-color: #5CBFDE"] {
        padding: 12px 30px !important;
    }

    /*case study page*/ 
    #case-study-section{
        padding: 180px 0 100px 0;
    }
}