/*
 * Tessellated Tiles - Single CPT Layout CSS
 * Production ready styling with Figma responsive grid and micro-interactions.
 */

/* ==========================================================================
   1. Base Utilities & Containers
   ========================================================================== */
.tf-container {
        width: 100% !important;
    max-width: 1611px !important;
    margin: 0 auto;
}
.tf-related-gallery{
 padding : 110px 0px !important   
}
  .tf-patterns-section{
     padding :  110px 10px !important   
}

.tf-pattern-left{
 max-width : 648px;    
}
.tf-pattern-right{
 max-width : 809px ;    
}
.tf-container--narrow {
    width: min(1050px, 92%) !important;
    margin-top: 30px;
}

.tf-text-center {
    text-align: center;
}

.tf-text-white { color: #ffffff; }
.tf-text-olive { color: #888879; } /* Figma Accent Brand Tint */

.tf-single img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Fallback Placeholders Alignment */
.tf-fallback-placeholder {
    background-color: #111111;
    padding: 40px;
    object-fit: contain !important;
}
.tf-btn {
    line-height: 1.1 !important; 
}
/* ==========================================================================
   2. Typography & Header Elements
   ========================================================================== */
.tf-page-heading {
    padding: 80px;
    height: 100%;
    background: #F1F0EE;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tf-page-heading h1 {
    margin: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 65px; /* Responsive clamp for 85px desktop */
    line-height: 100%;
    letter-spacing: 0%;
}

.tf-single-title {
    margin: 0 0 40px;
    font-family: Inter, sans-serif !important;
    font-weight: 400 !important;
    font-style: normal;
    font-size: 45px !important; /* Responsive clamp for 55px */
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
}

/* ==========================================================================
   3. Single Gallery Details Layout
   ========================================================================== */
.tf-gallery-detail {
    padding: 20px 0 70px;
}

.tf-gallery-main-image img {
    width: 100%;
    aspect-ratio: 16 / 8.5;
    object-fit: cover;
}

.tf-gallery-extra-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 22px;
}

.tf-gallery-extra-image {
    margin: 0;
}

.tf-gallery-description {
    max-width: 820px;
    margin: 28px auto 0;
    line-height: 1.7;
}

/* Actions Bar Core Layout */
.tf-single-actions {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 40px;
    font-size: 14px;
}

.tf-action-left { text-align: left; }
.tf-action-center { text-align: center; }
.tf-action-right { text-align: right; }

.tf-single-actions a {
    color: #111;
    transition: color 0.2s ease;
    font-family: Inter;
    font-weight: 300;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0%;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-decoration-skip-ink: auto;
}

.tf-single-actions a:hover {
    color: #888879;
}

/* ==========================================================================
   4. Interactive Button Components
   ========================================================================== */
.tf-btn, button.tf-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px 52px;
    border: 1px solid #bdbdbd;
    background: transparent;
    color: #111111 !important;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
    font-family: Poppins;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: 0%;
    text-align: center;
    opacity: 1 !important;
    visibility: visible !important;
}
.tf-btn:hover,
button.tf-btn:hover {
    background: #111111;
    border-color: #111111;
    color: #ffffff !important;
}

.tf-btn--dark,
button.tf-btn--dark {
    border-color: #111111;
    background: #111111;
    color: #ffffff !important;
}

.tf-btn--dark:hover,
button.tf-btn--dark:hover {
    background: transparent;
    color: #111111 !important;
    border-color: #111111;
}

/* ==========================================================================
   5. Single Pattern Module Details (UPDATED)
   ========================================================================== */
.tf-pattern-hero {
    background: #111111;
    color: #ffffff;
    padding: 0; 
    height: 100%;
    display: flex;
    align-items: center;
}

.tf-pattern-hero__inner {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: flex-end;
    width: 100%;
    padding: 80px 10px; 
}

.tf-pattern-hero h1 {
    margin: 0 0 12px;
    font-weight: 400;
    color: #ffffff;
    font-family: Inter;
font-weight: 400;
font-style: Regular;
font-size: 65px;
line-height: 100%;
letter-spacing: 0%;

}

.tf-pattern-hero p {
    margin: 0;
    font-family: Poppins;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px !important;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -3%;
    color : #FFFFFF ;
}

.tf-hero-link {
    color: #ffffff !important;
    font-family: Poppins !important;
font-weight: 400;
font-style: Regular;
font-size: 24px;
line-height: 100%;
letter-spacing: -3%;

}



.tf-pattern-detail {
    padding: 94px 0px 0px 0px ;
}

