*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:"Clash Display", "Clash Display Placeholder", sans-serif;
    background:#000;
    min-height:100vh;
    overflow-x:hidden;
}

/*html*/
/*{*/
/*    scroll-behavior:smooth;*/
/*}*/
.center-glow{
    position:fixed;
    left:50%;
    top:-400px;

    width:1600px;
    height:1000px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
    radial-gradient(
        ellipse,
        rgba(255,255,255,.12),
        rgba(255,255,255,.04) 40%,
        transparent 75%
    );

    filter:blur(80px);

    pointer-events:none;
}

.lights{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}


.center-glow{
    z-index:-2;
}

.lights{
    z-index:-1;
}

.ray{
    z-index:-1;
}

.ray{

    position:absolute;

    top:-55%;

    height:180vh;

    opacity:.08;

    filter:blur(10px);

    transform-origin:top center;

    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,.92),
        rgba(255,255,255,.50),
        transparent
    );
}

/* Source area */

.r1{left:42%;width:70px;animation:drift1 6s ease-in-out infinite alternate;}
.r2{left:45%;width:90px;animation:drift2 7s ease-in-out infinite alternate;}
.r3{left:48%;width:75px;animation:drift3 8s ease-in-out infinite alternate;}
.r4{left:51%;width:110px;animation:drift4 7s ease-in-out infinite alternate;}

.r5{left:54%;width:80px;animation:drift1 8s ease-in-out infinite alternate;}
.r6{left:57%;width:95px;animation:drift2 6s ease-in-out infinite alternate;}
.r7{left:60%;width:70px;animation:drift3 9s ease-in-out infinite alternate;}
.r8{left:63%;width:100px;animation:drift4 7s ease-in-out infinite alternate;}

@keyframes drift1{
    from{transform:rotate(-28deg);}
    to{transform:rotate(-18deg);}
}

@keyframes drift2{
    from{transform:rotate(-12deg);}
    to{transform:rotate(-2deg);}
}

@keyframes drift3{
    from{transform:rotate(4deg);}
    to{transform:rotate(14deg);}
}

@keyframes drift4{
    from{transform:rotate(18deg);}
    to{transform:rotate(28deg);}
}

.r1,.r5{
    animation:drift1 5s ease-in-out infinite alternate;
}

.r2,.r6{
    animation:drift2 6s ease-in-out infinite alternate;
}

.r3,.r7{
    animation:drift3 7s ease-in-out infinite alternate;
}

.r4,.r8{
    animation:drift4 8s ease-in-out infinite alternate;
}

.ray::after{

    content:"";

    position:absolute;
    inset:0;

    background:inherit;

    opacity:.3;

    animation:flicker 2s linear infinite;
}

@keyframes flicker{

    0%{opacity:.2;}
    20%{opacity:.4;}
    40%{opacity:.15;}
    60%{opacity:.45;}
    80%{opacity:.25;}
    100%{opacity:.35;}
}

/********************************************************************************************/
.header{

    position:relative;

    width:90%;
    max-width:1300px;

    margin:20px auto 0;

    height:72px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 30px;

    z-index:100;
}

.logo{

    display:flex;
    align-items:center;
}

.logo img{

   height: 90px;
    width: auto;
    display: block;
    border-radius: 10px;
}

nav{

    display:flex;
    
    gap:45px;
}

nav a{

    color:#ababab;

    text-decoration:none;

    font-size:16px;

    opacity:.8;

    transition:.3s;
}

nav a:hover{
    color:#fff;
    opacity:1;
}

.contact-btn{

    position:relative;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:12px 28px;

    color:#ababab;

    text-decoration:none;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.15);

    transition:.35s ease;

    overflow:visible;

    background:transparent;
}

.contact-btn::before{

    content:"";

    position:absolute;

    inset:4px;

    border-radius:999px;

    background:
    rgba(255,255,255,.08);

    opacity:0;

    transform:scale(.85);

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

    z-index:-1;
}

