/**
 * Theme Name:     Hello Biz Child
 * Author:         Elementor Team
 * Template:       hello-biz
 * Text Domain:	   hello-biz-child
 * Description:    Hello Biz is a free, user-friendly Hybrid WordPress Theme that was crafted for seamless integration with the Elementor site builder and tailored specifically for business websites. Perfect for beginners, but far from limited to just them, it features a dedicated beginner-oriented “Home” screen to simplify and streamline the web-building process. Hello Biz also integrates with Elementor’s premium features, giving you access to tools like AI, and accessibility enhancements in one place. Whether launching a startup site or refining a company portfolio, Hello Biz offers a solid, responsive foundation for all web creators.
 */

.text-orange-color, .orangebtn a, .video-item .brand-name, #filter-button span, span.elementor-button-text, .mega-menu-link:hover, .mega-indicator, .card:hover .title, .collab-card:hover .collab-title, .card:hover h3, #videos-popup h2.popup-title, #elementor-progress-bar-38c2fd1, .ehp-form__button-text{
    background: radial-gradient(96.59% 96.59% at 50% 50%, #FFA800 0%, #FF4B5D 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.SideDock_module_sidedockInner__63ca0e19 {
    display: none !important;
}
.elementor-element-38c2fd1 .elementor-progress-bar {
    border-radius: 50px;
    background: radial-gradient(96.59% 96.59% at 50% 50%, #FFA800 0%, #FF4B5D 100%);
}
li#mega-menu-item-40 {
    background-color: #FAEBE4 !important;
    padding: 10px 20px !important;
    margin-top: -10px !important;
    margin-left: 20px !important;
    border-radius: 5px !important;
}
li#mega-menu-item-40:hover {
    background-color: #fed7aa !important;
}
.mega-menu-link {
    font-family: 'Poppins' !important;
    padding: 0px 20px !important;
    font-weight: 500 !important;
    font-size: 20px !important;
}
ul.mega-sub-menu {
    left: -50px;
}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 {
    text-align: left;
    padding: 0px 30px 0px 0px;
    display: flex;
    justify-content: end;
}
li#mega-menu-item-custom_html-5 {
    margin-top: -110px !important;
}
ul.mega-sub-menu {
    padding: 2rem !important;
    margin-top: 30px !important;
}
.collab-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 12px;
	  border: 2px solid transparent;
    overflow: hidden;
    max-width: 600px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		max-height:310px !important;
 		transition: 0.5s ;
}
.collab-card:hover{
	    border: 2px solid #f36b26; 
	 transition: 0.5s ;
}
img.collab-image {
    min-height: 160px !important;
    height: 100% !important;
    width: 100%;
    max-height: 160px;
}
.collab-content {
    padding: 13px;
}
.collab-title {
    font-size: 24px;
    font-weight:600;
    color: #222;
    margin: 0 0 8px 0;
}
h4.mega-block-title {
    display: none !important;
}
.collab-description {
    font-size: 16px;
    color: #555;
    margin: 0 0 16px 0;
    line-height: 1.5;
}
.collab-link {
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    color: #f36b26; 
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.collab-link:hover {
    text-decoration: underline;
}
.arrow {
    font-size: 18px;
    transition: transform 0.2s ease-in-out;
}
.card-link {
    text-decoration: none;
    display: block;
    max-width: 800px;
}
.card a {
	display:flex;
	align-items:center;
}
.card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 12px;
    padding:5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 transition: 0.5s ;
	max-height:150px;
}

.card:hover {
	border: 2px solid #f36b26;
 transition: 0.5s ;
}
li#mega-menu-item-custom_html-5 {
    margin-top: -170px !important;
}
.card img {
    border-radius: 12px;
    height: auto;
    margin-right: 16px;
    max-height: 130px;
    object-fit: cover;
}
.card img {
    border-radius: 12px;
    height: auto;
    margin-right: 16px;
}
.card-content {
    flex: 1;
}
.title{
    font-size: 24px;
    font-weight:600;
    color: #222;
    margin: 0 0 8px 0;
	   font-family: 'Poppins';
}
.card h3 {
    font-size: 20px;
    font-weight:600;
    color: #222;
    margin: 0 0 8px 0;
	   font-family: 'Poppins';
}
.description {
    font-size: 16px;
    color: #555;
    margin: 0;
    line-height: 1.5;
   font-family: 'Poppins';
}
.card p {
    font-size: 14px;
    color: #555;
    margin: 0;
    line-height: 1.5;
   font-family: 'Poppins';
}
.collab-link:hover .arrow {
    transform: translateX(5px);
}
.dominationsec span{
	font-weight:700;
}
.ticker .swiper-wrapper .swiper-slide {
    animation: tickerScroll 10s linear infinite;
    white-space: nowrap;
}
@keyframes tickerScroll {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
.testi-heading{
	font-family: Poppins;
	font-size: 32px;
	font-weight: 700;
	line-height: 54px;
}
.video-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.related-video-item {
    display: flex;
    flex-flow: column;
}
.related-video-item h4 {
    display: none;
}
.related-videos {
    display: flex;
    gap: 30px;
    max-height: 120px;
    margin-top: 0px;
}
.video-popup .video-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    aspect-ratio: 16/9;
}

