html {
    scroll-behavior:smooth; /* Enables smooth scrolling */
  }

a {
            cursor: url('./Bigger.svg'), auto; 
            text-decoration: none; 
        }


::-webkit-scrollbar {
    width: 20px;
  }

  ::-webkit-scrollbar-track {
    background: #000000;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #570707;
    border-radius: 6px;
    border: 3px solid #020202;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #ff0000;
  }

    



    @font-face {
        font-family: 'GilRegular';
        src: url(fonts/Gilroy-Regular.ttf) format(truetype);
        font-weight: 300; /* Regular weight */
        font-style: normal; /* Normal style */
        
    }
    
    @font-face {
        font-family: 'GilRegular';
        src: url(fonts/Gilroy-Heavy.ttf) format(truetype);
        font-weight: 800; /* Regular weight */
        font-style: normal; /* Normal style */
    }


    .portfolio {
      background-color: #000;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      align-items: start;
      font-family: GilRegular, sans-serif;
      color: #000;
      justify-content: start;
      padding: 24px 0 0 24px;
    }
    
    .header-container {
      display: flex;
      width: 1392px;
      max-width: 100%;
      gap: 19px;
      flex-wrap: wrap;
    }
    
    .logo-image {
      aspect-ratio: 3.22;
      object-fit: contain;
      justify-content: center;
      width: 177px;
      max-width: 100%;
      margin-top: 30px;
    }
    
    .nav-container {
      border-radius: 20px;
      background-color: #ff1700;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      justify-content: center;
      flex-grow: 1;
      flex-basis: 0;
      width: fit-content;
      padding: 42px 50px;
    }
    
    .nav-content {
      display: flex;
      align-items: center;
      gap: 40px 100px;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    
    .brand-name {
      font-size: 25px;
      text-transform: uppercase;
      align-self: stretch;
      margin: auto 0;
    }
    
    .brand-italic {
      font-style: italic;
    }
    
    .brand-regular {
      font-family: GilRegular, Inter, sans-serif;
      font-weight: 800;
    }
    
    .nav-links {
      align-self: stretch;
      display: flex;
      min-width: 240px;
      flex-direction: column;
      font-size: 16px;
      width: 303px;
      margin: auto 0;
    }
    
    .nav-items {
      display: flex;
      align-items: center;
      gap: 40px 48px;
      justify-content: space-between;
    }
    
    .nav-link {
      align-self: stretch;
      margin: auto 0;
      text-decoration: none;
      color: black;
    }
    
    .main-content {
      display: flex;
      margin-top: 21px;
      width: 1392px;
      max-width: 100%;
      align-items: center;
      gap: 24px;
      justify-content: start;
      flex-wrap: wrap;
    }
    
    .content-left {
      align-self: stretch;
      display: flex;
      min-width: 240px;
      flex-direction: column;
      justify-content: start;
      flex: 1;
      flex-basis: 0%;

    }
    
    .hero-section {
      display: flex;
      height: 479px;
      width: 100%;
      align-items: center;
      gap: 23px;
      font-size: 56px;
      font-weight: 800;
      line-height: 56px;
      justify-content: start;
      flex-wrap: wrap;
    }
    
    .intro-container {
      border-radius: 20px;
      background-color: #ff1700;
      align-self: stretch;
      display: flex;
      min-width: 240px;
      flex-direction: column;
      overflow: hidden;
      justify-content: start;
      flex-grow: 1;
      width: 448px;
      margin: auto 0;
      padding: 34px 24px 87px;
    }
    
    .intro-icon {
      aspect-ratio: 1;
      object-fit: contain;
      width: 119px;
      max-width: 100%;
    }
    
    .intro-text {
      margin-top: 72px;
    }
    
    .hero-image {
      aspect-ratio: 0.78;
      object-fit: cover;
      width: 299px;
      border-radius: 20px;
      align-self: stretch;
      min-width: 240px;
      flex-grow: 1;
    }
    
    .about-section {
      display: flex;
      margin-top: 24px;
      width: 100%;
      align-items: center;
      gap: 24px;
      justify-content: start;
      flex-wrap: wrap;
    }
    
    .about-container {
      border-radius: 20px;
      background-color: #ff1700;
      align-self: stretch;
      min-width: 240px;
      min-height: 402px;
      font-size: 20px;
      font-weight: 300;
      line-height: 25px;
      flex-grow: 1;
      width: 358px;
      display: flex;
      flex-direction: row;
      margin: auto 0;
      /* padding: 41px 14px; */
    }
    
    .about-icon {
      aspect-ratio: 1;
      object-fit: contain;
      width: 30px;
      height: 30px;
      padding: 30px;
      padding-bottom: 200px;
      
    }
    
    .rotating-image {
        width: 100px;
        height: 100px;
        transform-origin: 50%; /* Set your desired width */
        height: 20px; /* Set your desired height */
        animation: rotate 10s linear infinite;
      }
      
      @keyframes rotate {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

    .about-text {
      align-self: stretch;
      flex: 1;
        margin-top: 50px;
      margin: 30px;
      min-height: 158px;
      max-width: 100%;
      width: 420px;
      gap: 10px;
      padding: 0px 0px;
      padding-right: 10px;
    }
    
    .contact-container {
      border-radius: 20px;
      background-color: #fff;
      align-self: stretch;
      display: flex;
      min-width: 254px;
      min-height: 241px;
      flex-direction: column;
      overflow: hidden;
      justify-content: start;
      flex-grow: 1;
      width: 358px;
      padding: 43px 24px;

    }
    
    .contact-header {
      display: flex;
      width: 100%;
      align-items: end;
      gap: 40px 100px;
      font-size: 15px;
      font-weight: 300;
      justify-content: space-between;
    }
    
    .contact-icon {
      aspect-ratio: 1;
      object-fit: contain;
      width: 38px;
    }
    
    .contact-cta {
      font-size: 55px;
      font-weight: 500;
      margin-top: 191px;
    }


    
    .sidebar {
      align-self: stretch;
      display: flex;
      min-width: 240px;
      flex-direction: column;
      justify-content: start;
      width: 448px;
      margin: auto 0;
    }
    
    .projects-container {
      border-radius: 20px;
      background-color: #ff1700;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      font-size: 25px;
      font-weight: 500;
      padding: 40px 24px;
      margin: auto  ;

    }
    
    .project-header {
      display: flex;
      gap: 20px;
      justify-content: space-between;
    }
    
    .project-icon {
      aspect-ratio: 1;
      object-fit: contain;
      width: 26px;
      margin: auto 0;
    }
    
    .project-image {
      aspect-ratio: 1.48;
      object-fit: contain;
      width: 100%;
      border-radius: 10px;
      margin-top: 21px;
    }
    
    .divider {
        height: 2px; /* Thickness of the divider */
    background-color: white; /* Color of the divider */
    margin: 20px 0; /* Adds vertical spacing */
    width: 400px;
    }
    
    .project-title {
      align-self: start;
      margin-top: 41px;
    }
    
    .social-container {
      border-radius: 20px;
      background-color: #ff1700;
      display: flex;
      margin-top: 30px;

      overflow: hidden;
      font-size: 15px;
      font-weight: 300;
      text-transform: uppercase;
      justify-content: center;
      padding: 35px 27px;
      padding-top: 57px;
      padding-bottom: 57px;
    }
    
    .social-links {
      display: flex;
      max-width: 100%;
      width: 334px;
      align-items: center;
      gap: 40px 59px;
      justify-content: space-between;
      text-decoration: none;
    }
    
    .social-link {
      align-self: stretch;
      margin: auto 0;
      text-decoration: none;
      color: black
    }
    
    .page-break {
      background-color: #fff;
      display: flex;
      min-height: 1px;
      margin-top: 21px;
      width: 100%;
    }
    
    @media (max-width: 991px) {
      .portfolio {
        padding-left: 20px;
      }
      
      .nav-container {
        max-width: 100%;
        padding: 40 34px;
      }
      
      .nav-content {
        max-width: 100%;
        text-decoration: none;
        color: black;
      }
      
      .nav-links {
        white-space: initial;
      }
      
      .nav-items {
        white-space: initial;
      }
      
      .content-left {
        max-width: 100%;
      }
      
      .hero-section {
        max-width: 100%;
        font-size: 40px;
        line-height: 45px;
      }
      
      .intro-container {
        max-width: 100%;
        font-size: 40px;
        line-height: 45px;
        padding: 0 20px;
      }
      
      .intro-text {
        max-width: 100%;
        margin-top: 40px;
        font-size: 30px;
        line-height: 45px;
      }
      
      .about-section {
        max-width: 100%;
      }
      
      .about-container {
        max-width: 100%;
      }
      
      .about-text {
        margin-top: 40px;
      }
      
      .contact-container {
        max-width: 100%;
        padding: 0 20px;
      }
      
      .contact-cta {
        margin-top: 40px;
        font-size: 40px;
      }
      
      .sidebar {
        max-width: 100%;
      }
      
      .projects-container {
        max-width: 100%;
        padding: 0 20px;
      }
      
      .project-title {
        margin-top: 40px;
      }
      
      .social-container {
        max-width: 100%;
        white-space: initial;
        padding: 0 20px;
      }
      
      .social-links {
        white-space: initial;
      }
      
      .page-break {
        max-width: 100%;
      }
    }