/====================================DISPLAY HERO====================================/

.display-hero{
	
    position:relative;
	
    height:100vh;
	
    overflow:hidden;

    display:flex;
	
    align-items:center;
	
    padding:0;
}

.display-hero > .container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:45% 55%;

    align-items:center;

    gap:80px;

    height:100%;

    min-height:unset;

}

.display-left{

color:#fff;
position: relative;
z-index: 20;

}

.display-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:rgba(37,99,235,.15);

color:#ffff;

font-size:13px;

font-weight:700;

letter-spacing:2px;

margin-bottom:24px;

}

.display-left p{

color:rgba(255,255,255,.75);

}

.display-left p{

font-size:21px;

line-height:1.8;

color:#b7c0cf;

max-width:620px;

}

.hero-buttons{

margin-top:50px;

display:flex;

gap:18px;

}



.display-right{

position:relative;

width:100%;

height:100%;

min-height:700px;

display:flex;

align-items:center;

justify-content:center;

position: relative;
z-index: 10;

}



.hero-photo::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(8,18,35,.72) 0%,
        rgba(8,18,35,.45) 35%,
        rgba(8,18,35,.12) 70%,
        transparent 100%
    );

}

.hero-photo{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    background-image:url("../img/products/display/hero/displayBG.jpg");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;

    z-index:0;

}

.display-badge{

opacity:0;

transform:translateY(20px);

animation:fadeUp .6s ease forwards;

animation-delay:.2s;

}

.display-left h1{

font-size:72px;
font-weight:800;
line-height:1.05;
margin-bottom:28px;
color:#fff;

opacity:0;
transform:translateY(35px);
animation:fadeUp .8s ease forwards;
animation-delay:.4s;

}

.display-left p{

opacity:0;

transform:translateY(25px);

animation:fadeUp .8s ease forwards;

animation-delay:.6s;

}

.hero-buttons{

opacity:0;

transform:translateY(20px);

animation:fadeUp .8s ease forwards;

animation-delay:.8s;

position: relative;
z-index: 30;

}

.hero-product{

position:absolute;

top:60%;

right:-100px;

width:1200px;

max-width:none;

transform:
    translateY(-50%)
    rotate(-4deg)
    scale(.95);

opacity:0;

animation:productReveal 1.2s cubic-bezier(.22,.61,.36,1) forwards;

animation-delay:1s;

z-index: 10;

transition:transform .25s ease;

}

.hero-product{

transform:
    translateY(-8px)
    rotate(-4deg)
    scale(1.02);

}


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes productReveal{

from{

    opacity:0;

    transform:
        translateY(calc(-50% + 80px))
        rotate(-4deg)
        scale(.95);

}

to{

    opacity:1;

    transform:
        translateY(-50%)
        rotate(-4deg)
        scale(1);

}

}

#heroMove{

transition: transform .35s ease-out;

will-change: transform;

}

.hero-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:14px;

text-decoration:none;

font-weight:700;

transition:all .35s ease;

}

.hero-btn-primary{

    background:#2563eb;

    color:#fff;

}

.hero-btn-primary:hover{

    background:#3b82f6;

    color:#fff;

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(37,99,235,.35);

}



.display-hero .hero-btn-secondary{

    background:rgba(255,255,255,.08);
    color:#fff;
    border:1px solid rgba(255,255,255,.18);

    transform:translateY(0);
    box-shadow:none;

    transition:all .35s cubic-bezier(.22,.61,.36,1);

}

.display-hero .hero-btn-secondary:hover{

    background:rgba(255,255,255,.18);
    border-color:rgba(255,255,255,.35);

    color:#fff;

    transform:translateY(-5px);

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.display-badge{

box-shadow:

    0 0 25px rgba(37,99,235,.18);

}

.hero-photo{

animation:

    bgZoom 18s linear infinite alternate;

}

@keyframes bgZoom{

from{

transform:scale(1);

}

to{

transform:scale(1.04);

}

}

/====================================DISPLAY CATEGORY====================================/

.display-card{

position:relative;

height:520px;

border-radius:28px;

background:#fff;

cursor:pointer;

overflow:hidden;

text-decoration:none;

box-shadow:
    0 15px 45px rgba(0,0,0,.08);

transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s ease;

}

.display-card{

transform:translateY(-10px);

box-shadow:
    0 35px 80px rgba(0,0,0,.18);

}

.display-card .display-content{

transform:translateY(-6px);

}

.display-bg{

position:absolute;

inset:0;

width:100%;

height:130%;

object-fit:cover;

transition:transform .6s ease;

z-index:1;

}

.display-card .display-bg{

transform:scale(1.5);

}

.display-card .display-product{

transform:
    translateX(-55%)
    translateY(-5px)
    scale(1.06);

filter:drop-shadow(0 30px 45px rgba(0,0,0,.28));

}

.display-content{

position:relative;

z-index:5;

padding:38px;

transition:
    transform .35s ease;

}

.display-content h3{

font-size:34px;

font-weight:500;

line-height:1.35;

color:#172033;

}

.display-category .section-badge{

display:inline-flex;

align-items:center;

padding:10px 22px;

border-radius:999px;

background:#eef4ff;

color:#2563eb;

font-size:13px;

font-weight:700;

letter-spacing:2px;

}

.display-category h2{

margin-top:28px;

font-size:58px;

font-weight:800;

color:#111827;

}

.display-category p{

margin-top:20px;

max-width:760px;

font-size:22px;

line-height:1.7;

color:#667085;

}

.display-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:28px;

}