.contact-btn::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:999px;

    border:1.5px solid rgba(255,255,255,.75);

    opacity:0;

    transform:scale(1);

    transition:none;

    pointer-events:none;
}



.contact-btn:hover{

    color:#fff;

    border-color:
    rgba(255,255,255,.20);
}

.contact-btn:hover::before{

    opacity:1;

    transform:scale(1);
}

.contact-btn:hover::after{

    opacity:.6;

    transform:scale(1.18);
}

.contact-btn:hover::after{

    animation:
    borderWave .9s ease-out forwards;
}

@keyframes borderWave{

    0%{

        opacity:.9;

        transform:scale(1);
    }

    30%{

        opacity:.8;

        transform:scale(1.15);
    }

    100%{

        opacity:0;

        transform:scale(1.45);
    }
}

nav a,
.contact-btn{
    will-change:transform;
}

.profile-badge {
    position: absolute;
    top: 218px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    box-shadow: 0 0 30px rgba(255, 255, 255, .03);
    gap: 14px;
    padding: 2px 7px 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(20px);
    z-index: 100;
}

.profile-image{

    position:relative;

    width:50px;
    height:50px;

    flex-shrink:0;
}

.record-ring{

    position:absolute;

    inset:0;

    border-radius:50%;

    background:
    conic-gradient(
        rgba(255,255,255,.9),
        rgba(255,255,255,.1),
        rgba(255,255,255,.9)
    );

    animation:spin 4s linear infinite;

    z-index:1;
}

.record-hole{

    position:absolute;

    left:50%;
    top:50%;

    width:12px;
    height:12px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:#000;

    z-index:3;
}

@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}
.profile-info{

    color:#fff;

    font-size:15px;

    font-weight:500;

    white-space:nowrap;
}

/*************************************************************************/

.hero{

    position:relative;

    padding-top:290px;

    text-align:center;

    width:100%;

    z-index:100;
}


.center-glow,
.lights,
.ray,
.profile-image,
.record-ring{
    user-select:none;
}

.hero h1 {
    color: #fff;
    font-size: 70PX;
    font-weight: 600;
    letter-spacing: 0px;
    text-transform: uppercase;
    margin: 8px;
    line-height: 84px;
    
}

.gradient-text{

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f5f5f5 25%,
        #cfcfcf 60%,
        #8f8f8f 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    display:inline-block;
}

.hero p{

    max-width:650px;

    margin:30px auto 0;

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

    font-size:18px;

    line-height:1.7;

    font-weight:400;
}

.hero-btn{
    position:relative;
    letter-spacing:2px;
    display:inline-flex;

    align-items:center;
    justify-content:center;

    margin-top:35px;

    padding:14px 34px;

    border-radius:999px;

    text-decoration:none;

    color:#000;

    font-weight:600;

    border:1px solid rgba(255,255,255,.35);

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8f8f8 35%,
        #e5e5e5 100%
    );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 10px 30px rgba(255,255,255,.08);

    transition:all .35s ease;
}
.hero-btn::before{

    content:"";

    position:absolute;

    inset:4px;

    border-radius:999px;

    background:
    rgba(255,255,255,.08);

    opacity:0;

    transform:scale(.85);

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

    z-index:-1;
}

.hero-btn::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:999px;

    border:1.5px solid rgba(255,255,255,.75);

    opacity:0;

    transform:scale(1);

    pointer-events:none;
}

.hero-btn:hover{

    color:#000;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f4f4f4 50%,
        #dcdcdc 100%
    );

    transform:translateY(-2px);

    box-shadow:
        0 15px 40px rgba(255,255,255,.12);
}

.hero-btn:hover::before{

    opacity:1;

    transform:scale(1);
}

.hero-btn:hover::after{

    animation:
    borderWave .9s ease-out forwards;
}



.waveform{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:31px;

    margin-top:70px;

    height:150px;
}

