*, *::before, *::after{
   box-sizing: border-box;
   margin :0;
   padding :0;
   color: var(--base);
}
:root{
    --base: #f1f1f1;
    --base-100: #000;
    --red:  #FF0000;
}
body{
        font-family: "New Amsterdam", sans-serif;
        font-weight: 400;
        font-style: normal;
        background-color: var(--base-100);  
}
section{
   scroll-margin-top: 120px;
   @media(max-width: 1024px){
      scroll-margin-top: 200px;
     }
   @media(max-width: 768px){
      scroll-margin-top: 400px;
     }
}
a{
   text-decoration: none;
}   
 

header{    
        position: sticky;
        top: 0px;
        z-index: 1000;
        background-color: #000;
        padding-top:10px;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-between;
        max-width: 1440px;
        margin: auto;
        border-bottom: 1px solid var(--base);
        .logo-holder{
           display: flex;
           padding: 10px;
           align-items: center;
           .logo{
              display: flex;
              background-color: var(--base-100);
              align-items: center;
              justify-content: center;
              font-size:32px;
                 color: var(--red);
                 height: 60px;
                 width: 60px;
                 margin-right:10px;
                 border-radius:50%;
           }
              .logo-name{
               font-size:32px;
               flex:1;
               padding: 10px;
               margin-left:15px;
               border: 1.6px solid red;
            border-radius:10px;
             &:hover{
                background-color:red;
             }
           } 
        }
        nav{
          
          display:flex;
          align-items: center;
          ul{
             display: flex;
             align-items: center;
             gap: 5px;
             list-style-type: none;
             font-size:25px;
             li{
                display: inline-block;
                
                a{ 
                  color: white;
                  display: inline-block;
                  padding: 10px 20px;
                  &:hover{
                        background-color:var(--base-200);
                        border-radius:10px;  
                       }
                }
              }
           }
           .mobile-toggle{
                display: none;
                color:var(--base);
                padding: 10px;
                @media(max-width: 768px){
                      display: inline-block;
                      position: absolute;
                      top:20px;
                      right:20px;
                }
           }
        }
        @media(max-width: 1024px){
         flex-direction: column;
                align-items:center;
        }
        @media (max-width: 768px) {
                flex-direction: column;
                align-items: center;   
                width:100%;  
              nav{
                margin-top: -5px; 
                width:100%;
                ul{ 
                    display: none;
                    flex-direction: column;
                    text-align: center;
                    width:100%;
                    li{
                     width:100%;
                     a{
                        width: 100%;
                     }
                     }
                     &.action{
                        display: flex;
                      }
                  }
               }       
        }
}
h1{
   font-size:32px;
}
.contact{
   margin-top: 5px;
   .button-contact{
      display: inline-block;
      padding: 3px 10px;
      margin-right: 10px;
      background-color: var(--red);
      border-radius: 10px;
      transition: ease 0.3s all;
      color: white;
    }
   a{
       &:hover{
        background-color: var(--base-100);    
       }
    }
    @media(max-width: 768px){
      display: none;
     }
 }
 .social{
   display: flex;
   margin-top: 10px;
   width: auto;
   height: auto;
   width: 70px;
   .githubIcon{
      background-color: #fcfbfb;
      border-radius: 50%;
      width:auto;
      height:51px;
      img{
        width: auto;
   }
   }
   .linkedinIcon{
           display :inline-block;
           background-color: #0663f9;
           border-radius: 50%;
           width:auto;
           height:51px;
           margin-left: 5px;
           img{
              width: auto;
         }
    }
    @media(max-width: 768px){
      display: none;
     }
    }
