/*
 Theme Name:   MADZ Concierge
 Theme URI:    https://madzconceirge.com
 Description:  GeneratePress child theme for madzconceirge.com
 Author:       Alex Mironov
 Author URI:   https://alexdoesweb.dev
 Template:     generatepress
 Version:      1.0
*/

@font-face {
  font-family: 'Canela Text Trial Light';
  src: url('assets/fonts/CanelaText-Light-Trial.woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Canela Text Thin Trial';
  src: url('assets/fonts/Canela-ThinItalic-Trial.woff');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Canela Text Trial Light Italic';
  src: url('assets/fonts/CanelaText-LightItalic-Trial.woff');
  font-weight: 300;
  font-style: italic;
}

/* Global Selectors */
:root {
  /* Just the name of the font in quotes */
  --gp-font--canela-text-trial: 'Canela Text Trial Light', serif;
  --madz--canela-italic: 'Canela Text Thin Trial', serif;
  --madz--canela-light-italic: 'Canela Text Trial Light Italic', serif;
  --madz-font-neue: 'neue-haas-grotesk-text', sans-serif;
}

.d-none {
	display: none !important;
}

#smoke-canvas, .ticker-track {
  will-change: transform;
  transform: translateZ(0);
}

.hp-hero h1, .hero-block-overlay {
	pointer-events: none;
}

.hero-block-overlay a,
.hero-block-overlay button {
  pointer-events: auto;
}

.main-title {
	padding-bottom: 10px;
}

.madz-sep-1 {
	max-width: 90%;
    margin-left: auto;
	border-top: 1.5px solid;
}

.header-wrap .navigation-branding .main-title a {
	font-family: var(--madz--canela-light-italic) !important;
	font-size: 30px !important;
	text-transform: none !important;
    letter-spacing: 0 !important;
	font-weight: 300;
}

.footer-logo h3 {
	font-family: var(--madz--canela-light-italic) !important;
}

.main-navigation .main-nav ul li a {
    padding-right: 17px;
}

h1 {
	font-family: var(--gp-font--canela-text-trial);
}

.font-primary {
	font-family: var(--gp-font--canela-text-trial);
}

.madz-italic {
	font-family: var(--madz--canela-italic);
}

.madz-italic-2 {
	font-family: var(--madz--canela-light-italic);
}

.ls-2 {
	letter-spacing: -2px;
}

.c-heading {
	letter-spacing: -1.5px;
}

body {
	font-family: var(--madz-font-neue);
}

.main-navigation .main-nav ul li:first-child a {
    padding-left: 0;
}

.mb-0 {
	margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 1rem;
}


.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
	margin-bottom: 3rem;
}

.mb-4 {
	margin-bottom: 4rem;
}

.mw-440 {
	max-width: 440px;
}

.mw-465 {
	max-width: 465px;
}

.mw-505 {
	max-width: 505px;
}

.mw-520 {
	max-width: 520px;
}

.mw-573 {
    max-width: 573px;
}

.mapp-layout {
    border: 0 !important;
}

.mapp-body .map-address {
	margin-bottom: 8px !important;
}

.custom-section-6 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.madz-styled-button {
	color: #fff;
	margin-right: 2.5rem;
}

/* Contact Form */

.madz-contact-form div.wpforms-container-full input, .madz-contact-form div.wpforms-container-full select, .madz-contact-form .wp-core-ui div.wpforms-container-full input, .madz-contact-form .wp-core-ui div.wpforms-container-full select {
    height: 72px;
}

.madz-contact-form div.wpforms-container-full input, .madz-contact-form div.wpforms-container-full textarea {
	padding-left: 30px;
	padding-right: 30px;
	font-family: var(--gp-font--canela-text-trial);
    font-size: 18px;
	text-transform: uppercase;
}

.madz-contact-form  div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner {
    min-height: 72px;
    padding: 0 24px 0 30px;
}

.madz-contact-form  div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__item.choices__item--selectable {
	font-family: var(--gp-font--canela-text-trial);
    font-size: 18px;
	text-transform: uppercase;
}

