#loading-screen {
position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
      color: #474747;
}

.navbar img {
    width: 35px;
    height: auto;
}

.navbar {
    font-family: "Lexend Mega", sans-serif;
    font-weight: 300;
    font-size: 12px;
}

.navbar ul {
    display: flex;
    gap: 30px;
}

.portfolio-title {
    font-family: "Lexend Mega", sans-serif;
    margin-top: 15px;
}

.portfolio-title h1 {
    font-weight: 200;
    margin-bottom: 15px;
 
}


.portfolio-title p {
   font-size: 22px;
     font-family: "Darker Grotesque", sans-serif;

    
}

.project-displays {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 150px;
    margin-bottom: 135px;
}

.project-displays > div {
    width: 50%;
}

.project-display {
    max-width: 200px;
}

.project-display .btn-primary {
    background-color: rgba(0,0,0,0);
    color: #474747;
    border: 1px solid #474747;
    font-weight: 600 !important;
}

.project-display .btn-primary:hover {
    background-color: rgba(0,0,0,0.05);
    color: #474747;
    border: 1px solid #474747;
}

.project-display .btn-primary:active,.project-display .btn-primary:focus  {
    background-color: rgba(0,0,0,0.05) !important;
    color: #474747 !important;
    border: 1px solid #474747 !important;
}

.blur-circle {
  width: 100%;
   aspect-ratio: 1 / 1;
  border-radius: 50%;
  filter: blur(50px);
margin-top: -150%;
  z-index: -1;
  position: relative
}

#displayProject1 .blur-circle {
    background-color: rgb(74, 219, 255);
}

#displayProject2 .blur-circle {
    background-color: rgba(184, 0, 0, 1);
}

#displayProject3 .blur-circle {
    background-color: rgb(241, 255, 52);

}

#displayProject4 .blur-circle {
    background-color: rgb(248, 94, 158);
}



.float {
 
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* 1 */
.float-1 {
  animation-name: float1;
   animation-duration: 5s;
}
@keyframes float1 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-10px, -18px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 2 */
.float-2 {
  animation-name: float2;
   animation-duration: 4s;
}
@keyframes float2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(12px, -12px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 3 */
.float-3 {
  animation-name: float3;
   animation-duration: 6s;
}
@keyframes float3 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(-14px, 12px) rotate(-0.8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* 4 */
.float-4 {
  animation-name: float4;
   animation-duration: 5s;
}
@keyframes float4 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(16px, 18px) rotate(1.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}


.project-display .decor-shadow {
    margin-top: 55%;
    margin-bottom: 55px;
}

.project-container {
 max-width: 1700px;
 padding-bottom: 100px;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.project-info {
    padding: 60px 30px 0 60px;
    max-width: 1400px;
}

.project-info h2 {
    font-family: "Lexend Mega", sans-serif;
    font-size: 12px;
    margin-bottom: 35px;
    color: #474747;
}

.project-info h3 {
    font-family: "Darker Grotesque", sans-serif;
    font-size: 60px;
    margin-bottom: 10px;
    color: #2C2C2C;
    font-weight: 900;
}

.project-info .project-description {
 font-family: "Darker Grotesque", sans-serif;
 font-size: 24px;
 margin-top: 10px;
 margin-bottom: 40px;
 color: #474747;
 line-height: 23px;
}

.project-info h4 {


    font-family: "Darker Grotesque", sans-serif;
 font-size: 20px;
 margin-top: 35px;
 margin-bottom: 30px;
 color: #474747;
 font-weight: 800;
 display: none;

}

.btn-primary {
    font-family: "Darker Grotesque", sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    padding: 7px 25px !important;
}

.display-desktop {
display: block;
}

.display-mobile {
    display: none;
}

.display-mobile-sm {
    max-width: 300px !important;
    width: 100%;
    margin-top: 40px !important;
    margin-bottom: 30px !important;
    display: block;
}

.preview-materials > img {
    Margin: auto;
}

.tabs {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    margin-top: 65px;
}

.tabs .tab-content {
    border-radius: 10px;
    padding: 0 10px;
    background-color: #FFFFFF;
    margin-top: -40px;
}

.tabs .tab-content h5 {
    font-family: "Lexend Mega", sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 30px;
    margin-top: 55px;
    color: #474747;
}

.tabs .tab-content h6 {
    font-family: "Lexend Mega", sans-serif;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 15px;
    margin-top: 55px;
    color: #474747;
}

.tabs .tab-content p, .tabs .tab-content ul {
    font-size: 22px;
    margin-bottom: 30px;
}


.tabs .tab-content .read-time {
    text-align: center;
    font-family: "Lexend Mega", sans-serif;
    font-weight: 900;
    font-size: 13px;
    margin-bottom: -20px;
    margin-top: 50px;
    display: block;
}

.tabs .tab-pane {
    height: 450px;    
    overflow-y: auto; 
    padding: 0 70px 0 50px;   
    color: #474747;  
    font-family: "Darker Grotesque", sans-serif;  
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.tabs .tab-pane::-webkit-scrollbar {
    width: 10px;
}

.tabs .tab-pane::-webkit-scrollbar-track {
    border-radius: 20px;
   
}

.tabs .tab-pane::-webkit-scrollbar-thumb {
    border-radius: 20px;
}

.tabs .tab-pane::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
}



.tabs .nav-tabs {
    gap: 15px;
    margin-left: 50px;
}

.tabs .nav-tabs button {
    font-family: "Lexend Mega", sans-serif;
    font-size: 14px;
    color: #2C2C2C;
    font-weight: 300;
    padding: 20px 10px;
    width: 170px;
    border-radius: 10px 10px 0 0;
    border: none;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 10;
   position: relative;
}

.tabs .nav-tabs .nav-link.active {
    height: 100px;
    border-radius: 10px;
    cursor: default;
}

.note {
    font-weight: 500;
}

.project-links a {
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-links svg {
    flex-shrink: 0;
    margin-left: 8px;
}

.demo-icon {
    margin-top: 1px;
}

.code-icon {
    margin-top: 1px;
    
}


#project1 {
     background-color: #EDF3F6;
}

#project1 > .project-container {
    background:  url("../img/goc/goc-faded-logo-bg.png");
    background-size: 43% auto;
    background-position: right -100px top -90px;
    background-repeat: no-repeat;
   
}


#project1 
.btn-primary {
    background-color: #8F489A;
    border: none;
}

#project1 
.btn-primary:hover {
    background-color: #AC72B5;
    
}

#project1 .tab-content {
    border: 3px #8F489A solid;
    
}


#project1 .tabs .tab-pane::-webkit-scrollbar-thumb {
    background-color: #69C2E7;
    

}

#project1 .tabs .tab-pane::-webkit-scrollbar-thumb:hover {
    background-color: #55add3;
}

