* {
    margin:0;
    padding:0;
    list-style:none;
    outline:none;
    border:none;
    text-decoration:none;
    /*
    font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    */
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}
a[href], input[type='submit'], input[type='image'], select, button {
    cursor:pointer
}

a,input {
    transition: all .2s linear;
}

img {
    max-width:100%
}

body {
    cursor:default;
    direction:rtl;
    width: 100%;
    min-height: 100vh;
    font-family: 'Rubik', sans-serif;
    overflow: hidden;
}
@media (max-width: 1100px) {
    body {
        overflow-y: scroll
    }
}
.main {
    width: 100%;
    min-height: 100vh;
}
.content {
    position: absolute;
    right: 0px;
    top: 0px;
    width: calc(100% - 400px);
    height: 100vh;
    text-align: center;
    position:relative;
    align-items:center;
}
.content:after {
    content:'';
    position:absolute;
    inset:0;
    background-color:rgba(255,255,255,.3);
    z-index:2
}
.content:before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right,transparent, #ffffff);
    z-index:2
}

#videobg {
    position: absolute;
    inset:0;
    width:100%;
    height: 100vh;
    z-index:-10;
    object-fit: cover;
    object-position: center;
}
#sticker {
    position:absolute;
    top:0;
    right:0;
    z-index:3;
    transform:translate(10%,-20%);
    max-height:200px;
}

#text {
    position: absolute;
    top: 10%;
    right: 5%;
    float: right;
    z-index: 3;
    width: auto;
    max-width: 100%;
    height: 70vh;
    aspect-ratio: 702 / 951;
    background-image: url('../images/content.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top right;
    border: 0px solid red;
}
@media (max-width: 1100px) {
    #text {
        top: unset;
        bottom: 10%;
        background-position: bottom center;
    }
}


@media (max-width: 1100px) {
    .content {
        width: 100%;
        height: 80vh;
    }
    #text {
        height: 60vh;
    }
    #videobg {
        height: 80vh;
    }
}

.side {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 400px;
    background-color: #f7f7f7;
    min-height: 100vh;
    text-align: center;
    padding: 40px;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.call {
    color:#a0a0a0;
    margin-top: 50px;
    gap:10px;
    font-size:1.1em
}

.call a {
    color:#ffffff;
    font-size:1.2em
}

.call a:hover {
}

.logo {
    display:block;
    margin:30px auto;
    max-width: 60%
}

@media (max-width:1100px){
    .side {
        width: 100%;
        top: 80vh;
        min-height: 20vh;
    }
    .logo {
        margin-top:0
    }

}

form {
    margin:20px 0;
    width: 100%;
    max-width:  500px;
    margin-left: auto;
    margin-right: auto;

}

form button {
    width: 100%;
    background-color:#685991;
    color: #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 5px 0 0 0;
    border: 0px;
    border-radius: 10px;
    border-bottom: 2px #483e65 solid;
    align-items:center;
    justify-content:center;
    font-size: 1.25em;
    gap: 10px;
    transition:all .2s ease
}
form button:hover {
    transform: scale(1.03);
    box-shadow:0 5px 10px rgba(0,0,0,.1)
}
form button svg {
    width:.7em;
    height:.7em
}
form fieldset {
    margin: 10px 0
}
/*
form fieldset:has(select) {
    position:relative;
    &:before {
        content:'';
        position:absolute;
        top:50%;
        right:20px;
        z-index:2;
        width:1em;
        height:1em;
        background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzEiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAzMSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1LjkxOTkgMTAuMjczOEwyNS4yNTU0IDAuOTM4MjcxQzI1Ljg4NTggMC4zMjk0MTUgMjYuNzMwMSAtMC4wMDc0ODgwNSAyNy42MDY1IDAuMDAwMTI3NTJDMjguNDgyOSAwLjAwNzc0MzA4IDI5LjMyMTIgMC4zNTkyNjcgMjkuOTQwOSAwLjk3ODk4NkMzMC41NjA3IDEuNTk4NzEgMzAuOTEyMiAyLjQzNzA0IDMwLjkxOTggMy4zMTM0MkMzMC45Mjc0IDQuMTg5OCAzMC41OTA1IDUuMDM0MTEgMjkuOTgxNyA1LjY2NDUxTDE4LjI4MyAxNy4zNjMxQzE3LjY1NjIgMTcuOTg5NyAxNi44MDYyIDE4LjM0MTcgMTUuOTE5OSAxOC4zNDE3QzE1LjAzMzYgMTguMzQxNyAxNC4xODM2IDE3Ljk4OTcgMTMuNTU2OCAxNy4zNjMxTDEuODU4MTkgNS42NjQ1MUMxLjI0OTMzIDUuMDM0MTEgMC45MTI0MzMgNC4xODk4IDAuOTIwMDQ4IDMuMzEzNDJDMC45Mjc2NjQgMi40MzcwMyAxLjI3OTE5IDEuNTk4NyAxLjg5ODkxIDAuOTc4OTg1QzIuNTE4NjMgMC4zNTkyNjYgMy4zNTY5NiAwLjAwNzc0MTk5IDQuMjMzMzQgMC4wMDAxMjY0OThDNS4xMDk3MiAtMC4wMDc0ODg5OSA1Ljk1NDAzIDAuMzI5NDE0IDYuNTg0NDMgMC45MzgyN0wxNS45MTk5IDEwLjI3MzhaIiBmaWxsPSIjQTNBM0EzIi8+Cjwvc3ZnPgo=') no-repeat center / 100%;
        transform:translateY(-50%);
        pointer-events:none
    }
}
*/
form input {
    width: 100%;
    padding:15px;
    background-color:#fff;
    color:#111;
    box-sizing:border-box;
    font:inherit;
    text-align:center;
    border-radius: 10px
}
form ::placeholder {
    opacity:.4;
    color:#111
}
form select {
    width: 100%;
    padding:15px;
    background-color:#fff;
    color:#888;
    box-sizing:border-box;
    font:inherit;
    text-align:center;
    border-radius:3px
}
label.error {
    display:block;
    color:#fff;
    background-color:#f172ac;
    font-size:.8rem;
    padding:5px
}

#Check-error {
    margin:5px 0 0
}
.form #cb, .form #fcb, .form #mcb {
    display: none
}
.form label {
    margin-right: 20px;
    display: block;
    text-align: right
}
.form label.error {
    color:#fff;
    background-color:#ff4c4c;
    margin-right:0;
    font-size:.8em;
    padding-right:5px;
    position:relative
}

@media (max-width:700px){
    .main {
        width: 100%;
    }
}


dialog {
    position: fixed;
    z-index: 100;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100vh;
    padding-top: 40vh;
    color: white;
    text-align: center;
    vertical-align: middle;
    text-align: center;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;

}
dialog h1 {
    font-size: 50px;
    font-weight: 900;
}
/*
dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
}
*/