.madz-contact-form div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__list--dropdown {
    background: #181818 !important;
}

.madz-contact-form div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #323232;
}

.madz-contact-form .wpforms-container .wpforms-field {
    padding: 0px 0 25px 0;
}

.madz-contact-form textarea {
	min-height: 234px !important;
}

.madz-contact-form .wpforms-field input[type="text"]::placeholder,
.madz-contact-form .wpforms-field input[type="email"]::placeholder,
.madz-contact-form .wpforms-field textarea::placeholder {
    color: #ffffff !important;
    opacity: 1;
}

/* For older browsers */
.madz-contact-form .wpforms-field input[type="text"]::-webkit-input-placeholder,
.madz-contact-form .wpforms-field input[type="email"]::-webkit-input-placeholder,
.madz-contact-form .wpforms-field textarea::-webkit-input-placeholder {
    color: #ffffff !important;
}

.madz-contact-form .wpforms-field input[type="text"]::-moz-placeholder,
.madz-contact-form .wpforms-field input[type="email"]::-moz-placeholder,
.madz-contact-form .wpforms-field textarea::-moz-placeholder {
    color: #ffffff;
}

.madz-contact-form div.wpforms-container-full button[type=submit] {
	width: 200px;
    text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 3px;
	transition: background 0.2s ease-in;
}

.madz-contact-form div.wpforms-container-full button[type=submit]:hover {
	background: #ffffff;
	color: #000;
}

.madz-contact-form div.wpforms-container-full button[type=submit]:not(:hover):not(:active) {
	background-color: transparent !important;
}

.madz-contact-form div.wpforms-container-full:not(:empty) {
    margin: 0 auto;
}

/* Footer */

.signup-form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ffffff; /* The main underline */
  padding-bottom: 8px;
  margin-top: 5px;
  width: 350px; /* Adjust width as needed */
}

.signup-form input {
  background: transparent;
  border: none;
  color: #ffffff;
  font-family: var(--madz-font-neue);
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  width: 100%;
  outline: none;
  padding: 5px 0;
}

/* Style the placeholder text */
.signup-form input::placeholder {
  color: #ffffff;
  opacity: 1;
}

.submit-arrow {
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: opacity 0.3s ease;
}

/* Subtle hover effect for the arrow */
.submit-arrow:hover {
    opacity: 0.8;
	background: transparent;
}

.ticker-wrap {
    width: 100%;
    overflow: hidden;
    background: #000;
    padding: 105px 0;
    white-space: nowrap;
	pointer-events: none;
}

.ticker-track {
  display: flex;
  width: max-content;
  /* animation: scroll-left 30s linear infinite; */
}


.ticker-content {
    font-family: var(--madz--canela-light-italic);
    font-size: 250px;
    color: rgb(255 255 255 / 20%);
    padding-right: 50px; 
}

.hp-hero {
    position: relative;
    width: 100%;
    height: 100dvh;
    background-color: var(--contrast);
    overflow: hidden;
}

.hp-hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, var(--contrast) 0%, /* Solid at the very bottom */ #000000e3 20%, /* Stays solid for a bit */ rgba(0, 0, 0, 0) 100% /* Fades to nothing */);
    pointer-events: none;
    z-index: 8;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* Base styles for both cards */
.madz-card-1, .madz-card-2 {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.madz-card-1, .madz-card-2 {
	min-height: 240px;
}

/* Optional: add a shadow when tilting for more realism */
.madz-card-1:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Create the background layer */
.madz-card-1::before, .madz-card-2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1;
}

/* Card 1: Zooms and shifts slightly right */

.madz-card-1::before {
    background-image: url('https://madzconcierge.com/media/2026/02/brands-bg.jpg');
}

.madz-card-1:hover::before {
    transform: scale(1.1) translateX(20px);
}

/* Card 2: Zooms and shifts slightly left */
.madz-card-2::before {
    background-image: url('https://madzconcierge.com/media/2026/02/talents-bg.jpg');
}

.madz-card-2:hover::before {
    transform: scale(1.1) translateX(-20px);
}

/* Smoke Effect */

