/* KORAT REALITY - MERGED RESPONSIVE STYLES */

/* === SECTION: components.css (Responsive) === */
@media (max-width: 991px) {
    .why-choose-grid {
        grid-template-columns: 1fr;
    }
    .wrapper{
        overflow: hidden !important;
    }
}

/* === SECTION: custom_nav.css (Responsive) === */
@media (min-width: 992px) {
    .dropdown.group:hover .dropdown-menu {
        display: block;
        animation: fadeInUp 0.3s ease forwards;
        margin-top: 0;
    }
    .dropdown.group:hover .dropdown-menu {
        display: block;
        animation: fadeInUp 0.3s ease forwards;
        margin-top: 10px !important;
        /* Keep gap consistent */
    }
}


/* === SECTION: hero.css (Responsive) === */
@media (max-width: 768px) {
    .hero-main {
        min-height: 90vh;
        padding-top: 5rem;
    }

    .hero-title {
        font-size: clamp(2.2rem, 8vw, 3.5rem);
    }

    .hero-text {
        font-size: 1rem;
        margin-bottom: 2rem;
    }

    .btn-hero-cta {
        padding: 12px 28px;
        font-size: 0.9rem;
    }

    .hero-illustration img {
        height: clamp(180px, 30vw, 300px);
    }
}

