/* RESET */


.site-content{
    opacity:0;
    visibility:hidden;
}
body.home.loading .site-content{
    opacity:0;
}

body:not(.loading) .site-content{
    opacity:1;
    visibility:visible;
    transition:opacity .8s ease;
}


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

body{
    font-family:'Inter', sans-serif;
    background:#E6E6E6;
     overflow-x:hidden;
}


/* HEADER */
.header{
    position:relative;   /* ADD THIS */
    z-index:9999;
 
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 40px;
    background-color:transparent;
}


.logo-area{
    display:flex;
    align-items:center;
    gap:10px;
}


.logo{
    width:90px;
}

.brand{
    font-size:30px;
    font-weight:1000;   /* THIS is the key */
    letter-spacing:-0.5px; /* tighter, more premium */
    font-family:'Plus Jakarta Sans', sans-serif;
}




.nav-pill{
    display:flex;
    gap:10px -16px; /* smaller gap looks more premium */
    background:#8f8f8f;
    backdrop-filter:blur(10px);
    padding:10px;
    border-radius:18px;
}

/* MENU ITEMS */
.nav-pill a{
    color:#eaeaea;
    text-decoration:none;
    font-weight:600;
    
    padding:10px 22px;
    border-radius:12px;
    display:inline-block;
    transition:0.25s ease;
}

/* HOVER EFFECT */
.nav-pill a:hover{
     background:#6b6b6b;
    color:#fff;
    border-radius:10px;
}
.nav-pill a.active{
    background:#5f5f5f;
    color:#fff;
}





/* 🔥 HERO LAYOUT (MOST IMPORTANT PART) */

/* MOBILE VIDEO HIDDEN BY DEFAULT */
.mobile-video{
    display:none;
}
.hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    
    padding: 80px ;
    max-width:1500px;
    margin:auto;
     min-height:90vh;
    
    
}



/* LEFT SIDE */
.hero-text{
    flex: 1;
    
}


/* MASSIVE HEADLINE */
.hero-text h1{
    font-size:clamp(28px, 6vw, 50px);
    word-break:break-word;
    font-weight:400;   /* IMPORTANT — force normal weight */
    line-height:1.1;
    letter-spacing:-1px;
}

.bold-line{
    font-weight:700;
}




.hero-text span{
    color:#138D91;
}


/* PARAGRAPH */
.hero-text p{
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:18px;      /* slightly smaller = more elegant */
    line-height:1.8;     /* luxury spacing */
    letter-spacing:-0.15px;
    color:#000000;
}





/* CTA */
.cta{
    margin-top:40px;
    font-weight:600;
    font-size: 12px;
    letter-spacing:1px;
}

.email{
    color:#138D91;
    text-decoration:none;
    font-weight:600;
    transition:0.35s;
    cursor:pointer
}

.email:hover{
    color:#ffffff;

    text-shadow:
        0 0 8px rgba(19,141,145,0.9),
        0 0 18px rgba(19,141,145,0.7),
        0 0 30px rgba(19,141,145,0.5);
}





.hero-image img{
    max-width:100%;
    height:auto;
}

body{
    overflow-x:hidden;
}
.bold-line{
    font-weight:800;
     color:#1c8b73;
}
.hero-text{
    max-width:600px;
}

/* ANIMATION */
.animate-hero{
    opacity:0;
}

.animate-hero.start{
    animation:slideFade 1.4s cubic-bezier(.16,.84,.44,1) forwards;
}


