.portfolio-category-template{
    width: 100%;
    padding-top: calc(120px + 72px);
    background: #010817;
    margin-top: -72px;
    position: relative;
    overflow: hidden;
}

html {
	scroll-behavior: auto !important;
}

body{
    background-color: #010817 !important;
}

header#masthead.scrolled-hover {
    background-color: #010817 !important;
}

.portfolio-category-hero-section2 {
    position: absolute;
    width: 345vw;
    height: 762.5vw;
    left: 50%;
    bottom: 0;
    border-radius: 10.42vw;
    pointer-events: none;
}

.portfolio-category-template .img-1 {
     will-change: transform;
     pointer-events: none;

    position: absolute;  
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    width: auto;
    animation: iframe-hero-circle-enter 4000ms ease-out forwards;
    top: -36.82vw;
    height: 58.17vw; 
}

@keyframes iframe-hero-circle-enter {
    0% {
        top: -36.82vw;
        height: 58.17vw; 
    }
    100% {
        top: -115vw;
        height: 181.614vw;
    }
}

.portfolio-category-template .img-2-wr {
    position: absolute;
    right: -14vw;         
    top: -30vw;           
    width: 21.56vw;
    height: 21.56vw;
    pointer-events: none;
}

.portfolio-category-template .img-2 {
    width: 21.56vw;
    height: auto;
    will-change: transform;
    pointer-events: none;

    animation: 
        iframe-hero-circle2-grow 4000ms ease-in-out 4000ms forwards,
        iframe-hero-circle2-sway 12000ms ease-in-out 6000ms infinite;
}

@keyframes iframe-hero-circle2-grow {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(5);
    }
}

@keyframes iframe-hero-circle2-sway {
    0%, 100% {
        transform: translate(0, 0) scale(5);       
    }
    50% {
        transform: translate(-100vw, 0) scale(5); 
    }
}

.portfolio-category-content{
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 120px;
    padding: 0 60px;
    padding-bottom: 140px;
    z-index: 2;
    position: relative;
}

.portfolio-category-info-container{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    row-gap: 20px;
    align-items: start;
}

.portfolio-category-info-container .portfolio-btn,
.portfolio-category-info-container .portfolio-btn:visited{
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    transition: 0.3s;
    padding: 0;
    background: transparent;
    width: auto;
    align-self: start;
}

.portfolio-category-info-container .portfolio-btn svg{
    flex-shrink: 0;
}

.portfolio-category-info-container .portfolio-btn path{
    transition: 0.3s;
}

.portfolio-category-info-container .back-link-text{
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    color: #808EA7;
    transition: 0.3s;
}

.portfolio-category-info-title{
    grid-column: 1 / 5;
    color: var(--n-white);
    font-family: Manrope;
    font-size: 64px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%;
}

.portfolio-category-info-desc{
    grid-column: 7 / 12;
    padding-top: 8px;
    color: rgba(246, 251, 255, 0.80);
}

.portfolio-category-info-desc a, 
.portfolio-category-info-desc a:visited{
    color: var(--d-accent);
    transition: 0.3s;
    text-decoration: underline;
}

.portfolio-category-info-desc a .char{
    text-decoration: underline;
}

.portfolio-category-grid{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 140px;
}

.portfolio-category-grid-row{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (hover:hover){
    .portfolio-category-info-desc a:hover{
        color: var(--light-blue);
    }

    .portfolio-category-info-container .portfolio-btn:hover .back-link-text{
        color: var(--d-white);
    }

    .portfolio-category-info-container .portfolio-btn:hover path{
        fill: var(--d-white);
    }
}

@media (max-width: 1919px) {
    .portfolio-category-template{
        padding-top: calc(100px + 72px);
    }

    .portfolio-category-content{
        gap: 100px;
        padding: 0 40px;
        padding-bottom: 100px;
    }

    .portfolio-category-info-title{
        font-size: 48px;
        line-height: 64px;
    }

    .portfolio-category-grid{
        gap: 100px;
    }

    .portfolio-category-info-container{
        row-gap: 16px;
    }
}

@media (max-width: 1439px) {
    .portfolio-category-template{
        padding-top: calc(80px + 72px);
    }

    .portfolio-category-content{
        gap: 80px;
        padding-bottom: 80px;
    }

    .portfolio-category-info-title{
        font-size: 42px;
        line-height: 52px;
    }

    .portfolio-category-grid{
        gap: 80px;
    }

    .portfolio-category-info-container{
        row-gap: 20px;
    }
}

@media (max-width: 1079px) {
    .portfolio-category-info-container{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .portfolio-category-info-desc{
        padding-top: 0;
        max-width: 520px;
    }

    .portfolio-category-grid-row{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 80px;
    }

    .portfolio-category-content{
        padding-bottom: 100px;
    }

    .portfolio-category-info-container .portfolio-btn,
    .portfolio-category-info-container .portfolio-btn:visited{
        gap: 6px;
        padding: 6px;
        padding-inline-end: 10px;
        background: rgba(12, 121, 242, 0.20);
    }

    .portfolio-category-info-container .portfolio-btn path{
        fill: var(--light-blue);
    }

    .portfolio-category-info-container .back-link-text{
        color: var(--light-blue);
        font-size: 14px;
    }
}

@media (max-width: 577px) {
    .portfolio-category-template{
        padding-top: calc(48px + 72px);
    }

    .portfolio-category-content{
        gap: 60px;
        padding: 0 16px;
        padding-bottom: 80px;
    }

    .portfolio-category-info-title{
        font-size: 32px;
        line-height: 42px;
    }

    .portfolio-category-info-desc{
        max-width: unset;
    }
}