:root {
    --primary-color: ;
    --secondary-color: ;
    --accent-color: ;
    --tertiary-color: ;
    --font-1: hel;
    --font-2: ;
    /* --font-3: font3; */
    --heading-size: ;
    --para-size: ;
    --padding: ;
}

body {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    background: linear-gradient(to top, #0f0f0f, rgb(19, 19, 19), #0c0c0cd3);

}

p {
    letter-spacing: 1.3px;

}



.hero {
    min-height: 100vh;
    padding: var(--padding);
    margin-top: 30px;
    padding-top: 120px !important;
}



.hero .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
    z-index: 30;
    position: relative;
    margin-top: 40px;
}


.hero h1 {
    font-size: 19vw;
    font-weight: bold;
    text-align: center;
    letter-spacing: 5px;
    font-family: var(--font-4);


    background: linear-gradient(0deg, #68686801, #626262c9, #efefef);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero .content>.left {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero .tag {
    background: #131313;

    /* background-image: linear-gradient(to top, #212121, #1a1a1a, #2d2d2d, #282828); */
    background-image: linear-gradient(to bottom, #424242, #363636, #2a2a2a, #1e1e1e, #131313);
    border-radius: 100px;
    width: fit-content;
    border: .5px solid rgb(85, 85, 85);
    box-shadow: inset 2px 2px 3px 0px rgb(95, 95, 95);
    font-family: var(--para-size);
    padding: 8px 25px;
    font-weight: bolder;
    margin-bottom: 20px;

    &:hover {
        cursor: pointer;
    }
}

.hero .content>.left h2 {
    font-size: var(--heading-size);
}

.hero .content>.left>p {
    font-size: 16px;
    width: min(600px, 100%);
    margin-bottom: 40px;
    font-size: var(--para-size);
    /* font-weight: lighter; */

}

.hero .content>.left .socials {
    display: flex;
    flex-direction: column;
    gap: 15px;

}

.hero .socials .social {
    border-radius: 10px;
    width: 100%;
    height: 13vh;
    backdrop-filter: blur(10px);
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    padding: 15px;
    justify-content: space-between;
    background: linear-gradient(360deg, #efefef00, rgb(19, 19, 19), #2424249c);
    border: 1px solid rgb(65, 65, 65);
    transition: all .4s ease;

    &:hover {
        transform: translateY(-3px);
    }

}

.hero .social .box {
    width: 65px;
    height: 60px;
    border-radius: 8px;
    box-shadow: inset 1.5px 1.5px 2px 0px rgb(97, 97, 97);
    background: linear-gradient(360deg, #efefef00, rgb(19, 19, 19), #5757579c);
    padding: 10px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}


.hero .social .box img {
    width: 40px;
    height: 45px;
    opacity: .9;
}

.hero .social .left {
    display: flex;
    justify-content: space-between;
    gap: 15px;

}

.hero .social .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px 0px;
}

.hero .social .text h6 {
    font-size: 20px;
}

.hero .social .text p {
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    color: #999999;

}

.hero .social .right {
    border-radius: 50%;
    width: 55px;
    height: 55px;
    box-shadow: inset 1.5px 1.5px 2px 0px rgb(97, 97, 97);
    background: linear-gradient(360deg, #efefef12, #efefef00, rgb(19, 19, 19));
    display: flex;
    justify-content: center;
    align-items: center;

}

.hero .social .right img {
    width: 30px;
    height: 30px;
    opacity: .9;
    rotate: -45deg;
}


/*  */

.hero .right {
    height: 100%;
    display: flex;

}

.hero .right form {
    margin-top: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(360deg, #efefef00, rgb(19, 19, 19), #2424249c);
    border-radius: 10px;
    width: 100%;
    background: linear-gradient(360deg, #efefef00, rgb(19, 19, 19), #2424249c);
    border: 1px solid rgb(56, 56, 56);

}

.hero .right form input,
.hero form textarea {
    border-radius: 10px;
    padding: 15px;
    background-color: rgba(45, 45, 45, 0.544);
    border: 1px solid rgb(62, 62, 62);
    width: 100%;
    font-family: var(--font-2);
    color: var(--primary-color);
    letter-spacing: 1.3px;
    font-size: 20px;
    border: unset;
    outline: unset;
    border: 1px solid rgb(49, 49, 49);



    /* box-shadow: inset 0px 0px 5px 0px rgb(245, 245, 245); */

}

.hero form input {
    min-height: 8vh;
}

.hero form textarea {
    min-height: 34vh;
}

.hero form button {
    padding: 15px;
    border-radius: 10px;
    font-size: 25px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    transition: all .3s ease;

    &:hover {
        cursor: pointer;
        transform: translateY(-5px);
    }

}



footer .left .socials li i {
    color: var(--primary-color) !important;
}

@media (max-width:1200px) {
    .hero .content {
        grid-template-columns: 1fr;
    }

    .hero .right form {
        padding: 15px;
    }

    .hero h1 {
        font-size: 18vw;
    }
}

@media (max-width:760px) {
    .hero {
        padding-top: 40px !important;
    }

    .hero form input {
        min-height: 7vh;
    }

    .hero .socials .social {
        padding: 10px 15px;
        height: 12vh;
    }
}

@media (max-width:500px) {
    .hero .content>.left>p{
        line-height: 1.6;
    }
    .hero {
        padding-top: 45px !important;
    }

    .hero form button {
        padding: 10px;
    }

    .hero .socials .social {
        padding: 10px 10px;
        height: 10vh;
    }

    .hero .socials .box {
        width: 50px;
        height: 45px;
    }

    .hero .social .box img {
        width: 30px;
        height: 35px;
    }

    .hero .social .right {
        width: 45px;
        height: 45px;
    }

    .hero .social .right img {
        width: 20px;
        height: 20px;
    }

    .hero .tag {
        font-size: 22px;
    }

    .hero h1 {
        font-size: 18vw;
    }

    .hero form textarea {
        min-height: 29vh;
    }
}

@media (max-width:400px) {
    .hero .social .text p {
        font-size: 3vw;
    }
}