/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;600&display=swap'); */
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* font-family: 'Inter', sans-serif; */
    font-family: 'Montserrat', sans-serif;
    /* border: solid; */
    color: rgb(255, 255, 255)
    
}


::-webkit-scrollbar {
  width: 10px;
  height: 16px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;

}
::-webkit-scrollbar-thumb {
  background: rgb(54, 172, 226);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(34, 185, 255);
  transition: 0.3s ease-in-out; 

}
.blue {
  color: rgb(34, 185, 255);
}

/* ///////////////////FONTS//////////////////// */
h1{
  margin-bottom: 0.5rem;
  font-weight: 400;
  font-size: medium;
}

h2{
  font-weight: 400;
  
  margin-bottom: 1rem;
  font-weight: bold;
  
}
h3{
  font-weight: 400;
  
  margin-bottom: 1rem;
  
}
h3 span{
  font-weight: 800;
}
.project h3{
  font-weight: 800;
}
.orange {
  color: rgb(34, 185, 255);
}


.nav-link{
  font-size: medium;
}
.background{
  width: 100%;
}
.logo
{
margin-left: 6rem;}

body{
    background-color: rgb(0, 0, 0); 
      /* background-image: url("../media/backgroundA.png");
       background-repeat: no-repeat;
      background-size: cover;   */
      height: 100vh;
}
header{
    /* background-color: rgb(241, 57, 57); */
    width: 100vw;
    height: 8%;

}
.section{
  display: none;
  
}


nav{
  height: 100%;
    display: flex;
    align-items: center;
    /* justify-content: space-around; */
    justify-content: space-between;
    /* padding: 2rem ; */
    /* padding-bottom: 2rem; */
    /* padding-top: 2rem; */
    /* background-color: aqua; */
  }
  nav img{
    margin-right:8rem;
    width: 4rem;
  }
  
  ul{
    display: flex;
    justify-content: space-around;
    /* background-color: aqua; */
    list-style: none;
    width: 50%;
    /* justify-content: flex-end; */
  }
  a{
    /* color: rgb(255, 255, 255); */
    text-decoration: none;
  }
  
  .nav-link:hover{
    transition: 0.3s ease-in-out; 
    color: rgb(34, 185, 255);
  }
   a:hover{ -webkit-transform: scale(1.05); }
  /* nav bar underline animation */
  nav a {
    position: relative;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 1.2em;
  }
  nav a::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color:  rgb(34, 185, 255);
    transition: width 0.3s ease-in-out;
  }
  
  nav a:hover::before {
    width: 100%;
    animation: moveLeftToRight 0.3s ease-in-out forwards;
  }
  main{
display: flex;
/* background-color:red ; */
align-items: center;
height: 80vh;
}
.video {
  width: 28%;
  position: absolute;
/* align-self: center; */
right: 20%;
bottom: 5%;
position:absolute;
z-index:0;
}

/* ///////////////////CONTENT///////////////////// */
section{
  /* background-color: brown; */
  justify-content: center;
  width: 100%;
  display: flex;
}
.content {
  /* background-color: aqua; */
  max-width: 40%;
  /* background-color: aqua; */
  /* padding: 3rem; */
  font-size: 1rem;
  font-weight: 400;
  gap: 2rem;
  
}
.direction{
  display: flex;
  flex-direction: column;
}
img{
  /* width: 100%; */
  /* align-self:flex-end ; */
  height: 12rem;
}
.about{
  /* align-items:center ; */
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  
}
.experience{
  display: none;
  /* display: flex; */
  height: 18vh;
  width: 404vw;
  /* background-color: greenyellow; */
  position: relative;
z-index:1;

}
p{
  line-height: 2
  ;
}
.fade-in-text {
  /* font-family: Arial; */
  /* font-size: 150px; */
  animation: fadeIn 3s;
}
.icons{
  /* background-color: aqua; */
  margin-left: 6rem;
  width:25%;
  /* height: 55%; */
  display: flex;
  /* justify-content: space-around; */
  justify-content: center;
  align-items: center;
}
.icon{
  /* position: relative; */
color: rgb(255, 255, 255);
margin: 5%;
/* left: 85px; */
/* bottom: 250px; */
}
hr{
  /* margin: 5%; */
  height: 100%;
}

.icon:hover{
  transition: 0.4s ease-in-out; 
  color: rgb(34, 185, 255);
}
.experienceBtns{
  /* background-color: blue; */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* position: absolute; */
  /* left: 15%; */
  /* top:35%; */

}


@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



  
  @keyframes moveLeftToRight {
    from {
      left: 0;
    }
    to {
      right: 0;
    }
  }
  @media (width > 767px) {
    .message{
      display: none;
    }
  }
  @media (width <= 767px) {
    .message{
      /* display: block; */
      display: flex;
      height: 100vh;
      /* background-color: rgb(191, 241, 6); */
      /* position: absolute; */
      padding: 2rem;
    }
    .sorry{
      /* background-color: aqua; */
      align-self: center;
    }
    
  }

  /* ////////////////////responsive//////////////////////////////////////// */
  @media (max-width: 767px) {
    main{
        /* background-color: rgb(248, 90, 17); */
        display: none;

        /* flex-direction: column; */
        /* justify-content: center; */
        /* flex-wrap: wrap; */
        /* align-items: center; */
        
        
        }
       .icons{
  
          display: none;
      }
      .message{
        display: block;

      }

      /* .content{
       flex-direction: column;
       width: 100%;
       text-overflow: inherit;
       height: 50%;
      } */
  nav{
    display: none;

  }
   

        
    }
div .experience{
  gap: 0.5rem;
}
#contact{
  flex-direction: column;
}

    /* //////////projects///////////////// */

#projects{
  /* background-color: aqua; */
display: flex;
width: 80%;
padding: 3rem;
      overflow: overlay;

/* justify-content: space-around; */
/* max-height: 40%; */
/* background-color: aqua; */
/* flex-wrap: wrap; */
max-width: 100%;
/* max-width: 100VW; */
/* overflow:hidden; */
/* overflow-x: hidden; */
gap: 3rem;
}
.project{

}

.gif{
  width:100%;
  /* height:0; */
  height: auto  ;
  padding-bottom:15%;
  position:relative;
  /* bottom: 25%;   */
}

    .img-container {
      /* position: relative; */
      /* display: inline-block; */
    }
    
    .img-container:hover .img-content  {
      filter: none;
    }
    
  
    
    .img-content {
      margin-top: 1rem;
      width: 250px;
      /* height: auto; */
      object-fit: cover;
      filter: grayscale(100%);
      transition: filter 0.5s ease-in-out;
      border-radius: 15px;
    }
    .projects{
      /* overflow: overlay; */
      /* width: 80%; */
    }