/**
Theme Name: CT Male
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ct-male
Template: astra
*/


/* ================================================================
   GLOBAL: Badge Styling (used in both archive and related cards)
   ================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
.term-badge,
.market-badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #A5B4A0;
  color: #2C2C2C;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  padding: 4px 13px;
  border-radius: 0;
  z-index: 2;
	
	width: auto; /* prevent full width */
  max-width: 90%; /* optional, to avoid overflow on smaller screens */
  display: inline-block; /* ensure it hugs the content */
  box-sizing: border-box; /* respect padding within width */
}

/* ========================================
   MEGA MENU: GENERAL STYLING
======================================== */



/* Align boxed content within mega menu columns */
.menu-right-column-inner-section,
.menu-left-column-inner-section {
  max-width: 750px;
}

.menu-right-column-inner-section {
  margin-left: 0;
  margin-right: auto;
}

.menu-left-column-inner-section {
  margin-left: auto;
  margin-right: 0;
}


/* ========================================
   MEGA MENU: LINK STYLING
======================================== */

/* Elementor default links */
.elementor a {
  text-decoration: underline;
}

.elementor a:hover {
  text-decoration: none;
}

/* Animated underline on hover for mega menu links */
.mega-menu-wrapper .uael-menu-item {
  position: relative;
  display: inline-block !important;
  text-decoration: none;
}

.mega-menu-wrapper .uael-menu-item::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.4s ease;
}

.mega-menu-wrapper .uael-menu-item:hover::after {
  width: 100%;
}


/* ========================================
   MEGA MENU: VISIBILITY & BEHAVIOR
======================================== */

/* Hidden state for mega menu */
.mega-menu-wrapper {
  position: absolute !important;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 9999;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

/* Show state when hovering */
.mega-menu-wrapper.visible {
  max-height: 1000px;
  opacity: 1;
  pointer-events: auto;
}


/* ========================================
   MEGA MENU: BACKGROUND IMAGE ON HOVER
======================================== */

/* Shared styling for left/right pseudo-image containers */
.mega-menu-wrapper::before,
.mega-menu-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 3;
}
.mega-menu-wrapper h3{
	font-size: 26px !important;
    font-weight: bold !important;
	position: relative !important;
  display: inline-block !important;
  z-index: 2 !important;
}
/*
.mega-menu-wrapper h3::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0.1em !important;
  width: 100% !important;
  height: 0.5em !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
*/
/* Left side image (shown when hovering right menu links) */
.mega-menu-wrapper::before {
  left: 0;
  background-image: var(--hover-left-image);
}

/* Right side image (shown when hovering left menu links) */
.mega-menu-wrapper::after {
  right: 0;
  background-image: var(--hover-right-image);
}

/* Fade image in when active */
.mega-menu-wrapper.show-before::before {
  opacity: 1;
}
.mega-menu-wrapper.show-after::after {
  opacity: 1;
}


/* ========================================
   OPTIONAL: MAKE SERVICES MENU 2 COLUMNS
======================================== */

/* Applies only to menu rendered in #menu-services */
#menu-services .uael-nav-menu {
  column-count: 2;
  column-gap: 40px; /* Adjust spacing between columns */
}

/* Prevent list items from breaking mid-item */
#menu-services .uael-nav-menu li {
  break-inside: avoid;
}

/* ========================================
   MEGA MENU: MOBILE STYLING (UNDER 1024PX)
======================================== */
@media screen and (max-width: 1024px) {
  /* 1. Hide background hover images on mobile */
  .mega-menu-wrapper::before,
  .mega-menu-wrapper::after {
    display: none !important;
  }

  /* 2. Stack columns vertically */
  

  .menu-left-column,
  .menu-right-column {
    width: 100% !important;
    max-width: none !important;
  }

  /* 3. Optional: Add spacing for mobile readability */
  .mega-menu-wrapper {
    padding: 20px 15px;
  }

  /* 4. Optional: Better touch spacing for links */
  .mega-menu-wrapper .uael-menu-item {
    padding: 12px 0;
    font-size: 16px;
  }

  /* 5. Optional: Mobile-only close button (if used) */
  .mega-menu-close {
    display: block;
    background: none;
    border: none;
    font-size: 16px;
    font-weight: bold;
    text-align: right;
    width: 100%;
    margin-bottom: 10px;
    cursor: pointer;
  }
}
/* ================================================================
   SECTION: Grid Container
   ================================================================ */
.related-projects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 30px;
}


/* ================================================================
   PROJECT CARD DIMENSIONS 
   ================================================================ */
.project-card {
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  flex: 1 1 calc(33.333% - 16px);    /* 3 per row */
  max-width: calc(33.333% - 16px);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}


@media screen and (max-width: 1024px) {
  .project-card {
    flex: 1 1 calc(50% - 12px);      /* 2 per row */
    max-width: calc(50% - 12px);
  }
}

@media screen and (max-width: 640px) {
  .project-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ================================================================
   PROJECT IMAGE – Fill the entire card with cropping
   ================================================================ */
.project-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* Crop to fill while maintaining center */
  z-index: 0;
}


/* ================================================================
   SECTION: Top-Left Term Badge
   Displays the market or service as a styled label
   ================================================================ */
.project-card .term-badge {
  
}
.project-card:hover .term-badge{
  color: #fff;
	background-color: #253746;
}


/* ================================================================
   SECTION: Bottom Overlay Gradient
   Displays project title on a gradient for readability
   ================================================================ */
.project-card .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 18px;
  padding-top: 100px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 87%);
  z-index: 1;
  min-height: 5.5em; /* taller space for multi-line titles */
  display: flex;
  align-items: flex-end;
}
.project-card:hover .overlay {
  background:  linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 61%);
}