.tf-pattern-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 49px;
    font-size: 14px;
}

.tf-pattern-nav a {
font-family: Poppins !important;
font-weight: 300;
font-style: Light;
font-size: 20px;
line-height: 100%;
letter-spacing: 0%;
text-decoration: underline;

}

/* Grid Matrix Distribution */
.tf-pattern-grid {
    display: flex;
   align-items: start;
    justify-content: space-between;
}
.tf-pattern-main-image img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 4 / 5;
    object-fit: cover; 
}

.tf-pattern-extra-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.tf-pattern-extra-images figure {
    margin: 0;
}

.tf-pattern-right h2 {
    margin: 0 0 18px;
    font-size: 32px;
    font-weight: 400;
}

.tf-pattern-description {
    margin-bottom: 48px;
    line-height: 1.6;
    font-family: Poppins;
font-weight: 400;
font-style: Regular;
font-size: 20px;
letter-spacing: 0%;
color: #535353 ;
}

.tf-pattern-meta-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 34px 0; /* Padding control for clean aesthetic presentation */
    border-top: 1px solid #A2A2A2;
    border-bottom: 1px solid #A2A2A2;
    margin-bottom: 29px;
    margin-top: 32px;
}

.tf-meta-box-left h3 {
    margin: 0 0 18px 0 !important;
    font-family: 'Inter' !important;
    font-size: 32px !important;
    font-weight: 400 !important;
    line-height: 100%;
    color: #111111;
    letter-spacing:-3%;
}

.tf-meta-box-left span {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #000000 ;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0;
}

.tf-meta-box-right .tf-btn {
    padding: 14px 52px !important; /* Retaining premium layout metrics safely */
    font-size: 20px !important;
    font-family: 'Poppins', sans-serif;
    line-height : 1.1 ;
}

.tf-pattern-bottom-links {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 37px;
    font-size: 14px;
}

.tf-pattern-bottom-links a {
    font-family: Inter;
font-weight: 300;
font-size: 20px;
line-height: 100%;
letter-spacing: 0%;
text-decoration: underline;
color : #000000;

}

.tf-section-heading h2 {
    color: #000000 !important; /* Tessellated ka color pure black */
}

.tf-section-heading h2 em {
    font-style: normal !important;
    color: #848672 !important; /* Tiles ka color exact brand tint */
}
/* ==========================================================================
   PATTERNS SWIPER — Pagination Dots/Pill Animation (Mobile Only)
   ========================================================================== */
.tf-pattern-swiper-pagination {
  display: none !important;
}
@media (max-width: 480px) {
  .tf-pattern-swiper-pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: relative !important;
    bottom: 0 !important;
    margin-top: 25px;
    width: 100% !important;
    z-index: 10;
  }
  .tf-pattern-swiper-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: #000000 !important;
    opacity: 0.25 !important;
    margin: 0 5px !important;
    border-radius: 50% !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: width, background;
    -webkit-transition: width 0.3s ease, border-radius 0.3s ease, opacity 0.3s ease !important;
    transition: width 0.3s ease, border-radius 0.3s ease, opacity 0.3s ease !important;
  }
  .tf-pattern-swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #000000 !important;
    width: 24px !important;
    border-radius: 4px !important;
  }
}

/* ==========================================================================
   GALLERY SWIPER — Pagination Dots/Pill Animation (Mobile Only)
   ========================================================================== */
.tf-gallery-swiper-pagination {
  display: none !important;
}
@media (max-width: 480px) {
  .tf-gallery-swiper-pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
    position: relative !important;
    bottom: 0 !important;
    margin-top: 25px;
    width: 100% !important;
    z-index: 10;
  }
  /* Standard Inactive Round Dot */
  .tf-gallery-swiper-pagination .swiper-pagination-bullet {
    width: 8px !important;
    height: 8px !important;
    background: #000000 !important;
    opacity: 0.25 !important;
    margin: 0 5px !important;
    border-radius: 50% !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: width, background;
    -webkit-transition: width 0.3s ease, border-radius 0.3s ease, opacity 0.3s ease !important;
    transition: width 0.3s ease, border-radius 0.3s ease, opacity 0.3s ease !important;
  }
  /* Active Pill/Capsule Design */
  .tf-gallery-swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #000000 !important;
    width: 24px !important;
    border-radius: 4px !important;
  }
}
/* ==========================================================================
   Pattern Left - Grey Overlay Block (Figma Design)
   ========================================================================== */
.tf-pattern-left {
    position: relative;
}

