html {
    font-size: 100%;
    color-scheme: light dark;
    overflow-x: clip;
  }
  
  *,*::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Remove default margin */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
  }
  
  /* Set core root defaults */
  html:focus-within {
    scroll-behavior: smooth;
  }
  
  /* Set core body defaults */
  body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    cursor: pointer;
    scroll-behavior: smooth;
  }
  
  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }
  
  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  
  img {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
  }
  
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  
  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
  
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

    
@font-face {
    font-family: j1;
    src: url(bold.ttf);
}

@font-face {
    font-family: logo;
    src: url(logo.ttf);
}

@font-face {
    font-family:j2;
    src:url(book.ttf);
}

@font-face {
    font-family:jatin;
    src:url(j3.ttf);
}
:root{
    --h1-font:clamp(1.75rem,2vw + 1rem,3rem);
    --bg-1:white;
    --bg-2: #ffc436;
    --bg-3:#edb74d;
    --bg-4:#151515;
    --bg-5:white;
    --bg-p:#787786;
    --bg-slider:black;
    --nav-p:#0e2954;
    --nav-a:white;
    --m-g:5rem;
    --btn-2:black;
    --btn-1:#b4b4b4;
    --nav-bg1:#dbdbdb;
    --nav-bg2:#e4e8ed;
    --r-fncy:white;
    --l-fncy:black;
    --ms-text: clamp(2rem, 1.5vw + .65rem, 2.25rem);
    --h2-text: clamp(2rem, 1.5vw + 0.75rem, 2.5rem);
    --l-text: clamp(1.15rem, 1vw + 1rem, 2.75rem);
    --p-text:clamp(1.15rem, 0.7vw + 0.5rem, 1.35rem);
    --p1-text:clamp(1.35rem, 1vw + 0.25rem, 1.45rem);
    --h1-text: clamp(3.75rem, 3vw + 2rem, 4.25rem);
    --m-text: clamp(1.35rem, 0.75vw + 0.75rem, 1.5rem);
  --ml-text: clamp(1.35rem, 2vw + 1rem, 1.75rem);
--brg-heading: clamp(1.65rem, 1vw + 1rem, 2.5rem);
--xl-text: clamp(3rem, 1.5vw + 1.25rem, 4rem);
  --size:40px;
	--split-text: clamp(4rem, 3vw + 3.25rem, 5rem);
    --x:0;
    --y:0;
    --bg-7:#B4A5A5;
    --color-dark: #1f1f1f;
  --color-light: #aaaaaa;
}

body{
    text-rendering: optimizeSpeed;
    line-height:1.6;
    overflow-x: clip;
    min-height:100vh;
    width:100%;
    font-family:j2;
    color:black;
    scrollbar-width:thin;
    scrollbar-color:#760026;
    background:var(--bg-1);

    
}

:root .night{
    --bg-1:#fcfcfc;
    --bg-2: #ffc436;
    --bg-3:#edb74d;
    --bg-4:#151515;
    --bg-5:white;
    --bg-p:#dbdbdb;
    --bg-slider:white;
    --nav-p:white;
    --nav-a:#dbdbdb;
    --btn-1:#dbdbdb;
    --btn-2:white;
    --nav-bg2:black;
    --nav-bg1:#282C35;
    
}




