:root{
    --bg-color: #141414;
    --bg-secondary: #030303;
    --h1-color: #ffffffd5;
    --h2-color: #ffb52b;
    --p-primary: #cccccc;
    --p-secondary: #8d8d8d;
    --box-color: #31313167;
    --searchbox: #1d1d1d;
    --font-primary: "Questrial", sans-serif;
    --font-secondary: "Urbanist", sans-serif;
    --h1-size: clamp(42px, 6vw, 80px);
    --h2-size: clamp(20px, 3vw, 35px);
    --seo-size: clamp(15px, 3vw, 28px);
    --h3-size: clamp(10px, 3vw, 23px);
    --cat-size: clamp(8px, 1.6vw, 14px);
    --b-nav-size: clamp(12px, 2vw, 25px);
    --f-nav-size: clamp(10px, 2vw, 20px);
    --footer-end: clamp(6px, 2vw, 20px);
    --p-size: 10px;
}

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
}

html{
    scroll-behavior: smooth;
}

body{
    background-color: var(--bg-color);
    padding-top: 50px;
    font-family: "Questrial", sans-serif;
}

h1{
    color: var(--h1-color);
    font-family: var(--font-primary);
}

h1, h2, h3, h4{
    font-weight: normal;
}

p{
    font-weight: normal;
    color: var(--p-secondary);
}

img{
    pointer-events: none;
}

a{
    color: inherit;
    text-decoration: none;
    font-weight: normal;
    cursor: pointer;
    display: inline;
}

.error_msg{
    color: red;
    font-size: var(--h3-size);
    text-align: center;
}

.topbar{
    background-color: var(--bg-secondary);
    height: 50px;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.logo-header{
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.logo-header img{
    height: 20px;
    width: auto;
}

.header-bg{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 30vh;
    max-height: 70vh;
    padding: clamp(0.6rem, 1vh, 2rem) clamp(0.3rem, 1vh, 1rem);

    background:
    linear-gradient(
        to top,
        var(--bg-color) 0%,
        rgba(12, 12, 12, 0.7) 60%,
        rgba(12, 12, 12, 0.1) 100%
    ),
    url('../images/top-img_pc.webp') no-repeat center center;
    background-size: cover;
}

@media (max-width: 650px) {
    .header-bg{
        background:
        linear-gradient(
            to top,
            var(--bg-color) 10%,
            rgba(12, 12, 12, 0.7) 70%,
            rgba(12, 12, 12, 0.2) 100%
        ),
        url('../images/top-img.webp') no-repeat center center;
        background-size: cover;
    }
}

.header-elem{
    width: 100%;
    max-width: 1200px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.brand{
    font-size: var(--h1-size);
    color: var(--h1-color);
    margin-top: clamp(1.2rem, 2vh, 2.5rem);
    margin-bottom: clamp(3rem, 12vh, 13rem);

    font-weight: bold;
}

.header-branding{
    font-size: var(--h2-size);
    font-family: var(--font-primary);
    color: var(--p-secondary);
    margin-bottom: clamp(2.8rem, 4.5vh, 6rem);
}

.branding-span{
    color: var(--h2-color);
}

.hr_divider{
    border: 1px solid #91919162;
    width: 100%;
}

.header-nav{
    display: flex;
    justify-content: center;
    align-items: center;

    font-size: var(--b-nav-size);
    font-family: var(--font-primary);
    color: var(--p-primary);
    margin-top: 0.7rem;
}

.header-nav nav{
    display: flex;
    gap: clamp(1.2rem, 3vw, 4rem);
}

.search-box{
    display: flex;
    justify-content: center;
    align-items: center;

    width: clamp(300px, 60vw, 1600px);
    margin: clamp(0.5rem, 1.2vh, 1.5rem) auto;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--searchbox);
}

.search-box input{
    flex: 1;
    padding: clamp(0.4rem, 1.2vh, 1rem);
    font-size: clamp(0.6rem, 1.2vw, 1.2rem);
    color: var(--p-primary);
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-primary);
}

.search-box button{
    padding: clamp(0.4rem, 1.2vh, 1rem) 1.2rem;
    border: none;
    background: transparent;
    color: var(--p-primary);
    font-size: clamp(0.6rem, 1.2vw, 1.2rem);
    cursor: pointer;
}

.h2-class{
    font-size: var(--h2-size);
    font-family: var(--font-primary);
    color: var(--h2-color);
    font-weight: normal;
    margin: 0 clamp(0.3rem, 1vw, 1rem);
}

.dwnmodh2-class{
    font-size: clamp(17px, 4vw, 60px);
    font-family: var(--font-secondary);
    color: var(--h2-color);
    font-weight: normal;
    margin: clamp(0.3rem, 1vh, 1rem) 0;
}

.h3-class{
    font-size: var(--h2-size);
    font-family: var(--font-secondary);
    color: var(--p-primary);
    font-weight: normal;
    margin: 0 clamp(0.3rem, 1vw, 1rem);
}

.h4-class{
    font-size: var(--b-nav-size);
    font-family: var(--font-secondary);
    color: var(--p-secondary);
    font-weight: normal;
    margin: 0 clamp(0.3rem, 1vw, 1rem);
}

.screen-margin{
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;

    padding: 0 clamp(0.2rem, 2vw, 4rem);
}

#slider-box{
    width: 100%;
}

