@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    box-sizing: border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    align-items: center;
     background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    min-height:100vh
}
.autoshow{
    animation: text-appear both;
    animation-timeline: view();
    animation-range: entry 20% cover 100vh;
}
.timeline-item:nth-child(1){
    animation-range: entry 20% cover 40%;
}
.timeline-item:nth-child(2){
    animation-range: entry 40% cover 60%;
}
.timeline-item:nth-child(3){
    animation-range: entry 60% cover 80%;
}

@keyframes text-appear{
    from{
        opacity: 0;
        transform: translateY(10px) scale(0.5);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
header{
    width: 100%;
    background-color: rgb(26, 26, 36);
    position:sticky;
    top: 0;
    z-index: 99;
}
li{
    width: 100px;
    text-align: center;
    margin: 5px;
    list-style: none;
}
              
.nav-menu .fa{
             min-width: 15px;
            margin-right: 8px;
}
li a{ 
    color: white;
    font-family: "montserrat", sans-serif;
    font-weight: 500;
    font-size: 15px;

}
.navbar{
           min-height: 50px;
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 0 24px;
}
.logo{
        width: 20%;
}
.navbar .logo img{
                   max-width: 20%;

}
.nav-menu{
           display: flex;
           align-items: center;
           gap: 20px;
}
.nav-link{
        transition: .3s ease;
}
.nav-link:hover{
                   background-color:#D4AF37;
                   padding: 5px;
                   border-radius: 10px;
}
.Quote{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 20px;
    background-color: #D4AF37;
    border-radius: 10px;
}
.Quote a{
    color: white;
}
.hamburger{
            display: none;
            cursor: pointer;
}
.bar{
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: white;
}



.prof-head{
        text-align: center;
        margin: 50px 20px;
        font-family: "montserrat", sans-serif;
        color: rgb(28, 27, 27);
}
.prof-head p{
    margin: auto;
    width: 400px;
    font-size: 15px;
    margin-bottom: 30px;
    border-style: solid;
    border-width: 2px;
    border-color: #333333;
    border-radius: 20px;
}
.prof-head h2{
    font-size: 40px;
    font-weight: 600px;
    margin-bottom: 20px;
}
footer{
    position: static;
    bottom: 0px;
}
.footer-distributed{
background-color: rgb(28, 27, 27);
box-sizing: border-box;
widows: 100%;
text-align: left;
font-family: "montserrat", sans-serif;
font-weight: 500px;
font-size: 16px bold;
color: white;
padding: 50px 50px 60px 50px;
margin-top: 80px;

}

.img-box{
        width: 95%;
        height: auto;
        border-radius: 15px;
        box-shadow: #333333;
        margin: 10px auto;
}
.img-box img{
         width: 100%;
         object-fit: cover;
}



:root{

    --bg:#090909;
    --card:#151515;
    --white:#ffffff;
    --text:#c9c9c9;
    --gold:#D9A441;
    --overlay:rgba(0,0,0,.35);

    --radius:32px;

    --transition:.55s cubic-bezier(.2,.8,.2,1);

}

/*=========================================
  RESET
=========================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:var(--bg);
    color:var(--white);
    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

}

/*=========================================
  SHOWCASE SECTION
=========================================*/

.showcase{

    position:relative;
    width:95%;
    min-height:100vh;

    padding:110px 8%;

    overflow:hidden;

}

/*=========================================
  BACKGROUND GLOW
=========================================*/

.bg-glow{

    position:absolute;
    border-radius:50%;
    filter:blur(140px);
    z-index:0;
    opacity:.35;

}

.glow1{

    width:380px;
    height:380px;

    background:#192f5e;

    top:-80px;
    left:-80px;

}

.glow2{

    width:500px;
    height:500px;

    background:#3d2b10;

    right:-120px;
    bottom:-120px;

}


/*=========================================
  CARD CONTAINER
=========================================*/

.cards{

    position:relative;

    z-index:2;

    display:flex;

    gap:20px;

    height:620px;

}

/*=========================================
  CARD
=========================================*/

.card{

    position:relative;

    flex:1;

    border-radius:var(--radius);

    overflow:hidden;

    background-size:cover;

    background-repeat: no-repeat;

    background-position:center center;

    cursor:pointer;

    transition:all var(--transition);

}

/* Expanded Card */

.card.active{

    flex:3;

}

/*=========================================
  IMAGE OVERLAY
=========================================*/

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    to top,

    rgba(0,0,0,.82),

    rgba(0,0,0,.25),

    rgba(0,0,0,.12)

    );

}

/*=========================================
  VERTICAL TITLE
=========================================*/

.vertical-title{

    position:absolute;

    left:28px;

    bottom:45px;

    writing-mode:vertical-rl;

    transform:rotate(180deg);

    font-size:15px;

    letter-spacing:6px;

    color:#ffffff;

    font-weight:600;

    transition:var(--transition);

}

/*=========================================
  CONTENT
=========================================*/