.tf-pattern-left::before {
    content: "";
    position: absolute;
    top: 160px;
    left: -158px;
    width: 50%;
    height: 62%;
    background: #F1F0EE;
    z-index: 0;
}

.tf-pattern-main-image,
.tf-pattern-extra-images {
    position: relative;
    z-index: 1;
}

@media (max-width: 1611px) {
    .tf-pattern-left::before {
        top: 25px;
        left: -25px;
    }
}

@media (max-width: 900px) {
    .tf-pattern-left::before {
        top: 20px;
        left: -20px;
        width: 92%;
        height: 92%;
    }
}

@media (max-width: 480px) {
    .tf-pattern-left::before {
        display: none;
    }
}


.tf-related-gallery {
    background: #f4f4f2;
    overflow: hidden !important; 
}

/* Base Flex Header Core */
.tf-section-heading {
    display: flex !important;
    justify-content: space-between !important;
   /* align-items: flex-end !important; */
    margin-bottom: 50px;
    width: 100% !important;
}
.tf-related-gallery .tf-section-heading {
    align-items: end !important;
}
.tf-patterns-section  .tf-section-heading{
        align-items: end !important;

}
/* Specific 70% Columns Control for Patterns Section */
.tf-section-heading--patterns > div {
    flex: 0 0 69% !important;
    max-width: 69% !important;
    width: 100% !important;
}

/* Specific 30% Anchor Control for Patterns Section */
.tf-section-heading--patterns > .tf-heading-archive-link {
    flex: 0 0 31% !important;
    max-width: 31% !important;
    width: 100% !important;
    text-align: right !important;
    color: #848672;
}
.tf-heading-archive-link {
    font-family: "Inter", sans-serif !important;
}
a.tf-heading-archive-link {
    font-family: "Inter", sans-serif !important;
     color : #848672 !important;

}

.tf-section-heading span {
    display: block;
    margin-bottom: 8px;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: -3%;
}

.tf-section-heading h2 {
    margin: 0;
    font-family: Inter, sans-serif;
    font-weight: 400;
    font-size: 65px;
    line-height: 100%;
    letter-spacing: 0%;
}

.tf-section-heading h2 em {
    font-style: normal;
    color: #888879;
}

.tf-section-heading p {
    max-width: 100% !important; 
    margin: 10px 0 0;
    color: #000000;
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: 0%;
}

.tf-heading-archive-link {
    text-decoration: underline;
    color: #111111;
    font-size: 15px;
}

/* ==========================================================================
   GALLERY SWIPER — Left clipped, right open (kept exactly as confirmed working)
   ========================================================================== */
.tf-swiper-outer-wrapper {
    padding-left: calc((100vw - 1611px) / 2) !important;
    width: 100%;
    overflow: visible !important;
}
.tf-swiper-clip-zone {
    overflow: visible !important;
    clip-path: inset(-50px -4000px -120px 0px) !important;
}
@media (max-width: 1611px) {
    .tf-swiper-outer-wrapper {
        padding-left: 0px !important;
    }
    .tf-related-gallery{
     padding : 110px 20px 110px 20px !important;   
    }
    .tf-patterns-section{
     padding : 10px 20px 110px 20px !important   
}
.tf-pattern-detail{
     padding :94px 20px 80px 20px !important;   
}
    .tf-pattern-grid{
   gap : 40px !important ;     
    }
   .tf-pattern-left{
     max-width : 50% !important;  
    }
       .tf-pattern-right{
     max-width : 50% !important;  
    }
}
@media (max-width: 768px) {
     .tf-pattern-left{
     max-width : 100% !important;  
    }
       .tf-pattern-right{
     max-width : 100% !important;  
    }
   .tf-pattern-bottom-links a {
    font-size: 16px !important;   
}

.tf-meta-box-right .tf-btn {
    padding: 14px 22px !important;
    font-size: 16px !important;
}

.tf-meta-box-left h3 {
    font-size: 22px !important;
}

.tf-meta-box-left span {
    font-size: 16px !important;
}

.tf-pattern-description {
    font-size: 16px !important;   
}

.tf-pattern-right h2 {
    font-size: 22px !important;   
}

.tf-pattern-grid {
    gap: 30px !important;
}

.tf-pattern-nav {
    margin-bottom: 30px !important;   
}

.tf-pattern-nav a {
    font-size: 16px !important;   
}

.tf-pattern-detail {
    padding: 30px 20px !important;   
}

.tf-hero-link {
    font-size: 16px !important;   
}

.tf-pattern-hero p {
    font-size: 16px !important;
}

.tf-pattern-hero h1 {
    font-size: 32px !important;
}

.tf-pattern-hero__inner {
    padding: 50px 20px !important;
}

.tf-pattern-grid {
    flex-direction: column !important;
}

    .tf-swiper-outer-wrapper {
        padding-left: 0px !important;
    }
    .tf-swiper-clip-zone {
        clip-path: none !important; /* Reset layout engine for flat standard mobile view */
        overflow: hidden !important;
    }
}