.slider{
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;

    padding: 0.5rem;

    -webkit-overflow-scrolling: touch;
}

.slider::-webkit-scrollbar{
  display: none;
}

.slide{
    flex-shrink: 0;
    width: clamp(100px, 70vw, 900px);
    margin-right: clamp(0.4rem, 1vw, 1.4rem);
}

.slide-box{
    background-color: var(--box-color);
    overflow: hidden;
    padding: clamp(0.3rem, 0.5vw, 0.8rem);
}

.slide-box img{
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: clamp(0.3rem, 0.5vw, 0.8rem);
}

.post-title{
    color: var(--p-primary);
    font-size: var(--h3-size);
    font-family: var(--font-primary);
    font-weight: normal;
}

.post-title2{
    color: var(--h1-color);
    font-size: var(--h3-size);
    font-family: var(--font-primary);
    font-weight: normal;
    text-align: center;
}

.post-cat{
    color: var(--p-secondary);
    font-size: var(--cat-size);
    font-family: var(--font-secondary);
    font-weight: normal;
}

.grid-box{
    width: 100%;

    display: flex;
    flex-direction: column;

    padding: clamp(0.2rem, 1vh, 0.5rem);
}

.box-cont{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;

    gap: clamp(0.2rem, 1vw, 1rem);
    padding: clamp(0.2rem, 0.5vw, 0.6rem);
}

.boxes{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    padding: clamp(0.3rem, 1vh, 0.7rem);
}

.boxes img{
    width: 100%;
    height: auto;
    display: block;

    margin-bottom: 0.7rem;
}

.seo-resp{
    margin: clamp(0.2rem, 2vh, 2rem) clamp(0.2rem, 2vw, 3rem);
}

.seo-box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    margin: clamp(0.4rem, 1vw, 1rem);
    padding: 0.3rem;
    gap: clamp(0.3rem, 0.5vw, 0.8rem);

    background-color: #3d3d3d67;
}

.seo-head{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: 100%;
}

.seo-h2{
    padding: clamp(0.3rem, 0.5vw, 0.8rem);

    color: var(--h2-color);
    font-size: var(--seo-size);
}

.seo-text{
    padding: clamp(0.3rem, 0.5vw, 0.8rem);
    color: var(--p-secondary);
    font-size: var(--h3-size);
}

.seo-img{
    padding: clamp(0.3rem, 0.5vw, 0.8rem);
    flex-shrink: 0;

    width: clamp(60px, 9vw, 130px);
}

