/*
Theme Name: NDX Solution
Theme URI: https://ndxagency.com/
Description: Custom WordPress theme built by NDX Agency. Optimized for speed, clean design, SEO, and scalability. Perfect for business websites, landing pages, and white-label solutions.
Author: NDX Web Agency
Author URI: https://ndxagency.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: ndx-solution
License: Proprietary - Internal use only
*/

/* !root */

:root{
    --clr-primary:var(--e-global-color-primary);
    --clr-secondary:var(--e-global-color-secondary);
    --clr-accent:var(--e-global-color-accent);
    --clr-text:var(--e-global-color-text);
}

/* !minimal reset based on simplified normalise.css | github.com/necolas/normalize.css */

html{line-height:1.15};
body{margin:0};
h1{font-size:2em;margin:.67em 0};
b,strong{font-weight:bolder};
pre,code,kbd,samp{font-family:monospace,monospace;font-size:1em};
small{font-size:80%};
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline};
sub{bottom:-0.25em};
sup{top:-0.5em};
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0};
button,input{overflow:visible};
fieldset{padding:.35em .75em .625em}progress{vertical-align:baseline};
textarea{overflow:auto};
template,[hidden]{display:none}
#copyright{opacity:.7;font-size:small;font-family:sans-serif;text-align:right;margin:.5rem};
.alignright{float:right};
.alignleft{float:left};
.aligncenter{text-align:center};
.gallery-item {display: inline-block;text-align: left;vertical-align: top;margin: 0 0 1.5em;padding: 0 1em 0 0;width: 50%};
.gallery-columns-1 .gallery-item {width: 100%};
.gallery-columns-2 .gallery-item {max-width: 50%};
.gallery-item a { display: inline-block; max-width: 100%};
.gallery-item a img {display: block; backface-visibility: hidden};
.gallery-item a:hover img, .gallery-item a:focus img {opacity: 0.6};
.gallery-caption {display: block; margin-bottom: 0};




html{
/*     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}

a{
    color: var(--e-global-color-primary);
}

p{
    padding: 0;
    margin: 0;
}

.elementor-button{
    transition: 200ms;
}

.elementor-button:hover{
    filter: brightness(110%);
}

body{
	width: 100%;
	overflow-x: hidden; 
}

#absolute{
	position: absolute;
	z-index: 999;
}

.custom-hover{
	position: relative;
}

.custom-hover:after{
    content: "";
    position: absolute;
    height: 1px;
    width: 0%;
    background: #fff;
right: 0;
bottom: 1px;
    transition: width 300ms ease-out;
    transform-origin: right;
}

.custom-hover:hover:after{
	width: 100%;
	left: 0;
}

.hover-black:after{
	background:#000 !important;
}

#imageHover *:hover{
	cursor:url(), auto;
}

@media only screen and (max-width: 400px){  br{
/* 	display: none; */
}
}

/* !XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/* custom classes */

.pad-lr-4proc {padding-inline: 4%;}
.pad-tb-4proc {padding-block: 4%;}
.pad-4proc {padding: 4%;}
.pad-t-4proc{padding-top: 4%;}
.pad-b-4proc{padding-bottom: 4%;}

@media only screen and (max-width:400px){ 
.pad-4proc{padding: 8% 4%;}
.pad-lr-4proc {padding-inline: 8%;}
.pad-tb-4proc {padding-block: 8%;}
}

.pad-lr-2proc {padding-inline: 2%;}
.pad-tb-2proc {padding-block: 2%;}
.pad-2proc {padding: 2%;}
.pad-t-2proc{padding-top: 2%;}
.pad-b-2proc{padding-bottom: 2%;}

@media only screen and (max-width:400px){ 
.pad-2proc{padding: 4% 2%;}
.pad-lr-2proc {padding-inline: 4%;}
.pad-tb-2proc {padding-block: 4%;}
	
}

.pad-lr-8proc {padding-inline: 8%;}
.pad-tb-8proc {padding-block: 8%;}
.pad-8proc {padding: 8%;}
.pad-t-8proc{padding-top: 8%;}
.pad-b-8proc{padding-bottom: 8%;}

@media only screen and (max-width:400px){ 
.pad-8proc{padding: 16% 8%;}
.pad-lr-8proc {padding-inline: 8%;}
.pad-tb-8proc {padding-block: 8%;}
}


/* Padding all sides */

.pad-1{padding: clamp(0.75rem, 0.6923rem + 0.2564vw, 1rem);}
.pad-2{padding: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);}
.pad-3{padding: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);}
.pad-4{padding: clamp(3rem, 2.7692rem + 1.0256vw, 4rem);}