#project1 .tabs .tab-pane::-webkit-scrollbar-track {
    background: rgba(105, 194, 231, 0.1);

}

#project1 .tabs .nav-tabs button {
    background-color: rgba(143, 72, 154, 0.15);
}

#project1 .tabs .nav-tabs .nav-link.active {
    background-color: rgba(143, 72, 154, 0.15) !important;
}

#project1 .tabs .nav-tabs button:hover {
    background-color: rgba(143, 72, 154, 0.3);
}




#project2 {
     background-color: #202020;
}

#project2 > .project-container {
    background:  url("../img/audi-r8/audi-r8-faded-logo-bg.png");
    background-size: 43% auto;
    background-position: right -100px top -90px;
    background-repeat: no-repeat;
   
}


#project2 
.btn-primary {
    background-color: #DB012A;
    border: none;
}

#project2 
.btn-primary:hover {
    background-color: rgb(177, 0, 32);
    
}

#project2 .tab-content {
    border: 3px #DB012A solid;
    background-color: #ffffff
    
}

#project2 .project-info h2 {
    color: #d1cfcf;
}

#project2 .project-info h3 {
    color: #d1cfcf;
}

#project2 .project-info p {
    color: #d1cfcf;
}


#project2 .tabs .tab-pane::-webkit-scrollbar-thumb {
    background-color: #000000;
    

}

#project2 .tabs .tab-pane::-webkit-scrollbar-thumb:hover {
    background-color: #818181;
}

#project2 .tabs .tab-pane::-webkit-scrollbar-track {
    background: rgba(223, 223, 223, 0.521);

}

#project2 .tabs .nav-tabs button {
    background-color: rgba(219, 1, 42, 0.5);
    color: #FFFFFF;
}

#project2 .tabs .nav-tabs .nav-link.active {
    background-color: rgba(219, 1, 42, 0.5) !important;
}

#project2 .tabs .nav-tabs button:hover {
    background-color: rgba(219, 1, 42, 0.7);
}





#project3 {
     background-color: #fdf7d6;
}

#project3 > .project-container {
    background:  url("../img/recipe-book/recipebook-faded-logo-bg.png");
    background-size: 43% auto;
    background-position: right -100px top -90px;
    background-repeat: no-repeat;
   
}


#project3 
.btn-primary {
    background-color: #47b6a1;
    border: none;
}

#project3 
.btn-primary:hover {
    background-color: #58c7b3;
    
}

#project3 .tab-content {
    border: 3px #47b6a1 solid;
    
}


#project3 .tabs .tab-pane::-webkit-scrollbar-thumb {
    background-color: #47b6a1;
    

}

#project3 .tabs .tab-pane::-webkit-scrollbar-thumb:hover {
    background-color: #58c7b3;
}

#project3 .tabs .tab-pane::-webkit-scrollbar-track {
     background: linear-gradient(
  to bottom,
  rgba(128, 215, 255, 0.2),
  rgba(144, 221, 209, 0.2),
  rgba(192, 255, 131, 0.2),
  rgba(243, 255, 81, 0.2),
  rgba(255, 186, 131, 0.2),
  rgba(255, 180, 207, 0.2),
  rgba(252, 209, 253, 0.2),
  rgba(226, 191, 216, 0.2)
);

}