.seo-img img{
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.btn-cont{
    display: flex;
    justify-content: center;
    align-items: center;

    margin: clamp(0.4rem, 1vh, 1rem) 0;
}

.browse-button{
  display: inline-flex;
  justify-content: center;
  align-items: center;

  background-color: var(--bg-color);
  color: var(--p-primary);
  border: 1px solid var(--p-primary);
  border-radius: 6px;
  font-weight: bold;
  font-family: var(--font-secondary);

  padding: clamp(0.4rem, 1vh, 1rem) clamp(1rem, 2vw, 3rem);

  cursor: pointer;
  transition: background-color 0.3s ease;
}

.browse-button:hover{
  border: 2px solid var(--bg-color);
  background-color: var(--h2-color);
  color: var(--bg-color);
}

.sneak-peak{
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0.4rem;
}

.sneak-peak img{
    width: 100%;
    height: auto;
    display: block;

    cursor: pointer;
}

.updates-sec{
    margin: 0.5rem 0;
    padding: 0.2rem;
    width: 100%;
}

.sec-elem{
    display: flex;
    align-items: center;

    width: 100%;
}

.sec-text{
    width: 100%;
    flex-shrink: 0;
    font-weight: 600;

    padding: clamp(0.4rem, 2vh, 1rem);
}

.sec-desc{
    color: var(--p-secondary);
    font-size: var(--h3-size);

    padding: clamp(0.4rem, 2vh, 1rem);
}

.social-promo{
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: clamp(0.5rem, 3vh, 2rem);

    padding: 0.5rem;
}

.social-promo img{
    width: 100%;
    height: auto;
    display: block;

    cursor: pointer;
}

footer{
    background-color: var(--bg-secondary);

    padding-top: clamp(0.4rem, 2vh, 2rem);;

    padding-bottom: clamp(1rem, 2vh, 3rem);
}

.footer-head{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.footer-brand{
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 100%;
}

.footer-brand h3{
    color: var(--h1-color);
    font-size: var(--h2-size);
    font-family: var(--font-secondary);
}

.social-footer{
    display: inline-flex;
    justify-content: center;
    align-items: center;

    font-size: var(--h3-size);
    margin: clamp(0.2rem, 1vh, 1rem) 0;
}

.social-footer nav{
    display: flex;
    gap: clamp(1rem, 2vw, 3rem);
    color: var(--p-primary);
}

.footer-h3{
    color: var(--p-primary);
    font-size: var(--h3-size);
}

.footer-links{
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 3vw, 4rem);
    padding: clamp(0.6rem, 1.2vw, 2rem) 0;
    max-width: 800px;
    margin: 0 auto;

    text-align: left;
}

@media (max-width: 820px) {
    .footer-links{
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        text-align: center;
    }
}

.footer-link{
    color: var(--p-secondary);
    font-size: var(--f-nav-size);
}

.footer-link ul{
    list-style: none;
    padding: 0;
}

.footer-h3,
.footer-link li{
    text-align: left;
}

.footer-policy{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;

    color: var(--p-primary);
    font-size: var(--footer-end);
    
    padding: clamp(0.5rem, 2vh, 1rem);
}

.footer-legals ul{
    display: flex;
    gap: clamp(0.3rem, 1vh, 1rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (max-width: 600px) {
    .footer-links{
        justify-content: center;
        text-align: center;
    }
}

.def-sec{
    display: flex;
    padding: clamp(0.4rem, 2vh, 1rem);
}

.n-end{
    padding: clamp(0.4rem, 2vh, 1rem);
    text-align: center;
    font-size: var(--b-nav-size);
    color: var(--h2-color);
}

.post-desc{
    color: var(--p-secondary);
    font-size: var(--h3-size);
    font-family: var(--font-secondary);

    padding: clamp(0.4rem, 2vh, 1rem);
}

.update-date {
    font-size: clamp(0.4rem, 1vw, 1rem); 
    display: flex;
    align-items:flex-end;

    color: var(--p-primary);
}

.box-news{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    gap: clamp(0.4rem, 2vw, 2.5rem);
    padding: clamp(0.4rem, 2vh, 1rem);
}

.updates-sec{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    padding: 0.5rem;
    background-color: var(--box-color);
}

.news-elem img{
    width: 100%;
    height: auto;
    display: block;

    margin-bottom: 0.7rem;
}

.peak-elem{
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: clamp(0.5rem, 2vh, 1rem);
    margin-bottom: clamp(0.8rem, 2vh, 2rem);

    padding: 0.5rem;
}

.post-detail{
    margin-top: clamp(0.5rem, 2vh, 1rem);
    margin-bottom: clamp(0.5rem, 2vh, 1rem);

    padding: 0.5rem;
}

.post-image{
    display: flex;
    justify-content: center;
    padding: clamp(0.6rem, 2vh, 2rem);
    align-items: center;
}

.post-image img{
    width: 100%;
    height: auto;
    display: block;

    cursor: pointer;
}

.sneak-news{
    display: flex;
    justify-content: center;
    align-items: center;
}

.sneak-news img{
    width: 100%;
    height: auto;
    display: block;

    cursor: pointer;
}
.back-link{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--h2-size);
    color: var(--h2-color);
    margin-bottom: clamp(0.8rem, 2vh, 2rem);
}

.search-results-grid{
    padding: clamp(0.6rem, 2vh, 2rem);
}

.mods-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    
    padding: 0.5rem; 
}

.modbox-cont {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    justify-content: flex-start;
    align-items: stretch; 

    --gap-size: 2.5rem; 
    gap: clamp(0.4rem, 2vw, var(--gap-size));

    padding: 0.2rem;
}

.modbox {
    width: calc(25% - (3 * var(--gap-size) / 4));
    
    flex-grow: 0;
    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modbox img {
    width: 100%;
    object-fit: cover;
    display: block;

    margin-bottom: 0.7rem;
}

@media (max-width: 600px) {
    
    .modbox-cont {
        --gap-size: 1rem;
        gap: clamp(0.4rem, 2vw, var(--gap-size));
        justify-content: space-between;
    }

    .modbox {
        width: calc(50% - (var(--gap-size) / 2)); 
        
        margin-bottom: var(--gap-size); 
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    
    .modbox-cont {
        --gap-size: 2rem;
        gap: clamp(0.8rem, 2vw, var(--gap-size));
        justify-content: space-between;
    }

    .modbox {
        width: calc(33.3% - (var(--gap-size) / 3)); 
        
        margin-bottom: var(--gap-size); 
    }
}

.tem-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    
    padding: 0.5rem; 
}

.tembox-cont {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; 
    justify-content: flex-start;
    align-items: stretch; 

    --gap-size: 1.4rem; 
    gap: clamp(0.4rem, 2vw, var(--gap-size));

    padding: 0.2rem;
}

.tembox {
    width: calc(20% - (4 * var(--gap-size) / 5));
    
    flex-grow: 0;
    flex-shrink: 0;

    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tembox img {
    width: 100%;
    object-fit: cover;
    display: block;

    margin-bottom: 0.7rem;
}

@media (max-width: 600px) {
    
    .tembox-cont {
        --gap-size: 0.6rem;
        gap: clamp(0.3rem, 1vw, var(--gap-size));
    }

    .tembox {
        width: calc(33.3% - (var(--gap-size) / 3)); 
        
        margin-bottom: var(--gap-size); 
    }
}

@media (min-width: 601px) and (max-width: 1024px) {
    
    .tembox-cont {
        --gap-size: 1.5rem;
        gap: clamp(0.8rem, 1vw, var(--gap-size));
    }

    .tembox {
        width: calc(25% - (var(--gap-size) / 4)); 
        
        margin-bottom: var(--gap-size); 
    }
}

.result-text{
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: clamp(0.4rem, 2vw, var(--gap-size));
}

.dwn_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin: clamp(0.4rem, 2vw, 1.4rem) 0;
}

.dwn_box img {
    width: 100%;
    object-fit: cover;
    display: block;

    padding: clamp(0.6rem, 2vw, 1.4rem);
}

.about-elem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.4rem, 2vw, 1.4rem);
    position: relative;
}

