*, *::after, *::before{
    box-sizing: border-box;
}

*{padding: 0;
margin: 0;}

html,body{
    overflow-x: hidden;
    margin: 0;
}

body{
    background: var(--backgrund);
  
}

body::-webkit-scrollbar{width: 0;}

.container{
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    width: 100%;
}


:root{

    /* varibels for burger menu */
    --bar-with: 60px;
    --bar-height: 5px;
    --hamburger-gap: 8px;
    --foreground: #e1f2fbe7;
    --hamburger-margin:var(--gap);
    --animation-timing: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);

    /* Varibels for colors */
    --backgrund:#e1f2fb;
    --backgrund-2:#f3dfe3;
    --text-color: #151515;
    --pink:#eb778c;

    /* layout varibels */
    --radius:0.4em;
    --border: 3px solid var(--pink);
    --img-padding:10px;
    --shadow: 1px 3px 6px 1px var(--text-color);
    --gap:3%;

    /* font varibels */
    --font-1:"Playfair Display SC", serif;
    --font-2:"Expletus Sans", sans-serif;

    /* font size */
    --size-1:4.4em;
    --size-2:4em;
    --size-3:3em;
    --size-4:2em;
    --size-5:1.5em;
    --size-6:1.1em;
}


/* scroll animations */

.who, .passion, .projects, .case-1, .case-2,.assignment, .campains{
    animation: fade-in linear forwards;
    animation-timeline: view();
    animation-range-start:cover;
    animation-range-end:contain 100px;
}

/* hamburger animation */

@keyframes fade-in {
    from { scale: .9; opacity: 0.3;}
    to { scale: 1; opacity: 1;}
}

/* infinate scroller */

.wrapper{
    width: 100%;
    margin-inline: auto;
    position: relative;
    height: 40px;
    margin-top: var(--gap);
    overflow: hidden;
}

@keyframes scrollleft {

    to {
        left: -100px;
    }
}

.item{
    width: 100%;
    height: auto;
    object-fit: cover;
}

.item img{
    width: auto;
    flex-shrink: 0;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    left: max(calc(100px * 8),100%);
    animation-name: scrollleft;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.item1 img{
    animation-delay:calc(30s/8* (8 - 1) * -1) ;
}

.item2 img{
    animation-delay: calc(30s/8* (8 - 2) * -1);
}

.item3 img{
    animation-delay: calc(30s/8* (8 - 3) * -1);
}

.item4 img{
    animation-delay: calc(30s/8* (8 - 4) * -1);
}

.item5 img{
    animation-delay: calc(30s/8* (8 - 5) * -1);
}

.item6 img{
    animation-delay:calc(30s/8* (8 - 6) * -1) ;
}

.item7 img{
    animation-delay:calc(30s/8* (8 - 7) * -1) ;
}

.item8 img{
    animation-delay: calc(30s / 8 * (8 - 8) * -1);
}



/* fonts */

h1, h2, h3 {
    font-family: var(--font-1);
    font-weight:lighter;
    color: var(--text-color);
  }

h1{line-height: 1;
width: 300px;}  

h4{color: var(--text-color);
font-family: var(--font-2);
font-size: var(--size-6);}

h6{
    font-size:var(--size-6);
}


p{font-family: var(--font-2);
font-weight: bolder;}


strong{font-weight: bolder;
font-size: var(--size-5);}

/* haburgermenu */

.hamburger-menu{
    --x-with: calc(var(--hamburger-height) * 1.41421356237);
    display: flex;
    flex-direction: column;
    gap: var(--hamburger-gap);
    width: max-content;
    position: relative;
    margin-top: var(--gap);
    margin-left: var(--gap);
    z-index: 10;
    cursor: pointer;
    max-width: 100%;
}

.hamburger-menu:has(input:checked){
    --foreground: var(--text-color);
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
    content: "";
    width: var(--bar-with);
    height: var(--bar-height);
    background-color: var(--text-color);
    border-radius: 99999px;
    transform-origin: left center ;
    transition: opacity var(--animation-timing), width var(--animation-timing),
    rotate var(--animation-timing), translate var(--animation-timing),
    background-color var(--animation-timing);
}

.hamburger-menu input {
appearance: none;
padding: 0%;
margin: 0%;
outline: none;
pointer-events: none;
}

.hamburger-menu:has(input:checked)::before{
   rotate: 45deg;
   width: var(--x-with) ;
   translate: 0 calc(var(--bar-height)/-2);
}
.hamburger-menu:has(input:checked)::after{
   rotate: -45deg;
   width: var(--x-with) ;
   translate: 0 calc(var(--bar-height)/2);
}

 .hamburger-menu input:checked{
    opacity: 0;
    width: 0;
}

.sidebar{
    position: absolute;
    top: 0;
    transition: translate var(--animation-timing);
    translate: -100%;
    z-index: 5;
    padding: 0.5rem 1rem;
    padding-top: calc(var(--hamburger-height)*2) ;
    background-color: var(--foreground);
    width: 11rem;
    min-height: 100vh;
    font-weight: bolder;
    font-size: var(--size-5);
    border-top-right-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
    opacity: 0;

}

/* when menu is hidden */
.hamburger-menu:has(input:checked) + .sidebar{
    translate: 0;
    opacity: 100%;
}

.sidebar a{
    color: var(--text-color);
    text-decoration: none;
     width: 100%;
}

.link{padding-bottom: calc(var(--gap)*2);
    padding-left: var(--gap);}

.sidebar .active a{
    text-decoration: underline solid;
    text-decoration-thickness:2px ;
    text-decoration-color: var(--pink);
}


/* landingpage styling */

  
.top-box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: calc(var(--hamburger-height)*1.5);
    padding-bottom: calc(var(--hamburger-height)*1.5);
    width:100%;
    text-align: center;
    background-image: url(img/background\ \(2\).jpg);
    border-bottom: var(--border);

}

