:root{
    /* colors */
    --accent-clr: #d16527;
    --body-black: #161616;
    --second-black: #121212;

    /* text clrs*/
    --heading-clr:#ededed;
    --secondary-txt: #c2c2c2;

    /* border */
    --border-clr: #343434;

    /* font families */
    --mulish: "Mulish", sans-serif;
    --chakra: "Chakra Petch", sans-serif;

    /* transitions */
    --transition-1: all 0.2s linear;
}

/* backgorunds */

.secBlack{
    background-color: var(--second-black);
}

/* text styles */

.chakra{
    font-family: var(--chakra);
}
.mulish{
    font-family: var(--mulish);
}

.heading-clr{
    color: var(--heading-clr);
}
.text-first{
    color: var(--accent-clr);
}
.text-second{
    color: var(--secondary-txt) !important;
}

.secHeading{
    z-index: -1;
    color: red;
    user-select: none;
    color: transparent;
    -webkit-text-stroke: 2px #242424; /* 2px border with black color */
}

.accent-text{
    transition: var(--transition-1);
}
.accent-text:hover{
    color: var(--accent-clr);
}

/* images styles */

.invert{
    filter: invert(1) !important;
}

/* padding and margin */

.pt-70{
    padding-top: 138px;
}
.pb-70{
    padding-bottom: 138px;
}


/* buttons */
.styled-btn{
    color: white;
    font-weight: bold;
    font-size: 18px;
    line-height: 1.3em;
    background-color: var(--accent-clr);
    padding: 18px 39px 15px;
    border: 2px solid var(--accent-clr);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    font-family: chakra petch, sans-serif;

    transition: var(--transition-1);
}
.styled-btn::after{
    content: '';
    position: absolute;
    top: 58%;
    left: -26%;
    width: 206%;
    height: 35%;
    opacity: 0;
    transform: rotate(36deg);
    background: linear-gradient(to right, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, .13) 77%, rgba(255, 255, 255, .5) 92%, #fff 100%);
}
.styled-btn:hover::after{
    opacity: 1;
    top: -30%;
    left: 25%;
    transition: left 3.5s, top 3.5s, opacity .15s ease;
}
.styled-btn:hover{
    color: #fff;
    background-color: initial;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 100% 100%, 0 100%, 0 20px);
}

.sec-btn{
    border: 1px solid var(--border-clr);
    background: var(--body-black);
    display: flex;
    padding: 14px 26px;
    color: white;
    font-weight: 700;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.sec-btn.active{
    background: var(--accent-clr);
}


/* hover and pointer */

.pointer{
    cursor: pointer;
}