/*
Theme Name: Ewebot - Bento
Author: GT3themes
Author URI: http://gt3themes.com
Description: -
Version: 1.0
Template: ewebot
*/
@import url("../ewebot/style.css");

/* ==========================================================================
   GT3 Page Title — Heading sizes and padding by breakpoint
   ========================================================================== */

@media (min-width: 1025px) {
	.gt3-page-title { padding-top: 35px !important; }
	.gt3-page-title__content .page_title h1 { font-size: 69px !important; line-height: 1.2em !important; }
	.gt3-page-title__content .page_title h2 { font-size: 51px !important; line-height: 1.2em !important; }
	.gt3-page-title__content .page_title h3 { font-size: 35px !important; line-height: 1.2em !important; }
	.gt3-page-title__content .page_title { margin-bottom: 6px !important; }
}

@media (max-width: 1024px) {
	.gt3-page-title { padding-top: 0 !important; }
	.gt3-page-title__content .page_title h1 { font-size: 51px !important; line-height: 1.2em !important; }
	.gt3-page-title__content .page_title h2 { font-size: 35px !important; line-height: 1.2em !important; }
	.gt3-page-title__content .page_title h3 { font-size: 27px !important; line-height: 1.2em !important; }
}

@media (max-width: 767px) {
	.gt3-page-title { padding-top: 0 !important; }
	.gt3-page-title__content .page_title h1 { font-size: 35px !important; line-height: 1.2em !important; }
	.gt3-page-title__content .page_title h2 { font-size: 27px !important; line-height: 1.2em !important; }
	.gt3-page-title__content .page_title h3 { font-size: 21px !important; line-height: 1.2em !important; }
}

.gt3-page-title .page_title_meta { font-size: 15px !important; color: #2a4d62 !important; }

/* =============================================================
   Govanta — Case Studies / Portfolio Widget
   Widget: GT3 Portfolio | Mode: gt3-agency-style + hover_type2

   SCOPE: Add CSS class "govanta-case-study-grid" to the widget
   in Elementor → Advanced → CSS Classes. All rules below are
   scoped to that class so they only apply to this specific
   widget instance and won't bleed into other portfolio widgets.
   ============================================================= */


/* -------------------------------------------------------------
   1. FILTER BUTTONS — Layout, States, and Typography

   Theme default: active/hover bg is purple (#2c086b).
   This instance: active + hover both use brand teal (#6cb9bf).
   ------------------------------------------------------------- */

/* Filter container — full width with bottom margin */
.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope-filter {
	width: 100% !important;
	margin-bottom: 35px !important;
}

/* Filter font size and pill bottom margin (for row wrapping) */
.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope-filter a {
	font-size: 18px !important;
	/* margin-bottom: 10px !important; */
}

/* Default inactive text color */
.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope-filter a {
	color: #1a181b !important;
}

/* Active + Hover — brand teal bg, white text */
.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope-filter a.active,
.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope-filter a:hover {
	color: #fff !important;
}
.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope-filter a.active:before,
.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope-filter a:hover:before {
	background: #6cb9bf !important;
}


/* -------------------------------------------------------------
   2. CARD OVERLAY / IMAGE TINT

   Agency style inverts hover_type2: titles visible by default,
   fade out on hover. The tint lives on .img:after (not
   .text_wrap:before as in standard hover_type2).
   - Adjust opacity to lighten/darken (0.96 = strong)
   - border-radius matches .gt3-agency-style-border .img (30px)
     to prevent the overlay bleeding past rounded image corners
   ------------------------------------------------------------- */

.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .hover_type2 .wrapper .img:after {
	background: linear-gradient(180deg, rgba(41, 76, 98, 0) 10%, #294c62) !important;
	opacity: 0.96 !important;
	border-radius: 30px;
}


/* -------------------------------------------------------------
   3. TYPOGRAPHY — GLOBAL (all breakpoints)
   ------------------------------------------------------------- */

/* Category font size — overridden by display:none at 767px */
.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .wrapper .text_wrap .categories {
	font-size: 15px !important;
}


/* -------------------------------------------------------------
   4. ISOTOPE WRAPPER — Margin Overrides

   bento.css applies margin-left:-30px and margin-right:-60px
   globally, causing the grid to overflow the viewport.
   margin-right:-35px cancels the trailing gap after the last
   card in a row (matches gt3_packery_gap-35px class value).
   The widget's overflow:hidden clips the overhang cleanly.
   ------------------------------------------------------------- */

.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope_wrapper {
	margin-left: 0 !important;
	margin-right: -35px !important;
}


/* -------------------------------------------------------------
   5. RESPONSIVE — TABLET AND BELOW (max-width: 1024px)
   ------------------------------------------------------------- */

@media (max-width: 1024px) {

	/* Card title font size */
	.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .hover_type2 .wrapper .text_wrap .title {
		font-size: 24px !important;
	}

	/* Reduce space between title and categories */
	.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .wrapper .text_wrap .title {
		padding-bottom: 0.05em !important;
	}

}


/* -------------------------------------------------------------
   6. RESPONSIVE — MOBILE (max-width: 767px)
   ------------------------------------------------------------- */

@media (max-width: 767px) {

	/* Filter — centered flex layout with gap-based pill spacing.
	   Replaces margin-right on items so centering stays true
	   (trailing margin was throwing off justify-content). */
	.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope-filter {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		column-gap: 15px !important;
		row-gap: 15px !important;
	}

	/* Filter font size + remove margin-right (gap handles it) */
	.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope-filter a {
		font-size: 16px !important;
		margin-right: 0 !important;
	}

	/* Cards — force single-column stack.
	   Isotope JS sets position:absolute + left/top via inline
	   styles. These overrides reset to relative flow so cards
	   stack vertically instead of overlapping.
	   margin-right reset to 0 removes the -35px trailing gap
	   fix since single-column has no row gap to cancel. */
	.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope_wrapper {
		height: auto !important;
		display: flex !important;
		flex-direction: column !important;
		margin-right: 0 !important;
	}
	.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .isotope_item {
		position: relative !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
	}

	/* Card title font size */
	.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .hover_type2 .wrapper .text_wrap .title {
		font-size: 21px !important;
	}

	/* Hide categories on mobile */
	.elementor-widget-gt3-core-portfolio.govanta-case-study-grid .wrapper .text_wrap .categories {
		display: none !important;
	}

}