.content{

    position:absolute;

    left:50px;

    bottom:50px;

    max-width:360px;

    opacity:0;

    transform:translateY(40px);

    transition:all .45s ease;

}

.card.active .content{

    opacity:1;

    transform:translateY(0);

}

.card.active .vertical-title{

    opacity:0;

}

.content h3{

    font-size:34px;

    margin-bottom:18px;

}

.content p{

    color:var(--text);

    line-height:1.8;

    font-size:16px;

    margin-bottom:30px;

}

.content a{

    color:var(--gold);

    font-weight:600;

    transition:.3s;

}

.content a:hover{

    letter-spacing:1px;

}

/*=========================================
  HOVER
=========================================*/

.card:hover{

    transform:translateY(-8px);

}


/*=========================================
    Scroll Reveal
=========================================*/

.card{

    opacity:0;

    transform:translateY(80px);

}

.card.show{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease,

        flex .55s cubic-bezier(.2,.8,.2,1);

}


/*====================================================
  PREMIUM ANIMATIONS
====================================================*/

/* Floating Background Glow */

.bg-glow{

    animation: glowFloat 12s ease-in-out infinite;

}

.glow2{

    animation-delay:6s;

}

@keyframes glowFloat{

    0%{

        transform:translate(0,0) scale(1);

    }

    25%{

        transform:translate(40px,-30px) scale(1.08);

    }

    50%{

        transform:translate(-30px,20px) scale(.95);

    }

    75%{

        transform:translate(20px,35px) scale(1.05);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}


/*====================================================
  GLASS CARD
====================================================*/

.card{

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

    backdrop-filter:blur(8px);

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

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

    box-shadow:

        0 20px 60px rgba(0,0,0,.45),

        inset 0 1px 0 rgba(255,255,255,.06);

}


/*====================================================
  HOVER ELEVATION
====================================================*/

.card:hover{

    transform:

        translateY(-12px)

        scale(1.015);

    box-shadow:

        0 35px 80px rgba(0,0,0,.55),

        0 0 45px rgba(217,164,65,.18);

}


/*====================================================
  GOLD BORDER ANIMATION
====================================================*/

.card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:

    linear-gradient(

        130deg,

        rgba(217,164,65,.8),

        transparent,

        rgba(255,255,255,.12),

        transparent,

        rgba(217,164,65,.6)

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:0;

    transition:.6s;

}

.card:hover::before{

    opacity:1;

}


/*====================================================
  SHINE EFFECT
====================================================*/

.card::after{

    content:"";

    position:absolute;

    top:0;

    left:-180%;

    width:80%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

    transform:skewX(-25deg);

    transition:1.3s;

}

.card:hover::after{

    left:200%;

}


/*====================================================
  IMAGE ANIMATION
====================================================*/

.card{

    background-size:110%;

    transition:

        background-size 8s linear,

        transform .5s,

        flex .55s;

}

.card.active{

    background-size:125%;

}


/*====================================================
  OVERLAY
====================================================*/

.overlay{

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.90),

        rgba(0,0,0,.35),

        rgba(0,0,0,.08)

    );

}


/*====================================================
  CONTENT ANIMATION
====================================================*/

.content h3{

    transition:.45s;

}

.content p{

    transition:.55s;

}

.content a{

    transition:.45s;

}

.card.active h3{

    animation:slideUp .7s;

}

.card.active p{

    animation:slideUp .9s;

}

.card.active a{

    animation:slideUp 1.1s;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*====================================================
  BUTTON
====================================================*/

.content a{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--gold);

    font-weight:600;

}

.content a:hover{

    gap:20px;

}


/*====================================================
  TITLE
====================================================*/

.section-title h2{

    animation:titleFade 1.2s ease;

}

@keyframes titleFade{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*====================================================
  PARALLAX
====================================================*/

.showcase{

    perspective:1500px;

}

.cards{

    transform-style:preserve-3d;

}


/*====================================================
  ACTIVE CARD
====================================================*/

.card.active{

    z-index:5;

}


/*====================================================
  SMOOTH SCROLL
====================================================*/

html{

    scroll-behavior:smooth;

}


/*====================================================
  CUSTOM SCROLLBAR
====================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:#2f2f2f;

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}


/*=========================================
    CURSOR LIGHT EFFECT
=========================================*/

.card{

    position:relative;
    overflow:hidden;

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at var(--x) var(--y),

        rgba(255,255,255,.18),

        transparent 45%

    );

    opacity:0;

    transition:.3s;

    pointer-events:none;

}

.card:hover::before{

    opacity:1;

}

/*=========================================
    GPU ACCELERATION
=========================================*/

.card{

    will-change:transform;

    transform-style:preserve-3d;

    backface-visibility:hidden;

}

.content a{

    display:inline-flex;

    transition:.3s;

}