/* Force Swiper Instance view layer to stay active and visible */
.tf-gallery-swiper-slider {
    overflow: visible !important;
    width: 100% !important;
}

/* Flexbox Engine to force slides horizontally side-by-side */
.tf-gallery-swiper-slider .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.tf-gallery-swiper-slider .swiper-slide {
    width: 524px !important;
    flex-shrink: 0 !important;
    height: auto !important;
}
@media (max-width: 1024px) {
 .tf-section-heading--patterns > .tf-heading-archive-link{
         flex: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    }
}
@media (max-width: 768px) {
    .tf-gallery-swiper-slider .swiper-slide {
        width: 100% !important;
    }
    .tf-gallery-card h3.tf-gallery-card__title{
     font-size : 16px !important;   
    }
    .tf-gallery-swiper-slider {
        overflow: hidden !important;
    }
    .tf-section-heading{
        display : flex ;
     alig-items : flex-start !important ;
     flex-direction : column !important;
    }
   
   .tf-section-heading--patterns > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
    .tf-section-heading--patterns > .tf-heading-archive-link {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
        
}
}

/* ==========================================================================
   PATTERNS SWIPER — Both sides clipped/hidden (new, as requested)
   ========================================================================== */
.tf-swiper-outer-wrapper--patterns {
    padding-left: 0 !important; /* No left bleed needed; container already centers content */
    width: 100%;
    overflow: hidden !important; /* Hides overflow on BOTH sides */
}

.tf-swiper-clip-zone--patterns {
    overflow: hidden !important; /* Hides overflow on BOTH sides */
    clip-path: none !important;  /* No clip-path needed since overflow:hidden already does both sides */
}

.tf-pattern-swiper-slider {
    overflow: hidden !important;
    width: 100% !important;
}

.tf-pattern-swiper-slider .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
}

.tf-pattern-swiper-slider .swiper-slide {
    width: 306px !important; 
    flex-shrink: 0 !important;
    height: auto !important;
}


@media (max-width: 1611px) {
.tf-container--narrow{
    padding : 0px 20px ;
    }
}

@media (max-width: 1280px) and (min-width: 800px) { 
    .tf-single-title{
     font-size : 35px !important ; 
        line-height : 1.5 !important ;
    }
}
@media (max-width: 900px) {
    .tf-pattern-swiper-slider .swiper-slide {
        width: calc((100% - 18px * 2) / 3) !important;
    }
}

