/* Define Gilroy-SemiBold font */
@font-face {
    font-family: 'Gilroy';
    src: url('fonts/Gilroy-SemiBold.f3ed44cd.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

/* Define Gilroy-Medium font */
@font-face {
    font-family: 'Gilroy';
    src: url('fonts/Gilroy-Medium.e7e7c091.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@import url('https://fonts.googleapis.com/css2?family=Salsa&family=Solitreo&display=swap');

/* Define MaziusExtraItalic font */
@font-face {
    font-family: 'Mazius';
    src: url('fonts/Mazius-Extraitalic.121a71a7.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

*{
    margin: 0;
    padding: 0;
    font-family: "Gilroy";
    box-sizing: border-box;
}

html, body{
    width: 100%;
    height: 100%;

}

/* 3d model styles */
#model-container {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
}
#controls {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#controls input[type="range"] {
    width: 300px;
}

#main{  
    /* locomotive js scroll will work only if main(parent) is not given any height */
    /* height of main will be just(height of children) in this case */
    width: 100%;
    /* height: 100%; */
}

#loader{
    /* display: none; */
    position: absolute;
    width: 100%;
    /* as parent height is not given -> you cannot use % heights here for children */
    height: 100vh; 
    background-color: rgb(0, 0, 0);
    z-index: 999;
}

#loader #topheading{
    position: absolute;
    left: 50%;
    top:5%;
    /* left:50% in only moves the edge to 50% (relative to parent)-> then the element will not be in center */
    /* thats why we need to use transform -50% -> to position the middle of the element to center */
    transform: translate(-50%,0);
}

#loader h1{
    display: flex;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 4vw;
    color: whitesmoke;
    /* font-weight: 500; */
}

#loader h1 span{
    /* font-family: "Mazius"; */
  font-weight: 400;
  font-style: normal;
}

.child span{
    display: inline-block;
}

#topheading h5{
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    color: whitesmoke;
}

.reveal .parent{
     /* as parent and child elements created are <span> elements */
    /* span elements are inline(we cannot apply width,height and more...) by default */
    /* we need to make them block */
    display: flex;
    justify-content: center;
    width: 100%;
    overflow-y: hidden;
}

.reveal .parent .child{ 
    /* as parent and child elements created are <span> elements */
    /* span elements are inline(we cannot apply width,height and more...) by default */
    /* we need to make them block */
    display: block;
}

.reveal .parent span{
    display: inline-block;
}


#green{
    /* display: none; */
    position: absolute;
     top:100%;
    width: 100%;
    height: 0vh;
    /* background-color:#14cf93; */
    background-color: yellow;
    z-index: 999
}

#home{
    width: 100%;
    height: 100vh;
    /* background-color: aquamarine; */
    background-color: white;
}

#home #nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5vw;
    height: 100px;
}

#nav a{
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    color: black;
}


/* or you can write css common for both lines of class .line */
/* and then just write corresponding unq values to their id's #line1 #line2 */

#nav a #line1{
    /* one line on right with initial width 100% -> decreases size during animation */
    position: absolute; 
    right: 0;
    bottom: 0;
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: black;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
}

#nav a #line2{
      /* second line on left with initial width 0% -> increase size to 100% during animation */
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 0%;
    height: 1px;
    background-color: black;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1s;
    /* starts a bit 0.1s late -> as we want to display gap */
    transition-delay: 0.1s;
}


#nav a:hover #line1{
    width: 0%;
}

#nav a:hover #line2{
    width: 100%;
}

.row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 7vw;
    margin-top: 3vw;
    padding-right: 12vw;
    line-height: 1;
}

.row h1{
    font-size: 13vw;
}

.row h5{
    opacity: 0.6;
    font-size: 11px;
    font-weight: 500;
}

/* .row .text{
    margin-top: 5vw;
} */

.row:nth-child(3){
    margin-top: 0;
}

/* tryyyyy */
/* .row .web{
    font-family: "Mazius";
    font-size: 10vw;
    color: red;
    padding: 0 3vw;
} */
@keyframes colorChange {
    0% {
        color: orange;
    }
    25% {
        color: blue;
    }
    50% {
        color: green;
    }
    75% {
        color:red;
    }
    100% {
        color: rgb(255, 0, 0);
    }
}

.row .web {
    font-family: "Mazius";
    font-size: 10vw;
    padding: 0 3vw;
    animation: colorChange 10s infinite; /* 3 seconds for one cycle, repeats infinitely */
}

#home .row img{
    width: 5vw;
    height: auto;
}



@media screen and (max-width: 880px) {
    .mainscreen{
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        top: 35%;
    }
    .row{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        margin-top: 3vw;
        line-height: 1;
    }
    .t1{
        display: none;
    }

    }


#projects{
    /* position: relative; */
    width: 100%;
    min-height: 70vh;
    /* background-color: antiquewhite; */
    background-color: white;
}

.projhead{
    width: 100%;
    height: 100px;
    text-transform: capitalize;
    text-align: start;
    /* font-size: 4vw; */
    font-size: 35px;
    padding: 40px;
}

