html{
        scroll-behavior: smooth;
    }
    body{
        background-color: #ffffff;
       
        color: #e1e2e2;
    margin: 0;
    padding: 0;
    font-family:  garamond light;
    transition: 0.5s;
    
    }
    p{
        font-family: helvetica;
    }
nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
   box-sizing: border-box;
    background: rgb(0, 0, 0,0.5);
    color: white;
    backdrop-filter: blur(15px);
    padding-right: 15%;
    transition: 0.5s;
   
    box-shadow: 0px 0px 10px 1px rgb(255, 255, 255);
    overflow: hidden;
    position: sticky;
     top: 0;
  width: 100%;
  z-index: 100;
  font-size:clamp(0.625rem, 0.298rem + 1.27vw, 1.25rem) ;
}

.nav_links{
    display: flex;
    gap: 40px;
    list-style: none;
}
.nav_links li a{
    text-decoration: none;
    color: #e1e2e2;
    position: relative;
    transition: 0.3s;
    padding: 2px;
    
}
.nav_links li a:hover{
color: darkcyan;
text-shadow: 0 0 10px #ffffff;

}

.Name{
    color: #ffffff;
    
    padding-left: 7%;
}

/* container-imazhi background section1*/
.container1{
    width: 100%;
    background-color: beige;
    height: clamp(25.75rem, 100vw, 75rem);
    background-image: url(pics/background1.jpg);
object-fit: cover;
 display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: solid 1px gray;
 
  
  
}

/* container-container i qenderzuar per imazhin dhe tekstin*/

.center-main{
    display: flex;
    background-color: rgb(0, 0, 0,0.9);
   width: 75%;
   height: 75%;
   box-shadow: 0px 0px 10px 2px rgb(255, 255, 255);
   
}
.center-main div{
    width: 50%;
    
}

.text-main{
   padding: clamp(0.625rem, -0.682rem + 5.08vw, 3.125rem);
overflow-wrap:break-word;
word-break:break-word;

overflow: hidden;
}

.text-main h1{
    font-size:clamp(1rem, -0.111rem + 4.31vw, 3.125rem);
}

.text-main p{
    font-size: clamp(0.375rem, -0.213rem + 2.28vw, 1.5rem);
}
.text-main h2{
    font-size: clamp(0.375rem, -0.213rem + 2.28vw, 1.5rem);
}
.img-main{
     display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;   
    height: 100%;
    width: 100%;
    
  }

 .img-main img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
    transition: 1s;
 }

 .img-main img:hover{
    opacity: 1;
    scale: 110%;
 }




 /*Section2*/


 



.sec23{
      background-image: radial-gradient(rgb(48, 48, 48), rgb(27, 27, 27), black);
    min-height: clamp(31.25rem, 1.84rem + 114.21vw, 87.5rem);
      transition: 0.5s;
}



.container2{
   

    
    width: 100%;
   background: transparent;
   
}
.main-div{
display: flex;
flex-direction: column;

height: 85%;
padding: clamp(0.438rem, 0.013rem + 1.65vw, 1.25rem);
}
.skillsdiv{
    display: flex;
    flex-direction: column;
    gap: clamp(0.625rem, -0.029rem + 2.54vw, 1.875rem);
    height: 100%;
}


.skillsdiv div{
    width: 50%;
    border: solid 1px white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 2px white;
    height:100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(15px);
    overflow-wrap:break-word;
    align-self: center;
word-break:break-word;
padding: clamp(0.25rem, 0.054rem + 0.76vw, 0.625rem);
overflow: hidden;
text-align: center;
    font-size:clamp(0.5rem, -0.023rem + 2.03vw, 1.5rem);
  
}

@media(max-width:600px){
    .skillsdiv div{
        width: 100%;
    }

}

