html {
    scroll-behavior: smooth;
}
/* PREDEFINED_CSS_ROOT_ELEMENT_CSS_START_FROM_HERE */
:root {
    --cabinetGroteskblack: "CabinetGrotesk-Black";
    --cabinetGroteskbold: "CabinetGrotesk-Bold";
    --cabinetGroteskmedium: "CabinetGrotesk-Medium";
    --cabinetGroteskregular: "CabinetGrotesk-Regular";
    --red: #e20818;
}
/* PREDEFINED_CSS_ROOT_ELEMENT_CSS_ENDS_HERE */
/* DOWNLOAD_FONT_INTEGRATION_CSS_START_FROM_HERE */
@font-face {
    font-family: "CabinetGrotesk-Black";
    src: url("../fonts/CabinetGrotesk-Black.ttf");
    font-weight: regular;
    font-style: normal;
}
@font-face {
    font-family: "CabinetGrotesk-Bold";
    src: url("../fonts/CabinetGrotesk-Bold.ttf");
    font-weight: regular;
    font-style: normal;
}
@font-face {
    font-family: "CabinetGrotesk-Medium";
    src: url("../fonts/CabinetGrotesk-Medium.ttf");
    font-weight: regular;
    font-style: normal;
}
@font-face {
    font-family: "CabinetGrotesk-Regular";
    src: url("../fonts/CabinetGrotesk-Regular.ttf");
    font-weight: regular;
    font-style: normal;
}
/* DOWNLOAD_FONT_INTEGRATION_CSS_ENDS_HERE */
/* GOBAL_CSS_CHANGES_START_FROM_HERE */
body {
    overflow-x: hidden !important;
    background-color: #141515;
}
h1, h2, h3, h4, h5, h6, p, span, ul, li, a, .btn-default, textarea, label {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
a:focus {
    text-decoration: none;
}
button, input {
    outline: none !important;
}
.container-fluid {
    padding: 0px 20px;
}
.header-wrapper {
    position: fixed;
    width: 100%;
    top: 0%;
    padding: 25px 0px 0px 0px;
}
.common-bg-wrap-img {
    text-align: center;
    margin: 50px 0px 0px 0px;
}

.common-bg-wrap-img img {
    width: 260px;
}
/* GOBAL_CSS_CHANGES_ENDS_HERE */
.about-first-wrapper {
    padding: 100px 0px;
}
.about-first-wrap-text h6 {
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.about-first-wrap-text h5 {
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.about-first-wrap-text h5 span {
    color: var(--red);
}
.about-first-wrap-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.about-first-wrap-text a {
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
.about-first-wrap-img img {
    box-shadow: 0px 30px 60px 0px #00000054;
}
.about-second-wrapper {
    padding: 100px 0px;
}
.about-second-wrap-text {
    margin: 0px 0px 50px 0px;
}
.about-second-wrap-text h6 {
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.about-second-wrap-box {
    padding: 25px 25px;
    background-color: #161717;
    box-shadow: 0px 8px 31px 0px rgb(0 0 0 / 31%);
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}
.about-second-wrap-box::before {
    content: '';
    position: absolute;
    background-color: var(--red);
    width: 40px;
    height: 40px;
    right: 0%;
    top: 0%;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.wrap-box-2::before {
    background-color: #ecac01;
}
.wrap-box-4::before {
    background-color: #ecac01;
}
.about-second-wrap-text h5 {
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
}
.about-second-wrap-text h5 span {
    color: var(--red);
    display: block;
}
.about-second-wrap-text {
    margin: 0px 0px 50px 0px;
}
.about-second-wrap-box h6 {
    font-size: 35px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.about-second-wrap-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
}
.about-second-wrap-btn {
    display: flex;
    justify-content: space-between;
}
.about-second-wrap-btn a {
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
.wrap-box-1 {
    animation: mymove-2 2s infinite alternate;
}
.wrap-box-3 {
    animation: mymove-2 2s infinite alternate;
}
.wrap-box-2 {
    animation: mymove-1 2s infinite alternate;
}
.wrap-box-4 {
    animation: mymove-1 2s infinite alternate;
}
.about-second-wrap-btn-f {
    display: flex;
    justify-content: center;
    margin: 100px 0px 0px 0px;
}
.about-second-wrap-btn-f a {
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
/* / SERVICE-CSS-START-FROM-HERE / */
.service-first-wrapper {
    padding: 100px 0px;
}
.service-first-wrap-text h6{
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.service-first-wrap-text h5{
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.service-first-wrap-text h5 span{
    color: var(--red);
}
.service-first-wrap-text p{
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.service-first-wrap-box{
    padding: 25px 25px;
    background-color: #161717;
    box-shadow: 0px 8px 31px 0px rgb(0 0 0 / 31%);
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}
.service-first-wrap-box ::before{
    content: '';
    position: absolute;
    background-color: var(--red);
    width: 40px;
    height: 40px;
    right: 0%;
    top: 0%;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.service-wrap-box-2 ::before{
    background-color: #ecac01;
}
.service-first-wrap-box h6{
    font-size: 35px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.service-first-wrap-box p{
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
}
.service-first-wrap-box a{
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
/* / SERVICE-CSS-END-HERE / */
/* / SOLUTION-CSS-START-FROM-HERE / */
.solution-first-wrapper {
    padding: 100px 0px;
}
.solution-second-wrap-text {
    margin: 0px 0px 50px 0px;
}
.solution-first-wrap-text h6 {
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.solution-first-wrap-text h5 {
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.solution-first-wrap-text h5 span {
    color: var(--red);
}
.solution-first-wrap-text p{
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.solution-second-wrapper {
    padding: 100px 0px;
}
.solution-second-wrap-text h6 {
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.solution-second-wrap-text h5 {
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.solution-second-wrap-text h5 span {
    color: var(--red);
}
.solution-second-wrap-text p{
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.solution-second-wrap-box {
    padding: 25px 25px;
    background-color: #161717;
    box-shadow: 0px 8px 31px 0px rgb(0 0 0 / 31%);
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.solution-second-wrap-box::before {
    content: '';
    position: absolute;
    background-color: var(--red);
    width: 40px;
    height: 40px;
    right: 0%;
    top: 0%;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.solution-wrap-box-2::before {
    background-color: #ecac01;
}
.solution-second-wrap-box h6 {
    font-size: 35px;
    font-family: var(--cabinetGroteskbold);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.solution-second-wrap-btn {
    display: flex;
    justify-content: space-between;
}
.solution-second-wrap-btn a {
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
/* / SOLUTION-CSS-END-HERE / */
/* COMMON_BANNER_CSS_START_HERE */
.common-bg-wrapper {
    background: url(../images/line.png);
    background-position: center;
    background-size: contain;
    height: 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0px 0px 0px;
    position: absolute;
    height: 100vh;
    width: 100%;
    align-items: center;
    align-content: center;
    /* display: none; */
}
.common-bg-wrap-text {
    text-align: center;
    height: 200px;
}
.common-bg-wrap-text h6 {
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.common-bg-wrap-text h6 span {
    color: var(--red);
}
.common-bg-wrap-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    width: 35%;
    margin: 0 auto;
}
.common-mouse {
    text-align: center;
    margin: -100px 0px 0px 0px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.common-mouse h6 {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
}
.common-mouse-pin {
    width: 30px;
    height: 50px;
    border: 2px solid var(--red);
    border-radius: 30px 30px 30px 30px;
    margin: 0px 0px 20px 0px;
    position: relative;
    overflow: hidden;
}
.common-mouse-pin span {
    background-color: var(--red);
    width: 2px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0%;
    transform: translateY(60%);
    animation: pin-1 1s infinite alternate;
}
/* COMMON_BANNER_CSS_END_HERE */
.contact-first-wrapper {
    padding: 100px 0px;
}
.contact-first-wrap-text h6 {
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.contact-first-wrap-text {
    margin: 0px 0px 50px 0px;
}
.contact-first-wrap-text h5 {
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.contact-first-wrap-text h5 span {
    color: var(--red);
}
.contact-first-wrap-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
}
.contact-first-wrap-feild {
    margin: 0px 0px 25px 0px;
}
.contact-first-wrap-feild input {
    width: 100%;
    height: 50px;
    clip-path: polygon(3% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
    padding: 0px 0px 0px 20px;
}
.contact-first-wrap-feild input::placeholder {
    color: #FFF;
}
.contact-first-wrap-feild textarea {
    width: 100%;
    height: 150px;
    clip-path: polygon(2% 0%, 100% 0%, 100% 100%, 0 100%, 0 15%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
    padding: 20px;
    outline: none;
}
.contact-first-wrap-feild textarea::placeholder {
    color: #FFF;
}
.contact-first-wrap-feild button {
    width: 100%;
    height: 50px;
    clip-path: polygon(1.5% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
.contact-second-wrapper {
    background: url(../images/map.jpg);
    background-position: center;
    background-size: cover;
    height: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-main-wrapper {
    /* background: url(../images/footer-bg.png); */
    /* background-position: center; */
    /* background-size: contain; */
    /* height: 410px; */
    padding: 250px 0px 15px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    visibility: hidden;
    position: fixed;
    width: 100%;
    bottom: 0;
}
.footer-main-wrap-link ul {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.footer-main-wrap-link ul li a {
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    position: relative;
}
.footer-main-wrap-link ul li a::before {
    content: '';
    position: absolute;
    background-color: #FFF;
    width: 100%;
    height: 1px;
}
.index-banner-wrapper .common-bg-wrap-text h6 {
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    width: 60%;
    margin: 0px auto 10px;
}
.index-banner-wrapper .common-bg-wrap-text h5 {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0 auto 10px;
}
.index-banner-wrapper .common-bg-wrap-text p {
    font-size: 24px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px auto 10px;
    width: 50%;
}
.index-basic-wrapper {
    padding: 100px 0px;
    height: 100vh;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    visibility: hidden;
}
.index-first-wrapper {
    padding: 100px 0px;
    height: 100vh;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    visibility: hidden;
}
.index-two-wrapper {
    padding: 100px 0px;
    height: 100vh;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    visibility: hidden;
}
.index-three-wrapper {
    padding: 100px 0px;
    height: 100vh;
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    visibility: hidden;
}
.index-first-11 {
    position: absolute;
    left: -30%;
    z-index: -1;
    width: 60%;
}
/*.div0,.div2,.div3 {
    margin: 0px 0px 30px 0px;
    visibility: hidden;
}*/
.index-first-wrap-c {
    margin: 0px 0px 30px 0px;
    visibility: hidden;
}
.index-first-wrap-text {
    width: 80%;
    margin: 0% 0% 0% 20%;
}
.index-first-wrap-text h6 {
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.index-first-wrap-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
}
.index-second-wrapper {
    padding: 100px 0px;
    position: absolute;
    height: 100vh;
    width: 100%;
    visibility: hidden;
}
.index-second-22 {
    position: absolute;
    width: 60%;
    right: -40%;
}
.index-first-list ul {
    display: flex;
    flex-wrap: wrap;
}
.index-first-list ul li {
    width: 50%;
    line-height: 2;
    position: relative;
    padding: 0px 0px 0px 20px;
}
.index-first-list ul li::before {
    content: '';
    position: absolute;
    background-color: #e20818;
    width: 6px;
    height: 6px;
    border: 2px solid #e20818;
    border-radius: 10px;
    left: 0;
    top: 45%;
}
.index-first-list ul li a {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
}
.index-first-list-btn {
    display: flex;
    margin: 20px 0px 0px 0px;
    gap: 30px;
}
.list-btn-1 a {
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: #e20818;
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
.list-btn-2 a {
    width: 120px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #e20818;
}
.index-first-list-1 ul {
    display: block;
}
.index-fifth-wrapper {
    padding: 100px 0px;
    position: fixed;
    top:0;
    height: 650px;
    width: 100%;
    visibility: hidden;
}

.index-fifth-img {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -20%;
}
.index-fifth-text-wrap {
    text-align: center;
}
.index-fifth-text-wrap h6 {
    font-size: 30px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.index-fifth-text-wrap h6 span {
    color: #e20818;
}
.index-fifth-text-wrap p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.index-fifth-text-wrap p span {
    color: #e20818;
}
.index-fifth-text-wrap a {
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
.index-fifth-img {
    text-align: center;
}
.copyright-flex {
    display: flex;
    justify-content: space-between;
}
.copyright-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
}
.copyright-icon ul {
    display: flex;
    gap: 10px;
}
.copyright {
    border-top: 1px solid #FFF;
    padding: 15px 0px 0px 0px;
}
.solutuon-third-wrapper {
    padding: 50px 0px;
}
.solutuon-third-wrap-text {
    margin: 0px 0px 50px 0px;
}
.solutuon-third-wrap-text h6 {
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.solutuon-third-wrap-text h5 {
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.solutuon-third-wrap-text h5 span {
    color: #e20818;
}
.solutuon-img {
    margin: 0px 0px 50px 0px;
}

/* HARDWARE-CSS-START-FROM-HERE */

.hardware-first-wrapper{
    padding: 100px 0px;
}

.hardware-first-wrap-text h6{
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.hardware-first-wrap-text h5{
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.hardware-first-wrap-text h5 span {
    color: var(--red);
}
.hardware-first-wrap-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.hardware-second-wrap-text-1 h6{
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.hardware-second-wrap-text-1 h5{
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.hardware-second-wrap-text-1 h5 span{
    color: var(--red);

}
.hardware-second-wrap-text-1 p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.hardware-second-wrap-text h5{
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.hardware-second-wrap-text h5 span {
    color: var(--red);
}
.hardware-second-wrap-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.hardware-second-wrap-text h6 {
    font-size: 35px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.hardware-second-wrap-text a {
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}

.hardware-second-wrap-box{
    padding: 25px 25px;
    background-color: #161717;
    box-shadow: 0px 8px 31px 0px rgb(0 0 0 / 31%);
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.hardware-second-wrap-btn a{
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
.hardware-second-wrap-box::before {
    content: '';
    position: absolute;
    background-color: var(--red);
    width: 40px;
    height: 40px;
    right: 0%;
    top: 0%;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.wrapp-box-yellow::before {
    background-color: rgb(236, 172, 1);
}
.hardware-second-wrap-text {
    margin: 0px 0px 50px 0px;
}


/* HARDWARE-CSS-END-FROM-HERE */

/* SOFTWARE-CSS-END-FROM-HERE */
.software-first-wrapper{
    padding: 100px 0px;
}
.software-first-wrap-text h6 {
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.software-first-wrap-text h5{
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.software-first-wrap-text h5 span {
    color: var(--red);
}
.software-first-wrap-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.software-second-wrap-text h6 {
    font-size: 14px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.software-second-wrap-text h5{
    font-size: 50px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.software-second-wrap-text h5 span {
    color: var(--red);
}
.software-second-wrap-text p {
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    color: #FFF;
    margin: 0px 0px 20px 0px;
}
.software-second-wrap-box{
    padding: 25px 25px;
    background-color: #161717;
    box-shadow: 0px 8px 31px 0px rgb(0 0 0 / 31%);
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.software-second-wrap-box h6{
    font-size: 35px;
    font-family: var(--cabinetGroteskblack);
    color: #FFF;
    margin: 0px 0px 10px 0px;
}
.software-second-wrap-box a{
    width: 130px;
    height: 38px;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0 100%, 0 40%);
    background-color: rgb(226 8 24 / 35%);
    color: #FFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: var(--cabinetGroteskregular);
    border: 2px solid #e20818;
}
.software-second-wrap-box::before {
    content: '';
    position: absolute;
    background-color: var(--red);
    width: 40px;
    height: 40px;
    right: 0%;
    top: 0%;
    clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.wrapp-box-2::before {
    background-color: rgb(236, 172, 1);
}
.wrapp-box-3::before {
    background-color: rgb(236, 172, 1);
}

.index-first-wrap-1 .options{
    overflow: hidden;
}
/*.index-first-wrap-1 .options,.index-first-wrap-2 .options,.index-first-wrap-3 .options{
    height: auto !important;
}*/

.index-first-wrap-text .options {
    height: 0px;
    overflow: hidden;
    position: absolute;
}

.index-first-wrap-2 ul li,.index-first-wrap-3 ul li {
    width: 100%;
}


/* width */
::-webkit-scrollbar {
    width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* SOFTWARE-CSS-END-FROM-HERE */

@keyframes mymove-1 {
    from {
        transform: translateY(20%);
    }
    to {
        transform: translateY(0%);
    }
}
@keyframes mymove-2 {
    from {
        transform: translateY(0%);
    }
    to {
        transform: translateY(20%);
    }
}
@keyframes rotate-1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes pin-1 {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(60%);
    }
}