.about-text{
    flex: 1;
}

.about-img {
    flex: 0 0 auto;
    max-width: clamp(7rem, 9vh, 15rem);
    display: inline-flex;
}

.about-img img {
    object-fit: contain; 
    max-width: 100%;
    height: auto;
    opacity: 80%;
}

.sec-img img {
    object-fit: contain; 
    width: 100%;
    height: auto;
}

.dwnmod-box{
    position: relative;
    width: 100%;
    max-width: 100%;
}

.dwnmod-img{
    width: 100%;
    height: auto;
    display: block;
}

.mods-header-cont{
    position: absolute;
    bottom: 0;
    top: 0;
    width: 100%;
    z-index: 2;
    padding: clamp(0.4rem, 1vw, 1.4rem) 0;

    text-align: center;
    gap: 0.2rem;

    background: linear-gradient(to bottom, rgba(20,20,20,1), transparent);
}

.dwnmod-details, 
.cat-row {
    display: flex;
    flex-direction: column;
}

@media (min-width: 769px) {
    .cat-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        padding: 0 4rem;
    }
}

.cont-video{
    display: flex;
    justify-content: center;
    align-items: center;

    padding: clamp(0.4rem, 1vw, 1.4rem);
    width: 100%;
}

.cont-video img{
    width: 100%;
    height: auto;
    display: block;
}