/* Padding Top & Bottom */
 
 .pad-tb-1{padding-top: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem); padding-bottom: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem);}
 .pad-tb-2{padding-top: clamp(1rem, 0.76915rem + 1.026vw, 2rem); padding-bottom: clamp(1rem, 0.76915rem + 1.026vw, 2rem);}
 .pad-tb-3{padding-top: clamp(2rem, 1.76915rem + 1.026vw, 3rem); padding-bottom: clamp(2rem, 1.76915rem + 1.026vw, 3rem);}
 .pad-tb-4{padding-top: clamp(3rem, 2.76915rem + 1.026vw, 4rem);padding-bottom: clamp(3rem, 2.76915rem + 1.026vw, 4rem);}
 .pad-tb-5{padding-top: clamp(4rem, 3.76915rem + 1.026vw, 5rem);padding-bottom: clamp(4rem, 3.76915rem + 1.026vw, 5rem);}
 .pad-tb-6{padding-top: clamp(5rem, 4.76915rem + 1.026vw, 6rem);padding-bottom: clamp(5rem, 4.76915rem + 1.026vw, 6rem);}
 .pad-tb-8{padding-top: clamp(7rem, 6.76915rem + 1.026vw, 8rem); padding-bottom: clamp(7rem, 6.76915rem + 1.026vw, 8rem);}
 .pad-tb-10{padding-top: clamp(9rem, 8.76915rem + 1.026vw, 10rem); padding-bottom: clamp(9rem, 8.76915rem + 1.026vw, 10rem);}

/* Padding Left & Right */

.pad-lr-1{padding-left: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem); padding-right: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem);}
.pad-lr-2{padding-left: clamp(1rem, 0.76915rem + 1.026vw, 2rem); padding-right: clamp(1rem, 0.76915rem + 1.026vw, 2rem);}
.pad-lr-3{padding-left: clamp(2rem, 1.76915rem + 1.026vw, 3rem); padding-right: clamp(2rem, 1.76915rem + 1.026vw, 3rem);}
.pad-lr-4{padding-left: clamp(3rem, 2.76915rem + 1.026vw, 4rem);padding-right: clamp(3rem, 2.76915rem + 1.026vw, 4rem);}
.pad-lr-5{padding-left: clamp(4rem, 3.76915rem + 1.026vw, 5rem);padding-right: clamp(4rem, 3.76915rem + 1.026vw, 5rem);}
.pad-lr-6{padding-left: clamp(5rem, 4.76915rem + 1.026vw, 6rem);padding-right: clamp(5rem, 4.76915rem + 1.026vw, 6rem);}
.pad-lr-8{padding-left: clamp(7rem, 6.76915rem + 1.026vw, 8rem); padding-right: clamp(7rem, 6.76915rem + 1.026vw, 8rem);}
.pad-lr-10{padding-left: clamp(9rem, 8.76915rem + 1.026vw, 10rem); padding-right: clamp(9rem, 8.76915rem + 1.026vw, 10rem);}


/* Padding Top */

.pad-t-1{padding-top: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem);}
.pad-t-2{padding-top: clamp(1rem, 0.76915rem + 1.026vw, 2rem); }
.pad-t-3{padding-top: clamp(2rem, 1.76915rem + 1.026vw, 3rem); }
.pad-t-4{padding-top: clamp(3rem, 2.76915rem + 1.026vw, 4rem);}
.pad-t-5{padding-top: clamp(4rem, 3.76915rem + 1.026vw, 5rem);}
.pad-t-6{padding-top: clamp(5rem, 4.76915rem + 1.026vw, 6rem);}
.pad-t-8{padding-top: clamp(7rem, 6.76915rem + 1.026vw, 8rem); }
.pad-t-10{padding-top: clamp(9rem, 8.76915rem + 1.026vw, 10rem);} 

/* Padding Bottom */

.pad-b-1{padding-bottom: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem);}
.pad-b-2{padding-bottom: clamp(1rem, 0.76915rem + 1.026vw, 2rem); }
.pad-b-3{padding-bottom: clamp(2rem, 1.76915rem + 1.026vw, 3rem); }
.pad-b-4{padding-bottom: clamp(3rem, 2.76915rem + 1.026vw, 4rem);}
.pad-b-5{padding-bottom: clamp(4rem, 3.76915rem + 1.026vw, 5rem);}
.pad-b-6{padding-bottom: clamp(5rem, 4.76915rem + 1.026vw, 6rem);}
.pad-b-8{padding-bottom: clamp(7rem, 6.76915rem + 1.026vw, 8rem); }
.pad-b-10{padding-bottom: clamp(9rem, 8.76915rem + 1.026vw, 10rem);} 


/* wrapper */
.hover-card{
  position: relative;
  overflow: hidden;
  min-height: 520px;            /* adjust */
}

/* overlay panel */
.hover-card__overlay{
  position: absolute;
  inset: 0;                     /* full size */
  width: 60%;                   /* card width */
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(4px);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  transform: translateX(-100%); /* hidden to the left */
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  z-index: 2;
}

/* reveal on hover */
.hover-card:hover .hover-card__overlay{
  transform: translateX(0);
  opacity: 1;
}

/* make text readable over images if you prefer a darker card */
.hover-card__overlay.dark{
  background: rgba(20,20,20,0.9);
  color: #fff;
}

/* mobile: show the card by default (no hover on touch) */
@media (max-width: 1024px){
  .hover-card__overlay{
    transform: translateX(0);
    opacity: 1;
    width: 100%;
  }
}