@media (max-width: 768px) {
    .tf-related-gallery .tf-section-heading{
     align-items: start !important ;   
    }
    .tf-single-title{
     margin : 0 0 20px !important;   
    }
    .tf-gallery-card__btn-wrap a.tf-gallery-card__btn{
     padding : 14px 22px !important;   
     font-size : 16px !important ;   
    }
    .tf-gallery-card h3.tf-gallery-card__title{
     margin : 17px 0 30px !important;   
    }
 .tf-pattern-meta-box {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .tf-meta-box-right {
        width: 100%;
    }
   
    .tf-related-gallery{
     padding: 30px 20px !important;   
}
    .tf-pattern-swiper-slider .swiper-slide {
        width: 100% !important;
    }
    .tf-page-heading h1{
        font-size: 32px !important;
    }
    .tf-page-heading{
     padding: 50px 20px!important ;   
    }
    .tf-single-title {
        font-size: 18px !important;
        line-height: 1.5 !important;   
    }
    .tf-single-actions{
        display: flex !important;
        justify-content: space-between !important;
    }
    .tf-single-actions a {
     font-size: 16px !important;   
    }
    .tf-container--narrow{
     margin-top : 5px !important;   
    }
.tf-gallery-detail{
    padding : 20px 0px 30px 0px !important;
    }
.tf-btn, button.tf-btn {
    padding : 14px 22px !important;
    font-size : 16px !important; 
    }
}

/* Image Container - Black background strip COMPLETELY removed */
.tf-gallery-card__image-container {
    position: relative !important;
    width: 100% !important;
    max-width: 626px !important;
    height: 385px !important; /* Precision aspect matching instead of typing error 47 */
    overflow: hidden !important;
    background: transparent !important; /* Pure black stripe strip killed */
    background-color: transparent !important;
}

.tf-gallery-img-base {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Stops images from stretching out */
    background: transparent !important;
}

/* Pure Figma Mask Interaction Overlay CSS */
.tf-gallery-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(17, 17, 17, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    text-decoration: none;
}

.tf-overlay-interaction-box {
    text-align: center;
    transform: translateY(15px);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px; 
}

/* NO2: WebP Custom Image Styling Specification */
.tf-overlay-icon-webp {
    width: 100% !important;
    max-width: 73px !important; /* Exact custom bounding box requirement */
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

/* NO2: View Project Premium Font System Customization */
.tf-overlay-typography {
    display: block;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important; /* Medium variant mapping */
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 100% !important;
    letter-spacing: 0% !important;
    text-transform: uppercase;
}

/* Specific split color scopes */
.tf-overlay-typography .tf-text-white {
    color: #ffffff !important;
}

.tf-overlay-typography .tf-text-olive-light {
    color: #A6A891 !important; /* Precise hexadecimal corporate brand tone requested */
}

/* Hover Hook States */

.tf-gallery-card__image-container:hover .tf-gallery-card__overlay {
    opacity: 1;
}

.tf-gallery-card__image-container:hover .tf-overlay-interaction-box {
    transform: translateY(0);
}

.tf-gallery-card h3.tf-gallery-card__title {
    margin: 17px 0 45px;
    font-family: Poppins;
    font-weight: 300;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 0%;
}

.tf-gallery-card__btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 150px;
    padding: 14px 63px  !important;
    border: 1px solid #bdbdbd;
    background: transparent;
    text-decoration: none;
    transition: all 0.25s ease-in-out;
    text-align: center;
}
.tf-gallery-card-grid .tf-gallery-card__btn {
    padding: 14px 63px !important;
}

/* Pattern Cards Matrix (kept for non-swiper fallback / single pattern listings elsewhere) */
.tf-pattern-card-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.tf-pattern-card {
    transition: transform 0.25s ease;
}

.tf-pattern-card:hover {
    transform: translateY(-4px);
}

/* Purana rule dhundiye aur is poore custom section se badal dein */
.tf-pattern-card__image {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 403px !important; /* Strict height box for patterns */
    overflow: hidden !important;
}

/* --- UPDATE: Iske exact niche ye naye selector rules paste kar dein --- */
.tf-pattern-card__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(177, 177, 177, 0.65) !important; /* Premium Figma translucent grey overlay */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out !important;
    pointer-events: none;
}

.tf-pattern-card__overlay span {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 20px !important;
    line-height: 100% !important;
    letter-spacing: 0% !important;
    color: #111111 !important; /* Premium dark clean text */
    text-align: center;
    transform: translateY(12px);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}


.tf-pattern-card__image:hover .tf-pattern-card__overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

.tf-pattern-card__image:hover .tf-pattern-card__overlay span {
    transform: translateY(0) !important; /* Smooth upward animation element glide */
}

.tf-pattern-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Image ko stretch hone se bachayega */
}

.tf-pattern-card__title {
    margin: 14px 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}

.tf-pattern-card__title a {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: -3%;
    text-align: center;
    color: #000000;
}


/* ==========================================================================
   Patterns section action buttons — forced visible, never collapsed
   ========================================================================== */
.tf-patterns-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 21px;
    margin-top: 92px;
    visibility: visible !important;
    opacity: 1 !important;
}

.tf-patterns-actions .tf-btn, .tf-patterns-actions a.tf-btn, .tf-patterns-actions button.tf-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 14px 52px !important;
    font-size: 20px !important;
    font-weight: 300 !important;
}

.tf-gallery-card__btn-wrap a.tf-gallery-card__btn {
    padding: 14px 52px ;
}


.tf-enquiry-modal button:not(.tf-btn), 
.tf-enquiry-modal__box button:not(.tf-btn),
.tf-enquiry-modal__box input[type="submit"],
.wpforms-submit-container button:not(.tf-btn) {
    padding: 0 !important;
    width: auto !important;
    min-width: auto !important;
}

/* ==========================================================================
   7. Smooth Animation Enquiry Popup Modal
   ========================================================================== */
/* ==========================================================================
   TF ENQUIRY POPUP — CLEAN, COMPACT, FLUID, FULLY SELF-CONTAINED
   All selectors prefixed with #tfEnquiryModal so nothing outside can
   override this modal's styling (page CSS, Customizer CSS, etc.)
   ========================================================================== */