/* who am i upper box- front page */

.who{

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

    padding-top: var(--gap);
    padding-bottom: var(--gap);
    background: var(--backgrund-2);


    border-radius: var(--radius);
    border: var(--border);

    margin-top: var(--gap);
    margin-bottom:var(--gap);
    margin-left:var(--gap);
    margin-right:var(--gap);
}

.text{
    padding: var(--gap);
font-size: var(--size-6);}


.vid{
margin-top: var(--gap);
margin-bottom:var(--gap);
margin-left:var(--gap);
margin-right:var(--gap);
text-align: center;}


.vid video{width: 90%;
    max-width: 1000px;
border: var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);}

/* contact me page */
.c-info{
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-2);
    background: var(--backgrund-2);
    justify-self: center;
    justify-content: center;
    align-items: center;
    margin: var(--gap);
    padding: var(--gap);
    gap: var(--gap);
    border-radius: var(--radius);
    border: var(--border);
}

.me img{width: 25vh;
border: var(--border);
border-radius: var(--radius);}



.collage img{
width: 80%;
height: auto;
border: var(--border);
border-radius: var(--radius);}

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


.long{display: none;}

.assignment{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background:var(--backgrund-2);
margin: var(--gap);
padding: var(--gap);
border-radius: var(--radius);
text-align: center;
box-shadow: var(--shadow);}

.assignment h4{padding-top: var(--gap);}

.solve{background: none;
box-shadow: none;}

.information{
    width: 100%;
    text-align: center;}

.campains{
    display: grid;
    grid-auto-flow: column;
    column-gap: var(--gap);
    overflow-x: scroll;
    overscroll-behavior: contain;
    padding:0 var(--gap) var(--gap);
}

.header-5 h3{
    margin-bottom: var(--gap);
}


.add video{height: 35vh;
border-radius: var(--radius);
border: var(--border);
box-shadow: var(--shadow);
background: var(--backgrund-2);
overflow-x: auto;}


/* button */

.button{
    text-decoration: none;
    color: var(--text-color);
    font-weight:600;
    border: var(--border);
    padding: 0.3em;
    border-radius: var(--radius);
    background: var(--backgrund-2);
    cursor: pointer;
    box-shadow: var(--shadow);
    height: fit-content;
    width: fit-content;

}

.links{
    display: block;
    color: var(--text-color);
}

.links:hover{
    color: var(--pink);
}

.top{margin-top: var(--gap);}

/* personal projects */

.pp{display: flex;
flex-wrap: wrap;
max-width: 1800px;
justify-self: center;
}




/* honda poster red */
.personals.v1{
    width: 50%;
    height: auto;
}

/* bimse drawing */
.personals.draw{
    width: 50%;
    height: auto;


}

/* dog picture */
.personals.v2{
    width: 50%;
    height: auto;
}