.images{
    display: flex;
    /* align-items: baseline; */
    /* for proj decription */
    /* align-items: center; */
    justify-content: space-evenly;
    margin-top: 6vw;
    position: relative;
    width: 100%;
    padding: 0 5vw;
    gap: 30px;
}



.cnt{
    overflow: hidden;
    border-radius: 50px;
}

.cnt1{
    /* width: 55%; */
    width: 700px;
    max-width: 100%;
}

.cnt2{
    /* width: 30%; */

    gap: 20px;
    margin: 20px;
    width: 40%;
}

.cnt img{
    transition: filter cubic-bezier(0.19, 1, 0.22, 1) 1s;
    width:105%;
}




#cursor{
    position: fixed;
    left: 0;
    top: 0;
    width: 100px;
    z-index: 99999;
}

#cursor > div{
    pointer-events: none;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) .2s;
  opacity: 0;
  position: absolute;
}



#elem{
    width: 100%;
    position: relative;
}

#cursor .crow{

    display: flex;
    align-items: center;
    gap:20px;
    width: 100%;
    padding: 10px;

}

.crow .ccircle{

    width: 20px;
    height:20px;
    border: 2px solid blue;
    border-radius: 50%;

}

.crow .ccapsule{
    width: max-content;
  padding: 10px 20px;
  border-radius: 50px;
  background-color: aliceblue;
}

#elem img{
    /* width: 100%; */
    width: 400px;
    height: auto;
    opacity: 0;
    animation: an 4s linear infinite;
    position: absolute;
    
}

#elem img:nth-child(2){
    animation-delay: 1s;
}

#elem img:nth-child(3){
    animation-delay: 2s;
}


#elem img:nth-child(4){
    animation-delay: 3s;
}


#elem img:nth-child(5){
    animation-delay: 4s;
}


@keyframes an {

    0%{
        opacity: 1;
    }

    20%{
        opacity: 1;
    }

    21%{
        opacity: 0;
    }

    40%{
        opacity: 0;
    }

    60%{
        opacity: 0;
    }

    80%{
        opacity: 0;
    }

    100%{
        opacity: 0;
    }
    
    
}

#revv{
    flex-direction: row-reverse;
}


@media screen and (max-width: 1100px) {
    .images{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        margin-top: 6vw;
        position: relative;
        width: 100%;
        padding: 0 5vw;
        gap: 30px;
    }
    #revv{
        flex-direction: column;
    }

    .cnt2{
        width: 100%;
        gap: 20px;
        margin: 20px;
    }

}

@media screen and (max-width: 610px) {
    .cnt img {
        transition: filter cubic-bezier(0.19, 1, 0.22, 1) 1s;
        width: 111%;
        height: 332px;
    }
}

@media screen and (max-width: 374px) {
    .special{
        margin-right:2px ;
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    .special{
        margin-right:4px ;
        font-size: 28px;
    }
}

@media screen and (max-width: 380px) {
    .cnt img {
        transition: filter cubic-bezier(0.19, 1, 0.22, 1) 1s;
        width: 141%;
        height: 250px;
    }
}

@media screen and (max-width: 520px) {
    .cnt img {
        transition: filter cubic-bezier(0.19, 1, 0.22, 1) 1s;
        width: 116%;
        height: 250px;
    }
}




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

.eyes{
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.innereyes{
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* background-color: yellow; */
    background-color: white;
    /* background-image: url('https://ochi.design/wp-content/uploads/2022/05/Top-Viewbbcbv-1-1440x921.jpg'); */
}

.innn{
    /* position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%); */



    display: flex;
    gap: 10px;
    /* width: 33%; */
    /* height: 16rem;  */
    /* background-color: red; */
}

.eye{
    /* width: 15vw ;
    height: 15vw; */
    width: 200px ;
    height: 200px;
    border-radius: 50%;
    background-color: #f4f4f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eyeball{
    width: 66%;
    height: 66%;
    background-color: black;
    border-radius: 50%;
    position: relative;
}

.whiteball{
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #f4f4f5;
}

.lineee{
    width: 100%;
    height: 2.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;  
     
}
  /* transform: translate(-50%, -50%) rotate(45deg); */



/* for projects description */

.cnt2{
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    align-items: center;
}

.tech img{
    width: 50px;
    height: 50px;
    
}

.techstack{
    display: flex;
    justify-content: center;
    width: 100%;
}

.techstack .tech{
    width: 80%;
    gap: 9px;
    display: flex;
    justify-content: space-evenly;
}

.projectname{
    font-size: 27px;
}

.aboutproject{
    font-size: 20px;
    /* added new */
    line-height: 30px;
}

@media screen and (max-width: 500px) {
    .aboutproject{
        font-size: 14px;
        line-height: 27px;
    }
}


/* skills effect */

#skills{
    display: flex;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 100%;
 
    /* height: 110vh; */
    /* overflow: hidden; */
}

.headd{
    font-size: 5vw;
}

.skilldesc{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    max-width: 585px;
    padding: 30px;
}

#myskills{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
    margin-top: 100px;
}