/* KEYFRAMES */
@keyframes slideFade{

    from{
        opacity:0;
        transform:translateX(100px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}
.video-panel{
     position:relative;
    z-index:1;
    flex: 1;
    height:65vh;

    background:#DCDCDC;
    border-radius:20px;

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

    overflow:hidden; /* ⭐ prevents video overflow */

    transform: translateX(140%);
    will-change: transform;

     
    

}
.video-panel.animate{
    animation:panelSlide 1.1s cubic-bezier(.16,.84,.44,1) forwards;
}




.video-box{
    width:800px;
    max-width:90%;
    aspect-ratio:16/9;
    border-radius:20px;

}

.video-box video{
    width:100%;
    height:100%;
    object-fit:cover;

    border-radius:20px;
}



@keyframes panelSlide{

    from{
        transform: translate(140%);
    }

    to{
        transform: translate(3%);
    }
}


/* Hide hamburger on desktop */
.hamburger{
    display:none;
    flex-direction:column;
    gap:6px;
    cursor:pointer;
    z-index:10000;
}

.hamburger span{
    width:26px;
    height:3px;
    background:#111;
    border-radius:3px;

    transition:0.35s ease;
}
/* When menu is open */
.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}


@media (max-width:768px){

    .hero-text{
        padding-left:0;
        margin-left:0;
        max-width:100%;
    }

    .hero{
    padding:80px 40px;
}

}




/* show hamburger */
@media (max-width:768px){

.hero{
    flex-direction:column;
    align-items:flex-start;
}

/* ✅ SHOW ONLY ON MOBILE */
.hamburger{
    display:flex;
    padding:8px;
}



}

@media (max-width:768px){

.nav-pill{
    position:absolute;
    top:70px;
    left:50%;
    transform:translateX(-50%) translateY(-10px);

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

    flex-direction:column;
    align-items:flex-start;
    gap:18px;

    background:rgba(143,143,143,0.75);
backdrop-filter:blur(10px);

    padding:18px 24px;
    border-radius:18px;

    box-shadow:0 18px 40px rgba(0,0,0,0.18);

    opacity:0;
    pointer-events:none;

    transition:.25s ease;
}




.nav-pill.active{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

}
.nav-pill a{
    color:#fff;
    font-size:18px;
}

.nav-pill a:active{
    transform:scale(0.97);
}
.nav-pill a{
    padding:10px 18px;
    border-radius:10px;
    transition:.25s;
}

.nav-pill a:hover{
    background:#6b6b6b;
}






/*Work CSS*/
.work{
    max-width:1400px;
    margin: auto;
    padding:40px;
}

.work h1{
    font-size:42px;
    margin-bottom:40px;
}

.work-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
    gap:30px;
   
    
}

.work video{
    width:100%;
    border-radius:16px;
     opacity:0;
    transform:translateY(40px);
    animation:fadeUp 1.1s cubic-bezier(.16,.84,.44,1) forwards;
    will-change: transform, opacity; 

}
@keyframes fadeUp{

    from{
        opacity:0;
        transform:translate3d(0,40px,0);
    }

    to{
        opacity:1;
        transform:translate3d(0,0,0);
    }
}
.work video:nth-child(1){ animation-delay:0.25s; }
.work video:nth-child(2){ animation-delay:0.45s; }
.work video:nth-child(3){ animation-delay:0.65s; }


/* ================= MOBILE WORK PAGE ================= */

@media (max-width:768px){

.work{
    padding:20px;              /* reduce huge side space */
}

.work h1{
    font-size:28px;            /* large desktop text feels heavy on phones */
    margin-bottom:24px;
}

/* Stack videos cleanly */
.work-grid{
    grid-template-columns:1fr;
    gap:18px;
}

/* Reduce animation distance for mobile */
.work video{
    backface-visibility:hidden;
    transform:translate3d(0,20px,0);
    will-change: transform, opacity;
    animation:fadeUp 0.75s cubic-bezier(.16,.84,.44,1) forwards;
    box-shadow:0 30px 60px rgba(0,0,0,.3);

}


}


/*contact style*/

/* CONTACT SOCIAL BLOCK */
.contact-social-section {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 250px; /* pushes block below fixed header */
}

.contact-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 36px;
}

.contact-social li a {
    position: relative;
    display: block;
    width: 210px;
    height: 80px;
    background: #fff;
    text-align: left;
    padding-left: 20px;
    transform: rotate(-30deg) skew(25deg);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
    box-shadow: -20px 20px 10px rgba(0,0,0,0.5);
    text-decoration: none;

    opacity:0;
transform: rotate(-30deg) skew(25deg) translateY(40px);
animation: fadeSocial 0.9s ease forwards;

}

.contact-social li a .fa {
    font-size: 40px;
    color: #262626;
    line-height: 80px;
    padding-right: 14px;
    transition: color .35s ease;
}

.contact-social li a span {
    position: absolute;
    top: 30px;
    left: 70px;
    color: #262626;
    font-size: 17px;
    letter-spacing: 2px;
    transition: color .35s ease;
}