.display-scene{

position:absolute;

inset:0;

overflow:hidden;

border-radius:28px;

}

.display-product{

position:absolute;

width:162%;

left:45%;

bottom:75px;

transform:translateX(-50%);

transition:all .5s cubic-bezier(.22,.61,.36,1);

z-index:2;

filter:drop-shadow(0 15px 25px rgba(0,0,0,.18));

}

/====================================ABOUT VEWELL====================================/

.about-vewell{

padding:140px 0;

background:

    linear-gradient(

        180deg,

        #ffffff,

        #f8fbff

    );

}

.about-wrapper{

display:grid;

grid-template-columns:45% 55%;

gap:90px;

align-items:center;

}

.about-content{

max-width:620px;

}

.about-content .section-badge{

display:inline-flex;

align-items:center;

padding:10px 22px;

border-radius:999px;

background:#eef4ff;

color:#2563eb;

font-size:13px;

font-weight:700;

letter-spacing:2px;

margin-bottom:28px;

opacity:0;

transform:translateY(25px);

animation:fadeUp .7s ease forwards;

animation-delay:.2s;

}

.about-content h2{

font-size:58px;

font-weight:800;

color:#111827;

line-height:1.15;

margin-bottom:40px;

opacity:0;

transform:translateY(35px);

animation:fadeUp .8s ease forwards;

animation-delay:.4s;

}

.about-content p{

font-size:20px;

line-height:1.85;

color:#667085;

margin-bottom:42px;

opacity:0;

transform:translateY(30px);

animation:fadeUp .8s ease forwards;

animation-delay:.6s;

}

.about-image{

  display:block;

  width:100%;

  height:420px;

  overflow:hidden;

  border-radius:34px;

  display:flex;

  justify-content:center;

  align-items:center;

  overflow:hidden;

  border-radius:34px;

  text-decoration:none;

  cursor:pointer;


  box-shadow:
      0 25px 60px rgba(0,0,0,.12);

  opacity:0;

  transform:translateX(80px);

  animation:imageReveal 1s cubic-bezier(.22,.61,.36,1) forwards;

  animation-delay:.9s;

}

.about-image:hover{

    transform:translateY(-8px);

    box-shadow:
        0 35px 80px rgba(0,0,0,.20);

}


.about-image:hover img{

    transform:scale(1.06);

    filter:brightness(1.06);

}

.about-image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.25),
        transparent
    );

    opacity:0;

    transition:.45s ease;

}

.about-image:hover::after{

    opacity:1;

}
.about-image:active{

    transform:translateY(-4px) scale(.99);

}

@keyframes imageReveal{

from{

    opacity:0;

    transform:translateX(80px);

}

to{

    opacity:1;

    transform:translateX(0);

}

}

.about-image img{

width:100%;

height:100%;

object-fit:cover;

object-position:center;

display:block;

 transition:
    transform .6s cubic-bezier(.22,.61,.36,1),
    filter .6s ease;

}

.about-image img{

transform:scale(1.05);

filter:brightness(.95);

}

.about-line{

width:80px;

height:2px;

background:#2563eb;

margin:36px 0;

border-radius:20px;

}

/====================================DISPLAY APPLICATIONS====================================/

.display-applications{

    padding:140px 0;

    background:#f8fbff;

}

.display-applications .section-badge{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border-radius:999px;

    background:#eef4ff;

    color:#2563eb;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

}

.display-applications h2{

    margin-top:28px;

    font-size:58px;

    font-weight:800;

    color:#111827;

}

.display-applications p{

    margin-top:20px;

    max-width:760px;

    font-size:22px;

    line-height:1.7;

    color:#667085;

    margin-bottom:70px;

}

.application-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

.application-card{

    position:relative;

    background:#fff;

    border-radius:28px;

    overflow:hidden;

    text-decoration:none;

    box-shadow:

        0 15px 45px rgba(0,0,0,.08);

    transition:

        transform .45s cubic-bezier(.22,.61,.36,1),

        box-shadow .45s ease;

}

.application-card{

    transform:translateY(-10px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.18);

}

.application-image{

    height:260px;

    overflow:hidden;

    position:relative;

}

.application-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    to top,
    rgba(0,35,90,.45),
    transparent

    );

    opacity:0;

    transition:.45s;

}

.application-card .application-image::after{

    opacity:1;

}

.application-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:

        transform .7s cubic-bezier(.22,.61,.36,1);

}

.application-card .application-image img{

    transform:scale(1.08);

}

.application-content{

    padding:28px;

    transition:.35s;

}

.application-card .application-content{

        transform:translateY(-5px);

}

.application-content h3{

    font-size:26px;

    font-weight:700;

    color:#172033;

    margin-bottom:10px;

}

.application-content span{

    font-size:18px;

    color:#667085;



.application-arrow{

    margin-top:18px;

    font-size:24px;

    color:#2563eb;

    opacity:0;

    transform:translateX(-10px);

    transition:.35s;

}

.application-card:hover .application-arrow{

opacity:1;

transform:translateX(0);

}



/*====================================

VIDEOTRON HERO====================================*/