#myskills img{
    width: 100%;
    object-position: center;
    object-fit: cover;
    width: 530px;
    height: 700px;
    max-height: 50%;
   
}

.intro span{
    display: inline-block;
    height: 75px;
    width: 80px;
    background-color: rebeccapurple;
    margin: 0px 14px;
    border-radius: 100px;
    margin-bottom: -12.5px;
    background-image: url('./dp.jpg');
    background-size: cover;
    background-position: center;

}

.intro{
    font-size: 25px;
    line-height: 42px;
}

@media screen and (max-width: 500px) {
    .intro{
        font-size: 14px;
        line-height: 35px;
    }
}

#skilldesc p{
 text-align: center;
 font-size: 40px;

}


@media screen and (max-width: 1024px) {
    #skills{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
    }
    
    .headd{
        font-size: 5vw;
    }
    
    .skilldesc{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        max-width: 95%;
        width: 95%;
        padding: 30px;
    }

    #myskills{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 500px;
        margin-top: 10px;
    }
    
}

@media screen and (max-width: 540px) {

    #myskills {
        display: none; /* Completely hides the element and removes it from the layout */
    }
}



/* experiences */

.experiences{
    display: flex;
    height: 110vh;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
  
  
}

.expheading{
    margin: 40px;
    font-size:50px;
}

.innerexperience{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.companyimg{
    width: 248px;
    height: 220px;
    object-fit: cover;
}

.companyimg2{
    width: 320px;
    height: 220px;
    object-fit: contain;
}

.exp1{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items:center ;
    height: 500px;
    padding: 30px;
    /* background-color: antiquewhite; */
    background-color: white;
}

.exp2{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items:center ;
    height: 500px;
    padding: 30px;
    /* background-color: antiquewhite; */
    background-color: white;
}

.role{
    font-size: 25px;
}


.linkss{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.linkss a{
    text-decoration: none;
    color: white;
    font-size: 16px;
}

.view_button{
    background-color: red;
    padding: 20px;
    border-radius:20px ;
}


.finall{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: -15vh;
    
}

.resumee{
 
    
    border-radius: 20px;
    border-radius: 10px 10px 40px 40px;
    color: #f4f4f5;
    background-color: red;

}

.innerfinall a{
    text-decoration: none;
}

.resumee{
    font-size: 2vw;
    padding: 15px;
    text-decoration: none;
}

.innerfinall{
    width: 50%;
    display: flex;
    justify-content: center;
    
}

.finalheading{
    padding: 40px;
    font-size: 50px;
}

.outersocial{
    display: flex;
    justify-content: center;
    align-items: center;
}


.innersocial{
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sociall{
    height: 500px;
    display:flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
}

.sociall img{
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.special{
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-radius: 30%;
}

.smile{
    position: absolute;
    top:62%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    gap:  70px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  
}

.expp{
    height: 110vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /* background-color: darkgray; */
    background-color: white;
}

.left_exp{
    display: flex;
    flex-direction: column;
    justify-content:center;
    gap: 40px;
}

.companiess{
    display: flex;
    flex-direction: column;
    gap: 35px;
    font-size: 19px;
    max-width: 57%;
    padding: 30px;
    line-height: 25px;
}
.work_heading{
    font-size: 35px;
}



/* done today */
.com1{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
}
.cbtns{
    display: flex;
    gap: 15px;
    justify-content: space-evenly;
}
.cdetails{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.ccdesc{
    font-size: 15px;
}
.ccimg{
    width: 50px;
    height: 50px;
    object-fit: cover;
}
.cclinks{
    font-size: 14px;
    letter-spacing: 1px;
}

@media screen and (max-width: 996px) {
    .left_exp{
        display: flex;
        flex-direction: column;
        align-items:center;
        padding: 30px;
        justify-content:center;
        gap: 50px;
    }
    .expp{
        margin-top: 100px;
        display: flex;
        height: max-content;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        /* background-color: darkgray; */
        background-color: white;
    }

    .companiess{
        display: flex;
        flex-direction: column;
        gap: 30px;
        font-size: 19px;
        max-width: 95%;
        padding: 30px;
        line-height: 25px;
    }

    #model-container {
        width: 315px;
        height: 315px;
        border-radius: 50%;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffffff;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .eye{
        /* width: 15vw ;
        height: 15vw; */
        width: 150px ;
        height: 150px;
        border-radius: 50%;
        background-color: #f4f4f5;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sociall img{
        width: 70px;
        height: 70px;
        object-fit: cover;
    }

    .finalheading{
        padding: 40px;
        font-size: 35px;
    }
    
    
}

@media screen and (max-width: 520px) {
    .sociall img{
        display: none;
        width: 50px;
        height: 50px;
        object-fit: cover;
    }

    .resumee{
            font-size: 19px;
            padding: 15px;
            text-decoration: none;
        
    }

    .smile{
        position: absolute;
        top:65%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        gap:  50px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
}

.hopee{
    font-size: 20px;
    background-color: red;
    color:white;
    padding: 10px;
}


.linkss2{
    width: 90%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}