/* blue honda poster */
.personals.v3{
    width: 60%;
    height: auto;
}

/* insta post */
.personals.v4{
    width: 35%;
    height: auto;
}

.personals.v5{
    width: 40%;
    border-radius: 50%;
}

.case-1{ display: flex;

    width: 90%;
    justify-content: space-around;
    align-items: center;
  


    margin-right: auto;
    margin-left: auto;
background: var(--backgrund-2);
padding: var(--gap);
border-radius: var(--radius);
margin-bottom: var(--gap);
box-shadow: var(--shadow);}


.case-2{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: var(--backgrund-2);
    padding: var(--gap);
    border-radius: var(--radius);
    margin-bottom: var(--gap);
    box-shadow: var(--shadow);}

/* my work */





.header-2{margin-top: calc(var(--gap)*2);
margin-bottom: var(--gap);}


.header-3{
text-align: left;
padding-left: var(--gap);
padding-bottom: 0;
margin-bottom: 0;}
   

.header-5{margin-bottom: var(--gap);}

/* timeline */
.wrapper-t{
    justify-self: center;
    margin-top: var(--gap);
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: center;
    padding-left: var(--gap);
    padding-right: var(--gap);
}


.timeline{
    list-style: none;
    padding: var(--gap) 0 var(--gap);
    position: relative;
width: 100%;
}

.timeline li{
    margin-bottom: 50px ;
    position: relative;
    display: flex;
}

.timeline .panel{
    width: 46%;
    border-radius: var(--radius);
    overflow: hidden;
    position: relative;
    background: var(--backgrund-2);
    box-shadow: var(--shadow);
}

.timeline p{
    padding: var(--gap);
    font-size: var(--size-5);
}

.timeline summary{
    display: block;
    user-select: none;
    cursor: pointer;
    outline: none;
    padding: var(--gap);
    font-size: var(--size-5);
    transition: all 600ms cubic-bezier(0.2,1,0.3,1) ;
    font-weight: 700;
    font-family: var(--font-2);
}

.timeline .panel[open] summary{
    margin-bottom: var(--gap);
    padding-bottom: var(--gap);
    border-bottom: var(--border);
}

.timeline summary:hover{
    background: var(--pink);
    color: var(--backgrund);
}

.timeline::before{
    top: 0;
    bottom: 0;
    left: 50%;
    position: absolute;
    content: "";
    width: 5px;
    background-color: var(--text-color);
}



.timeline li:nth-child(even){
    justify-content: flex-end;
}
/* media scroller */


.projects{
    display: grid;
    grid-auto-flow: column;
    column-gap: var(--gap);
    grid-auto-columns: 90%;
    overflow-x: scroll;
    overscroll-behavior: contain;
    padding:0 var(--gap) var(--gap);
    }

 .projects::-webkit-scrollbar{
    height: 0;
} 
 .campains::-webkit-scrollbar{
    height: 0;
} 


.media-element{
    color: var(--text-color);
    display: grid;
    gap: var(--gap);
    grid-template-rows: min-content;
    padding: var(--gap);
    background: var(--backgrund-2);
    border-radius: var(--radius);
    box-shadow: var(--shadow) ;
    position: relative;
    padding-bottom: 55px;
}



.button.private{
    margin-top: var(--gap);
}

.media-element.c{padding-bottom: var(--gap);}

.media-element.private{
padding: var(--gap);}


.media-element img{
    inline-size: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
border: var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);}

.media-element.private img{
    inline-size: 100%;
    aspect-ratio: 4/3;}

.text-element{
    display: grid;
    grid-auto-flow: row;
    margin-bottom: var(--gap);
}

.learn{
    position: absolute;
    bottom: var(--gap);
    left: 50%;
    transform: translate(-50%);}

.snaps-inline{
    scroll-snap-type:inline mandatory;
    scroll-padding-inline: var(--gap);
    scroll-behavior: smooth;

}

.snaps-inline *{ 
    scroll-snap-align:start;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* More dramatic easing */
}

/* header-4  */

.header-4{display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}



.header-4 .button {            /* Make the button take the full width */
    margin-left: var(--gap); 
    margin-bottom: var(--gap);  /* Add left margin to the button */
    display: flex;
    align-items: center;       /* Vertically center the content inside the button */
}