/* 1. Modal Main Layout Rules (Zero Scrollbar, Fits Any Screen Height) */
#tfEnquiryModal.tf-enquiry-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

#tfEnquiryModal.tf-enquiry-modal.is-active {
    opacity: 1;
    pointer-events: auto;
}

#tfEnquiryModal .tf-enquiry-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10001;
}

#tfEnquiryModal .tf-enquiry-modal__box {
    position: relative;
    max-width: 500px !important;
    width: min(500px, 92vw) !important;
    background: #ffffff;
    box-sizing: border-box;
    max-height: 92dvh !important;   /* fits any screen height, no cut-off */
    overflow: hidden !important;     /* scroll strictly band */
    display: flex !important;
    flex-direction: column !important;
    padding: clamp(14px, 3.5vh, 25px) clamp(16px, 4vw, 30px) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10002;
}

#tfEnquiryModal.tf-enquiry-modal.is-active .tf-enquiry-modal__box {
    transform: scale(1);
}

/* 2. Header and Controls */
#tfEnquiryModal .tf-enquiry-modal__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: clamp(6px, 1.8vh, 15px) !important;
    width: 100%;
}

#tfEnquiryModal #tfEnquiryModalTitle {
    font-family: 'Inter', sans-serif;
    font-size: clamp(17px, 2.6vh, 22px) !important;
    font-weight: 600;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: #1a1a1a;
}

#tfEnquiryModal .tf-enquiry-modal__close {
    background: transparent !important;
    border: 1px solid #ccc !important;
    outline: none !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: #333 !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0 2px 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

#tfEnquiryModal .tf-enquiry-modal__close:hover {
    border-color: #1a1a1a !important;
    color: #000 !important;
}

/* 3. Form Container */
#tfEnquiryModal .tf-enquiry-modal__form .wpforms-container {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Disable Pattern Dropdown Selection */
#tfEnquiryModal select {
    pointer-events: none !important;
    background-color: #fafafa !important;
    color: #555 !important;
    cursor: not-allowed !important;
}

/* WPForms field wrapper spacing */
#tfEnquiryModal .tf-enquiry-modal__box .wpforms-field {
    padding: clamp(3px, 0.9vh, 10px) 0 !important;
}

#tfEnquiryModal .tf-enquiry-modal__box .wpforms-field-label {
    font-size: clamp(13px, 1.5vh, 16px) !important;
    margin-bottom: clamp(2px, 0.6vh, 6px) !important;
}

/* Text/email/tel inputs + select + textarea — this beats ANY outside rule */
#tfEnquiryModal .tf-enquiry-modal__box input[type="text"],
#tfEnquiryModal .tf-enquiry-modal__box input[type="email"],
#tfEnquiryModal .tf-enquiry-modal__box input[type="tel"],
#tfEnquiryModal .tf-enquiry-modal__box select,
#tfEnquiryModal .tf-enquiry-modal__box textarea {
    padding: clamp(7px, 1.4vh, 15px) 15px !important;
    font-size: clamp(13px, 1.5vh, 16px) !important;
    height: auto !important;
    width: 100% !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}
.tf-enquiry-modal input.js-enquiry-pattern,
.tf-enquiry-modal .js-enquiry-pattern input[readonly] {
    color: #000000 !important; /* placeholder jaisa grey color */
}

/* Message textarea — biggest space eater, shrink first on short screens */
#tfEnquiryModal .tf-enquiry-modal__box textarea#wpforms-2077-field_5 {
    height: clamp(40px, 8vh, 100px) !important;
    min-height: 40px !important;
    font-size: clamp(13px, 1.5vh, 16px) !important;
    padding: clamp(6px, 1.2vh, 12px) 15px !important;
}

/* Submit Container and Button adjustments */
#tfEnquiryModal .wpforms-submit-container {
    margin-top: clamp(6px, 1.5vh, 15px) !important;
    padding: 0 !important;
}
/* 1. Modal Close (Cross) Button Style */
#tfEnquiryModal .tf-enquiry-modal_close {
    /* Cross button ki apni default padding yahan set karein */
    padding: 8px !important; 
}

/* 2. Sirf Submit Button Style */
#tfEnquiryModal .wpforms-submit {
    padding: 14px 52px !important; /* Agar responsive top-bottom chahiye to: clamp(8px, 1.4vh, 14px) 52px !important; */
    font-size: clamp(13px, 1.5vh, 16px) !important;
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
}