.dwnbtn-cont{
    display: flex;
    justify-content: center;
    align-items: center;

    margin: clamp(0.2rem, 2vh, 1rem);
}

.dwn-button{
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: var(--h2-color);
  color: var(--bg-color);
  border: 1px solid var(--bg-secondary);
  font-weight: bold;
  font-family: var(--font-secondary);

  padding: clamp(0.4rem, 1.5vh, 2rem) clamp(2rem, 2.4vw, 4rem);

  cursor: pointer;
  transition: background-color 0.3s ease;
}

.dwnbtn-text{
    font-size: clamp(1.6rem, 3w, 3.5rem);
}

.dwn-button:hover{
    border: 1px solid var(--h2-color);
  background-color: var(--bg-color);
  color: var(--h2-color);
}

.dwndetailes-cont{
    display: flex;
    justify-content: center;
    align-items: center;
}

.dwn-details{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    width: max-content;
    gap: clamp(0.3rem, 2vh, 1rem);
    text-align: center;
}

.dwn-details a{
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-align: center;
}

.dwn-details i{
    line-height: 1;
}

.parentmod_box{
    background-color: #2a2a2a67;
    width: 100%;

    margin: clamp(0.3rem, 1vw, 0.6rem);
}

.pmod-box-cont{
    padding: clamp(0.3rem, 1vw, 0.7rem) 0;
    display: flex;
    white-space: nowrap;

    background-color: var(--bg-color);
}

.header-bg2{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    min-height: 10vh;
    max-height: 30vh;
    padding: clamp(0.6rem, 1vh, 2rem) clamp(0.3rem, 1vh, 1rem);

    background:
    linear-gradient(
        to top,
        var(--bg-color) 0%,
        rgba(12, 12, 12, 0.7) 60%,
        rgba(12, 12, 12, 0.1) 100%
    ),
    url('../images/web_banner.webp') no-repeat center center;
    background-size: cover;
}

.header-elem2{
    width: 100%;
    max-width: 1200px;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.brand2{
    font-size: var(--h1-size);
    color: var(--h1-color);
    padding: clamp(0.4rem, 1vh, 1rem);

    font-weight: bold;
}

.error-404{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.error-p{
    color: rgb(255, 0, 0);
    font-family: var(--font-secondary);
    font-size: var(--h2-size);
}

.success-p{
    color: lightgreen;
    font-family: var(--font-secondary);
    font-size: var(--h2-size);
}

.info-message{
    color: #4f46e5ff;
    font-family: var(--font-secondary);
    font-size: var(--h3-size);
    margin: 0 clamp(0.3rem, 1vh, 1rem);
}

.error-message{
    color: red;
    font-family: var(--font-secondary);
    font-size: var(--h3-size);
    margin: 0 clamp(0.3rem, 1vh, 1rem);
}

.redirection{
    max-width:1200px;
    margin: 0 auto;
    margin-bottom: clamp(1.5rem, 3vh, 4.5rem);

    text-align:center;
}

.dwn-gallery-cont {
    margin:clamp(0.6rem, 1vh, 1.5rem);
    padding: clamp(0.4rem, 1vh, 1rem) 0;
}

.dwnimg-cont {
    display: flex;
    justify-content: center;
    align-items: center;
}

#dwnimg-display {
    width: 100%;
    max-height: auto;
    object-fit: contain;
}

.dwn-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: clamp(0.6rem, 1vh, 1.5rem);
    padding: clamp(0.4rem, 1vh, 1rem) 0;
    overflow-x: auto; /* Allows swiping on mobile if needed */
    -webkit-overflow-scrolling: touch; 
}