#project3 .tabs .nav-tabs button {
 
    background: linear-gradient(
  to right,
  rgba(128, 215, 255, 0.7),
  rgba(144, 221, 209, 0.7),
  rgba(192, 255, 131, 0.7),
  rgba(243, 255, 81, 0.7),
  rgba(255, 186, 131, 0.7),
  rgba(255, 180, 207, 0.7),
  rgba(252, 209, 253, 0.7),
  rgba(226, 191, 216, 0.7)
);
}

#project3 .tabs .nav-tabs .nav-link.active {
     background: linear-gradient(
  to right,
  rgba(128, 215, 255, 0.7),
  rgba(144, 221, 209, 0.7),
  rgba(192, 255, 131, 0.7),
  rgba(243, 255, 81, 0.7),
  rgba(255, 186, 131, 0.7),
  rgba(255, 180, 207, 0.7),
  rgba(252, 209, 253, 0.7),
  rgba(226, 191, 216, 0.7)
);
}

#project3 .tabs .nav-tabs button:hover {
     background: linear-gradient(
  to right,
  rgba(128, 215, 255, 1),
  rgba(144, 221, 209, 1),
  rgba(192, 255, 131, 1),
  rgba(243, 255, 81, 1),
  rgba(255, 186, 131, 1),
  rgba(255, 180, 207, 1),
  rgba(252, 209, 253, 1),
  rgba(226, 191, 216, 1)
);
}






#project4 {
        background: linear-gradient(to right, white 11%, #FFE0EE 33%, #B5E1E5 63%);
}

#project4 > .project-container {
    background:  url("../img/donut-shop/donutshop-faded-logo-bg.png");
    background-size: 33% auto;
    background-position: right -50px top -90px;
    background-repeat: no-repeat;
   
}


#project4 
.btn-primary {
    background-color: #F579AD;
    border: none;
}

#project4 
.btn-primary:hover {
    background-color: #e9639b;
    
}

#project4 .tab-content {
    border: 3px #7dbfc4 solid;
    
}


#project4 .tabs .tab-pane::-webkit-scrollbar-thumb {
    background-color: #A9E2E6;
    

}

#project4 .tabs .tab-pane::-webkit-scrollbar-thumb:hover {
    background-color: #85cacf;
}

#project4 .tabs .tab-pane::-webkit-scrollbar-track {
    background: rgba(169, 226, 230, 0.1);

}

#project4 .tabs .nav-tabs button {
    background-color: rgba(245, 121, 173, 0.3);
}

#project4 .tabs .nav-tabs .nav-link.active {
    background-color: rgba(245, 121, 173, 0.3) !important;
}

#project4 .tabs .nav-tabs button:hover {
    background-color: rgba(245, 121, 173, 0.5);
}


@media (max-width: 991px) {

    .navbar {
        background-color: rgba(0,0,0,0.02);
    }

    .navbar-toggler:focus {
 
   box-shadow: none !important;
}

.navbar ul {
    text-align: center;
    padding: 20px;
}

    .display-desktop {
        display: none;
        }

        .display-mobile {
            display: block;
        }

        .project-info h3 {
    font-size: 50px;

    }
}


@media (max-width: 850px) {
.tabs .tab-content .read-time {
    margin-bottom: 0;
    margin-top: 70px;
}

    .project-displays {
    margin-top: 100px;
    margin-bottom: 115px;
}

}

@media (max-width: 800px) {

    .project-info h3 {
        font-size: 40px;
    }




}

@media (max-width: 700px) {
.project-displays {
    flex-direction: column;
    align-items: center;
    margin-bottom: 80px;
    row-gap: 100px;
}

.project-displays > div {
    width: 70%;
}

.project-display .decor-shadow {
    margin-bottom: 25px;
}
}

@media (max-width: 575px) {
.project-info {
    padding: 60px 10px 60px 10px;
}

.project-info h3 {
    margin-bottom: 0;
    font-size: 50px;
}


.project-container {
    background: none !important;
}

.project-info h5 {
    text-align: center;
    font-size: 12px;
}

.project-info  .project-decription {
    font-size: 22px !important;
}

.tabs .nav-tabs {
    margin-left: 20px;
    gap: 5px;
}

.tabs .nav-tabs button {
    width: 130px;
}

.tabs .tab-pane {
    padding: 15px 20px 15px 15px;
}

.tabs .tab-content .read-time {
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 11px;
}

.tabs {
    margin-top: 30px;
}

.project-displays > div {
    width: 100%;
    justify-content: center !important;
}
}

@media (max-width: 500px) {
.project-links {
    flex-direction: column;
    gap: 0 !important;
}

.project-links a {
    margin-bottom: 0 !important;
}

.note {
    margin-top: 25px;
    display: block;
    line-height: 15px;
}
}

@media (max-width: 410px) {

.tabs .nav-tabs button {
    width: 100px;
}

.tabs .nav-tabs button svg {
    display: none;
}
}

@media (max-width: 350px) {

.project-displays > div {
    flex-direction: column !important;
    align-items: center;
    row-gap: 80px;
}
}