/* PandDesign Global CSS */

:root {
  --font-primary: 'Montserrat', sans-serif;
  --font-amsterdam: 'Amsterdam', sans-serif;
  --color-primary: #FDB714;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-dark-primary: rgba(58, 53, 65, 0.96);
  --color-dark: #222222;
}

html{
    margin-top: 0px !important;
}

body {
  font-family: var(--font-primary);
}

.w-100{
    width: 100%;
}

.hide-on-desktop{
    display: none !important;
    @media (max-width: 1199px) {
        display: block !important;
    }
}

.hide-on-mobile{
    @media (max-width: 1199px) {
        display: none !important;
    }
}

/* H1 */
h1 {
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* H2 */
h2 {
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

/* H3 */
h3 {
  font-size: 32px;
  line-height: 1.35;
}

/* H4 */
h4 {
  font-size: 28px;
  line-height: 1.35;
}


/* H5 */
h5 {
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.4;
}

p {
  margin: 0 0 1em;
  max-width: 65ch;
}

small {
  font-size: 14px;
  line-height: 1.5;
}

.two-lines-ellipsis {
  display: -webkit-box;        
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 2;       
  overflow: hidden;            
  text-overflow: ellipsis;     
}

.three-lines-ellipsis {
  display: -webkit-box;        
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 3;       
  overflow: hidden;            
  text-overflow: ellipsis;     
}

.sweep-container {
    position: relative;
    overflow: hidden;
}

.sweep-light::after {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        to right, 
        transparent 0%, 
        rgba(255,255,255,0.8) 50%, 
        transparent 100%
    );
    transform: skewX(-25deg);
    z-index: 99;
    pointer-events: none;
}

.sweep-reveal .elementor-widget {
    opacity: 0 !important;
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
    mask-image: linear-gradient(to right, black 50%, transparent 100%);
    -webkit-mask-size: 300%;
    mask-size: 300%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    transition: opacity 0.1s ease, mask-position 0.8s cubic-bezier(0.2, 0.5, 0.5, 1) !important;
}

.animate-sweep.sweep-light::after {
    animation: lightPass 2s ease-in-out forwards;
}

.animate-sweep.sweep-reveal .elementor-widget {
    opacity: 1 !important;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    transition-delay: 0.4s !important; 
}

@keyframes lightPass {
    0% { left: -150%; }
    100% { left: 150%; }
}

.elementor-editor-active .sweep-reveal .elementor-widget {
    opacity: 1 !important;
    -webkit-mask-image: none !important;
}