.gallery-thumb {
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
}

.gallery-thumb.active {
    border-color: white;
    border: 2px solid transparent;
}

.dwn-gallery img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (min-width: 768px) {
    .dwn-gallery {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.75rem;
    }
}

.wp-ig-promo{
    display: flex;
    flex-direction: row;
    width: 100%;

    justify-content: center;
    align-items: center;

    gap: clamp(0.4rem, 1vw, 1rem);
}

.support-section{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.support-nav{
    display: flex;
    flex-direction: column;
}

.support-nav ul{
    padding: 0;
    margin: 0;
    list-style: none;

    display: flex;
    flex-direction: column;

    gap: clamp(0.3rem, 1vw, 1rem);
}

.support-nav li{
    width: fit-content;
}

.support-nav a{
    display: inline-block;
}

.nav-desc{
    font-size: var(--h3-size);
    font-family: var(--font-primary);
    color: var(--p-secondary);
    display: inline;

    margin: 0 clamp(0.3rem, 1vh, 1rem);
}

.contact-sect{
    display: flex;
    flex-direction: column;
    width: 100%;

    margin: clamp(0.3rem, 1vh, 1rem) 0;
}

.contact-div {
    width: 100%;
    display: flex;
    justify-content: left;
    margin-top: 1rem;
}

.contact-form {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    margin: 0 clamp(0.3rem, 1vh, 1rem);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    width: 100%;
    padding: clamp(0.3rem, 1vh, 0.5rem) clamp(0.4rem, 1vh, 0.6rem);
    background-color: var(--bg-color);
    color: var(--p-primary);
    border: 1px solid var(--h2-color);
    border-radius: 4px;
    font-family: var(--font-secondary);
}

.contact-form label {
    font-family: var(--font-secondary);
    color: var(--p-primary);
}

.contact-form textarea {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-secondary);
    color: var(--p-primary);
}

.contact-form button {
    padding: clamp(0.3rem, 1vh, 0.7rem);
    border: none;
    border-radius: 4px;
    background: var(--h2-color);
    color: var(--bg-color);
    cursor: pointer;
    border: 1px solid var(--bg-color);
    border-radius: 4px;

    max-width: 150px;
}

.contact-form button:hover {
    background: var(--bg-color);
    color: var(--h2-color);
    border: 1px solid var(--h2-color);
}

.post-desc2{
    color: var(--h2-color);
    font-size: var(--h3-size);
    font-family: var(--font-secondary);

    padding: clamp(0.4rem, 2vh, 1rem);
}

.cookie-banner{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-secondary);
    color: var(--p-primary);
    padding: clamp(0.3rem, 1vw, 0.6rem);
    z-index: 9999;
    font-size: 1rem;

    text-align: center;
    align-items: center;
}

.cookie-banner.hidden{
    display: none;
}

.cookie-actions {
    margin-top: 0.5rem;
}
.cookie-actions button {
    margin-right: 0.5rem;
    padding: clamp(0.4rem, 1vh, 0.8rem) clamp(0.8rem, 1vw, 1.2rem);
    cursor: pointer;
    border-radius: 4px;
    font-family: var(--font-primary);

    background-color: var(--h2-color);
    color: var(--bg-color);
    border: 1px solid var(--bg-secondary);
    transition: background-color 0.3s ease;
}

.cookie-actions button:hover {
    background-color: var(--bg-color);
    color: var(--h2-color);
    border: 2px solid var(--h2-color);
}

.form-status.success {
    color: lightgreen;
}

.form-status.error {
    color:rgb(255, 0, 0);
}

.cat-type{
    font-family: var(--font-secondary);
    color: var(--h2-color);
}

.dwnbtn-cont{
    width: 100%;
}

.g-recaptcha{
    display: block;
    width: 310px;
    height: 80px;
    overflow: hidden;
}

.ad-slot{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
    height: auto;
}