.video-popup iframe {
    width: 100%;
    height: 100%;
}

.video-popup .close-popup {
    position: absolute;
    top: -40px;
    right: 0;
		color:white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 36px;
    text-align: center;
}
.video-popup .close-popup:hover{
	background:transparent;
	color:orange;
}
.video-popup .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.testimonials-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.testimonial-item {
    text-align: center;
}

.testimonial-image {
    position: relative;
}
.swiper-slide.testimonial-item {
    display: flex;
    gap: 70px;
    padding: 0px 4rem;
}
.testimonial-content {
    font-family: Poppins;
    font-size: 32px;
    font-weight: 400;
    line-height: 54px;
}
.testimonial-image {
    min-width: 500px;
}
.testi-content-container {
    display: flex;
    flex-flow: column-reverse;
    justify-content: center;
    text-align: left;
}
.testimonial-image img {
    max-width: 100%;
    border-radius: 10px;
}

.play-button {
    position: absolute;
    background-image: url(/wp-content/uploads/2024/12/Group-14.png);
    top: 57%;
    left: 64%;
    width: 240px;
    height: 240px;
    background-size: cover;
    font-size: 0px;
    border: none;
}
.play-button:hover, .play-button:focus  {
    background-color: transparent;
    transform: scale(1.1);
}
.video-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.video-popup .video-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    aspect-ratio: 16/9;
}
.video-popup iframe {
    width: 100%;
    height: 100%;
}
.e-n-accordion-item {
    box-shadow: 0px 8px 34px 0px #0000000D;
}
.sitefooter{
	box-shadow: 0px 4px 4px 0px #00000040;

}

/*  */
#videos-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-content {
    display: flex;
    background-color: #000;
    color: #fff;
    border-radius: 8px;
    overflow: hidden;
    max-width: 90%;
    max-height: 90%;
    width: 1200px;
    font-family: 'Poppins';
    padding: 30px 50px 50px;
}
.popup-left {
    padding: 20px 50px 20px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 400px;
}
.popup-right {
    flex: 1;
    background-color: #000000;
    position: relative;
    width: 680px;
    display: flex;
    flex-flow: column;
}
.popup-right iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.popup-title {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
}

.popup-category {
    font-size: 18px;
    margin-bottom: 20px;
    color: #999;
}

.popup-summary h3,
.popup-involvement h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.popup-summary p {
    font-size: 14px;
    line-height: 1.6;
}

.popup-involvement ul {
    list-style: none;
    padding: 0;
}

.popup-involvement li {
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 1.4;
		list-style:inside;
}
.popup-involvement li::marker {
    color: orange;
}
.get-pricing-btn {
    background-color: #ff8800;
    color: #fff;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.get-pricing-btn:hover {
    background-color: #e37700;
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
}



/*  */
#video-results .video-item {
    margin: 15px 0;
}
form#filter-form { 
	padding: 60px;
	background-color: rgb(248 246 251);
    --tw-bg-opacity: 1;
	box-shadow: 0px 0px 20px 20px #b2b2b214;
	border-radius: 10px;
	gap:15px;
	margin-bottom: 50px;
}
.form-div{
	display: flex;	
	border-radius:10px;
	box-shadow: 0px 0px 20px 20px #b2b2b214;
	background-color:white;
	padding:10px;
	gap: 20px;
}
select#filter-industry, select#filter-brand-videos {
    border: none;
    padding: 20px 10px;
		width: 45%;
}
select#filter-industry:focus, select#filter-brand-videos:focus,select#filter-industry:focus-visible, select#filter-brand-videos:focus-visible {
    border: none !important;
		outline:none;
}
button#filter-button {
    background-color: #ffedd5;
    border: none;
    width: 200px;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Poppins';
}
    div#video-results {
			display: flex;
			flex-flow: row;
			flex-wrap: wrap;
			gap: 20px;
}
	.video-item {
		    padding-bottom: 20px;
		box-shadow: 2px 11px 22px -5px #a9a8a8;
		border-radius:25px;
		transition: 0.5s;
		font-family: 'Poppins';
		min-width: auto;
		max-width: 450px;
		cursor:pointer;
	}