.header-5 .button {            /* Make the button take the full width */
    margin-left: var(--gap); 
    margin-bottom: var(--gap); /* Add left margin to the button */
    display: flex;
    align-items: center;       /* Vertically center the content inside the button */
}

.download{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-self:center;
    margin-right:auto;
    margin-left:auto;
    width: 300px;
}

.download.contact{
    width: 250px;
}


.download h4{
    padding-top: var(--gap);
    padding-bottom: var(--gap);
    text-align: center;
}

.download.button{
    margin-bottom: var(--gap);
    margin-top: var(--gap);
}

.footer{
display: flex;
justify-content: center;
align-items: center;
margin: var(--gap);
padding: var(--gap);}

.btt img{
    height: 70px;
    width: auto;
}

    

/* design for tablets */
@media screen and (min-width:700px) {
 

body{
    --gap:30px;
    --bar-with: 100px;
    --bar-height: 7px;
    --hamburger-gap: 17px;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
    --hamburger-margin:var(--gap);
    
}


.sidebar{
    width: 25rem;
}


.link{padding-bottom: var(--gap);
    padding-left: var(--gap);}

.hamburger-menu{margin-top: var(--gap);
margin-left: var(--gap);}

.top-box{
   height: 35rem;
}

.wrapper{
    height: 60px;
}

.item img{
    height: 60px;
    width: auto;
}


.short{display: none;}

.long{display: inline;}


    
.collage{display: flex;
align-items: center;
justify-content: end;
margin-left: var(--gap);}

.projects{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns:50% ;
}

h6{font-size: var(--size-4);}

.me img{width: 50vh;}
    


.media-element{padding-bottom: 65px;}


.media-element img{
    object-fit:cover;
    }

.assignment{margin: calc(var(--gap)*2);
}

/* honda poster red */
.personals.v1{
    width: 35%;
    height: auto;
}

/* bimse drawing */
.personals.draw{
    width: 35%;
    height: auto;


}

/* dog picture */
.personals.v2{
    width: 35%;
    height: auto;
}

/* blue honda poster */
.personals.v3{
    width: 45%;
    height: auto;
}

/* insta post */
.personals.v4{
    width: 25%;
    height: auto;
}

.personals.v5{
    width: 40%;
    border-radius: 50%;
}

h1{font-size: var(--size-2);
width: 700px;
padding-bottom: var(--gap);}

p{font-size:var(--size-6);}

h2{font-size: var(--size-4);}

h3{font-size: var(--size-4);
font-weight: 550;}

h4{font-size: var(--size-5);}

.button{font-size: 1.4em;
padding:10px;
width: max-content;}


}

/* design for computer */

@media screen and (min-width: 1370px){

    

    .top-box {height: 80vh;
    background-size: cover;}
    
    .wrapper{
        height: 80px;
    }

    .item img{
        height: 80px;
        width: auto;
    }

    

    h1{font-size: var(--size-1);
    width: 100vh;}

    h2{font-size: var(--size-3);}

    h3{font-size: var(--size-4);
    padding-top: var(--gap);}


    p{font-size: var(--size-5);}


    .assignment, .who, .passion{width: 1200px;
    margin-left: auto;
    margin-right: auto;}

    .add video{
    height: 50vh;
    }


    .button{font-size: 1.5em;
    padding: 0.4em;
    width: max-content;}

    .button:hover{background: var(--pink);
        color: var(--backgrund);
        transition: 300ms ease-in-out;
    
    }

    .sidebar a:hover{text-decoration: underline var(--border);}


        
        .projects{
         grid-auto-columns: 30%;
        }


    

    .media-element{padding-bottom: 60px;
    gap: var(--gap);}

    .projects::-webkit-scrollbar {
        height: 15px; /* Set height for horizontal scrollbar */
    }

    .projects::-webkit-scrollbar-track {
        background-color: var(--pink); /* Light gray background for the track */
        border-radius: 10px; /* Optional: Add rounded corners to the track */
    }

    .projects::-webkit-scrollbar-thumb {
        background-color: var(--backgrund);
        border: var(--border); /* Darker gray for the thumb */
        border-radius: var(--radius); /* Rounded corners for the thumb */
    }

    /* Style for scrollbar thumb on hover */
    .projects::-webkit-scrollbar-thumb:hover {
        background-color: var(--text-color);
        border: var(--border); /* Darker shade on hover */
    }
   

  
}