.hero-container{
     position: relative;
     max-width: 1440px;
     padding-top: 100px;
     margin: auto;
     display:flex;
     padding : 10px;
     gap: 10px;
     height: auto;
     width: 100%;
     @media(max-width: 1440px){
      padding-left:20px;
      padding-right:20px;
    }
     .textAboutMe{
        flex:2;
        display:flex;
        padding : 23px;
        border-radius: 50px;
        border-bottom-right-radius: 5%;
        border-bottom-left-radius: 5%;
        flex-direction: column;
        justify-content: center;
        h1{
         font-size:55px;
         line-height: 1;
        }
        small{
         font-weight: 200;
         font-size: 30px;
        }
        font-size: 22px;
        border: 1.6px solid #fcfbfb;
         @media(max-width: 1024px){
         font-size: 17px;
         h1{
            font-size:40px;
            line-height: 1;
            letter-spacing: 1.5px;
           }
         small{
            font-size: 20px;
         }
        }
         @media(max-width: 768px){
            h1{
               font-size:40px;
               line-height: 1;
               letter-spacing: 1.5px;
              }
            small{
               font-size: 20px;
            }
            font-size: 20px;
          }
          @media(max-width:450px){
            h1{
            font-size: 20px;
           }
           small{
            font-size: 14px;
           }
           font-size: 14px;
          }
    }   
   .heroAndSocial{
      display: flex;
      flex-direction: column;
      flex:1;
     .myPhoto{  
        width: 100%;
        height: 100%;
        background-color: black;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        display:flex;
        border: 1.6px solid #fcfbfb;
        flex-direction: column;
        justify-content:flex-end;
        img{    
             margin-top: -20px;
             width: 100%;
             height: auto;
             object-fit: contain;      
        }
        @media(max-width: 600px){
         height: 200px;
        }
      }
      .contact{
         display: none;
         font-size: 19px;
         @media(max-width: 768px){
            display: flex;
           }
       }
       .social{
         display: none;
         @media(max-width: 768px){
            display: flex;
         }
       } 
     }
   }
   .logos{
      display:flex;
      padding: 30px 0;
      width: 100%;
      justify-content: center;
      .marquee{
         width:100vw;
         max-width: 1440px;
         height: 120px;
         overflow:hidden;
         position:relative;
         @media(max-width: 768px){
         margin-bottom: -50px;}
         .track{
          position: absolute;
          white-space:nowrap;
          will-change: transform;
          animation: marquee 30s linear infinite;
          display:flex;
          gap:10px;
          @media(max-width: 768px){      
            height: 70px;
            width: 70px;
            animation: marquee 5s linear infinite;
              }
           } 
         }

      }
     @keyframes marquee{
      0%{
         transform: translateX(0);
      }
      100%{
         transform: translateX(-80%);
      }
     }
     .skill{
      max-width: 100%;
      display: flex;
      justify-content: center;
      margin:0 auto ;
      margin-bottom: 20px ;
     }
     .card-title{
      font-size: 25px;
     }
     .project-holder {
       display: grid;
       max-width:1440px;
       width:100vw;
       gap: auto;
       row-gap: 40px;
       padding-left: 60px;
       width: 100%; 
       grid-template-columns: 1fr 1fr 1fr;
       grid-template-rows: 1fr  ;
       @media (min-width: 1400px){
         padding-left: 110px;
      }
       @media (max-width: 960px){
         padding-left: 50px;
         grid-template-columns: 1fr 1fr ;
         grid-template-rows: 1fr 1fr ;
       }
       @media (max-width: 650px){
         grid-template-columns: 1fr ;
         grid-template-rows: 1fr  ;
       }
     }
     .extracurricular-holder {
      display: grid;
      max-width:1440px;
      width:100vw;
      gap: auto;
      row-gap: 40px;
      padding-left: 60px;
      width: 100%; 
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr  ;
      @media (min-width: 1400px){
        padding-left: 110px;
     }
      @media (max-width: 960px){
        padding-left: 50px;
        grid-template-columns: 1fr 1fr ;
        grid-template-rows: 1fr 1fr ;
      }
      @media (max-width: 650px){
        grid-template-columns: 1fr ;
        grid-template-rows: 1fr  ;
      }
    }
   .headline {
      margin-left: 10px;
      border-left: 4px solid red;
      padding: 10px 12px 14px;
    }
    .timeline .headline{
      margin-left:-10px;
    }

   .timeline {
      --background: #0a0f2b;
      --accent: var(--red);
      --text: white;
      --line: #c4c4c4;
      color: var(--text);
      padding: 30px;
      margin : 0 auto;
      max-width: 1440px;

    }
    
    .timeline ul {
      list-style: none;
      position: relative;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(var(--items), 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-column-gap: 0px;
      grid-row-gap: 0px;
    }
    
    .timeline ul:before {
      content: '';
      position: absolute;
      top: 50%;
      width: 100%;
      border-top: 3px solid var(--text);
      left: 11px;
    }
    
    .timeline ul:after {
      content: "\f04b";
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      margin-top: 1px;
      right: -15px;
      font-size: 30px;
      color: var(--accent);
    }
    
    .timeline ul li {
      --circle-size: 15px;
      grid-column: var(--index);
      overflow: hidden;
      position: relative;
      height: calc(100% + var(--circle-size) * 0.5);
      p{
        font-size: 20px;
      }
    }
    
    .timeline ul li:after {
      content: '';
      width: var(--circle-size);
      height: var(--circle-size);
      background: var(--line);
      position: absolute;
      bottom: 0;
      left: var(--circle-size);
      border-radius: 100px;
      transform: translateX(-50%);
      z-index: 1;
    }
    
    .timeline ul li:nth-child(even):after {
      bottom: auto;
      top: 0;
    }
    
    .timeline ul li:nth-child(even) {
      grid-row: 2;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-top: 40px;
      margin-top: calc(var(--circle-size) * -0.45);
    }
    
    .timeline ul li:nth-child(odd) p:after,
    .timeline ul li:nth-child(even) h3:before {
      content: "";
      display: block;
      border-left: 2px dashed var(--text);
      height: 100vh;
      margin-top: 10px;
      position: absolute;
      left: calc(var(--circle-size) - 1px);
    }
    
    .timeline ul li:nth-child(even) h3:before {
      bottom: 100%;
      margin-bottom: 5px;
    }
    
    .timeline ul li>* {
      padding-left: calc(var(--circle-size) * 0.4);
    }
    
    .timeline ul li h3 {
      color: var(--accent);
      margin: 0;
      margin-bottom: 5px;
      font-size: 1.6em;
      position: relative;
    }
    
    .timeline ul li p {
      margin: 0;
      position: relative;
      text-wrap: pretty;
    }
    
    @media (max-width: 568px) {
      .timeline ul {
        display: flex;
        flex-direction: column;
      }
      .timeline ul li {
        grid-column: 1 !important;
        grid-row: var(--index) !important;
        height: 100%;
        padding-bottom: 30px;
        padding-top: 10px;
      }
      .timeline ul:before,
      .timeline ul:after,
      .timeline ul li:after,
      .timeline ul li:nth-child(even) h3:before,
      .timeline ul li:last-child p:after {
        display: none;
      }
      .timeline ul li:first-child {
        padding-top: 0;
      }
      .timeline ul li:nth-child(even) {
        margin-top: 0;
        padding-top: 10px;
      }
      .timeline ul li p:after {
        content: "";
        display: block;
        border-left: 2px dashed var(--text);
        height: 100vh;
        margin-top: 10px;
        position: absolute;
        left: calc(var(--circle-size) - 1px);
      }
    }