.waveform span{

    width:8px;

    border-radius:999px;

    background:
   linear-gradient(180deg, #353232, #a39696);

    animation:
    wave 1.8s ease-in-out infinite;

    animation-delay:
    calc(var(--i) * .05s);
}

.waveform span{

    box-shadow:
    0 0 10px rgba(255,255,255,.15);
}

.waveform span:nth-child(1),
.waveform span:nth-child(33){
    height:16px;
}

.waveform span:nth-child(2),
.waveform span:nth-child(32){
    height:20px;
}

.waveform span:nth-child(3),
.waveform span:nth-child(31){
    height:24px;
}

.waveform span:nth-child(4),
.waveform span:nth-child(30){
    height:30px;
}

.waveform span:nth-child(5),
.waveform span:nth-child(29){
    height:38px;
}

.waveform span:nth-child(6),
.waveform span:nth-child(28){
    height:45px;
}

.waveform span:nth-child(7),
.waveform span:nth-child(27){
    height:55px;
}

.waveform span:nth-child(8),
.waveform span:nth-child(26){
    height:62px;
}

.waveform span:nth-child(9),
.waveform span:nth-child(25){
    height:70px;
}

.waveform span:nth-child(n+10):nth-child(-n+24){
    height:78px;
}

@keyframes wave{

    0%{
        transform:scaleY(.7);
    }

    50%{
        transform:scaleY(1);
    }

    100%{
        transform:scaleY(.7);
    }
}


/***************************************************************************************/
.companies{

    position:relative;

    margin-top:120px;

    padding:40px 0;

    overflow:hidden;

    width:100%;
}

.marquee{

    width:100%;

    overflow:hidden;

    position:relative;
}

.marquee-track{

    display:flex;

    gap:100px;

    width:max-content;

    animation:marqueeMove 25s linear infinite;
}

.marquee-track span{

    font-size:20px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:3px;

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

    white-space:nowrap;

    transition:.3s;
}

.marquee-track span:hover{

    color:rgba(255,255,255,.8);
}

.fade-left,
.fade-right{

    position:absolute;

    top:0;

    width:220px;

    height:100%;

    z-index:10;

    pointer-events:none;
}

.fade-left{

    left:0;

    background:
    linear-gradient(
        to right,
        #000 0%,
        transparent 100%
    );
}

.fade-right{

    right:0;

    background:
    linear-gradient(
        to left,
        #000 0%,
        transparent 100%
    );
}

@keyframes marqueeMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}



.mobile-menu-btn{

    display:none;

    flex-direction:column;

    gap:5px;

    cursor:pointer;

    position:relative;

    z-index:999999;
    
    cursor:pointer;

    -webkit-tap-highlight-color: transparent;

    touch-action: manipulation;
    
}

.mobile-menu-btn span{

    width:26px;

    height:2px;

    background:#fff;

    border-radius:20px;
}

.mobile-nav{

    position:absolute;

    top:70px;
    left:0;

    width:100%;

    

    background:rgba(255,255,255,.03);

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.08);

    z-index:99999;

    display:flex;
    flex-direction:column;

    visibility:hidden;
    opacity:0;

    max-height:0;

    overflow:hidden;

    transition:
    opacity .3s ease,
    max-height .3s ease;
    border-radius: 15px;
}

.mobile-nav.active{

    visibility:visible;
    opacity:1;

    max-height:500px;
}

.mobile-nav a{

    display:block;

    width:100%;

    padding:18px 20px;

    text-align:center;

    color:#fff;

    text-decoration:none;

    border-bottom:
    1px solid rgba(255,255,255,.08);
}

.profile-badge{

    z-index:10;

    pointer-events:none;
}
/* ===================================================
   MOBILE RESPONSIVE
=================================================== */

/* Tablet */

