/*!
Theme Name: Shopify Templates
Theme URI: http://underscores.me/
Author: Webrito
Author URI: https://webrito.com/
Description: Creative Agency and Startup Theme
Version: 25.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: shopifytemplates
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Shopify Templates is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

.tab-link.w--current .tab-icon-img{
opacity:0 !important;
}
.tab-link.w--current .tab-icon-img-two{
opacity:1 !important;
}
.contact-box-td{
	margin-top:25px;
	margin-bottom:25px;
}
.contact-tag a{
	text-decoration:none;
	color:inherit;
}

/* ===========================
 * Desktop main nav hover
 * =========================== */

/* Wrapper and internal structure */
.link-hover-main-box {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.link-hover-main-box .link-hover-box {
	position: relative;
	overflow: hidden;
}

/* Top text & hover text stacked vertically */
.link-hover-main-box .navigation-link,
.link-hover-main-box .link-hover-second-text {
	display: block;
	transform: translateY(0);
	transition: transform 0.3s ease;
	will-change: transform;
}

/* Second line starts "hidden" below */
.link-hover-main-box .link-hover-second-text {
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(100%);
}

/* On hover: slide first text up, second one into view */
.link-hover-main-box:hover .navigation-link {
	transform: translateY(-100%);
}

.link-hover-main-box:hover .link-hover-second-text {
	transform: translateY(0);
}

/* Underline / border animation */
.link-hover-main-box .link-border {
	height: 1px;
	width: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.link-hover-main-box:hover .link-border {
	transform: scaleX(1);
}
/* ===========================
 * Desktop main nav hover
 * =========================== */

/* Wrapper and internal structure */
.link-hover-main-box {
	position: relative;
	display: inline-block;
	text-decoration: none;
}

.link-hover-main-box .link-hover-box {
	position: relative;
	overflow: hidden;
}

/* Top text & hover text stacked vertically */
.link-hover-main-box .navigation-link,
.link-hover-main-box .link-hover-second-text {
	display: block;
	transform: translateY(0);
	transition: transform 0.3s ease;
	will-change: transform;
}

/* Second line starts "hidden" below */
.link-hover-main-box .link-hover-second-text {
	position: absolute;
	left: 0;
	top: 0;
	transform: translateY(100%);
}

/* On hover: slide first text up, second one into view */
.link-hover-main-box:hover .navigation-link {
	transform: translateY(-100%);
}

.link-hover-main-box:hover .link-hover-second-text {
	transform: translateY(0);
}

/* Underline / border animation */
.link-hover-main-box .link-border {
	height: 1px;
	width: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.link-hover-main-box:hover .link-border {
	transform: scaleX(1);
}

/* ==========================
 * Global button hover effect
 * Works for:
 * .bg-behind-button
 * .bg-behind-button-three
 * .bg-behind-button-three-middle
 * ========================== */

.bg-behind-button .wrapper,
.bg-behind-button-three .wrapper,
.bg-behind-button-three-middle .wrapper {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden; /* hides sliding text */
}

/* Base text styles */
.bg-behind-button .primary-button-text,
.bg-behind-button-three .primary-button-text,
.bg-behind-button-three-middle .primary-button-text {
	display: block;
	transition: transform 0.3s ease;
	will-change: transform;
	transform: translateY(0);
}

/* Second line sits exactly on top but starts below */
.bg-behind-button .primary-button-text.absolute,
.bg-behind-button-three .primary-button-text.absolute,
.bg-behind-button-three-middle .primary-button-text.absolute {
	position: absolute;
	left: 0;
	right: 0;
	transform: translateY(100%);
}

/* Hover: slide first text up, second text into view */
.bg-behind-button:hover .primary-button-text:not(.absolute),
.bg-behind-button-three:hover .primary-button-text:not(.absolute),
.bg-behind-button-three-middle:hover .primary-button-text:not(.absolute) {
	transform: translateY(-100%);
}

.bg-behind-button:hover .primary-button-text.absolute,
.bg-behind-button-three:hover .primary-button-text.absolute,
.bg-behind-button-three-middle:hover .primary-button-text.absolute {
	transform: translateY(0);
}
.relative{
    position: relative;
}
.field-label br{
	display:none !important
}

/***************************************************
 * Floating "Hire Us" pill – collapsed + slide out
 ***************************************************/

/* Fixed wrapper – right middle */
.hire-pill-fixed {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
}

/* Full pill (we’ll slide it in/out) */
.hire-pill {
	    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0 10px 4px;
    height: 56px;
    border-radius: 999px 0 0 999px;
    background: linear-gradient(92.19deg, #55C258 0%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.6) 75%, #11B58A 100%);
    color: #05030e;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transform-origin: center right;
    transform: translateX(calc(100% - 56px));
    transition: transform 0.25s 
ease-out, box-shadow 0.18s 
ease, filter 0.18s 
ease;
}


.hire-pill-inner{
	    background: rgba(216, 239, 85, 1);
    border-radius: 99px 0 0 99px;
    display: flex;
    align-items: center;
    height: 50px;
    width: 100%;
    padding-right: 5px;
}
/* Icon area – this part stays visible even when collapsed */
.hire-pill__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;                    /* same as visible width in collapsed state */
	height: 56px;
}

/* Icon image */
.hire-pill__icon img {
	display: block;
	max-width: 26px;
	max-height: 26px;
}

/* Text */
.hire-pill__label {
	position: relative;
	z-index: 1;
}


.wp-block-edd-checkout #edd_purchase_form .edd-blocks-form input[type=email], .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form input[type=password], .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form input[type=tel], .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form input[type=text], .wp-block-edd-checkout #edd_purchase_form .edd-blocks-form select {
    box-sizing: border-box;
    display: block;
    padding: 4px 6px;
    width: 100%;
    width: var(--global-size--100);
    font-family: var(--font-family--font-family);
    color: var(--_color---normal--body-text);
    font-size: var(--font-size--font-size-14);
    line-height: var(--line-height--line-height-150);
    font-weight: var(--font-weight--normal);
    background-color: #f7fcdd;
    border: 1px solid #07513f66;
    border-radius: 8px;
    height: 53px;
    margin-bottom: 0;
    padding: 18px;
    transition: all .5s;
}
/* Optional: tweak for small screens */
@media (max-width: 767px) {
	.hire-pill {
		height: 48px;
		transform: translateX(calc(100% - 48px));
	}
	.hire-pill__icon {
		width: 48px;
		height: 48px;
	}
}

.comments-title{
	font-size:24px;
	margin-bottom:32px;
}
/* ===============================
   COMMENTS WRAPPER
   =============================== */

   #comments {
	margin-top: var(--_common-spacing---padding--margin--spacing-40);
	padding: var(--_common-spacing---padding--margin--spacing-32);
	background: var(--_color---normal--background);
	border-radius: var(--bordar-radius--bordar-radius-32);
  }
  
  /* Title */
  #comments .comments-title {
	margin: 0 0 var(--_common-spacing---padding--margin--spacing-24);
	font-family: var(--_text---h4--font-family);
	font-size: var(--_text---h4--font-size);
	line-height: var(--_text---h4--line-height);
	font-weight: var(--_text---h4--font-weight);
	letter-spacing: var(--_text---h4--letter-spacing);
	color: var(--_color---normal--dark);
  }
  
  /* ===============================
	 COMMENT LIST BASIC RESET
	 =============================== */
  
  .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
  }
  
  .comment-list > li {
	margin: 0 0 var(--_common-spacing---padding--margin--spacing-16);
  }
  
  /* Each individual comment "card" */
  .comment-body {
	position: relative;
	
	gap: var(--_common-spacing---gap--gap-16);
	padding: var(--_common-spacing---padding--margin--spacing-20);
	background: var(--_color---normal--white);
	border-radius: var(--bordar-radius--bordar-radius-24, 24px);
	border: 1px solid var(--_color---normal--border-secondary);
  }
  
  /* ===============================
	 AVATAR / AUTHOR
	 =============================== */
  
  .comment-author {
	display: flex;
	align-items: center;
	gap: var(--_common-spacing---gap--gap-8);
  }
  
  /* Avatar */
  .comment-author .avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--bordar-radius--round);
	border: 2px solid var(--_color---normal--secondary);
	object-fit: cover;
  }
  
  /* Name */
  .comment-author .fn {
	font-family: var(--_text---body-text--font-family);
	font-size: var(--font-size--font-size-14);
	font-weight: var(--font-weight--medium);
	line-height: var(--line-height--line-height-150);
	color: var(--_color---normal--dark);
  }
  
  /* "says:" text */
  .comment-author .says {
	display: none;
  }
  
  /* ===============================
	 COMMENT META (NAME + DATE + LINK)
	 =============================== */
  
  .comment-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--_common-spacing---gap--gap-8);
	margin-bottom: var(--_common-spacing---padding--margin--spacing-8);
  }
  
  .comment-metadata {
	font-family: var(--_text---body-small--font-family);
	font-size: var(--_text---body-small--font-size);
	line-height: var(--_text---body-small--line-height);
	color: var(--_color---normal--color);
	display: flex;
	gap:20px;
  }
  
  .comment-metadata a {
	color: inherit;
	text-decoration: none;
  }
  
  .comment-metadata a:hover,
  .comment-metadata a:focus,
  .logged-in-as a {
	color: var(--_color---normal--primary);
	text-decoration: underline;
  }
  .comment-author a{
	color: var(--_color---normal--primary);
	text-decoration: none;
  }
  
  /* ===============================
	 COMMENT CONTENT
	 =============================== */
  
  .comment-content {
	margin-top: var(--_common-spacing---padding--margin--spacing-4);
  }
  
  .comment-content p {
	margin: 0 0 var(--_common-spacing---padding--margin--spacing-10);
	font-family: var(--_text---body-text--font-family);
	font-size: var(--_text---body-text--font-size);
	line-height: var(--_text---body-text--line-height);
	font-weight: var(--_text---body-text--font-weight);
	color: var(--_color---normal--body-text);
  }
  
  /* Links inside comment text */
  .comment-content a {
	color: var(--_color---normal--primary);
	text-decoration: underline;
  }
  
  .comment-content a:hover,
  .comment-content a:focus {
	color: var(--_color---normal--dark);
  }
  
  /* ===============================
	 REPLY LINK
	 =============================== */
  
  .reply {
	margin-top: var(--_common-spacing---padding--margin--spacing-8);
  }
  
  .reply .comment-reply-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 14px;
	font-family: var(--_ui---label-large--font-family);
	font-size: var(--_ui---label-large--font-size);
	line-height: var(--_ui---label-large--line-height);
	font-weight: var(--font-weight--medium);
	letter-spacing: var(--_ui---label-large--letter-spacing);
	color: var(--_color---normal--dark);
	background: var(--_color---normal--soft-green);
	border-radius: var(--_ui---primary-button--radius);
	border: 1px solid var(--_color---normal--border-secondary);
	text-decoration: none;
	transition:
	  background-color 0.18s ease,
	  color 0.18s ease,
	  border-color 0.18s ease,
	  transform 0.18s ease;
  }
  
  .reply .comment-reply-link:hover,
  .reply .comment-reply-link:focus {
	background: var(--_color---normal--primary);
	color: var(--_color---normal--white);
	border-color: var(--_color---normal--primary);
	transform: translateY(-1px);
  }
  
  /* ===============================
	 CHILD / NESTED COMMENTS
	 =============================== */
  
  .comment-list .children {
	list-style: none;
	margin: var(--_common-spacing---padding--margin--spacing-16) 0 0;
	padding-left: var(--_common-spacing---padding--margin--spacing-24);
	border-left: 2px solid var(--_color---normal--border-secondary);
	display: grid;
	gap: var(--_common-spacing---gap--gap-16);
  }
  
  .comment-list .children > li {
	margin: 0;
  }
  
  /* Slightly smaller card for replies */
  .comment-list .children .comment-body {
	background: #ffffff;
	border-radius: var(--bordar-radius--bordar-radius-24, 24px);
  }
  
  /* ===============================
	 NO COMMENTS TEXT
	 =============================== */
  
  #comments .no-comments {
	margin-top: var(--_common-spacing---padding--margin--spacing-16);
	font-family: var(--_text---body-small--font-family);
	font-size: var(--_text---body-small--font-size);
	line-height: var(--_text---body-small--line-height);
	color: var(--_color---normal--color);
  }
  
  /* ===============================
	 RESPONSIVE TWEAKS
	 =============================== */
  
  @media (max-width: 639px) {
	
	#comments {
	  padding: var(--_common-spacing---padding--margin--spacing-20);
	}
  
	
  
	.comment-author {
		flex-direction: column;
	 
	}
  
	.comment-author .avatar {
	  margin-right: var(--_common-spacing---gap--gap-8);
	}
  
	.comment-list .children {
	  padding-left: var(--_common-spacing---padding--margin--spacing-16);
	}
	.comment-metadata{
		flex-direction: column;
		gap: 0;
		font-size: 10px !important;
		justify-content: flex-end;
		text-align: right;
	}
  }
  

  .comment-reply-title{
	font-size:24px;
	display: flex;
    align-items: center;
    gap: 10px;
  }
  .comment-reply-title a{
	color: var(--_color---normal--primary);
    text-decoration: none;
  }

  @media (min-width:991px){
/* Hover state: slide fully into view + subtle glow */
.hire-pill-fixed:hover .hire-pill,
.hire-pill:focus-visible {
	transform: translateX(0);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	filter: brightness(1.03);
}

.hire-pill-fixed:hover .hire-pill::before,
.hire-pill:focus-visible::before {
	box-shadow: 0 0 0 16px #d6ff3f;
}
  }