.video-item:hover {
    background-color: white;
    transition: 0.5s;
}
.video-item h3 {

    font-weight: bold;
    font-size: 24px;
}
.brand-name {
 	padding:10px 20px;
 }
.video-content{
			padding: 10px 20px;
}
.video-item img {
    width: 100%;
    height: auto;
	    padding-bottom: 20px;
}
.video-item .brand-name {
    font-size: 16px;
    font-weight: 600;
}
.popup-left .brand-name {
 	padding:10px 0px;
 }
.newsletter form.ehp-form .ehp-form__wrapper {
    display: flex;
    flex-flow: nowrap;
    width: 100%;
    min-width: 800px;
    max-width: 800px;
}
.newsletter .ehp-form__submit-group.has-width-33 {
    position: absolute;
    right: 35px;
    top: 7px;
}
.grid-item.metro-item.tp-col-lg-4.tp-col-md-4.tp-col-sm-12.tp-col-12 {
    display: block !important;
    position: unset !important;
}
.post-content-bottom {
    position: unset !important;
}
.pt-plus-isotope {
    height: auto !important;
}



.post-item {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    max-width: 440px;
    min-width: 300px;
}

.post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.post-content {
    padding: 15px;
}

.meta {
    font-size: 14px;
    color: #ff7a59; /* Example for orange text */
    margin-bottom: 10px;
}

.post-title {
    font-size: 18px;
    font-weight: 700;
    margin: 10px 0;
    color: #333;
    line-height: 1.4;
}

.post-excerpt {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.post-item a {
    text-decoration: none;
    color: inherit;
}

.post-item a:hover .post-title {
    color: #ff7a59; /* Example hover color */
}
.post-archive-posts {
    display: flex;
    gap: 40px;
}


/* contact form */
.section-upp {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    gap: 20px;
}
.form-group {
    max-width: 49%;
    width: 100%;
}
.form-group.full-width {
    min-width: 100%;
}
.form-container {
    width: 100%;
    max-width: 100%;
    background: transparent;
}

.form-container h2 {
  margin-bottom: 15px;
  color: #333;
}

.form-container .section {
  margin-bottom: 30px;
}

.form-container .form-group {
  margin-bottom: 15px;
}

.form-container label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}
.form-container input, .form-container textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ffff;
    border-radius: 5px;
    font-size: 14px;
    min-height: 60px;
}

.form-container textarea {
  resize: none;
  height: 100px;
}
.form-container .grid p br{
	display:none;
}
.form-container .grid p {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-flow: row;
    flex-wrap: wrap;
    gap: 40px 10px;
}
.form-container .grid-item {
    padding: 0px;
    text-align: center;
    background: transparent;
    color: #333;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
    border: none;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
.form-container .grid-item img {
    max-width: 340px;
    height: auto;
    width: 100%;
}
.form-container button.grid-item br {
    display: none;
}
.form-container .grid-item:hover button.grid-item span {
  background: #ddd;
}
.form-container .footer-note {
  margin-bottom: 15px;
  text-align: center;
  font-size: 12px;
  color: #777;
}
.form-container .form-actions {
  text-align: center;
}
.form-container button.grid-item span {
    font-family: Poppins;
    font-size: 23px;
    font-weight: 700;
    line-height: 42px;
    text-align: center;
    margin-top: -60px;
    color: white;
}
.form-container .submit-button {
  padding: 10px 20px;
  background: #ff6a00;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.form-container .submit-button:hover {
  background: #e65c00;
}
/* Style for the grid items to make them look like buttons */
.grid-item {
  display: inline-block;
  background-color: #f5f5f5;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  margin: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 120px;
  height: 140px;
  box-sizing: border-box;
}

.grid-item img {
  max-width: 60%;
  height: auto;
  margin-bottom: 8px;
}

.grid-item span {
    font-size: 25px;
    color: white;
    margin-top: -80px;
    width: 100%;
    height: 68px;
    border-radius: 0px 0px 25px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.grid-item input[type="checkbox"] {
  display: none;
}

.grid-item input[type="checkbox"]:checked + span {
  color: orange; 
  font-weight: bold;
  background-color: #ddd; 
}
label.grid-item {
    min-width: 340px;
    height: auto;
}
.grid-item input[type="checkbox"]:checked + span {
  color: orange;
  font-weight: bold;
}
label.grid-item:hover.grid-item span  {
	background: radial-gradient(96.59% 96.59% at 50% 50%, #FFA800 0%, #FF4B5D 100%);
   min-width: 96% !important;
}
label.grid-item.active span  {
	background: radial-gradient(96.59% 96.59% at 50% 50%, #FFA800 0%, #FF4B5D 100%);
   min-width: 96% !important;
}