.footer-distributed .left, .center, .right{
               display: inline-block;
               vertical-align: top;
}
.footer-distributed .left{
  width: 30%;
}
.footer-distributed h3{
font-size: 36px;
margin: 0;
}
.footer-distributed h3 span{
    color: #D4AF37;
}
.footer-distributed .footer-link{
     color: #fff;
     margin: 20px 0px 12px;
}
.footer-distributed .footer-link a{
       display: inline-block;
       text-decoration: none;
       line-height: 1.8;
       color: inherit;
}
.footer-distributed .company-name{
        color: #8f9296;
        font-size: 15px;
        font-weight: normal;
        margin: 0;
}
.footer-distributed .center{
        width: 35%;
}
.footer-distributed .center i{
        background-color: #D4AF37;
        color: #fff;
        font-size: 25px;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        text-align: center;
        line-height: 42px;
        margin: 10px 15px;
        vertical-align: middle;
}
.footer-distributed .center i.fa-envelope{
        font-size: 17px;
        line-height: 38px;
}
.footer-distributed .center p{
         display: inline-block;
         color: white;
         vertical-align: middle;
         margin: 0;
}
.footer-distributed .center p span{
        display: block;
        font-weight: normal;
        font-size: 14px;
        line-height: 2;
}
.footer-distributed .center p a{
        color: #D4AF37;
}
.footer-distributed .right{
         width: 30%;
}
.footer-distributed .about-company{
        line-height: 20px;
        font-size: 13px;
        font-weight: normal;
        margin: 0;
}
.footer-distributed .about-company span{
        display: block;
        color:  #D4AF37;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 20px;
}
.footer-distributed .footer-icon{
        margin-top: 25px;
}
.footer-distributed .footer-icon a{
        display: inline-block;
        width: 35px;
        line-height: 35px;
        cursor: pointer;
        background-color: #D4AF37;
        color: #fff;
        font-size: 20px;
        border-radius: 2px;
        text-align: center;
        margin-right: 3px;
        margin-bottom: 5px;
}
.footer-distributed .footer-icon a:hover{
        background-color:#D4AF37;
} 
.footer-distributed .footer-link a:hover{
            color:#D4AF37;
}






/* ===========================================================
   LARGE MOBILE
=========================================================== */
@media (max-width:1600px){

    .card:hover{

        transform:translateY(-10px);

    }
    .showcase{

    padding:90px 6%;

   }

    .cards{

    height:580px;

   }

.section-title h2{

font-size:64px;

}

}



@media(max-width: 880px) {
.footer-distributed .footer-link, .footer-distributed .center,
 .footer-distributed .right{
    display: block;
    width: 100%;
    margin-bottom: 40px;
    text-align: center;
 }
 .footer-distributed .center{
    text-align: left;
    margin-top: 12px;
 }
     .card{

        backdrop-filter:blur(6px);

    }
    .cards{

height:520px;

gap:15px;

}

.section-title h2{

font-size:56px;

}

.content{

left:35px;

bottom:35px;

}

.content h3{

font-size:28px;

}

}

@media (max-width:834px){

    .card.active{

        background-size:120%;

    }
    .showcase{

padding:80px 5%;

}

.cards{

height:480px;

}


}



@media(max-width: 786px){
    .navbar .logo img{
        max-width: 30%;
        }

    .hamburger{
                 display: block;
                 padding: 10px;
    }
    .hamburger.active .bar:nth-child(2){
        opacity: 0;
    }
.hamburger.active .bar:nth-child(1){
        transform: translateY(8px) rotate(45deg); 
}
.hamburger.active .bar:nth-child(3){
    transform: translateY(-8px) rotate(-45deg); 
}
.nav-menu{
          position: fixed;
          left: -100%;
          top: 40px;
          gap: 0;
          flex-direction: column;
                  background-color: rgb(16, 16, 20);
          width: 100%;
          text-align: center;
          transition: 0.3s;
}
.nav-menu li{
              margin-top: 10px;
              padding: 6px auto;
}
.nav-item{
            margin: 20px 0;
            padding: 10px;
}
.nav-menu.active{
           left: 0;
}
 .card:hover{

        transform:none;

    }

    .card::after{

        display:none;

    }
    .cards{

flex-direction:column;

height:900px;

}

.card{

height:180px;

}

.card.active{

height:480px;

}

.vertical-title{

writing-mode:horizontal-tb;

transform:none;

left:30px;

bottom:30px;

}

.content{

left:30px;

bottom:30px;

max-width:90%;

}



}

@media (max-width:720px){

    .bg-glow{

        opacity:.20;

    }

}

@media (max-width:480px){

    .card{

        border-radius:22px;

    }

    .content h3{

        font-size:20px;

    }
    .section-title h2{

font-size:46px;

}

.card.active{

height:420px;

}

.content h3{

font-size:24px;

}

.content p{

font-size:15px;

}


}

@media (max-width:480px){

.showcase{

padding:70px 20px;

}

.section-title span{

font-size:11px;

}

.section-title h2{

font-size:36px;

}

.card{

height:160px;

border-radius:24px;

}

.card.active{

height:360px;

}

.content{

left:20px;

right:20px;

bottom:20px;

}

.content h3{

font-size:22px;

}

.content p{

font-size:14px;

line-height:1.6;

}

}