@media (max-width: 480px) {
    .hero-main {
        min-height: 85vh !important;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-illustration{
        bottom: 0 !important;
    }
    .hero-illustration img {
        height: 180px;
    }
}

/* === SECTION: about.css (Responsive) === */
@media (max-width: 900px) {
    .editorial-about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-col-left::before {
        top: -1.5rem;
    }

    .about-editorial-text {
        padding-left: 0;
        border-left: none;
        max-width: 100%;
    }

    .about-editorial-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .editorial-about-section {
        padding: 5rem 0;
    }

    .about-editorial-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === SECTION: services.css (Responsive) === */
@media screen and (max-width: 991px) {
    .services-section {
        min-height: auto;
        padding: 4rem 0 !important;
        overflow: visible;
    }

    .services-inner {
        display: block;
        min-height: auto;
        padding: 0 1.5rem;
    }

    /* Hide the left sidebar/nav on mobile */
    .services-left {
        display: none;
    }

    .services-right {
        width: 100%;
        min-height: auto;
        overflow: visible;
    }

    .cards-viewport {
        position: static;
        height: auto;
        padding-top: 0;
        overflow: visible;
    }

    .service-card-scroll {
        width: 100%;
        height: auto;
        max-height: none;
        margin-bottom: 1.5rem;
        transform: none !important;
        /* Override JS transforms if any remain */
        opacity: 1 !important;
    }

    /* Adjust content inside cards for mobile */
    .service-card-img-area {
        padding: 2rem 1.5rem 1rem;
    }

    .service-card-img {
        max-height: 400px;
        max-width: 90%;
    }

    .service-card-bottom {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .service-card-info p {
        max-width: 100%;
    }

    .service-cta {
        width: 100%;
        justify-content: center;
    }
}

/* === SECTION: contact.css (Responsive) === */
@media (max-width: 991px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-info-col {
        padding-left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .minimal-form .form-row-2col {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .minimal-form .form-row-2col .form-group {
        margin-bottom: 1.5rem;
    }

    .contact-info-col {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* === ORIGINAL MEDIA.CSS === */
/* ============================================
   KORAT REALITY - Responsive Styles
   All Media Queries
   ============================================ */

/* ============================================
   LARGE TABLET & BELOW (max-width: 1199px)
   Menu width adjustment
   ============================================ */
@media (max-width: 1199px) {
    .fullscreen-menu {
        width: 100% !important;
    }

    .key-image-wrapper {
        display: none;
    }

    /* Disable Project Hover Effects for Mobile/Tablet */
    .pw-item:hover .pw-pill-btn {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .pw-item:hover .pw-image img {
        transform: none !important;
    }

    /* Portfolio Filters - Vertical Column */
    .portfolio-pills-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 40px auto;
        border-radius: 24px;
        padding: 12px;
        gap: 6px;
    }

    .hero-cat-pill {
        width: 100%;
        text-align: center;
        padding: 10px 20px;
    }
}

/* ============================================
   TABLET & BELOW (max-width: 991px)
   ============================================ */
@media (max-width: 991px) {

    .hero-desc-text {
        font-size: 10px;
    }

    #contact-btn {
        font-size: 0.6rem;
    }

    .service-icon-anim {
        height: 30px;
        width: 30px;
        margin-bottom: 10px;
    }

    /* Remove border-end on stacked layouts */
    .services-section .border-end {
        border-right: none !important;
    }

    .border-end {
        border-right: none !important;
    }

    /* Adjust display sizes */
    .display-3 {
        font-size: 2.5rem;
    }

    .display-4 {
        font-size: 2rem;
    }

    /* FAQ adjustments */
    .faq-question {
        gap: 1rem;
    }

    .faq-answer-inner {
        padding-left: calc(2.5rem + 1rem);
    }

    .faq-answer p {
        margin-top: 4px;
    }

    /* About Image Adjustment */
    .about-main-img-box {
        height: 400px;
    }

    .service-img-wrapper {
        display: none;
    }

    .service-desc-hover {
        opacity: 1;
        font-size: 1.2rem;
    }

    .service-desc-hover:hover {
        transform: translateY(20px) !important;
    }

    #blog-hero-visual {
        display: none;
    }

    /* Extracted from style.css */
    .stats-card-wrapper {
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding-top: 2rem;
    }

    .story-card-main {
        padding-right: 0;
    }

    .key-image-wrapper {
        position: relative;
        bottom: 0;
        right: 0;
        width: 80%;
        margin: 2rem auto 0;
        display: block;
        transform: none;
    }

    .key-image-wrapper img {
        transform: none;
    }

    .service-card-new {
        height: 420px;
        padding: 2rem;
    }

    .service-title {
        font-size: 1.75rem;
    }

    .service-desc-hover {
        opacity: 1;
        transform: translateY(0);
    }

    .service-img-wrapper {
        width: 180px;
    }
}

/* ============================================
   DESKTOP & ABOVE (min-width: 992px)
   ============================================ */
@media (min-width: 992px) {

    /* Service Grid Custom Borders */
    .service-border-right {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Dynamic Staggered Layout */
    .services-grid>div:nth-child(even) {
        padding-top: 7rem !important;
    }

    /* Extracted from style.css */
    .story-grid {
        grid-template-columns: 1.4fr 1fr;
    }

    .join-team-wrapper {
        flex-direction: row;
        min-height: 500px;
    }

    .nri-pref-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   MOBILE (max-width: 575px)
   ============================================ */
@media (max-width: 575px) {

    /* FAQ mobile adjustments */
    .faq-number {
        font-size: 1.3rem;
    }

    .faq-answer-inner {
        padding-left: 0;
    }

    .faq-icon {
        width: 36px;
        height: 36px;
    }

    .about-main-img-box {
        height: 300px;
    }

    /* Hero Text Adjustments for Mobile */
    .hero-title.display-3 {
        font-size: 2rem !important;
        /* Reduce specific hero title size */
        margin-bottom: 1rem !important;
    }

    .hero-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Ensure content clears the header on mobile */
    .hero-section .container {
        padding-top: 80px;
        /* Give space for the absolute header */
    }
}

/* ============================================
   TABLET & BELOW (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* Intro logo size adjustment */
    .intro-logo img {
        height: 50px;
    }

    /* Extracted from style.css */
    .scroll-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }

    .progress-ring {
        width: 45px;
        height: 45px;
    }

    .scroll-to-top .arrow-icon {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   OTHER BREAKPOINTS
   ============================================ */
@media (max-width: 991.98px) {
    .vision-mission-section {
        padding: 70px 0;
    }

    .vm-card {
        padding: 30px;
    }

    .vm-card-title {
        font-size: 1.3rem;
    }

    .vm-image-item {
        height: 220px;
    }

    .vm-geometric-element {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .vision-mission-section {
        padding: 50px 0;
    }

    .vm-main-title {
        font-size: 2rem;
    }

    .vm-card {
        padding: 25px;
        border-radius: 16px;
    }

    .vm-icon-wrapper {
        width: 50px;
    }

    .vm-icon-wrapper svg {
        width: 24px;
        height: 24px;
    }

    .vm-stats-row {
        gap: 20px;
    }

    .vm-image-strip .row {
        gap: 4px;
    }

    .vm-image-item {
        height: 180px;
        border-radius: 8px;
        overflow: hidden;
    }

    .vm-image-number {
        font-size: 1.5rem;
    }

    .vm-image-label {
        bottom: 15px;
        left: 15px;
    }
}

@media (max-width: 480px) {
    .scroll-to-top {
        bottom: 15px;
        right: 15px;
    }
}

/* ============================================
   PROCESS SECTION MEDIA QUERIES
   ============================================ */

/* Desktop (>= 1200px) */
@media (min-width: 1200px) {
    .process-bg-follower {
        display: block;
    }

    /* On Active: Fade out the white floor to reveal the follower behind */
    .process-step-card.is-active::before {
        opacity: 0;
    }

    .process-step-card.is-active {
        border-color: rgba(0, 0, 0, 0.05);
        /* Maintain border */
    }

    /* Text Color Changes */
    .process-step-card.is-active .process-number {
        color: rgba(255, 255, 255, 1);
    }

    .process-step-card.is-active .process-title {
        color: #fff;
    }

    .process-step-card.is-active .process-desc {
        color: rgba(255, 255, 255, 0.8);
    }
}

/* Mobile/Tablet (< 1200px): Standard CSS Hover */
@media (max-width: 1199.98px) {
    .process-bg-follower {
        display: none !important;
    }

    /* Revert to standard background on mobile */
    .process-step-card {
        background-color: #fff;
    }

    .process-step-card:hover {
        background: var(--primary-teal-dark);
        border-color: var(--primary-teal-dark);
        transform: translateY(-5px);
    }

    .process-step-card:hover .process-number {
        color: rgba(255, 255, 255, 0.6);
    }

    .process-step-card:hover .process-title {
        color: #fff;
    }

    .process-step-card:hover .process-desc {
        color: rgba(255, 255, 255);
    }

    .process-step-card::before {
        background: transparent !important;
    }
}

/* Connectors (Desktop Only) */
@media (min-width: 992px) {
    .process-grid {
        position: relative;
    }
}

/* ============================================
   FEATURE GRID MEDIA QUERIES
   ============================================ */
@media (max-width: 768px) {
    .feature-card {
        padding: 1.5rem;
    }
}

/* ============================================
   BLOG MEDIA QUERIES
   ============================================ */
@media (max-width: 991px) {
    .blog-hero {
        padding-top: 8rem;
        text-align: center;
    }

    .blog-subtitle,
    .modern-search-wrapper {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-categories {
        justify-content: center;
    }

    .blog-hero-visual {
        margin-top: 4rem;
        min-height: 300px;
    }

    .visual-card-stack {
        margin: 0 auto;
    }

    .blog-sidebar {
        position: static;
        margin-top: 3rem;
    }

    .blog-card-img-wrapper {
        height: 240px;
    }

    .blog-detail-title {
        font-size: 2rem;
    }

    .blog-detail-content {
        font-size: 1rem;
    }

    .blog-detail-content h2 {
        font-size: 1.75rem;
    }

    .blog-detail-content h3 {
        font-size: 1.35rem;
    }
}

@media (max-width: 767px) {
    .blog-hero {
        padding-top: 10rem;
        padding-bottom: 3rem;
    }

    .category-btn {
        font-size: 0.85rem;
        padding: 0.5rem 1.2rem;
    }

    .blog-card-content {
        padding: 1.5rem;
    }

    .blog-card-img-wrapper {
        height: 200px;
    }

    .blog-detail-meta {
        gap: 1rem;
    }

    .sidebar-widget {
        padding: 1.5rem;
    }

    .blog-share {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   PROJECT MODAL (Responsive)
   ============================================ */
@media (max-width: 1400px) {
    .project-modal-container {
        height: 600px;
    }
}

@media (max-width: 1250px) {
    .project-modal-container {
        height: 600px;
    }
}

@media (max-width: 1050px) {
    .project-modal-container {
        height: 450px;
    }
}

@media (max-width: 991px) {
    .project-modal {
        padding: 1rem;
    }

    .project-modal-container {
        height: auto !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    #modalProjectTitle {
        font-size: 2rem !important;
        margin-bottom: 1.5rem !important;
    }

    .project-modal-image-wrapper {
        min-height: 250px;
    }

    .project-modal-details {
        padding: 2rem !important;
    }
}

@media (max-width: 575px) {
    .project-info-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .project-modal-close {
        top: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
    }

    #modalProjectTitle {
        font-size: 1.75rem !important;
    }

    .info-item .h5 {
        font-size: 1rem !important;
    }

    .project-description p {
        font-size: 0.95rem !important;
    }
}