@media (max-width:992px){

    .hero h1{

        font-size:65px;

        line-height:68px;
    }

    .hero p{

        font-size:17px;
    }

    .companies{

        margin-top:80px;
    }

    .marquee-track span{

        font-size:26px;
    }
}

/* Mobile */

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }

    /* HEADER */

    .header{

    width:95%;

    margin-top:10px;

    padding:0 10px;

    height:65px;
}

    .logo img{

        height:65px;
    }

    nav{
    display:none !important;
    }
    
    .contact-btn{
        display:none !important;
    }
    
    .mobile-menu-btn{
        display:flex !important;
    }

    /* BADGE */
    .profile-badge{

        top:120px;
        left:50%;
        transform:translateX(-50%) scale(.9);
    }
    
    /* HERO */

    .hero{

        padding-top:120px;
    }

    .hero h1{

        font-size:48px;

        line-height:50px;

        padding:0 15px;
    }

    .hero p{

        font-size:15px;

        line-height:1.8;

        padding:0 20px;
    }

    .hero-btn{

        margin-top:25px;

        padding:13px 28px;
    }

    /* WAVEFORM */

    .waveform{

        gap:12px;

        margin-top:50px;

        height:100px;
    }

    .waveform span{

        width:6px;
    }

    /* COMPANIES */

    .companies{

        margin-top:80px;
    }

    .marquee-track{

        gap:50px;
    }

    .marquee-track span{

        font-size:18px;

        letter-spacing:1px;
    }

    .fade-left,
    .fade-right{

        width:60px;
    }
    
     .mobile-nav{

        top:65px;
    }
    
    
}

/* Small Phones */

@media (max-width:480px){

    .hero{

        padding-top:200px;
    }

    .hero h1{

        font-size:42px;

        line-height:44px;
    }

    .hero p{

        font-size:14px;
    }

    .profile-badge{

        transform:
        translateX(-50%)
        scale(.85);
        
    }

    .logo img{

        height:55px;
    }

    .marquee-track span{

        font-size:15px;
    }
}

/********************************************************/
/* ABOUT CHARU GROUP */
/********************************************************/

.about-charu{

    max-width:1400px;

    margin:120px auto;

    padding:0 20px;
}

.about-charu-box{

    display:grid;

    grid-template-columns:1fr 1fr;

    background:
    linear-gradient(
        135deg,
        rgba(20,20,20,.95),
        rgba(10,10,10,.95)
    );

    border:1px solid rgba(255,255,255,.06);

    border-radius:35px;

    overflow:hidden;
}

.about-gallery{

    padding:18px;

    display:grid;

    grid-template-columns:120px 180px 120px 120px;

    grid-template-rows:120px 120px 140px 140px;

    gap:15px;
}

.about-gallery img{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:18px;

    transition:.4s;
    cursor:pointer;
}

.about-gallery img{

    opacity:0;

    transform:
    translateY(100px)
    scale(.8);

    will-change:
    transform,
    opacity;

    cursor:pointer;
}

.about-gallery img:hover{

    transform:scale(1.04);
}

/* Top row */

.about-gallery img:nth-child(1){
    grid-column:1;
    grid-row:1;
}

.about-gallery img:nth-child(2){
    grid-column:2;
    grid-row:1;
}

.about-gallery img:nth-child(3){
    grid-column:1;
    grid-row:2;
}

.about-gallery img:nth-child(4){
    grid-column:2;
    grid-row:2;
}

/* Vertical blocks */

.about-gallery img:nth-child(5){
    grid-column:3;
    grid-row:1 / span 2;
}

.about-gallery img:nth-child(6){
    grid-column:4;
    grid-row:1 / span 2;
}

/* Bottom wide */

.about-gallery img:nth-child(7){
    grid-column:1 / span 4;
    grid-row:3;
}

.about-gallery img:nth-child(8){
    grid-column:1 / span 4;
    grid-row:4;
}

/****************************************/