/* 4. Misc Layout Utilities */
#tfEnquiryModal .tf-enquiry-modal__item {
    font-size: 14px;
    margin: 0 0 clamp(8px, 1.5vh, 15px);
    padding: 10px 14px;
    background: #f7f7f5;
    border-left: 3px solid #888879;
}

#tfEnquiryModal .tf-highlight-title {
    color: #888879;
    font-weight: 500;
    margin-left: 4px;
}

body.tf-modal-open {
    overflow: hidden !important;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
    #tfEnquiryModal .tf-enquiry-modal__box {
        padding: clamp(14px, 3.5vh, 20px) 20px !important;
    }
}

/* ==========================================================================
   5. Extra-compact fallback for SHORT-HEIGHT screens
   (fixes cut-off on devices like Galaxy Note II, small landscape, etc.)
   ========================================================================== */

@media (max-height: 700px) {
    #tfEnquiryModal .tf-enquiry-modal__box {
        max-height: 96dvh !important;
        padding: 10px clamp(16px, 4vw, 24px) !important;
    }
    #tfEnquiryModal .tf-enquiry-modal__header {
        margin-bottom: 4px !important;
    }
    #tfEnquiryModal #tfEnquiryModalTitle {
        font-size: 16px !important;
    }
    #tfEnquiryModal .tf-enquiry-modal__box .wpforms-field {
        padding: 2px 0 !important;
    }
    #tfEnquiryModal .tf-enquiry-modal__box .wpforms-field-label {
        font-size: 12px !important;
        margin-bottom: 1px !important;
    }
    #tfEnquiryModal .tf-enquiry-modal__box input[type="text"],
    #tfEnquiryModal .tf-enquiry-modal__box input[type="email"],
    #tfEnquiryModal .tf-enquiry-modal__box input[type="tel"],
    #tfEnquiryModal .tf-enquiry-modal__box select {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    #tfEnquiryModal .tf-enquiry-modal__box textarea#wpforms-2077-field_5 {
        height: 30px !important;
        min-height: 30px !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
    }
    #tfEnquiryModal .wpforms-submit-container {
        margin-top: 4px !important;
    }
    #tfEnquiryModal .tf-enquiry-modal__box button[type="submit"].wpforms-submit {
        padding: 6px 18px !important;
        font-size: 12px !important;
    }
}

@media (max-height: 560px) {
    #tfEnquiryModal .tf-enquiry-modal__box {
        padding: 6px clamp(14px, 4vw, 20px) !important;
    }
    #tfEnquiryModal #tfEnquiryModalTitle {
        font-size: 14px !important;
    }
    #tfEnquiryModal .tf-enquiry-modal__box .wpforms-field-label {
        font-size: 11px !important;
    }
    #tfEnquiryModal .tf-enquiry-modal__box input[type="text"],
    #tfEnquiryModal .tf-enquiry-modal__box input[type="email"],
    #tfEnquiryModal .tf-enquiry-modal__box input[type="tel"],
    #tfEnquiryModal .tf-enquiry-modal__box select {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }
    #tfEnquiryModal .tf-enquiry-modal__box textarea#wpforms-2077-field_5 {
        height: 22px !important;
        min-height: 22px !important;
    }
}
/* ==========================================================================
   8. Responsive Media Queries
   ========================================================================== */
@media (max-width: 900px) {
    .tf-pattern-grid,
    .tf-gallery-card-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .tf-pattern-card-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .tf-gallery-extra-images {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tf-pattern-hero__inner,
    .tf-section-heading {
        gap: 16px;
    }
    .tf-enquiry-modal {
     margin:0px 20px ;    
    }
}

@media (max-width: 640px) {

.tf-single-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.tf-action-left, .tf-action-right {
    flex: 1 !important; /* Dono side barabar space lengi */
}
.tf-action-center {
    flex: 0 0 auto !important; /* Enquire button rigid center mein rahega */
    text-align: center !important;
}

    .tf-single-actions {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
   
    .tf-pattern-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tf-patterns-actions {
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 20px !important;
    }
        
    .tf-enquiry-modal__box {
        padding: 30px 20px;
    }
    .tf-pattern-card__title a{
        font-size: 18px !important;
        font-weight: 500 !important;
}
    h3.tf-pattern-card__title {
        font-size: 18px !important;
        padding-bottom : 10px !important;
    }
    .tf-pattern-card__title{
     margin : 30px 0 0 !important;   
    }
}
/* ==========================================================================
   9. Single Gallery — Dedicated Responsive Fixes (Tablet + Mobile)
   ========================================================================== */

/* ---- TABLET (901px - 1024px): tighten up the spacing a bit ---- */
@media (max-width: 1024px) {
    .tf-gallery-detail {
        padding: 20px 0 60px;
    }
}

/* ---- TABLET (641px - 900px): 2-column extra images grid ---- */
@media (max-width: 900px) {
    
    .tf-gallery-main-image img {
        aspect-ratio: 16 / 10; /* slightly taller than desktop so the subject isn't squeezed */
    }

    .tf-gallery-extra-images {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on tablet */
        gap: 14px;
        margin-top: 18px;
    }

    .tf-gallery-description {
        max-width: 100%;
        padding: 0 10px;
    }
}

/* ---- MOBILE (≤640px): single-column slideshow-style stack ---- */
@media (max-width: 640px) {
    .tf-container--narrow{
    padding : 0px 0px !important ;
    }
    .tf-enquiry-modal__close{
     top: 28px !important;   
    }
   
    div#wpforms-2077.wpforms-container textarea{
      font-size : 16px !important ;
        padding : 12px 15px !important;
    }
    div#wpforms-2077.wpforms-container button[type="submit"].wpforms-submit{
     padding : 14px  22px !important ;
        font-size : 16px !important ;
    }
  
    div#wpforms-2077.tf-enquiry-modal__header{
        margin-bottom : 15px !important;
    }
