* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
    --main-color: #4d4dff;
    --secondary-color: #ff00ff;
    --tertary-color: #00ffcc;
    --background-color: #000;
    --text-color: #f8e3e3;
    --second-text-color: #fff ;
    --main-heaing-font: font-family: 'Poppins', sans-serif;
    --main-para-text:font-family: 'Varela', sans-serif;
}


html,
body {
    width: 100vw;
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-bottom: 0px;
    overflow: hidden;
    background: url(../media2/Untitled2.png);
    position: relative;
    background-size: cover;
}



main {
    height: 100%;
    width: 100%;
    position: relative;
}

.flex-wrapper{
    position: absolute;
    background: #00000054;
    z-index: 3;
    width: min(44% , 60%);
    height: 45%;
    box-shadow: 1px 1px 40px #ffffff28 ,
    -1px -1px 40px #ffffff28;
    top: 10%;
    left: 10%;
    padding: 40px 0px 40px 40px ;
}

.flex-wrapper h1 {
    font-size: 2.5rem;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.flex-wrapper h5 {
    font-size: 1rem;
    color: var(--secondary-color);
    font-family: 'Varela', sans-serif;
    margin: 5px 0;   
}
.flex-wrapper p {
    color: #fff;
    font-family: 'Varela', sans-serif;
    font-size: 1.3rem;
    margin: 0px 0 40px;
    line-height: 16px;
}
a  {
    text-decoration: none;
}
button {
    color: var(--tertary-color);
    font-family: 'Poppins', sans-serif;
    padding: 20px 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border-radius: 8px;
    border: none;
    z-index: 4;
    cursor: pointer;
    font-size: 32px;
    position: relative;
    background: linear-gradient(90deg, var(--main-color) 10% , var(--secondary-color) 100%);
}

button::before{
    content: "";
    position: absolute;
    top: 0;
    border-radius: 8px;
    left: 0;
    bottom: 0;
    right: 0;
    transform: scaleX(0);
    transform-origin: left;
    z-index: -1;
    transition: all 0.3s ease-out;
    background: linear-gradient(90deg, var(--secondary-color) 10%, var(--main-color) 100%);
}

button:focus::before, button:hover::before{
    transform: scaleX(1);
    border-radius: 8px;
}
button:hover{
    color: white;
    transition: color 0.3s ease-out;
    box-shadow: 1px 1px 30px rgba(255, 255, 255, 0.1), -1px -1px 30px rgba(255, 255, 255, 0.1);
}
button:active {
    transform: scale(0.95);
    transition: all 0.2s ease-in;
    font-size: 32px;
}

.signs {
    position: absolute;
    bottom: 10%;
    right: 10%;
    z-index: 6;
    animation: right-left 30s infinite;
}





/** For tablet devices **/
@media (min-width: 768px) and (max-width: 1023px) {
    .custom-shape-divider-bottom-1687350580 svg {
        width: calc(147% + 1.3px);
        height: 238px;
    }
}

span svg {
    fill: var(--tertary-color);
    height: 60px;
    width: 60px;
    position: relative;
    top: 25px;
    left: 0px;
    animation: rotating-gear 5s linear infinite ;
}










.black-space::before {
    background: var(--background-color);

}

.black-space::before, .black-space::after {
    content: "";
    filter: blur(1rem);
    height: 9rem;
    position: absolute;
    width: 9rem;
    z-index: 1;
}


@keyframes right-left {
    0%{
        transform: translateY(-20%);
        transform: translateX(-20%);
    }
    20%{
        transform: translateY(-0%);
        transform: translateX(-0%);
    }
    40%{
        transform: translateY(-20%);
        transform: translateX(-20%);
    }
    60%{
        transform: translateY(-0%);
        transform: translateX(-00%);
    }
    80%{
        transform: translateY(-20%);
        transform: translateX(-20%);
    }
    100%{
        transform: translateY(-0%);
        transform: translateX(-0%);
    }
}

@keyframes rotating-gear {
  0% {
    transform: rotate(360deg) scale(0.98);
  }
  
  
  100% {
    transform: rotate(0deg);
  }
}


@media (min-width:1024px) and (max-width: 1440px) {
    .signs {
        position: absolute;
        bottom: 5%;
        right: 5%;
        z-index: 6;
        animation: right-left 30s infinite;
    }
    html,
    body{
        overflow: hidden;
    } 
    .flex-wrapper{
        position: absolute;
        background: #00000054;
        z-index: 3;
        width: 600px;
        height: 300px;
        box-shadow: 1px 1px 40px #ffffff50 ,
        -1px -1px 40px #ffffff3d;
        top: 10%;
        left: 10%;
        padding: 20px 40px;
        z-index: 9;
    }
    .flex-wrapper p {
        color: #fff;
        font-family: 'Varela', sans-serif;
        font-size: 18px;
        margin: 0px 0 40px;
        line-height: 16px;
    }
    span svg {
        fill: var(--tertary-color);
        height: 30px;
        width: 30px;
        position: relative;
        top: 10px;
        left: 25px;
        animation: rotating-gear 20s infinite ;
    }
    button {
        color: var(--tertary-color);
        font-family: 'Poppins', sans-serif;
        padding: 20px 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        border-radius: 8px;
        border: none;
        z-index: 4;
        cursor: pointer;
        width: 30%;
        bottom: 10%;
        font-size: 32px;
        position: absolute;
        background: linear-gradient(90deg, var(--main-color) 10% , var(--secondary-color) 100%);
    }
    .signs {
        position: absolute;
        bottom: 30%;
        right: 20%;
        z-index: 6;
        animation: right-left 30s infinite;
        height: 90px;
        width: 90px;
    }
}

/* @media (max-width:1039px) and (min-width: 820px) {
    nav {
        background: var(--main-color);
        width: 110px;
        border-radius: 50px 0% 0% 50px;
        height: 90px;
        position: absolute;
        right: 0;
        top: 10px;
        z-index: 3;
        display: flex;
        align-items: center;
        box-shadow: 1px 1px 40px #4d4dffa1 ,
        -1px -1px 40px #ff00ffa1;
        
    }
    html,
    body {
        overflow:hidden
    }
    
    nav img {
        height: 100px;
        width: 100px;
    }
    
    nav h1 {
        font-size: 32px;
        color: var(--second-text-color);
        font-family: 'Poppins', sans-serif;
        text-shadow: 1px 1px 40px #000;
        display: none;
    }
    .flex-wrapper{
        position: absolute;
        background: #000;
        z-index: 3;
        width: 40%;
        height: 80%;
        box-shadow: 1px 1px 40px #ffffff50 ,
        -1px -1px 40px #ffffff3d;
        top: 10%;
        left: 10%;
        padding: 40px;
        border-radius: 50px;
        z-index: 9;
    
    }
    
    .flex-wrapper h1 {
        font-size: 48px;
        color: var(--secondary-color);
        font-family: 'Poppins', sans-serif;
    }
    
    .flex-wrapper h5 {
        font-size: 16px;
        color: var(--tertary-color);
        font-family: 'Varela', sans-serif;
        margin: 3px 0;   
    }
    button {
        color: var(--tertary-color);
        font-family: 'Poppins', sans-serif;
        padding: 20px 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        border-radius: 8px;
        border: none;
        width: 100%;
        z-index: 4;
        cursor: pointer;
        font-size: 32px;
        position: relative;
        background: linear-gradient(90deg, var(--main-color) 10% , var(--secondary-color) 100%);
    }
    .signs {
        position: absolute;
        bottom: 10%;
        right: 0%;
        z-index: 6;
        animation: right-left 30s infinite;
        transform:scale(0.6)
    }
} */
@media (max-width:820px) and (min-width: 500px) {
    nav {
        background: var(--main-color);
        width: 110px;
        border-radius: 50px 0% 0% 50px;
        height: 90px;
        position: absolute;
        right: 0;
        top: 10px;
        z-index: 3;
        display: flex;
        align-items: center;
        box-shadow: 1px 1px 40px #4d4dffa1 ,
        -1px -1px 40px #ff00ffa1;
        
    }
    html,
    body {
        overflow:hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    nav img {
        height: 100px;
        width: 100px;
    }
    
    nav h1 {
        font-size: 32px;
        color: var(--second-text-color);
        font-family: 'Poppins', sans-serif;
        text-shadow: 1px 1px 40px #000;
        display: none;
    }
    .flex-wrapper{
        position: absolute;
        background: #000;
        z-index: 3;
        width: 60%;
        height: 50%;
        box-shadow: 1px 1px 40px #ffffff50 ,
        -1px -1px 40px #ffffff3d;
        top: 10%;
        left: 10%;
        padding: 40px;
        z-index: 9;
    
    }
    
    .flex-wrapper h1 {
        font-size: 48px;
        color: var(--secondary-color);
        font-family: 'Poppins', sans-serif;
    }
    
    .flex-wrapper h5 {
        font-size: 16px;
        color: var(--tertary-color);
        font-family: 'Varela', sans-serif;
        margin: 3px 0;   
    }
    button {
        color: var(--tertary-color);
        font-family: 'Poppins', sans-serif;
        padding: 20px 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        border-radius: 8px;
        border: none;
        width: 100%;
        z-index: 4;
        cursor: pointer;
        font-size: 32px;
        position: absolute;
        top: 30%;
        background: linear-gradient(90deg, var(--main-color) 10% , var(--secondary-color) 100%);
    }
    .signs {
        position: absolute;
        bottom: 0%;
        right: 10%;
        z-index: 6;
        animation: right-left 30s infinite;
        transform:scale(0.6)
    }

    .yes {
        position: relative;
        width: 100%;
        height: 50%;
    }
}

@media (max-width:450px) and (min-width: 320px) {
    html,
    body {
        overflow:hidden;
        padding: 0;
        margin: 0;
        
    }
    .flex-wrapper{
        background: none;
        z-index: 3;
        width: 100%;
        height: 800px;
        box-shadow: 1px 1px 0px #ffffff00 ,
        -1px -1px 0px #ffffff05;
        top: 14%;
        left: 10%;
        padding: 24px;
        border-radius: 0px;
        z-index: 9;
        position: relative;
        left: 0;
    }
    nav {
        background: var(--main-color);
        width: 100%;
        height: 100px;
        z-index: 3;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 1px 1px 40px #4d4dffa1 ,
        -1px -1px 40px #ff00ffa1;
        margin: 0;
        border-radius: 0px;
    }
    nav img {
        height: 100px;
        width: 100px;
        display: none;
    }
    nav h1 {
        font-size: 32px;
        color: var(--second-text-color);
        font-family: 'Poppins', sans-serif;
        text-shadow: 5px 5px 40px #000;
        text-align: center;
    }
    
    .flex-wrapper h1 {
        font-size: 32px;
        color: var(--secondary-color);
        font-family: 'Poppins', sans-serif;
        text-align: center;
    }
    
    .flex-wrapper h5 {
        font-size: 10px;
        color: var(--tertary-color);
        font-family: 'Varela', sans-serif;
        margin: 3px 0;   
        line-height: 0%;
        text-align: center;
    }
    
    button {
        color: var(--tertary-color);
        font-family: 'Poppins', sans-serif;
        padding: 20px 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        border-radius: 8px;
        border: none;
        width: 100%;
        z-index: 4;
        cursor: pointer;
        font-size: 32px;
        position: absolute;
        top: 0%;
        background: var(--secondary-color);
    }
    .yes {
        position: relative;
        width: 100%;
        height: 50%;
    }
    .signs {
        position: absolute;
        bottom: 0%;
        right: 10%;
        z-index: 6;
        animation: right-left 30s infinite;
        transform:scale(0.6);
        display: none;
    }
    .flex-wrapper p {
        color: #fff;
        font-family: 'Varela', sans-serif;
        font-size: 20px;
        margin: 20px 0 40px;
        line-height: initial;
        text-align: center;
    }
    span svg {
        fill: var(--tertary-color);
        height: 80px;
        width: 80px;
        position: relative;
        top: 320px;
        right: 50%;
        transform: translateX(-40px);
        animation: rotating-gear 20s infinite ;
        display: none;
    }
}