/* ========================================
   Application Areas Section
   ======================================== */
.ok07-sol-application {margin-top: 5.625rem;}
.ok07-sol-application .section-header {max-width: 860px;margin: 0 auto;text-align: center;}
.ok07-sol-application .hero-title {font-size: 3.75rem;font-weight: 700;color: #000000;margin-bottom: 0.625rem;text-transform: capitalize;}
.ok07-sol-application .hero-subtitle {font-size: 1.125rem;font-weight: 400;color: #747474;line-height: 1.5;}

.solution-content {position: relative;background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),url('./images/solution1.jpg') center/cover no-repeat;padding: 4rem 0 5.625rem;display: flex;justify-content: center;margin-top: 4rem;overflow: hidden;align-items: center;flex-direction: column;}
.solution-content .section-title {font-size: 2.5rem;font-weight: 700;color: #ffffff;text-transform: capitalize;}
.solution-content .content-wrapper {width: 860px;position: relative;margin-top: 2.5rem;}
.ok07-sol-application .swiper {background: #ffffff;border-radius: 1.875rem;}
.ok07-sol-application .content-card {max-width: 100%;background: #ffffff;overflow: hidden;display: block;}
.ok07-sol-application .card-image {width: 100%;object-fit: cover;aspect-ratio: 1 / .48;}
.ok07-sol-application .card-content {padding: 1.875rem;text-align: center;}
.ok07-sol-application .card-title {font-size: 1.875rem;font-weight: 700;color: #191919;margin-bottom: 0.75rem;}
.ok07-sol-application .card-description {font-size: 1.125rem;font-weight: 400;color: #9C9C9C; line-height: 1.667;}

.ok07-sol-application .section-number {font-size: 2.25rem;font-weight: 600;color: #5EA9E1;letter-spacing: 0.08em;}


.content-wrapper .page {display: inline-flex;align-items: center;position: absolute;right: -7.5rem;bottom: 2.125rem;}
.content-wrapper .swiper-button-prev,.content-wrapper .swiper-button-next{width:2.5rem;height:2.5rem;line-height:2.5rem;overflow:hidden;margin-top:0;text-align:center;color:#fff;position: static;}
.content-wrapper .swiper-button-next::after,.content-wrapper .swiper-button-prev::after {display:none;}
.content-wrapper .swiper-button-prev i,.content-wrapper .swiper-button-next i{color:inherit;font-size:2.5rem;}
.content-wrapper .swiper-button-prev:hover,.content-wrapper .swiper-button-next:hover{color:#5EA9E0;}


.content-wrapper .swiper-pagination{width:auto;font-size:0;left: -8rem;bottom: 2.125rem;font-size: 2.25rem;font-weight: 600;color: #fff;}
.content-wrapper span.swiper-pagination-total{color:#5da9e1;}

/* ========================================
   Client Cases Section
   ======================================== */
.ok07-cases {background-color: #DAEFFF;padding: 5rem 6.25rem;}
.ok07-cases .section-title {font-size: 3rem;font-weight: 700;color: #000000;text-align: center;margin-bottom: 3.625rem;}
.ok07-cases .cases-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 3rem;margin-bottom: 3.25rem;}
.ok07-cases .case-image {height: 26.785rem;border-radius: 1.875rem;overflow: hidden;display: block;}
.ok07-cases .case-image img {width: 100%;height: 100%;object-fit: cover;transition: all .3s ease;}
.ok07-cases .case-title {font-size: 1.5rem;font-weight: 600;color: #000000;text-align: center;padding: 1.5rem;transition: all .3s ease;}

.ok07-cases .load-more {display: flex;justify-content: center;}
.ok07-cases .load-more-btn {background-color: #0C233E;color: #ffffff;font-size: 1.25rem;font-weight: 600;padding: 1rem 3.125rem;border-radius: 3.5rem;border: none;cursor: pointer;transition: all .5s ease;}

.ok07-cases .case-card:hover .case-image img {transform: scale(1.03);}
.ok07-cases .case-card:hover .case-title {color: #5da9e1;}
.ok07-cases .load-more-btn:hover {background: #5da9e1;transform: translateY(-2px);}

/* ========================================
   Brands Section
   ======================================== */
.ok07-brands {background-color: #ffffff;padding: 3.75rem 6.25rem;}
.ok07-brands .brands-grid {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 1.25rem;}
.ok07-brands .brand-item {width: calc(20% - 1rem);height: 8.1875rem;background-color: #ffffff;border: 1px solid rgba(0, 0, 0, 0.23);border-radius: 0.625rem;display: flex;align-items: center;justify-content: center;padding: 0.625rem;}
.ok07-brands .brand-item img {max-width: 100%;max-height: 100%;object-fit: contain;}


.ok07-brands .swiper-pagination{width:100%;font-size:0;position: static;margin-top: 2.5rem;}
.ok07-brands .swiper-pagination-bullet {height:20px;width:20px;margin:0 4px;background:#D9D9D9;border-radius:50%;opacity:1;}
.ok07-brands .swiper-pagination-bullet-active{background:#5da9e1;}


/* ========================================
   Responsive Design
   ======================================== */

/* Large Desktop (1440px and below) */
@media (max-width: 1440px) {
    .ok07-application .content-wrapper {
        max-width: 1000px;
    }
    
    .ok07-cases .cases-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Laptop (1200px and below) */
@media (max-width: 1200px) {
    html {
        font-size: 15px;
    }
    
    .ok07-hero,
    .ok07-application,
    .ok07-cases,
    .ok07-brands,
    .ok07-testimonials,
    .ok07-contact {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    
    .ok07-cases .cases-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ok07-testimonials .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ok07-testimonials .testimonial-card:last-child {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
    
    .ok07-contact .decorative-image {
        width: 35rem;
        right: 3rem;
    }
}

/* Tablet (992px and below) */
@media (max-width: 992px) {
    html {
        font-size: 14px;
    }
    
    .ok07-hero,
    .ok07-application,
    .ok07-cases,
    .ok07-brands,
    .ok07-testimonials,
    .ok07-contact {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .ok07-hero {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .ok07-hero .hero-title {
        font-size: 3rem;
    }
    
    .ok07-application {
        min-height: auto;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .ok07-application .content-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .ok07-application .arrow-down {
        flex-direction: row;
        justify-content: center;
    }
    
    .ok07-cases .cases-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .ok07-cases .case-image {
        height: 20rem;
    }
    
    .ok07-brands .brands-grid {
        gap: 1.5rem;
    }
    
    .ok07-brands .brand-item {
        width: 14rem;
        height: 6rem;
    }
    
    .ok07-testimonials .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .ok07-testimonials .testimonial-card:last-child {
        grid-column: auto;
        max-width: 100%;
    }
    
    .ok07-contact .contact-wrapper {
        flex-direction: column;
    }
    
    .ok07-contact .decorative-image {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: auto;
        margin-top: 2rem;
    }
    
    .ok07-contact .form-row {
        flex-direction: column;
    }
}

/* Mobile Large (768px and below) */
@media (max-width: 768px) {
    html {
        font-size: 13px;
    }
    
    .ok07-hero,
    .ok07-application,
    .ok07-cases,
    .ok07-brands,
    .ok07-testimonials,
    .ok07-contact {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    
    .ok07-hero .hero-title {
        font-size: 2.5rem;
        margin-bottom: 3rem;
    }
    
    .ok07-hero .hero-subtitle {
        font-size: 1rem;
    }
    
    .ok07-application .section-title {
        font-size: 2rem;
    }
    
    .ok07-application .content-card {
        max-width: 100%;
    }
    
    .ok07-application .card-image {
        height: 20rem;
    }
    
    .ok07-cases .section-title {
        font-size: 2rem;
    }
    
    .ok07-cases .cases-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .ok07-cases .case-image {
        height: 18rem;
    }
    
    .ok07-brands .brand-item {
        width: 100%;
        max-width: 200px;
        height: 5rem;
    }
    
    .ok07-testimonials .section-title {
        font-size: 2rem;
    }
    
    .ok07-testimonials .section-subtitle {
        font-size: 1rem;
    }
    
    .ok07-contact .form-title {
        font-size: 2rem;
    }
    
    .ok07-contact .submit-btn {
        width: 100%;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
    
    .ok07-hero {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .ok07-hero .hero-title {
        font-size: 2rem;
    }
    
    .ok07-application {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .ok07-application .section-title {
        font-size: 1.75rem;
    }
     
    .ok07-application .section-number {
        font-size: 1.5rem;
    }
    
    .ok07-application .card-content {
        padding: 1.25rem;
    }
    
    .ok07-application .card-title {
        font-size: 1.125rem;
    }
    
    .ok07-application .card-description {
        font-size: 1rem;
    }
    
    .ok07-cases {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .ok07-cases .section-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }
     
    .ok07-cases .case-image {
        height: 14rem;
    }
    
    .ok07-cases .case-title {
        font-size: 1.25rem;
        padding: 1rem;
    }
    
    .ok07-brands {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    
    .ok07-brands .brands-grid {
        gap: 1rem;
    }
    
    .ok07-testimonials {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .ok07-testimonials .section-title {
        font-size: 1.75rem;
    }
    
    .ok07-testimonials .testimonial-card {
        padding: 1.25rem;
    }
    
    .ok07-contact {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    
    .ok07-contact .form-title {
        font-size: 1.75rem;
    }
    
    .ok07-contact .form-input,
    .ok07-contact .form-textarea {
        padding: 1rem;
    }
}


@media (max-width: 992px) {
.ok07-sol-application {margin-top: 2.5rem;}
.ok07-sol-application .hero-title {font-size: 2.25rem;margin-bottom: 0.5rem;}
.solution-content {padding: 2.5rem 0 2.5rem;margin-top: 2rem;}
.solution-content .section-title {font-size: 1.875rem;}
.solution-content .content-wrapper {width: 100%;margin-top: 2rem;padding: 0 10px;}
.ok07-sol-application .card-content {padding: 1.25rem;}
.ok07-sol-application .card-title {font-size: 1.5rem;}
.content-wrapper .page {display: none;}
.content-wrapper .swiper-pagination {font-size: 1.5rem;position: static;margin-top: 2rem;}

.ok07-application {padding: 3rem 0 0;}
.testimonials-header h3 {font-size: 2.25rem;}
.application-title {font-size: 2.25rem;margin-bottom: 1.875rem;}

.ok07-cases {padding-top:3rem;padding-bottom:3rem;}
.ok07-cases .section-title {margin-bottom: 1.5rem;}
.ok07-cases .cases-grid {gap: 1rem;margin-bottom: 1.5rem;}

.ok07-brands {padding-top:3rem;padding-bottom:3rem;}
.ok07-brands .swiper-pagination-bullet {height: 12px;width: 12px;}
}

@media (max-width: 600px) {
.app-content {position: static;padding: 2.5rem 1.875rem;}
.app-card h3 {font-size: 1.5rem;color: #000;}
.app-card p {color: #333;}

.app-card::after {display: none;}
}