/* Side 3D Edges */
.contact-social li a:before {
    content: '';
    position: absolute;
    top: 10px;
    left: -20px;
    height: 100%;
    width: 20px;
    background: #b1b1b1;
    transform: skewY(-45deg);
}

.contact-social li a:after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: -10px;
    height: 20px;
    width: 100%;
    background: #b1b1b1;
    transform: skewX(-45deg);
}

/* Hover Effects */
.contact-social li a:hover {
    transform: rotate(-30deg) skew(25deg) translate(20px, -15px);
    box-shadow: -50px 50px 50px rgba(0,0,0,0.5);
}

.contact-social li:hover .fa,
.contact-social li:hover span {
    color: #fff;
}

/* Brand Hover Colors */
/* ============================================================
   LINKEDIN — Modern Professional Blue Gradient
============================================================ */
.contact-social li:nth-child(1):hover a {
    background: linear-gradient(135deg, #0077B5 0%, #004f7a 100%);
}
.contact-social li:nth-child(1):hover a:before {
    background: linear-gradient(135deg, #006097, #003b5c);
}
.contact-social li:nth-child(1):hover a:after {
    background: linear-gradient(135deg, #0091ce, #004369);
}

/* ============================================================
   WHATSAPP — Vibrant Green Gradient
============================================================ */
.contact-social li:nth-child(2):hover a {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}
.contact-social li:nth-child(2):hover a:before {
    background: linear-gradient(135deg, #1ebe5b, #0e7768);
}
.contact-social li:nth-child(2):hover a:after {
    background: linear-gradient(135deg, #33e17e, #0f6f60);
}

/* ============================================================
   GMAIL — Subtle Red Gradient
============================================================ */
.contact-social li:nth-child(3):hover a {
    background: linear-gradient(135deg, #d93025 0%, #a52714 100%);
}
.contact-social li:nth-child(3):hover a:before {
    background: linear-gradient(135deg, #c5221f, #8b1c13);
}
.contact-social li:nth-child(3):hover a:after {
    background: linear-gradient(135deg, #e1442e, #b52217);
}


.contact-social li:nth-child(3):hover a:after {
    background: linear-gradient(
        45deg,
        #fbbc05,
        #ea4335
    );
}


/* ============================================================
   INSTAGRAM — **Full Official Gradient**
============================================================ */
.contact-social li:nth-child(4):hover a {
    background: linear-gradient(
        45deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    );
}
.contact-social li:nth-child(4):hover a:before {
    background: linear-gradient(45deg, #e6683c, #dc2743);
}
.contact-social li:nth-child(4):hover a:after {
    background: linear-gradient(45deg, #cc2366, #bc1888);
}

/* ================================
   🌈 Instagram OFFICIAL GRADIENT
================================ */
.contact-social li:nth-child(4):hover a {
    background: linear-gradient(45deg,
        #f09433 0%,
        #e6683c 25%,
        #dc2743 50%,
        #cc2366 75%,
        #bc1888 100%
    );
}

.contact-social li:nth-child(4):hover a:before {
    background: linear-gradient(45deg,
        #e6683c 0%,
        #dc2743 50%,
        #cc2366 100%
    );
}

.contact-social li:nth-child(4):hover a:after {
    background: linear-gradient(45deg,
        #cc2366 0%,
        #bc1888 100%
    );
}

/* Mobile Tweaks */
@media (max-width:768px){

    .contact-social{
        margin-top:-80px;
        transform: translateY(-40px);
        flex-direction:column;   /* ⭐ THIS stacks them */
        align-items:center;      /* keeps them centered */
        gap:46px;               /* space between buttons */
    }

}

    .contact-social li a {
        width: 180px;
        height: 70px;
        transform: rotate(-20deg) skew(18deg);

    }
    .contact-social li a .fa { font-size: 30px; }

    .contact-social li a span {
    position: absolute;
    top: 30px;
    left: 70px;
    color: #262626;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: color .35s ease;
}

@keyframes fadeSocial{

    from{
        opacity:0;
        transform: rotate(-30deg) skew(25deg) translateY(60px);
    }

    to{
        opacity:1;
        transform: rotate(-30deg) skew(25deg) translateY(0);
    }
}
.contact-social li:nth-child(1) a{
    animation-delay:0.2s;
}

.contact-social li:nth-child(2) a{
    animation-delay:0.4s;
}

.contact-social li:nth-child(3) a{
    animation-delay:0.6s;
}

.contact-social li:nth-child(4) a{
    animation-delay:0.8s;
}




#pre-load{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;

    /* ⭐ THIS is the magic */
    min-height:100svh;

    background:#000;
    display:flex;
    align-items:center;
    justify-content:center;

    z-index:999999;

    opacity:1;
    visibility:visible;
    transition:opacity .6s ease, visibility .6s ease;
}

 #pre-load .loader-inner{
     --loader-background:linear-gradient(0deg,rgba(50,50,50,.2) 0%,rgba(100,100,100,.2) 100%);
     position:relative;
     height:400px;
     aspect-ratio:1;
     display:flex;
     align-items:center;
     justify-content:center 
    
}
 #pre-load .loader-inner .loader-logo{
     position:absolute;
     top:50%;
     left:50%;
     transform:translate(-50%,-50%);
     width:60px;
     height:60px;
     display:flex;
     align-items:center;
     justify-content:center;
     animation:color-change 2s infinite ease-in-out;
     z-index:999 
    
}
 #pre-load .loader-logo img{
    width:70px;        /* ideal size */
    height:auto;
    object-fit:contain;
}

 #pre-load .loader-inner .box{
     position:absolute;
     background:var(--loader-background);
     border-radius:50%;
     border-top:1px solid rgb(100,100,100);
     box-shadow:rgba(0,0,0,.3) 0 10px 10px 0;
     backdrop-filter:blur(5px);
     animation:ripple 2s infinite ease-in-out 
}
 #pre-load .loader-inner .box:nth-child(1){
    width:25%;
    aspect-ratio:1/1;
    z-index:99
}
 #pre-load .loader-inner .box:nth-child(2){
    inset:30%;
    z-index:98;
    border-color:rgba(100,100,100,.8);
    animation-delay:.2s
}
 #pre-load .loader-inner .box:nth-child(3){
    inset:20%;
    z-index:97;
    border-color:rgba(100,100,100,.6);
    animation-delay:.4s
}
 #pre-load .loader-inner .box:nth-child(4){
    inset:10%;
    z-index:96;
    border-color:rgba(100,100,100,.4);
    animation-delay:.6s
}
 #pre-load .loader-inner .box:nth-child(5){
    inset:0;
    z-index:95;
    border-color:rgba(100,100,100,.2);
    animation-delay:.8s
}
 @keyframes ripple{
     0%{
        transform:scale(1);
        box-shadow:rgba(0,0,0,.3) 0 10px 10px 0
    }
     50%{
        transform:scale(1.3);
        box-shadow:rgba(0,0,0,.3) 0 30px 20px 0
    }
     100%{
        transform:scale(1);
        box-shadow:rgba(0,0,0,.3) 0 10px 10px 0
    }
}
 @keyframes color-change{
     0%{
        opacity:.7
    }
     50%{
        opacity:1
    }
     100%{
        opacity:.7
    }
}
 

@media (max-width:768px){

.header{
    justify-content:space-between; /* keeps logo left, hamburger right */
    padding:10px 8px; /* prevents center illusion from large padding */
}

/* IMPORTANT */
.logo-area{
    margin-right:auto; /* pushes everything else away */
}

}




@media (max-width:768px){

.brand{
    font-size:17px;  

    font-weight:900; 
}

.logo-area{
    display:flex;
    align-items:center;
    gap:4px;
}
.logo{
    width:50px;
}

}









/* ================= MOBILE ================= */

@media (max-width:768px){

    .hero{
        flex-direction:column;
        align-items:flex-start;
    }

    /* hide desktop video */
    .video-panel{
        display:none;
    }

    /* show mobile video */
    .mobile-video{
        display:block;
        width:100%;
        margin:20px 0;
        border-radius:18px;
        overflow:hidden;
    }

    .mobile-video video{
        width:100%;
        aspect-ratio:16/9;
        object-fit:cover;
    }

}


/* DESKTOP SAFETY */
@media (min-width:769px){

.mobile-video{
    display:none !important;
}

.video-panel{
    display:flex !important;
}

.hero{
    flex-direction:row !important;
}

}