#smoke-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 8;
  pointer-events: auto; 
}

/* Reveal animation */

.madz-reveal {
	animation: madz-reveal linear forwards;
	animation-timeline: view();
	animation-range: entry;
}

@keyframes madz-reveal {
	0% {
		clip-path: inset(25%);	
	}
	
	100% {
		clip-path: inset(0%);
	}
}

.madz-fade-in {
	opacity: 0;
	animation: madz-fade-in ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

@keyframes madz-fade-in {
	0% {
		opacity: 0;
		transform: translatey(400px)
	}

	50% {
		opacity: 0;
	} 

	to {
		opacity: 1;
		transform: translatey(0px)
	}
}

.madz-fade-in-delayed {
	opacity: 0;
	animation: madz-fade-in-delayed ease-out forwards;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

@keyframes madz-fade-in-delayed {
    0%, 40% { /* Stays hidden and low for the first 40% of the scroll range */
        opacity: 0;
        transform: translateY(400px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

.madz-fade-in-load {
    opacity: 0;
    animation: madz-fade-in 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}

.madz-fade-in-load-2 {
    opacity: 0;
    animation: madz-fade-in 3s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}

.madz-fade-in-delayed-load {
    opacity: 0;
    animation: madz-fade-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
}

.titler {
  visibility: hidden;
  opacity: 0;
}

/* Once the JS has wrapped the lines and the page is ready, reveal the container */
.page-active .titler {
  visibility: visible;
  opacity: 1;
}

/* Title animation (homepage) */
.titler .line {
  display: block; /* Ensures each line is on its own row */
  opacity: 0;
  transform: translateY(15px);
  transition: 
    opacity 1000ms cubic-bezier(0.2, 0, 0.2, 1), 
    transform 1000ms cubic-bezier(0.2, 0, 0.2, 1);
}

.page-active .titler .line {
  	opacity: 1;
  	transform: translateY(0);
}

.titler .madz-italic {
    letter-spacing: 0.05em;
	transition: letter-spacing 1200ms cubic-bezier(0.2, 0, 0.2, 1);
}

.page-active .titler .madz-italic {
	letter-spacing: 0;
	transition-delay: 3.8s;
}

/* The CTA Button */
.cta-button {
  opacity: 0;
  transform: translateY(10px);
  transition: all 1200ms cubic-bezier(0.2, 0, 0.2, 1);
  transition-delay: 6s !important; 
}

.page-active .cta-button {
  opacity: 1;
  transform: translateY(0);
}

/* Vertical Line Separator */

.separator-container {
  height: 220px; 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.separator-container-1 {
  height: 100%; 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.vertical-line {
  width: 1px;
  height: 121px; 
  margin: 40px 0;
  background-color: white;
  transform: scaleY(0); 
  transform-origin: center; 
  will-change: transform;
  transition: transform 0.1s linear; 
}

.main-line {
	width: 1px;
    height: 100%;
    margin: 0px 0 60px;
	background-color: white;
    transform-origin: center;
	will-change: transform;
}

.line-container {
  width: 100%;
  overflow: hidden; /* Prevents the line from causing a horizontal scrollbar */
  padding: 40px 0;
  background: transparent;
}

.scrolling-line {
    width: 100%;
    height: 1px;
    background-color: #ffffff;
    transform: translateX(100%); /* Start positioned off-screen to the right */
    will-change: transform;
    max-width: 418px;
    margin-left: auto;
    margin-right: auto;
}

.animated-text-block {
	height: 100%;
}
@media screen and (min-width: 1441px) {
	.page-id-3.separate-containers .inside-article {
		padding: 30px 0px 30px 0px;
	}
}

@media(min-width: 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding, .main-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    #site-navigation {
        margin-left: unset !important;
        display: flex;
		margin-top: 40px;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }
	
	.hero-block-overlay {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    z-index: 10;
	    pointer-events: none; 
	    text-align: center;
	}
	
	.custom-section-3 {
		padding-top: 0 !important;
		margin-top: -320px;
	}

	.custom-section-5 {
		padding-top: 0 !important;
		margin-top: -320px;
	}
	
	.madz-card-1, .madz-card-2 {
		min-height: 540px;
	}
	
	.madz-contact {
		min-height: 700px;
		padding: 80px 100px;
	}
	
	.inner-hero {
		min-height: 500px;
	}
	.mw-90 {
		max-width: 90%;
	}	
	.madz-card-2 {
		min-height: 540px;
	}
	.hide-on-desktop, .home .line-container {
		display: none;
	}
}


@media screen and (min-width: 769px) and (max-width: 1500px) {
	.inside-navigation {
		padding-left: 2rem;
    	padding-right: 2rem;
		box-sizing: content-box;
	}
}

@media screen and (max-width: 1441px) {
	.page-id-3.separate-containers .inside-article {
		padding: 0px 20px 20px 20px;
	}
}

@media screen and (max-width: 768px) {
	 .slideout-navigation.do-overlay .slideout-exit {
        position: absolute !important;
	 }
	.slideout-navigation.do-overlay .inside-navigation {
		height: 100dvh;
		justify-content: center;
	}
	.main-navigation.slideout-navigation .main-nav ul li a {
    	padding-left: 0;
		padding-right: 0;
    	font-weight: 700;
    	font-size: 15px;
	}
	.main-navigation.slideout-navigation .main-nav ul li {
		opacity: 0;
		animation: madz-fade-in-delayed 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}
	.main-navigation.slideout-navigation .main-nav ul li:nth-child(1) { animation-delay: 0s; }
	.main-navigation.slideout-navigation .main-nav ul li:nth-child(2) { animation-delay: 0.4s; }
	.main-navigation.slideout-navigation .main-nav ul li:nth-child(3) { animation-delay: 0.8s; }
	.main-navigation.slideout-navigation .main-nav ul li:nth-child(4) { animation-delay: 0.12s; }
	.header-wrap .navigation-branding .main-title a {
    	font-size: 20px !important;
	}
	.menu-toggle .mobile-menu {
    	display: none;
	}
	.main-title {
    	padding-bottom: 0px;
	}
	.hp-hero {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: 100dvh; 
	}
	#smoke-canvas {
    	z-index: 1;
	}
	.hp-hero::after {
		width: 100%;
		height: 35%;
		background: linear-gradient(0deg, #000000 0%, /* Solid at the very bottom */ #000000b5 30%, /* Stays solid for a bit */ rgba(0, 0, 0, 0) 100% /* Fades to nothing */);
	}
	.madz-contact {
		min-height: 560px;
		padding: 60px 50px;
	}
	.r-text {
		text-align: right;
	}
	.red-image-section img {
		height: 43vh;
    	max-width: 200%;
    	object-fit: cover;
    	width: auto;
   	 	margin-left: -24px;
        margin-right: -24px;
		overflow: hidden;
	}
	.madz-contact-form div.wpforms-container-full input, .madz-contact-form div.wpforms-container-full select, .madz-contact-form .wp-core-ui div.wpforms-container-full input, .madz-contact-form .wp-core-ui div.wpforms-container-full select {
    	height: 50px;
	}
	.madz-contact-form div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner {
		min-height: 50px;
		padding: 0 14px 0 14px;
	}
	.madz-contact-form div.wpforms-container-full input, .madz-contact-form div.wpforms-container-full textarea {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 14px;
	}
	.madz-contact-form div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__item.choices__item--selectable {
		font-family: var(--gp-font--canela-text-trial);
		font-size: 14px;
	}
	.madz-contact-form div.wpforms-container-full .wpforms-form .wpforms-field.wpforms-field-select-style-modern .choices .choices__inner .choices__list--single {
		padding: 0 16px 0 0px;
	}
	.mapp-layout {
		max-height: 465px;
	}
	.map-phone-number {
		display: none;
	}
	.ticker-wrap {
		padding: 35px 0;
	}
	.ticker-content {
		font-size: 100px;
	}
	.madz-card-2 {
    	min-height: 240px;
	}
	.madz-fade-in {
        animation-range: entry 0% cover 60%;
    }
	.home .madz-sep-1 {
		display: none;	
	}
}