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


@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


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


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

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

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

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

    
@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: #30B0F8;
        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', 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: #FF20C2;
        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;
        
      }
      
      .about-text {
        align-self: stretch;
        flex: 1;
        margin-top: 180px;
        min-height: 158px;
        max-width: 100%;
        width: 420px;
        gap: 10px;
        padding: 29px 10px;
        padding-right: 10px;
      }
      
      .contact-container {
        border-radius: 20px;
        background-color: #7C12FF;
        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: #ffffff;
        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: rgb(0, 0, 0); /* 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: #FF20C2;
        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: 40px;
          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%;
        }
      }