.about-content{

    padding:80px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.about-content h2{

    font-size:58px;

    line-height:1;

    color:#fff;

    margin-bottom:30px;
}

.about-content p{

    color:#8a8a8a;

    font-size:18px;

    line-height:1.9;

    margin-bottom:40px;
}

@media(max-width:768px){

    .about-charu-box{

        grid-template-columns:1fr;
    }

    .about-gallery{

        grid-template-columns:1fr 1fr;

        grid-template-rows:auto;

    }

    .about-gallery img{

        grid-column:auto !important;
        grid-row:auto !important;

        height:140px;
    }

    .about-content{

        padding:35px 25px;
    }

    .about-content h2{

        font-size:36px;
    }

    .about-content p{

        font-size:16px;
    }
}

/**********************************************************************************/
.stack-section{

    position:relative;

    width:100%;

    max-width:1400px;

    margin:150px auto;

    padding:0 20px;
    
    padding-bottom:5vh;
}
.stack-heading{

    text-align:center;

    margin-bottom:120px;
}

.stack-line{

    display:block;

    width:80px;

    height:2px;

    margin:0 auto 30px;

    border-radius:999px;

    background:
    linear-gradient(
        90deg,
        #ffffff,
        #cfcfcf
    );
}

.stack-title{

    font-size:50px;

    font-weight:600;

    text-align:center;

    margin-bottom:120px;

    background:
    linear-gradient(
        180deg,
        #ffffff,
        #8f8f8f
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.stack-card{

    position:sticky;

    top:80px;

    width:95%;

    max-width:1200px;

    /*height:650px;*/

   margin:0 auto 120px auto;

    border-radius:40px;

    background:
   linear-gradient(
    135deg,
    rgba(20,20,20,.98),
    rgba(10,10,10,.98)
);

    border:
    1px solid rgba(255,255,255,.06);

    overflow:hidden;
}

.card-content{

    display:flex;

    height:100%;
}

.card-left{

    width:60%;

    padding:90px 70px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.card-right{
    padding: 18px;
    width:40%;
}

.card-right img{
    border-radius: 20px;
    width:100%;
    height:90%;

    object-fit:cover;
}


.card-line{

    width:60px;
    height:2px;

    background:#fff;

    margin-bottom:40px;
}




.card-left h3{

    font-size:62px;

    color:#fff;

    margin-bottom:30px;
}

.card-left p{

    color:#8d8d8d;

    font-size:20px;

    line-height:1.8;

    margin-bottom:40px;
}

.card-left a{

    width:max-content;

    padding:14px 30px;

    border-radius:999px;

    border:
    1px solid rgba(255,255,255,.15);

    color:#fff;

    text-decoration:none;
}

.card1{z-index:1;}
.card2{z-index:2;}
.card3{z-index:3;}
.card4{z-index:4;}
.card5{z-index:5;}
.card6{z-index:6;}
.card7{z-index:7;}
.card8{z-index:8;}



@media(max-width:768px){

    .stack-title{

        font-size:52px;
    }

    .stack-card{

        height:auto;
    }

    .card-content{

        flex-direction:column;
    }

    .card-left,
    .card-right{

        width:100%;
    }

    .card-left{

        padding:35px;
    }

    .card-left h3{

        font-size:34px;
    }

    .card-right{

        height:350px;
    }
}


/***************************************************************************/

.vision-section{

     position:relative;

    max-height: 2000.5px;
    height: 2000.5px;

   margin:80px auto 20px auto;
    margin-bottom:40px;
}

.vision-wrapper{

    height:60vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:30px;

    text-align:center;
}

.vision-line{

    font-size:42px;

    font-weight:600;

    color:#2a2a2a;

    transition:.4s ease;
}

.vision-line.active{

    color:#fff;

    transform:translateY(-5px);
}
@media(max-width:768px){

    .vision-section{

        padding:120px 20px;
    }

    .vision-wrapper{

        gap:45px;
    }

    .vision-line{

        font-size:28px;

        line-height:1.3;

        letter-spacing:0;
    }
}

.pin-spacer {
    height: 1413px !important;
}
.about-grid-section{

    max-width:1400px;

    margin:20px auto 150px auto;

    padding:0 30px;
    margin-top:-200px;
}

.about-grid{

    display:grid;

    grid-template-columns:1fr 450px 1fr;

    grid-template-rows:auto auto;

    gap:80px 70px;

    align-items:center;
}

.about-image{

    grid-column:2;
    grid-row:1 / span 2;
}

.about-image img{

    width:100%;

    border-radius:30px;

    display:block;
}

.about-item{

    text-align:center;
}

.number{

    display:block;

    font-size:120px;

    font-weight:700;

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

    line-height:1;

    margin-bottom:-25px;
}

.about-item h3{

    color:#fff;

    font-size:42px;

    margin-bottom:25px;
}

.about-item p{

    color:#8a8a8a;

    font-size:17px;

    line-height:1.8;

    max-width:320px;

    margin:auto;
}

.item1{
    grid-column:1;
    grid-row:1;
}

.item2{
    grid-column:3;
    grid-row:1;
}

.item3{
    grid-column:1;
    grid-row:2;
}

.item4{
    grid-column:3;
    grid-row:2;
}

.about-us-btn{
    text-align:center;
    margin-top: 20px;
}
@media(max-width:768px){

    .about-grid{

        display:flex;

        flex-direction:column;

        gap:50px;
    }

    .about-image{

        order:-1;
    }

    .number{

        font-size:70px;
    }

    .about-item h3{

        font-size:28px;
    }

    .about-item p{

        font-size:16px;
    }
}


/********************************************************/
/* FOOTER */
/********************************************************/

.footer{

    position:relative;

    max-width:1400px;

    margin:180px auto 0;

    padding:0 30px 80px;
}

.footer-line{

    position:relative;

    width:100%;

    height:1.5px;

    margin-bottom:80px;

    background:
    linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.55) 50%,
        transparent 100%
    );
}

.footer-line::after{

    content:"";

    position:absolute;

    left:50%;
    top:-1px;

    transform:translateX(-50%);

    width:350px;

    height:3px;

    background:
    rgba(255,255,255,.25);

    filter:blur(12px);
}
.footer-inner{

    display:flex;

    justify-content:space-between;

    gap:100px;
}

.footer-left{

    max-width:420px;
}

.footer-left img{

    height:70px;

    margin-bottom:25px;
}

.footer-left p{

    color:#8a8a8a;

    font-size:18px;

    line-height:1.8;

    margin-bottom:30px;
}

.footer-left span{

    color:#666;

    font-size:14px;
}

.footer-right{

    display:flex;

    gap:120px;
}

.footer-col{

    display:flex;

    flex-direction:column;

    gap:18px;
}

.footer-col h4{

    color:#fff;

    font-size:18px;

    margin-bottom:10px;
}

.footer-col a{

    color:#7d7d7d;

    text-decoration:none;

    transition:.3s;
}

.footer-col a:hover{

    color:#fff;
}

@media(max-width:768px){

    .footer{

        padding:0 20px 60px;

        margin-top:100px;
    }

    .footer-line{

        margin-bottom:50px;
    }

    .footer-inner{

        flex-direction:column;

        gap:50px;
    }

    .footer-right{

        flex-direction:column;

        gap:40px;
    }

    .footer-left img{

        height:55px;
    }

    .footer-left p{

        font-size:15px;
    }
}


/*********************************************************/
.image-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:999999;
}

.image-modal.active{

    opacity:1;

    visibility:visible;
}

.image-modal img{

    max-width:85%;

    max-height:85vh;

    border-radius:20px;

    box-shadow:
    0 0 50px rgba(255,255,255,.15);
}

.close-modal{

    position:absolute;

    top:30px;
    right:40px;

    color:#fff;

    font-size:50px;

    cursor:pointer;
}