.headersk{
    text-align: center;
    font-size: clamp(0.438rem, 0.013rem + 1.65vw, 1.25rem);
    width: fit-content;
    transition: 0.5s;
margin: 0 auto;
}
.headersk:hover{
    color: darkcyan;
    cursor: pointer;
    
}


.Proglang img{
height: clamp(1rem, -0.111rem + 4.31vw, 3.125rem);
width: clamp(1rem, -0.111rem + 4.31vw, 3.125rem);

}

.Tech img{
height: clamp(1rem, -0.111rem + 4.31vw, 3.125rem);
width: clamp(1rem, -0.111rem + 4.31vw, 3.125rem);

}
.Soft ul{
    display: flex;
    flex-direction: column;
    gap: clamp(0.813rem, -0.07rem + 3.43vw, 2.5rem);
    list-style: none;
}

section {
overflow: hidden;
}

/*Section3*/



.container3{
    width: 100%;
    height: clamp(15.625rem, 4.188rem + 44.42vw, 37.5rem);
        border-bottom:solid 1px gray;
      background: transparent;
}


.Projects{
  padding-top:clamp(0.938rem, -0.206rem + 4.44vw, 3.125rem);
    display: flex;
    flex-direction: row;
    gap: clamp(0.813rem, -0.07rem + 3.43vw, 2.5rem);
    height: 100%;
   padding-left: clamp(0.438rem, 0.013rem + 1.65vw, 1.25rem);
   padding-right: clamp(0.438rem, 0.013rem + 1.65vw, 1.25rem);
   
}

.Project{
   
    width: 100%;
    height: 100%;
    padding: clamp(0.438rem, 0.013rem + 1.65vw, 1.25rem);
    border-radius: 10px;
    overflow-wrap:break-word;
word-break:break-word;
    overflow: hidden;
    transition: 0.5s;
}

.Project h1{
font-size: clamp(0.688rem, 0.001rem + 2.66vw, 2rem);
}
.project1{
    background-image: url(pics/discor.png);
    background-size: cover;
    background-position: center;
    height: 50%;
    transition: 0.5s;
    border-radius: 10px;
    filter: grayscale(100%);
}

.project2{
    background-image: url(pics/godo.jfif);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    transition: 0.5s;
    filter: grayscale(100%);
    height: 50%;
}
.project3{
    background-image: url(pics/front.png);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    height: 50%;
    filter: grayscale(100%);
    transition: 0.5s;
}

.project1:hover,
.project2:hover,
.project3:hover{
    scale: 1.05;
    filter: grayscale(0%);
  
}



/*Section4*/
.container4 {
background-color: black;
height: clamp(3.125rem, -0.96rem + 15.86vw, 10.938rem);
width: 100%;
}

.container4 footer {
display: flex;
flex-direction: column;
height: 90%;

padding: clamp(0.313rem, -0.178rem + 1.9vw, 1.25rem);

}

.contactinfo {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;

}

.contactinfo div {
width: 100%;
height: 100%;
padding: 0px;
text-align: center;


}


.copyright{
    text-align: center;
}
.info1 p{
font-size: clamp(0.438rem, 0.013rem + 1.65vw, 1.25rem);
}
.info2{
    text-align: center;
border-left: solid 1px white;
border-right: solid 1px white;

}
.info2 p{
    font-size: clamp(0.313rem, -0.047rem + 1.4vw, 1rem)
}
.info2 hr{
width: 50%;

}


.info3 img{
    height: clamp(0.938rem, -0.206rem + 4.44vw, 3.125rem);
    width: clamp(0.938rem, -0.206rem + 4.44vw, 3.125rem);
    transition: 0.5s;
}


.info3 img:hover{
    scale: 1.1;
    cursor: pointer;
}


.modes {
position: fixed;
right: 20px;
bottom: 50px;
width: 60px;
height: 60px;
background: transparent;
border:solid 1px rgb(255, 255, 255);
border-radius: 50%;
z-index: 1000;
}
.modes:hover{
    cursor: pointer;
}