/* ================================================================
   SECTION: Title Styling
   ================================================================ */
.project-card h4 {
  font-size: 30px;
  font-weight: 600;
  margin: 0;
  color: #fff;
  line-height: 1.2em;
}


/* ================================================================
   SECTION: Responsive Tweaks
   ================================================================ */
@media (max-width: 768px) {
  .project-card {
    max-width: 100%;
  }
}
@media (min-width: 1024px) {
  .mega-menu-close{
    display:none;
  }
}


.projects-archive-wrapper{
   width: 100%;
  max-width: 100%;
  
}
/* Filter bar */
.projects-filter-bar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin:20px 0;
  position: relative;
}

.filter-tab {
  flex: 1;
  padding: 12px;
  box-sizing: border-box;
}
#clear-filters{
  background-color: #ccc;
    padding: 5px 20px;
    font-size: 12px;
    text-transform: uppercase;
    margin-left: 30px;
}
#clear-filters:hover{
  background-color: #eee;

}
/* Make search input fill space */
#project-search-form input[type="search"] {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: none;
  outline: none;
  background: #fff;
  color: #333;
  box-sizing: border-box;
}

.search-tab {
  background: #6990b0;
}

.market-tab {
  background-color: #a4b29b;
    color: #222;
}

.service-tab {
  background-color: #3e5a71;
    color: #fff;
}

.dropdown-toggle {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  font-size: 16px;
  text-align: left;
  border: none;
  cursor: pointer;
  color: #fff;
	box-shadow: none !important;
}
.market-tab .dropdown-toggle {
  color: #222;
}
.dropdown-toggle:hover{
	background-color:unset;
	color: #fff;
}
.market-tab .dropdown-toggle:hover{
	background-color:unset;
	color: #222;
}
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%; /* full width of .projects-filter-bar */
  background: inherit;
  padding: 36px 80px;
  z-index: 10;
  flex-wrap: wrap;
  font-size: 16px;
	
}
@media (max-width: 768px) {
  .dropdown-menu {
  padding: 20px;
	
}
}
.filter-tab:hover .dropdown-menu {
   display: grid; /* Show as grid when open */
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 30px;
}
@media (max-width: 768px) {
  .filter-tab:hover .dropdown-menu {
    grid-template-columns: repeat(2, 1fr);
  }
}
.filter-tab:hover .dropdown-toggle .toggle-arrow{
	display: inline-block;
  transform: rotate(90deg);
  transition: transform 0.3s ease;
}

.dropdown-menu a {
 display: block;
  color: #fff;
  white-space: normal;
 line-height: 1.2em;
	margin-bottom: 8px;
}
.market-tab .dropdown-menu a {
 color: #222;
}

/* Project card */
.projects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 30px 0 80px 0;
  justify-content: flex-start;
	width: 100%;
  max-width: 100%;
}



.archive-project-card {
  background: #fff;
  box-shadow: none;
  overflow: hidden;
  position: relative;
  flex: 1 1 calc(33.333% - 16px);     /* ← 3 per row */
  max-width: calc(33.333% - 16px);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}



@media screen and (max-width: 1024px) {
  .archive-project-card {
    flex: 1 1 calc(50% - 12px);      /* 2 per row */
    max-width: calc(50% - 12px);
  }
}

@media screen and (max-width: 640px) {
  .archive-project-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}
.archive-project-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.archive-project-card .market-badge {
 
}
.archive-project-card:hover .market-badge{
  color: #fff;
	background-color: #253746;
}
.archive-project-card .project-meta {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px 18px;
  padding-top: 100px;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 87%);
  z-index: 1;
  min-height: 5.5em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.archive-project-card h4 {
  font-size: 30px;
  font-weight: 600;
  margin: 0;
  color: #fff;
  line-height: 1.2em;
}
.archive-project-card .services {
  font-size: 14px;
  color: #ddd;
}

/* ================================================================
   HOME Latest Projects - ARCHIVE CARD: Hover Overlay Matching Related Projects
   ================================================================ */
.projects-grid.latest {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 30px 0 80px 0;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
}

.projects-grid.latest .archive-project-card {
  flex: 1 1 calc(25% - 18px);
  max-width: calc(25% - 18px);
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: none;
  margin: 0; /* Ensure no outer spacing */
}
@media screen and (max-width: 1024px) {
  .projects-grid.latest .archive-project-card {
    flex: 1 1 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

@media screen and (max-width: 640px) {
  .projects-grid.latest .archive-project-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}



/* ================================================================
   ARCHIVE CARD: Hover Overlay Matching Related Projects
   ================================================================ */
.archive-project-card .project-meta {
  background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 87%);
  transition: background 0.3s ease;
}
.archive-project-card:hover .project-meta {
  background:  linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.82) 61%);
}
@media screen and (max-width: 1024px) {
  .projects-filter-bar {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .search-tab {
    width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box;
  }

  .market-tab,
  .service-tab {
    width: 50% !important;
    flex: 0 0 50% !important;
    box-sizing: border-box;
  }
}


/* ================================================================
   ARCHIVE FEATURED CARD
   ================================================================ */
.archive-project-card.featured-project {
  flex: 1 1 100%;
  max-width: 100%;
  display: block;
  aspect-ratio: unset;
  margin-bottom: 40px;
}

.archive-project-card.featured-project img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  position: relative;
}

.archive-project-card.featured-project .market-badge {
  
}
/* ================================================================
   Hide post navigation on single projects
   ================================================================ */
.single-project .post-navigation{
	display:none;
}