div.wpforms-container-full .wpforms-form .wpforms-submit-container{
    margin-top:15px !important ;
    }
    div#wpforms-2077.wpforms-container input[type="text"]{
        font-size: 16px !important ;
    }
 div#wpforms-2077.wpforms-container input[type="email"]{
    padding: 10px 15px !important;
    font-size: 16px !important;
}
    div#wpforms-2077.wpforms-container .wpforms-field-label{
                font-size: 16px !important ;
    }
div#wpforms-2077.wpforms-container .wpforms-field {
        padding : 10px 0px !important;
       
    }
    div#wpforms-2077.wpforms-container select.wpforms-field-medium{
        padding : 10px 15px !important ;
        font-size: 16px !important;
    }
  .wpforms-container input[type="text"]{
    padding: 10px 14px !important;
}
.wpforms-container input[type="text"], .wpforms-container input[type="email"], .wpforms-container textarea{

    padding: 10px 14px !important;

}
    #wpforms-2077-field_5 {
    height: 100px !important; 
    min-height: auto !important; 
}

    .tf-gallery-main-image img {
        aspect-ratio: 4 / 3;
        border-radius: 2px;
    }

    /* Extra images: force back to ONE column, full width, stacked like a slideshow */
    .tf-gallery-extra-images {
        grid-template-columns: 1fr !important;
        gap: 16px;
        margin-top: 16px;
    }

    .tf-gallery-extra-image img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 2px;
    }

    .tf-gallery-description {
        max-width: 100%;
        padding: 0 4px;
        font-size: 15px;
        line-height: 1.65;
    }

    .tf-gallery-description p {
        margin: 0 0 16px;
    }
    .tf-section-heading--patterns > div{
     flex: 0 0 100% !important;
    max-width: 100% !important;   
    }
    .tf-section-heading span{
     font-size : 18px !important;   
    }
    .tf-section-heading h2{
    font-size : 22px;    
    }
    .tf-section-heading p{
     font-size : 16px !important ;   
    }
    .tf-section-heading--patterns > .tf-heading-archive-link{
     flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    font-size: 16px !important;   
    }
    .tf-patterns-section{
     padding: 30px 20px !important;   
    }
    .tf-patterns-actions .tf-btn, .tf-patterns-actions a.tf-btn, .tf-patterns-actions button.tf-btn{
     font-size: 16px !important;
        padding: 14px 22px 14px 22px !important;
       
    }
    .tf-patterns-actions{
     flex-direction : row !important;   
    }
    .tf-section-heading{
     margin-bottom : 30px !important;   
    }
}

/* ---- Extra-small phones (≤380px): tighten further ---- */
@media (max-width: 380px) {
    .tf-single-title {
        font-size: 18px !important;
    }

      {
        font-size: 28px !important;
    }

    .tf-gallery-detail {
        padding: 30px 0 40px !important;
    }

    .tf-btn, button.tf-btn {
        padding: 12px 18px !important;
        font-size: 16px !important;
    }

    .tf-single-actions a {
        font-size: 14px !important;
    }
}
@media screen and (min-width: 900px) and (max-width: 1441px){
    .wpforms-form textarea#wpforms-2077-field_5 {
        height: 90px !important;
        min-height: 90px !important;
    }
}