::-webkit-scrollbar{
     width: 5px;
   }
   ::-webkit-scrollbar-track{
     background: linear-gradient(45deg,purple,#f80351,purple);
   }
   ::-webkit-scrollbar-thumb{
     background: linear-gradient(45deg,lightsalmon,#c97b95);
     box-shadow: 0 -100vh 0 100vh rgb(238, 238, 155),0 0 15px 5px black;
   }
.scrollContainer{
    overflow-x:clip;
}
.introsec{
position: relative;
height:100vh;
width:100vw;


overflow:clip;
}
.web-intro{
position:fixed;
z-index:1000;
height:100vh;
width:100vw;
background:black;
display:flex;
gap:.5rem;
overflow:clip;
}
.loopImg{
flex:1;
display:flex;
gap:.5rem;
flex-direction:column;
overflow:clip;
position: relative;

}
.loopImg .item{
width:100%;
flex:1;

position:relative;
}
.loopImg .item img{
width:100%;
height:100%;
position: absolute;

object-fit:cover;
}
.loopImg1,.loopImg3,.loopImg5{
top:-100%;
}
.loopImg2,.loopImg4{
top:100%;
}
.loopImg2 img,.loopImg4 img{
top:100%;
}
.loopImg1 img,.loopImg3 img,.loopImg5 img{
top:-100%;
}
.linkimg{
    max-width:100%;
    object-fit: cover;
}
.mouse-event{
    position: absolute; 
    width: 3rem;
    height: 3rem;
    mix-blend-mode: difference;
    border-radius: 100%;
    z-index: 40;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    pointer-events: none;
    background:white;
    
    display:flex;
    align-items:center;
    justify-content:center;
}

.mouseLarge{
    width: 5rem;
    height: 5rem;
}


.topHeader{
position: fixed;
display:flex;
justify-content:space-between;
font-size:1.35rem;
z-index:300;
width:100vw;
padding:1.5rem;
overflow:clip;
}
.nav__div{
    position:fixed;
    height:100vh;
    width:100%;
    z-index:201;
    overflow:clip;
	background: #E2DFD2  ;
	display:none;
}
.nav__loader{
	position: absolute;
    height:100%;
    width:100%;
    z-index:201;
    overflow:clip;
	background:black;
}

.nav{
    position: relative;
         overflow:clip;
	height:100vh;
	width:100%;
}
.nav__img{
    position: absolute;
    width:100%;
    height:100%;
    overflow:clip;
}
.nav__img img{
        position: absolute;
    width:100%;
    height:100%;
    object-fit: cover;
}
.nav_slider{
    position: absolute;
    width:100%;
    height:100%;
    color:white;
    display:flex;
    justify-content:center;
	align-items:center;
	flex-direction:column;
}

.nav_slide a {
	 color:white;
	font-size:var(--h1-text);
	font-family:j1;
	width:100%;
	line-height:1.75;
	display:flex;
	flex-direction:column;
	overflow:clip;
	transition:all .3s ease-in-out;
}


li{
    list-style: none;
}
a{
    text-decoration: none;
    color:black;
}
.header{
    height:60vh;
    width:100%;
    overflow:clip;
    position:relative;

}

.side{
    height: 100%;
    width: 100%;
    position: absolute;
    overflow: clip;
   display: grid;
    place-items: end;
}

.title{
    font-size:.8rem;
    width: 100vw;
    margin: 0px;
    display: flex;
    justify-content: end;
    align-items: end;
    gap: 1.5rem;
    position: relative;
    z-index:2;
}
.title .xlSplit{
    font-family:j1;
	position: absolute;
	left:0;
	bottom:0;
}

.shdoBtn{
	width:8rem;
	height:8rem;
	border-radius:8rem;
	background:#E32636;
	position: absolute;
	right:1rem;
	bottom:1rem;
	display:flex;
	align-items:center;
	justify-content:center;
}
.shdoBtn img{
	width:28px;
}

.small-title{
   font-size:var(--p-text);
   width: 50%;
   margin-left: auto;
    
}
.name{
    font-size: 1.5rem;
    color: black;
}


 .right-title .name{
    color: var(--l-fncy);
}
.left-title .name{
    color: var(--r-fncy);
}
.left-side video,.right-side video{
    overflow:clip;
    height:60vh;
    width:100vw;
    display:block;
    object-fit: cover;
    position: absolute;
    z-index:1;
	
}
.left-side{
    z-index: 2;
    clip-path:inset(0px 0px 0px 0px);
color: var(--l-fncy);
    background:tomato;
}
.right-side{
    color: var(--r-fncy);
    z-index:1;
    background:var(--bg-p);
}

.fancy{
    color: var(--r-fncy);
}
.fancy2{
    color: var(--l-fncy);
}

.rotatellax{
    background:white;
    color:black;
    
}
.rotatellax h1{
    transform:rotate(360deg);
}
.skill-section{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding-block:5rem;
    margin-block:5rem;
}

.work-slider{
    white-space: nowrap;
    display:flex;
    font-size:var(--h1-text);
    overflow: clip;
    position: relative;  
    z-index: 2;
    font-family: j1;
}

.work-slide{
    display: flex;
    text-transform: uppercase;
    width:fit-content;
    align-items:center;
    height:100%;
}

.work-slide>div{
    padding-inline:5rem;
    padding-block:1rem;
    display:inline-block;
}




.span{
	
    transition:all .1s ease-in-out;
}
.span:hover{
    color:rgba(0, 0, 0,1);
    font-weight:900;
    transform:scale(1.08);
    font-family:j1;
    text-transform: uppercase;
}
.span:hover + .span{
    color:rgba(0, 0, 0,0.8);
    font-weight:500;
    transform:scale(1.08);
    font-family:j1;
text-transform: uppercase;
}
.span:hover + .span + .span {
    font-weight:300;
    color:rgba(0, 0, 0,0.6);
    transform:scale(1.08);
    font-family:j1;
    text-transform: uppercase;
}
.span:has(+ .span:hover) {
    color:rgba(0, 0, 0,0.8);
    font-weight:500;
    transform:scale(1.08);
    font-family:j1;
    text-transform: uppercase;
}
 .span:has(+ .span + .span:hover) {
    color:rgba(0, 0, 0,0.6);
    font-weight:300;
     transform:scale(1.08);
    font-family:j1; 
	text-transform: uppercase; 
}





.clipScroll{
    width:100vw;
    height:100vh;
    overflow:clip;
    z-index:3;
    position:relative;
    background:var(--bg-1);
}
.clipDivBlock{
    position: absolute;
    height:100%;
    width:100%;
    overflow:clip;
}
.clipDivBlock:nth-child(1){
   z-index:6; 
}
.clipDivBlock:nth-child(2){
   z-index:5; 
}
.clipDivBlock:nth-child(3){
   z-index:4; 
}
.clipDivImg{
    position: absolute;
    height:100%;
    width:100%;
}
.clipDivImg img{
    position: absolute;
    height:100%;
    width:100%;
    object-fit: cover;
}
.clipThumbnail{
    position: absolute;
    right:2rem;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.clipThumbnail img{
    width:26vw;
    height:50vh;
    object-fit:cover;
}

.clip-ending{
    position:relative;
    width:100%;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-inline:1.5rem;
}
.clipEndingTitle{
    max-width:40rem;
    font-size:var(--h2-text);
    font-weight:300;
    color:var(--color-light);
}
.clipEndingTitle span{
    color:var(--color-dark);
}

.clipContent{
    position: absolute;
    color: white;
    left:1rem;
    top:3rem;
    overflow:clip;
    
}
.clipContent h1{
    display:flex;
    flex-direction:column;
    gap:.6rem;
    overflow:clip;
    font-size:var(--p1-text);
    font-weight:300;
}
.clipHobby{
    mix-blend-mode: difference;
}

.aboutMaskContainer{
    min-height:100vh;
    width:70vw;
margin-left:auto;
    position:relative;

}
.aboutContainer{
    width:100%;
    height:100%;
}
.aboutCont{
    padding-block:50vh 0;
}

.aboutDivBlock h1{
    max-width:50rem;
	font-family: j1;
    font-size:var(--h2-text);
}

.aboutDiv{
    display:flex;
    padding-inline:1rem; 
}
.aboutDiv2{
    display:block;
}
.aboutDivBlock{
    display:flex;
    gap:1rem;
}
.aboutDetail{
    display:flex;
    gap:.5rem;
}
.circle{
    width:1.5rem;
    height:1.5rem;
    border-radius:1.5rem;
    background:#BDB76B;
}











.spacer{
    height:15vh;
    width:100%;
    background:var(--bg-1);
}






.aboutHim{
    position: relative;
padding-top:10vh ;

}

.hoveDiv{
	max-width:50rem;
	margin-inline:auto;
}
.hoveP{
	font-family:j2;

	color:#666666;
	font-size:var(--p1-text);
} 

.aboutHimCont{
    position: relative;
height:100%;
   padding-bottom:10vh;
}

.multiParallax,.topsticky{
    height:400vh;
    width:100%;
    margin-block:-100vh;
background: #333;
    position:relative;
    overflow:clip;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
.topsticky{
    height:300vh;
    font-size:5dvw;
    font-family:j1;
    line-height:1;
    text-align:center;
}
.Plxfont{
    padding-bottom:3rem;
}
.Plxfont:last-child{
    padding-bottom:0;
}
.multilax-container{
    display:flex;
    height:100vh;
    width:100%;
    overflow:clip;
    gap:2vw;
    padding-inline:2vw;
    position: sticky;
    top:0;
}


.parallax-images,.paralx-images{
    height:155vh;
    width:100%;
    overflow:clip; 
    position:relative;
    display:flex;
    flex-direction:column;
}
.paralx-images img{
   height:38.75vh;
    width:100%;
    margin-bottom:2vw;
    overflow: clip; 
    object-fit:cover;
}
.parallax-images img{
    height:100%;
    width:100%;
    margin-bottom:2vw;
    overflow: clip;
}
.parallax1,.paralx1{
    top:-20%;
}
.parallax2,.paralx2{
    top:-30%;
}
.parallax3,.paralx3{
    top:-10%;
}
.parallax4,.paralx4{
    top:-35%;
}

.footer{
    width:100%;
    min-height:100vh;
    color:var(--bg-5);
    overflow:hidden;
    position:relative;
    padding:10vw;
    display:flex;
    flex-direction:column;
    gap:5rem;
    background: white;
    color:#0e2954;
    justify-content:center;
}

#draw{
    position: absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:2;
    overflow:hidden;
}

.contact-title {
    max-width:100%;
    margin-inline:auto;
    position:relative;
    z-index:3;
}
.contact-title div{
    font-weight:normal;
  font-size:var(--brg-heading);
    line-height:1.2;  
    text-wrap:balance;
} 
.contact-title .uniq{
    color:#9126e0;
    font-weight:600;
    
}
.footer-link-container{
    position:relative;
    z-index:3;
    display:grid;
    font-size:var(--p-text);
    gap:2rem;

    justify-content:center;
    grid-template-columns:1fr 1.5fr 2fr;
}
.footer-link h4{
    margin-bottom:1rem;
    font-size:var(--p1-text);
    font-weight:normal;
}
.mail-footer h4{
color:#787786;
    text-wrap:balance;
    font-size:var(--p-text);
}
.footer-wrap{
    display:flex;
    flex-direction:column;
    gap:.5rem;
	font-family:jatin;
}
.footer-wrap a{
    color:#0e2954;
    justify-content:center;
    grid-template-columns:1fr 1.5fr 2fr;
    text-decoration:underline;
}
.footer-wrap a:hover{
    color: #9126e0;
}
.social-footer .footer-wrap{
    align-items:end;
    text-align:right;
}
.mail{
    font-size:var(--p1-text);
	font-family:jatin;
}
.times{
    color:#9126e0;
	
}



@media (width < 800px) {

    .logo{
        font-size:.875rem;
    }
    
    
.small-title{
width: 100%;
}
 .name{
    font-size: 1.25rem;
 }


.rotate-section{
    height:60vh;
}

.overviewImgDiv,.overviewImg{
	width:200px;
	height:250px;
}
.overviewImgDiv img{
	width:140px;
	height:170px;
}	
   .clipThumbnail{
       right:1rem;
   } 

	
.clipThumbnail img{
    width:42.5vw;
    height:35vh;
    object-fit:cover;
}
.imgContainer{
    height:15rem;
    width:15rem;
}
    .prj1{
        left:-8vw;
    }
    .prj2{
        right:-4vw;
    }
    .prjp1,.prjp2{
        font-size:14vw;
    }
.rotate-section p{
    font-size:var(--xl-text);
}
    .circle-rotate{
    width:7rem;
    height:7rem;
    border-radius:7rem;
    background:black;
    color:white;
    display:grid;
    place-items:center;
    font-size:var(--l-text);
    }
    .aboutDivBlock{
        display:flex;
        flex-direction:column;
    }
.aboutPers{
display:flex;
    min-height:100vh;
    flex-direction:column;
    gap:3rem;
}

.brownSection{
    height:75vh;
}
    .lineAb{
	    width:calc(100vw - 2.15rem);
    }
.hoveDiv{
    padding:2rem 1.5rem;
}

    .hoveP{
    font-size:var(--p-text);
	font-weight:bold;
    }
    .aboutGallery{
        height:50vh;
    }
    .parallaxDiv{
        height:50vh;
        width:50vw;
    }
    .parallaxDiv img{
        width:85vw;
        min-width:85vw;
    }

.dp1,.dp3{
    padding-inline:.5rem;
}
    
    .circles{
        width:35vw;
        height:35vw;
    }
    

  .multiParallax{
      height:260vh;
  }  
.parallax-images{
    min-width:150px;
}
 .topsticky{
     font-size:var(--l-text);
     height:45vh;
     margin-block:0;
 } 
    .topsticky .multilax-container{
        position:static;
        height:110vh;
    }
    
    .Plxfont{
    padding-bottom:2rem;
    }
    
    .footer{
        padding:5rem 2rem;
        gap:3rem;
    }
    .footer-link-container{
        display:flex;
        flex-direction:column;
        gap:2rem;
    }
    .footer-link:nth-child(1){
        order:3;
    }
    .social-footer .footer-wrap{
    align-items:start;
    text-align:left;
    }

    .contact-title{
        margin:0;
        
    }
    
    .contact-title div{
        line-height:1.3;
        font-size:1.7rem;
        
    }

}
@media (max-width:1025px){
    .dpCard{
        display:none;
    }
    
}