:root{
    --main-dark:#080808;
    --surface-dark:#1A1A1A;
    --surface-hover-dark:#2B2620;
    --dark-text:#F5F2EA;
    --dark-text-hover:#77736A;
    --boarder-dark:#2B2620;

    --main-light:#F5F2EA;
    --surface-light:#FFFFFF;
    --surface-hover-light:#D8C7A8;
    --light-text:#080808;
    --light-text-hover:#1A1A1A;
    --boarder-light:#D8C7A8;
    
    --button-color:#D71920;
    --button-color-hover:#7C0000;

    --font-en-main: "Bebas Neue", sans-serif;
    --font-en: "Inter", sans-serif;
    --font-ar-main: "Changa", sans-serif;
    --font-ar: "IBM Plex Sans Arabic", sans-serif;
}
html[lang="en"] {
    --main-font: var(--font-en);
    --heading-font: var(--font-en-main);
}

html[lang="ar"] {
    --main-font: var(--font-ar);
    --heading-font: var(--font-ar-main);
}
html.mode-dark{
    --main-color:var(--main-dark);
    --surface-color:var(--surface-dark);
    --surface-hover-color:var(--surface-hover-dark);
    --text-color:var(--dark-text);
    --text-hover-color:var(--dark-text-hover);
    --boarder-color:var(--boarder-dark);
}
html.mode-light{
    --main-color:var(--main-light);
    --surface-color:var(--surface-light);
    --surface-hover-color:var(--surface-hover-light);
    --text-color:var(--light-text);
    --text-hover-color:var(--light-text-hover);
    --boarder-color:var(--boarder-light);
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing:border-box;
    font-family: var(--main-font);
}
body{background-color:var(--main-color) ;}
main img{
    width:100%;
    height: auto;
}
.main{
    position: relative;
}
.cont-main{
    position: absolute;
    top:70%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    
}
.cont-main a{
    color:var(--dark-text);
    background-color:var(--button-color);
    width: 200px;
    height: 50px;
    border-radius: 4px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cont-main a:hover,.cont-main a:active{
    background-color: var(--button-color-hover);
    color: var(--dark-text-hover);
    transition: 0.3s;
}
@media (max-width: 767px)
{
    .cont-main{
        gap: 10px;
        padding: 0px 15px;
    }
    .cont-main a{
        width: 140px;
        height: 45px;
        font-size: 14px;
    }
}